TF #20 | Your frontend digest
Tags: webdev, javascript, react, programming
Published: 2023-10-23 11:29:39

🗞 Article of the week : [Announcing TanStack Query v5 | TanStack Blog](https://tanstack.com/blog/announcing-tanstack-query-v5?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) and [Node.js 21 Available Now! - OpenJS Foundation](https://openjsf.org/announcement/2023/10/17/node-js-21-available-now/)

***

📬 Don't hesitate to subscribe to our [**newsletter**](https://tinyurl.com/mpfsubep) so you don't miss a thing!
We are also on 🐦 [**Twitter/X**](https://twitter.com/tech_foutraque) and 🟦 [**BlueSky**](https://bsky.app/profile/tech-foutraque.bsky.social), come and say Hello! 👋
We share content throughout the week in advance.

* * *

### Frontend 🎨

#### Misc
- [Unlocking the Power of Storybook](https://formidable.com/blog/2023/unlocking-the-power-of-storybook/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)
        
- [Drizzle or Prisma? I Built an App Twice to Find Out Which Is Better](https://zenstack.dev/blog/drizzle-prisma?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)
        
- [The selected date must be within the last 10 years – Cloud Four](https://cloudfour.com/thinks/the-selected-date-must-be-within-the-last-10-years/)
        
- [Why Fetch Promise Doesn't Reject on Error Responses](https://kettanaito.com/blog/why-fetch-promise-doesnt-reject-on-error-responses?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)[Fast(er) JavaScript on WebAssembly: Portable Baseline Interpreter and Future Plans](https://cfallin.org/blog/2023/10/11/spidermonkey-pbl/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)
        
- [Use Chrome DevTools Like a Senior Frontend Developer](https://javascript.plainenglish.io/use-chrome-devtools-like-a-senior-frontend-developer-97ad3ee47647?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

#### CSS
- [Classed components - Flexible Blog](https://flexible.dev/blog/single-line-components/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)
        
- [CSS Findings From Photoshop Web Version](https://ishadeed.com/article/photoshop-web-css/)
        
- [The 6 Must-Know Rules of Margin Collapsing in CSS](https://medium.com/@RitikaAgrawal08/the-6-must-know-rules-of-margin-collapsing-in-css-56968836827d?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)
        
- [What’s new in CSS? (2023.10.12 @ Frontmania) – Bram.us](https://www.bram.us/2023/10/13/whats-new-in-css-2022-10-12-frontmania/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

#### SolidJS
- [Solid.js Creator Outlines Options to Reduce JavaScript Code](https://thenewstack.io/solid-js-creator-outlines-options-to-reduce-javascript-code/)

#### Angular
- [New Angular 17 feature: deferred loading](https://www.angularaddicts.com/p/angular-17-feature-deferred-loading-with-signals)

#### React
- [React useTransition: performance game changer or...?](https://www.developerway.com/posts/use-transition?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)
        
- [Using RCTView & RCTText in React Native for Performance Gains | Theodo](https://blog.theodo.com/2023/10/native-views-rn-performance/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

### Web performances

- [Hydration, the Saboteur of Lazy Loading](https://www.builder.io/blog/hydration-sabotages-lazy-loading?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

### UX / UI📱

- [How To Choose Typefaces For Fintech Products: Our Best Practices Guide](https://www.smashingmagazine.com/2023/10/choose-typefaces-fintech-products-guide-part1/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [The Negative Impact of Mobile-First Web Design on Desktop](https://www.nngroup.com/articles/content-dispersion/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [Transition animations: a practical guide | UX Collective](https://uxdesign.cc/transition-animations-a-practical-guide-5dba4d42f659?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [How Pinterests design systems team measures adoption](https://www.designsystems.com/how-pinterests-design-systems-team-measures-adoption/)

- [How we organise our Design System libraries to help Doctolib designers use more than 70 000 components a week | Doctolib](https://medium.com/doctolib/how-we-organise-our-design-system-libraries-to-help-doctolib-designers-use-more-than-70-000-c15237c81f6c?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

### Work 📇

Learn how to discover stakeholders, build remote relationships, manage your capacity, and more from this section on self-improvement, engineering teams, and productivity.

- [On Stakeholders, And How To Discover Them](https://medium.com/the-liberators/on-stakeholders-and-how-to-discover-them-d235be7ca757?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [Engineering Team Lessons from Cycling](https://benjiweber.co.uk/blog/2023/10/15/engineering-team-lessons-from-cycling/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [Building remote relationships for more productive teams](https://leaddev.com/team/building-remote-relationships-more-productive-teams?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [How Hard Should I Push Myself?](https://every.to/chain-of-thought/how-hard-should-i-push-myself-83986449-8ffb-40de-9e61-214dd387b6b8?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [How do I progress to the next level in my career?](https://theengineeringmanager.substack.com/p/how-do-i-progress-to-the-next-level?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [Manage Your Capacity, Not Your Time - by James Stanier](https://theengineeringmanager.substack.com/p/manage-your-capacity-not-your-time?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [The problem with glorifying failure - Wes Kao's Newsletter](https://newsletter.weskao.com/p/the-problem-with-glorifying-failure?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [Talking with Colleagues About Suffering](https://www.edbatista.com/2023/10/talking-with-colleagues-about-suffering.html?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [Dont panic! A playbook for managing any production incident - Stack Overflow](https://stackoverflow.blog/2023/05/03/dont-panic-a-playbook-for-managing-any-production-incident/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [Bottleneck #01: Tech Debt](https://martinfowler.com/articles/bottlenecks-of-scaleups/01-tech-debt.html?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

### Misc🔋

- [State of AI Report 2023 (Google Slides)](https://docs.google.com/presentation/d/156WpBF_rGvf4Ecg19oM1fyR51g4FAmHV3Zs0WLukrLQ/edit#slide=id.g24daeb7f4f0_0_3373?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [How we reduced the cost of building Twitter at Twitter-scale by 100x](https://blog.redplanetlabs.com/2023/08/15/how-we-reduced-the-cost-of-building-twitter-at-twitter-scale-by-100x/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [Why We Dont Ship Software as Fast as We Used To](https://every.to/p/why-we-don-t-ship-software-as-fast-as-we-used-to?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [The fallacy of freemium in SaaS](https://wraptext.equals.com/the-fallacy-of-freemium-in-saas/)

- [On the Importance of Naming in Programming](https://wasp-lang.dev/blog/2023/10/12/on-importance-of-naming-in-programming?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [Random Thoughts 15 years into Software Engineering](https://roughlywritten.substack.com/p/random-thoughts-15-years-into-software?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

### Tutorials 💻

2 tutorials for the price of one on Nuxt this week and a short video to pimp your console.log()!

- [Start Styling Your console.log() Messages in DevTools](https://www.youtube.com/watch?v=sXT5DkeZnrA&ab_channel=CSSWeekly)

- [Nuxt 3 Course (Beginners](https://www.youtube.com/watch?v=fTPCKnZZ2dk&ab_channel=freeCodeCamp.org))

- [**Nuxt 3.8 - Client-side caching with getCachedData**](https://youtu.be/aQPR0xn-MMk?si=NcWp0cRzXt6RA7Q1)

### Tools & resources 🔧

Full resources again this week! Hashnodes GraphQL Public APIs starter kit, Cronicle task scheduler and runner with a web-based UI, table-saw for responsive elements, tailwindcss-3d for 3D transforms in TailwindCSS projects, etc.

- [Hashnode/starter-kit:](https://github.com/Hashnode/starter-kit?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) A Blog Starter Kit built with Hashnode's GraphQL Public APIs

- [jhuckaby/Cronicle:](https://github.com/jhuckaby/Cronicle?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) A simple, distributed task scheduler and runner with a web based UI.

- [zachleat/table-saw:](https://github.com/zachleat/table-saw?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) A small web component for responsive elements.

- [sambauers/tailwindcss-3d:](https://github.com/sambauers/tailwindcss-3d?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) Add 3D transforms to your TailwindCSS project

- [porsager/postgres: Postgres.js -](https://github.com/porsager/postgres?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) The Fastest full featured PostgreSQL client for Node.js, Deno, Bun and CloudFlare

- [Build a Better Mobile Input](https://better-mobile-inputs.netlify.app/) - A visual guide to make better inputs!

- [Digital Accessibility Blogs and Newsletters - TPGi](https://www.tpgi.com/digital-accessibility-blogs-and-newsletters/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email)

- [Vue Data UI](https://vue-data-ui.graphieros.com/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) A user-empowering data visualization Vue components library

- [Free SVG generators, color tools & web design tools](https://fffuel.co/)

- [iiisometric:](https://fffuel.co/iiisometric/?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) 3D-like isometric design builder by fffuel (they have a tons of great tools)

### Videos 📼

The videos of the React India 2023 conference have been released on youtube. There are a lot of very interesting talks, here's an overview:

- [Building Interactive 3D Scenes with Three.js - Ritesh Kumar](https://youtu.be/M9XXqlsHEY8?si=qxjBxBUyPy2ogzcB)

- [React Native: 3D and Canvas Animation Using react-skia - Vilva Athiban](https://youtu.be/G50c3SAJLoY?si=L4hAtjCY0oQKjfcL)

- [Understanding the new Suspense SSR architecture in React 18 - Kirti Vernekar](https://youtu.be/QlHGEkuJz-Y?si=czoorWW7LZXhj2Gq)

- [Scaling Creativity: A Deep Dive into Generative AI and React Integration - Rakesh Ravuri](https://youtu.be/QVS5-L2hd5o?si=B7AwFgpVzTNopvOc)

- [Supercharging User Experience with Predictive Prefetching - Vishal Sharma](https://youtu.be/NPQwzKP6OMQ?si=HGM4R0DHeoYJlUUl)

- [WordPress-like plugins, but for Next.js - Sanket Sahu](https://youtu.be/pfXzmUAw1dI?si=uDw9LIJvFjjG2BAx)

- [TypeScript Patterns for Better React Components - Glenn Reyes](https://youtu.be/-S1XgjLKFF8?si=s_2vhYjv9Y6O46Dg)

Quite a few videos on Angular too. I have the impression that the framework is becoming "popular" again.

- [[EN] Inaugural Online Meetup: Advanced Signal Topics](https://www.youtube.com/live/6wWteAza_FY?si=oWzyfj20Ejhwcij2)

- [Updates from the Angular Team | Mark Thompson & Alex Rickabaugh](https://youtu.be/QrEH53tSUf0?si=RPGiIBEEqwqgut_O)

### Podcasts, talks...🎙

- [Syntax](https://syntax.fm/show/682/design-systems-with-brad-frost?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) | Design Systems with Brad Frost

- [JavaScript Jabber 603](https://redcircle.com/shows/javascript-jabber/ep/e5c8f26a-f66d-4e6a-b7c7-72d420b5cc55?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) | Harnessing Module Federation and Micro Front-Ends in JavaScript Development

- [JS Party #297](https://changelog.com/jsparty/297?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) | Use Effect (not useEffect) with Johannes Schlickling

- [Asian Efficiency](https://www.asianefficiency.com/podcasts/478w-stress/) | Dealing With A Stressful Life? Listen to this now!

- [ShopTalk 587:](https://shoptalkshow.com/587/) Why Ethan Marcotte Thinks Tech Workers Deserve a Union

- [Whiskey Web and Whatnot - Episode 113](https://whiskeywebandwhatnot.fm/self-taught-engineering-boot-camps-and-veganism-with-welch-canavan?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) | Self-Taught Engineering, Boot Camps, and Veganism with Welch Canavan

- [Front-End Fire:](https://podcasts.apple.com/us/podcast/accelerate-your-web-dev-with-react-aria-components/id1700169000?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) Accelerate Your Web Dev with React Aria Components, Optimized Barrel File Imports, and ActivityPub Support in Wordpress on Apple Podcasts

The French corner 🇫🇷

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698008064406/0797b80e-aa51-40a0-bd61-f5e824c66c02.jpeg)](https://double-slash.dev/podcasts/newsoct23/)

[Double-slash | LES NEWS WEB DEV POUR OCTOBRE 2023](https://double-slash.dev/podcasts/newsoct23/)

- [Tech.Rocks #S05EP28 - Paroles de Tech Leaders](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkLmF1c2hhLmNvL3lBZTl2aE1XbFJMMQ/episode/OGJmNzRhM2VlMjAyOTk3NWU2ODg3MzZjMGY4MDQxYTMyMjM5MGVlMA?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) - Quand la tech et le produit ne font qu'un - Adrien BLANDIN (lePERMISLIBRE) & Herv LOURDIN (Batch)

- [Radio Contournement #114](https://radio.contournement.io/episode/114-claire-ribiere-se-lancer-en-freelance-et-faire-une-chaine-youtube-sur-le-no-code) : Claire Ribiere, se lancer en freelance et faire une chane Youtube sur le no-code

- [Des machines virtuelles photoshopent leurs mojis en ligne pour passer sur Twitch | Clever Cloud](https://www.clever-cloud.com/podcast/des-machines-virtuelles-photoshopent-leurs-emojis-en-ligne-pour-passer-sur-twitch/)

- [IFTTD #240](https://www.ifttd.io/episodes/strategie-de-tests-et-valeur-ajoutee-des-tests?utm_source=tech-foutraque&utm_campaign=20&utm_medium=email) - Tests : limportance davoir une vraie stratgie avec Jrme Guilloux

- [Les Technos](https://lestechnos.be/episode-418-x-twitter-quelles-alternatives/) | Episode 418 : X (Twitter) : Quelles alternatives ?

***
💌 If you like this newsletter, don't hesitate to share it, comment, etc