TF #15 | Your weekly frontend digest

Bun, the new JavaScript runtime engine, made quite a splash in the developer world this week with the release of its v1, so you'll find quite a few articles on it.
Don't worry, we still have plenty of other frontend resources to share with you!
We're also on twitter/X and BlueSky. Don't hesitate to follow us, as we'll be sharing lots of sneak previews.

🎨 Frontend

• Server-Side Rendering (SSR) with Bun and React

• How Custom Property Values are Computed

• Revealing Images With CSS Mask Animations

• A new method to validate URLs in JavaScript

• How <Suspense/> and Components Streaming works in Next.js

• Parents & Owners in React: Data Flow

• A Guide to React Portals

• Web Components Accessibility FAQ

• Front Matter CMS - a bit different approach to content management

⚡ Web performances

• Stop Lazy Loading Product and Hero Images

📱 UX / UI

• Adobe’s Firefly generative AI tools are now generally available

• Redesigning Design Systems - Redesigning Design Systems

• Improving responsive data table UX with CSS

• The psychology behind highly effective landing pages

📇 Management, organisation

• 7 simple habits of the top 1% of engineers

• TBM 240: The Ultimate Guide to Developer Counter-Productivity

• The Silent Killer of Your Operating Practice: Fear

• How to pass the interview for software engineering roles in Big Tech

• Stop saying “fail”

📂 Miscellaneous

• The Tyranny of the Marginal User

• 37signals Dev — Minding the small stuff in pull request reviews

💻 Tutorials

• “Can it be done in React Native?” - Telegram Dark Mode

• Role-based Authentication in NextJs 13 using NextAuth

• 2hrs to code Mario with Auth + save scores

⚙ Tools & ressources

• Radix Vue | Unstyled, accessible components for building high‑quality design systems and web apps in Vue

• Shadcn/vue - Shadcn for Vue

• Vite-react-boilerplate: A production ready, scalable starter template for Vite + React

• React-plock: The 1kB Masonry Grid for React.

• SVGOMG - SVGO's Missing GUI

• Utopia | Fluid Responsive Design

• Qr-code: A no-framework, no-dependencies, customizable, animate-able, SVG-based HTML element.

• CSS HD Gradients create beautiful, complex gradient in minute

• Unpic-placeholder: Pure-CSS image placeholders

• Scroll-Driven Animations Debugger (DevTools Extension) – Bram.us

• un-static | Hassle free contact forms on your site

🔗 SEO

• User Behavior and SEO: A Deep Dive

📼 Videos

• Bun is disrupting JavaScript land

• My thoughts on Bune

• What CSS is Chris Coyier bad at?

• Accessibility for designers, with Stéphanie Walter

🎙 Podcasts, talks...

• The Knowledge Project Ep. 175 - Shreyas Doshi: Better Teams, Better Products

• Syntax.fm #666 | Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button

• JS Party #292 - Type War (what is it good for?)

• JavaScript Jabber 598 | Exploring the True Measure of User Experience: Core Web Vitals & Beyond

• Stop Reacting, Start Acting: How 30 Minutes Can Transform Your Productivity - Asian Efficiency

For french speakers :

• Message à caractère informatique - L’Europe légifère avec des chips pour fiabiliser les métriques de son Skyblo

• If This Then Dev - Sécuriser la donnée : Sécuriser le contenu plutôt que le contenant

• Front-End Chronicles #18 - De JSLint à ESLint, l'évolution des principaux linters JavaScript