TF #19 | Weekly Frontend digest
Tags: webdev, javascript, programming, react
Published: 2023-10-16 18:46:23

📬 Don't hesitate to subscribe to our [**newsletter**](https://tinyurl.com/mpfsubep) so you don't miss a thing!
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.

* * *

🗞 **Article of the week:** [UX Vocabulary Inflation](https://jakobnielsenphd.substack.com/p/ux-vocabulary-inflation?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email) by Jakob Nielsen. For once, I'm going to write an article on the UX that I found very relevant! It goes beyond the simple realm of UX. The [Nielsen Norman Group](https://www.nngroup.com/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email) website is a true goldmine.

* * *

### **Frontend** 🎨

Misc articles

- [Angular, Qwik Creator on How JS Frameworks Handle Reactivity - The New Stack](https://thenewstack.io/angular-qwik-creator-on-how-js-frameworks-handle-reactivity/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [A comprehensive guide to the dangers of Regular Expressions in JavaScript | Sonar](https://www.sonarsource.com/blog/vulnerable-regular-expressions-javascript/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)[Why Next.js is the Full-Stack Framework for Modern Websites](https://www.felixvemmer.com/blog/why-next-js/)

- [Speeding up the JavaScript ecosystem - The barrel file debacle](https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [The Hidden Performance Cost of NodeJS and GraphQL](https://www.softwareatscale.dev/p/the-hidden-performance-cost-of-nodejs?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [Where to put text so it doesn't overlap in the new X (Twitter)](https://polypane.app/blog/where-to-put-text-so-it-doesnt-overlap-in-the-new-x-twitter-preview/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [Sharing State with Islands Architecture | Frontend at Scale](https://frontendatscale.com/blog/islands-architecture-state/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

CSS articles

- [An Anchored Navbar Solution Erics Archived Thoughts](https://meyerweb.com/eric/thoughts/2023/10/05/an-anchored-navbar-solution/)

- [The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()](https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/)

- [5 best practices for preventing chaos in Tailwind CSS](https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-css?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [When to Nest CSS](https://cloudfour.com/thinks/when-to-nest-css/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

VueJS articles

- [Vue 3 Vapor Mode News](https://icarusgk.hashnode.dev/vue-3-vapor-mode?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [Nuxt Studio, the pro version of Nuxt Content Nuxt Studio](https://nuxt.studio/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

ReactJS articles

- Great study case by Vercel on performance: [How we optimized package imports in Next.js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)

- [React Server Components](https://servercomponents.dev/)

- [Handling Query Parameters in Next.js 13 React Server Components](https://peterkellner.net//2023/09/29/handling-query-params-in-nextjs-13-react-server-components/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [Programmatic SEO in Next.js](https://practicalprogrammatic.com/blog/programmatic-seo-in-nextjs/)

### **Web performances** ⚡

- [Style Recalculation Secrets They Don't Want You To Know | CSS Day 2023](https://www.youtube.com/watch?v=WRiOWJZoKlw&ab_channel=WebConferencesAmsterdam)

- [CDNs: Speed Up Performance by Reducing Latency](https://austingil.com/file-uploads-cdn/)

### **UX / UI**📱

- [UX Vocabulary Inflation - Jakob Nielsen](https://jakobnielsenphd.substack.com/p/ux-vocabulary-inflation?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- Also great article from Nielson Norman Group: [Table of Contents: The Ultimate Design Guide](https://www.nngroup.com/articles/table-of-contents/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email) definitely one of the most underestimated components.

- [The secret formula for Apple's rounded corners](https://arun.is/blog/apple-rounded-corners/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- A fun article to discover: [AI vs Designer: Whos better at pairing fonts? | Better Web Type](https://betterwebtype.com/ai-vs-designer-whos-better-at-pairing-fonts/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [How to Design a Dashboard: Design Thinking for Dashboards](https://dataschool.com/how-to-design-a-dashboard/)

Some redesign to check from big tech companies!

- [Meet the new Webflow](https://webflow.com/blog/meet-the-new-webflow?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [Patreon - A new brand identity built for, and with, creators.](https://news.patreon.com/articles/patreon-redesigned?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

### **Management, productivity and organisation** 📇

Discover insights from industry leaders on boosting team performance. Explore principles, practices, and tools for effective communication and software engineering.

First 2 articles from [Leadev](http://leaddev.com) a great website to improve culture, skills and get insights from industry leaders

- [Boosting team performance as a tech lead | LeadDev](https://leaddev.com/team/boosting-team-performance-tech-lead?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [Generative AI is already impacting tech hiring | LeadDev](https://leaddev.com/team/generative-ai-already-impacting-tech-hiring?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- Very good list of books by Addy Osmani: [Soft skill books that will make you a better developer](https://dev.to/addyosmani/soft-skill-books-that-will-make-you-a-better-developer-2iea-temp-slug-215531)

- [How to communicate like a GitHub engineer: our principles, practices, and tools - The GitHub Blog](https://github.blog/2023-10-04-how-to-communicate-like-a-github-engineer-our-principles-practices-and-tools/)

- [The top 7 software engineering workflow tips I wish I knew earlier 🧰](https://careercutler.substack.com/p/the-top-7-software-engineering-workflow?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [Characteristics of Code Quality - by Abi Noda](https://newsletter.getdx.com/p/defining-code-quality?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [TBM 245: The Magic Prioritization Trick - by John Cutler](https://cutlefish.substack.com/p/tbm-245-the-magic-prioritization?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [Diving into Engineering Metrics - by Nicola Ballotta](https://hybridhacker.email/p/diving-into-engineering-metrics?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

### **Misc**🔋

The first resource is an excellent article on Unicode and a great site! 🕯 You should test the dark mode!

- [The Absolute Minimum Every Software Developer Must Know About Unicode in 2023 (Still No Excuses!)](https://tonsky.me/blog/unicode/?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [A student asked how I keep us innovative. I don't.](https://ntietz.com/blog/forefront-of-innovation/)

- [Git commit and commit message best practices](https://justinjoyce.dev/git-commit-and-commit-message-best-practices/)

- [Why HTTP/3 is eating the world](https://blog.apnic.net/2023/09/25/why-http-3-is-eating-the-world/)

- [How to Write a SaaS Homepage that Actually Converts](https://openviewpartners.com/blog/how-to-write-a-saas-homepage-that-actually-converts/)

- [Lessons From Debugging](https://matt-rickard.com/lessons-from-debugging?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

### **Tutorials** 💻

- [Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind](https://www.youtube.com/watch?v=0OaDyjB9Ib8&ab_channel=CodeWithAntonio) almost 8h of tutorials to learn the latest tech trends.

- [tRPC + NextJSApp Router = Simple Typesafe APIs](https://www.youtube.com/watch?v=qCLV0Iaq9zU&ab_channel=JackHerrington) great video to discover tRPC and typesafe concept by [Jack Herrington](https://twitter.com/jherr)

- [Write your own Zod](https://zackoverflow.dev/writing/write-your-own-zod?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email) and improve your typescript skills!

- [Bun Tutorial JavaScript Runtime (Node.js Alternative)](https://www.youtube.com/watch?v=eTB0UCDnMQo&ab_channel=freeCodeCamp.org) A beginner course to discover the latest trendy tool.

- [How to create and style lists with HTML and CSS](https://www.youtube.com/watch?v=bRYwmmLC_Ns&ab_channel=KevinPowell) Once again [Kevin Powell](https://twitter.com/KevinJPowell), the CSS GOAT, explains key concepts to us in a very simple and visual way.

### **Tools & ressources** 🔧

Discover a wide range of essential tools and resources for your development needs. From Chrome Extension TypeScript Starter to data visualization frameworks and super-fast YouTube embeds, this section is a treasure trove of resources to boost your productivity and enhance your projects.

- [chibat/chrome-extension-typescript-starter](https://github.com/chibat/chrome-extension-typescript-starter?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email): Chrome Extension TypeScript Starter

- [Semiotic](https://semiotic.nteract.io/) a data visualization framework for React.

- [paulirish/lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed): A faster youtube embed.

- [knadh/autocomp.js](https://github.com/knadh/autocomp.js?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email): A super tiny Javascript autocomplete / autosuggestions library. Zero dependencies, ~800 bytes min+gzip

### **Videos** 📼

For french speakers AND pokemon lovers

- [L'ALGO DÉRRIÈRE POKÉMON : décryptage du système de calcul des dégâts !](https://youtu.be/M7EB3sQhJZ0?si=9CrdjnVGqAQMH2DZ)

### **Podcasts, talks...**🎙

Join discussions on AI, Tesla Autopilot, and Tensorflow. Get home office tips, explore the PartyKit, and dive into View Transitions API. Enhance your knowledge and productivity with these insightful podcasts.We start with the Syntax buddies in 2 episodes.

- [Syntax Podcast 679 - Creator of Swift, Tesla Autopilot & Tensorflow. New AI language Mojo with Chris Lattner](https://syntax.fm/show/679/creator-of-swift-tesla-autopilot-and-tensorflow-new-ai-language-mojo-with-chris-lattner?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [Syntax Podcast 677 - Home Office Tips](https://syntax.fm/show/677/home-office-tips?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

Very good episode on how to move beyond the tutorial hell stage.

- [General Musings E9 with Kevin Powell | When you don't know where to star](https://zencastr.com/z/p3F2OZm5)t 

- [JS Party #296 - Party on PartyKit with Sunil Pai](https://changelog.com/jsparty/296?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [JavaScript Jabber | View Transitions API with Noam Rosenthal - JSJ 602](https://redcircle.com/shows/javascript-jabber/ep/a359545e-d37f-4202-bc9b-97ad2dd9995f?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [Front End Happy Hour | Online teaching courses - proof of knowledge](https://www.frontendhappyhour.com/episodes/online-teaching-courses-proof-of-knowledge/)

- [Optimize For Happiness And Watch Your Productivity Skyrocket](https://www.asianefficiency.com/podcasts/477w-optimize-happiness/)

The French corner 🇫🇷

- [MACI pisode 91](https://www.clever-cloud.com/podcast/depuis-anvers-le-mistral-emporte-lia-dans-une-java-binaire/) | Depuis Anvers, le mistral emporte lIA dans une java binaire

- [135 Grammes | Un Monde pour Tous](https://shows.acast.com/135-grammes/episodes/accessibilite-numerique-un-monde-pour-tous)

Pour les adeptes du no-code, 2 pisodes trs cool couter

- [Radio Contournement #113 : Jean-Michel Durocher, rpondre aux besoins multiples d'une entreprise avec sa plateforme TimeTonic](https://radio.contournement.io/episode/113-jean-michel-durocher-repondre-aux-besoins-multiples-dune-entreprise-avec-sa-plateforme-timetonic?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

- [If This Then Dev #239 - Quand le no-code rpond la pnurie d'experts en ERP](https://www.ifttd.io/episodes/erp-no-code?utm_source=tech-foutraque&utm_campaign=19&utm_medium=email)

* * * 

💌 **If you like this newsletter, don't hesitate to share it, to follow and subscribe ! Thank you**