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 …

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 …

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 …

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, …

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 …

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, …

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. …

How Records & Tuples will improve React

Covered here before are Records and Tuples, two Immutable Datastructures most likely coming to JavaScript. Sebastien Lorber takes a look at how these will improve React. A whole category of React bugs are related to unstable object identities: Performance: can trigger re-renders that could be avoided Behavior: can trigger useless effect re-executions, and lead to …