A more serious collection of ideas and bits of prose, dating from 2013–2022.

2022 9 posts permalink¶

The Environment-Aware Wrapper

Here’s a handy CSS technique to make sure your content isn’t obscured by the pesky notch that seems to be present on many phones these days, and it probably already fits nicely into your existing codebase!

published Sunday, October 30^th, 2022

Moving Targets

I was just working on some styling changes to my website and fell into a rabbit-hole on URLs, the <mark> element and :target pseudo-class, and ended up writing an animation as a handy technique for drawing the reader’s attention.

published Wednesday, October 19^th, 2022

A Case for the 1-Dimensional Grid

Reaching for Grid might feel like overkill for a one-column layout, but I hope this technique shows how useful it is in understanding what your CSS is doing!

Webmention Setup for Eleventy

Here’s a quick run-through of how I retrieve and utilise Webmentions with my Eleventy website.

It’s all relative!

What’s the deal with relative units? Let’s find out.

published Monday, August 15^th, 2022
1 response to It’s all relative!

Changing with the times

Lessons learned, pieces of wisdom (and folly), and other things I have to say after running a website blog for a while.

published Wednesday, May 11^th, 2022
4 responses to Changing with the times

The Beloved Refactor

Following the incredible high from a great conference, I just finished an extremely refreshing refactor of the CSS on my site. Here’s what I did.

published Wednesday, May 11^th, 2022

in reply to Writing CSS with Purpose by Binyamin Green

Finding Purpose in CSS

I think you hit the nail on the head with this one. As I like to think CSS is my strongest language (the ego on this guy, honestly), your simile with the layout of a keyboard was spot on—layout, in particular,…

published Friday, January 21^st, 2022

10000

It’s been nearly nine years since I last updated my website's logo, the ethereal Raven, but sixteen years since I began my journey into web development. To commemorate reaching a 5-bit milestone, this year seemed like a good one to…

published Thursday, January 13^th, 2022
3 responses to 10000

2021 2 posts permalink¶

Fun stuff I’m proud of achieving on my website recently: finished building and released eleventy-cache-webmentions as a working and publicly-avaliable Eleventy plugin, which automates retrieving and sorting of Webmentions as well as being as kind as possible to the Webmention.io API automatic…

published Sunday, December 5^th, 2021

Deep Dive into Colour

How to make powerful use of CSS Variables, colour spaces, and the cascade using Bowhead.

2020 2 posts permalink¶

Time to Cache Up

For a long time I’ve been searching for a sound solution to storing the entire Webmention history of my blog, as packaging it up with the rest of the repository was not cutting it for me. Enter the world of async.

Sassy Lobotomised Owl

Managing spacing between elements and components on your page can be a tiring task if undertaken manually. This is where the lobotomised owl comes in: a short, simple snippet of CSS that simplifies this whole process for you. In this article I’ll explain how I make use of it in a more dynamic way using a SCSS mixin.

2019 6 posts permalink¶

The Flip-Flop Technique

I recently implemented a colour scheme toggler in the footer of my website, following Andy Bell’s guide, Create a user controlled dark or light mode, and found a wonky but fun alternative solution for styling my dark theme which leverages CSS’s filter property.

Reply Targets

Providing a useful context to content written in response to someone else's blog post, tweet, toot, etc. helps a reader to understand the conversational nature of these back-and-forths. What abstractions can we make to the data that holds these reply targets, and how can those abstractions make for a richer reading experience and for a leaner publishing workflow?

Another 🐇 🕳 idea… Input a YouTube channel URL → The channel’s Atom feed is added to your Microsub "YouTube" channel. YouTube subscriptions without a Google account. No idea how original this idea is, but for now I’ve built https://chrisburnell.com/get-youtube-feed/

published Friday, May 3^rd, 2019

LiquidBase60

I have started auto-generating short-URLs for each of my posts, old and new, and opted to implement Tantek Çelik's NewBase60 for representing the unique URLs, but I've done so with Liquid so it plays nicely with my Jekyll-powered website.

updated Saturday, August 8^th, 2020
published Monday, March 4^th, 2019

Sparkline Sound-Off

I have been following in the footsteps of Jeremy Keith for a few months now. Dotted around my website, now, are sparklines, representing my activity over time. As an added bonus, a little tune based on the sparkline's values plays when you click on it. With a moderate amount of musical theory under my belt, here's how I accomplished that audio delight.

Late night coding means I’ve managed to create a clear division between my website’s various post types. And alongside that, I’m now using NewBase60 for my shortened URLs, which happens for each of my posts automatically. 😌

published Sunday, January 13^th, 2019

2018 9 posts permalink¶

I gave a lightning talk in 2016 about writing readable and maintainable code, and @DvBerzon is doing some fantastic research in this area that really intrigues me. I’m eagerly waiting for the next phase of research and results! http://howreadable.com/

published Tuesday, December 11^th, 2018
3 responses to

Super pleased to say that I just gave a short presentation about #indieweb to my team at work, and I didn’t butcher the explanation too badly, so everyone’s on-board! Feels great to be a part of this community and welcome…

published Thursday, December 6^th, 2018
5 responses to

At long last, I’ve managed to add the ability to edit my existing notes through my Micropub endpoint, and given my track record of totally making no mistakes, this is a good thing. #indieweb

published Tuesday, December 4^th, 2018
3 responses to

I’ve made an average of 1.498 commits/day to my website over the last 5.5 years. ~670 of those commits contained fix in the commit message. Do with that information what you will while I continue to endlessly chase my own tail.

published Thursday, November 29^th, 2018
6 responses to

Numerals, Romanticised

For a better part of the year, I've been working on a Jekyll-based Progressive Web App, BloodBuilder, for managing my Sorcerer in a game of Pathfinder I've been playing with some friends. One of the many intricate parts of logic involves the ability to convert Arabic numerals to and from Roman numerals, so I wrote a simple Liquid include to handle this.

published Wednesday, November 7^th, 2018
1 response to Numerals, Romanticised

I’ve sat down with three developers this week to help them diagnose some errors, but as soon as I sat down the errors mysteriously vanished. Anyway, hit me up if you want a quote for me to come sit next…

published Friday, November 2^nd, 2018
5 responses to

Variables for Both

Now that CSS Custom Properties, or CSS Variables, are becoming a solid standard, I'm using a method to map their values to CSS Variables whilst providing a value-as-is fallback using a straightforward syntax in a SCSS function and mixin.

Living Deliberately

I went to the woods because I wished to live deliberately, to front only the essential facts of life, and see if I could not learn what it had to teach, and not, when I came to die, discover that…

published Monday, October 1^st, 2018
4 responses to Living Deliberately

Couldn't be happier with how #SotB18 turned out this year. It was an honour and a pleasure to be involved in organising such an incredible event. Massive thanks to all of our speakers, attendees, sponsors, and supporters. We couldn't have…

published Saturday, September 8^th, 2018
12 responses to

2017 4 posts permalink¶

Crossing Guards

Throttle back on your scroll events and watch out for the IntersectionObserver!

published Thursday, November 9^th, 2017
3 responses to Crossing Guards

No Three Snowflakes Are Alike

I developed a Sass function to generate a list of unique pairs given a List or Map of data, so I extrapolated the idea and refactored the function to generate a series of unique groups of size n.

published Friday, November 3^rd, 2017

Unique Pairs in SCSS

In creating a from-scratch grid for a redevelopment project, I was using SCSS to loop through various bits of data to generate a bunch of repetitive CSS, but I realised I had no DRY way of generating a list of unique pairs of items from a given dataset, so I set out to find out how.

published Friday, June 16^th, 2017
2 responses to Unique Pairs in SCSS

Remapping Ranges in Sass

Great inspiration can sometimes be found in exploring available opportunities and embracing new ideas. In this article, I'll try to replicate a foreign concept in a familiar way, and explain why I decided to even do it.

published Thursday, June 15^th, 2017

2016 3 posts permalink¶

April LWS Talk

I gave a talk at London Web Standards and asked the question, So how can we write media queries that are both consistent and succinct?

published Friday, April 29^th, 2016

Shoot for the Moon

Don't be half-minded when dealing with fractions and pixels. How can we ensure all browsers interpret fractions in our CSS equally?

published Wednesday, March 23^rd, 2016

An Extended Response

If you've dabbled in Sass before, you're likely familiar with @extend and @mixin, but is there any use-case for @extend? Given the benchmark performance of the two, can we still be confident in the cascade when @extending in Sass?

published Friday, March 18^th, 2016

2015 2 posts permalink¶

Backscratching Revisited

I revised my original technique for styling default elements and took it a step further to scratch the greatest number of backs.

published Monday, June 8^th, 2015

Theming Pinboard

I recently decided I would embark on the task of theming Pinboard. Here's how I did it.

published Thursday, March 12^th, 2015

2014 3 posts permalink¶

On Your Marks, Get Set, Wait

What's really important when reading an article online? Content should always come first, and give users the option for more later.

updated Monday, January 25^th, 2016
published Monday, September 22^nd, 2014

A Slice of Heaven

We know that webpages are composed of text and boxes. Lots and lots of boxes. But with the power and might of CSS3 we can do some fancy stuff that never used to be possible.

published Wednesday, August 27^th, 2014

Let’s Look Back

I haven't published a new article in a while now, but I haven't been twiddling my thumbs. Let's look at what happened behind-the-scenes in the last eight months since my first article.

published Sunday, February 9^th, 2014
2 responses to Let’s Look Back

2013 5 posts permalink¶

I’ll Scratch Your Back, And Mine Too

I've been playing around with CSS content and attribute selectors recently, and came across a useful trick for styling default elements.

updated Saturday, June 6^th, 2015
published Tuesday, October 29^th, 2013

Viewport Woes

I've been around the block and seen many variations of variables and syntax in viewport meta tags. What's the correct way to go about it? And maybe I'll comment on the state of browsers today as well.

published Thursday, August 29^th, 2013

Persistent Shadows

How easy is it to keep a shadow's direction consistent whilst rotating an element?

published Tuesday, June 18^th, 2013

Annoying Navigation CSS

Navigation is crucial to a functional website. It is how your users find the information they're after; get it right, and your users are happy—get it wrong, and they go insane!

published Sunday, June 16^th, 2013

First Article Ever

Well, I've finally gotten my site up and running to a point where I can consider it to be a success. What was the process, and what did it involve? What mistakes did I make that you can avoid?

published Saturday, June 15^th, 2013