Search
Micro Frontends
17.7.2019
One random day not long ago, I started hearing joke after joke about "micro frontends" — sort of how I first learned about Toast. I didn't understand the source until asking around, which uncovered this article from Cam Jackson.
In this article we'll describe a recent trend of breaking...
VS Code Screencast Mode
10.7.2019
VS Code has many great tools hidden deep within its settings. One of those tools is screencast mode.
Screencast mode will display keyboard presses.
You can
IndieWeb and Webmentions
9.7.2019
The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:
Proponents of the IndieWeb offer a fairly straightforward analysis of our current social-media crisis. They frame it in terms of a single question: Who owns the servers? The bulk...
The Twelfth Fourth
4.7.2019
CSS-Tricks is 12 years old! Firmly into that Early Adolescence stage, I'd say ;) As we do each year, let's reflect upon the past year. I'd better have something to say, right? Otherwise, John Prine would get mad at me.
How the hell can a person go to work in the morning
And come home in...
Nownownow
28.6.2019
Matthias Ott, relaying an idea he heard from Derek Sivers:
Many personal websites, including this one here, have an “about” page. It’s a page that tells you something about the background of a person or about the services provided. But what this page often doesn’t answer – and neither do Twitter...
Which CSS IS AWESOME makes the most sense if you don’t know CSS well?
27.6.2019
Peter-Paul posted this question:
Which of the examples in the image do you consider correct?
If you know CSS well, don't reply, just retweet.
If you don't know CSS too well, please reply to the poll in the next tweet. pic.twitter.com/4bgnf9Wdkc
— ppk 🇪🇺 (@ppk) June...
Which CSS IS AWESOME makes the most sense if you don’t know CSS well?
27.6.2019
Peter-Paul posted this question:
Which of the examples in the image do you consider correct?
If you know CSS well, don't reply, just retweet.
If you don't know CSS too well, please reply to the poll in the next tweet. pic.twitter.com/4bgnf9Wdkc
— ppk 🇪🇺 (@ppk) June...
Why I don’t use web components
25.6.2019
Here’s an interesting post by Rich Harris where he’s made a list of some of the problems he’s experienced in the past with web components and why he doesn’t use them today:
Given finite resources, time spent on one task means time not spent on another task. Considerable energy has been expended...
Reduced Motion Picture Technique, Take Two
21.6.2019
Did you see that neat technique for using the <picture> element with <source media=""> to serve an animated image (or not) based on a prefers-reduced-motion media query?
After we shared that in our newsletter, we got an interesting reply from Michael Gale:
What about folks who love...
Drop caps & design systems
19.6.2019
Ethan Marcotte has written up his process for how to make drop caps accessible for screen readers and browsers alike. All of that is very interesting and I’m sure I’ll use a technique like this in the near future, but the part that made me hop out of my seat is where Ethan notes his experience with...
Your first performance budget with Lighthouse
7.6.2019
Ire Aderinokun writes about a new way to set a performance budget (and stick to it) with Lighthouse, Google’s suite of tools that help developers see how performant and accessible their websites are:
Until recently, I also hadn't setup an official performance budget and enforced it. This isn’t...
JAMstack? More like SHAMstack.
5.6.2019
I'm a fan of the whole JAMstack thing. It seems like a healthy web movement. I'm looking forward to both of the upcoming conferences.
Of any web trend, #jamstack seems like it will be the least regrettable.
— Chris Coyier (@chriscoyier) May 22, 2019
I feel like the acronym might not...
Self-Host Your Static Assets
5.6.2019
Harry Roberts digs into why hosting assets on someone else’s servers (including CDNs) is not such a great idea if we want our websites to be lightning fast.
Harry writes:
One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem...
The difference between keyboard and screen reader navigation
29.5.2019
There are a few differences between keyboards and screen readers and Léonie Watson highlights of them:
When using the tab key, keyboard focus and screen reader focus are synchronised with each other. The rest of the time, screen reader users have an enormous range of commands at their disposal...
Night Mode with Mix Blend Mode: Difference
27.5.2019
Dark mode designs are all the rage right now but here’s an interesting take: Wei Gao has built a night mode on her own site that uses mix-blend-mode: difference to create an effect that looks like this:
Wei explains how she implemented this technique and the edge cases she encountered along...
Getting Started with React Testing Library
22.5.2019
I can guess what you are thinking: another React testing library? So many have already been covered here on CSS-Tricks (heck, I’ve already posted one covering Jest and Enzyme) so aren’t there already enough options to go around?
But react-testing-library is not just another testing library. It’s...
The “Inside” Problem
20.5.2019
So, you're working on a design. You need a full-width container element because the design has a background-color that goes from edge-to-edge horizontally. But the content inside doesn’t necessarily need to be edge-to-edge. You want to:
Limit the width (for large screens)
Pad the edges
Center...
Evergreen Googlebot
16.5.2019
I've heard people say that the #1 most exciting and important thing that came out of Google I/O this year was the evergreen Googlebot:
Today, we are happy to announce that Googlebot now runs the latest Chromium rendering engine (74 at the time of this post) when rendering pages for Search. Moving...
A Better Approach for Using Purgecss with Tailwind
15.5.2019
Greg Kohn looks at how to use Purgecss — a tool that helps remove unused styles — and Tailwind — a utility-based CSS framework — and why we might want to pair these tools together:
Tailwind, by intention, is aiming to equip you with an arsenal of utility classes...
10 React Challenges (Beginner): Use React State to Update the DOM
10.5.2019
A common theme in modern front-end JavaScript libraries/frameworks is that they can help you manage the data in your applications.
Once you update something, React can immediate