Front-end developer tools 2016


Always evolving to meet my needs in terms of front-end web development, my front-end developer workspace saw Grunt and PhpStorm acquiring a central position in 2016, while other aspects received refinements. This post is a simple wrap up of the tools I use in order of appearance throughout a typical front-end job (e.g. WordPress theme development). Would you ask me to set you up with a solid front-end workspace, this is what I would be recommending you.

XAMPP with virtual hosts

My development is done on a XAMPP powered local environment with a recent version of PHP. For testing purposes I have my XAMPP configured with virtual hosts, through This enables me to give each local web project it’s own local subdomain URL (instead of subfolder), accessible on the local network.

Git version control

Either on Bitbucket (for private projects) or Github (for public projects), none of my projects go without version control. Even in projects with me as the only developer, I find I can’t do without Git, or at least SVN. While I might seldomly need to roll back to a previous (working) version of a project, it is nice to know that I can. Meanwhile commit messages keep a clear history of added features. In the end, deployment now almost can’t go wrong, which is the main reason for me to use Git.

Grunt SASS and uglify

Task automation with Grunt has supercharged my productivity, enabling the fastest SASS compilation I’ve seen, with source maps and live reload. And this seems only the tip of the iceberg of what community plugins have to offer. With these, JavaScript linting and minification have also become standard to my development process. Recently, I’ve archived my Gruntfiles to Github for future reference.


The things this editor can do, in terms of helping out in actually getting code written, keep amazing me. I’ve come to love even older versions of this editor (down to version 7 point something) while the newer versions (10+) keep coming out at an astounding rate, packing great additions. Better Grunt integration in the more recent versions have gotten me pretty excited for the future with PhpStorm, while I keep discovering the tiniest features that really make a difference.

SASS standards

Still very much evolving, my SASS framework, mostly based on the work of my former colleague at DPI Animation House, is taking shape with a common grid system code design pattern, similar to those in Bootstrap and PureCSS, in addition to Eric Meyer’s “Reset CSS” and several mixins that make cross-browser development a lot easier.

Chrome developer tools

With Chrome developer tools getting an update earlier this year, I had to reacquaint myself with some features of this indispensable tool. Getting a major overhaul, the device toolbar has actually been much refined, which took me some time to appreciate. Small changes like the new “Toggle Element State” button icon make the toolbar more intuitive in use and features more accessible. Pretty much every thing I write, I inspect with the developer tools. The most nasty styling bugs often get solved with ease with the visual feedback the live style editor gives.

Leave a Reply

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>