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! by Gregor Ojstersek and Eugene Shulga / workos / 11 min read
📰 Good to know
- 100 things you can do on your personal website: No 66 is nice. Will do that! by James / websites / 10 min read
- Node.js added utility for text formatting — you may not need chalk anymore: Maybe chalk becomes obsolete now? by Paweł Grzybek / node / 2 min read
- Techniques to Break Words: I haven’t used ­ or wbr at all, so I’m good! by Adrian Roselli / words / 8 min read
- Internationalization with Remix: How to i18n with Remix and Storyblok by Arisa Fukuzaki / 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. by Ferid Brković / 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. by @resend / emails / 1 min read
- My favourite animation trick: exponential smoothing: Includes lots of math! ;) by Nikita Lisitsa / animations / 12 min read
- ecss: Avoiding common styling problems is simple. And you only need efficient CSS. Nothing more. by ecss.info / css / 1 min read
- Comparing JavaScript Frameworks part 1: templates: Comparing Vue, React, Angular, Svelte by Maarten Hus / vue, react, angular, svelte / 32 min read
- Storybook 8: Next major release of Storybook by Michael Shilman / storybook / 11 min read
- Falsehoods programmers believe about time zones: Things you don’t know about timezones. by Zain Rizvi / timezones / 15 min read
- Shorter way to get last element in array: tldr: use array.at(-1) by Cory House / javascript / 1 min read
🧰 Tools
- Rolldown: Fast Rust bundler for JavaScript with Rollup-compatible API. by rolldown / rust, bundler
- React Geiger: Audiolize React performance. Was about to put it in der fun section, but actually it can bring a real benefit. by Kristian Dupont / react, performance
- React Unforget: A compiler for automatic optimization of React apps by Mohamad Mohebifar / react, performance
- Logo Packer: Generate Logo Variations in Seconds. by CJ / logos
- mapplic: Mapplic transforms static images into dynamic experiences. by mapplic.com / maps
- fontkit: An advanced font engine for Node and the browser by foliojs / fonts, node
- iLovePDF: Every tool you need to work with PDFs in one place by ilovepdf.com / pdf
- Self-Hosted Software List: Discover top self-hosted software from various categories. by hostedsoftware.org / lists
- JSON Canvas: An open file format for infinite canvas data. by obsidianmd / json, canvas
- flyde: Open-source, visual programming for developers. Includes a VS Code extension, integrates with existing TypeScript code, browser and Node.js. by flydelabs / programming
- voici.js: A Node.js library for pretty printing your data on the terminal by Lars Wächter / cli, node
- Slonik: A Node.js PostgreSQL client with runtime and build time type safety, and composable SQL. by Gajus Kuizinas / 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. by astro.build / db, astro
- bebop: No ceremony, just code. Blazing fast, typesafe binary serialization. by Betwixt Labs / serialization
- jco: JavaScript tooling for working with WebAssembly Components by Bytecode Alliance / wasm
- Neat: Beautiful gradient animations for your website by firecms / gradients
- Logo System: Get inspired by exploring this library of real and fictional logos. by logosystem.co / logos
- React Chrono: Modern Timeline Component for React by Prabhu Murthy / react, timeline
- finder: CSS Selector Generator by Anton Medvedev / css
- Trangram: Create Motion Graphics On One Platform by trangram.com / animations
- Gradientor: A minimalist radial background generator. by gradientor.app / gradients
- fx: Terminal JSON viewer & processor by Anton Medvedev / json, cli
- @webtoon/psd: A lightweight Adobe Photoshop .psd file parser in typescript with zero-dependency for browsers and NodeJS. by webtoon / photoshop, psd, node
- Turso: Countless databases embedded anywhere simple. by turso.tech / db, sqlite
- AI Color Combination Generator: Describe the purpose of your color combination and let it generate. by muz.li / colors, ai
- Article Extractor: To extract main article from given URL with Node.js by Extractus / scraping
🎨 Design
- Sliders degrade UX (so do this instead): tldr: don’t use sliders by Adam Silver / sliders / 3 min read
- No-Code Tools Every Designer Needs: Explore the world of no-code tools for designers! by Jesse Showalter / nocode / 1 min read
- Design Spells: Examples of design details. by designspells.com / ui / 1 min read
📚 Tutorials
- A formula for responsive font-size: font-size: calc(1rem + 0.25vw); by James Fisher / fonts, css / 2 min read
📺 Videos
- Your tardy friends suck. 7 Principles: Be on time. by Van Neistat / progress
- A low-code way to learn AI: Learn how AI works from a real LLM implemented entirely in Excel by spreadsheets-are-all-you-need.ai / ai, spreadsheets