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:
😊 I wrote a blog post w/Vlad about this that just went live (see ⬆️ link)
Some notes: – Don't apply this to everything! Chunk content that you are applying this to – The scrollbar will shift when new content gets rendered, so use `contain-intrinsic-size` w/a placeholder size
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) 😅
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. 🙂
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:
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)