TF #21 | Your weekly frontend digest

News 🗞

• Astro 3.4 is out and features support for page partials, a new experimental dev overlay, and more.

• Next.js 14 comes with stable server actions and turbopack improvements. There's also a new page for mastering new concepts.

Frontend 🎨

• ESLint - Deprecation of formatting rules

• How We Designed & Built a View Transition Demo

• Scroll-Driven State Transfer

• How to Sustain Quality and Velocity in a JavaScript or TypeScript Project?

Node.js

• ES Module imports in Node.js and the browser

• Best Practices for Securing Node.js Applications in Production

• The State of WebAssembly 2023

WebComponents

• Web Components Will Outlive Your JavaScript Framework

React.js

• The nine best recommendations in the new React docs

• Tao of React - Software Design, Architecture & Best Practices

• Why I Won't Use Next.js | Epic Web Dev by Kent C. Dodds

• Why I'm Using Next.js

Web performances ⚡

• The Three Cs: Concatenate, Compress, Cache – Harry Roberts

• Comment alléger son JavaScript (Fr)

UX / UI 📱

• Testing ChatGPT-4 for ‘UX Audits’ Shows an 80% Error Rate & 14–26% Discoverability Rate – Articles – Baymard Institute

• It's 2023, here is why your web design sucks

• Sheet, dialog, or snackbar — what should a designer go for?

• Clarify Your Thinking by Drawing Concept Maps

• Transition animations: a practical guide

• Design books for non-designers

• 2023 Design Collaboration Report

• Game+Logo, video game logos | Logo Design Love

Work, productivity 📇

• What McKinsey got wrong about developer productivity

• Becoming a good engineer is about collecting experience.

• Characterizing Software Developers by Perceptions of Productivity

• Private Estimates, Public Progress

• Developing leadership styles

• Balancing build vs buy decisions in a post-boom world

• Networking as an introvert CTO

• Hey designers, they’re gaslighting you

Misc 🗂️

• Why you should probably be using SQLite

• Automating dead code cleanup - Engineering at Meta

• Research: Quantifying GitHub Copilot’s impact on code quality - The GitHub Blog

• Principles for sharing on the Internet

• What Every Developer Should Know About GPU Computing

• Meta reveals their serverless platform processing trillions of function calls a day

• Naming things needn’t be hard - Classnames

Tutorials 💻

• Hosting Frontend Apps with AWS Amplify

• Changing Colors in an SVG Element Using CSS and JavaScript

• How To Animate Along A Path In CSS

• Let's create a filter table component in Vue

• Nuxt Modules Crash Course

Tools & resources 🔧

Tools

• Wireit: upgrades your npm/pnpm/yarn scripts to make them smarter and more efficient

• Npm-publish: GitHub Action to publish to NPM

• TailwindMate Experience Effortless Color Conversion for Tailwind with TailwindMate

• tw2panda Easily migrate code from tailwind to Panda CSS (his github is goldmine)

• OKLCH Color Picker & Converter Useful color picker and converter for OKLCH and LCH color space.

• CSS Selectors/Combinators Classifier visualize and understand CSS rules

• Gradient Designer Great tool to create and export gradient with many options.

• Unpic-placeholder: Pure-CSS image placeholders

• Code-Forge-Net/Remix-Dev-Tools: Remix.run Development tools to get your app out there in blazing speed

• Vectorpea | Online Vector Editor, same as Photopea with photoshop but for Illustrator

• @NativeScript-Use/Vue Collection of NativeScript-Vue3 Composition Utilities

Resources

• Svelte by Example succinct, gentle introduction to Svelte & SvelteKit to peak your curiosity

• System-design-101: Explain complex systems using visuals and simple terms. Help you prepare for system design interviews.

Videos 📼

• Next.js Conf 2023 | It's hard to miss, but if you're motivated, here's the almost 4-hour video on the conference.

• Nuxt Nation 2023: discover the many talks and interviews from the Nuxt Nation in this playlist

• How to make your Node.js API 5x faster! - YouTube

• The Economics of Programming Languages by Evan Czaplicki (Strange Loop 2023)

• React Advanced London 2023 Live stream of React Advanced Conference – Day 1 by Jack Herrington (9h+)

Podcasts, talks 🎙️

• Syntax #685 | Jason Lengstorf on Live Streaming, Creating Content, and Building a Studio Space

• JavaScript Jabber JSJ 604 - What has Changed with htmx 2.0 with Carson Gross

• JS Party #298 |> Changelog I wanna React Jam it with you featuring Jason McLeod & Gustavo Vituri

• ShopTalk 588: Elliot Marquez on Web Components and Lit

• Whiskey Web and Whatnot e114 - Privacy, Cyber Crime Stories, and Tech with Jack Rhysider

Productivity

• Developer Tea :: Spend Your Time Intentionally Through Expectation Mapping

• Unlocking the 80% Rule: The Japanese Secret to Balanced Productivity

🇫🇷 The French corner

• Tech.Rocks - #S05EP28 : Quand la tech et le produit ne font qu'un

• L'Oracle s'ouvre et lance des requêtes encryptées pour déjouer les DDoS | Clever Cloud

• Tech Café Tout nouveau, tout robot

• IFTTD #241 - Gestion de la connaissance : Comment faire circuler la bonne information avec William Bartlett

Fun 🕹️

• HTML Tags Memory Test A minimal codePen to test your knowledge! what will be your score?