The random link in the age of static sites | Heydon Works

Heydon has been working on Ga11ery, a neat image portfolio site generator that's ideal for webcomics. But it's built on the Jamstack using 11ty and Netlify, which means it isn't so simple to implement a "random image" button. However, because static site generators start with a collection/array of elements to make into pages during build time, you can use the array's index to effectively mock previous/next pages (something I'd like to do here, actually).

Introduce a little bit of Math.random and you have a decent random link, but it's still generated at build time, so every user gets the same random pathway (and you can get loops). Heydon uses some client-side JS to install a second level of randomisation to get around that. It's a clever little trick and, as he says, is likely more performant than the traditional PHP/API query method:

Build-rendered beats server-rendered beats client-rendered.

Explore Other Notes

Newer

A guide to getting onto the IndieWeb

IndieWebify.Me is the main service I've been using to get my site set up with IndieWeb technologies. It's a great, step-by-step tutorial on how to get involved and helps you easily test your […]

Older

Accessible emoji tweaked

A neat little extrapolation of the normal a11y approach to emojis which adds tooltip behaviours using the aria-label attribute. Particularly useful for those emoji which aren't fully compatible with […]
  • Heydon has been working on Ga11ery, a neat image portfolio site generator that's ideal for webcomics. But it's built on the Jamstack using 11ty and Netlify, which means it isn't so simple to […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.