allenc allencheung

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

  • PixelsxScope. On-screen rulers and zoomed in loupes to capture colors at the pixel level are invaluable when trying to replicate a comp perfectly.
  • MocksPhotoshop 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

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

  • FrameworkEmber.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.
  • LinterJSHint. A JavaScript linter that’s more customizable and less pedantic than the much stricter JSLint.
  • TestingJasmine 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.

Footnotes    (↑ returns to text)

  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.
By allen
allenc allencheung

Elsewhere