TF #21 | Your weekly frontend digest
Tags: webdev, javascript, programming, react
Published: 2023-10-30 07:31:31

🗞 Article of the week : [Why I Won't Use Next.js](https://www.epicweb.dev/why-i-wont-use-nextjs?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) by Kent C. Dodds. He shares his opinion with pertinent arguments. And it's a different point of view, not necessarily popular but honest. Lee Robinson, who works on NextJS, replied in this article: [Why I'm Using Next.js](https://leerob.io/blog/using-nextjs)

***

### News 🗞

- [Astro 3.4](https://astro.build/blog/astro-340/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) is out and features support for page partials, a new experimental dev overlay, and more.

- [Next.js 14](https://nextjs.org/blog/next-14?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) comes with stable server actions and turbopack improvements. There's also a new page for mastering new concepts.

*** 

### Frontend 🎨

- [ESLint - Deprecation of formatting rules](https://eslint.org/blog/2023/10/deprecating-formatting-rules/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [How We Designed & Built a View Transition Demo](https://www.viget.com/articles/how-we-designed-and-built-a-view-transition-demo/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Scroll-Driven State Transfer](https://kizu.dev/scroll-driven-state-transfer/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [How to Sustain Quality and Velocity in a JavaScript or TypeScript Project?](https://www.infoq.com/articles/javascript-typescript-quality-velocity/)

Node.js

- [ES Module imports in Node.js and the browser](https://eli.thegreenplace.net/2023/es-module-imports-in-nodejs-and-the-browser/)

- [Best Practices for Securing Node.js Applications in Production](https://semaphoreci.com/blog/securing-nodejs?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [The State of WebAssembly 2023](https://blog.scottlogic.com/2023/10/18/the-state-of-webassembly-2023.html?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

WebComponents

- [Web Components Will Outlive Your JavaScript Framework](https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/)

React.js

- [The nine best recommendations in the new React docs](https://dev.to/cathycolliver/the-nine-best-recommendations-in-the-new-react-docs-18-temp-slug-426161)

- [Tao of React - Software Design, Architecture & Best Practices](https://dev.to/alexkondov/tao-of-react-software-design-architecture-best-practices-3ad3-temp-slug-4135396)

- [Why I Won't Use Next.js | Epic Web Dev by Kent C. Dodds](https://www.epicweb.dev/why-i-wont-use-nextjs?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Why I'm Using Next.js](https://leerob.io/blog/using-nextjs)

### Web performances 

- [The Three Cs: Concatenate, Compress, Cache Harry Roberts](https://csswizardry.com/2023/10/the-three-c-concatenate-compress-cache/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Comment allger son JavaScript (Fr)](https://www.julienpradet.fr/tutoriels/comment-alleger-son-javascript/)

### UX / UI 📱

- [Testing ChatGPT-4 for UX Audits Shows an 80% Error Rate & 1426% Discoverability Rate Articles Baymard Institute](https://baymard.com/blog/gpt-ux-audit?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [It's 2023, here is why your web design sucks](https://heather-buchel.com/blog/2023/10/why-your-web-design-sucks/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Sheet, dialog, or snackbar what should a designer go for?](https://uxdesign.cc/sheet-dialog-or-snackbar-what-should-a-designer-go-for-65af3a0b4aeb?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Clarify Your Thinking by Drawing Concept Maps](https://jarango.com/2023/10/16/clarify-your-thinking-by-drawing-concept-maps/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Transition animations: a practical guide](https://uxdesign.cc/transition-animations-a-practical-guide-5dba4d42f659?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Design books for non-designers](https://www.stripe.press/recommended/design-books.html?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [2023 Design Collaboration Report](https://readymag.com/readymag/design-collaboration-report/role/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Game+Logo, video game logos | Logo Design Love](https://www.logodesignlove.com/video-game-logos?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

### Work, productivity 📇

- [What McKinsey got wrong about developer productivity](https://leaddev.com/process/what-mckinsey-got-wrong-about-developer-productivity?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Becoming a good engineer is about collecting experience.](https://dev.to/addyosmani/becoming-a-good-engineer-is-about-collecting-experience-1e2o-temp-slug-5961979)

- [Characterizing Software Developers by Perceptions of Productivity](https://newsletter.getdx.com/p/developers-ideal-workdays?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Private Estimates, Public Progress](https://tidyfirst.substack.com/p/private-estimates-public-progress?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Developing leadership styles](https://lethain.com/developing-leadership-styles/)

- [Balancing build vs buy decisions in a post-boom world](https://leaddev.com/tech/balancing-build-vs-buy-decisions-post-boom-world?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Networking as an introvert CTO](https://vadimkravcenko.com/shorts/networking-introvert-cto/)

- [Hey designers, theyre gaslighting you](https://medium.com/nice-work-from-active-voice/hey-designers-theyre-gaslighting-you-e02e5a4d9cff?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

### Misc 🗂

- [Why you should probably be using SQLite](https://www.epicweb.dev/why-you-should-probably-be-using-sqlite)

- [Automating dead code cleanup - Engineering at Meta](https://engineering.fb.com/2023/10/24/data-infrastructure/automating-dead-code-cleanup/)

- [Research: Quantifying GitHub Copilots impact on code quality - The GitHub Blog](https://github.blog/2023-10-10-research-quantifying-github-copilots-impact-on-code-quality/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Principles for sharing on the Internet](https://sublimeinternet.substack.com/p/principles-for-sharing-on-the-internet?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [What Every Developer Should Know About GPU Computing](https://codeconfessions.substack.com/p/gpu-computing?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Meta reveals their serverless platform processing trillions of function calls a day](https://engineercodex.substack.com/p/meta-xfaas-serverless-functions-explained?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Naming things neednt be hard - Classnames](https://classnames.paulrobertlloyd.com/)

### Tutorials 💻

- [Hosting Frontend Apps with AWS Amplify](https://digitalcloud.training/how-to-host-frontend-apps-with-aws-amplify/)

- [Changing Colors in an SVG Element Using CSS and JavaScript](https://kirupa.com/web/changing_colors_svg_css_javascript.htm?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [How To Animate Along A Path In CSS](https://www.smashingmagazine.com/2023/10/animate-along-path-css/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Let's create a filter table component in Vue](https://www.youtube.com/watch?v=au27CwIFHzs&ab_channel=AndrewSchmelyun)

- [Nuxt Modules Crash Course](https://youtu.be/J6A3HzzXuMQ?si=LQC91TY4JiGdhDWC)

### Tools & resources 🔧

Tools

- [Wireit](https://github.com/google/wireit?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email): upgrades your npm/pnpm/yarn scripts to make them smarter and more efficient

- [Npm-publish](https://github.com/JS-DevTools/npm-publish?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email): GitHub Action to publish to NPM

- [TailwindMate](https://tailwindmate.jaleelbennett.com/) Experience Effortless Color Conversion for Tailwind with TailwindMate

- [tw2panda](https://github.com/astahmer/tw2panda) Easily migrate code from tailwind to Panda CSS (his github is goldmine)

- [OKLCH Color Picker & Converter](https://oklch.com/#70,0.1,134,100) Useful color picker and converter for OKLCH and LCH color space.

- [CSS Selectors/Combinators Classifier](https://selectors.info/) visualize and understand CSS rules

- [Gradient Designer](https://akx.github.io/gradient/) Great tool to create and export gradient with many options.

- [Unpic-placeholder: Pure-CSS image placeholders](https://github.com/ascorbic/unpic-placeholder?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

- [Code-Forge-Net/Remix-Dev-Tools](https://github.com/Code-Forge-Net/Remix-Dev-Tools?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email): Remix.run Development tools to get your app out there in blazing speed

- [Vectorpea](https://www.vectorpea.com/) | Online Vector Editor, same as Photopea with photoshop but for Illustrator

- [@NativeScript-Use/Vue](https://nativescriptuse-vue.netlify.app/?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) Collection of NativeScript-Vue3 Composition Utilities

Resources

- [Svelte by Example](https://sveltebyexample.com/) succinct, gentle introduction to Svelte & SvelteKit to peak your curiosity

- [System-design-101](https://github.com/ByteByteGoHq/system-design-101?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email): Explain complex systems using visuals and simple terms. Help you prepare for system design interviews.

### Videos 📼

- [Next.js Conf 2023](https://youtu.be/FdiX5rHS_0Y?si=NQlA-Iy-KNvmBZQT) | It's hard to miss, but if you're motivated, here's the almost 4-hour video on the conference.

- [Nuxt Nation 2023](https://www.youtube.com/playlist?list=PLxddmVXxb3HvV7NX9V9pvRHaPML73_Ti4): discover the many talks and interviews from the Nuxt Nation in this playlist

- [How to make your Node.js API 5x faster! - YouTube](https://www.youtube.com/watch?v=MxYtZ93hXyc&ab_channel=AdventuresinNodeland-MatteoCollina)

- [The Economics of Programming Languages by Evan Czaplicki (Strange Loop 2023)](https://www.youtube.com/watch?v=XZ3w_jec1v8&ab_channel=StrangeLoopConference)

- [React Advanced London 2023](https://www.youtube.com/watch?v=hn_L56ypX1A&t=5916s&ab_channel=JackHerrington) Live stream of React Advanced Conference Day 1 by Jack Herrington (9h+)

### Podcasts, talks 🎙

💡 Find our list of the best English and French podcasts [here](https://tinyurl.com/2s4738fb)

- [Syntax #685](https://syntax.fm/show/685/jason-lengstorf-on-live-streaming-creating-content-and-building-a-studio-space?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) | Jason Lengstorf on Live Streaming, Creating Content, and Building a Studio Space

- [JavaScript Jabber JSJ 604](https://redcircle.com/shows/javascript-jabber/ep/2e54c80f-9b04-4cd8-bc8d-b25fd356dd88?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) - What has Changed with htmx 2.0 with Carson Gross

- [JS Party #298 |> Changelog](https://changelog.com/jsparty/298?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) I wanna React Jam it with you featuring Jason McLeod & Gustavo Vituri

- [ShopTalk 588](https://shoptalkshow.com/588/): Elliot Marquez on Web Components and Lit

- [Whiskey Web and Whatnot e114](https://whiskeywebandwhatnot.fm/privacy-cyber-crime-stories-and-tech-with-jack-rhysider?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) - Privacy, Cyber Crime Stories, and Tech with Jack Rhysider

Productivity

- [Developer Tea](https://developertea.com/episodes/c5321091-717a-4506-b86e-d258638c6121?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) :: Spend Your Time Intentionally Through Expectation Mapping

- [Unlocking the 80% Rule: The Japanese Secret to Balanced Productivity](https://www.asianefficiency.com/podcasts/479w-japanese-secret-balanced-productivity/)

🇫🇷 The French corner

- [Tech.Rocks - #S05EP28](https://www.tech.rocks/podcasts/486a3f0e-9071-ee11-9937-000d3a4911c5/quand-la-tech-et-le-produit-ne-font-qu-un-adrien-blandin-lepermislibre-herve-lourdin-batch--s05ep28?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) : Quand la tech et le produit ne font qu'un

- [L'Oracle s'ouvre et lance des requtes encryptes pour djouer les DDoS | Clever Cloud](https://www.clever-cloud.com/podcast/loracle-souvre-et-lance-des-requetes-encryptees-pour-dejouer-les-ddos/)

- [Tech Caf Tout nouveau, tout robot](https://techcafe.fr/tout-nouveau-tout-robot/)

- [IFTTD #241 - Gestion de la connaissance : Comment faire circuler la bonne information avec William Bartlett](https://www.ifttd.io/episodes/gestion-de-la-connaissance?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email)

### Fun 🕹

- [HTML Tags Memory Test](https://codepen.io/plfstr/full/zYqQeRw?utm_source=tech-foutraque&utm_campaign=21&utm_medium=email) A minimal codePen to test your knowledge! what will be your score?

*** 

💌 If you like this newsletter, don't hesitate to share it. We are also on [**Twitter/X**](https://twitter.com/tech_foutraque) and [**BlueSky**](https://bsky.app/profile/tech-foutraque.bsky.social), come and say Hello! We share content throughout the week in advance.