weeklyfoo #30

weeklyfoo #30 is here: your weekly digest of all webdev news you need to know! This time you’ll find 30 valuable links in 6 categories! Enjoy!

🚀 Read it!

A short guide to mastering keyboard shortcuts on GitHub: Say goodbye to constant mouse clicking and hello to seamless navigation with GitHub shortcuts. / github / 8 min read

I wrote my own editor: Next level - frustrated with your IDE, build your own one! / editors / 5 min read
Help us invent CSS Grid Level 3, aka Masonry layout: This Masonry layout looks great! / css / 23 min read
Latency numbers every frontend developer should know: A frontend take on Jeff Dean’s Latency Numbers Every Programmer Should Know. / performance / 6 min read
Map of the web: Connections between websites / connections / 0 min read
Fuzzy Name Matching in Postgres: Soundex + Levenshtein / postgres / 9 min read
Node.js 22 is now available!: Will enter LTS in October / nodejs / 5 min read
Electron 30.0.0: Next major version of Electron / electron / 7 min read
Astro 4.7: Next minor release of Astro / astro / 4 min read
TypeScript - Branded Types: Symbols! / typescript / 8 min read
Bonfire with CSS: Unbelievable but true! / animations, css / 4 min read
The TSConfig Cheat Sheet: All you need to know about tsconfig. / typescript / 7 min read

Shadcn Table: A shadcn table component with server-side sorting, filtering, and pagination. / ui
typlr: Create fonts without software. You only need a web browser / fonts
Prompt Library: Explore optimized prompts for a breadth of business and personal tasks. / prompts, ai
Franken UI: HTML-first, framework-agnostic, beautifully designed components that you can truly copy and paste into your site. Accessible. Customizable. Open Source. / ui
Consent Banner JS: A zero-dependency, lightweight (~3kB), consent platform agnostic, cookie banner for any website. / banner
Unovis: A modular data visualization framework for React, Angular, Svelte, Vue and vanilla TypeScript or JavaScript / charts
Plasmic: Visual builder for React. Build apps, websites, and content. Integrate with your codebase. / editors
canvas confetti: performant confetti animation in the browser / animations
CSS Shape: The Ultimate Collection of CSS-only Shapes / css
Block Builder: Lightweight Node.js library for building Slack Block Kit UIs, with a declarative syntax inspired by SwiftUI. / slack
Component Party: Compare React, Angular, Svelte, Vue, and more. / code

Layout Land: This is an awesome example of a university / learning / 1 min read
Podlite: Podlite is a lightweight block-based markup language designed for flexibility and ease of use. Not sure why it’s needed because Markdown exists. / markup / 2 min read

Email Headers can drastically impact deliverability.: Here are 3 headers you must know. / emails / 1 min read
Scroll-driven animations and 3D perspective: The trick is driving the animation with list items that are smaller in height than the images / css / 1 min read

A Deep Dive into Node.js Streams: Streams are the lifeblood of many Node.js applications, enabling efficient data processing and manipulation. But their evolution has been anything but straightforward. / nodejs, streams
From 0 to Production: The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more) / react
Making My Node.js API Super Fast: Lots of useful tipps around the stack. / performance