TF #25 | Your weekly frontend digest
Tags: webdev, javascript, programming, react
Published: 2023-11-27 08:56:01

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

---

🗞 Article/news of the week : Lost in the OpenAi VS Sam Altman drama? Here's a day-by-day rundown of the affair to help you make sense of it all! Read the article: <a target="_blank" rel="noopener noreferrer nofollow" href="https://mashable.com/article/sam-altman-fired-openai-ceo?utm_source=substack&amp;utm_medium=email" style="pointer-events: none"><strong>Here's a timeline of the OpenAI saga with CEO Sam Altman</strong></a> or watch Fireship's summary here: <a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/4Ff2ZrhVkp0?si=bZHP3r0OWWBmhEv2" style="pointer-events: none"><strong>The truth about the OpenAI drama</strong></a>

---

### Frontend 🎨

Announcements

* [Announcing TypeScript 5.3](https://devblogs.microsoft.com/typescript/announcing-typescript-5-3/)
    
* [State of JavaScript 2023](https://survey.devographics.com/en-US/survey/state-of-js/2023?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)

    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701025561994/79ee7a42-f3dd-44e0-b673-79a53195d638.png)](https://survey.devographics.com/en-US/survey/state-of-js/2023?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

CSS

* [Width and Height in CSS](https://blog.jim-nielsen.com/2023/width-and-height-in-css/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email) It's always good to understand how these 2 more complex CSS attributes work.
    
* [The New CSS Math: rem() and mod()](https://danielcwilson.com/posts/mathematicss-rem-mod/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Getting started with CSS container queries | MDN Blog](https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/) If you haven't yet seen how it works, this article is for you!
    
* [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)](https://ishadeed.com/article/css-nesting?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

React/Next.js

* [React Server Components](https://jessedit.tech/articles/react-server-components/1-background/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Combining AI with React for a Smarter Frontend - The New Stack](https://thenewstack.io/combining-ai-with-react-for-a-smarter-frontend/)
    
* [Pierre's Next.js Cache Strategy](https://pierre.co/share/fe34c8b7-4054-4e07-b108-c6c8230cfab1?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Building towards a new default rendering model for web applications – Vercel](https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Dynamic Routes Recipes from Next.js App Router](https://javascript.plainenglish.io/dynamic-routes-recipes-from-next-js-app-router-2b15fe98ea09?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Testing against every Next.js canary release](https://francoisbest.com/posts/2023/testing-against-every-nextjs-canary-release?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

Angular

* [Component-Store in Angular: Component Level State Management with a Practical Approach](https://blog.stackademic.com/component-store-in-angular-component-level-state-management-with-a-practical-approach-bfcda0ed30e4?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Angular Interceptors Unleashed: Solving Complex Scenarios with Ease](https://blog.stackademic.com/angular-interceptors-unleashed-solving-complex-scenarios-with-ease-b1108fb1846e)
    

WebComponents

* [“Shadow dom is not a good default” • Buttondown](https://buttondown.email/cascade/archive/006-shadow-dom-is-not-a-good-default/)
    
* [HTML Web Components are Just JavaScript?](https://www.oddbird.net/2023/11/17/components/)
    
* [An Attempted Taxonomy of Web Components](https://www.zachleat.com/web/a-taxonomy-of-web-component-types/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Step into the light (DOM)](https://aaadaaam.com/notes/step-into-the-light-dom/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

Misc

* [How Qwik’s Astro Integration Beats Both React and Vanilla JS](https://thenewstack.io/how-quiks-astro-integration-beats-both-react-and-vanilla-js/)
    
* [The Tension and Future of Jamstack](https://www.zachleat.com/web/jamstack-future/?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)
    
* [Is Elegant JavaScript Always Performant? Concise vs. Fast Code Explained](https://javascript.plainenglish.io/is-elegant-javascript-always-performant-concise-vs-fast-code-explained-da90b766f13b?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

Three.js

* [Jesse’s Ramen: 3D Portfolio Case Study](https://jesse-zhou.medium.com/jesses-ramen-case-study-77bae77ab5f0)
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701017281898/445c1fa0-e04d-47d9-8c07-8beff7f10a91.jpeg)](https://jesse-zhou.medium.com/jesses-ramen-case-study-77bae77ab5f0)
    

### Web performances⚡

* [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)
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701018004082/7dd3b2b0-4f13-48e8-b764-046879979246.png)](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📱

* [Zara: The billion dollar missed opportunity](https://builtformars.com/case-studies/zara?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [How to create a color palette for design systems](https://imperavi.com/blog/how-to-create-a-color-palette-for-design-systems/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Why are Western apps more minimalistic than Asian apps?](https://uxdesign.cc/why-are-western-apps-more-minimalistic-than-asian-apps-5ff39292f170?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [The Magic of Details: How UX Microinteractions Transform Products](https://dribbble.com/stories/2023/11/14/the-magic-of-details-how-ux-microinteractions-transform-products?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

---

🤩 If you find this newsletter useful and satisfying, please support us by <a target="_blank" rel="noopener noreferrer nofollow" href="https://techfoutraque.hashnode.dev/newsletter" style="pointer-events: none">subscribing</a> and sharing it with others! Thank you.

---


### Work, productivity 📇

* [The Bluffer’s Guide to The Mythical Man-Month](https://codemanship.wordpress.com/2023/11/20/the-bluffers-guide-to-the-mythical-man-month/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [How to Boss Without Being Bossy](https://www.jeffwofford.com/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Your Small Imprecise Ask Is a Big Waste of Their Time](https://staysaasy.com/startups/2023/11/10/imprecise-asks.html?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [In-Depth: How To Prevent High-Performing Teams From Burning Out](https://medium.com/the-liberators/in-depth-how-to-prevent-high-performing-teams-from-burning-out-409aa9896caa?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [How to Build Trust](https://jacobian.org/2023/nov/16/how-to-build-trust/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Johan Cruyff's influence on adaptive role switching in Product Design](https://uxdesign.cc/johan-cruyffs-influence-on-adaptive-role-switching-in-product-design-ee885f9af75d?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

### Misc🔋

* [15-150: Principles of Functional Programming](https://brandonspark.github.io/150/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Your Website’s URLs Can and Should Be Beautiful](https://opuszine.us/posts/your-websites-urls-can-should-be-beautiful?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [AI: The Coming Revolution](https://www.coatue.com/blog/perspective/ai-the-coming-revolution-2023?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [The Definitive Guide: Product Analytics for Product-Led Growth](https://openviewpartners.com/blog/the-definitive-guide-product-analytics-for-product-led-growth/)
    
* [Exploring V8's strings: implementation and optimizations](https://iliazeus.github.io/articles/js-string-optimizations-en/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [7 books that changed me the most as a software engineer](https://careercutler.substack.com/p/7-books-that-changed-me-the-most?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Navigating around in your shell](https://blog.meain.io/2023/navigating-around-in-shell/)
    
* [Taming Complexity with Reversibility](https://tidyfirst.substack.com/p/taming-complexity-with-reversibility?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

### Tutorials 💻

* [Building a progressive web app in Remix with Remix PWA](https://blog.logrocket.com/building-remix-pwa/)
    
* [Getting Started With Nuxt UI](https://www.youtube.com/watch?v=SE_ysS_ZXbk&ab_channel=JohnKomarnicki)
    
* [Vite - Modern JavaScript Bundler](https://youtu.be/9oqu9134U8Q?si=ZTxskV-tKsbLb12V)
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701018202592/829dff48-40f3-4ddc-a569-f2fa546149f4.jpeg)](https://youtu.be/9oqu9134U8Q?si=ZTxskV-tKsbLb12V)
    

### Tips ✨

💡 I started to share some <a target="_blank" rel="noopener noreferrer nofollow" href="https://techfoutraque.hashnode.dev/series/tips" style="pointer-events: none">tips</a> about web development and some tools. Take a look and upgrade your frontend skills and knowledge

### Tools & ressources 🔧

* [Vite 5.0 is out!](https://vitejs.dev/blog/announcing-vite5?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Reveal.js release 5.0.0](https://github.com/hakimel/reveal.js/releases/tag/5.0.0?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Prettier 3.1](https://prettier.io/blog/2023/11/13/3.1.0?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email): New experimental ternaries formatting and Angular control flow syntax!
    
* [Grep.app](https://grep.app/) : Search across a half million git repos
    
* [Fnm](https://github.com/Schniz/fnm): Fast and simple Node.js version manager, built in Rust
    
* [Browser-window](https://github.com/zachleat/browser-window?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email): Used in demos as a way to fake a Safari-esque web browser window.
    
* [Scroll-Driven Animations Debugger](https://chromewebstore.google.com/detail/scroll-driven-animations/ojihehfngalmpghicjgbfdmloiifhoce?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Colour Contrast Checker](https://colourcontrast.cc/)
    
* [React Scroll Parallax | React Scroll Parallax](https://react-scroll-parallax.damnthat.tv/docs/intro?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Hello from React Datasheet Grid | React Datasheet Grid](https://react-datasheet-grid.netlify.app/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [alexanderson1993/svg-icons-cli](https://github.com/alexanderson1993/svg-icons-cli?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Ark UI](https://ark-ui.com/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Vectorizer.AI - Trace Pixels To Vectors in Full Color, Fully Automatically, Using AI](https://vectorizer.ai/?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

### Videos 📼

* [Going Deep on Svelte 5 with Rich Harris](https://www.youtube.com/live/0ipZQUsPq9U?si=9jiIe6G32E1-xJFy)
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701025513776/1523d551-705a-4853-80b5-876e3cfa1e9b.jpeg)](https://www.youtube.com/live/0ipZQUsPq9U?si=9jiIe6G32E1-xJFy)
    
* [4 Web Devs, 1 App Idea](https://www.youtube.com/watch?v=b4HZpv61V1U&ab_channel=LearnWithJason) (Salma Alam-Naylor, Scott Tolinski, Eve Porcello). I really like the idea. Lot of fun!
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701017660651/a5d64a17-edca-40a5-a351-875749ff0597.jpeg)](https://www.youtube.com/watch?v=b4HZpv61V1U&ab_channel=LearnWithJason)
    
* [Josh Comeau – Secret Mechanisms of CSS](https://www.youtube.com/watch?v=Xt1Cw4qM3Ec&ab_channel=9elements)
    
* For French speakers: [**Présentation d'AdonisJS 6 - CodingTalk #3**](https://youtu.be/eLNg9yelCqw?si=e2PUoNgjUuh2iCUR) by [NeoElectron](https://twitter.com/Neolectron) and [Romain Lanz](https://twitter.com/romainlanz)
    

### Podcasts, talks...🎙️

> 🎧 Find our list of the best English and French podcasts <a target="_blank" rel="noopener noreferrer nofollow" href="https://tinyurl.com/2s4738fb" style="pointer-events: none"><strong>here</strong></a>

**Whiskey Web and Whatnot**

* [Learning Angular, Leadership Opportunities, and Google Culture with Sarah Drasner - Episode 117](https://whiskeywebandwhatnot.fm/learning-angular-leadership-opportunities-and-google-culture-with-sarah-drasner?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [Leveraging CSS, Web Design, and Gaming UI with Adam Argyle - Episode 118](https://whiskeywebandwhatnot.fm/leveraging-css-web-design-and-gaming-ui-with-adam-argyle?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

**Syntax.fm**

* [How to Build a Website or App](https://syntax.fm/show/696/how-to-build-a-website-or-app?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    
* [What is DevRel with Salma Alam-Naylor](https://syntax.fm/show/697/what-is-devrel-with-salma-alam-naylor?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

**Misc**

* [JavaScript Jabber - JSJ 608](https://redcircle.com/shows/javascript-jabber/ep/b000296a-edf8-476b-8c46-8113bbbe246b?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email) | Next-Level Web Performance with Patrick Meenan
    
* [JS Party #302](https://changelog.com/jsparty/302?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email) - What's new in CSS land featuring Una Kravets
    
* [ShopTalk 592](https://shoptalkshow.com/592/): Web Component Therapy, SEO Therapy, and Learning Something New like Swift
    
* [Asian Efficiency](https://www.asianefficiency.com/podcasts/483w-burnout/) - From Burnout to Balance: Reviving Your Energy and Focus
    

**The French corner**

* [Génération Do It Yourself - Éléonore Crespo - Pigment - La Française qui va remplacer Excel](https://www.gdiy.fr/business/eleonore-crespo/)
    
* [IFTTD #246 - Plans de carrière : Tracer sa route avec Nicolas Guerin](https://www.ifttd.io/episodes/plans-de-carriere?utm_source=tech-foutraque&utm_campaign=25&utm_medium=email)
    

### Fun 👾

This week, I've seen a lot of people on twitter talking about the tweet below and I must admit that the result is impressive, I'll let you judge and a little Video from Wes Bos who was obliged to test this for us! [This isn't websockets! fun multi-window demo](https://www.youtube.com/watch?v=3Hye_47c0Pc&ab_channel=WesBos)


[![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4he1en7nzw8untdu6ecl.png)](https://twitter.com/_nonfigurativ_/status/1727657155409363120)

---

💌 If you like this newsletter, don't hesitate to subscribe, to share it and support us! We are also on <a target="_blank" rel="noopener noreferrer nofollow" href="https://twitter.com/tech_foutraque" style="pointer-events: none"><strong>Twitter/X</strong></a> and <a target="_blank" rel="noopener noreferrer nofollow" href="https://bsky.app/profile/tech-foutraque.bsky.social" style="pointer-events: none"><strong>BlueSky</strong></a>, come and say Hello! We share content throughout the week in advance! Thank you!