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 work1, 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.
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.↩
love this post, thank you
I never use an IDE for web development either – I use a text editor. The one that I have been using for more than a decade now is EmEditor. It’s probably the best editor out there – never crashes and can open files that are several GBs in size.
I do have a doubt, about the no-IDE need. While it is quite clear that Eclipse doesn’t have nearly the same usefulness for Javascript as it has for Java, i do find its resource (file, strings, etc) search inside the project a life saver. I wouldn’t really know how to have the same functionality neither in MaxOSX, nor in Windows. OS tools do not provide the same quick searching Eclipse does.
So, as you have written you have worked in a large project (where a large number of files are bound to exist), i have to ask…how did you manage that aspect of your projects?
Thank you.
Oh, and thanks for the sharing. I’ve discovered new tools on your post! 🙂
Pretty much all text editors have a “find file…” or “find string in project…” function. For example, Sublime Text allows you to open a file with Ctrl-T, or find in project with Ctrl-Shift-F. Alternatively, there are apps like PeepOpen (https://peepcode.com/products/peepopen) whose job is to index files so they’re easily searchable.
I just find Eclipse to be slow and ugly for anything non-Java, so I tend to stay away from it. That said, there are forks off of Eclipse like Aptana (http://www.aptana.com/) that are customized for web development, so those are worth a look if you really want that IDE-level editing help.
Hi!
Thanks a lot, i must say i love Eclipse. I’ve been loving it from many many years now.
I’ve been looking the aptana ide, and it does look quite nice, i’ll be sure to try it for my next web project.