Skip to main content

A stream of consciousness by Laurence Hughes

Hi, I’m Laurence. I’m a Glaswegian software engineer using open web standards to create fast, responsive, accessible websites. I’m also a music-loving vinyl junkie and table tennis nerd. This is my online home, where I play with code and share thoughts on the web, music and life.

Latest posts

Recently read: Piranesi, by Susanna Clarke

I read this book in two days while on holiday in Ibiza. It’s been a while since I’ve finished a book so quickly, but it’s short and once it had me locked in I couldn’t put it down.

The old adage that you shouldn’t judge a book by its cover is definitely true of this one. The cover depicts a faun standing on a marble column and conjures images of fantasy and mythology. There is an element of that, but with constant hints to the modern world. And as clues emerge you start to wonder if you’re really in an another time and space, or in the middle of a dream or some Jacob’s Ladder style trip.

The protagonist, Piranesi, is really likeable and I loved the humour too. The puzzle he’s trying to solve called to mind Memento and the dream-like feel reminded me of the scene in Inception where Cobb meets Saito in Limbo.

I loved it! Thanks to Craigy B for the recommendation.

Animating the dialog element with CSS transition and @starting-style

I’ve written before that CSS transition is great for simple animations triggered by an event. You might want to transition something in response to a focus or hover event. Or, perhaps your use case is that the user activates a button to launch a previously-hidden dialog element and you want to use transition to animate the dialogue’s entrance and exit.

Excerpts for Eleventy, by Keith Carangelo

Recently I updated this website’s git repository README to include a summary of my approach to supporting post excerpts.

I define an initial part of a post as the excerpt by adding a separator string between it and the remaining content. Then in my posts list I grab 11ty’s post.page.excerpt and pass that through a custom markdown-parsing filter.

This works pretty well but sometimes it’s a bit inflexible that the excerpt has to be part of the post. Sometimes you might want to say something different, or shorter and snappier in the excerpt.

Diving into CSS outline

I’m partial to going down the rabbit-hole on a niche aspect of front-end development. For example a few years ago I got the urge to dig into what’s going on with containers and items in Flexbox-powered layouts and noted my findings in Flexbox-fu. I do it to go beyond the thing’s theory and into its practical application for solving real web development challenges; to gain a deeper understanding of why things behave the way they do. These deep dives take time but are rewarding; usually I’ll learn about more than I expected.

Recently I dug into the characteristics and behaviour of the CSS outline property. The catalyst was seeing Heydon Pickering’s clever use of outline to automate divider lines within a flexbox powered navigation menu. I couldn’t fathom how it works so decided to reverse-engineer it. More on Heydon’s trick later, but I’ll start with a recap of what outline is good for.

External Link Bookmark Note Entry Search