duncanlock.net
Tag Icon in the shape of a luggage tag
Figure 1. This pages tag list is using this tag icon from FontAwesome. This is a 550 byte SVG file, 346 bytes gzipped.

If you want to use SVG icons on a website and style them with CSS - then the SVG needs to be inline - i.e. the SVG markup needs to be included with the rest of the pages HTML markup.

Unfortunately putting things inline means that they can’t be cached. In this article I’ll show one way to get around this - and get the best of both worlds: inline styleable SVG icons, with caching!

Continue reading “Styleable Inline SVG Icons, with Caching & Fallback”

cssmin is unmaintained & has a bug with complex :is selectors


Sometimes I want to have a just a tiny bit of CSS that’s unique, just for one page or post. I don’t want a whole stylesheet, or to have to add this to my site-wide theme, just for one post – I want a simple way to add it in the post itself.

This is how I did it:

Continue reading “Custom Per Page CSS With Pelican”

You can use the new CSS :is selector to write complex CSS selectors in a much more compact way


The content-type guessing done by AWS CLI is based on the mimetype definitions available on your system. You can improve the mimetype guessing by updating these definitions.


I had an issue where the AWS CLI wasn't guessing the content-type of SVG files correctly on sync and was setting them to `application/octet-stream` - the default "I don't know" mimetype. This is a quick fix for that.


Blueprint style diagram showing a Teapot.
Figure 1. A teapot, cut in half. Sort of. Original clipart Kitchen Utensils Silhouette, by GDJ, Public Domain. More on Teapots.

I’ve had a mysterious broken page on this site for a while - but been too busy to look into it. My Comprehensive Linux Backups with etckeeper & backupninja article has been refusing to load, and returning a weird HTTP 418 Unused status code instead. I finally made the time to figure out the cause.

It turned out that this was being caused by the Apache/PHP mod_security module. This is a static website - there’s no PHP anywhere - so why would that be a problem? Well, so far I’ve been very happily hosting the site on my old DreamHost shared hosting account - which comes with Apache & PHP installed whether you want it or not. At some point …

Continue reading “I finally figured out my mysterious 418/Unused HTTP Status Code”

This site has been generated using Pelican 3.3 for over two years - and I finally found some time to upgrade to the current version of Pelican, 3.6.3. This is how I did the upgrade.

I decided to be lazy and do the upgrade in-place, instead of creating a new virtualenv and copying the content & settings over. Luckily, this worked out OK, after a bit of fiddling around.

I also decided, rather cavalierly, to upgrade all the packages in the virtualenv to their latest versions while I was at it. To do this, I upgraded pip, then used pip-review. To upgrade pip & install pip-review system wide, run this on the command line:

$ sudo -H pip install --upgrade pip
$ sudo -H pip install pip-review

Then upgrade eveything in the sites virtualenv:

$ sudo apt-get install libjpeg-dev
$ workon duncanlock.net
$ pip-review …
Continue reading “How I upgraded this website to Pelican 3.6”

There are quite a few changes in Pelican 3.3 - most of them minor, but a few which might mean making some changes to your site in order to upgrade. This is what I did to move my site from Pelican 3.2 to 3.3.

The change that had the biggest impact and took the most work was around image linking - caused by a combination of things. I think I was doing it wrong before and things changed in a way that meant this no longer worked. I also had to update my Better Figures & Images plugin to take this into account.

Previously, I’d been linking to my images like this, both in my theme:

/* Theme CSS Image Link */
background: #2C71B8 url(/static/images/blueprint-background.png) repeat;
{# Theme HTML/Jinja image link #}
<meta name="twitter:image" content …
Continue reading “How I upgraded this website to Pelican 3.3”

Continue reading “The smart guide to optimizing images for the web: Zero to Hero”