Best of Frontend | November issue
Tags: webdev, javascript, programming, react
Published: 2023-12-05 12:09:19

It's hard to sort through all the articles, news and videos on the Internet. With my newsletter, I try to bring you a selection of the best frontend and tech resources every week. It's sometimes still too much information for some people, so I'm going to start making a best of list of links from the past month.

You'll find a maximum of 3/4 links in each category. I'll let you know in the comments if you like the format!

***

## Frontend 🎨

- [**React Server Components**](https://jessedit.tech/articles/react-server-components/1-background/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)

- [**Writing Components That Work In Any Frontend Framework**](https://component-odyssey.com/articles/01-writing-components-that-work-in-any-framework?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [**Whats New with Angular v17?. Unveiling Angular 17: A Bold Leap**](https://blog.stackademic.com/whats-new-with-angular-v17-7b8058079baf?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [**Building modern Web Applications: 5 Essential Frontend Architecture Principles**](https://www.workingsoftware.dev/5-essential-frontend-architecture-principles/)

- [**CSS Nesting**](https://ishadeed.com/article/css-nesting?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email) by [**Ahmad Shadeed**](https://twitter.com/shadeed9). Great explanations as usual.

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701018072699/d262d4b3-24fd-47f4-a47c-cd0ce6c4694c.jpeg?auto=compress,format&format=webp)](https://ishadeed.com/article/css-nesting?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)

- [**An Interactive Guide to CSS Grid**](https://www.joshwcomeau.com/css/interactive-guide-to-grid/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)

## Web performances 

- [**Liquid vs headless: A look at real user web performance Performance @ Shopify**](https://performance.shopify.com/blogs/blog/liquid-vs-headless-a-look-at-real-user-web-performance?utm_source=tech-foutraque&utm_campaign=22&utm_medium=email)

- [**Learn Performance |**](https://web.dev/learn/performance?utm_source=tech-foutraque&utm_campaign=22&utm_medium=email) [**web.dev**](https://performance.shopify.com/blogs/blog/liquid-vs-headless-a-look-at-real-user-web-performance?utm_source=tech-foutraque&utm_campaign=22&utm_medium=email) A good introduction if you're new to the subject of web performance

- [**Chromium Blog:**](https://blog.chromium.org/2023/11/how-core-web-vitals-saved-users-10000.html?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email) How Core Web Vitals saved users 10,000 years of waiting for web pages to load

- [**Vue.js Parallel Fetching improves LCP and FCP**](https://medium.com/@m.kiselyow/vue-js-parallel-fetching-improves-lcp-and-fcp-289f0898badc?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)

## UX / UI📱

🤩 If you find this article useful and satisfying, please support us by [subscribing](https://techfoutraque.hashnode.dev/newsletter) to our newsletter and sharing it with others! Thank you.

- [**AI as a UX Assistant**](https://www.nngroup.com/articles/ai-roles-ux/)

- The UI is absolutely mindblowing!!! => [**2023 UX Research Tools Map | User Interviews**](https://www.userinterviews.com/ux-research-tools-map-2023?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [**Figma plugin API: diving into advanced algorithms & data structuresMartian Chronicles, Evil Martians team blog**](https://evilmartians.com/chronicles/figma-plugin-api-dive-into-advanced-algorithms-and-data-structures?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700430573850/a99b0211-9acf-4391-a132-a1b5e691422c.jpeg?auto=compress,format&format=webp)](https://evilmartians.com/chronicles/figma-plugin-api-dive-into-advanced-algorithms-and-data-structures?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

### Work, productivity 📇

- [**Organize Your Week as an Engineering Manager**](https://hybridhacker.email/p/your-week-as-an-engineering-manager?utm_source=tech-foutraque&utm_campaign=22&utm_medium=email)

- [**Tests Are Bad For Developers**](https://www.amazingcto.com/tests-are-bad-for-developers/) There are other articles to discover that I recommend. You can also subscribe to the newsletter.

- [**10 hard-to-swallow truths they won't tell you about software engineer job**](https://www.mensurdurakovic.com/hard-to-swallow-truths-they-wont-tell-you-about-software-engineer-job/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [**The story about rice that made me understand great leadership**](https://blog.crisp.se/2023/10/30/tomasbjorkholm/the-story-that-made-me-understand-great-leadership?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

### Misc🔋

- [**Here's a timeline of the OpenAI saga with CEO Sam Altman**](https://mashable.com/article/sam-altman-fired-openai-ceo?utm_source=substack&utm_medium=email)

- [**Data engineering at Meta: High-Level Overview of the internal tech stack**](https://medium.com/@AnalyticsAtMeta/data-engineering-at-meta-high-level-overview-of-the-internal-tech-stack-a200460a44fe?utm_source=tech-foutraque&utm_campaign=22&utm_medium=email)

- [**15-150: Principles of Functional Programming**](https://brandonspark.github.io/150/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)

- [**URL explained - The Fundamentals**](https://ittavern.com/url-explained-the-fundamentals/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) There's always something to discover with articles like this! Take this opportunity to review the basics

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700431386410/eb3dac0e-168e-49c1-b764-23fa83c8650e.png?auto=compress,format&format=webp)

- [**The Web Can Do What!?**](https://thewebshowcase.withgoogle.com/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

### Tutorials 💻

- [**Vite - Modern JavaScript Bundler**](https://youtu.be/9oqu9134U8Q?si=ZTxskV-tKsbLb12V)

- [**Building a progressive web app in Remix with Remix PWA**](https://blog.logrocket.com/building-remix-pwa/)

- [**Build and Deploy an Amazing 3D Developer Portfolio in React with Three.js**](https://youtu.be/FkowOdMjvYo?si=aQmPNy6B-p-rSYPo) If you want to create a stylish portfolio, this is the tutorial for you

### Tools & ressources 🔧

- [**Pokmon Cards CSS Holographic Effect**](https://poke-holo.simey.me/) It's too beautiful, I'm speechless

- [**System-design-primer**](https://github.com/donnemartin/system-design-primer?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email): Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards`

- Awesome tool!!! [**Ribbon Shapes**](https://css-generators.com/ribbon-shapes/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) - Get a **CSS-only** Ribbon Shape made with a **single-element** and customizable using **CSS variables**

    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701614633226/4b6ce01c-302a-4c9f-a2de-d07ab8ac8553.avif)

- [**Grep.app**](https://grep.app/) : Search across a half million git repos

### Videos 📼

- [**Next.js Conf 2023 Introducing Next.js 14**](https://www.youtube.com/playlist?list=PLBnKlKpPeagl57K9bCw_IXShWQXePnXjY)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701614717810/9536017e-44dd-44e7-ba6b-e9bdc512bd59.jpeg)

- [**JetBrains JavaScript Day 2023**](https://www.youtube.com/playlist?list=PLQ176FUIyIUZmRHOyz_n9iy2qfHo4_GRT)

- [**Josh Comeau Secret Mechanisms of CSS**](https://www.youtube.com/watch?v=Xt1Cw4qM3Ec&ab_channel=9elements)

- [**Nathan Barry: Turning $1,000 in $320 Million**](https://www.youtube.com/watch?v=ArZ-wCFsMwE&ab_channel=CallumMcDonnell)

### Podcasts, talks...🎙

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

- [**Leveraging CSS, Web Design, and Gaming UI with Adam Argyle**](https://whiskeywebandwhatnot.fm/leveraging-css-web-design-and-gaming-ui-with-adam-argyle?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)

- [**The Art of Concentration: Mastering Mindfulness for Peak Performance**](https://www.asianefficiency.com/podcasts/482w-attention-management/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [**Asian Efficiency**](https://www.asianefficiency.com/podcasts/481w-adversity/) - From Setbacks to Success: Reclaiming Productivity in the Face of Adversity

- [**Double Slash //74 - Les News Web Dev pour Novembre 2023**](https://double-slash.dev/podcasts/newsnov23/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) **(French)**

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700430408493/e0a6301b-17b7-407c-8340-0c4292f815db.png?auto=compress,format&format=webp)](https://double-slash.dev/podcasts/newsnov23/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

*** 

💌 If you like this article, don't hesitate to subscribe, to share it and support us! 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.