TF #31 | Your weekly frontend digest
Tags: webdev, javascript, programming, react
Published: 2024-01-22 08:06:50

🗞 Article of the week : [**2023 JavaScript Rising Stars**](https://risingstars.js.org/2023/en?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

Discover the latest trends and insights in Frontend development with our curated link list.  
From practical guides to cutting-edge technologies, our collection covers a wide range of topics, including Scroll-Driven Animations with CSS, TypeScript migration, CSS properties, JavaScript linters, Vue and React development, web performance, UI/UX design, productivity, refactoring, tutorials, tools, and resources

---

### Frontend 🎨

- [A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()](https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705847173426/43e41fc8-402e-4194-80f8-148d976a24f0.png)

- [Migrating from Zod to Valibot:](https://mwskwong.com/blog/migrating-from-zod-to-valibot-a-comparative-experience?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) A Comparative Experience | Matthew Kwong

- [TypeScript Might Not Be Your God:](https://dev.to/what1s1ove/typescript-might-not-be-your-god-case-study-of-migration-from-ts-to-jsdoc-o99?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) Case Study of Migration from TS to JSDoc

- [The Complex But Awesome CSS border-image Property Smashing Magazine](https://www.smashingmagazine.com/2024/01/css-border-image-property/?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Rust-Based JavaScript Linters:](https://www.joshuakgoldberg.com/blog/rust-based-javascript-linters-fast-but-no-typed-linting-right-now/?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) Fast, But No Typed Linting Right Now

- [Designing better target sizes](https://ishadeed.com/article/target-size/?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) An interactive guide that is all about enhancing the target size area with CSS.

- [HTMX and Web Components: a Perfect Match](https://binaryigor.com/htmx-and-web-components-a-perfect-match.html?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Dynamic Programming is not Black Magic](https://qsantos.fr/2024/01/04/dynamic-programming-is-not-black-magic/)

- [Top Front-End Tools Of 2023 Smashing Magazine](https://www.smashingmagazine.com/2024/01/top-frontend-tools-2023/?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [npm in Review:](https://socket.dev/blog/2023-npm-retrospective?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) A 2023 Retrospective on Growth, Security, and Quirky Facts

Vue

- [Globalize Your Vue App:](https://medium.com/simform-engineering/globalize-your-vue-app-a-practical-guide-to-vue-3-internationalization-93f5c7da4494?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) A Practical Guide to Vue 3 Internationalization
    ![](https://miro.medium.com/v2/resize:fit:1200/1*SIzcxxuNCN3egcQogxvAsA.png?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

React

- [Delicious Donut Components](https://frontendatscale.com/blog/donut-components/) An interactive guide to component composition with React Server Components
    ![](https://frontendatscale.com/og-image-donut-components.png?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [The future of React.use and React.useMemo](https://interbolt.org/blog/react-use-selector-optimization/?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) - a powerful alternative to context selectors

- [16 Lesser Known Accessibility Issues | Toward](https://toward.studio/latest/16-lesser-known-accessibility-issues?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)


### Web performances

- [How To Improve INP With Chrome DevTools](https://www.debugbear.com/blog/inp-chrome-devtools?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)
    ![](https://www.debugbear.com/dimg/cd6e9e57858eb433789ef4641d628f76.png?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [How Core Web Vitals affect application SEO:](https://vercel.com/blog/how-core-web-vitals-affect-seo?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) Understanding Google page experience ranking and Lighthouse scores Vercel
    ![](https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/i8bo3DknT41zQx5zhWNgy/f4db263a21c2f2d283030dd361ee9713/OG_Template.png?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

### UX / UI📱

- [58 rules for beautiful UI design. The right UI can elevate an application](https://uxdesign.cc/58-rules-for-stunning-and-effective-user-interface-design-ea4b93f931f6?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)
    ![](https://miro.medium.com/v2/resize:fit:1200/1*lIH2LFsMp0wrdhptP22ghw.jpeg?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Usability Testing of Inline Form Validation: 31% Dont Have It, 4% Get It Wrong](https://baymard.com/blog/inline-form-validation?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Case Study: AI-Powered Spatial Banking for Apple Vision Pro UXDA](https://www.theuxda.com/blog/ux-case-study-ai-powered-spatial-banking-for-apple-vision-pro?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [An alternative macOS Dock. A unification of the Dock with Mission](https://uxplanet.org/an-alternative-macos-dock-4169d1abb158?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)
    ![](https://miro.medium.com/v2/resize:fit:1200/1*lJKyRnrdBU8elpAZgTZjDA.png?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Designers Guide To Redesign, Step-By-Step Smart Interface Design Patterns](https://smart-interface-design-patterns.com/articles/how-to-redesign-guide/?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705847293876/45022e5c-6c39-4c5e-a355-1a4bfa6a63f0.png)

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

- [Measuring Developer Productivity](https://newsletter.pragmaticengineer.com/p/measuring-developer-productivity-bae?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email): Real-World Examples

- [Anna Shipman : JFDI](https://www.annashipman.co.uk/jfdi/learnings-from-strategy-project.html?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) Writing about tech, strategy and ledership

- [Demystifying Project Estimation](https://hybridhacker.email/p/demystifying-project-estimation?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Applying the SPACE Framework - by Abi Noda](https://newsletter.getdx.com/p/applying-the-space-framework?utm_source=tech-foutraque&utm_campaign=31&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%2F94440237-de6c-47fb-b511-058301279880_1600x1135.png?utm_source=tech-foutraque&utm_campaign=31&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=31&utm_medium=email)

- [Founders: it doesnt have to be this hard](https://medium.com/@davekashen/founders-it-doesnt-have-to-be-this-hard-78adf21bd335?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

### Misc🔋

- [The Golden Rule of Assertions | Epic Web Dev](https://www.epicweb.dev/the-golden-rule-of-assertions?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)
    
   ![](https://res.cloudinary.com/epic-web/image/upload/v1705389823/card--the-golden-rule-of-assertions_2x.jpg?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Building modern architectures: Functional Core, Imperative Shell revamp](https://medium.com/@albert.llousas/building-modern-architectures-functional-core-imperative-shell-revamp-0bb5ae62b589?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [We removed advertising cookies, heres what happened | Product Blog Sentry](https://blog.sentry.io/we-removed-advertising-cookies-heres-what-happened/?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [The Ten Commandments of Refactoring](https://www.ahalbert.com/technology/2024/01/06/ten_commadments_of_refactoring.html?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Refactoring Legacy Code with the Strangler Fig Pattern](https://shopify.engineering/refactoring-legacy-code-strangler-fig-pattern?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Learning about debuggers | Andy Hippo](https://werat.dev/blog/learning-about-debuggers/?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

### Tutorials 💻

- [NGINX Tutorial for Beginners](https://www.youtube.com/watch?v=9t9Mp0BGnyI&ab_channel=freeCodeCamp.org)

- [Ultimate Docker Compose Tutorial](https://www.youtube.com/watch?v=SXwC9fSwct8&ab_channel=TechWorldwithNana)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705846872701/49556348-d643-4ee6-aa72-c5d69730c17c.png)

- [CSS in 2024, am I right? #css](https://www.youtube.com/watch?v=FWn8HBFQ4n4&ab_channel=JheyTompkins)

- [Learn Next.js Parallel Routes In 16 Minutes](https://www.youtube.com/watch?v=wi8kF8UniUI&ab_channel=WebDevSimplified)

### Tools & resources 🔧

- [Google-maps-scraper:](https://github.com/gosom/google-maps-scraper?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) scrape data data from Google Maps.

- [Vueform | Open-Source Form Framework for Vue](https://vueform.com/)
    ![](https://vueform.com/og/open-graph.png?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Heat.js - JavaScript Heat Map](https://www.william-troup.com/heat-js/)
    ![](https://www.william-troup.com/heat-js/images/heat/types.png?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Graphite](https://graphite.dev/) helps you create smaller pull requests, stay unblocked, and ship faster. Built for stacking, integrated with GitHub & VS Code.

- [React Libraries for 2024](https://www.robinwieruch.de/react-libraries/)

- [Remote-storage:](https://github.com/FrigadeHQ/remote-storage?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email) remoteStorage is a simple library that combines the localStorage API with a remote server to persist data across sessions.

- [The AHA Stack | AHA](https://ahastack.dev/?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

### Videos 📼

We start with 2 reviews of React and Angular from [academind](https://twitter.com/academind_real?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)!
- [You might've missed the Angular Renaissance...](https://youtu.be/-diI7xTANmw?si=prx0xB62sZeaabFB)
- [React's becoming a bit weird...](https://youtu.be/oQiEZ8adag0?si=mRn8uB_YjV0QN7xM)
- [I Hate CORS](https://www.youtube.com/watch?v=Hifll_y8-HE&ab_channel=Theo-t3%E2%80%A4gg)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705846668437/ee98c7ca-5871-4981-8ac6-32a75f3b1115.png)

### Podcasts, talks...🎙

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

- [Fullstack TypeScript Apps with No Build Step?! with Brian LeRoux - Syntax #719](https://syntax.fm/show/719/fullstack-typescript-apps-with-no-build-step-with-brian-leroux?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)
    ![](https://syntax.fm/og/719.jpg?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [A pre-party to a feud (Changelog++ 🔐) with Adam Argyle, Amy Dutton, James Q Quick & Brad Garropy (JS Party)](https://changelog.com/jsparty/plusplus-308-pre-party?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [598: Jen Simmons on Interop, WebKit Releases, and New CSS Features in Safari](https://shoptalkshow.com/598/)

- [Bearded Talks on Beardless Hosts: VSCode Sidebars, AI, and GraphQL with Kelly Vaughn - Whiskey Web and Whatnot - Episode 126](https://whiskeywebandwhatnot.fm/bearded-talks-on-beardless-hosts-vscode-sidebars-ai-and-graphql-with-kelly-vaughn?utm_source=tech-foutraque&utm_campaign=31&utm_medium=email)

- [Get better sleep, more energy and focus with this one device - Asian Efficiency](https://www.asianefficiency.com/podcasts/491w-better-sleep-device/)

The French corner

- [IFTTD #254 - Generative Design : BTP et Nouveaux Outils avec Coraline Faurie](https://www.ifttd.io/episodes/generative-design?utm_source=tech-foutraque&utm_campaign=31&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