TF #24 | Your weekly frontend digest

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

Frontend 🎨

🗞 Article of the week : The Web Can Do What!? Great visual experience from Google! Interactive, interesting and fun!

• Addressing Accessibility Concerns With Using Fluid Type

• Cracking a Developer Tools Killer script

• 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know

• Can Bun Eat Node.jss Lunch? Testing the Trendy Toolkit

• How I Add Test Ids To Front-End Components

• Enforcing coding style with @vercel/style-guide

• Modern frontend testing with Vitest, Storybook, and Playwright - Defined Networking

• Totally remdom, or How browsers zoom text

• A Journey Into Shaders

HTML

• Mastering DOM manipulation with vanilla JavaScript

• HTML Web Components

CSS

• Surprising Facts About New CSS Selectors Cloud Four

• Using CSS content-visibility to boost your rendering performance

• Workarounds for Buggy Gradients

Angular

• What's Up With Angular with Mark Techson

• A Comprehensive Guide to Angulars Defer Block

• Whats New with Angular v17?. Unveiling Angular 17: A Bold Leap

React

• Moving back to React daily.dev switched from Preact to React for its frontend framework

• Refreshing the Next.js App Router When Your Markdown Content Changes

SolidJS

• SolidJS pain points and pitfalls (part 2)

UX / UI 📱

Let's start with the web designer's favorite tool, Figma, with 3 articles on the latest news.

• Figma plugin API: diving into advanced algorithms & data structuresMartian Chronicles, Evil Martians team blog

• 

• Introducing AI to FigJam | Figma Blog

2 articles from Smashing magazine, as high quality as ever! Always recommended to read their articles

• Creating Accessible UI Animations Smashing Magazine

• Designing Web Design Documentation Smashing Magazine

• Libre Arts - Is this radical redesign of GIMP possible now? I really liked this article. As a former designer, Gimp was mostly my spare wheel BECAUSE of its interface.

• The Guide to Design if you are looking for guidance, here's a starting point!

• Understanding Accessibility A tool for web designers.

• And the 2024 color of the year is...

Work, productivity... 📇

• AddyOsmani.com - Effective Engineering Teams

• 10 hard-to-swallow truths they won't tell you about software engineer job

• The story about rice that made me understand great leadership

• The Architecture Behind A One-Person Tech Startup

• The 100 Best Bits of Advice from 10 Years of First Round Review

• A Guide to Public Speaking for Software Engineers

Misc 🗂️

• The five principles of modern developer tools

• URL explained - The Fundamentals There's always something to discover with articles like this! Take this opportunity to review the basics

• 

• How We Automated Content Marketing to Acquire Users at Scale - Spotify Engineering : Spotify Engineering

Tutorials 💻

• Vue 3 & Composition API - Full Project

• Build and Deploy an Amazing 3D Developer Portfolio in React with Three.js If you want to create a stylish portfolio, this is the tutorial for you

• 

Tools & ressources 🔧

• Awesome tool!!! Ribbon Shapes - Get a CSS-only Ribbon Shape made with a single-element and customizable using CSS variables.

• 

• it.tools Another valuable resource. This site will be your toolbox for all your needs. Converter, hash text, token generator, PDF signature checker and more...

• cRonstrue: JavaScript library that translates Cron expressions into human readable descriptions

• perfect-freehand: Draw perfect pressure-sensitive freehand lines. You can export your signature as SVG for example!

• 

• CLONE UI - Generate UI components with simple prompts

• Patterns.dev is a free online resource design, render, and performance patterns for building powerful web apps with vanilla JavaScript or modern frameworks.

• usehooks-ts: React hook library, ready to use, written in Typescript.

• nextjs-use-php: Use PHP code right within your React / Next.js App. With use php;

Videos 📼

• Node.js Collab Summit 2023 The playlist of videos (not too long) from the conference.

• NextJS 14: You Missed The Best Part!

• 

• A new approach to container and wrapper classes Kevin Powellas pedagogical as ever

Podcasts, talks... 🎙️

• JavaScript Jabber | JSJ 607 - RPC Resurgence: From Client-Server Applications to Next.js and Meta Frameworks

• (JS Party #301) |> Changelog - Building something new with Saron Yitbarek

2 episodes of Asian Efficiency about productivity

• How Many Hours of Focus Time Are Enough? How To Break Phone Addiction? & More

• The Art of Concentration: Mastering Mindfulness for Peak Performance

The French corner

• Double Slash //74 - Les News Web Dev pour Novembre 2023

• 

• IFTTD #245 - Symfony : Naviguer entre contraintes et libert avec Grgoire Pineau

• Les IA s'entranent offshore pour gnrer des malwares destination des sangliers | Clever Cloud

💌 We are also on Twitter/X and BlueSky, come and say Hello 👋 We share content throughout the week in advance.
Please follow us to support our work!🙏 it helps us a lot!