#​362 — November 15, 2023

Read on the Web

Together with  Frontend Masters logo
React Status

Datasheet Grid: An Airtable-like Grid Component — If you’ve got an array of objects and you want a way for users to manipulate them, this is for you. It’s not going to replace a spreadsheet or an extensive data grid framework, but it’s a good, mature solution for modest use cases and features smooth animations, virtualized rows and columns, keyboard navigation, and more.

Nicolas Keller

Moving Back to React (from Preact) — Preact felt like a logical, lightweight choice to this team at one time, but they’ve switched to React for better compatibility with Next.js, among other things. Their page weight is up slightly, but they feel the tradeoff is worth it.

Ante Barić (Daily․Dev)

Bare Metal JavaScript: The JavaScript Virtual Machine with Miško Hevery — Learn how high-level JavaScript turns into low-level CPU instructions. Build up your mental model of JavaScript's performance characteristics through understanding the JavaScript Virtual machine under the hood!

Frontend Masters sponsor

▶  Simplifying Server Components — In a talk given at the recent React Advanced conference, Mark boiled down one of the newest, and perhaps most controversial, React features. A good, straightforward explanation of the parts involved and how they fit together.

Mark Dalgleish


My Journey to 3x Faster Builds: Trimming Barrel File Imports“I maintain a small frontend application (4K LOC) which uses Vite as the compiler. The production build, using npm run build, was taking 26 secs on Github Actions. It seemed awfully slow for such a small application. I decided to investigate why.”

Ramana Venkata

▶  Next.js 14: You Missed The Best Part“Can we turn React components into self-contained Lego blocks that talk to backend services? Let’s find out!” (15 minutes)

Jack Herrington

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe to get curated advice on building great products, lessons from PostHog, and best practices of top startups.

PostHog sponsor

Enforcing Coding Style with the Vercel Style Guide — Vercel provides a set of configs for Prettier, ESLint and TypeScript. Here’s how one developer uses them in his Next.js project.

Matthew Kwong

▶  Why Signals Are Better Than React Hooks
Web Dev Simplified

React Router v6: A Beginner's Guide
James Hibbard

🛠 Code and Tools

React Winplaza 98: The Windows 98 Aesthetic for React — Does the fantastic React95 just feel a bit too mid 90s for you? This, based on 98.css, steps forward with an option more reminiscent of the Windows 98/NT 4 era. Does this have any practical use beyond being a nostalgia trip? Who knows, but it makes for a fun screenshot.

Lisandro X

Plasmic: Low-Code Visual Page Builder for React — This tool was commercial for a few years but is now open source. Provides the ability to drag and drop your own components and can integrate with your existing codebase. There are some demos you can check out. GitHub repo.


React SyncScroll: Sync Scrolling Across Elements — A way to get synced scroll position across multiple scrollable elements. GitHub repo.

Andrey Okonetchnikov

visx 3.5: Airbnb's D3-Based Visualization Primitives for React — Unopinionated but React-y way to create visualizations. Bring your own state management, animation library, or CSS-in-JS solution – visx is designed to slot into pretty much any React codebase. Demos aplenty.


📰 Classifieds

Scrimba’s self-paced Frontend Bootcamp is offering 20% off for React Status readers. Get code reviews, support and accountability. Join now.

💻 Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

🌈 Bonus item

Indent Rainbow: Make Indentation More Visible with Color — I appreciate if this doesn’t click for you, but I recently discovered this VS Code extension (by way of the GitHub Universe keynotes) that makes indentation levels more obvious through the use of color (either bars, as above, or lines).

Hans Raaf