CSS { In Real Life }

Tips, tricks and tutorials on the web’s most beautiful language.

Search by topic...

87 posts
Latest

Troubleshooting Caching

While launching the new version of this site recently, I came across a few issues with some browsers unexpectedly caching the old version – despite this being a total rebuild. It meant some users were still seeing the previous version of the site unless they manually cleared their cache. Clearly this is not a reasonable request to make of every user!

  • Color Theming with CSS Custom Properties and Tailwind

    I’m a big fan of custom properties, and this post for CSS Tricks covers how we use them with Tailwind CSS at Atomic Smash for building themes.

  • Launching the New and Improved CSS { In Real Life }

    After a few months of on-and-off work, this week I’m pleased to finally launch the new and improved version of this site! It’s not a major redesign, and if you’re just reading articles you might notice very little difference. But there are a few new features I hope users might enjoy. No doubt there are a few bugs to fix too! Please be patient while I iron those out over the coming weeks. 😉

  • Tailwind Thoughts

    Although I use utility class framework Tailwind CSS for work, in some ways I am a reluctant user. I actively advocated for us to adopt it as a team, but there’s still something about it that doesn’t feel quite as good (for me) as writing “real” CSS. It has its limitations which, I believe, are worth considering before wholesale adoption. (I wrote about my feelings towards it some time ago.) Nevertheless, its many advantages – the speed which it allows for building components, the consistency it brings to projects that might have several different team members working on the front end, the clear documentation – make it a worthwhile choice for us at Atomic Smash.

  • Making Work Experience a Positive Experience

    Last week at Atomic Smash we had Alice, a junior developer, join us for some work experience. Helping someone get the most out of a work experience placement whilst maintaining the existing team’s productivity is challenging at the best of times. But during a global pandemic, with a fully remote team, it becomes even more so. As lead front end developer, it fell to me to oversee a large part of the placement, and provide assistance when needed.

  • Quick Command Line Tip: Create Mutliple Files With the Same Extension

    If you’re familiar with the command line, you’ll probably already know you can create a new file using the touch command. For example, this command will create a new index.html file in your current directory:

  • 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.

  • 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.

  • 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!

  • 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:

  • Accessibly Hiding Focus Outlines

    This article was updated on 13 August 2020 to include performance considerations with the Javascript solution.

  • Drop-Shadow: The Underrated CSS Filter

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

  • 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?