TF #32 | Your weekly frontend digest
Tags: webdev, javascript, programming, react
Published: 2024-01-29 08:51:09

🗞 Article of the week : [**Happy 40th Birthday, Macintosh**](https://mac40th.com/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
The Macintosh Classic II was my very first computer. I was just playing lemmings!

---

This week, we've got 2 articles on swift, lots of articles on node, typescript, alpine, adonisJS, vue and a very good topic on react and Openlayers.
On the UX side, a case study from N/N group on indicators, validations and notifications, not to be missed.

For managers, there's a lot more to come: classics on estimating and team management, as well as the article "The 'errors' that mean you're doing it right", which I really enjoyed!
In other news, Apple is in the spotlight with the Macintosh anniversary and icloud. A good article on the English government and the migration of their PostgreSQL db.

---

### Frontend 🎨

- [Web Components in Earnest](https://naildrivin5.com/blog/2024/01/24/web-components-in-earnest.html?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Wrangling Tuple Types | Kyle Shevlin](https://kyleshevlin.com/wrangling-tuple-types/)
    
- [3 Lessons from Building a Chrome Extension with TypeScript](https://shawnsomething.substack.com/p/3-lessons-from-building-a-chrome?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Handling Environment Variables in Node.js](https://blog.platformatic.dev/handling-environment-variables-in-nodejs?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Mastering Cryptography Fundamentals with Node’s crypto module](https://blog.yonatan.dev/cryptography-with-node-crypto-module/)
    
    ![](https://blog.yonatan.dev/content/images/2023/11/crypto-alice-import-1.jpg?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    

CSS

- [Making CSS View Transitions Easy with Velvette | Codrops](https://tympanus.net/codrops/2024/01/19/making-css-view-transitions-easy-with-velvette/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [12 Modern CSS One-Line Upgrades | Modern CSS Solutions](https://moderncss.dev/12-modern-css-one-line-upgrades/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Learn CSS :has() selector by examples: 5 top use cases - Bejamas](https://bejamas.io/blog/learn-css-has-selector-by-examples-top-use-cases/)
    
    ![](https://og.bejamas.io/Learn%20CSS%20%3Ahas()%20selector%20by%20examples%3A%205%20top%20use%20cases.png?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    

Vue

- [The Ultimate Guide for Using Vue.js with Laravel - Vue School Articles](https://vueschool.io/articles/vuejs-tutorials/the-ultimate-guide-for-using-vue-js-with-laravel/)
    
    ![](https://blog.vueschool.io/wp-content/uploads/2024/01/VS_Articles_Using_Vue_with_Laravel_1.png?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    
- [Vue 3 — Transitions — Why?. As a part of the Vue.js core code, a… | by Emil Hein | Jan, 2024 | JavaScript in Plain English](https://javascript.plainenglish.io/vue-3-transitions-why-db5ab4b85a79?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://miro.medium.com/v2/da:true/resize:fit:590/1*I-5DojBaM5iAj9sdQ3wQIQ.gif?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    

React

- [Mastering React and OpenLayers Integration: A Comprehensive Guide • Max Dietrich - Geospatial Developer](https://mxd.codes/articles/how-to-create-a-web-map-with-open-layers-and-react?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://cms.mxd.codes/uploads/daturbod_How_to_create_a_web_map_with_Open_Layers_and_React_2e532cd4_c76a_4d84_a766_d1a7d15fe91f_10bfc36908.png?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    
- [The Query Options API | TkDodo's blog](https://tkdodo.eu/blog/the-query-options-api?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Exploring react-native-unistyles: A Powerful Styling Solution for React Native](https://blog.stackademic.com/exploring-react-native-unistyles-a-powerful-styling-solution-for-react-native-d8e4669b746a?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://miro.medium.com/v2/resize:fit:1200/1*_CQoXUesUfFRLdALL0gZwQ.png?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    
- [New client-side hooks coming to React 19](https://marmelab.com/blog/2024/01/23/react-19-new-hooks.html?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [How to start a React Project in 2024](https://www.robinwieruch.de/react-starter/)
    
- [Updating public Next.js environment variables without rebuilds | Phase Blog](https://phase.dev/blog/nextjs-public-runtime-variables/)
    

Swift

- [SwiftUI main thread hang detector – Wade Tregaskis](https://wadetregaskis.com/swiftui-main-thread-hang-detector/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [A new access modifier in Swift: package](https://blog.eidinger.info/a-new-access-modifier-in-swift-package?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    

### Web performances⚡

- [Fixing Cumulative Layout Shift Problems on DavidWalshBlog](https://davidwalsh.name/fixing-cumulative-layout-shift-problems-on-davidwalshblog?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706372430408/9ce1856f-0463-4767-8141-26ab68652412.png )
    

### UX / UI📱

- [Indicators, Validations, and Notifications: Pick the Correct Communication Option](https://www.nngroup.com/articles/indicators-validations-notifications/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706372493010/ee40db71-d123-4027-ab30-47d953a91f00.png )
    
- [Trust the Process. The Smith & Diction Identity Process](https://medium.com/smith-diction/trust-the-process-97ac8999d56a?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://miro.medium.com/v2/resize:fit:1200/1*VIwOTNTnk8R1SaWmbbaIIw.jpeg?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [The Problem With Digital Instrument Clusters and How to Design a Better One](https://www.theturnsignalblog.com/blog/designing-better-digital-instrument-clusters/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706373962294/40597941-d5b4-4acf-b182-2f2622e96a13.png)
    
- [Nuberodesign &gt; Blog &gt; In Praise of Buttons – Part One](https://www.nubero.ch/blog/009/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [The AI Dilemma In Graphic Design: Steering Towards Excellence In Typography And Beyond — Smashing Magazine](https://www.smashingmagazine.com/2024/01/ai-dilemma-graphic-design-typography/)
    
    ![](https://files.smashing.media/articles/ai-dilemma-graphic-design-typography/ai-dilemma-graphic-design-typography.jpg?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    

### Work / Productivity 📇

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

- [The “I don’t like what they’re saying, so they shouldn’t be allowed to say it” approach to crisis management](https://ben.balter.com/2024/01/08/dissenting-voices/)
    
- [7 Challenges with Long-Term Projects and How to Manage Them](https://newsletter.techleadmentor.com/p/7-challenges-with-long-term-projects?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [The Experimentation Layer - Not Boring by Packy McCormick](https://www.notboring.co/p/the-experimentation-layer?utm_source=tech-foutraque&utm_campaign=32&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%2Fbbb23c3b-d1bd-480b-82c9-87edd7754797_1200x600.png)
    
- [The “errors” that mean you’re doing it right](https://longform.asmartbear.com/good-problems-to-have/)
    
    ![](https://longform.asmartbear.com/good-problems-to-have/thumbnail-1200w.png?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Demystifying Project Estimation](https://hybridhacker.email/p/demystifying-project-estimation?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [How To Fix Broken Teams - Stay SaaSy](https://blog.staysaasy.com/p/how-to-fix-broken-teams?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Manage like an engineer | Ben Balter](https://ben.balter.com/2023/01/10/manage-like-an-engineer/)
    

### Misc🔋

- [How Apple built iCloud to store billions of databases](https://read.engineerscodex.com/p/how-apple-built-icloud-to-store-billions?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Monoliths, microservices, and serverless aren't what you think they are](https://blog.devdetails.com/p/monoliths-microservices-and-serverless?utm_source=tech-foutraque&utm_campaign=32&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%2Fabc83684-81fd-48d5-bf1b-fe1e139fe47c_2161x2161.png?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Understanding CORS. Hello there! Happy New Year! I hope you… | by Mykola | Jan, 2024 | ITNEXT](https://itnext.io/understanding-cors-4157bf640e11?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [How we migrated our PostgreSQL database with 11 seconds downtime - Government Digital Service](https://gds.blog.gov.uk/2024/01/17/how-we-migrated-our-postgresql-database-with-11-seconds-downtime/)
    
- [Announcing AdonisJS v6](https://adonisjs.com/blog/adonisjs-v6-announcement?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Zed is now open source](https://zed.dev/blog/zed-is-now-open-source?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://zed.dev/api/og?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    
- [Happy 40th Birthday, Macintosh](https://mac40th.com/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [Case Study: Solving Vercel’s 10-Second Limit with QStash](https://medium.com/@kolbysisk/case-study-solving-vercels-10-second-limit-with-qstash-2bceeb35d29b?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [A Simple Guide To Retrieval Augmented Generation Language Models](https://www.smashingmagazine.com/2024/01/guide-retrieval-augmented-generation-language-models/)
    
    ![](https://files.smashing.media/articles/guide-retrieval-augmented-generation-language-models/guide-retrieval-augmented-generation-language-models.jpg?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    

### Tools & resources 🔧

- [Shipping Blended Diffs | @mdo](https://markdotto.com/2024/01/17/blended-diffs/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [The Node-Based UI for Svelte – Svelte Flow](https://svelteflow.dev/)
    
    ![](https://svelteflow.dev/img/og/svelte-flow-og.jpg?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    
- [Prisma Editor](https://prisma-editor.vercel.app/) | Visualize and Edit Prisma Schemas
    
- [The Bun Shell](https://bun.sh/blog/the-bun-shell?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
- [React Email 2.0 · Resend](https://resend.com/blog/react-email-2?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706374019400/fe855fac-d749-4923-9422-fb7781b8fef8.webp )
    
- [Announcing Mutative 1.0](https://mutative.js.org/blog/releases/1.0/) - A New Era in Efficient Immutable Updates
    
- [TypeSpec](https://typespec.io/) Describe your data up front and generate schemas, API specifications, client / server code, docs, and more.
    
- [Typescript Book](https://gibbok.github.io/typescript-book/) The Concise TypeScript Book provides a comprehensive and succinct overview of TypeScript's capabilities
    
- [Loadership](https://www.loadership.com/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email) CSS-only loader configuration tool that allows you to effortlessly customize and generate stunning loaders for your website
    

### Tutorials 💻

- [Ditto - Blog - Running a React Web App in an Android App](https://ditto.live/blog/run-react-locally-in-android?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706372402304/fcac3414-6c00-454d-af64-507d437aa603.png )
    
- [React Server Components Change Everything](https://www.youtube.com/watch?v=rGPpQdbDbwo&ab_channel=WebDevSimplified)
    
- [React form validation explained - Next.js and Astro](https://www.youtube.com/watch?v=DwEkvie79xI&ab_channel=BenHolmes)
    
- [Alpine, HTMX, Astro Stack Wordle App With Full Source!](https://www.youtube.com/watch?v=vQUqgURgG8M&ab_channel=JackHerrington)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706372366336/a0031010-5171-4126-8580-6c36753dc2d0.png )
    
- [Event Driven Architecture on AWS – Course for Beginners](https://www.youtube.com/watch?v=Zr6fnhvJKlw&ab_channel=freeCodeCamp.org)
    
- [Build a Next.js app in Storybook with React Server Components and Mock Service Worker](https://storybook.js.org/blog/build-a-nextjs-app-with-rsc-msw-storybook/)
    
    ![](https://storybookblog.ghost.io/content/images/2024/01/sb-next-rsc-msw.png?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    
- [CSS Blurry Shimmer Effect — Smashing Magazine](https://www.smashingmagazine.com/2024/01/css-blurry-shimmer-effect/)
    
    ![](https://files.smashing.media/articles/css-blurry-shimmer-effect/css-blurry-shimmer-effect.jpg?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    

### Videos 📼

- [Memoization: Use it, Abuse it, or Forget it? - ReactJS Girls #26](https://www.youtube.com/watch?v=AflfCBHBPZs&ab_channel=TechTalksYLD)
    
- [The new Vue 3.4 feature NOBODY talks about…](https://www.youtube.com/watch?v=d4-OjlicbiY&ab_channel=AlexanderLichter)
    
- [Modern CSS, the state of the web, Safari's progress, and more! With Jen Simmons](https://www.youtube.com/watch?v=nn3vYS_msc0&ab_channel=KevinPowell)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706372244277/b2027109-524d-46a5-9114-e03308d1ad8f.png )
    
- [Torvalds Speaks: Impact of Artificial Intelligence on Programming](https://www.youtube.com/watch?v=VHHT6W-N0ak&ab_channel=MasteryLearning)
    
- [Deploying Next.js to Vercel](https://www.youtube.com/watch?v=AiiGjB2AxqA&ab_channel=Vercel)
    

### Podcasts, talks...🎙️

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

- [**Whiskey Web and Whatnot*- 127](https://whiskeywebandwhatnot.fm/monthly-malarkey-javascript-modules-html-and-ryan-reynolds?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email) : Monthly Malarkey - JavaScript Modules, HTML, and Ryan Reynolds
    
- [Front End Happy Hour 185](https://www.frontendhappyhour.com/episodes/quitting-a-job-flipping-the-bar-table/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email) : Quitting a job - flipping the bar table
    
- [Shop Talk 599](https://shoptalkshow.com/599/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email) : Fighting the Algorithm With RSS, Blogging, and the IndieWeb
    
- [JavaScript Jabber 617](https://redcircle.com/shows/javascript-jabber/ep/9d0c5028-f248-4479-bba5-63d05eab3449?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email) : Inside the World of React: Server Components, Unidirectional Data Flow, and Frameworks
    
- [Syntax 721](https://syntax.fm/show/721/you-should-learn-drizzle-the-typescript-sql-orm?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email) : You should learn Drizzle, the TypeScript SQL ORM
    
- [Syntax 722](https://syntax.fm/show/722/next-level-web-apis-bluetooth-file-access-thomas-steiner-project-fugu?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email) : Next Level Web APIs. Bluetooth, File Access, Thomas Steiner - Project Fugu
    

The French corner

- [IFTTD #256.ad](https://www.ifttd.io/episodes/culture-cybersecurite?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email) - Culture Cybersécurité: Un travail d'équipe encore trop individuel.
    
- [Message à caractère informatique : la 100e en live](https://youtu.be/HydH3UCZj1w?si=hqLfLl3D0LgslvFb)
    
- [Double Slash 080](https://double-slash.dev/podcasts/news24w3/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email) : Les news web dev de janvier 2024 (numéro 3)
    

### Fun 👾

- [Le développeur qui sait tout](https://www.jesuisundev.com/le-developpeur-qui-sait-tout/) (FR) The return of "Je suis un dev". Still a fan of the stories, the tone, it's just great every time!
    
    ![](https://www.jesuisundev.com/wp-content/uploads/2024/01/tukI5EB.png?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email )
    
- [SURF THE WEB LIKE IT'S 1999! - Bill's World](https://billsworld.neocities.org/?utm_source=tech-foutraque&utm_campaign=32&utm_medium=email)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706373691816/e08e18e7-87e8-4f21-9dec-ac649163832f.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.