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 …

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); …