weeklyfoo #21 is here: your weekly digest of all webdev news you need to know! This time you’ll find 49 valuable links in 6 categories! Enjoy!
🚀 Read it!
- Bloom Filters: First time I read about bloom filters. But the reduction in size for some special use cases is impressive. by Sam Rose / algorithms / 16 min read
📰 Good to know
- PWAs wont replace native iOS apps: Unfortunately there are many downsides, however, personally I’m totally convinced the gaps should be filled to have (nearly) feature parity. by Ryan Nystrom / pwa / 1 min read
- Learning about debuggers: Quite nerdy, but surely interesting if you want to learn more about debuggers ;) by Andy Hippo / debug / 6 min read
- From engineer to manager: what I love, what I hate: Love and hate after transitioning to a manager role by Vladimir Klepov / career / 10 min read
- React Trends in 2024: What’s going on in the React world in 2024? by Robin Wieruch / react, trends / 13 min read
- SQL query optimization: a comprehensive developer’s guide: An SQL optimization guide for developers. With best practices, warnings, and pro tips to speed up your SQL query optimization. by aiven.io / sql / 43 min read
- It’s Official, Apple Kills Web Apps in the EU: That’s a really sad development by open-web-advocacy.org / apple, pwa / 6 min read
- Remix Vite is Now Stable: Vite support is now stable in Remix by remix.run / remix, vite / 12 min read
- Warp, the modern terminal, is now available for Linux: The popular terminal is now available for Linux! by warp.dev / terminal / 8 min read
- Meet Rocket Turtle: The new nodejs moscot by nodejs / nodejs / 1 min read
- random() distribution visualization: Beautifully visualized, and interesting! by Jorge Moreno / random / 0 min read
- Using localStorage in Modern Applications: A Comprehensive Guide: Advices, best practives and comparisons to indexed-db, opfs, and more. by rxdb.info / localstorage / 12 min read
- HTMX vs React: A Complete Comparison: If you want to get the differences between htmx and react in a 12min read - that’s the right article for you. by Antonello Zanini / htmx, react / 15 min read
- Redwood v7.0.0 is now available!: Next major release of Redwood by redwoodjs.com / redwood / 9 min read
- Mind officially blown: See how Paige Bailey recorded a video and Gemini generated Selenium code out of it. Pretty cool. by Paige Bailey / gemini / 1 min read
🧰 Tools
- groq: Incredible fast Mixtral-based chatbot, haven’t seen something at nearly the same speed as this one. by groq.com / llm, chatbot
- CodeRev: CodeRev is a lightweight tool to help you organize and conduct technical interviews using code reviews rather than leetcode. by coderev.app / interviews
- yamlify-object: Stringify object/array with yaml syntax by Eugeny Dementev / yaml
- rustwasm: Rust and WebAssembly by rustwasm / rust, wasm
- dax: Cross-platform shell tools for Deno and Node.js inspired by zx. by David Sherret / shell
- Lucia: Lucia is an auth library for your server that abstracts away the complexity of handling sessions. by lucia-auth.com / auth
- React Print: Build and generate PDF using React UI kit for PDFs and print documents. by OnedocLabs / react
- react-document-picture-in-picture: Feature-packed and optimised React component for Chrome’s new Document Picture-in-Picture API by Martin Shaw / react
- react-use-wizard: A React wizard (stepper) builder without the hassle, powered by hooks. by Jonas De Vrient / react, wizard
- OKLCH Color Picker & Converter: Another color picker by Evil Martians / colors, oklch
- Marquee: A beautiful marquee component for React. by devnomic / react
- Park UI: Beautifully designed components built for your choice of JS and CSS frameworks. by park-ui.com / javascript, css, components
- drag-and-drop: FormKit’s Drag and Drop is a small library for adding data-first drag and drop sorting and transferring for lists in your app. It’s simple, flexible, framework agnostic, and clocks in at only ~4Kb gzipped. by formkit.com / dnd
- js-tokens: Tiny JavaScript tokenizer. by Simon Lydell / javascript
- Pages CMS: A user-friendly CMS for static site generators. by Ronan Berder / cms, github
- Retell AI: Conversational Voice API for Your LLM by retellai.com / ai, llm
- Danswer: Ask Questions in natural language and get Answers backed by private sources. Connects to tools like Slack, GitHub, Confluence, etc. by danswer-ai / ai, llm
- canvas-size: Determine the maximum area, height, width, and custom dimensions of an HTML canvas element. by John Hildenbiddle / canvas
- Subscripteo: Compare the best Web Design & Development Subscriptions by subscripteo.com / subscriptions, products
🎨 Design
- Mobile search: which pattern should you choose?: Design patterns for search when it comes mobile apps by Ksenia Toloknova / mobile, search / 19 min read
- How I Developed the 10 Usability Heuristics: Jakob Nielsen’s 10 usability heuristics were defined from a factor analysis of the use of a much larger set of usability principles to explain a database of usability problems in development projects. by Jakob Nielsen / principles / 13 min read
- UI = f(statesⁿ): All the states that can happen on pages/components. by Dave Rupert / states / 8 min read
- html.to.design: Import websites into Figma to iterate, redesign, benchmark and more; without building each element from scratch. by html.to.design / figma / 5 min read
- F-Shape Pattern And How Users Read: TIL: Users spend 80% of the time viewing the left half of a page by Vitaly Friedman / ux / 11 min read
- Motionimo: Your daily dose of quality resources and beautiful animations. by motionimo / animations / 3 min read
- 404 Creatives: Exploring the Artistry of 404 Error Page Design: Beautiful compilation of 404 pages. by Muzli / 404, notfound / 3 min read
- Okay, Color Spaces: Colors arranged in the space by Eric Portis / colors / 22 min read
- Algorithm-Driven Design: How artificial intelligence is changing design by algorithms.design / ai / 50 min read
- Dead Simple Sites: The most minimal sites on the web, curated in one place. by deadsimplesites.com / minimal, websites / 3 min read
- drams: Framer components inspired by Dieter Rams’ design principles by drams.framer.website / components / 5 min read
- The 3 secrets to Font Pairing: Three simple rules. by Jake / fonts / 9 min read
🤪 Fun
- Cross My Heart: Frogger Demake in 256 Bytes by Frank Force / games / 1 min read
📚 Tutorials
- Building Interactive Data Visualizations with D3.js and React: Data visualizations are a powerful way to represent complex information in a digestible and engaging manner. React, a popular JavaScript library for building user interfaces, can be integrated with D3.js to create stunning and interactive data visualizations. by Oluwabusayo Jacobs / react, d3 / 42 min read
- On-Scroll Animation Ideas for Sticky Sections: Some ideas of how sticky sections can be animated while exiting the viewport. by Manoela Ilic / animations / 3 min read