Double-Double
Today I’m introducing a little dash of CSS syntactic sugar I’ve been using a lot when building components recently that I’m calling the Double-Double technique.
article2023 5 posts Permalink ¶
Not without sacrifice
With the boom of JavaScript frameworks and legends-come-true like the new CSS parent selector, we’ve borne witness to an explosion of new technologies and ways to build for the web. But what tradeoffs have we made for all these new bells and whistles?
articleCSS Naked Day JavaScript Function
Rather than remove CSS from my website manually on CSS Naked Day, I have employed a short JavaScript function to perform the check for me.
articleWhy I participated in CSS Naked Day
CSS Naked Day has come and gone for this year, but I’ll be making it a point to participate for many years to come.
articleGenerating Automatic ShortURLs with NewBase60
I’m still auto-generating ShortURLs for each of my posts using Tantek Çelik’s NewBase60, but in a much more organised fashion and leaning into the JavaScript-based ecosystem of Eleventy.
article2022 8 posts Permalink ¶
Copilot me if you can
A short tale about how GitHub Copilot generated some “real” data about my website.
articleThe 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!
articleMoving 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.
articleA 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!
articleWebmention Setup for Eleventy
Here’s a quick run-through of how I retrieve and utilise Webmentions with my Eleventy website.
articleIt’s all relative!
What’s the deal with relative units? Let’s find out.
articleChanging 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.
articleThe 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.
article2021 1 post Permalink ¶
Deep Dive into Colour
How to make powerful use of CSS Variables, colour spaces, and the cascade using Bowhead.
article2020 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.
articleSassy 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.
article2019 4 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.
articleReply 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?
articleLiquidBase60
I have started auto-generating ShortURLs 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.
articleSparkline 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.
article2018 2 posts Permalink ¶
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.
articleVariables 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.
article2017 4 posts Permalink ¶
Crossing Guards
Throttle back on your scroll events and watch out for the IntersectionObserver!
articleNo 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.
articleUnique 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.
articleRemapping 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.
article2016 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?
articleShoot 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?
articleAn 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?
article2015 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.
articleTheming Pinboard
I recently decided I would embark on the task of theming Pinboard. Here's how I did it.
article2014 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.
articleA 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.
articleLet’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.
article2013 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.
articleViewport 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.
articlePersistent Shadows
How easy is it to keep a shadow's direction consistent whilst rotating an element?
articleAnnoying 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!
articleFirst 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?
article