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. / 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. / pwa / 1 min read
- Learning about debuggers: Quite nerdy, but surely interesting if you want to learn more about debuggers ;) / debug / 6 min read
- From engineer to manager: what I love, what I hate: Love and hate after transitioning to a manager role / career / 10 min read
- React Trends in 2024: What’s going on in the React world in 2024? / 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. / sql / 43 min read
- It’s Official, Apple Kills Web Apps in the EU: That’s a really sad development / apple, pwa / 6 min read
- Remix Vite is Now Stable: Vite support is now stable in Remix / remix, vite / 12 min read
- Warp, the modern terminal, is now available for Linux: The popular terminal is now available for Linux! / terminal / 8 min read
- Meet Rocket Turtle: The new nodejs moscot / nodejs / 1 min read
- random() distribution visualization: Beautifully visualized, and interesting! / random / 0 min read
- Using localStorage in Modern Applications: A Comprehensive Guide: Advices, best practives and comparisons to indexed-db, opfs, and more. / 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. / htmx, react / 15 min read
- Redwood v7.0.0 is now available!: Next major release of Redwood / redwood / 9 min read
- Mind officially blown: See how Paige Bailey recorded a video and Gemini generated Selenium code out of it. Pretty cool. / gemini / 1 min read
🧰 Tools
- groq: Incredible fast Mixtral-based chatbot, haven’t seen something at nearly the same speed as this one. / llm, chatbot
- CodeRev: CodeRev is a lightweight tool to help you organize and conduct technical interviews using code reviews rather than leetcode. / interviews
- yamlify-object: Stringify object/array with yaml syntax / yaml
- rustwasm: Rust and WebAssembly / rust, wasm
- dax: Cross-platform shell tools for Deno and Node.js inspired by zx. / shell
- Lucia: Lucia is an auth library for your server that abstracts away the complexity of handling sessions. / auth
- React Print: Build and generate PDF using React UI kit for PDFs and print documents. / react
- react-document-picture-in-picture: Feature-packed and optimised React component for Chrome’s new Document Picture-in-Picture API / react
- react-use-wizard: A React wizard (stepper) builder without the hassle, powered by hooks. / react, wizard
- OKLCH Color Picker & Converter: Another color picker / colors, oklch
- Marquee: A beautiful marquee component for React. / react
- Park UI: Beautifully designed components built for your choice of JS and CSS frameworks. / 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. / dnd
- js-tokens: Tiny JavaScript tokenizer. / javascript
- Pages CMS: A user-friendly CMS for static site generators. / cms, github
- Retell AI: Conversational Voice API for Your LLM / ai, llm
- Danswer: Ask Questions in natural language and get Answers backed by private sources. Connects to tools like Slack, GitHub, Confluence, etc. / ai, llm
- canvas-size: Determine the maximum area, height, width, and custom dimensions of an HTML canvas element. / canvas
- Subscripteo: Compare the best Web Design & Development Subscriptions / subscriptions, products
🎨 Design
- Mobile search: which pattern should you choose?: Design patterns for search when it comes mobile apps / 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. / principles / 13 min read
- UI = f(statesⁿ): All the states that can happen on pages/components. / states / 8 min read
- html.to.design: Import websites into Figma to iterate, redesign, benchmark and more; without building each element from scratch. / 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 / ux / 11 min read
- Motionimo: Your daily dose of quality resources and beautiful animations. / animations / 3 min read
- 404 Creatives: Exploring the Artistry of 404 Error Page Design: Beautiful compilation of 404 pages. / 404, notfound / 3 min read
- Okay, Color Spaces: Colors arranged in the space / colors / 22 min read
- Algorithm-Driven Design: How artificial intelligence is changing design / ai / 50 min read
- Dead Simple Sites: The most minimal sites on the web, curated in one place. / minimal, websites / 3 min read
- drams: Framer components inspired by Dieter Rams’ design principles / components / 5 min read
- The 3 secrets to Font Pairing: Three simple rules. / fonts / 9 min read
🤪 Fun
- Cross My Heart: Frogger Demake in 256 Bytes / 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. / 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. / animations / 3 min read