Tech foutraque #6 - Your weekly frontend newsletter
Published: 2023-07-04 21:12:23

---
title: Tech foutraque #6 - Your weekly frontend newsletter
published: true
date: 2023-07-03 07:00:42 UTC
tags: 
canonical_url: https://techfoutraque.hashnode.dev/tech-foutraque-6
---


#### 🗞 Article of the week : [The massive bug at the heart of the npm ecosystem](https://blog.vlt.sh/blog/the-massive-hole-in-the-npm-ecosystem?utm_source=tech-foutraque&utm_campaign=6&utm_medium=emai)
******


### 🎨 Frontend

- [Introducing the MDN Playground: Bring your code to life! | MDN Blog](https://developer.mozilla.org/en-US/blog/introducing-the-mdn-playground/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Designing a Scalable Backend in Node.js](https://blog.appsignal.com/2023/06/07/designing-a-scalable-backend-in-nodejs.html?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Behind The Curtains Of Wikipedia Redesign Smashing Magazine](https://www.smashingmagazine.com/2023/06/behind-curtains-wikipedia-redesign?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Going beyond constants with custom properties](https://techhub.iodigital.com/articles/going-beyond-constants-with-custom-properties?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Position-Driven Styles](https://kizu.dev/position-driven-styles?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Routing and SEO Metadata in Next.js 13](https://www.builder.io/blog/routing-seo-metadata-nextjs-13/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Faking a :snapped selector with Scroll-Driven Animations](https://www.bram.us/2023/06/26/faking-a-snapped-selector-with-scroll-driven-animations/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Var, const, let... now using](https://www.youtube.com/watch?v=VqdVaix3Zvw&ab_channel=MattPocock)

- [Why doesn't TypeScript properly type Object.keys?](https://alexharri.com/blog/typescript-structural-typing?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [CSS: The Good Parts](https://www.builder.io/blog/css-the-good-parts?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

### ⚡ Debug & perf

- [Debugging Like a Competitive Programmer](https://albexl.substack.com/p/a-tale-of-debugging-the-competitive?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [To use a debugger or to add a print statement, thats the question!](https://medium.com/@guyhagemans/to-use-a-debugger-or-to-add-a-print-statement-thats-the-question-18811931ce84?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Useful DevTools Tips and Tricks Smashing Magazine](https://www.smashingmagazine.com/2023/06/popular-devtools-tips?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Do not write console logs yourself ever again](https://www.amitmerchant.com/do-not-write-console-logs-ever-again/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [ucliweb/webperf-snippets: 💾 Web Performance Snippet](https://github.com/nucliweb/webperf-snippets?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

### 📱 UX / UI

- [AI: The Next Chapter in Design | Figma Blog](https://www.figma.com/blog/ai-the-next-chapter-in-design/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Design Systems Resources: The best tools, platforms, Figma plugins...](https://thedesignsystem.guide/resources)

- [SVG Hub | Custom-color elements ready to paste into your project](https://svghub.vercel.app/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

### 🔋 Misc

- [IKEA-Oriented Development](https://taylor.town/ikea-oriented-development?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [How To Be An Engineer That PMs Dont Hate](https://staysaasy.com/engineering/2023/06/18/how-to-be-an-engineer-pms-down-hate.html?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Accountability for Effective Teams](https://jessitron.com/2023/06/21/accountability-for-effective-teams/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Estimation Isnt for Everyone. The Evolution of Agility in Software](https://open.nytimes.com/estimation-isnt-for-everyone-a72484f88b27?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Linking Modular Architecture to Development Teams](https://martinfowler.com/articles/linking-modular-arch.html?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [From Technical Debt to Technical Health with HealthCheck](https://mikaelvesavuori.medium.com/from-technical-debt-to-technical-health-with-healthcheck-3e7fdc132f58?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Contribute to Open Source:A Comprehensive Guide for Everyone](https://www.santoshyadav.dev/blog/contribute-open-source-comprehensive-guide/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [How to Stop Procrastinating Using the 70% Rule](https://taylorpearson.me/how-to-stop-procrastinating/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Failure - by Mike Fisher - Fish Food for Thought](https://mikefisher.substack.com/p/failure?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [How to Bypass Anti-Scraping Measures on Websites](https://javascript.plainenglish.io/common-anti-scraping-measures-on-websites-and-how-to-bypass-them-a32de1b066a2?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)


### 👾 Tutorials

- [How to make a QR code with Stable Diffusion - Stable Diffusion Art](https://stable-diffusion-art.com/qr-code/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Thinking in React Query | TkDodo's blog](https://tkdodo.eu/blog/thinking-in-react-query?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)


### 🔧 Tools

- [Announcing Nuxt Module @tresjs/nuxt 🎉](https://tresjs.org/blog/announcing-tres-nuxt-module.html?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Chalk.ist](http://chalk.ist)|[Create beautiful images of your source code](https://chalk.ist/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email) (like carbon)

- [Watch Transitions in Slow Motion in Chromes DevTools](https://blog.jim-nielsen.com/2023/slow-motion-animations-with-chrome-devtools/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [ChatALL: Concurrently chat with ChatGPT, Bing Chat, Bard and more](https://github.com/sunner/ChatALL?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Zero-config support for Tailwind, MUI, styled-components, and Emotion](https://storybook.js.org/blog/zero-config-support-for-tailwind-mui-styled-components-and-emotion/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Glyphs - Fully editable @ truly open source design system](https://glyphs.fyi/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

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

- [ColorpaletteAI](https://colorpalette-ai.com/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [ColourGPT](https://www.colourgpt.app/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

Some query builder:

- [gql-query-builder: Simple GraphQL Query Builder](https://github.com/atulmy/gql-query-builder?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [ts-sql-query: Type-safe SQL query builder](https://github.com/juanluispaz/ts-sql-query)


### 📼 Videos

We start with videos from the React Summit 2023:

- [Malte Ubl - Principles for Scaling Frontend Application Development, React Summit 2023](https://www.youtube.com/watch?v=tqhLK0Fb5_4&ab_channel=ReactConferencesbyGitNation)

- [Misko Hevery - Speeding Up Your React App With Less JavaScript, React Summit 2023](https://www.youtube.com/watch?v=IZ5gaAo08Pw&ab_channel=ReactConferencesbyGitNation)

Some videos about RSC:

- [React Server Components CHALLENGES!! - Server Actions and Client Components Without WebPack!](https://youtu.be/8aD58kGBJYc)

- [The Ultimate Guide to Server Actions in NextJs 13 with Error Handling & Validation Using Zod](https://www.youtube.com/watch?v=sdKFEo6978U&ab_channel=HamedBahram)

Interesting thought about chatGPT:

- [Why ChatGPT And Copilot Are bad For Developers](https://www.youtube.com/watch?v=T3cxUhptzaI&ab_channel=AnthonyGG)

And more...

- [Dcouverte de HTMX.org | Grafikart](https://grafikart.fr/tutoriels/htmx-2150/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email) 🇫🇷


### 🎙 Podcasts, talks...

- [Front End Happy Hour: Networking - Net-whiskey-ing](https://www.frontendhappyhour.com/episodes/networking-net-whiskey-ing/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [JS Party: Is print debugging good enough?](https://changelog.com/jsparty/281/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Top end devs: How to Build Peer-to-Peer Mobile and Desktop Apps with Socket Supply - JSJ 588](https://topenddevs.com/podcasts/javascript-jabber/episodes/how-to-build-peer-to-peer-mobile-and-desktop-apps-with-socket-supply-jsj-588/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Shop Talk Show: Searching vs AI, Getting Designers to Play Nice, and Web Components](https://shoptalkshow.com/571/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email)

- [Generation Do It Yourself #333 - Jeremy Jawish - Shift Technology - La licorne silencieuse qui lutte contre la fraude dans 25 pays](https://www.gdiy.fr/podcast/jeremy-jawish/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email) 🇫🇷

- [RDV Tech 519 Au revoir Skyblogs](https://frenchspin.fr/2023/06/rdv-tech-519-au-revoir-skyblogs/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email) 🇫🇷

- [AXOPEN: Faire de lcoconception sans tomber dans le greenwashing](https://soundcloud.com/axopen/faire-de-l-coconception-sans/?utm_source=tech-foutraque&utm_campaign=6&utm_medium=email) 🇫🇷

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