TF #24 | Your weekly frontend digest
Tags: webdev, javascript, programming, react
Published: 2023-11-20 12:22:37

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

### Frontend 🎨

🗞 Article of the week : [The Web Can Do What!?](https://thewebshowcase.withgoogle.com/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) Great visual experience from Google! Interactive, interesting and fun!

- [Addressing Accessibility Concerns With Using Fluid Type](https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Cracking a Developer Tools Killer script](https://christianheilmann.com/2023/11/14/cracking-a-developer-tools-killer-script/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [67 Weird Debugging Tricks Your Browser Doesn't Want You to Know](https://alan.norbauer.com/articles/browser-debugging-tricks?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Can Bun Eat Node.jss Lunch? Testing the Trendy Toolkit](https://labzero.com/blog/can-bun-eat-node-js-s-lunch-testing-the-trendy-toolkit?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [How I Add Test Ids To Front-End Components](https://glebbahmutov.com/blog/how-i-add-test-ids/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Enforcing coding style with @vercel/style-guide](https://mwskwong.com/blog/enforcing-coding-style-with-vercel-style-guide?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Modern frontend testing with Vitest, Storybook, and Playwright - Defined Networking](https://www.defined.net/blog/modern-frontend-testing/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Totally remdom, or How browsers zoom text](https://www.matuzo.at/blog/2023/how-browsers-zoom-text?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [A Journey Into Shaders](https://www.mayerowitz.io/blog/a-journey-into-shaders?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

HTML

- [Mastering DOM manipulation with vanilla JavaScript](https://phuoc.ng/collection/html-dom/)

- [HTML Web Components](https://blog.jim-nielsen.com/2023/html-web-components/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

CSS

- [Surprising Facts About New CSS Selectors Cloud Four](https://cloudfour.com/thinks/surprising-facts-about-new-css-selectors/)

- [Using CSS content-visibility to boost your rendering performance](https://blog.logrocket.com/using-css-content-visibility-boost-rendering-performance/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Workarounds for Buggy Gradients](https://keithjgrant.com/posts/2023/11/problematic-color-gradients-and-workarounds/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

Angular

- [What's Up With Angular with Mark Techson](https://syntax.fm/show/694/what-s-up-with-angular-with-mark-techson?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [A Comprehensive Guide to Angulars Defer Block](https://netbasal.com/a-comprehensive-guide-to-angulars-defer-block-468c74048df4?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Whats New with Angular v17?. Unveiling Angular 17: A Bold Leap](https://blog.stackademic.com/whats-new-with-angular-v17-7b8058079baf?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

React

- [Moving back to React](https://daily.dev/blog/moving-back-to-react?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) daily.dev switched from Preact to React for its frontend framework

- [Refreshing the Next.js App Router When Your Markdown Content Changes](https://www.steveruiz.me/posts/nextjs-refresh-content?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

SolidJS

- [SolidJS pain points and pitfalls (part 2)](https://vladislav-lipatov.medium.com/solidjs-pain-points-and-pitfalls-part-2-175aca906e98)

### UX / UI 📱

Let's start with the web designer's favorite tool, Figma, with 3 articles on the latest news.

- [Figma plugin API: diving into advanced algorithms & data structuresMartian Chronicles, Evil Martians team blog](https://evilmartians.com/chronicles/figma-plugin-api-dive-into-advanced-algorithms-and-data-structures?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700430573850/a99b0211-9acf-4391-a132-a1b5e691422c.jpeg)](https://evilmartians.com/chronicles/figma-plugin-api-dive-into-advanced-algorithms-and-data-structures?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Introducing AI to FigJam | Figma Blog](https://www.figma.com/fr/blog/introducing-ai-to-figjam/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

2 articles from Smashing magazine, as high quality as ever! Always recommended to read their articles

- [Creating Accessible UI Animations Smashing Magazine](https://www.smashingmagazine.com/2023/11/creating-accessible-ui-animations/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Designing Web Design Documentation Smashing Magazine](https://www.smashingmagazine.com/2023/11/designing-web-design-documentation/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Libre Arts - Is this radical redesign of GIMP possible now?](https://librearts.org/2023/11/radical-redesign-of-gimp/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) I really liked this article. As a former designer, Gimp was mostly my spare wheel BECAUSE of its interface.

- [The Guide to Design](https://start.uxdesign.cc/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) if you are looking for guidance, here's a starting point!

- [Understanding Accessibility](https://www.understandingaccessibility.com/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) A tool for web designers.

- [And the 2024 color of the year is...](https://uxdesign.cc/and-the-color-of-the-year-is-917e5333d6d2?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

### Work, productivity... 📇

- [AddyOsmani.com - Effective Engineering Teams](https://addyosmani.com/blog/effective-teams/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [10 hard-to-swallow truths they won't tell you about software engineer job](https://www.mensurdurakovic.com/hard-to-swallow-truths-they-wont-tell-you-about-software-engineer-job/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [The story about rice that made me understand great leadership](https://blog.crisp.se/2023/10/30/tomasbjorkholm/the-story-that-made-me-understand-great-leadership?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [The Architecture Behind A One-Person Tech Startup](https://anthonynsimon.com/blog/one-man-saas-architecture/)

- [The 100 Best Bits of Advice from 10 Years of First Round Review](https://review.firstround.com/100-best-bits-of-advice-from-first-round-review?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [A Guide to Public Speaking for Software Engineers](https://careercutler.substack.com/p/a-guide-to-public-speaking-for-software?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

### Misc 🗂️

- [The five principles of modern developer tools](https://knock.app/blog/the-five-principles-of-modern-developer-tools?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [URL explained - The Fundamentals](https://ittavern.com/url-explained-the-fundamentals/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) There's always something to discover with articles like this! Take this opportunity to review the basics

- [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700431386410/eb3dac0e-168e-49c1-b764-23fa83c8650e.png)](https://ittavern.com/url-explained-the-fundamentals/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [How We Automated Content Marketing to Acquire Users at Scale](https://engineering.atspotify.com/2023/11/how-we-automated-content-marketing-to-acquire-users-at-scale/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) - Spotify Engineering : Spotify Engineering

### Tutorials 💻

- [Vue 3 & Composition API - Full Project](https://www.youtube.com/watch?v=hNPwdOZ3qFU&ab_channel=TraversyMedia)

- [Build and Deploy an Amazing 3D Developer Portfolio in React with Three.js](https://youtu.be/FkowOdMjvYo?si=aQmPNy6B-p-rSYPo) If you want to create a stylish portfolio, this is the tutorial for you

- [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700430737633/8f42ac2c-0de9-4d18-86c8-6147e394f053.jpeg)](https://youtu.be/FkowOdMjvYo?si=aQmPNy6B-p-rSYPo)

### Tools & ressources 🔧

- Awesome tool!!! [Ribbon Shapes](https://css-generators.com/ribbon-shapes/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) - Get a **CSS-only** Ribbon Shape made with a **single-element** and customizable using **CSS variables**.

- [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700430267047/8163435b-0202-4337-869d-d93cf6bf6d6d.png)](https://css-generators.com/ribbon-shapes/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [it.tools](https://it-tools.tech/) Another valuable resource. This site will be your toolbox for all your needs. Converter, hash text, token generator, PDF signature checker and more...

- [cRonstrue](https://github.com/bradymholt/cRonstrue?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email): JavaScript library that translates Cron expressions into human readable descriptions

- [perfect-freehand](https://github.com/steveruizok/perfect-freehand?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email): Draw perfect pressure-sensitive freehand lines. You can export your signature as SVG for example!

- [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700430813663/2d8e0f8b-bd7d-4630-bfdd-64b494c94763.png)](https://github.com/steveruizok/perfect-freehand?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [CLONE UI](https://clone-ui.design/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) - Generate UI components with simple prompts

- [Patterns.dev](https://www.patterns.dev/) is a free online resource design, render, and performance patterns for building powerful web apps with vanilla JavaScript or modern frameworks.

- [usehooks-ts](https://github.com/juliencrn/usehooks-ts?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email): React hook library, ready to use, written in Typescript.

- [nextjs-use-php](https://github.com/bufferhead-code/nextjs-use-php?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email): Use PHP code right within your React / Next.js App. With use php;

### Videos 📼

- [Node.js Collab Summit 2023](https://www.youtube.com/playlist?list=PLyspMSh4XhLMSx9Bcdnt1aU1WdRnk3mZy#collabsummit) The playlist of videos (not too long) from the conference.

- [NextJS 14: You Missed The Best Part!](https://www.youtube.com/watch?v=xoVpFAXBats&ab_channel=JackHerrington)

- [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700431115484/15bdf813-41b7-4ec0-8f55-fe0bd47795fc.jpeg)](https://www.youtube.com/watch?v=xoVpFAXBats&ab_channel=JackHerrington)

- [A new approach to container and wrapper classes](https://www.youtube.com/watch?v=c13gpBrnGEw&ab_channel=KevinPowell) Kevin Powellas pedagogical as ever

### Podcasts, talks... 🎙️

- [JavaScript Jabber | JSJ 607](https://redcircle.com/shows/javascript-jabber/ep/813cd5ad-3cd9-44b7-b0d2-862d355bf93e?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) - RPC Resurgence: From Client-Server Applications to Next.js and Meta Frameworks

- [(JS Party #301) |> Changelog](https://changelog.com/jsparty/301?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email) - Building something new with Saron Yitbarek

2 episodes of Asian Efficiency about productivity

- [How Many Hours of Focus Time Are Enough? How To Break Phone Addiction? & More](https://www.asianefficiency.com/podcasts/482-popular-productivity-topics/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [The Art of Concentration: Mastering Mindfulness for Peak Performance](https://www.asianefficiency.com/podcasts/482w-attention-management/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

The French corner

- [Double Slash //74 - Les News Web Dev pour Novembre 2023](https://double-slash.dev/podcasts/newsnov23/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [![](https://cdn.hashnode.com/res/hashnode/image/upload/v1700430408493/e0a6301b-17b7-407c-8340-0c4292f815db.png)](https://double-slash.dev/podcasts/newsnov23/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [IFTTD #245 - Symfony : Naviguer entre contraintes et libert avec Grgoire Pineau](https://www.ifttd.io/episodes/symfony?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

- [Les IA s'entranent offshore pour gnrer des malwares destination des sangliers | Clever Cloud](https://www.clever-cloud.com/podcast/les-ia-sentrainent-offshore-pour-generer-des-malwares-a-destination-des-sangliers/?utm_source=tech-foutraque&utm_campaign=24&utm_medium=email)

💌 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. 
Please follow us to support our work!🙏 it helps us a lot!