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 nip.io. 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
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.
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.