JavaScript is your behavior layer; the way to add interactivity to your sites, to provide a slick and delightful user experience, to make everything fast and easy and clean. But at some point everything changed: the tail started to wag the dog instead and development became Javascript-first. We'll talk about how you maybe shouldn't rely on JS as much as you're told to, and some practical strategies for how to build sites without reaching for a JS framework as first, last, and only tool for making the web happen.
content-visibilityenables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. It also allows for faster interactions with the on-screen content.
Un précis de vocabulaire pour se rappeler des termes CSS.
A wonderful pen by Vincent Valentin
[…] who could define a CSS version? The CSS working group doesn’t seem to feel it has time for it.
No class names, no frameworks, just semantic HTML and you're done. Simple, reusable components, for a clean looking design that doesn't get in the way.
The prefers-reduced-data media feature is used to detect if the user has a preference for being served alternate content that uses less data for the page to be rendered.
In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on occasion and finally consider techniques that we can employ to mitigate them.
To make sure your animations don’t cause performance issues, consider the impact of animating a given CSS property. Avoid layout recalculations and minimize repaints. Where you can, stick to changing transforms and opacity.
A visual way to understand CSS specificity. Change the selectors or paste in your own.
Some solutions to common layouting issues
"I hope that this post has extended your vision on web performance beyond the well known barrier app vs network, and that this help you to rethink or improve your app architecture."
"As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours."
CheatSheet for flex
CheatSheet for grid
"Due to recently disclosed security vulnerabilities for nearly all computers, you should disable any JavaScript cookie manipulation on your website (e.g. when using the critical CSS technique) by setting your cookies to be SameSite and HttpOnly on the server, as recommended on the Chromium wiki. Otherwise, sensitive data, like session keys, may be exposed to malicious third parties."