Save £23,265 with one weird trick!

2022-07-20T00:00:00Z

Tobacconists hate him.

It’s that time of the year. I never really know who this sort of post is for. Maybe it’s for you, maybe for it’s for me one dark day in the future, but…

🎉 I stopped smoking ten years ago!

If somebody as flimsy-willed as me can stop smoking, you can stop smoking too. I’m not going to labour the “it kills you” thing, but it is so here’s the financial breakdown for any fellow cheapskates.

  10 years =  3,652 days
   @13/day = 47,476 cigs
           =  2,374 packs

2012 price =  £7.10 /pack
2022 price = £12.50 /pack
Mean price =  £9.80 /pack

I’ve not smoked £23,265.20.

If I’d regularly deposited that into an investment account, a 2% return that would be £25k and 5% would be almost £30k.

I’d say I feel fantastic but I am also ten years older. I gained two children a dog, and everything hurts. But I don’t smoke. I don’t feel the urge to smoke, and haven’t for years. I never have to stand outdoors on cold, wet nights to smoke. I don’t panic when I’m running out of cigarettes. And that means a lot.

It’s easier to just not smoke

You might not be convinced and that’s because we’re all told it’s really hard to stop smoking. All the time. Even by people who want smokers to quit, as if it’s something that takes a run-up, an intake of bravery and team-cajoling. It’s not hard; just stop smoking the bloody things.

The rest is understanding your body and addiction, that smoking never made you feel better, it only made not smoking feel worse. As soon as you cut that cycle, your body recalibrates. As soon as you realise that, the infinitesimal cost of quitting seems worth it.

If you’re trying to quit and you’re not finding it easy, stick with it. If you need help understanding addiction, Allen Carr’s Easy Way to Stop Smoking has an eerily convincing narrative that plods through the feelings every smoker goes through. I never finished it —I convinced myself I didn’t want to quit— but it was absolutely the basis for the voice in my head that let me quit later on.

Goodbye Internet Explorer

2022-06-15T00:00:00Z

But what will people download Chrome with now?

Raise a glass, kiss your wife, hug your children. It’s finally gone.

It’s dead.

Internet Explorer has been dying for an age. 15 years ago IE6 finally bit it, 8 years ago I was calling for webdevs to hasten the death of IE8 and today is the day that Microsoft has finally ~~pulled regular support for~~ “retired” Internet Explorer 11, last of its name.

Its successor, Edge, uses Chrome’s renderer. While I’m sure we’ll have a long chat about the problems of monocultures one day, this means —for now— we can really focus on modern standards without having to worry about what this 9 year old renderer thinks. And I mean that at a commercial, enterprise level. Use display: grid without fallback code. Use ES6 features without Babel transpiling everything. Go, create something and expect it to just work.

Here’s to never having to download the multi-gigabyte, 90 day Internet Explorer test machine images. Here’s to kicking out swathes of compat code. Here’s to being able to [fairly] rigourously test a website locally without a third party running a dozen versions of Windows.

The web is more free for this. Rejoice! while it lasts.

Turning my sites up to Eleven-ty

2022-06-12T00:00:00Z

This site is now powered by a static site generator called 11ty. It’s awesome! I’ll try to explain some of my favourite things about it and reasons you might prefer it to stalwarts in the SSG arena.

15 years ago, training up on Django, I built a blog. It’s what webdevs did back then. It was much faster than Wordpress but the editing always fell short and the database design got in the way more than it helped. Dogfooding your software means every problem is yours. I had a glossy coat but the jelly and chunks arrested my writing process.

SSGs are perfect for blogs and brochure websites

Static site generators churn content through templates into a static website that you can just upload to a simple webserver. This is unlike Django or any other dynamic language, where you host a running process and database on an expensive server 24/7 to generate HTML on demand. You’re just serving files, for free.

Most sites don’t need fresh fresh HTML for every request. They don’t change often enough. A blog or a business’ brochure website might get updates anywhere from a couple of times a day to only once or twice a year. With a static site generator, you can make your edits and regenerate the site.

It’s also secure. There’s nothing to hack running on my domain like there might be in a Wordpress install. There’s no database to run injection attacks against. There’s no indication where the source is hosted. Cloudflare assumes much of liability for me (as well as the buildchain) and if I’m worried about them, it only costs me 20 minutes messing around with DNS to move to another host.

I’ve used a few SSGs professionally: Jekyll, Hugo and Nuxt.

Why pick 11ty over those?

Jekyll is glacial on Cloudflare’s CI/CD environment; about 3 minutes a build. Hugo is Fast but can be a nightmare to work with when things go wrong. Absolutely user-error, but I’ve wasted days at a time banging my head on Hugo. Both Jekyll and Hugo being non-JS options have their own take on asset management. I’m also a Vue developer so Nuxt is great for me, but force-feeding users a bundle of Vue, Nuxt and routers and whatnot, just for a blog? It’s silly. It does have top-shelf asset management though.

11ty was a perfect balance between Hugo and Nuxt. I get all my favourite frontend tools (PostCSS, PurgeCSS on here) with a generator that isn’t trying to force-feed my users a massive script bundle.

More, I get to pick the markup language I write in. I can use Markdown, Liquid, Handlebars, Nunjucks, Moustache, and many, many more. Even plain old HTML, or a mix. I can bundle images with the blog posts (like Hugo leaf bundles). I can paint extra styles on the page if I want to.

I have freedom. I can do anything, on any page.

It’s been 3 weeks, 2 days since my initial commit on this site’s repo and since finishing the conversion I’ve written more posts than I did in the previous decade, and I’ve also converted two Jekyll sites over too. Each took about an afternoon. Perfect URL parity, nothing ostensibly different, just a [much] better toolchain.

What took longest was editing and upgrading 285 blog posts, spanning back to the early Naughties.

Fast Enough™ for developers

Build performance only matters to a point. On this seven year old laptop, 11ty generates this whole blog, 400 pages, in well under two seconds:

Copied 403 files / Wrote 539 files in 1.46 seconds (2.7ms each, v1.0.1)

It’s a second faster on my desktop, and on a real 23 page brochure website, it’s only 0.3s.

11ty is fast but whatever I use only has to be faster than me switching to my browser. Hugo is insanely fast but so what? Anything less than 2 seconds is Fast Enough™. That’s what I mean.

No added bloat for visitors

Many Javascript-based SSGs bundle in client code too. Sometimes this makes sense: You might use Next and Nuxt to build component rich SPAs, but for blogging and brochure stuff, an extraneous 100KB of swarf delivers a poor user experience.

This may explain why I’ve actively sought out non-JS SSGs like Jekyll and Hugo before.

11ty is one of the few JS SSGs that doesn’t force script on your users. If you want “pure” HTML, that’s what you’ll get. If you’re economic with your CSS, images and fonts, it’s easy to juice the performance stats.

Comes with batteries…

You don’t have to pick between Markdown and Pug, Liquid or Nunjucks. You get them all, and more. Frontmatter can be in YAML, TOML, HAML, JSON even build-time javascript. So what? So what?! You wouldn’t say that if you’d ever wasted a day trying to work out what the hell a Hugo site was doing because of a typo in a template whose syntax was so thick and unwelcoming, kings built castle walls with it.

11ty is simple and flexible.

There’s also a huge pile of community 11ty plugins too.

… But you can use your own

If you don’t get on with something in 11ty, you use something else, or rip it; do your own thing.

The Eureka moment for me was when I got into a fight with the markdown engine. I wanted to extend it to handle some of the custom things I did in my old blog posts, that I’d implemented in Django. Code to generate Youtube embeds, special floats, <aside> sidebars, etc. It would have been a nightmare to upgrade every post.

Using markdown-it and markdown-it-container I completely replaced the Markdown engine with something I could hack on. Here’s a real “explainer” snippet I have and use:

Open this <aside> to see the 11ty code that generated it…

If I want one of these blocks, I can put this in my post:

:::explainer Click this to see how I configured this in 11ty
...

And this is configured in the main .eleventy.js config

const md = new require("markdown-it")({html: true})

md.use(require('markdown-it-container'), 'explainer', {
    validate: params => params.trim().match(/^explainer\s+(.*)$/),
    render: (tokens, idx) => {
      let m = tokens[idx].info.trim().match(/^explainer\s+(.*)$/)
      if (tokens[idx].nesting === 1)
        return `<aside><details><summary>${md.renderInline(m[1])}</summary>\n`
      return '</details></aside>\n'
    },
  })

module.exports = function(eleventyConfig) {
  // ...
  eleventyConfig.setLibrary("md", md)
  // ...
}

It’s important to stress that neither of those projects are for 11ty. They’re just two of a million projects sitting on npm for anyone to use. 11ty just makes it easy to use any of this stuff on your pages.

Adding template-filters for all the bundled template languages is also made really simple:

eleventyConfig.addFilter("striptags", v => v.replace(/(<([^>]+)>)/gi, ""))

If you’ve ever used opinionated software before —perhaps even your own— you’ll appreciate that 11ty isn’t just getting out of your way, it’s going out of its way to make your life easy.

What’s not so good?

I’m three sites into 11ty now, I’ve seen how I work with it and I’ve bumped into a few things I’m not gushing about:

Pagination is good and frustrating in equal measure. Collections seem like a good idea, filtering them into new collections is easy enough, but actually paginating them can be a bit of a mess. To show a tag page, for example, you actually use pagination to filter the collection to that tag. But then you can’t [easily] re-paginate that data, so I just show all posts from that tag rather than 15.

If I had hundreds of posts in any one tag, this’d be a problem.
For all my complaints with Jekyll and Hugo’s wonky asset pipelines, 11ty’s is completely decoupled.

I use eleventy-plugin-postcss to call PostCSS at roughly the right time (and update on changes) but I could just as easily handle that externally. There’s nothing in 11ty (obvious to me anyway) to ingest that back into the templates.
- You can’t easily inline classes that only get used on one page.
- You can’t easily hash the filenames and update the links that call them after generating the post HTML (that’s important with PurgeCSS).
- Media handling could be tighter. The Image plugin is official, but this should be part of the project IMO, and not rely on this hairy shortcode.
It’s important to stress that I’m using 11ty in order that I don’t need bundles, but some of these complaints would be assuaged if the system could parse bundle manifests, so I could use external tools rather than just a dumb static assets and have the right filenames pulled in (at the right time).
A scoped include like Django’s would solve a couple of problems I’ve hacked around:
```
{% include 'template' with variable=value %}
```
Saneef points out that this is possible by leveraging the macro functions in Nunjucks. It’s a bit of a mouthful. I’d prefer a first-party solution (which I guess would actually have to come as part of the Nunjucks), but again it’s interesting to see just how flexible this thing is.
Named/keyword arguments in shortcodes would also be nice, so I don’t have to provide every option to just use the last, but I guess this would require some thinking to overcome the lack of support for destructured parameters in ES6.

These are small complaints, maybe already with solutions I’ve just not seen yet.

I’ve still managed to transfer three sites to 11ty in a couple of weeks and I wouldn’t have done that if I didn’t think it worked well enough. I’m really happy with 11ty. I’d heartily recommend it to anyone.

Oli Warner's blog

Save £23,265 with *one weird trick!*