Automation

I used to believe hand-crafting every line of code was a necessity. I u-turned on that opinion and adopted CSS preprocessors with much gusto last year.

It wasn’t so much the syntactical learning curve that initially put me off — they’re familiar if you’ve done any kind of programming — it was the perceived “added complexity” they would bring. For what, one more barrier to entry? The value I’ve since found:

• Code maintainability with includes.
• Understandable media query breakpoints across modular patterns.
• Relief from the repetition of vendor prefixes and fallbacks.

CSS preprocessors have become integral to my workflow. I don’t go overboard. It’s very important to refrain from doing things differently for the sake of it. Yet I now find it painful to work without them.

A new process

I cringe when I think of the amount of PSDs I used to produce. When I first started working agency-side it was expected that the client would see a minimum of three design mock-ups to choose from. I did well whittling that process down to a single, evolving design.

These days there are no final design mock-ups. No sign-off stage. Design and build happens at the same time. I do very little “designing in the browser” — writing code doesn’t exactly allow creativity to flow in that sense — but I get there fast.

This change in methodology has highlighted many more bottlenecks in my design and front-end development. CSS preprocessors were just the tipping point. Today I’m using Grunt which performs the following tasks for me:

• CSS preprocessing with Sass (via Compass)
• JavaScript linting and minifying with UglifyJS
• SVG optimisation/minifying with SVGO
• SVG rasterisation *

* to create PNGs from SVGs I use a PhantomJS script (heavily based on Grunticon)

I’m even working on my own Node.js tasks to build HTML includes for faster prototyping. I really like Hammer for Mac but its all-or-nothing simplicity sits awkwardly with my additional requirements. Mixture is another tool I look forward to testing.

Dependancy

For projects I’m working on alone these tools have sped up my workflow massively but I worry I’m becoming too dependant.

Scott Kellum has an internal conflict I know all too well:

I’m not saying these tools aren’t valuable because they absolutely are. They are just introducing fragmentation into our community and I am noticing how much of a part of it I have become. I want to share my code with everyone who writes CSS, not a subset of that group.

Sharing and working with others; occasions where I’ll have to down tools and do things the old fashioned way? That may be painful, but when I look at how complex browsers are becoming the price of automation is one I’m happy to pay.

And what of fragmentation? That is inevitable in my opinion. When I wrote and spoke about responsive navigation recently I shared a lot of practical techniques and concepts. The final code; that was less important. Implementation is becoming too nuanced for copy & paste examples. When it comes to sharing I’m starting to find more value in the automated process rather than the final output.

Automation, for me, is here to stay.