Tech Foutraque #25 | Your weekly frontend digest

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

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 ✨

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 hooks and components to create parallax scroll effects

• React Datasheet Grid A React component to create beautiful spreadsheets

• Svg-icons-cli

• Ark UI Fully customizable and accessible UI components

• Vectorizer.AI - Trace Pixels To Vectors in Full Color, Fully Automatically, Using AI. The result may not live up to your expectations, but it's a good start.

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...🎙️

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