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 […]

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 […]

useQueryParams – A React Hook for managing state in URL query parameters

Once you’ve set up a QueryParamProvider high up your component tree, you can start using useQueryParam to get (and set) querystring parameters import * as React from 'react'; import { useQueryParam, NumberParam, StringParam } from 'use-query-params'; const UseQueryParamExample = () => { // something like: ?x=123&foo=bar in the URL const [num, setNum] = useQueryParam('x', NumberParam); […]