TF #28 | Your weekly frontend digest

Big issue this week with lots of links in all our categories. There will be no newsletter next week because of Christmas. So make the most of it now!

Frontend 🎨

• The anatomy of shadcn/ui

• HTML: The Bad Parts

• How to use Chrome's accessibility tree

  

• The await event horizon in JavaScript

• Lost in Translation: Tips for Multilingual Web Accessibility

• Evolving the infinite canvas | Amelia Wattenberger Great experience with this website. Take a look!

CSS

• Baseline 2023 | web.dev

• CSS code wrapped: 2023 ! | Chrome for Developers

  

• Fine, I’ll Use a Super Basic CSS Processing Setup

• How does xxx compare to Panda CSS

React

• Unleashing the Potential: Server-Side Rendering in React 18

  

• React Tricks: Fast, Fit and Fun

• A Chain Reaction — overreacted

• Guide to React Suspense and use hook for busy bees

Angular

• Check out Angular’s support for the View Transitions API | by Andrew Scott

NodeJs

• Improving Node.js loader performance

  

Web performances⚡

• Web Performance Calendar » 2023

  

• Web Performance Calendar » Ten optimisation tips for an initial web performance audit

• Web Performance Calendar » Who stole my Largest Contentful Paint?

• Web Performance Calendar » Reducing Filesizes with Compression Dictionaries and Delta Compression

• How I brought LCP down to under 350 ms for Google-referred users on my website

• Preparing For Interaction To Next Paint, A New Web Core Vital

  

• Correctly Configure (Pre) Connections – Harry Roberts – Web Performance Consultant

• Debugging bfcache, make your page load instantly - DevTools Tips - YouTube

• Super Helpful: Server-Timing HTTP Response Headers

UX / UI📱

• Figma plugin magic tricks: mixing colors with SVG and Canvas API

  

• How Figma, Midjourney, Databricks, and Modyfi Harness AI with Design

• How design works at Supabase

• Introducing Spectrum 2: Our vision for the future of Adobe experience design

• The 8 Guidelines for Good Automotive UX Design

• Recipe for UX Rapid Research | Indeed Design

• The UX of delivering parcels

  

• Frontend Rewind 2023 – Day 01 | Codrops

• PANTONE® USA | PANTONE 13-1023 Peach Fuzz | Pantone Color of the Year 2024

Work, productivity 📇

• You are never taught how to build quality software

• Practical Ways To Increase Product Velocity

• What I Wish I Knew As a Mid-Level Engineer

• The tragedy of the common leader

Misc🔋

• Design Systems Database: Surf among top‑notch Design Systems

  

• Zero downtime Postgres upgrades

• Who is responsible for the impact of innovative products?

• Explaining ChatGPT to Anyone in <20 Minutes

• L'Outside-in Diamond TDD, ou l'art de mieux tester (French, shared by @tpierrain on X)

• ChatGPT décortiqué : du token à l'escargot, les secrets dévoilés (French)

  

Tutorials 💻

• 2 better alternatives to overflow: hidden

• The best way to create animated gradient borders in CSS

• An Introduction to the React Testing Library | egghead.io

  

• Coding an Interactive (and Damn Satisfying) Cursor: 7 Simple Steps + 2kb of Code

• React server components from scratch!

Tools & resources 🔧

Announcements

• Million.js 3.0 | Million.js

• Expo SDK 50 beta is now available - Expo Changelog

• Expo Router v3 beta is now available

  

• The JavaScript Oxidation Compiler | A collection of JavaScript tools written in Rust

• Epic Easing | Easing made easy!

  

• Color Lisa - Color palette masterpieces of the world’s greatest artists

  

• React-glow Add a mouse-tracing glow effect to React components.

• Croner - Trigger functions or evaluate cron expressions in JavaScript or TypeScript.

• Huh: A simple, powerful library for forms and prompts in the terminal

Videos, talks 📼

• DDD Europe 2023 - Model Mitosis - Julien Topçu and Josian Chevalier

• This Is Why Most 3D Websites Suck

• This taught me so much about advanced TypeScript

  

Podcasts🎙️

• Syntax #705 | Is Running Random Code From npm Safe? With Feross Aboukhadijeh

• JavaScript Jabber #611 | Monitoring Performance and Core Web Vitals ft. Bianca Grizhar and Sumitra Manga

• Whiskey Web and Whatnot 121: Tech Stacks, Building Apps, and Gaming Nostalgia with David Cramer

• Developer tea #1188 | Good Plans, Bad Plans, and Road Trips

• Axopen #65 : Spécial Noël 2023 : bilan de l’année et inspirations cadeaux

Fun 👾

• Procedural Planets

• #GitHubUnwrapped 2023 - Your coding year in review

  

• SVG Tutorial - Learn how to code images in HTML with SVG