Journal
VisualSitemaps: Autogenerate Beautiful Sitemaps and Screenshots
A great tool for automatically generating a visual sitemap (visual because it attaches a screenshot to each node) for any given website.
Simply enter a URL and get a thumbnail-based visual architecture of the entire site.
07/01/21 DJ Mix – Manifold
First in a series of mainly short, off the cuff mixes where I just hit record and see where it goes. This one’s on the Electro tip, having kicked it off with Versalife’s Manifold from last year.
A Utility Class for Covering Elements (on CSS { In Real Life })
Need to overlay one HTML element on top of and fully covering another, such as a heading with translucent background on top of an image? Michelle Barker has us covered with this blog post in which she creates an overlay utility to handle this. She firstly shows how it can be accomplished with positioning, then modernises her code using the inset CSS logical property, before finally demonstrating a neat CSS Grid based approach.
Newsletters, by Robin Rendle
A fantastic so-called “Scroll Story” from Robin Rendle. In his own words it’s “an elaborate blog post where I rant about a thing” however given the beautiful typography, layout and illustrations on show I think he’s selling it a little short!
BBC GEL | The lessons learnt creating a design system for BBC Online
Interesting insight into the BBC design system and the five areas it’s split into: Foundations, Components, Layout Components (including Stack, Grid etc) Levers and Containers.
Merch Table
A neat online tool (with a positive goal) which lets you paste in a link to one of your Spotify playlists then lets you know which of the tracks or albums are available to buy on Bandcamp.
Create an Automatically Responsive Flexbox Gallery (on egghead.io)
Here’s a lovely intrinsically responsive (no media queries) photo gallery solution from Stephanie Eckles. It can accommodate differently sized images and achieves its layout by a combination of flexbox features (flex-wrap, flex-basis) and by applying object-fit: cover to photos to make them fully cover their parent list items.
Big picture performance analysis using Lighthouse Parade (on Cloud Four)
I like the sound of this performance analysis tool from the clever folks at Cloud Four, especially because it covers your entire site rather than just a single page.
Lighthouse Parade is a Node.js command line tool that crawls a domain and gathers lighthouse performance data for every page. With a single command, the tool will crawl an entire site, run a Lighthouse report for each page, and then output a spreadsheet with the aggregated data.
My Command Line Cheatsheet
Here’s a list of useful terminal commands for my reference and yours.
My DevTools Cheatsheet
Here’s a (work in progress) list of useful (Mac) Browser DevTools tips, tricks and keyboard shortcuts for my reference and yours. This is a work in progress and I’ll update it as I go.