Timer Bars in CSS with Custom Properties
18.8.2020
I was working on a thing the other day that needed a visible timer. There was UI precedent for this type of timer on the project. People didn’t want to see numbers ticking downward; it was more ideal to see a “bar” drain away from full to empty. I mention that because there...
Queue Jumping in Netlify
18.8.2020
Cutting to the chase: if you’re on a Business or Enterprise team on Netlify, you can click a build to make it run next in a queue. For example, if you have a really time-sensitive thing (e.g. a bug fix going to production), it can jump ahead of some random development branch building....
Simple Node.js Proxy
18.8.2020
When I wanted to refresh my React.js skills, I quickly moved to create a dashboard of cryptocurrencies, their prices, and and other aspects of digital value. Getting rolling with React.js is a breeze — create-react-app {name} and you’re off and running. Getting the API working...
radEventListener: a Tale of Client-side Framework Performance
18.8.2020
React is popular, popular enough that it receives its fair share of criticism. Yet, this criticism of React isn’t completely unwarranted: React and ReactDOM total about 120 KiB of minified JavaScript, which definitely contributes to slow startup time. When client-side rendering in React is relied...
The New CSS-Tricks Video Intro by dina Amin
18.8.2020
You know we do video screencasts, right? It’s not, like, super regular, but I have done them for a long time, still like doing them, and plan to keep doing them. I publish them here, but you can subscribe over on YouTube as well.
I’ve had a couple of different custom video intro...
What Happens When Border Radii Overlap?
17.8.2020
I’d wager that most times we’re rounding box corners in CSS, we’re applying a uniform border-radius value across the border. It’s a nice touch of polish in many designs. But there are times when we might want different radii for different corners. Easy, right? That way the property takes four...
CSS-Tricks Chronicle XXXVIII
15.8.2020
Hey gang! I’ve been fortunate enough to be a guest in a variety of different here, so I thought it was time for another Chronicle post. You know, those special posts where I round up the random goings-on of things I do off of this site.
I joined Ed & Tom over on A Question of Code.
We...
That’s Just How I Scroll
14.8.2020
How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that’s a pretty good indication. You might still have to scrapple with your client about “the fold” or whatever, but I don’t think anyone is confused at what a scrollbar is or what...
What I Learned by Fixing One Line of CSS in an Open Source Project
14.8.2020
I was browsing the Svelte docs on my iPhone and came across a blaring UI bug. The notch in the in the REPL knob was totally out of whack. I’m always looking to contribute to open source, and I thought this would be a quick and easy fix. Turns out, there was a lot more to it than just changing...
Collective #618
13.8.2020
Elder.js * Serverless: I'm a big kid now * The Endless Doomscroller * Building a Design System Library
The post Collective #618 appeared first on Codrops
Stacked Cards with Sticky Positioning and a Dash of Sass
13.8.2020
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
I started wondering how much JavaScript this would involve and how you’d go about making it when I realized — ah! — this must be the work...
Chapter 2: Browsers
12.8.2020
Previously in web history…
Sir Tim Berners-Lee creates the technologies behind the web — HTML, HTTP, and the URL which blend hypertext with the Internet — with a small team at CERN. He convinces the higher-ups in the organizations to put the web in the public domain so anyone can...