I’ve recently been updating my website over a series of nights and weekends. The changes aren’t very noticeable to the eye; they mostly involved modernising and streamlining back-end features and technology, plus some improvements to accessibility and performance. I’m really happy to have made them!
About a year ago I wrote about the features I wanted on my personal website versus those it had. The work I’ve been doing recently has helped to plug the gaps.
During this work I documented the latest features of my website on the readme of my public website repository. I find it really useful to be able to see this information at a glance. It’ll also make life much easier when I want to tweak things in the future.
Here’s what the Features section of my readme currently says:
- Statically generated, fast loading pages using Eleventy
- Hosted with Netlify
- Focused on accessibility, performance and web good practices (100/100 scores for all on Lighthouse)
- Supports
draftposts that are skipped in production builds using 11ty’s Preprocessor API - Raw image to modern image conversion via Eleventy Image plugin: converts formats; generates sizes; turns markdown
imginto the modern HTML for performant, responsive images - Content editing via Decap CMS
- Search feature using PageFind and Zach Leatherman’s pagefind-search web component
- Contact form using Netlify Forms
- 404 page shown when necessary, thanks to Netlify’s custom 404 page handling
- Code block syntax highlighting via prism.js
- Supports deep-linking to headings via Zach Leatherman’s heading-anchors web component
- RSS feed using 11ty’s RSS plugin. I created a custom collection named
feedPoststo let me control which posts are shared - Tags page which lists all tags as links; plus “Posts tagged with x” pages
- Uses JavaScript modules for both client-side JS and on the server
- Pure modern CSS with no pre- or post- processing dependencies. Layers, native nesting, etc.
- Bundling (CSS and JS) via 11ty Bundle plugin
- Minification with cssnano
- Design Tokens defined in interoperable JSON then implemented as CSS custom properties (inspired by Heydon’s approach)
- Intrinsically responsive layouts inspired by Every Layout
- Fluid responsive type and spacing using Utopia
- Avatar available at a well-known location (Jim Nielsen’s idea)
- SEO: I provide an XML sitemap for search engines, and a human-readable sitemap
I’ve created a checklist called Website post-launch checklist which I can use after making updates. I’ve added this to my readme. (Perhaps in future I can automate some of the checklist tasks but for now manual is fine.)
I also want to do updates to 11ty and its plugins more regularly – I think that’ll be less painful. I have dependabot alerts turned on and I have also subscribed to the 11ty’s Blog’s in an effort to hear about upcoming changes.
I’ve added myself to 11ty’s community and am now listed as an Eleventy author. I hope that some day I’ll find that fuzzylogic.me has been added to 11ty’s Speedlify Leaderboard too – that’d be cool!