weeklyfoo #24 is here: your weekly digest of all webdev news you need to know! This time you’ll find 45 valuable links in 6 categories! Enjoy!
🚀 Read it!
- Context-switching - one of the worst productivity killers in the engineering industry: Nothing gets done at the end of the day. Don’t worry, we got you covered! / workos / 11 min read
📰 Good to know
- 100 things you can do on your personal website: No 66 is nice. Will do that! / websites / 10 min read
- Node.js added utility for text formatting — you may not need chalk anymore: Maybe chalk becomes obsolete now? / node / 2 min read
- Techniques to Break Words: I haven’t used ­ or wbr at all, so I’m good! / words / 8 min read
- Internationalization with Remix: How to i18n with Remix and Storyblok / remix, storyblok / 16 min read
- AVIF is the Future of Web Images: I’m all in webp but obviously I should have a look at AVIF, too. / images / 7 min read
- The domain you choose to send emails can significantly impact deliverability.: Quick tipp to use subdomains for your marketing and transactional emails. / emails / 1 min read
- My favourite animation trick: exponential smoothing: Includes lots of math! ;) / animations / 12 min read
- ecss: Avoiding common styling problems is simple. And you only need efficient CSS. Nothing more. / css / 1 min read
- Comparing JavaScript Frameworks part 1: templates: Comparing Vue, React, Angular, Svelte / vue, react, angular, svelte / 32 min read
- Storybook 8: Next major release of Storybook / storybook / 11 min read
- Falsehoods programmers believe about time zones: Things you don’t know about timezones. / timezones / 15 min read
- Shorter way to get last element in array: tldr: use array.at(-1) / javascript / 1 min read
🧰 Tools
- Rolldown: Fast Rust bundler for JavaScript with Rollup-compatible API. / rust, bundler
- React Geiger: Audiolize React performance. Was about to put it in der fun section, but actually it can bring a real benefit. / react, performance
- React Unforget: A compiler for automatic optimization of React apps / react, performance
- Logo Packer: Generate Logo Variations in Seconds. / logos
- mapplic: Mapplic transforms static images into dynamic experiences. / maps
- fontkit: An advanced font engine for Node and the browser / fonts, node
- iLovePDF: Every tool you need to work with PDFs in one place / pdf
- Self-Hosted Software List: Discover top self-hosted software from various categories. / lists
- JSON Canvas: An open file format for infinite canvas data. / json, canvas
- flyde: Open-source, visual programming for developers. Includes a VS Code extension, integrates with existing TypeScript code, browser and Node.js. / programming
- voici.js: A Node.js library for pretty printing your data on the terminal / cli, node
- Slonik: A Node.js PostgreSQL client with runtime and build time type safety, and composable SQL. / node, postgresql
- Astro DB: Astro DB is a fully-managed SQL database that is fast, lightweight, and ridiculously easy-to-use. Super thrilled about that. / db, astro
- bebop: No ceremony, just code. Blazing fast, typesafe binary serialization. / serialization
- jco: JavaScript tooling for working with WebAssembly Components / wasm
- Neat: Beautiful gradient animations for your website / gradients
- Logo System: Get inspired by exploring this library of real and fictional logos. / logos
- React Chrono: Modern Timeline Component for React / react, timeline
- finder: CSS Selector Generator / css
- Trangram: Create Motion Graphics On One Platform / animations
- Gradientor: A minimalist radial background generator. / gradients
- fx: Terminal JSON viewer & processor / json, cli
- @webtoon/psd: A lightweight Adobe Photoshop .psd file parser in typescript with zero-dependency for browsers and NodeJS. / photoshop, psd, node
- Turso: Countless databases embedded anywhere simple. / db, sqlite
- AI Color Combination Generator: Describe the purpose of your color combination and let it generate. / colors, ai
- Article Extractor: To extract main article from given URL with Node.js / scraping
🎨 Design
- Sliders degrade UX (so do this instead): tldr: don’t use sliders / sliders / 3 min read
- No-Code Tools Every Designer Needs: Explore the world of no-code tools for designers! / nocode / 1 min read
- Design Spells: Examples of design details. / ui / 1 min read
📚 Tutorials
- A formula for responsive font-size: font-size: calc(1rem + 0.25vw); / fonts, css / 2 min read
📺 Videos
- Your tardy friends suck. 7 Principles: Be on time. / progress
- A low-code way to learn AI: Learn how AI works from a real LLM implemented entirely in Excel / ai, spreadsheets