Today’s guest post is from Baldur Bjarnason, who has made websites and interactive media since the mid-nineties and holds a PhD on interactivity in ebooks. He handles e-production for Unbound, an award-winning, online, crowd-funded publisher that allows authors to pitch their book ideas directly to readers. He’s joined us today to talk about the Javascript-shaped hole in the heart of ebook production.
Four reasons why node.js is useful for EPUB CSS
Node.js has over the past few years become the “other” platform for Javascript. It’s currently a very trendy and possibly over-hyped platform for web server development. But it has a life beyond the server. It has been important in revitalising the tools ecosystem for web development.
Which makes sense when you think about it. Web developers all know (or should know) Javascript so, when they need to nail down a script or tool to solve a web dev problem, Node.js is a handy hammer for them to bang that nail down using a language they know. Those scripts then get polished into proper tools and, if we’re lucky, get posted online with a bit of documentation.
The following are four reasons why you should go and install Node.js even if you don’t plan on writing any serious Javascript in the near future.
CSSlint
Linters are the only sane way to use languages as dynamic and fluid as CSS and Javascript. When your primary development language comes pre-stocked with an arsenal of foot-shooting shotguns, the sensible thing to do is to get a cabinet and lock said appendage-threatening utilities away.
Linters are that locked cabinet for foot-shooting shotguns. They read your code and shout at you when you’re breaking one of their rules. CSSlint is the one to use for CSS.
Once you have Node.js, install it like so: $ npm install -g csslint, possibly with a sudo there first on some platforms. That gives you the CSSlint command line tool.
It is useful on three levels:
- It helps you avoid practices you know intellectually are a bad idea but never seem to avoid in practice.
- It checks your code for basic syntax errors, catching all kinds of dumb bugs and typos that would otherwise come back to haunt you.
- It forces you to consider, analyze, and decide beforehand what good practice means for your particular project.
That third bit comes from the fact that before you use it, you really should go through CSSlint’s rule set and decide which ones apply to your work and which ones don’t. That process will teach you more about CSS and how you use it than most “how to” blog posts will.
Less
If you are writing large stylesheets from scratch, you really should be using a CSS preprocessor like Less. (Sass is a different one, also good.)
Install it like so: $ npm install -g less.
The important bit in a CSS preprocessor is how it lets you split your CSS into smaller, more manageable files and variables. Everything else is, in my not so humble opinion, a bonus that you can learn at a later date.
Gulp and Grunt
On a more advanced level are build systems like Gulp or Grunt. They only save you work if you find writing Javascript easy, since they use Javascript for both configuration and setup. But if you do, then their magic time-saving powers can be awesome.
Their concept is pretty simple: They watch a bunch of files and when those files change, they run a bunch of code on them. The magic happens in the plugins you can use to write powerful scripts that not only build your project’s assets, but also modify and process them.
The most interesting plugins (from a CSS perspective) are…
Rework and PostCSS
Death to regular expressions!
Seriously, using regular expressions to modify CSS is a recipe for disaster because regexps don’t understand the code they modify. This usually isn’t an issue with CSS you wrote yourself. In that case, you both know the stylesheet’s structure. More importantly, you probably didn’t fill your own stylesheet with crap you need to fix. (InDesign, however… If you can imagine me shuddering visibly, please do so at this point.)
Two Node.js modules that help you modify and restructure arbitrary CSS code are Rework and PostCSS. (They both come with handy plugins that you can use with both Grunt and Gulp above.)
They make things like autoprefixer possible. More importantly to us, they let people make things like postcss-epub-clean. Do you want to inline images as data URIs? There’s a plugin for that. Programmatically fix or rewrite URLs? Yes, yes indeed. If you aren’t afraid of writing Javascript, you’re going to find the power these modules provide over CSS amazing.
Only the beginning
There’s a lot more where these four toolsets came from. Minifiers. ECMAscript 6 to ECMAscript 5 transpilers. HTML parsing and modification. It’s all good. (Though definitely a tad complicated.)
Baldur will be sharing even more best practices for Javascript and ebook production at his ebookcraft session, When all you have is a hammer, everything looks like Javascript, on March 11, 2015 in Toronto. See the full list of speakers here.
