TF #30 | Your weekly frontend digest
Tags: webdev, javascript, programming, react
Published: 2024-01-15 08:41:07

🗞 Article of the week : [What PWA Can Do Today](https://whatpwacando.today/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email). A showcase of what is possible with Progressive Web Apps today

---

### Frontend 🎨

CSS

* [Modern CSS for 2024: Use Cases for :has()](https://www.builder.io/blog/css-2024-has?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fa624789bbee8480b8874792a6d0585bb?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://www.builder.io/blog/css-2024-has?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [What forces layout/reflow. The comprehensive list](https://gist.github.com/paulirish/5d52fb081b3570c81e3a?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [How I'm Writing CSS in 2024 | Lee Robinson](https://leerob.io/blog/css)
    
* [Designing better target sizes](https://ishadeed.com/article/target-size?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705241461204/de949b25-f9a1-460e-8100-e748a083689f.png align="center")](https://ishadeed.com/article/target-size?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [The most hearted Pens of 2023 | Codepen](https://codepen.io/2023/popular?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Nested Dark Mode via CSS Proximity](https://jwdallas.com/posts/nesteddarkmode/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Using CSS Houdini to extend styling and layout capabilities - LogRocket Blog](https://blog.logrocket.com/css-houdini-extend-styling-layout-capabilities/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [About subgrid and colored grid lines](https://www.lenesaile.com/en/blog/about-subgrid-and-colored-grid-lines/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://www.lenesaile.com/assets/images/social-preview/about-subgrid-and-colored-grid-lines-preview.jpeg align="left")](https://www.lenesaile.com/en/blog/about-subgrid-and-colored-grid-lines/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    

MISC

* [Hello Developer: January 2024 - Discover - Apple Developer](https://developer.apple.com/news/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Exploring visionOS Accessibility: VoiceOver Gestures](https://www.rudrank.com/exploring-visionos-accessibility-voiceover-gestures/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [What PWA Can Do Today](https://whatpwacando.today/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [SolidStart: A Different Breed Of Meta-Framework — Smashing Magazine](https://www.smashingmagazine.com/2024/01/solidstart-different-breed-meta-framework/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [2024 Predictions by JavaScript Frontend Framework Maintainers](https://thenewstack.io/2024-predictions-by-javascript-frontend-framework-maintainers/)
    
* [Frontend predictions for 2024 • Buttondown](https://buttondown.email/whatever_jamie/archive/frontend-predictions-for-2024/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Ultimate Guide to Magic Links](https://clerk.com/blog/magic-links?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705241597633/ead665a6-405b-4b7e-9b83-b4163711da2e.png align="center")](https://clerk.com/blog/magic-links?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [JavaScript Frameworks - Heading into 2024 - DEV Community](https://dev.to/this-is-learning/javascript-frameworks-heading-into-2024-i3l?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    

REACT

* [How to Get Rid of “Window is Not Defined” and Hydration Mismatch Errors in Next.js | by Eric Burel | Dec, 2023 | Medium](https://medium.com/@eric.burel/how-to-get-rid-of-window-is-not-defined-and-hydration-mismatch-errors-in-next-js-567cc51b4a17?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [28 Advanced NextJS features everyone should know | Code Driven Development](https://codedrivendevelopment.com/posts/rarely-known-nextjs-features?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Oskar Kwaśniewski - Bringing React Native libraries to Apple Vision Pro](https://www.oskarkwasniewski.dev/blog/bringing-react-native-libraries-to-apple-vision-pro?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [The Two Reacts — overreacted](https://overreacted.io/the-two-reacts/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [More Than You Need to Know About ReactDOM.flushSync | JulesBlom.com](https://julesblom.com/writing/flushsync?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Common mistakes with the Next.js App Router and how to fix them – Vercel](https://vercel.com/blog/common-mistakes-with-the-next-js-app-router-and-how-to-fix-them?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/2ORm1GrRwmaOkFPnmapEnJ/09d6ed17fe0ce9f8c1e2c1f61052430d/Light.png?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://vercel.com/blog/common-mistakes-with-the-next-js-app-router-and-how-to-fix-them?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Thoughts on Remix | Viget](https://www.viget.com/articles/thoughts-on-remix/)
    
* [React Native's 2023 Highlights and 2024 Outlook Intro - TechBullion](https://techbullion.com/react-natives-2023-highlights-and-2024-outlook-intro/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    

VUE

* [My Journey from React.js to Vue.js](https://medium.com/huawei-developers/my-journey-from-react-js-to-vue-js-2cc2affd071c?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://miro.medium.com/v2/resize:fit:956/1*w5jP6lu7RoefY7TsS5WSDg.jpeg?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://medium.com/huawei-developers/my-journey-from-react-js-to-vue-js-2cc2affd071c?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Understanding Composables in Vue3](https://naumanzafar.dev/stateful-logic-reuse-ft-composables?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://naumanzafar.dev/api/og/post?og=eyJ0aXRsZSI6IlN0YXRlZnVsJTIwTG9naWMlMjBSZXVzZSUyMGZ0LiUyMENvbXBvc2FibGVzIiwiYXV0aG9yIjoiTmF1bWFuJTIwWmFmYXIiLCJkb21haW4iOiJuYXVtYW56YWZhci5kZXYiLCJwaG90byI6Imh0dHBzOi8vY2RuLmhhc2hub2RlLmNvbS9yZXMvaGFzaG5vZGUvaW1hZ2UvdXBsb2FkL3YxNjUzNjM2MTgwMjEwL3Z5VEp4bDFuSy5wbmciLCJyZWFkVGltZSI6M30= align="left")](https://naumanzafar.dev/stateful-logic-reuse-ft-composables?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    

### UX / UI📱

* [The Eight Golden Rules of Interface Design](https://www.cs.umd.edu/~ben/goldenrules.html?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [What should we ship?](https://rauno.me/craft/vercel?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [AI Vertigo: where do we go from here as designers?](https://uxdesign.cc/from-pencil-to-siri-the-evolving-function-of-ux-design-8ee23ef725ee?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://miro.medium.com/v2/resize:fit:1200/1*U68EPsFUV7OA5rt5rjPimA.png?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://uxdesign.cc/from-pencil-to-siri-the-evolving-function-of-ux-design-8ee23ef725ee?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [A Global Design System | Brad Frost](https://bradfrost.com/blog/post/a-global-design-system/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Blur radius comparison](https://bjango.com/articles/blurradiuscomparison/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Use these principles to drive UI/UX success](https://www.fastcompany.com/91004012/principles-to-drive-ui-ux-success?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Tell Better Stories by Jeremy Connell-Waite | Business Storytelling](https://www.betterstories.org/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Story Mapping: The Game-Changer in UX Design](https://bootcamp.uxdesign.cc/story-mapping-the-game-changer-in-ux-design-e438f6716a5a?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://miro.medium.com/v2/resize:fit:1200/1*qP0CxKBOpbsOVu4PceVg3w.png?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://bootcamp.uxdesign.cc/story-mapping-the-game-changer-in-ux-design-e438f6716a5a?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    

### Work / Productivity 📇

* [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=30&utm_medium=email)
    
* [Product Managing to Prevent Burnout](https://www.honeycomb.io/blog/product-managing-prevent-burnout?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [10 Things Software Developers Should Learn about Learning](https://cacm.acm.org/magazines/2024/1/278891-10-things-software-developers-should-learn-about-learning/fulltext?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [The engineering mindset | Will Larson (Carta, Stripe, Uber, Calm, Digg)](https://www.youtube.com/watch?v=Z9ftpRhRiJE&ab_channel=Lenny%27sPodcast)
    
* [Think more about what to focus on](https://www.henrikkarlsson.xyz/p/multi-armed-bandit?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Architects & Tech Leads](https://mikefisher.substack.com/p/architects-and-tech-leads?utm_source=tech-foutraque&utm_campaign=30&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"></a> and sharing it with others! Thank you.🙏

### Misc 📇

* [The Website vs. Web App Dichotomy Doesn't Exist](https://jakelazaroff.com/words/the-website-vs-web-app-dichotomy-doesnt-exist/)
    
    [![](https://jakelazaroff.com/og/the-website-vs-web-app-dichotomy-doesnt-exist.png?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://jakelazaroff.com/words/the-website-vs-web-app-dichotomy-doesnt-exist/)
    
* [Where have all the websites gone?](https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [9 years of Apple text editor solo dev](https://papereditor.app/dev?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Software Quality - by Abi Noda - Engineering Enablement](https://newsletter.getdx.com/p/software-quality?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Weird things engineers believe about Web development - Brian Birtles’ Blog](https://birtles.blog/2024/01/06/weird-things-engineers-believe-about-development/)
    
    [![](https://birtles.blog/2024/01/06/weird-things-engineers-believe-about-development/social.png?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://birtles.blog/2024/01/06/weird-things-engineers-believe-about-development/)
    
* [Do we think of git commits as diffs, snapshots, and/or histories?](https://jvns.ca/blog/2024/01/05/do-we-think-of-git-commits-as-diffs--snapshots--or-histories/)
    
* [How Google perfected the web](https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705241494734/1a26467d-e8dc-4af3-9d8e-8701b921f593.png)](https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Security at Startup](https://vadimkravcenko.com/shorts/security-at-startup/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    

### Tutorials 💻

* [How to Implement SSO in Remix using GitHub and Remix Auth](https://pmbanugo.me/how-to-implement-sso-authentication-in-remix-using-github-and-remix-auth-in-under-10-minutes?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Build an X clone w/ Nuxt UI](https://www.vuemastery.com/blog/build-an-x-clone-w-nuxt-ui/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705240804887/e734b14d-cb02-408a-84c0-47c29a72100f.png align="center")](https://www.vuemastery.com/blog/build-an-x-clone-w-nuxt-ui/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    

### Tools & resources 🔧

* [apyhub.com](https://apyhub.com/) Discover our diverse range of APIs, from simple utilities to cutting-edge AI-powered solutions. Shared by @iamspathan. Thank to him!
[![](https://apyhub.com/meta-apyhub.png)](https://apyhub.com/meta-apyhub.png)

---

* [Env:](https://github.com/humanwhocodes/env/) A utility for verifying environment variables are present
    
    [![](https://opengraph.githubassets.com/43ab0ef6e248e1a107edac8441952798bc61766de342947706caec93135f9320/humanwhocodes/env?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://github.com/humanwhocodes/env/)
    
* [unrot•link](https://unrot.link/) | Prevent and reverse link rot with a single script
    
* [Remote-storage:](https://github.com/FrigadeHQ/remote-storage?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email) remoteStorage is a simple library that combines the localStorage API with a remote server to persist data across browsers and devices.
    
    [![](https://opengraph.githubassets.com/909d93b5d38bd80dd370eb8fecbfe6672998c0b9d7c211cffab55e4d2289452a/FrigadeHQ/remote-storage?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://github.com/FrigadeHQ/remote-storage?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Pagination:](https://github.com/rizkyalam/pagination?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email) Simple Pagination Library
    
    [![](https://opengraph.githubassets.com/307119e39124463942eb02507f517ceb8761490a02e70e4e15f80abf80bed355/rizkyalam/pagination?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://github.com/rizkyalam/pagination?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [The AHA Stack | AHA](https://ahastack.dev/) Combine Astro, htmx and Alpine.js to create modern web applications sending HTML over the wire
    
* [TWC](https://react-twc.vercel.app/) is a lightweight library to create Tailwind CSS Components in one line, write less code and build faster.
    
* [TSDiagram](https://tsdiagram.com/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email) - Diagrams as code with TypeScript
    
  [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705241577373/dd03c910-2dbf-4c4f-aaaf-6d0596e6722c.png)](https://tsdiagram.com/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [CSS Hooks](https://css-hooks.com/) Inline styles doing what we thought they couldn't.
    

### Videos 📼

* [HTMX For React Developers in 10 Minutes](https://www.youtube.com/watch?v=r0XBULqzsT0&ab_channel=JackHerrington)
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705240532672/71f8a8a2-40f0-44e3-bd54-b90085ef2753.jpeg align="center")](https://www.youtube.com/watch?v=r0XBULqzsT0&ab_channel=JackHerrington)
    
* [React server components from scratch!](https://www.youtube.com/watch?v=MaebEqhZR84&ab_channel=BenHolmes)
    
* [Nuxt vs. Nitro - What does what in your App](https://www.youtube.com/watch?v=DkvgJa-X31k&ab_channel=AlexanderLichter)
    

### 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>

* [Google & MS Duopoly, Frontend to Fullstack, Where to Put Business Logic + more(Potluck) - Syntax #715](https://syntax.fm/show/715/google-and-ms-duopoly-frontend-to-fullstack-where-to-put-business-logic-more-potluck?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [JS Perf Wins & New Node.js Features with Yagiz Nizipli - Syntax #716](https://syntax.fm/show/716/js-perf-wins-and-new-node-js-features-with-yagiz-nizipli?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://syntax.fm/og/716.jpg?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://syntax.fm/show/716/js-perf-wins-and-new-node-js-features-with-yagiz-nizipli?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [JavaScript Jabber - JSJ 615 | Iterating on Open Source ](https://redcircle.com/shows/javascript-jabber/ep/c14059b1-0413-4c63-87f4-56132d73ff8c?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [htmx: a new old way to build the web with Carson Gross & Alex Russell (JS Party #307) |&gt; Changelog](https://changelog.com/jsparty/307?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [597: How Many VS Code Plugins, Poor Charlie’s Almanack, and Where to Start in 2024? – ShopTalk](https://shoptalkshow.com/597/)
    
* [Online learning on the rocks - Front End Happy Hour](https://www.frontendhappyhour.com/episodes/online-learning-on-the-rocks/)
    
    [![](https://frontendhappyhour.com/public/img/episodes/friendly-preview/online-learning-on-the-rocks.jpeg?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://www.frontendhappyhour.com/episodes/online-learning-on-the-rocks/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Tech Conferences, Remote Work and the Intersection of AI and Web Design with Clark Sell - Whiskey Web and Whatnot - Episode 125](https://whiskeywebandwhatnot.fm/tech-conferences-remote-work-and-the-intersection-of-ai-and-web-design-with-clark-sell?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    

The French corner

* [IFTTD #253 - DDoS : À écouter massivement ! avec Mathieu Menut](https://www.ifttd.io/episodes/ddos?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Les Technos Episode 429 : Quel langage de programmation choisir ?](https://lestechnos.be/episode-429-quel-langage-de-programmation-choisir/)
    
    [![](https://lestechnos.be/wp-content/uploads/2024/01/Episode-169-11-01-2024-14-25.jpg?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email align="left")](https://lestechnos.be/episode-429-quel-langage-de-programmation-choisir/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    

### Fun 👾

* [drawing.garden](https://drawing.garden/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
* [Nestflix](https://nestflix.fun/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)
    
    [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705241521231/aac0fdf4-f1de-4917-b148-165b2dc219a8.png align="center")](https://nestflix.fun/?utm_source=tech-foutraque&utm_campaign=30&utm_medium=email)

---

💌 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