How to create awesome staggered animations in CSS
Learn how to build smooth staggered animations in CSS using modern features like sibling-index(), complete with practical examples, fallbacks, and accessibility tips.
Rob O'Leary | Blog
Lovely words on web development and miscellanea.
Latest posts
Revising best practices for the video HTML element
The video HTML element is slowly falling in line with the img and picture elements. Should we rethink our best practices for video?
How to create a slick CSS animation from Star Wars
I will make a CSS animation of the iconic opening title sequence for the movie Star Wars. I focus on the text crawl portion of the sequence, which introduces the general plot. I will make it responsive.
Upload a local demo to Codepen
My default is to create demos locally. I would like to share some of those demos on codepen. It would be great to have an app to upload a local demo to codepen.
The curious impact of top-level domain tech trends
Trends can swell interest in particular top-level domains,.ai is the latest on the back of the AI boom. What is the impact of domain naming trends?
Why are people migrating away from GitHub?
I noticed some people migrating away from GitHub recently. I was curious to understand the rationale. Is it a blip or is it a sign of prolonged exodus?
Opting out of search engines
I decided to remove (unindex) my website from search engines. Most search engines now have AI summaries as the most prominent response to user queries. This has a huge impact on the web.
Eleventy - today's date as a global variable
Sometimes, you want to use today's date in a template. One example is a copyright notice that includes the current year. Not all templating languages provide a simple way to get the current date.
Using your own icons for the mouse cursor with accessibility in mind (CSS)
There is a reluctance to customise the icons for the mouse cursor for websites. Can we use do it with accessibility in mind?
RSS feeds (demos, snippets) have new URLs [breaking change]
As part of the big refactor of my website, 2 of the 3 RSS feeds (demos, snippets) have new URLs. I apologise for any inconvenience caused.
My website is approaching Google Zero
My personal website is trending towards Google Zero. Google Search is sending less and less traffic to my website as time goes on. Soon, it will be zero.
roboleary.net - new design and refactor
I did a quiet launch of a new design of my website recently.
A fun copy code interaction - photocopy code animation
I thought it would be cool to mimick a photocopier for the copy action of a code block.
Is your RSS reader getting a 403 error for a feed?
A reader informed me yesterday that they were receiving a 403 error (permission denied) for my RSS feed in their RSS reader. Why is that happening?
Is text-wrap: pretty buggy and Baseline newly available?
I was trying out text-wrap: pretty on my website. It didn't appear to do anything. Is it a bug?
Elevate hover/focus effects with transitions across multiple elements
You can elevate hover/focus effects by triggering transitions on more than one element. With the right orchestration, you can create more nuanced effects.
AI-powered search summaries led to less clicks to websites
Google claims that links beside AI summaries get more clicks. This goes against intuition. Ahrefs did some analysis on this recently. Who is right?
How to create a slick CSS animation from Black Mirror
The title sequence of Black Mirror has a cool effect where the title shakes and eventually shatters. Let’s see how we can recreate it in CSS.
I moved my website to CloudFlare Pages, here's why
I switched the hosting of my personal website from Netlify to CloudFlare Pages yesterday. Here is why.
What is Google's Baseline? Should I use it?
Baseline is a simplified view of browser support for web features. How do you use it? Should you use it?