TF #20 | Your frontend digest

🗞 Article of the week : Announcing TanStack Query v5 | TanStack Blog and Node.js 21 Available Now! - OpenJS Foundation

---

📬 Don't hesitate to subscribe to our newsletter so you don't miss a thing!
We are also on 🐦 Twitter/X and 🟦 BlueSky, come and say Hello! 👋
We share content throughout the week in advance.

---

Frontend 🎨

Misc

• Unlocking the Power of Storybook

• Drizzle or Prisma? I Built an App Twice to Find Out Which Is Better

• The selected date must be within the last 10 years – Cloud Four

• Why Fetch Promise Doesn't Reject on Error ResponsesFast(er) JavaScript on WebAssembly: Portable Baseline Interpreter and Future Plans

• Use Chrome DevTools Like a Senior Frontend Developer

CSS

• Classed components - Flexible Blog

• CSS Findings From Photoshop Web Version

• The 6 Must-Know Rules of Margin Collapsing in CSS

• What’s new in CSS? (2023.10.12 @ Frontmania) – Bram.us

SolidJS

• Solid.js Creator Outlines Options to Reduce JavaScript Code

Angular

• New Angular 17 feature: deferred loading

React

• React useTransition: performance game changer or...?

• Using RCTView & RCTText in React Native for Performance Gains | Theodo

Web performances

• Hydration, the Saboteur of Lazy Loading

UX / UI📱

• How To Choose Typefaces For Fintech Products: Our Best Practices Guide

• The Negative Impact of Mobile-First Web Design on Desktop

• Transition animations: a practical guide | UX Collective

• 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

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

• Engineering Team Lessons from Cycling

• Building remote relationships for more productive teams

• How Hard Should I Push Myself?

• How do I progress to the next level in my career?

• Manage Your Capacity, Not Your Time - by James Stanier

• The problem with glorifying failure - Wes Kao's Newsletter

• Talking with Colleagues About Suffering

• Dont panic! A playbook for managing any production incident - Stack Overflow

• Bottleneck #01: Tech Debt

Misc🔋

• State of AI Report 2023 (Google Slides)

• How we reduced the cost of building Twitter at Twitter-scale by 100x

• Why We Dont Ship Software as Fast as We Used To

• The fallacy of freemium in SaaS

• On the Importance of Naming in Programming

• Random Thoughts 15 years into Software Engineering

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

• Nuxt 3 Course (Beginners)

• Nuxt 3.8 - Client-side caching with getCachedData

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: A Blog Starter Kit built with Hashnode's GraphQL Public APIs

• jhuckaby/Cronicle: A simple, distributed task scheduler and runner with a web based UI.

• zachleat/table-saw: A small web component for responsive elements.

• sambauers/tailwindcss-3d: Add 3D transforms to your TailwindCSS project

• porsager/postgres: Postgres.js - The Fastest full featured PostgreSQL client for Node.js, Deno, Bun and CloudFlare

• Build a Better Mobile Input - A visual guide to make better inputs!

• Digital Accessibility Blogs and Newsletters - TPGi

• Vue Data UI A user-empowering data visualization Vue components library

• Free SVG generators, color tools & web design tools

• iiisometric: 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

• React Native: 3D and Canvas Animation Using react-skia - Vilva Athiban

• Understanding the new Suspense SSR architecture in React 18 - Kirti Vernekar

• Scaling Creativity: A Deep Dive into Generative AI and React Integration - Rakesh Ravuri

• Supercharging User Experience with Predictive Prefetching - Vishal Sharma

• WordPress-like plugins, but for Next.js - Sanket Sahu

• TypeScript Patterns for Better React Components - Glenn Reyes

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

• Updates from the Angular Team | Mark Thompson & Alex Rickabaugh

Podcasts, talks...🎙

• Syntax | Design Systems with Brad Frost

• JavaScript Jabber 603 | Harnessing Module Federation and Micro Front-Ends in JavaScript Development

• JS Party #297 | Use Effect (not useEffect) with Johannes Schlickling

• Asian Efficiency | Dealing With A Stressful Life? Listen to this now!

• ShopTalk 587: Why Ethan Marcotte Thinks Tech Workers Deserve a Union

• Whiskey Web and Whatnot - Episode 113 | Self-Taught Engineering, Boot Camps, and Veganism with Welch Canavan

• Front-End Fire: Accelerate Your Web Dev with React Aria Components, Optimized Barrel File Imports, and ActivityPub Support in Wordpress on Apple Podcasts

The French corner 🇫🇷

Double-slash | LES NEWS WEB DEV POUR OCTOBRE 2023

• Tech.Rocks #S05EP28 - Paroles de Tech Leaders - Quand la tech et le produit ne font qu'un - Adrien BLANDIN (lePERMISLIBRE) & Herv LOURDIN (Batch)

• Radio Contournement #114 : 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

• IFTTD #240 - Tests : limportance davoir une vraie stratgie avec Jrme Guilloux

• Les Technos | Episode 418 : X (Twitter) : Quelles alternatives ?

---

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