Advertisement
Articles

Windows Apps for Web Developers

by

When the editor of Nettuts+ requested an article to show Windows developers love by listing popular web development apps, I was all over it. OSX devs get a lot of attention, so it's good to mix things up a bit.

What I want to do is list the development tools that I frequently use as a web developer on Windows. It may not include your favorite, and if it doesn't, please let me know within the comments section. I'm always anxious to find new tools to enhance my workflow!


Writing Code

Visual Studio 2012

I wrote about Visual Studio before, and I think it's an awesome IDE. It's feature-rich with tons of bells and whistles.

Web Essential Extension for VS2012

Thank goodness browser-based debugging tools have evolved to what they are today.

This is the extension that makes Visual Studio great for web development. It brings functionality that web developers need such as:

  • Bundling of files for future processing
  • Minification of assets
  • JSHint support for linting of your JavaScript code
  • Top client-side templating engines including Handlebars, Mustache and JSRender
  • The LESS stylesheet language with on-the-fly previewing
  • CoffeeScript and TypeScript

Mads Kristensen, the creator of the extension, is a rockstar!

Sublime Text 2

It's the little editor that can. Sublime Text is an amazing tool, and Package Control rounds it out with the extensions you need to really streamline your development. Nettuts+ has a TON of articles on this powerful editor, including a full (and free) course.


Browsers

I shoot for cross-browser sites, so having the broadest possible coverage is key. I also like to stay on top of new features that'll be coming out shortly, and I also install dev and nightly browser builds to stay in the loop. Here's the list of the browsers I use for testing:

One thing to note is that Safari no longer offers its newest version of Safari on Windows. It looks like v5.1.7 will be the last one, but I still keep it around for testing.


Browser-Based Dev Tools

Thank goodness browser-based debugging tools have evolved to what they are today. Otherwise, we'd still be using alert() boxes to test our code. The great thing is that every major modern browser has built-in, sophisticated debugging tools to help you analyze your code, site performance and more. Here's an article I wrote about IE's F12 Developer Tools to get you up-to-speed.


Browser Extensions

I find browser add-ons and extensions invaluable to my troubleshooting work. Not only do they help in debugging code, but they also make creating pages easier.

Firefox:

I'm considering Currents for keeping my desktop and laptops in sync.

  • Firebug - The old reliable that kicked off the browser-tool revolution. Still awesome in my book.
  • ColorZilla - Gives me a color dropper that can help me snag the color code for most anything on a page. Love it!
  • MeasureIt - Ever wanted to see the dimensions of something on a page. This is the extension to get.
  • YSlow - The original add-on created by Steve Souders while he was at Yahoo! to help developers analyze key attributes of their site's performance.
  • Page Speed - Steve then moved to Google and came out with Page Speed. Both are awesome and apply his principles for improving site performance.
  • Web Developer Toolbar - This is always the second add-no I install because it gives me such granular details about my pages. The "Generated Source" option alone is worth it.

Mozilla's Add-on hub has a number of great add-ons--not only for web development, but for all types of fun things. Be sure to check it out.

Chrome:

  • Chrome Sniffer - Gives me a quick glance at which libs and frameworks are used on a specific page.
  • Web Developer Toolbar - It's the same as the add-on I described above but ported to Chrome.
  • Pendule - Very similar to the Web Developer Toolbar but I find it's UI better and it's resize viewport feature is really nicely laid out.

Version Control

Git has won; hands down. And there's a plethora of tools available; some are great and some feel overly-complicated.

  • Git (command line) - Call me old school but I really like using Git via the command line.
  • GitHub for Windows - With that said, Github's Windows client is really slick and makes it easy to use Git and their services via an attractive user interface.

Virtualization

Even on Windows, I still need to use VMs for non-modern versions of IE, and while I wish I could test these different versions side-by-side, at least I know I can spin up VM instances and workaround this. Here's the software I use:

  • VirtualBox - Easy to use, supports every major OS and best of all, it's free!
  • BrowserStack.com - If I need to see how my site will look like on another OS, I just spark up this great service and it creates a virtualized browser session in my own browser. It even supports local development so I can tunnel between my local dev and BrowserStack's cloud servers.
  • modern.IE - Microsoft is trying to lower the friction to testing IE and this project is a big step towards that. You can scan your site for common compat issues and download VMs for testing IE versions.

VMs

As I mentioned before, I use VMs for testing non-modern versions of IE. Thankfully, I don't have to go grab the old VPC images which limited my options for VM software. I can now go to modern.IE and grab VMs for my platform.

  • IE8 & 9 - Available on modern.IE in a variety of target OSes and VM platforms.
  • Ubuntu Server - Pull down the iso for one of the most popular Linux distros and go.

Screencasts

Screencasts are one of the best ways of helping to teach developers. For Windows, the best option, in my opinion is Camtasia Studio 8. It's makes creating, editing and producing screencasts trivial. I was up and running with it in an hour and TechSmith offers free tutorial videos to get you started quickly.


Screen Capture

We've all been there. We want to do a quick screen grab but pressing "PrtScn", and pasting into MS Paint is the suck. My choice for this is Snagit. It binds itself to the "PrtScn" key and allows you to easily choose which parts of the screen you want to grab. It can even do a full page scroll in a browser if the page is longer than the viewport. Once the grab is done, you have a full array of editing tools to tweak the image and post it. Solid tool.


Local Servers

Web developers need web servers, and because I work with both MS and non-MS web developers, I like to have the option of switching between IIS (which a local version comes built into Windows) and WampServer which makes working with Apache, MySQL & PHP so easy.

I also have Node.js installed but I haven't jumped into it yet. It's definitely on my radar and a must-have since so many tools (like Grunt) are building on it.


Communication

I'm a remote worker, so staying in contact is vital to me. I try to use as many tools as possible to be able to communicate with my co-workers and peers in the community. Here's what I use:

  • Skype - Not sure if there's any other calling service that works as well as Skype. For voice and video, I don't know of any better.
  • Pidgin - This open source IM client is great and easy to setup.
  • XChat - It's interesting to see IRC picking up again after IM was the choice of chatter for so long. XChat has served me well in this space

Command Line

My *nix brethren tell me how they spend their lives in the terminal. I can't say I do the same, but when I do, I choose Windows PowerShell. Personally, it's just a "feel" thing since the way you work in it (e.g.: accessing directories) reminds me of *nix-based terminals. I'm definitely not takng full advantage of its features, but I do like it.


FTP

For my FTP needs, I've not found anything that replaces FileZilla. It's open-source and jammed to the rim with the features I want. It would be nice if it had AWS support, but other than that, it's a favorite of mine.


HTTP Web Debugging Proxies

I wrote about web debugging proxies recently, explaining the real benefits of using a third party traffic analyzer to inspect your HTTP requests. These are must-have tools, no matter which OS you work on.

  • Fiddler - In my opinion this is the best proxy for Windows. So many features and you can get a 300+ page book to boot that tells you EVERYTHING you need to know about using it.
  • Charles - A VERY close second and it's cross-platform to boot. This is my choice for OSX and Linux. If you want a consistent UI across all OSes, this is the one to choose.

TCP/IP

Can you believe that Windows devs sometimes have to telnet or SSH into servers? Yeah it happens because not only do we work in Windows, but many of us support *nix systems and users. Go figure. Putty is the way to go for this, and it's free as well.


Online Storage

The following aren't necessarily apps, but these online storage services are useful for sharing code with peers:

I've also heard about a new service by Carbonite called Currents, which allows you to keep folders and files in sync. I'm considering Currents for keeping my desktop and laptops in sync.


More?

This is a pretty big list and as I was writing it I was floored by the number of apps I regularly use, but I'm even more curious about the number of apps I haven't heard of yet. I hope this list helps some of you, and I also hope you contribute in the comments. I want to learn about cool new tools.

Related Posts
  • Code
    Tools & Tips
    Browser Testing in the Cloud ReduxBrowser testing cloud redux retina preview
    I've written quite a bit about browser testing solutions trying to help identify techniques and tools that make cross-browser development easier. My last article on the subject covered how to use BrowserStack to test any number of browsers all from one central tool; your own browser. I was on a Windows PC back then so testing multiple browsers was a bit easier and testing tools were mainly complementary to my work. Now that I'm on OS X, the need for tools to round out my testing strategies is even more important, specifically because of the lack of Internet Explorer on the OS. I'm a bit of a stickler for what I install on my computers and I prefer online tools when available. I'm also always on the hunt for new tools that make cross-browser testing easier and decided to give CrossBrowserTesting.com a run. I'll go over some of the key features of the service and how to leverage it to improve your testing capabilities.Read More…
  • Code
    Articles
    Coding With KodingCoding with koding retina preview
    Cloud IDEs have been around for a little while now, and they have been pretty good for things like pair programming, or cases where you want to code consistently no matter where you are. Koding just came out of private beta, and they would like to take this notion a couple steps further, with their "cloud ecosystem". In this article we will take a look at what Koding is, as-well as some of the benefits you can get from using it.Read More…
  • Code
    Tools & Tips
    Coding in the CloudCoding in cloud retina preview
    The Internet has allowed us to work anywhere we want, giving us tremendous flexibility in choosing where we'd like to plant ourselves to build the next great app. Not being tied to an office desk has been a blessing to many who cherish the ability to work in varying environments and draw inspiration from their surroundings. But for the most part, we've needed to have a full-blown development machine to make this happen. What if we could leverage the cloud as a development environment itself, freeing us up to choose from a variety of devices to accomplish the same thing. That's what we'll explore in this article.Read More…
  • Code
    Tools & Tips
    Using BrowserStack for Cross-Browser TestingBrowserstack retina preview
    Browser testing is the bane of our existence. Well, that's a bit of an exaggeration, but not by much. Multiple browser versions and browser fragmentation can make it difficult to get good test coverage for your sites especially when you factor in the different operating systems developers use to build with. Over the years, we've relied on a variety of tools to help us with this challenge including virtual machines, tools that simulate browsers and even having multiple devices on hand to work with. It'd be great if there were a way to have one viewport that allowed us to easily test across any major browser and their individual versions without jumping through hoops. BrowserStack.com aims to offer this via it's browser-based virtualization service and in this article we'll cover the service and how it helps tackle the cross-browser testing problem.Read More…
  • Code
    Articles
    What Are You Using?Preview 400
    We spend a lot of time following the thought leaders in web development, in many cases using the tools and libraries they've built, reading the posts they've written, articulating cool techniques they've learned, and in some cases, attending the defining conference for a specific language. But wouldn't it be great to learn what they focus on and what they use to build such awesomeness?Read More…
  • Code
    Tools & Tips
    Strategies for Testing IE on Different PlatformsIe
    You might believe that web developers who use Windows as their primary OS have it easy, when testing Internet Explorer; simply click on the blue "E" and go to town. That might be true if they only had to worry about the version of IE on their PC, but we all know that's not the case. Depending on your project's needs, you may need to ensure compatibility from IE6 through IE10, which certainly poses some challenges. How do we deal with this?Read More…