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

If Victor Hugo had wasted as much time fiddling with his feather quills as we spend refactoring style sheets, he would have been dead and buried before he got around to writing “Ninety Three”.

Tailwind seems to offend the sensitivities of the true CSS artisan. So be it. The simple fact that I 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, if you let it, Tailwind can serve 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 he 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 competitive 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

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 so 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 reactivity, but don’t want to give up Hugo’s extraordinary template compilation system, it’s possible to mount an a la carte Vue app in a Hugo site.

How to mount a Vue app in a Hugo site

Svelte

Svelte

When I first showed Svelte to Victor Hugo he said “No army can withstand the strength of an idea whose time has come.”

As a Javascript compiler, Svelte shakes up the traditional discourse about what a compiler is all about, since Svelte compiles Javascript to Javascript. As far as the browser is concerned, it’s still just Javascript, which is still an interpreted language. Your C++ friends will tell you that it doesn’t count. Go figure. Think what you want.

Svelte is one of those ideas whose time has come.

My adventures with Svelte

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 just me and all, I guess you could say that I’m resource constrained, which is not an entirely bad (although I’d be glad of your patronage, should you be so inclined). Money allows us to buy our way out of problems, when sometimes it would be better to just solve them.

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.