A weekly email newsletter with the most interesting news, ideas, fresh content, thoughts, and incredibly mature jokes from Team CSS-Tricks. This is your ticket to saying up to date with web dev.
[Robin]: My favorite website at the moment is Volume, “a publishing platform for high-quality illustrated books.” It’s a place where you can kickstart book-related projects but what gets made at the end are these enormous and beautiful bits of …
The Space Jam website has been a time capsule. You’d head to spacejam.com suddenly be teleported back to 1996; a time before CSS, a time when using <table> elements to make grids and layouts on a page was cool, …
[Robin]: Someone emailed me the other day out of the blue and noticed an odd pattern: apparently whenever I write about just about anything design systems related or about front-end development, the conversation always comes back to my frustrations with …
First up this week, Tatiana Mac wrote about taking a no-motion-first approach to animations where she argues that animations can be neat and fun and great but for some folks animations are horrible and can cause them actual discomfort or …
[Robin]: hsl() is my new favorite design tool. Okay, so it’s not entirely new — hsl() has been around for a while — but I’ve caught myself using this new color format lately and, from now on, I’ll be …
[Robin]: I still haven’t found myself reaching for Web Components yet and I’m not sure why. I assume because most of my time is spent with either Static Site Generators or very large Single Page Applications written in React. But …
[Robin]: The first thing that caught my eye this week was this new HTML element called <popup>. Šime Vidas wrote about this in the Weekly Platform News:
…A popup is a temporary (transient) and “light-dismissable” UI element that
First up this week, Andy Bell wrote this fantastic piece where he dives into a ton of new CSS features that we can use today:
…CSS is great and getting better all the time. Over recent years, especially, it has
Yep, you can do that now without hacks or employing the somewhat awkward combination pseudo-elements and counters. Your best bet? The ::marker pseudo-element. We just updated the Almanac entry on that for your reference pleasure.
ul [Robin]: Designing the homepage of a website is harder than learning a new framework, more difficult than building an enormous website, and more challenging than memorizing all the values and properties of CSS. In short, the absolute worst thing about …
[Robin]: “Unnecessary initialisms are exclusionary,” writes Jeremy Keith in this particularly excellent blog post about performance, web design, and how initials for terms such as CLS make thing much more difficult for everyone to understand:
…I feel sorry for
Robin: This week I’ve been thinking a lot about Framer Motion. It’s a library designed to make beautiful and complex animations on the web much easier than they would be otherwise. It’s also worth taking a look at the …
I don’t think we’ve linked to this in the newsletter yet, but Chris wrote a fantastic post about the latest design of CSS-Tricks and there’s an awful lot to dig into here. Chris compares the previous version to …
Okay, this is a neat idea but also probably highly foolish: using CSS as a content API. We’ll get to that. But first: in Custom Properties as State, Chris writes about Seasonal.css which “supplies …
[Robin]: Over the past week I’ve been working on fun side project that I’m calling a Scroll Story—an elaborate blog post where I rant about a thing. The most exciting part about this little website is that it uses …
Earlier this month Michelle Barker looked into how to cover elements with CSS and had this interesting tip that I’ve never seen before:
.original-element {
position: relative;
}
.covering-element {
position: absolute;
inset: 0;
[Robin]: Animations are important, but deadly. They can focus our attention on certain bits of information at just the right time, they can be for fun when you’ve hit a button, and animations can also be used to make you …
We’ve gathered together a host of writers and front-end folk to tell you what they learned during this year into this 2020’s End of Year Thoughts. There’s so much to learn from in here (and there are lots more …
[Robin]: Making things move by Varun Vachhar is a fantastic blog post I stumbled on the other day. He talks about how he built the following animation with canvas-stretch and walks step-by-step in the process of designing it:
Not only …
Sarah wrote about all the exciting possibilities that open up when you learn about the intricacies of SVG:
…Truly, once you learn SVG, you can draw anything, and have it scale on any device. Even
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.
