TF #35 | Your weekly frontend digest
Tags: webdev, javascript, react, beginners
Published: 2024-03-04 08:44:57

🗞 Articles of the week : [Apple’s decision to drop iPhone web apps comes under scrutiny in the EU - The Verge](https://www.theverge.com/2024/2/26/24083511/apple-eu-investigation-web-app-support?utm_source=tech-foutraque&amp;utm_campaign=35&amp;utm_medium=email) and 
[Home Screen Advantage - Infrequently Noted](https://www.theverge.com/2024/2/26/24083511/apple-eu-investigation-web-app-support?utm_source=tech-foutraque&amp;utm_campaign=35&amp;utm_medium=email)

--- 

And the recent conclusion : [Apple reverses course on death of Progressive Web Apps in EU](https://appleinsider.com/articles/24/03/01/apple-reverses-course-on-death-of-progressive-web-apps-in-eu)

![](https://cdn.vox-cdn.com/thumbor/EEBmDh6emjqUa-wKnQI-JyZ-7lQ=/0x0:2040x1360/1200x628/filters:focal(1020x680:1021x681)/cdn.vox-cdn.com/uploads/chorus_asset/file/23598986/VRG_Illo_5258_K_Radtke_WWDC.jpg?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)

--- 

### Frontend 🎨

- [Using localStorage in Modern Applications - A Comprehensive Guide | RxDB - JavaScript Database](https://rxdb.info/articles/localstorage.html?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

CSS

- [CSS :has() Interactive Guide](https://ishadeed.com/article/css-has-guide?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)it's not just an interactive guide, it's an EPIC guide to understanding the whole concept
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709479646787/887b4153-863a-4007-a32a-96d3ee67548f.png)
    
- [View transitions: Handling aspect ratio changes - JakeArchibald.com](https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/)
    
- [Going beyond pixels and (r)ems in CSS - Container query length units - iO tech\_hub](https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/container-query-length-units?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

- [What is Utility-First CSS?: HeydonWorks](https://heydonworks.com/article/what-is-utility-first-css/)
    
- [Tailwind marketing and misinformation engine](https://nuejs.org/blog/tailwind-misinformation-engine/)
    
    ![](https://nuejs.org/img/tailwind-messaging-pillars.jpg?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Write CSS. Not too much. Mostly scoped. • Lee Reamsnyder](https://www.leereamsnyder.com/write-css-not-too-much-mostly-scoped?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
    ![](https://www.leereamsnyder.com/og-image-generator/write-css-not-too-much-mostly-scoped/og-image.jpg?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

Misc

- [Rendering emails with Svelte - Dmitry Kudryavtsev](https://www.yieldcode.blog/post/rendering-emails-with-svelte/?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [console.delight – Frontend Masters Boost](https://frontendmasters.com/blog/console-delight/?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [JavaScript Bloat in 2024 | tonsky.me](https://tonsky.me/blog/js-bloat/)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709479200382/4ff119e9-1f32-4170-8c76-f70b7d85634f.png)
    
- [Picture in Picture Cheat Sheet (iOS) – Tiago Lopes](https://tiagolopes.blog/2024/02/24/picture-in-picture-cheatsheet-ios/?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

React

- [React Will Be Compiled](https://reacttraining.com/blog/react-19-will-be-compiled?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [React Trends in 2024](https://www.robinwieruch.de/react-trends/?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Avoiding Hydration Mismatches with useSyncExternalStore | TkDodo's blog](https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
    ![](https://tkdodo.eu/blog/og-images/avoiding-hydration-mismatches-with-use-sync-external-store.png?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Exploring Next.js Forms with Server Actions](https://www.robinwieruch.de/next-forms/)
    

- [Instant Search Params with React Server Components](https://buildui.com/posts/instant-search-params-with-react-server-components?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Exploring Next.js Forms with Server Actions](https://www.robinwieruch.de/next-forms/)
    
- [Next.js vs. Remix - A Developer's Dilemma | Saeloun Blog](https://blog.saeloun.com/2024/02/21/next.js-vs-remix/)
    
    ![](https://blog.saeloun.com/images/opengraph/2f347c8d2d3bb5e09f79224c9d1bce94095e525d.png?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [HTMX vs React: A Complete Comparison - Semaphore](https://semaphoreci.com/blog/htmx-react?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

Node/Deno

- [DENO | Survey Results and Roadmap](https://deno.com/blog/2024-survey-results-and-roadmap?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Node.js 2023 Year in An Article](https://blog.rafaelgss.dev/nodejs-2023-year-in-review?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

### Web performances⚡

- [A 400% faster Performance panel through perf-ception](https://developer.chrome.com/blog/perf-panel-4x-faster?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Reporting Core Web Vitals With The Performance API — Smashing Magazine](https://www.smashingmagazine.com/2024/02/reporting-core-web-vitals-performance-api/)
    
    ![](https://files.smashing.media/articles/reporting-core-web-vitals-performance-api/reporting-core-web-vitals-performance-api.jpg?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

### UX / UI📱

- [Designing With Integrity: The Ethical Designer's Handbook On Dark Patterns - Raw.Studio](https://raw.studio/blog/designing-with-integrity-the-ethical-designers-handbook-on-dark-patterns/?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Dead Simple Sites — Minimal Website Inspiration](https://deadsimplesites.com/?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

### Videos 📼

- [A simple mistake that can screw up your light/dark theme (and how to fix it)](https://www.youtube.com/watch?v=zFFuV_vXNhY)
    
- [React Hook Form & React 19 Form Actions, The Right Way](https://www.youtube.com/watch?v=VLk45JBe8L8)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709479777202/f03d05dc-6747-449f-a8c0-500b31bbfb8c.png)
    
- [How streaming impacts React and Next.js applications](https://www.youtube.com/watch?v=gZbjVz0M5x0)
    

### Tutorials 💻

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.

- [Exploring Component Testing in Vue with Playwright - DEV Community](https://dev.to/mayashavin/exploring-component-testing-in-vue-with-playwright-27mi?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
    ![](https://res.cloudinary.com/practicaldev/image/fetch/s--gvLpoVRE--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://res.cloudinary.com/mayashavin/image/upload/v1706614013/articles/playwright/component_testing.png?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Control Lazy Load, Infinite Scroll and Animations in React — SitePoint](https://www.sitepoint.com/react-intersection-observer-lazy-load-infinite-scroll-animations/?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Secure statically rendered paid content in Next.js (with the App Router) | Eric Burel Tech Blog](https://www.ericburel.tech/blog/static-paid-content-app-router?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

### Tools & resources 🔧

> 🤩 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.

- [Functional UI Kit](https://functional-ui-kit.com/)
    
    ![](https://framerusercontent.com/images/FpmpxNAtLXoPzywrQn4ex6II34.png?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Huemint - AI color palette generator](https://huemint.com/) Visualize your color palettes with real examples
    
- [Vuexyz/vuexyz: Creative coding composables for Vue 3.](https://github.com/vuexyz/vuexyz?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [PrimeVue - Vue UI Component Library](https://primevue.org/)
    
    ![](https://www.primefaces.org/static/social/primevue-preview.jpg?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Embla Carousel | A lightweight carousel library with fluid motion and great swipe precision](https://www.embla-carousel.com/)
    

### Podcasts, talks...🎙️

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

- [JSR: The New TypeScript Package Registry (NPM Killer) - Syntax #737](https://syntax.fm/show/737/jsr-the-new-typescript-package-registry-npm-killer?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
    ![](https://syntax.fm/og/737.jpg?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [JavaScript Jabber | RedCircle](https://redcircle.com/shows/javascript-jabber/ep/315691a9-ad1a-4d1a-a277-5c6e0050df32?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
    [Take a look, it's in a book with Adrienne Braganza Tacke & Dylan Hildenbrand (JS Party #314)](https://changelog.com/jsparty/314?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [604: VS Code Plugins, Git as a Radical Statement, Tailwind & Arc Drama – ShopTalk](https://shoptalkshow.com/604/)
    
- [Inclusive Experiences in React Applications: Championing Neurodivergent Accessibility w/ Amera White - Whiskey Web and Whatnot - Episode 133](https://whiskeywebandwhatnot.fm/inclusive-experiences-in-react-applications-championing-neurodivergent-accessibility-w-amera-white?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

The French corner

- [//82 - Les News Web Dev février 2024](https://double-slash.dev/podcasts/news-feb24/)
    
    ![](https://res.cloudinary.com/doubleslash/image/upload/co_rgb:a700ff,g_east,l_text:mono.otf_120_letter_spacing_-5:%2382,x_54/co_rgb:a700ff,g_east,l_text:mono.otf_120_letter_spacing_-5:Les%20News%20Web%20Dev%20f%C3%A9vrier%202024,x_54,y_150,w_1000/v1597238012/FACEBOOK_-_OG_Card_RAW_eu5xdv.png?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [IFTTD #261 - No code pour l’IA : La force du collectif & des IA avec Pascal Corrotti](https://www.ifttd.io/episodes/no-code-pour-l-ia?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [AXOPEN | Zoom sur le framework Serverless | Ausha](https://podcast.ausha.co/axopen/framework-serverless?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

### Work / Productivity 📇

- [Guide to leading meetings as a software engineer](https://careercutler.substack.com/p/guide-to-leading-meetings-as-a-software?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
    ![](https://substackcdn.com/image/fetch/w_1200,h_600,c_fill,f_jpg,q_auto:good,fl_progressive:steep,g_auto/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fb50a681e-84eb-4025-bb65-2986f717f868_1356x742.png?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Your First Year as a CTO: A Comprehensive Guide | by Johan Steyn](https://medium.com/@jsteyn/your-first-year-as-a-cto-a-comprehensive-guide-99a441715aaf?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [How my dream design job turned into a nightmare | Matej Latin](https://matejlatin.com/blog/how-my-dream-design-job-turned-into-a-nightmare/?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Manager of managers — Outcomes over output | by Nitin Dhar | Total Engineering Management](https://medium.com/one-to-n/manager-of-managers-outcomes-over-output-09b15331ed59?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
    ![](https://miro.medium.com/v2/da:true/resize:fit:1024/0*QgomLDG70hbg0Rb-)
    
- [Productive Compliments: Giving, Receiving, Connecting](https://tidyfirst.substack.com/p/productive-compliments-giving-receiving?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [Stop postponing things by embracing the mess](https://www.deprocrastination.co/blog/stop-postponing-things-by-embracing-the-mess?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

### Misc🔋

- [Vjeux » 12 Years at Meta](https://blog.vjeux.com/2024/project/12-years-at-meta.html?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email) If you don't know this legend, now's the time to catch up on all his projects - you've probably used one of them once!
    
- [Zapier Architecture - by Neo Kim - System Design Newsletter](https://newsletter.systemdesign.one/p/zapier-architecture?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
    ![](https://substackcdn.com/image/fetch/w_1200,h_600,c_fill,f_jpg,q_auto:good,fl_progressive:steep,g_auto/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1fc4a18e-4392-483c-b3bd-945e6885e668_1280x720.gif?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [How Discord Moved Engineering to Cloud Development Environments](https://discord.com/blog/how-discord-moved-engineering-to-cloud-development-environments?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    
- [A beginner’s guide to making beautiful slides for your talks · ines.io](https://ines.io/blog/beginners-guide-beautiful-slides-talks/?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email)
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709479604390/1e4ad1b0-9356-4684-ab93-5cd122dfe9b2.png)

### Fun 👾

- [Lunakepio/Mario-Kart-3.js](https://github.com/Lunakepio/Mario-Kart-3.js?utm_source=tech-foutraque&utm_campaign=35&utm_medium=email) Already covered in a previous issue, but now much more complete! A must-see!
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1709476910419/209b6350-099f-418a-bc7c-97d38e01315e.png)

---

💌 If you like this newsletter, 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. Thank you