Tech foutraque #6 - Your weekly frontend newsletter

🗞 Article of the week : The massive bug at the heart of the npm ecosystem

---

🎨 Frontend

• Introducing the MDN Playground: Bring your code to life! | MDN Blog

• Designing a Scalable Backend in Node.js

• Behind The Curtains Of Wikipedia Redesign Smashing Magazine

• Going beyond constants with custom properties

• Position-Driven Styles

• Routing and SEO Metadata in Next.js 13

• Faking a :snapped selector with Scroll-Driven Animations

• Var, const, let... now using

• Why doesn't TypeScript properly type Object.keys?

• CSS: The Good Parts

⚡ Debug & perf

• Debugging Like a Competitive Programmer

• To use a debugger or to add a print statement, thats the question!

• Useful DevTools Tips and Tricks Smashing Magazine

• Do not write console logs yourself ever again

• ucliweb/webperf-snippets: 💾 Web Performance Snippet

📱 UX / UI

• AI: The Next Chapter in Design | Figma Blog

• Design Systems Resources: The best tools, platforms, Figma plugins...

• SVG Hub | Custom-color elements ready to paste into your project

🔋 Misc

• IKEA-Oriented Development

• How To Be An Engineer That PMs Dont Hate

• Accountability for Effective Teams

• Estimation Isnt for Everyone. The Evolution of Agility in Software

• Linking Modular Architecture to Development Teams

• From Technical Debt to Technical Health with HealthCheck

• Contribute to Open Source:A Comprehensive Guide for Everyone

• How to Stop Procrastinating Using the 70% Rule

• Failure - by Mike Fisher - Fish Food for Thought

• How to Bypass Anti-Scraping Measures on Websites

👾 Tutorials

• How to make a QR code with Stable Diffusion - Stable Diffusion Art

• Thinking in React Query | TkDodo's blog

🔧 Tools

• Announcing Nuxt Module @tresjs/nuxt 🎉

• Chalk.ist|Create beautiful images of your source code (like carbon)

• Watch Transitions in Slow Motion in Chromes DevTools

• ChatALL: Concurrently chat with ChatGPT, Bing Chat, Bard and more

• Zero-config support for Tailwind, MUI, styled-components, and Emotion

• Glyphs - Fully editable @ truly open source design system

Create color palette 🎨 in second with this two app (First one is better)

• ColorpaletteAI

• ColourGPT

Some query builder:

• gql-query-builder: Simple GraphQL Query Builder

• ts-sql-query: Type-safe SQL query builder

📼 Videos

We start with videos from the React Summit 2023:

• Malte Ubl - Principles for Scaling Frontend Application Development, React Summit 2023

• Misko Hevery - Speeding Up Your React App With Less JavaScript, React Summit 2023

Some videos about RSC:

• React Server Components CHALLENGES!! - Server Actions and Client Components Without WebPack!

• The Ultimate Guide to Server Actions in NextJs 13 with Error Handling & Validation Using Zod

Interesting thought about chatGPT:

• Why ChatGPT And Copilot Are bad For Developers

And more...

• Dcouverte de HTMX.org | Grafikart 🇫🇷

🎙 Podcasts, talks...

• Front End Happy Hour: Networking - Net-whiskey-ing

• JS Party: Is print debugging good enough?

• Top end devs: How to Build Peer-to-Peer Mobile and Desktop Apps with Socket Supply - JSJ 588

• Shop Talk Show: Searching vs AI, Getting Designers to Play Nice, and Web Components

• Generation Do It Yourself #333 - Jeremy Jawish - Shift Technology - La licorne silencieuse qui lutte contre la fraude dans 25 pays 🇫🇷

• RDV Tech 519 Au revoir Skyblogs 🇫🇷

• AXOPEN: Faire de lcoconception sans tomber dans le greenwashing 🇫🇷

---

💌 Don't hesitate to share it with others if you like it