10 Front-End Development Tools
I saw this list of ten supposedly tools “you can’t live without” and found it lacking; it’s more of a list of IDEs/text editors and frameworks which a front-end could choose from. I wanted a set of comprehensive tools that addressed the varied tasks that a front-end engineer encounters, so I came up with my own.
Note that this list is biased to OSX because, well, lots of front-end engineers work on MacBooks.
- Pixels: xScope. On-screen rulers and zoomed in loupes to capture colors at the pixel level are invaluable when trying to replicate a comp perfectly.
- Mocks: Photoshop or Seashore. Photoshop is obviously the industry standard and still the only tool to delayer PSDs, but Seashore works will in a pinch and isn’t a $600, 3GB download.
- CSS: SASS with Compass. SASS has the right set of programmatic tools, and Compass adds a nice base library of mixins for CSS3 properties, plus a really powerful image spriting framework.
- IE: Parallels. You’re going to have to test and fix IE-specific issues, and Parallels edges out VMWare for simplicity of setup and management (no need to deal with a 4GB+ Windows image that takes a literal minute to unpause).
- Framework: Ember.js or AngularJS. These two JS frameworks have emerged as the front-runners for rich web apps; they hit that sweet spot between providing enough functionality and structure to make application code straightforward, while not inventing languages to mimic app development on other platforms.
- Text editor: Sublime Text or vim. I honestly have not found a need for an IDE for my HTML, CSS and JS work, so I’m biased towards editors that make reading code easy or speed up the act of editing itself.
- Images: ImageOptim. Optimize images losslessly by taking out unnecessary data.
- Developer Tools: Chrome Developer Tools. CDT has improved a ton in a few short years and has functionality that has eclipsed Firebug and Safari Developer Tools. CDT also features a ton of hidden/experimental features under Chrome flags which is worth playing around with.
- Which includes Google’s web apps as well as the one of the bigger EmberJS apps in production to date, e.g., not merely 3 lines of scripting code.↑