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. by Sara Verdi / github / 8 min read

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

Shadcn Table: A shadcn table component with server-side sorting, filtering, and pagination. by Sadman Sakib / ui
typlr: Create fonts without software. You only need a web browser by Evgeny Agasyants / fonts
Prompt Library: Explore optimized prompts for a breadth of business and personal tasks. by anthropic / 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. by franken-ui.dev / ui
Consent Banner JS: A zero-dependency, lightweight (~3kB), consent platform agnostic, cookie banner for any website. by Tag Concierge / banner
Unovis: A modular data visualization framework for React, Angular, Svelte, Vue and vanilla TypeScript or JavaScript by unovis.dev / charts
Plasmic: Visual builder for React. Build apps, websites, and content. Integrate with your codebase. by plasmic.app / editors
canvas confetti: performant confetti animation in the browser by Kiril Vatev / animations
CSS Shape: The Ultimate Collection of CSS-only Shapes by Temani Afif / css
Block Builder: Lightweight Node.js library for building Slack Block Kit UIs, with a declarative syntax inspired by SwiftUI. by Ray East / slack
Component Party: Compare React, Angular, Svelte, Vue, and more. by Mathieu Schimmerling / code

Layout Land: This is an awesome example of a university by webflow / 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. by podlite.org / markup / 2 min read

Email Headers can drastically impact deliverability.: Here are 3 headers you must know. by @resend / 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 by @jh3yy / 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. by Matteo Collina / nodejs, streams
From 0 to Production: The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more) by Theo / react
Making My Node.js API Super Fast: Lots of useful tipps around the stack. by Tamar Twena-Stern / performance