TF #19 | Weekly Frontend digest

📬 Don't hesitate to subscribe to our newsletter so you don't miss a thing!
We are also on 🐦 Twitter/X and 🟦 BlueSky, come and say Hello! 👋
We share content throughout the week in advance.

Frontend 🎨

Misc articles

• Angular, Qwik Creator on How JS Frameworks Handle Reactivity - The New Stack

• A comprehensive guide to the dangers of Regular Expressions in JavaScript | SonarWhy Next.js is the Full-Stack Framework for Modern Websites

• Speeding up the JavaScript ecosystem - The barrel file debacle

• The Hidden Performance Cost of NodeJS and GraphQL

• Where to put text so it doesn't overlap in the new X (Twitter)

• Sharing State with Islands Architecture | Frontend at Scale

CSS articles

• An Anchored Navbar Solution – Eric’s Archived Thoughts

• The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()

• 5 best practices for preventing chaos in Tailwind CSS

• When to Nest CSS

VueJS articles

• Vue 3 Vapor Mode News

• Nuxt Studio, the pro version of Nuxt Content · Nuxt Studio

ReactJS articles

• Great study case by Vercel on performance: How we optimized package imports in Next.js

• React Server Components

• Handling Query Parameters in Next.js 13 React Server Components

• Programmatic SEO in Next.js

Web performances⚡

• Style Recalculation Secrets They Don't Want You To Know | CSS Day 2023

• CDNs: Speed Up Performance by Reducing Latency

UX / UI📱

• UX Vocabulary Inflation - Jakob Nielsen

• Also great article from Nielson Norman Group: Table of Contents: The Ultimate Design Guide definitely one of the most underestimated components.

• The secret formula for Apple's rounded corners

• A fun article to discover: AI vs Designer: Who’s better at pairing fonts? | Better Web Type

• How to Design a Dashboard: Design Thinking for Dashboards

Some redesign to check from big tech companies!

• Meet the new Webflow

• Patreon - A new brand identity built for, and with, creators.

Management, organisation 📇

Discover insights from industry leaders on boosting team performance. Explore principles, practices, and tools for effective communication and software engineering.

First 2 articles from Leadev a great website to improve culture, skills and get insights from industry leaders

• Boosting team performance as a tech lead | LeadDev

• Generative AI is already impacting tech hiring | LeadDev

• Very good list of books by Addy Osmani: Soft skill books that will make you a better developer

• How to communicate like a GitHub engineer: our principles, practices, and tools - The GitHub Blog

• The top 7 software engineering workflow tips I wish I knew earlier 🧰

• Characteristics of Code Quality - by Abi Noda

• TBM 245: The Magic Prioritization Trick - by John Cutler

• Diving into Engineering Metrics - by Nicola Ballotta

Misc🔋

✨ The first resource is an excellent article on Unicode and a great site! 🕯️ You should test the dark mode!

• The Absolute Minimum Every Software Developer Must Know About Unicode in 2023 (Still No Excuses!)

• A student asked how I keep us innovative. I don't.

• Git commit and commit message best practices

• Why HTTP/3 is eating the world

• How to Write a SaaS Homepage that Actually Converts

• Lessons From Debugging

Tutorials 💻

• Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind almost 8h of tutorials to learn the latest tech trends.

• tRPC + NextJSApp Router = Simple Typesafe APIs great video to discover tRPC and typesafe concept by Jack Herrington

• Write your own Zod and improve your typescript skills!

• Bun Tutorial – JavaScript Runtime (Node.js Alternative) A beginner course to discover the latest trendy tool.

• How to create and style lists with HTML and CSS Once again Kevin Powell, the CSS GOAT, explains key concepts to us in a very simple and visual way.

Tools & ressources 🔧

Discover a wide range of essential tools and resources for your development needs. From Chrome Extension TypeScript Starter to data visualization frameworks and super-fast YouTube embeds, this section is a treasure trove of resources to boost your productivity and enhance your projects.

• chibat/chrome-extension-typescript-starter: Chrome Extension TypeScript Starter

• Semiotic a data visualization framework for React.

• paulirish/lite-youtube-embed: A faster youtube embed.

• knadh/autocomp.js: A super tiny Javascript autocomplete / autosuggestions library. Zero dependencies, ~800 bytes min+gzip

Videos 📼

For french speakers AND pokemon lovers

• L'ALGO DERRIÈRE POKÉMON : décryptage du système de calcul des dégâts !

Podcasts, talks...🎙️

Join discussions on AI, Tesla Autopilot, and Tensorflow. Get home office tips, explore the PartyKit, and dive into View Transitions API. Enhance your knowledge and productivity with these insightful podcasts.We start with the Syntax buddies in 2 episodes.

• Syntax Podcast 679 - Creator of Swift, Tesla Autopilot & Tensorflow. New AI language Mojo with Chris Lattner

• Syntax Podcast 677 - Home Office Tips

Very good episode on how to move beyond the tutorial hell stage.

• General Musings E9 with Kevin Powell | When you don't know where to start

• JS Party #296 - Party on PartyKit with Sunil Pai

• JavaScript Jabber | View Transitions API with Noam Rosenthal - JSJ 602

• Front End Happy Hour | Online teaching courses - proof of knowledge

• Optimize For Happiness And Watch Your Productivity Skyrocket

The French corner 🇫🇷

• MACI épisode 91 | Depuis Anvers, le mistral emporte l’IA dans une java binaire

• 135 Grammes | Un Monde pour Tous

Pour les adeptes du no-code, 2 épisodes très cool à écouter

• Radio Contournement #113 : Jean-Michel Durocher, répondre aux besoins multiples d'une entreprise avec sa plateforme TimeTonic

• If This Then Dev #239 - Quand le no-code répond à la pénurie d'experts en ERP