TF #33 | Your weekly frontend digest

🗞 Article of the week : The web just gets better with Interop 2024 | WebKit and Interop 2024 | web.dev or how browsers, as part of Interop 2024, are collaborating in specific areas like CSS nesting, text-wrap: balance, HTTP(S) URL for WebSocket, and relative color syntax, emphasizing the goal of compliance with web standards.

---

I've placed the articles on productivity and miscellaneous at the end of the articles. Some people weren't fans, so I rearranged the order of priority. Let me know if you like it!

---

Frontend 🎨

• The Latest vs. The Greatest | Frontend at Scale

  

• Import attributes · V8

• Event Loop. Myths and reality — Teletype

• A Call for Consensus on HTML Semantics | Stephanie Eckles

• Inside .git

CSS

• Going beyond pixels and (r)ems in CSS - Relative length units based on font

• My first impressions of Panda CSS • Buttondown

• Big, beautiful, beefy focus states with :focus-visible

• Experimental CSS-Only Carousels with Scroll-Driven Animations | Codrops

• Using shared data when generating pages - Daniel Roe

• Field-sizing just works! | Polypane

Angular

• Creating and styling components in Angular | Stackademic

• Angular Query Core Concepts - Tomasz Ducin - blog

VueJS

• Lazy Hydration and Server Components in Nuxt - Vue.js 3 Performance - Vue School Articles

  

• How to create Nuxt Studio like environment for VitePress

• Vue Tip: Custom Component Directives | JavaScript in Plain English

• The Building Blocks of a Greenfield Vue Application in 2024

• A Conceptual Model of State in Vue 3.4

  

WebComponent

• The Web Component Success Story | jakelazaroff.com

Javascript/Typescript

• How TypeScript can help in modelling business workflows - Event-Driven.io

  

• How To Use forwardRef With Generic Components | Total TypeScript

• Explicit Resource Management: Exploring JavaScript's and TypeScript's new feature | iliazeus

• Type TODO | Kyle Shevlin Sometimes any is ok

• Deferred JavaScript promises using Promise.withResolvers | pawelgrzybek.com

React

• How to Add an AI-Powered WYSIWYG Editor in React & Astro with Novel

  

• Shining a light on Caustics with Shaders and React Three Fiber - Maxime Heckel's Blog

• Detailed React. Reconciliation, Renderers, Fiber, Virtual Tree — Teletype

• Avoid using React's useFormStatus

• Next.js App Router migration: the good, bad, and ugly

  

Web performances⚡

• How is Figma so performant?

• Squeezing Last Bit Of JavaScript Performance For My Automation Game

• Debugging speculative navigations for faster page loads #DevToolsTips

  

• LCP & FCP for Single Page Applications on Soft Navigations

• Experimenting with measuring soft navigations  |  Chrome for Developers

UX / UI📱

• In Loving Memory of Square Checkbox | tonsky.me The article is good, the site is cool and dark mode is great

• Reality Check #3: Building out a layered hero grid layout from Dribbble - Piccalilli

  

• The Feature Trap: Why Feature Centricity Is Harming Your Product — Smashing Magazine

• Using AI for 3D rendering—a practical guide for designers | UX Collective

• UX Migration Strategy for Legacy Applications

  

• Designing with legacy. Designing new products is easy… | by Peter Zalman

  

Tools & resources 🔧

• Fastpedia Already mentioned, but just a reminder. If you're looking for an AI tool, this site can find it for you

• Type safe Server Actions in your Next.js (App Router)

  

• React-quiz-component: 📙 React Quiz Component

  

• Husky · GitHub

  

• chroma.js api docs!

• Tiny-rdm: A Modern Redis GUI Client

  

Tutorials 💻

• GitHub Foundations Certification Course – Pass the exam in 10 hours!

• Learn how to use Media queries &Containerqueries

• Styling Ark UI Tabs with Slot Recipes Made a video on how to style

  Ark UI tabs component using Slot Recipes in panda CSS

  

• Build a dApp Using Waku (Decentralized Communication) and Vue.js

• Easily Deploy Full Stack Node.js Apps on AWS EC2 | Step-by-Step Tutorial

• Modern JavaScript library starter - Advanced Web Machinery

• Test Web Bluetooth with Puppeteer  |  Chrome for Developers

• Getting up to Speed with Eleventy: Config and Collections - The New Stack

• Use TSX for your template engine

• (FR) Créer des champs avec CarbonFields — Formation Créer un thème WordPress | Grafikart

  

Videos 📼

• I promise this story about fonts is interesting

• Building multiple Progressive Web Apps on the same domain

  

Angular

• Angular Best Practices, Sam Vloeberghs

• The state of change detection in v17, Matthieu Riegler

• Deferrable Views - New Feature in Angular 17

• NgRx SignalStore: In-Depth Look at Signal-Based State Management in Angular by Marko Stanimirović

  

React

• You might not need useState()!

• Next.js Explained: Partial Prerendering (What? Why? How?)

Vue

• Why you should use useState()

The French corner

• Différences entre animations web et animations mobiles (React Native)

  

• Le CTO à 2€

Podcasts, talks...🎙️

🎧 Find our list of the best English and French podcasts here

• Safari is the new Chrome - Jen Simmons of Apple - Syntax #725

  

• Svelte 5: Speed, Simplicity & Size - Syntax #723

• SJ 618 - JavaScript Jabber - Exploring AI Impact on Code Generation and Quality Metrics

• (JS Party #310) |> Changelog - Angular Signals with Pavel Kozlowski & Alex Rickabaugh

• 600: Where Will The Web Be 12 Years from Now? – ShopTalk

• Whiskey Web and Whatnot - Episode 128 - The Missteps of GraphQL and the Promise of Progressive Enhancement

• Developer Tea - Apply Little's Law To What You Can Control

• Code & Curiosity Podcast A Podcast by Maximilian Schwarzmüller. I learn a lot of things with this guy!

• 2024 Productivity Trends You Need to Know About (TPS493) - Asian Efficiency

The French corner

• Bilan 2023, perspectives 2024 | Clever Cloud

  

• Podcast · Tech.Rocks - #S06EP01 Spécial speakers Tech.Rocks Summit 2023 - Amanda Brock (OpenUK) et Philippe Ensarguet (Orange)

• IFTTD #257 - Kubernetes : Passer d'un déploiement FTP à Kubernetes avec David Coutelle

• Android en coulisse : l'histoire d'un OS open source - 135 Grammes - Les histoires de la tech mobile

Work / Productivity 📇

🤩 If you find this newsletter useful and satisfying, please support us by subscribing and sharing it with others! Thank you.

• Habits of great software engineers

• Jade Rubick - Velocity role 1 - the Subtractionist

• Keep a brag list of the wins you achieved, thank me later

• The art of good code review

• My Diverse Hiring Playbook - Jacob Kaplan-Moss

  

• Manage like an engineer | Ben Balter

• 5 lessons design systems teams can learn from open-source maintainers

  

• We ran an experiment to see how easy it is to cheat with ChatGPT in interviews

  

• Becoming an Engineering Manager - Is It For You?

• Useful tradeoffs are multi-dimensional. | Irrational Exuberance

• I am a creative.

• Letterboxd: How to nail product market fit with clear Jobs‑To‑Be‑Done

  

• “A ’Definition of Done’ Template,” an article by Dan Mall

• Play at work | daverupert.com

Misc🔋

• Apple announces changes to iOS, Safari, and the App Store in the European Union - Apple

• Apple Vision Pro review: magic, until it’s not - The Verge

  

• Brains Are Not Required When It Comes to Thinking and Solving Problems--Simple Cells Can Do It | Scientific American

• Balancing Engineering Cultures: Debate Everything vs. Just Tell Me What To Build

• The most important goal in designing software is understandability

• Small Joys when Programming - by Diego Crespo

• Why lowercase letters save data | endtimes.dev

• The Hacker News Top 40 books of 2023 -

• Talking to Customers Isn’t Enough | Angular

• ArVid: how Russians squeezed 4 hard drives into one VHS tape in the 90s – Jacob Filipp

---

💌 If you like this newsletter, don't hesitate to subscribe, to share it and support us! We are also on Twitter/X and BlueSky, come and say Hello! We share content throughout the week in advance. Thank you.