The Cicada Principle, revisited with CSS variables
5.8.2020
Lea Verou digging up the CSS trickery classic and applying it to clip the backgrounds of some code blocks:
The main idea is simple: You write your main rule using CSS variables, and then use :nth-of-*() rules to set these variables to something different every N items. If you use enough...
Making Sense of react-spring
4.8.2020
Animation is one of the trickier things to get right with React. In this post, I’ll try to provide the introduction to react-spring I wish I had when I first started out, then dive into some interesting use cases. While react-spring isn’t the only animation library for React, it’s one of the more...
Jetpack CRM
4.8.2020
About a year ago, Automattic bought up Zero BS CRM. The thinking at the time was that it could be rebranded into the Jetpack suite and, well, that happened.
CRM meaning “Customer Relationship Management” if you’re like me and this is a little outside your sphere of everyday...
UI Interactions & Animations Roundup #9
4.8.2020
A fresh set of inspirational UI interactions and animations from the past couple of weeks.
The post UI Interactions & Animations Roundup #9 appeared first on Codrops
Friction Logs
4.8.2020
I first heard the term “Friction Log” from Suz Hinton back in April on ShopTalk. The idea makes an extreme amount of sense: Use a thing, and write down moments where you felt friction.
Did some installation step bug out? Did you see something that the docs didn’t mention? Did...
The Making of: Netlify’s Million Devs SVG Animation Site
3.8.2020
The following article captures the process of building the Million Developers microsite for Netlify. This project was built by a few folks and we’ve captured some parts of the process of building it here- focusing mainly on the animation aspects, in case any are helpful to others building...
Promise.allSettled
3.8.2020
The Promise object has many useful functions like all, resolve, reject, and race — stuff we use all the time. One function that many don’t know about is Promise.allSettled, a function that fires when all promises in an array are settled, regardless of whether any of the promises...
10 modern layouts in 1 line of CSS
31.7.2020
Una doing an amazing job of showing just how (dare I say it?) easy CSS layout has gotten. There is plenty to learn, but what you learn makes sense, and once you have, it’s quite empowering.
The demos are all together here.
Direct Link to Article — Permalink… Read article...
A Look at What’s New in Chrome DevTools in 2020
31.7.2020
I’m excited to share some of the newer features in Chrome DevTools with you. There’s a brief introduction below, and then we’ll cover many of the new DevTools features. We’ll also look at what’s happening in some other browsers. I keep up with this stuff, as I create Dev Tips, the largest...
A Lightweight Masonry Solution
31.7.2020
Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I’ve been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb moment when I understood...
Spotting a Trend
31.7.2020
There are tons of smokin’ hot websites out there, with an equal or greater number of talented designers and developers who make them. The web is awesome like that and encourages that sort of creativity.
Even so, it amazes me that certain traits find their way into things. I mean, it makes...
SVG Title vs. HTML Title Attribute
30.7.2020
You know the title attribute? I can do this:
<div title="The Title"I'm a div with a `title`
</div
And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get…
Which, uh, I guess is something. I sometimes use it for things like putting...