Five Tips for More Efficient Front-End Web Development
Everyone wants to get more done in a given day. I have been thinking about the tools that I use that have allowed me to work more efficiently as a front-end web developer. Here are my tips for better development productivity.
Use a Task Runner
Tools like Grunt or Gulp can really help you work more efficiently by automating a lot of development-related tasks. Who wants to optimize images or combine JavaScript files together by hand? There's no need to. By adding a task runner like Grunt or Gulp (or even a non-command line tool like CodeKit) to your workflow, you can quickly do things like compile your Sass code, run unit tests, view and debug your web page on multiple browsers and devices, and combine and minify JavaScript files. Task runners let you configure how and when these types of tasks are run, so you remain in full control.
Use Emmet for Writing Markup
If you write a lot of HTML and use a code editor like Sublime Text, WebStorm, or Atom, it's definitely worth installing whatever plugin you need to use Emmet. Emmet allows you to get code completion for HTML as you write it and can really speed up the process of writing a lot of markup. For example, if you need to write the markup for an unordered list with five items, each having a link inside, you can simply write ul>li*5>aand Emmet can complete the rest for you. This even can work if you use vi mode (which I do in Sublime Text). Chris Coyier of CSS-Tricks has a great video on getting started with Emmet.
Use BrowserSync for Cross-Browser and Cross-Device Testing
BrowserSync is an awesome tool for both getting automatic reloading of portions of your web page after a code or asset change and for enabling quick cross-device and cross-browser testing as you develop a website or web app. It's a Node.js module that works both on its own or as a plugin for Grunt or Gulp. For more information, see the blog post I wrote on getting started with BrowserSync (written specifically with WordPress in mind but the setup will work the same regardless of the CMS or framework you're using).
Use a CSS Grid Framework Tool
If grid layouts are frequently part of the designs your building, you could definitely benefit from using a CSS grid framework like Bourbon Neat, Susy, Zen Grids, or Singularity. Of course, if you are already using a front-end framework like Bootstrap or Zurb Foundation, you can use that framework to generate your grids. Creating grids by hand for more than a very simple site can be a big time waster, and these frameworks do all the math for you!
Generate and Use CSS Source Maps
CSS source maps let you view and debug your source Sass or Less code right in your web browser. Attempting to debug CSS (especially if you've compressed it) when you're using Sass or Less is a big pain, as the line numbers that show up in a tool like Chrome DevTools only apply to the generated CSS. This means you end up wasting time having to search for the actual relevant line in your Sass or Less code. By setting your task runner like Grunt or Gulp to generate CSS source maps and enabling them in your browser settings, inspecting in your browser will show you the relevant code and line numbers. For more details, see my blog post on using CSS source maps.
What tools do you use to maximize your development productivity? I'd love to hear in the comments.