The Frontend newsletter #8 - by Tech foutraque
Tags: webdev, javascript, programming, react
Published: 2023-08-01 21:29:35

🗞 Article of the week : [5 Inconvenient Truths about TypeScript](https://oida.dev/5-truths-about-typescript/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

### 🎨 Frontend

- [Typing useRef is EASY with ElementRef](https://www.youtube.com/watch?v=JuULWGuoI1A&ab_channel=MattPocock) 📼

- [How to Share and Reuse Micro Frontends | Bits and Pieces](https://blog.bitsrc.io/how-to-share-and-reuse-micro-frontends-f925776b06ae?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [A Practical Guide to Service Workers](https://blog.openreplay.com/a-practical-guide-to-service-workers/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [WordPress Playground](https://developer.wordpress.org/playground/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Breaking Up with SVG-in-JS in 2023 | Jacob Gro](https://kurtextrem.de/posts/svg-in-js?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [The Looking Glass: Higher Level Design](https://lg.substack.com/p/the-looking-glass-higher-level-design?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Accessible Animated GIF Alternatives](https://cloudfour.com/thinks/accessible-animated-gif-alternatives/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Tailwind CSS Tips and Tricks Worth Knowing](https://www.builder.io/blog/tailwind-css-tips-and-tricks?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [How to Use CSS object-fit and object-position](https://www.sitepoint.com/using-css-object-fit-object-position-properties/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)  
[Scroll driven animations in CSS are a joy to play around with!](https://utilitybend.com/blog/scroll-driven-animations-in-css-are-a-joy-to-play-around-with?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [The new @font-face syntax](https://fullystacked.net/posts/new-font-face-syntax/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [From Hacks to Elegance: Transforming a Card Component with Modern CSS Wizardry](https://9elements.com/blog/from-hacks-to-elegance-transforming-a-card-component-with-modern-css-wizardry/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [How React 18 Improves Application Performance Vercel](https://vercel.com/blog/how-react-18-improves-application-performance?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Comparing Four React Form Libraries: Formik, React Hook Form, React Final Form And Unform Smashing Magazine](https://www.smashingmagazine.com/2023/02/comparing-react-form-libraries/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [React Query and React Context](https://tkdodo.eu/blog/react-query-and-react-context?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Upgrading an Ancient React Application - Lab Zero](https://labzero.com/blog/upgrading-an-ancient-react-application?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Nuxt on the Edge Nuxt](https://nuxt.com/blog/nuxt-on-the-edge?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [A guide to Nuxt server components](https://roe.dev/blog/nuxt-server-components?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Deploying a Fastify & Vue 3 Static Site to Heroku](https://www.lirantal.com/blog/deploying-a-fastify-vue-3-static-site-to-heroku?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [A Comprehensive Vue 2 to Vue 3 Migration Guide](https://medium.com/simform-engineering/a-comprehensive-vue-2-to-vue-3-migration-guide-a00501bbc3f0?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [They Just Fixed VUE ROUTER](https://www.youtube.com/watch?v=-mUTU9MDOC8&ab_channel=LearnVue)

### Web performances

- [Core Web Vitals for Search Engine Optimisation: What Do We Need to Know? CSS Wizardry](https://csswizardry.com/2023/07/core-web-vitals-for-search-engine-optimisation/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Fixing INP with a VIEWPORT tag](https://www.phpied.com/fixing-inp-with-a-viewport-tag/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [A case study on scroll-driven animations performance - Chrome Developers](https://developer.chrome.com/en/blog/scroll-animation-performance-case-study/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Karolina Szczur - Catching Up With Web Performance](https://catchingup.dev/podcasts/karolina-szczur/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email) 📼

### 📱 UX / UI

- [Loading & progress indicators UI Components series | UX Collective](https://uxdesign.cc/loading-progress-indicators-ui-components-series-f4b1fc35339a?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Get ready for depth scrolling | UX Collective](https://uxdesign.cc/get-ready-for-depth-scrolling-2377a74f087f?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Invisible Details of Interaction Design](https://rauno.me/craft/interaction-design?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Whats The Perfect Design Process? Smart Interface Design Patterns](https://smart-interface-design-patterns.com/articles/perfect-design-process/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [The UX Cookbook](https://theuxcookbook.com/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

### 🔋 Misc

- [Team, project, and file organization](https://www.figma.com/best-practices/team-file-organization/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Alignment > Autonomy](https://buildrightside.com/autonomy-alignment?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Enhancing Your Definition of Done Can Improve Your Minimum Viable Architecture](https://www.infoq.com/articles/definition-of-done-mva/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Mid Career Stuckness](https://www.subbu.org/articles/2023/mid-career-stuckness/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Why Roles Are Not Rules | Figma Blog](https://www.figma.com/blog/why-roles-are-not-rules/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Readability: Google's Temple to Engineering Excellence](https://www.moderndescartes.com/essays/readability/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Why software projects take longer than you think: a statistical model](https://erikbern.com/2019/04/15/why-software-projects-take-longer-than-you-think-a-statistical-model.html?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Being a good mentor - a developers guide](https://vadimkravcenko.com/shorts/good-mentor/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Bad Design Managers](https://hvpandya.com/bad-design-managers?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [What does a CTO actually do?](https://vadimkravcenko.com/shorts/what-cto-does/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [On Becoming a VP of Engineering, Part 2: Doing the Job | Honeycomb](https://www.honeycomb.io/blog/becoming-vp-of-engineering-pt2?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

### 👾 Tutorials

- [Next.js & Appwrite Full Stack Course](https://www.youtube.com/watch?v=ETV17M4SauU&ab_channel=freeCodeCamp.org)

### 🔧 Tools & ressources

- [Driver.js | Product tours, highlights, contextual help and more.](https://driverjs.com/?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Charmbracelet/pop: Send emails from your terminal 📬](https://github.com/charmbracelet/pop?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Dabeaz-course/python-mastery: Advanced Python Mastery](https://github.com/dabeaz-course/python-mastery?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Goldbergyoni/nodebestpractices | The Node.js best practices list](https://github.com/goldbergyoni/nodebestpractices?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Introducing React Tweet Vercel](https://vercel.com/blog/introducing-react-tweet?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Docusealco/docuseal: Open source DocuSign alternative](https://github.com/docusealco/docuseal?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Folder Structure in the remote era](https://medium.com/design-at-scale/folder-structure-in-the-remote-era-114f2f6c255c?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [An organizational starter kit for your design projects](https://bootcamp.uxdesign.cc/how-to-organize-internal-design-documents-so-you-can-manage-projects-with-precision-bf658c9d0e7?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

- [Gibbok/typescript-book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.](https://github.com/gibbok/typescript-book?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

### 📼 Videos

- [The differences between CSS and Sass Nesting](https://www.youtube.com/watch?v=ljDIcBp-9sQ&ab_channel=KevinPowell)

- [Why Panda CSS for RSCs is Changing the Game](https://www.youtube.com/watch?v=fKSemrudovo&ab_channel=JackHerrington)

### 🎙 Podcasts, talks...

- [Tech Rock | Cyberscurit : derrire les bonnes pratiques, la ralit](https://www.tech.rocks/podcasts/35836e15-b32b-ee11-b8f0-000d3a28bbc9/cybersecurite-derriere-les-bonnes-pratiques-la-realite-yann-toupin-leocare-aroua-biri-frcyber-weesec--s05ep25?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email) 🇫🇷

- [Syntax | Supper Club Email Sending, Spam, DMARC, SPF, Styling, and more with Andris Reinman](https://syntax.fm/show/646/supper-club-email-sending-spam-dmarc-spf-styling-and-more-with-andris-reinman?utm_source=tech-foutraque&utm_campaign=8&utm_medium=email)

💌

If you like this newsletter, don't hesitate to share it.