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
📰 Good to know
- 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
🧰 Tools
- 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
🎨 Design
- 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
📚 Tutorials
- 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
📺 Videos
- 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