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.

UI/UX

• 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.

Styles

• 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).

JavaScript

• 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.
• Linter: JSHint. A JavaScript linter that’s more customizable and less pedantic than the much stricter JSLint.
• Testing: Jasmine or Mocha. BDD testing frameworks for JavaScript are easy to get started with, and making your JavaScript testable actually informs to better design as well as increased quality.

Miscellaneous

• Text editor: Sublime Text or vim. I honestly have not found a need for an IDE for my HTML, CSS and JS work{{1}}, 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.

And even more resources (what I used for building this blog): coding and design.
[[1]]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.[[1]]