Be More Productive

Get the most from your processes now!

Hugo and Tailwind

the art of simplicity is a puzzle of complexity


The simple truth is that software and websites in general are hard work, harder than they should be anyway. Everybody talks about tooling, but what you really need is a couple of good mules leaning into the load.

The author out plowing with his mules, Hugo and Tailwind
The author out plowing with his mules, Hugo and Tailwind

My best mules are Hugo and Tailwind. I’ve spent a lot of hours with my hand on the plow behind ‘em, so I’ll leave it up to you imagine why the one on my left is called “Tailwind”. I’ve tried oats and I’ve tried barley, but it doesn’t seem to make much difference. Call it an occupational hazard.


Hugo

Hugo

The homage to Victor Hugo is to say that content is what it is really all about. Few people have leveraged the written word as well as Victor did, and few site generators are as respectful to the interests of content editors as Hugo.

Hugo is damned fast for an old mule, but that claim to fame tends to overshadow the real virtues it has to offer. Just compare Hugo’s documentation to that of the popular node stack alternatives; you’ll find a deep stocked programmer’s toolbox: functions, variables, pipes, and a solid templating system with its roots in Go templates.

Template conditionals are uncomplicated compared to run-time DOM manipulations that are the standard fare of web development experience these days. They solve different problems, but if you’ve been spending a lot of time down the shadow-DOM rabbit hole, you might find some joy in the simple elegance of the humble template conditional.


Tailwind CSS

Tailwind CSS

You can think of Tailwind along the lines of the quality quills that Victor Hugo was fond of: he didn't like to waste time fiddling with the ink well and the quill, and I don't much like the time that goes into messing with style sheets.

Tailwind seems to offend the sensitivities of the true CSS artisan. So be it. The simple fact that you can safely skip the “Benefits of BEM” conference session is good enough for me. I find that styling inline with classes reduces cognitive load, and keeps my focus on the problem I’m trying to solve.

Tailwind is a design system first approach to styling. Instead of reverse-engineering custom CSS into your design system, tailwind config serves as the source of truth of your style library.


Lunr js

Lunr js

After spending all night up troubleshooting his Solr cluster, Victor Hugo said “Even the darkest night will end and the sun will rise.”

You’ll never have to go traipsing around the internet looking for a 200 response from your search service when everything you need is bundled in the deploy. As the old saying goes: “better and cheaper at home”.

JAM stack means more than static, and Lunr can actually be a better solution than something like Elastic when content from an API is rendered dynamically in the browser.

Take Lunr out for a spin...

Lunr can also accommodate cross-site searches without the need for an independently managed cloud service.


Netlify

Netlify

Getting “Les Miserables” into print was a big job, and publisher Albert Lacroix was all that Victor Hugo had to work with. You can bet that Victor would have just gone with Netlify if he'd had the chance.

Netlify is “Devops as a Service”, where engineering costs are not the constraint they used to be. The competetive landscape includes Heroku, Render, Cloudflare and others. It’s the DevEx that distinguishes Netlify.

netlify-dev makes it a snap to set up local to mirror your cloud ecosystem, for local static site testing with a full complement of lambdas, auth and edge routing.

Deploy previews are an automatic build on merge feature with protectable publicly facing URL, which are nice, but the real DevEx magic is in the review features bundled into Deploy previews “Their feedback in your workflow”. Simply awesome.


Vue

Vue

Victor Hugo's Monsieur Madeleine was Jean Valjean in the Shadow-DOM; his apt reactivity framework kept him one step ahead of police inspector Javert

Among today’s crop of static site building frameworks, Hugo’s template system is unparalleled, but what about reactivity? Almost everything you find about reactive frameworks is deeply intertwined with bundling and build services that it can be hard to sort how to go a la carte.

If you need to do a bit of runtime DOM manipulation, but don’t want to give up Hugo’s extraordinary template compilation system, you can mount a Vue app in Hugo.

How to mount a Vue app in a Hugo site

Chimney Stack, Vivid Sydney 2019
A reliable stack depends on a good foundation

A lot of the heavy lifting around here is done by Hugo, Tailwind, Lunr and Netlify.

Being resource constrained is not entirely bad. Money allows us to buy our way up to another context, but sometimes it causes us to skip opportunities for reducing costs, through the systematic elimination of complexity.

When you don’t have the resources, then partnering up with a couple of old mules works out pretty good. While your neighbor is missing the season trying to get his latest Kubernetes model turbo tractor running, Hugo and Tailwind will always be ready to get out there with you, breaking ground and breaking wind.


Bibliography

A Pattern Language — Towns, Buildings, Construction  by Christopher Alexander, Sara Ishikawa, Murray Silverstein, Max Jacobson, Ingrid Fiksdahl-King, Shlomo Angel

Photo Credits

Mr. Whinery cultivating corn. — Pie Town, New Mexico  by Lee, Russell, 1903-1986, photographer

unsplash-logo Jack Bassingthwaighte — "Chimney Stack, Vivid Sydney 2019"

pattern language

Let's agree to define productivity in terms of throughput. We can debate the meaning of productivity in terms of additional measurements of the business value of delivered work, but as Eliyahu Goldratt pointed out in his critique of the Balanced Scorecard, there is a virtue in simplicity. Throughput doesn’t answer all our questions about business value, but it is a sufficient metric for the context of evaluating the relationship of practices with productivity.