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!