weeklyfoo #18 is here: your weekly digest of all webdev news you need to know! This time you’ll find 61 valuable links in 7 categories! Enjoy!
🚀 Read it!
- Speaking for Hackers: How to keep a roomful of programmers entertained when your competition is the internet. Awesome guide how to do public speaking the right way. / talks / 1 min read
- Please, don’t force me to log in: I’m so with Juha-Matti Santala / login, account / 6 min read
- Becoming an Engineering Manager - Is It For You?: Great and entertaining read! Just a five question quiz. Simple. Quick. True! / career / 9 min read
📰 Good to know
- Web Components in Earnest: Good intro into web components. But bring some time with you, it’s a detailed article. / ui / 64 min read
- How to start a React Project in 2024: I love react with Vite and can only recommend it. / react, vite, nextjs / 8 min read
- The Easiest Way to Get Started with Three.js Web Animations: A good starting point if you’re interested in three.js / threejs / 12 min read
- Modern JavaScript library starter: How to publish a package with TypeScript, testing, GitHub Actions, and auto-publish to NPM / npm, package, starter / 10 min read
- Inside .git: If you ever wondered how .git is structured: Julia Evans gives a very entertaining introduction. / git / 6 min read
- How TypeScript can help in modelling business workflows: Interesting approach to implement workflows. Feels kind of overengineered but I like the concept. Especially if applications and workflows grow this would be very benificial. / typescript, workflows / 15 min read
- The New CSS Color Format You Didn’t Know You Needed; OKLCH(): Saw it the first time in the Tailwind docs - so good to get some insights about it. / colors, oklch / 16 min read
- ICANN proposes creating .INTERNAL domain to do the same job as 192.168.x.x: Not really related to web dev but quite interesting in the DNS space. / icann, .internal / 9 min read
- Adding type safety to object IDs in TypeScript: That’s a neat approach: for example if you prefix your user ids with user_ you can implement a type check for it. / typescript / 3 min read
- Multi-Database Support in DuckDB: TL;DR: DuckDB can attach MySQL, Postgres, and SQLite databases in addition to databases stored in its own format. This allows data to be read into DuckDB and moved between these systems in a convenient manner. / duckdb, db / 10 min read
- FerretDB: A truly Open Source MongoDB alternative - using postgres / ferretdb, postgres / 8 min read
- The promise and challenges of crypto + AI applications: Not (that) web dev relevant, but anyways a good read how AI and Blockchain can benefit from each other / ai, blockchain / 24 min read
- Benchmarks of JavaScript Package Managers: Was not aware of that: pnpm regularly updates this benchmarks that compares npm, yarn and pnpm / benchmark, pnpm, yarn, npm / 3 min read
- Event Loop. Myths and reality: Going down the rabbit hole of the event loop. / javascript / 26 min read
🧰 Tools
- Zen: Simple, free and efficient ad-blocker and privacy guard for Windows, macOS and Linux / adblocker
- ShellCheck: Finds bugs in your shell scripts. / shell, script
- Expressive Code: Present your source code on the web, making it easy to understand and visually stunning. / code
- Keyv: Simple key-value storage with support for multiple backends / kv
- Foundations: Cloudflare’s Rust service foundations library. / rust
- open-saas: A free, open-source SaaS app template for React & Node.js with superpowers. Production-ready. Community-driven. / saas
- react resizable panels: React components for resizable panel groups/layouts. / resize, react
- react-curved-text: React library to create curved text including a playground / react, curved
- Variable Fonts: A simple resource for finding and trying variable fonts / fonts
- unlazy: Universal lazy loading library for placeholder images / placeholder
- WebGPU-kit: WebGPU-kit is a collection of libraries that make it easy to build high-performance, cross-platform, web-based graphics applications. / webgpu
- Palettify: Get an instant preview for your theme with palettify. Export your theme in one click. / themes
- Shakker: Image to image AI generation tool / images, ai
- Cytoscape.js: Graph theory (network) library for visualisation and analysis / visualizations, javascript
- OverlayScrollbars: A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling. / scrollbars, javascript
- VersionFox: A cross-platform and extendable version manager with support for Java, Node.js, Flutter, .Net & more / cli
- Physical - True Icons: Icon set representing fitness items and concepts. / icons
- Deck.Gallery: Curated list of beautiful slide decks / slidedecks
- tembo: Managed postgres / postgres, databases
🎨 Design
- Handheld Design: Discover best-in-class mobile design inspiration. / mobile design / 16 min read
- Checkbox UI design: Best practices and examples: Using checkboxes the right way if you consider the best practices in this article. / checkboxes / 10 min read
- Wall of portfolios: A curated showcase of beautifully designed & super effective portfolios / portfolio / 1 min read
- Disabled Buttons UX – Usability Issues and How to Avoid Them: Conclusion: don’t use disabled buttons at all / ui, buttons / 13 min read
- In Praise of Buttons – Part One: Form is Function in Graphical User Interfaces / ui, buttons / 12 min read
- standards: Online brand guidelines / guidelines / 7 min read
- Going beyond pixels and (r)ems in CSS - Relative length units based on font: Learn all about relative lengths / css / 13 min read
- Everything you need to know about Dev Mode: I’m a Figma consumer, but I’ve always wanted to learn more about Figmas Dev mode. That’s a great overview. Didn’t know there’s a VSCode extension to open Figma designs in VSCode. / figma / 11 min read
- 8 exciting visual trends you should know about in 2024: I only count 7, whatever, good to know all of them. / trends / 9 min read
- How should designers code?: I’m a big fan of designers that code as well. This article shows some practical paths toward shipping to production / coding / 8 min read
- Wireframe Examples: Find all the wireframe examples you need as inspiration for your next project. Safe hours coming up with layouts on your own. / wireframes / 4 min read
🤪 Fun
- Booleanish ftw xD: true, false, or maybe something different? ;) / typescript / 1 min read
- Pong Wars: Great side project by Koen van Gilst. And the most beautiful thing: it’s all inside one html file <3 / pong / 1 min read
- httpareacodes: Mapping http status codes on US area codes - I think I’ll use it for one of my next projects ;) / http / 2 min read
- ascii theater: stream free text-based movies in your terminal / ascii, movies / 3 min read
- Bouncy Ball: 22 ways how to implement a bouncy ball / javascript / 1 min read
- Labyrinthos.js: A JavaScript procedural generator for Mazes, Terrains, and Biomes / maze, javascript / 1 min read
📚 Tutorials
- Trigger text highlights on scroll: Thanks @jh3yy! / css / 1 min read
- Generate Image From HTML Using Satori and Resvg: I was trying some ways to auto-generate images: programmatically create svgs, or using (node) canvas. The satori approach has many advantages. This tutorial describes how to use it. / satori / 4 min read
- CSS Blurry Shimmer Effect: <3 / css, blurry / 12 min read
- A highly configurable switch component using modern CSS techniques: Learn how build a highly configurable switch component using modern CSS, such as :has(), container queries, Logical Properties and Custom Properties. / css, switch / 11 min read
- New way to animate borders: Thanks @jh3yy! / css / 1 min read
- Explode on scroll effect: Thanks @jh3yy! / css / 1 min read
📺 Videos
- Easily Deploy Full Stack Node.js Apps on AWS EC2: Learn to deploy a Node.js or Bun app connected to a PostgreSQL or MySQL database on AWS EC2 Ubuntu Instance. / aws, ec2, nodejs
- Debugging Fetch Priority: Just 7 minutes, super entertaining / fetch