Embrace the Unpredictable
In nature, no two things are ever the same. Life is imperfect, unpredictable, and beautiful. We can walk through the same forest every day and see differently colored leaves. We can look up at the clouds every minute and watch a whole new formation. The physical world is transient and ever-changing...
Diagonal Stripes Wipe Animation
I was playing this game on Apple Arcade the other day called wurdweb. It’s a fun little game! Little touches like the little shape dudes that walk around the screen (but otherwise don’t do anything) give it a lot of character. I kinda want little shape dudes that walk around on websites. But another..
Using the Reflog to Restore Lost Commits
This article is part of our “Advanced Git” series. Be sure to follow us on Twitter or sign up for our newsletter to hear about future articles!
The “Reflog” is one of Git’s lesser-known features—but one that can be extremely helpful. Some people refer to it as a “safety net,” while I like to think ..
A Look at the Cloudinary WordPress Plugin
(This is a sponsored post.)
Cloudinary (the media hosting and optimization service) has a brand new version (v3) of its WordPress plugin that has really nailed it. First, a high-level look at the biggest things this plugin does:
It takes over your media handling. Images and video are served by Clo..
Recreating the Apple Music Hits Playlist Animation in CSS
Apple Music has this “Spatial Audio” feature where the direction of the music in your headphones is based on the location of the device. It’s tough to explain just how neat it is. But that’s not what I’m here to talk about.
I opened up the Apple Music app and saw a featured playlist of hit songs th..
We Analyzed 425,909 Favicons
This is a neat idea for a research project. The big map is fun, but the research had some tidbits in it worth looking at.
The average favicon network request takes 130ms, at least from our speedy cloud instance.
Fast, but not that fast, particularly for a file that nearly every website in the worl..
When is it “Right” to Reach for contain and will-change in CSS?
I’ve got some blind spots in CSS-related performance things. One example is the will-change property. It’s a good name. You’re telling the browser some particular property (or the scroll-position or content) uh, will, change:
.el {
will-change: opacity;
}
.el.additional-hard-to-know-state {
opaci..
A Handy Little System for Animated Entrances in CSS
I love little touches that make a website feel like more than just a static document. What if web content wouldn’t just “appear” when a page loaded, but instead popped, slid, faded, or spun into place? It might be a stretch to say that movements like this are always useful, though in some cases they..
Creating Generative Patterns with The CSS Paint API
The browser has long been a medium for art and design. From Lynn Fisher’s joyful A Single Div creations to Diana Smith’s staggeringly detailed CSS paintings, wildly creative, highly skilled developers have — over the years — continuously pushed web technologies to their limits and crafted innovative..
Which SVG technique performs best for way too many icons?
Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance. Maybe 1,000 icons is a little bit of an edge case, but hey, 250 rows of data with four icons in each gets you there. Tyler covers the nuances carefully in the post. The different techniques..