• Dynamic CSS Masks with Custom Properties and GSAP

    Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect.

  • Development Budgets

    Personally, I find that one of the hardest things to do as a developer is estimate how long a piece of work will take. At Atomic Smash we’ve developed some processes over time that enable us to estimate a lot of common development tasks with some degree of accuracy:

  • Paper Snowflakes: Combining Clipping and Masking in CSS

    Just after Christmas I made a fun little Codepen demo recreating realistic-looking paper snowflakes in CSS, inspired by our homemade decorations! Christmas might be a distant memory, but there were plenty of learnings from this process that might be interesting to share.

  • Quick Tip: Style Pseudo-elements with Javascript Using Custom Properties

    In Javascript we have a few ways of selecting elements, but we can’t directly target pseudo-elements. Something like this, for instance, won’t work, and will return null:

  • Animating Underlines

    I recently gave my personal website a makeover and included a few cool little CSS tricks. Over the next few posts I’ll share some of these. The first one is all about underlines. Hover over any of the links in the body copy on the site and you’ll notice the underline transitions downwards. On the web it’s pretty common to seeing animated underline effects using pseudo-elements and/or borders. Try hovering on the examples in this demo.

  • Debugging Media Queries: A Dev Tools Wish List

    The Level 5 Media Queries specification brings us the ability to detect a whole load of different user preferences from within our CSS file, and serve up styles accordingly. Current support for the various media queries within the specification is mixed, but there are some that already have widespread support and are safe to use right now. For instance, we can detect whether a user has their system preferences set to dark mode using the prefers-color-scheme media query:

  • Favourite Things 2: New CSS Features, JS Libraries and More

    Here’s a short round-up of some of the web technologies and resources that are getting me excited right now. Having started with the best intentions to write one of these posts regular, it’s been several months since the first one.

  • Finding an Element’s Nearest Relative Positioned Ancestor

    This article was updated on 15 March 2021.

  • My Typical Day

    I’ve been reading quite a few blog posts in a kind of unofficial series started by Colin Devroe, who kicked things off by writing about his typical day and inviting others to do the same. It’s like looking in through a little window on other people’s worlds, which I love – and right now it feels like a great way of connecting with others, which is more important than ever. Sometimes I pick up some productivity tips too!

  • On a break

    Since starting this blog almost three years ago, I’ve regularly published two more more articles every month. I love writing and I love web development, so this never (or hardly ever) felt like a chore: there was always something to get excited about, which meant I couldn’t wait to dash off a few thoughts, whether on the train home from work or late into the evening, even after a long day of coding. But this pandemic has utterly defeated me.

  • Goodbye, 2020

    We all know 2020 has been a bad year. Nevertheless, I feel compelled to continue the tradition of writing my end-of-year review, to reflect on my goals and achievements (personal and professional). Writing things down can help make sense of a year that has often made very little sense. For me personally, and no doubt for many of you too, there have been many times throughout the past 12 months where I’ve felt stuck in limbo, and that I’m not achieving very much at all. So I’m writing this to celebrate the highlights and the small wins (as well as reminding myself they exist). But (as Hidde also acknowledges in his end-of-year post), it doesn’t mean the year has been without its lowlights. Don’t feel bad if your biggest win this year has been just getting through it. It’s the same for me, and countless others.

  • Video: Using Tailwind with Wordpress

    Last week I had the pleasure of chatting with Keith Devon and Mark Wilkinson of Highrise Digital, alongside Ben Furfie, about my experience of using Tailwind CSS for building Wordpress sites. We’ve been using Tailwind at Atomic Smash for the past year, and I’ve been using it even longer. It’s been an interesting journey marrying it up with the Gutenberg block editor in Wordpress, but it’s fair to say it’s become an important part of our workflow.