A rather geeky/technical weblog, est. 2001, by Bramus
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 …
Continue reading “content-visibility: the new CSS property that boosts your rendering performance”
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 …
Gapur Kassym detailing the steps he took to reduce the bundle size of a webpack 4 project. You might pluck an idea or two from there 😉 Five Steps to Reduce webpack 4 Bundle Size →
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 …
Continue reading “Modern CSS grid solutions to common layout problems”
macintosh.js – A virtual Apple Macintosh with System 8, running in Electron.
This is Mac OS 8, running in an Electron app pretending to be a 1991 Macintosh Quadra. Yes, it’s the full thing. I’m sorry. macintosh.js →
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 …
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, …
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 …
Continue reading “Introducing Rome – Unifying the frontend development toolchain”
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, …
Continue reading “Remove background noises during a conference call with Krisp”
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. …