Tips, tricks and tutorials on the web’s most beautiful language.
I’ve been writing and speaking about web sustainability quite a bit this past year. One thing I’ve done periodically for my talks is to test the data transfer size of various social media embeds — they’re pretty bad!
Read more
We made it! I tasked myself with writing 30 posts in 30 days for National Blog Posting Month, and somehow I just about managed it (well, including this post — yes, I cheated!). So, what have I learned?
Read more
A tiny tip today, but a good one: use the :empty pseudo-class to hide pesky empty elements (commonly found in user-generated content).
Read more
The overflow CSS property (shorthand for overflow-x and overflow-y) controls what happens when the stuff you put inside a box is bigger than the box itself. Should it bleed out of the box (overflow: visible, the default)? Hidden completely (overflow: hidden)? Or should the content be scrollable (overflow: scroll or overflow: auto)?
Read more
The video of Ryan Townsend’s talk from Performance Now(), The Unbearable Weight of Massive JavaScript is well worth a watch. Excessive JS, seemingly turbo-charged by JS frameworks, has long been a problem on the web, with bundle sizes showing no sign of decreasing.
Read more
A recent post by Melinda Seckington, The Myth of not Having Anything To Talk About really resonated with me. I’ve been doing talks about CSS for a few years now, and for a while before that I was an organiser of web conferences, so I’ve seen a fair few talks. I can definitely say that some of the best talks I’ve seen are not necessarily by the people with the most expertise in a given subject, but by people who share their story, their perspective — whether it’s on a particular technology, design problem, workflow, project case study, or something else entirely. Making it personal makes it relateable. As Melinda says:
Read more
When you scroll rapidly to the top or bottom of a webpage you might notice a “bounce” effect, where the browser momentarily allows you to scroll beyond the uppermost or lowermost point, before bouncing you to correct position.
Read more
My iPhone 8 is still going, four years after I bought it. That shouldn’t be a great achievement, but somehow it is. The battery life isn’t great (it’s already been replaced once), some apps are noticeably slower, and Apple have announced that the iPhone 8 won’t support the iOS 17 update, which means I’ll have to seriously consider upgrading in the not-too-distant future. I’m hoping to make it to the five-year mark, but we’ll see.
Read more
Read more
Earlier this month, Jeremy Keith posed the question: “How green is my server?”. As Jeremy notes, it’s surprisingly hard to get that information! So how do you ensure that you’re hosting your website on a green server?
Read more
I’ve been playing around with scroll-driven animations a bit lately. Scroll timelines allow us to link the progress of element’s animation to the progress of a scroll container, as I wrote about not long ago for MDN.
Read more
Reality Check is a new article series from Set Studio that focuses on CSS layout with real-world case studies. Each issue takes a design from Dribbble (or a similar platform) and demonstrates how to code it in CSS in a way that plays to the strengths of the medium, rather than aiming for pixel-perfect recreations. As Andy says in the first article:
Read more