Popular
this
month
Sponsored by
AWS Amplify
How The Web is Really Built
Design v18
How to Animate a SVG with border-image
npm ruin dev
2020 Roundup of Web Research
Let’s Create a Lightweight Native Event Bus in JavaScript
Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode
Chapter 6: Web Design
Styling Comment Threads
Responsible, Conditional Loading
A Microsite Showcasing Coding Fonts
caret
caret
in CSS is a shorthand property that combines the caret-color
and caret-shape
properties into a single declaration. So, we get to write this:
.element {
caret: #ff7a18 underscore;
}
…which is akin to writing this:
.element {
caret-color: #ff7a18;
… caret-shape
The caret-shape
property in CSS changes the shape of the text cursor inside editable elements that indicates a user is typing. It’s part of the CSS Basic User Interfaces Module Level 4, which is currently in Working Draft status.…
Monorepo
I’m not exactly a large-scale DevOps guy, but I can tell ya we’ve been moving back toward a monorepo at CodePen and it’s rife with advantages over a system with lots of smaller repos. For us, I mean. It’s …
Re-Creating the Porky Pig Animation from Looney Tunes in CSS
You know, Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. We’ll get there, but first we need to cover some CSS concepts.…
Tech Stacks and Website Longevity
Steren Giannini in “My stack will outlive yours”:
…My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is portable, has an instant dev loop, has no build step
Checkerboard Reveal
Back when I was 10, I remember my cousin visiting our house. He was (and still is) a cool kid, the kind who’d bring his own self-programmed chess game on a floppy disk. And his version of chess was …
You want minmax(10px, 1fr) not 1fr
There are a lot of grids on the web like this:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
My message is that what they really should be is:
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(10px, 1fr));
}
… Servers: Cool Once Again
There were jokes coming back from the holiday break that JavaScript decided to go all server-side. I think it was rooted in:
- The Basecamp gang releasing Hotwire, which looks like marketing panache around a combination of technologies. “HTML over
useStateInCustomProperties
In my recent “Custom Properties as State” post, one of the things I mentioned was that theoretically, UI libraries, like React and Vue, could automatically map the state they manage over to CSS Custom Properties so we could use that state …
How to Play and Pause CSS Animations with CSS Custom Properties
Let’s have a look CSS @keyframes
animations, and specifically about how you can pause and otherwise control them. There is a CSS property specifically for it, that can be controlled with JavaScript, but there is plenty of nuance to get …
What if you could cut your hosting costs by 80%? Webiny Serverless CMS makes it possible.
Are you hosting one or more websites and are using a headless CMS? Are you hosting your CMS on a virtual machine or a container, or using a SaaS solution? If so, then you’re paying for the uptime, regardless if …
Need front-end development training?
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.