content-visibility: the new CSS property that boosts your rendering performance

Coming to Chromium 85 is content-visibility (part of Display Locking):

content-visibility enables 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. Pretty neat.

You see that correct in the image above: rendering went from 232ms down to 30ms … that’s a 7x improvement!

Now don’t go plastering this all over your site, but use it carefully. As Una noted:

Combined with contain-intrinsic-size it’d look like this:

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

content-visibility: the new CSS property that boosts your rendering performance →

React Refresh Webpack Plugin

If you’re using React Hot Loader, it’s time to start looking at React Refresh Webpack Plugin, an EXPERIMENTAL Webpack plugin to enable “Fast Refresh” (which you might know from React Native) for React components. It’s also to be included with Create React App version 4.0 (now in alpha).

Installation per NPM/Yarn:

npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

Once installed you must also adjust your Webpack and Babel configs to activate it.

React Refresh Webpack Plugin →

🙀 In case you’re a bit scared by that EXPERIMENTAL word in there, here’s what Dan Abramov – author of React Hot Loader, amongst many other things – says about it:

Modern CSS grid solutions to common layout problems

Kevin Pennekamp (Vycke):

With the addition of grids, we can overcome media-query fatigue. Not only make our CSS more maintainable, but they also improve the user experience. We can let CSS handle the available space. In this article, I will describe three layout implementations that can improve your (personal) website.

The addition of Grid Layout to CSS indeed has changed the way I lay out web pages quite a lot. I don’t event want to go back to using floats (or tables, before that) 😅

Modern CSS grid solutions to common layout problems →

What does 100% mean in CSS?

Amelia Wattenberger:

One of the CSS units I use most is the wonderful % — so handy for positioning elements on the page.

Unfortunately, the rules aren’t exactly straightforward. One question I’m always asking myself is: “Percent of what?”

Hopefully this guide can help clear things up.

As per usual: It Depends™

Amelia being Amelia here she sprinkled plenty over beautiful and interactive examples for you to play with across the page. Very nice!

What does 100% mean in CSS? →

💁‍♂️ The fact that percentages (sometimes) are calculated against the width of an element enabled us to create aspect-ratio boxes in CSS. That method is being supplanted nowadays, as CSS Sizing Level 4 specifies a aspect-ratio CSS property.

Using Trello as a CMS

Good idea by Carly:

Trello is a web application I’d used for project organization before, and I realized that with the assistance of the Custom Fields power-up, I could pretty much get every field needed to run a portfolio just from their API. Just on a standard card, I can input a title and description, add image attachments, and tag it with labels; custom fields gave me the ability to add the project completion date and URL.

Phil Hawksworth recently wrote a more extensive post on it too, with an updated API to use.

Have to remember that one when building a new workshop exercise. 🙂

2017 post by Carly: Using Trello as a CMS →
2020 post by Phil: Using Trello as a Super Simple CMS →

Introducing Rome – Unifying the frontend development toolchain

Back in February, Rome – an experimental JavaScript toolchain – was pre-released by open-sourcing its code.

Rome is designed to replace Babel, ESLint, Webpack, Prettier, Jest, and others. It unifies functionality that has previously been separate tools. Building upon a shared base allows us to provide a cohesive experience for processing code, displaying errors, parallelizing work, caching, and configuration.

Last weekend things became a bit more official and the website/docs got published. Rome still only does linting at the moment, but already looks really good.

If you want to jump in without reading too much documentation, here goes:

npm install rome
rome init
rome check

Rome Frontend Toolchain →

Remove background noises during a conference call with Krisp

The past few weeks I’ve been using Krisp during Zoom/Meet/Skype/etc. calls. It is a virtual microphone which uses artificial intelligence to filter out background noises. Once installed you select a microphone for it to filter, and then inside Skype/Zoom/Meet you choose the Krisp Virtual Microphone to use.

While I was a bit sceptical at first, here’s a few scenarios where it’s already helped me out:

  • My kids playing with their LEGOs in the same room.
  • Traffic passing by (We live next to a busy road — until we move to our new house that is).
  • A fan whirring in the background.
  • Me, typing, while we converse
  • …

Krisp →
(referral link which will get you 1 month of free use)

React Spectrum – A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

By Adobe:

React Spectrum includes three libraries:

  • React Spectrum — A React implementation of Spectrum, Adobe’s design system.
  • React Aria — A library of React Hooks that provides accessible UI primitives for your design system.
  • React Stately — A library of React Hooks that provides cross-platform state management and core logic for your design system.

React Spectrum →