TF #28 | Your weekly frontend digest

🗞 Article of the week : How does xxx compare to Panda CSS. Because there's more to life than Tailwind, and Panda is sure to become the next big thing for CSS.

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, Ill 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 Angulars 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

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

Misc🔋

• Design Systems Database: Surf among topnotch 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!

https://twitter.com/wesbos/status/1734258477483114707

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
  

Misc.

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

• Epic Easing | Easing made easy!
  

• Color Lisa - Color palette masterpieces of the worlds 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 Topu and Josian Chevalier

• This Is Why Most 3D Websites Suck

• This taught me so much about advanced TypeScript
  

Podcasts🎙

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

• 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 : Spcial Nol 2023 : bilan de lanne et inspirations cadeaux

Fun 👾

• Procedural Planets

• #GitHubUnwrapped 2023 - Your coding year in review
  

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

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