TF #25 | Your weekly frontend digest

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

---

🗞 Article/news of the week : Lost in the OpenAi VS Sam Altman drama? Here's a day-by-day rundown of the affair to help you make sense of it all! Read the article: Here's a timeline of the OpenAI saga with CEO Sam Altman or watch Fireship's summary here: The truth about the OpenAI drama

---

Frontend 🎨

Announcements

• Announcing TypeScript 5.3

• State of JavaScript 2023

  

CSS

• Width and Height in CSS It's always good to understand how these 2 more complex CSS attributes work.

• The New CSS Math: rem() and mod()

• Getting started with CSS container queries | MDN Blog If you haven't yet seen how it works, this article is for you!

• CSS Nesting by Ahmad Shadeed. Great explanations as usual.

  

React/Next.js

• React Server Components

• Combining AI with React for a Smarter Frontend - The New Stack

• Pierre's Next.js Cache Strategy

• Building towards a new default rendering model for web applications – Vercel

• Dynamic Routes Recipes from Next.js App Router

• Testing against every Next.js canary release

Angular

• Component-Store in Angular: Component Level State Management with a Practical Approach

• Angular Interceptors Unleashed: Solving Complex Scenarios with Ease

WebComponents

• “Shadow dom is not a good default” • Buttondown

• HTML Web Components are Just JavaScript?

• An Attempted Taxonomy of Web Components

• Step into the light (DOM)

Misc

• How Qwik’s Astro Integration Beats Both React and Vanilla JS

• The Tension and Future of Jamstack

• An Interactive Guide to CSS Grid

• Is Elegant JavaScript Always Performant? Concise vs. Fast Code Explained

Three.js

• Jesse’s Ramen: 3D Portfolio Case Study

  

Web performances⚡

• Vue.js Parallel Fetching improves LCP and FCP

  

UX / UI📱

• Zara: The billion dollar missed opportunity

• How to create a color palette for design systems

• Why are Western apps more minimalistic than Asian apps?

• The Magic of Details: How UX Microinteractions Transform Products

---

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

---

Work, productivity 📇

• The Bluffer’s Guide to The Mythical Man-Month

• How to Boss Without Being Bossy

• Your Small Imprecise Ask Is a Big Waste of Their Time

• In-Depth: How To Prevent High-Performing Teams From Burning Out

• How to Build Trust

• Johan Cruyff's influence on adaptive role switching in Product Design

Misc🔋

• 15-150: Principles of Functional Programming

• Your Website’s URLs Can and Should Be Beautiful

• AI: The Coming Revolution

• The Definitive Guide: Product Analytics for Product-Led Growth

• Exploring V8's strings: implementation and optimizations

• 7 books that changed me the most as a software engineer

• Navigating around in your shell

• Taming Complexity with Reversibility

Tutorials 💻

• Building a progressive web app in Remix with Remix PWA

• Getting Started With Nuxt UI

• Vite - Modern JavaScript Bundler

  

Tips ✨

💡 I started to share some tips about web development and some tools. Take a look and upgrade your frontend skills and knowledge

Tools & ressources 🔧

• Vite 5.0 is out!

• Reveal.js release 5.0.0

• Prettier 3.1: New experimental ternaries formatting and Angular control flow syntax!

• Grep.app : Search across a half million git repos

• Fnm: Fast and simple Node.js version manager, built in Rust

• Browser-window: Used in demos as a way to fake a Safari-esque web browser window.

• Scroll-Driven Animations Debugger

• Colour Contrast Checker

• React Scroll Parallax | React Scroll Parallax

• Hello from React Datasheet Grid | React Datasheet Grid

• alexanderson1993/svg-icons-cli

• Ark UI

• Vectorizer.AI - Trace Pixels To Vectors in Full Color, Fully Automatically, Using AI

Videos 📼

• Going Deep on Svelte 5 with Rich Harris

  

• 4 Web Devs, 1 App Idea (Salma Alam-Naylor, Scott Tolinski, Eve Porcello). I really like the idea. Lot of fun!

  

• Josh Comeau – Secret Mechanisms of CSS

• For French speakers: Présentation d'AdonisJS 6 - CodingTalk #3 by NeoElectron and Romain Lanz

Podcasts, talks...🎙️

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

Whiskey Web and Whatnot

• Learning Angular, Leadership Opportunities, and Google Culture with Sarah Drasner - Episode 117

• Leveraging CSS, Web Design, and Gaming UI with Adam Argyle - Episode 118

Syntax.fm

• How to Build a Website or App

• What is DevRel with Salma Alam-Naylor

Misc

• JavaScript Jabber - JSJ 608 | Next-Level Web Performance with Patrick Meenan

• JS Party #302 - What's new in CSS land featuring Una Kravets

• ShopTalk 592: Web Component Therapy, SEO Therapy, and Learning Something New like Swift

• Asian Efficiency - From Burnout to Balance: Reviving Your Energy and Focus

The French corner

• Génération Do It Yourself - Éléonore Crespo - Pigment - La Française qui va remplacer Excel

• IFTTD #246 - Plans de carrière : Tracer sa route avec Nicolas Guerin

Fun 👾

This week, I've seen a lot of people on twitter talking about the tweet below and I must admit that the result is impressive, I'll let you judge and a little Video from Wes Bos who was obliged to test this for us! This isn't websockets! fun multi-window demo

---

💌 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!