Journal

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.

Tracklist:

1. Versalife – Manifold
2. Carl Finlow – Components
3. Sedgwick – Rhythm & Isolation
4. ESB – Tethys
5. Reedale Rise – Transluscent
6. Anthiliawaters – Barcelona
7. Turner Street Sound – Dunes (Oceanic Mix)

The mix was recorded on two Technics SL1210s and an Isonoe ISO420 mixer.

If you like talking music feel free to give me a shout on Twitter @fuzzylogicx.

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.

I like this and can see myself using it – especially the Grid-based version because these days I try to avoid absolute positioning and use modern layout tools instead where possible.

I’ve mocked up a modified version on Codepen, sticking with CSS Grid for simplicity. I was going to also wrap it in an @supports (display:grid) however the styles are all grid-based so in the case of no grid support they simply wouldn’t run, rather than causing any problems.

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!

The content of this “story” is pretty interesting – Robin laments the fact that web authors often need newsletters, or to “spam social media” in order to publicise articles on their websites, because most people don’t use RSS (awareness is too low and barriers to entry too great).

However it’s the story’s design and technical implementation which really caught my eye.

Robin does some really cool stuff with the CSS scroll-snap-type property and also explains some steps he had to take to tame differing implementations of height:100vh across browsers.

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.

(via @piccalilli_)

I’ve started reading Andrew Weatherall – A Jockey Slut Tribute.

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.

Support the artists you listen to by buying their stuff.

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.

Here’s my crack at it on Codepen.

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.

It was also easy to run with no local installation, via:

npx lighthouse-parade https://fuzzylogic.me

However it was taking a long time to run over all the pages of my statically generated site (there are lots of pages), so much so that I felt I needed to stop it due to my laptop sounding like it was about to take off. So if running it again, I’d probably only do so on a smaller site, or first check the tool’s documentation to see if either scope-limiting or sitemap-based crawling support have been added.

Here’s a list of useful terminal commands for my reference and yours.

Using iTerm2 (Terminal Emulator)

Composer

Make editing long lines easier by using Composer.

Open Composer: Shift-Cmd-.

Type your long command and enjoy using standard text editing controls:

git commit -am "A very long commit message"

Send Composer command to terminal: Shift-Return

Snippets

Toolbelt > Show Toolbelt

Then add, edit and delete commands.

Select a command then use Send to insert it on the terminal.

References

• Working the Command Line by Remy Sharp from A List Apart

Panorama tells the inside story of the development of the Oxford vaccine against Covid-19. For the past 11 months, the BBC's medical editor Fergus Walsh followed the team at Oxford University and AstraZeneca, as they designed, developed, manufactured and trialled the vaccine.

In the middle of a pretty depressing period, this is fantastic TV about an inspirational scientific effort.