TF #17 | Your weekly frontend digest
Tags: webdev, programming, javascript, react
Published: 2023-10-01 20:40:20


🗞 Article of the week [State of HTML 2023](https://survey.devographics.com/fr-FR/survey/state-of-html/2023?utm_source=tech-foutraque&amp;utm_campaign=17&amp;utm_medium=email)


📬 Don't hesitate to subscribe to our [newsletter](https://tinyurl.com/mpfsubep) so you don't miss a thing !  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.

---

The State of HTML survey, led by Lea Verou, aims to track the evolution of the web platform and influence browsers and standards for web improvement, so if you want to make an impact, now is the time!

Discover Vue.js 3's secrets, unravel the Closure Compiler saga, and learn why TypeScript reigns supreme. Elevate your design game with UX/UI challenges, explore management insights, and read cool articles like the "Musk Algorithm."

Dive into tutorials, tools, and resources for hands-on learning. Watch captivating videos, tune into podcasts, and take a look at the French tech scene. W  
Don't miss out on the latest insights, trends, and tools in the ever-evolving world of frontend!

### Frontend 🎨

* [Speeding up the JavaScript ecosystem - Polyfills gone rogue](https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-6/)
    
* [Bun hype. How we learned nothing from Yarn](https://dev.to/thejaredwilcurt/bun-hype-how-we-learned-nothing-from-yarn-2n3j?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [The Saga of the Closure Compiler, and Why TypeScript Won](https://effectivetypescript.com/2023/09/27/closure-compiler/)
    
* [Comprehensive Guide to Vue.js 3 State Management with Vuex](https://chintanonweb.medium.com/comprehensive-guide-to-vue-js-3-state-management-with-vuex-f1df4eb5a4a2?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [How Smashing Magazine Uses TinaCMS To Manage An Editorial Workflow](https://www.smashingmagazine.com/2023/09/smashing-magazine-tinacms-manage-editorial-workflow/)
    
* [The Path To Awesome CSS Easing With The linear() Function](https://www.smashingmagazine.com/2023/09/path-css-easing-linear-function/?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Upgrading frontend dependencies with confidence | Docusaurus](https://docusaurus.io/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Best Practices for Developing Complex Form-Based Apps with React Hook Form and TypeScript Support](https://orizens.com/blog/best_practices_for_developing_complex_form-based_apps_with_react_hook_form_and_typescript_support/)
    

### Web performances⚡

* [How Whop improved their Real Experience Score by 200% with the Next.js App Router – Vercel](https://vercel.com/customers/how-whop-improved-their-real-experience-score-by-200-with-the-next-js-app?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Cloudflare Fonts: enhancing website font privacy and speed](https://blog.cloudflare.com/cloudflare-fonts-enhancing-website-privacy-speed/)
    

### UX / UI📱

* [Design System Challenge: Rebranding 100+ touchpoints in under 9 months](https://medium.com/@robinwesterhoff/design-system-challenge-rebranding-100-touchpoints-in-under-9-months-ca5d9af416eb?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [How to create a color ramp used in design systems](https://uxdesign.cc/how-to-create-a-color-ramp-used-in-design-systems-2edd5b93854c?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [8 more micro tips for remarkably better typography](https://betterwebtype.com/8-more-tips-for-remarkably-better-typography/?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Color for brand designers working with product teams](https://uxdesign.cc/color-for-brand-designers-working-with-product-teams-3a0edb7b3cb9?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    

### Management, organisation 📇

Tech isn't just about development; it also demands human skills, which are reflected in management and leadership. This section offers topics with consistently interesting perspectives for a fulfilling career.

* [How (not) to apply for a software job](https://benhoyt.com/writings/how-to-apply/?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [What Predicts Software Developers’ Productivity?](https://newsletter.getdx.com/p/factors-of-developer-productivity?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [How To Opt Out Of The Career Ladder](https://devinterrupted.substack.com/p/how-to-opt-out-of-the-career-ladder?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [5 Rules That Will Drive a Long, Healthy Career](https://theskip.substack.com/p/5-rules-that-will-drive-a-long-healthy?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Building an onboarding plan for engineering managers](https://leaddev.com/process/building-onboarding-plan-engineering-managers?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Influence: Lessons from a Staff Engineer and ex-Twitter 8-year Tech Lead](https://careercutler.substack.com/p/influence-lessons-from-a-staff-engineer?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [How many direct reports should a manager have?](https://theengineeringmanager.substack.com/p/how-many-direct-reports-should-a?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Solving the Engineering Strategy crisis](https://lethain.com/solving-the-engineering-strategy-crisis/)
    
* [Work Has Changed. Here's What We Might Do About It | Figma Blog](https://www.figma.com/fr/blog/work-has-changed/)
    
* [Why you should use different leadership styles?](https://newsletter.techworld-with-milan.com/p/are-you-aware-that-you-should-use?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    

### Misc🔋

In this section, you'll find all articles related, either directly or indirectly, to programming or tech, but not specifically to frontend.

* [The Musk Algorithm](https://world.hey.com/dhh/the-musk-algorithm-977bf312?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [🚨🚨 That's a lot of YAML 🚨🚨](https://noyaml.com/?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Working Remotely Can More Than Halve an Office Employee's Carbon Footprint](https://www.scientificamerican.com/article/working-remotely-can-more-than-halve-an-office-employees-carbon-footprint/?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [How to write for Gen Z without being cringe?](https://uxdesign.cc/how-to-write-for-gen-z-without-being-cringe-4a1a781ec77b?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [When product falls under the (Air)table](https://www.leahtharin.com/p/when-product-falls-under-the-airtable?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [How to measure what marketing activities are actually driving revenue](https://newsletter.mkt1.co/p/marketing-analytics?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Twitter is Still Throttling Competitors’ Links - Check for Yourself](https://themarkup.org/investigations/2023/09/15/twitter-is-still-throttling-competitors-links-check-for-yourself?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [The Children Are Driving the Bus](https://adrianroselli.com/2023/09/the-children-are-driving-the-bus.html?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    

### Tutorials 💻

* [How to escape the container on only one side](https://www.youtube.com/watch?v=Ivk8Blw2VTI&ab_channel=KevinPowell) by the boss of CSS: Kevin Powell. You can check all his content [here](https://www.kevinpowell.co/?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email) and even subscribe to his newsletter
    
* [Token based authentication with Fastify, JWT, and Typescript](https://thatarif.in/posts/token-based-authentication-with-fastify-jwt?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    

### Tools & ressources 🔧

* [Paisa](https://paisa.fyi/?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email) Open source finance manager
    
* [Schollz/croc](https://github.com/schollz/croc?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email): Easily and securely send things from one computer to another
    
* [Naptha/tesseract.js:](https://github.com/naptha/tesseract.js?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email) Pure Javascrhereipt OCR for more than 100 Languages 📖
    
* [Chatgpt.js](https://chatgpt.js.org/#/) - A powerful client-side JavaScript library for ChatGPT
    
* [Tezumie/Image-to-Pixel:](https://github.com/Tezumie/Image-to-Pixel?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email) An editor that converts images to pixel art, add dither, set palettes, and more! Made entirely in p5js.
    
* [Iconbundler](https://iconbundler.com/) Export SVG icons to React, Vue and Svelte
    
* [Gitify - GitHub notifications on your menu bar](https://www.gitify.io/)
    
* [SaaS Pricing Explorer - Find the right pricing model](https://explorer.hyperline.co/)
    
* [Theatre.js](https://www.theatrejs.com/) - animation toolbox for the web
    
* [Repo Trends](https://www.repotrends.com/) View and analyze trends in repository issues over time
    
* [React Chrono | React Chrono](https://react-chrono.prabhumurthy.com/)
    
* [AI Emojis](https://emoji.fly.dev/?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email) - Generate and find emojis
    

### Videos 📼

You can retrieve interesting topics from te btconferlin 2023:

* [Tammy Everts – The Psychology of Web Performance](https://www.youtube.com/watch?v=leQZOmD7IYQ&ab_channel=beyondtellerrand)
    
* [Shirley Wu – Take up Space](https://www.youtube.com/watch?v=UnPDy7--V6c&ab_channel=beyondtellerrand)
    
* [Piccia Neri – Dizzy Users Close Browsers: Balancing Creativity & Accessibility](https://www.youtube.com/watch?v=KYnvaOxEsN0&ab_channel=beyondtellerrand)
    

If you're interested in React Native, check out the videos from React Native EU 2023 featuring some great content, for example: 'React Native Animations in 2023 and Beyond - Catalin Miron.'

* [Callstack Engineers - Youtube channel](https://www.youtube.com/@CallstackEngineers/videos)
    

And finally a short video about Vue and Testing and another one on Raspberry 5

* [Perfect Vue Test Environment with Playwright and Vitest](https://www.youtube.com/watch?v=MxH3ApkuNMA&ab_channel=MarkusOberlehner)
    
* [Raspberry Pi 5: EVERYTHING you need to know](https://www.youtube.com/watch?v=nBtOEmUqASQ&ab_channel=JeffGeerling)
    

### Podcasts, talks...🎙️

We started with Syntax FM and 3 great episodes (Their productivity and consistency will always impress me!)

* [Reacting to State of CSS Survey - Syntax Podcast 672](https://syntax.fm/show/672/reacting-to-state-of-css-survey?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Tauri Vs Electron - Desktop Apps with Web Tech - Syntax Podcast 671](https://syntax.fm/show/671/tauri-vs-electron-desktop-apps-with-web-tech?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Getting Hired, Interviewing, and Why Recruiters Suck with Taylor Desseyn - Syntax Podcast 673](https://syntax.fm/show/673/getting-hired-interviewing-and-why-recruiters-suck-with-taylor-desseyn?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    

Other great fonrtend podcasts.

* [JS Party #294 - Reports of Node's death are greatly exaggerated with Matteo Collina & James Snell](https://changelog.com/jsparty/294?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [JavaScript Jabber | RedCircle](https://redcircle.com/shows/javascript-jabber/ep/35068d0c-e1ed-4d2b-af0e-0a1f38a2b87b?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Whiskey Web and Whatnot - Episode 110 - SST, AWS, and Ember with Dax Raad](https://whiskeywebandwhatnot.fm/sst-aws-and-ember-with-dax-raad?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    
* [Automation: Become Super Efficient and Effective With The Right Tools](https://www.asianefficiency.com/podcasts/475w-automation/)
    

The French Corner 🇫🇷

* [If This Then Dev - Faire mieux que les GAFAM : Innover à 150 face à 10 000 ingénieurs](https://ifttd.io/faire-mieux-que-les-gafam/)
    
* [Message à caractère informatique #90 – Malgré le tonnerre sans fil, une fenêtre nouvelle d’IA s’ouvre sur un pommier dépourvu](https://www.clever-cloud.com/podcast/90-malgre-le-tonnerre-sans-fil-une-fenetre-nouvelle-dia-souvre-sur-un-pommier-depourvu/)
    
* [Double Slash //71 - Découvrir TailwindCSS en 2023](https://double-slash.dev/podcasts/tailwind23/)
    
* [135 grammes - Conversation avec un Aventurier de la Tech Rafi Haladjian](https://www.servicesmobiles.fr/conversation-avec-un-aventurier-de-la-tech-rafi-haladjian-90729?utm_source=tech-foutraque&utm_campaign=17&utm_medium=email)
    

--- 
💌 If you like this newsletter, don't hesitate to share it, like it and comment! Your support is really appreciated.