Inspired by uses.tech, I’ve created a uses page on here.

🔗 ∙ Tagged in Blogging, Gear, Grizzlebit.

I moved my photography to rays.photos.

The existing feeds and links should hopefully redirect properly.

🔗 ∙ Tagged in Blogging, My Photos.

I like the sound of these “now” pages so I added one here.

🔗 ∙ Tagged in Blogging, Grizzlebit.

Jeremy Keith:

Right now, there’s a whole bunch of social networks coming (Blewski, Freds, Mastication) and one big one going, thanks to Elongate.

Me? I watch all of this unfold like Doctor Manhattan on Mars. I have no great connection to any of these places. They’re all just syndication endpoints to me.

Jeremy uses Micro.blog to effectively syndicate his posts elsewhere. I hadn’t thought of using the service like that.

↬ ∙ Tagged in Blogging.

I wrestled Hugo to the mat¹ and set up separate RSS and JSON feeds for my Posts and Links.

I also got feeds set up for individual tags.

The combined feed is still available as the simplest subscription option.

You can find all the details in feeds.

Viva la RSS.

🔗 ∙ Tagged in Blogging, Grizzlebit.

Julia’s posts inspire me to write more.

↬ ∙ Tagged in Blogging.

Welcome to my rebooted blog. 🎉

I had this domain hanging around and liked it better than my old dance.computer.dance domain.

I’ve pulled the posts and links here and the old domain should be redirecting across properly.

I’ve added tags to track the topics of my posts and links.

I’m using Hugo to build the site and Netlify for hosting it. I’ll write a post on how I’ve set up the assets and Hugo build.

So, now I’ve revamped my blog and my photography portfolio it’s time to get shooting and writing 💪

🔗 ∙ Tagged in Blogging, Grizzlebit.

I rebuilt A Strange Kind of Madness using Hugo a month or so ago. As with most photoblogs, it has pages with many images on them, and I was inspired by Photo Stream to load these images lazily.

Image resizing

If you want Hugo to resize images when it builds a site, you need to place your images alongside posts, so they are considered page resources. So, I put each post in a folder with its associated image and reference it in a field called, shockingly, image in the post front matter.

$ ls content/posts/2020-03-31-my-post
20200331-4491.jpg
index.md

$ cat content/posts/2020-03-31-my-post/index.md
+++
title = My Post
date = 2020-03-31T10:42:00+08:00
image = 20200331-4491.jpg
+++

Adding Lazyload

Roll-up pages have many thumbnails and benefit most from lazy loading.

First up, add the lazyload javascript library to your site build.

import Lazyload from "lazyload";

// Fire up our lazyloading (just initialising it does the job)
const _lazyload = new Lazyload();

The library’s default configuration targets images with the lazyload class and loads the image stored in the data-src attribute. If you place an image on the standard src attribute, it will be treated as a placeholder.

Placeholder images

I wanted something more interesting than a sea of grey rectangles for placeholder images. I had a look at using BlurHash, but that was going to involve rendering canvas elements for placeholders ¹.

I want the front end to be as simple as possible ², so I abandoned that approach and instead created a single-pixel resize of the source image which provides a simplistic average colour placeholder for each image. It does the trick.

The markup

All of the necessary resizing code and markup is in a Hugo partial that renders a thumbnail for each post. Be sure that your image tags include width and height attributes so the browser lays them out correctly such that lazy loading is effective.

{{- with .Resources.GetMatch (.Params.image) -}} {{/* Resize to a single pixel
for a placeholder image */}} {{- $placeholder := .Resize "1x1" -}} {{/* Resize
to 800 pixels wide for a thumbnail image */}} {{- $thumbnail := .Resize "800x"
-}}
<img
  src="{{ $placeholder.RelPermalink }}"
  data-src="{{ $thumbnail.RelPermalink }}"
  width="{{ $thumbnail.Width }}"
  height="{{ $thumbnail.Height }}"
  class="lazyload"
/>
{{- end -}}

The main downside to this is that two resizes for each image adds a bunch of time to the site’s build process but that’s a trade off I’m willing to make.

Go forth, and embrace laziness.

🔗 ∙ Tagged in Blogging, Programming, Tools.

I recently moved the hosting of my various blogs and websites off my own server to Netlify.

I was originally going to set up an S3 bucket and Cloudfront distribution for each of my sites but Netlify provides me the CDN and hosting features I need all bundled up already. You can upload files directly for serving or hook your site up to run a static site generator when you push to a branch of a Github repository.

In short, I’m not longer paying hosting costs and they handle all of the SSL certificate renewal from Let’s Encrypt for me.

Next up I plan to clean up the tooling I use for some of my sites and tweak things on here so I have more variety in my posts.

2019 is the year of the blog baby.

🔗 ∙ Tagged in Blogging, Tools.