Introducing Federated Modules in Webpack 5

Want to share code dynamically between web applications but don’t want to use libraries or custom Micro-FE frameworks. Check out what’s in store for you with Webpack 5 and how federated modules will fundamentally change how you view web applications. Webpack 5 Module Federation: A game-changer in JavaScript architecture →Webpack 5 and Module Federation – …

React: You May Not Need Controlled Form Components

To work with forms in React two approaches are to either use Controlled Components or use Uncontrolled Components (as detailed here). Swyx shares a third way of working with forms: A lower friction way to handle form inputs is to use HTML name attributes. As a bonus, your code often turns out less React specific! …

Worth It: Modern JS edition

“Worth It: Modern JS edition” is a small tool to analyze how much less JavaScript is downloaded in modern browsers as a result of it using the module/nomodule pattern. Worth It: Modern JS edition → 💡 The module/nomodule pattern is a technique to ship ES2015 modules to browsers that support, whilst also keeping older browsers …

“Designing Intrinsic Layouts” by Jen Simmons

Twenty-five years after the web began, we finally have a real toolkit for creating layouts. Combining CSS Grid, Flexbox, Multicolumn, Flow layout and Writing Modes gives us the technical ability to build layouts today without the horrible hacks and compromises of the past. In this hour-long talk captured live at An Event Apart DC 2019, …

Setting Up Your Webcam, Lights, and Audio for Remote Work, Podcasting, Videos, and Streaming

Matt Staufer has done an extensive writeup on his video/streaming setup. I’ve spent quite a bit of time obsessing over lights and camera, and I wanted to help you—new streamer, podcaster, new remote worker, or someone trying to level up their setup—see a few different types of option for your remote work or streaming setup. …

Realtime Face and Hand Tracking in the browser with TensorFlow

The MediaPipe and Tensorflow.js teams have released facemesh and handpose: The facemesh package infers approximate 3D facial surface geometry from an image or video stream, requiring only a single camera input without the need for a depth sensor. This geometry locates features such as the eyes, nose, and lips within the face, including details such …

A Variable Fonts Primer

Now that Google Fonts has some Variable Fonts in their offering, this primer on Variable Fonts might come in handy: Variable fonts let you add nuance and artistry to your web typography without bogging down your site. Now you can accomplish what used to require several files with a single file and some CSS! The …

Staggered Animations with CSS Custom Properties

Paul Hebert on the Paul Hebert blog: Movement in nature doesn’t happen all at once. Imagine a flock of birds taking off, raindrops splashing on the ground, or trees bending in the wind. The magic of these moments comes from many small movements overlapping and converging. I wanted to bring this natural movement into my …

react-native-ble-plx – React Native Bluetooth Low Energy (BLE) library

This is React Native Bluetooth Low Energy library using RxBluetoothKit and RxAndroidBle under the hood. scanAndConnect() { this.manager = new BleManager(); // Wait for PoweredOn state this.manager.startDeviceScan(null, null, (error, device) => { if (error) { return; } // Check if it is a device you are looking for based on advertisement data // or other …