These days with an ever-expanding repotoire being necessary to deal with the constantly changing web standards, differing performance factors being necessary to ensure users on mobile devices and responsive design now a necessity, the ability to automate has become a matter of importance. Being a web developer, I think in terms of how I can automate each part of my workflow. I look at project set up, the development stage and production optimisation. Being a hacker of HTML, JavaScript and CSS by trade, I look to exploit these technologies where possible to automate. I'll explain what I use to automate my workflow to make my productivity increase where possible.

Why write this post in the first place?

Reading a fantastic post on the role of the front ops engineer, I thoug I'd jot down my thoughts on the practical application on many of the concepts discussed in that article. Also, I can be a lazy bastard when it comes to repitition in day-to-day work. If I can cobble something together in an hour that saves me 10 minutes of time each time I use it, then anything over 6 uses of that widget/script/whatever that I've put together is time saved.

Development tools

I use a few select tools when developing web applications. First and foremost is the code editor. Any web developer worth their salt will use something that includes syntax highlighting, auto-indentation and code completion/suggestions. Snippets support and the ability to plug in additional features are a must these days. I personally use Sublime Text as my code editor of choice, with syntax support for SASS turned on by installing the package at https://github.com/nathos/sass-textmate-bundle I also have the emmet plugin installed, which allows me to type HTML markup as if it were a CSS selector and have that markup expanded to be its HTML representation with a simple Ctrl+e on the keyboard (regardless of the operating system you choose to use). Next up, I use Hammer for Mac, a tool that can automatically compile HTML, CSS and JavaScript from HTML partials, SASS and CofeeScript. This saves me having to fire up SASS watch on the command line, and I can also use variables in my HTML, as well as HTML includes to allow me to re-use snippets of HTML for things such as menu's and the HTML element contents. It also watches for changes to anything in your project, allowing open browsers to re-load to reflect your updated changes. Smart paths mean I never have to remember where on the file system a resource lives, such as an image. Perhaps most importantly, I have a web browser open for which I do my primary development in. I use Chrome Canary, which allows me to test using the bleeding edge version of one of the fastest web browsers in existence. It also has any improvements roughly 11 weeks before the release version, meaning I can test new or experimental techniques as the support comes along for them. Also, Chrome Canary is updated nightly. I then move on to Firefox Nightly, Opera Next, and then Safari, Chrome (release version), Firefox and Opera. I use a Mac, so I run VMWare Fusion to virtualise Internet Explorer, using the virtual machines available from modern.ie For rapid prototyping, I employ Ghostlab, which facilitates synchronous, real-time testing across devices. With minimal set-up I can have all devices I own connected on the same network as my development machine in sync with anything I do in my web browser. This includes form field completion, form submission, scrolling and just about everything else.

Project set-up

Frameworks are today's norm. I don't personally see the point in crafting CSS (via SASS or LESS if you use those) for a button or heading/paragraph styles when frameworks offer the ability to do so or a custom code snippet you've saved gets re-used thousands of times. I naturally have an affiliation with a framework called Rock Hammer (because I helped to build it and continue to actively maintain it). It has been designed from the outset to work with Hammer for Mac. Using Rock Hammer gives me a consistent base to being every project from.

Project development

When developing a project, I simply have my code editor open with Hammer for Mac happily whirring away in the background, along with Grunt (explained below) for automating production optimisations, right from the off. This, means I'm testing on production-targeted code from the outset. My web browser is constantly open, being automatically refreshed using the Grunt live reload plugin so I'm able to pick up and see changes instantly.

Production optimisation

Whilst Hammer for Mac offers minification out of the box now, it names the minified CSS and JavaScript files with the value of the outputted file MD5 hash. Whilst this allows any browser reloads to constantly pick up the latest changes, it's not exactly production friendly. I therefore do not use Hammer for Mac's optimisation features. I use an automation tool called Grunt. Put simply, Grunt is written in JavaScript, is configured in JavaScript, and has a very simple job: Automate tasks. Grunt has more plugins than I can remember, but it can be up and running from install to minifying CSS and JavaScript, linting CSS and JavaScript, compressing images, generating sprites, unit testing JavaScript, concatenating files together and even compiling SASS and CoffeeScript in a matter of minutes. I cannot recommend Grunt highly enough to those looking to automate tasks in a language every web developer worth their salt should find second nature. Grunt runs as a node.js plugin, so it is available for all operating systems. All grunt plugins are installed via "npm install" commands, so a little command-line exposure is necessary I'm afraid. Trust me, the gains to be made here are staggering given the relatively little effort required to get Grunt up and running. There is a handy "watch" plug-in available for Grunt too, so every time a bunch of files (specified by patterns you choose) are updated, Grunt can run a defined set of tasks. I point the configuration of this to my "Build" folder produced by Hammer for Mac.

Graceful fall-backs

Regardless of the fact that it is used in Rock Hammer, I'd use Selectivizr to provide CSS3 support to the less capable Internet Explorer browsers. Granted, it sits on top of a JavaScript library such as jQuery but using conditional comments we can ensure that only older Internet Explorer browsers get this anyway. I'm also a big fan of Modernizr and Respond.js which provide feature detection and Internet Explorer Media Query support for versions 8 and below.

Monitoring

Monitoring is one area that could do with some love. I'm yet to find a suitable dashboard solution, so I'm in the process of writing one. Watch this space and of course an up-coming blog post for more on this!

Finally

Whilst this list can no doubt be added to over time, this hopefully gives a little insight into what I use to apply the principles explained in the Front-End Ops article. Feel free to share what you use, and any experiences are always welcome!