Customise the React Native Developer Menu with Dev Settings API

Azim Ahmed comes with a few practical code snippets to alter the React Native Developer Menu from within your code, via the DevSettings Module: Toggle why-did-you-render Perform an action on the current route import {DevSettings} from 'react-native'; import React, {useEffect, useState} from 'react'; if (process.env.NODE_ENV === 'development') { const whyDidYouRender = require('@welldone-software/why-did-you-render'); whyDidYouRender(React, {trackAllPureComponents: false}); …

HTML with Superpowers

Earlier this year Dave Rupert spoke at An Event Apart’s Spring Summit with a talk on Web Components: It’s the year 2021. Lots of us are building our websites and apps with components and design systems, perhaps leveraging a JavaScript framework to help glue all the pieces together. The web has matured in the last …

Lando — Instant Dev Environments For Every Project

If you’re goofing around with docker-compose, then be sure to give Lando a try: Lando is a free, open source, cross-platform, local development environment and DevOps tool built on Docker container technology. Designed to work with most major languages, frameworks and services, Lando provides an easy way for developers of all skill levels to specify …

Fixing the Drift in Shape Rotations

Steve Ruiz recently noted that in many design tools a group of shapes would end up at a different position after you rotate them and then successively rotate them back. The problem here is that the average center of the group — the point on which the group rotates — changes after the first rotation. …

How I built a modern website in 2021

Kent C. Dodds recently launched his new site, built with Remix (which soon will go open source). In this post he lifts the hood and explains the technical details. I especially like how his build process is split into two parts: Updating the content Building the source That way he doesn’t waste precious CPU cycles …

Conditional border-radius and three future CSS features

Stefan Judis has reworked Ahmad Shadeed‘s Conditional border-radius, using these three (future) CSS additions: Media query ranges Container Queries CSS @when + @else Unlike the original code, the result definitely is a very nice and readable piece of code that doesn’t feel hacky at all — I like where CSS is headed 😊 Conditional border-radius …

Tachometer – Statistically rigorous benchmark runner for the web

From the Polymer team: Tachometer is a tool for running benchmarks in web browsers. It uses repeated sampling and statistics to reliably identify even tiny differences in runtime. To compare two files, run it like so: npx tachometer variant1.html variant2.html Tachometer will open Chrome and load each HTML file, measuring the time between bench.start() and …

ESNext: Import Assertions (JSON Modules, CSS Modules, …)

Did you know you can import JSON and CSS files just like you import JavaScript Modules? Thanks to Import Assertions, it’s as easy as this: Building upon "Import Assertions" we recently saw JSON Modules land in V8/Chromium 91: “`import json from './foo.json' assert { type: 'json' };“` In Chromium 93 the same thing for CSS …

How To create the Stripe Website Gradient Effect

Kevin Hufnagl reverse engineered Stripe’s Website Gradient Effect. Here’s what he found on the JavaScript side of things: Essentially they are using a minimalistic implementation of WebGL which they called minigl and a Gradient Class which is used to store all of our animation properties and control the animation. See the Pen Stripe Website Gradient …