• Learning About CSS 3D Transforms and Perspective

    3D transforms, despite being available in CSS for a while, are one area I’ve never understood well. I think if they were new to CSS now, I’d spend a lot more time playing around with them, like I have with Motion Path and some other new CSS features. As things stand, I’ve never had much cause to use them in production (with the odd exception), so I’ve concentrated my time and energy on other things.

    Read more

  • Why I Don’t Have Time For Your Coding Challenge

    It tends to be standard recruitment practice in the tech industry to require candidates to complete some sort of coding test or challenge. Sometimes this takes the form of the much-feared whiteboard interview – where candidates are expected to work through a problem on the aforementioned whiteboard, in front of an interviewing panel. In other cases, it’s a take-home assignment, or coding challenge. Often following an initial interview (or sometimes two rounds of interviews), the candidate is given a task to complete in their own time, generally something typical of the job they are applying for, or that requires many of the same skills.

    Read more

  • Favourite Things 1: GSAP ScrollTrigger, Eleventy, and more

    For a while I’ve been thinking about publishing a semi-regular round-up of all the things that have been interesting me in tech recently, partly with the aim of helping others discover new things. (Hey, that’s what this blog is for!) Kind of like a newsletter, without the newsletter part. Although maybe it’ll eventually become a newsletter too!

    Read more

  • Building the Zig-Zag Gradient Lab

    Last month I had the priviledge of giving a talk at Vienna Calling, the online meetup organised by CSS-In-Vienna and Webclerks. Alongside fantastic talks by Cassie, Andy, Ramón and Carie, I spoke about how I built a recent Codepen demo, the Zig-Zag Gradient Lab:

    Read more

  • Accessibly Hiding Focus Outlines

    Update (January 2023): This article was written before :focus-visible was widely supported. Browsers have since implemented :focus-visible as the default for displaying the focus outline. I no longer recommend the solution detailed in this article.

    Read more

  • Drop-Shadow: The Underrated CSS Filter

    This article was updated on 13 August 2020 to include additional reference material.

    Read more

  • From Gatsby to Eleventy: Choosing a Static Site Generator for a Personal Site

    There have been so many great personal site redesigns recently. Cassie’s, Jason’s and Josh’s are among my favourites, but there are plenty more flying under the radar. What characterises many of them is a certain playfulness, a resurgence of whimsy and delight. You can feel the love and care that has gone into them, the fact that their creators have carved out their little corner of the web to call home. Perhaps the pandemic situation, coupled with the popularity of Animal Crossing has something to do with this?

    Read more

  • Irregular-shaped Links with Subgrid

    Card-based UIs are commonly-used web design patterns, and it’s not unusual to build a UI that requires a hover (or focus) effect to be applied to an entire card. There are a few strategies for implementing this effect using CSS, and this CSS Tricks article covers some of them. (None of them is perfect, and they all have their pitfalls!)

    Read more

  • Mentoring

    This blog has been a little quiet over the past couple of weeks. With everything going on in the world right now, it doesn't feel like the right time to be sharing CSS tips, without acknowledging the real struggles of the people out protesting on the streets following the killing of George Floyd. Black people are literally fighting for the right to exist in a racist world.

    Read more

  • CSS-only Slide-up Caption Hover Effect

    Have you ever needed to build a UI where a caption needs to slide over an image on hover, revealing more content?

    Read more

  • All the CSS Colours

    I recently made a demo where I needed to list all the CSS named colours as options in a select input. I didn’t want to write them all out by hand, but the trouble was I couldn’t find just a list of all 148 colours anywhere as plain text.

    Read more

  • Exciting Things on the Horizon For CSS Layout

    This past week has brought a few announcements from browser vendors of some exciting things that might have a big impact on CSS layout in the very near future.

    Read more