TF #23 | Frontend digest
Tags: webdev, javascript, frontend
Published: 2023-11-13 08:50:35

🔺 **Articles of the week** : This week saw the "revolution" and "renewal" of angular with the release of v17. Many articles: [Introducing Angular v17](https://blog.angular.io/introducing-angular-v17-4d7033312e4b) or videos: [Special Angular Event](https://www.youtube.com/live/Wq6GpTZ7AX0?si=DbkbZHCLnDAwYEVf) are available.

***

### Frontend 🎨

CSS

- [View transitions and stacking context: Why does my CSS View Transition ignore z-index?](https://www.nicchan.me/blog/view-transitions-and-stacking-context/)

- [Speeding up the JavaScript ecosystem - Tailwind CSS](https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-8/)

- [CSS { In Real Life } | Messing About with CSS Gradients](https://css-irl.info/messing-about-with-css-gradients/?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [Why You Should Use px Units for margin, padding, & Other Spacing Techniques](https://ashleemboyer.com/blog/why-you-should-use-px-units-for-margin-padding-and-other-spacing-techniques?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [Better dynamic themes in Tailwind with OKLCH color magic](https://evilmartians.com/chronicles/better-dynamic-themes-in-tailwind-with-oklch-color-magic?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

Misc

- [Building modern Web Applications: 5 Essential Frontend Architecture Principles](https://www.workingsoftware.dev/5-essential-frontend-architecture-principles/)

- [Answers to common (web) accessibility questions](https://hidde.blog/a11y-faq/?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [How to Do a TypeScript Conversion](https://v5.chriskrycho.com/journal/how-to-do-a-typescript-conversion/)

- [Writing Components That Work In Any Frontend Framework](https://component-odyssey.com/articles/01-writing-components-that-work-in-any-framework?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [How to use the Fetch API in Node.js, Deno, and Bun](https://www.sitepoint.com/fetch-api-node-deno-bun/)

React

- [Why You Want React Query | TkDodo's blog](https://tkdodo.eu/blog/why-you-want-react-query?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [Headless Component: a pattern for composing React UIs](https://martinfowler.com/articles/headless-component.html?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [re-re-reselect Simplifying React state management](https://causal.app/blog/re-re-reselect?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [A Complete Guide to Session Management in Next.js](https://clerk.com/blog/complete-guide-session-management-nextjs?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

***

### Web performances ⚡

- [Chromium Blog:](https://blog.chromium.org/2023/11/how-core-web-vitals-saved-users-10000.html?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email) How Core Web Vitals saved users 10,000 years of waiting for web pages to load

- [Why We Need a Green Perf Metric](https://www.youtube.com/watch?v=DXX4hkV7XOI&ab_channel=WebConferencesAmsterdam)

- [Optimizing React applications](https://perfnow.nl/_downloads/2023/Optimizing-React-Applications.pdf?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email) (PDF)

This was the 4th edition of [performance.now](http://performance.now)() a web performance event. Haven't seen a video yet, but I found a few slides from some of the talks.

- [Diagnosing INP & Breaking down long tasks](https://speakerdeck.com/nishugoel/diagnosing-inp-and-breaking-down-long-tasks?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)(slides)

- [The Unbearable Weight of Massive JavaScript performance.now()](https://speakerdeck.com/ryantownsend/the-unbearable-weight-of-massive-javascript-performance-dot-now?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)(slides)

- [Cache rules everything](https://speakerdeck.com/csswizardry/cache-rules-everything?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email) (slides)

***

### UX / UI 📱

- [GrilloPress - Why designers design forms](https://grillopress.github.io/2023/10/27/why-we-design-forms.html?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- The UI is absolutely mindblowing!!! => [2023 UX Research Tools Map | User Interviews](https://www.userinterviews.com/ux-research-tools-map-2023?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [Unlocking Growth](https://fusionauth.io/articles/ciam/unlocking-growth-low-friction-signup-process?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email): Why A Low Friction User Signup Process Is Crucial For Your Business

- [Minimalist Affordances: Making the right tradeoffs Lea Verou](https://lea.verou.me/blog/2023/minimalist-affordances/?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [In Search Of The Ideal Privacy Icon](https://www.smashingmagazine.com/2023/11/search-ideal-privacy-icon/?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

***

### Work, productivity... 📇

- [Tests Are Bad For Developers](https://www.amazingcto.com/tests-are-bad-for-developers/) There are other articles to discover that I recommend. You can also subscribe to the newsletter.

- [Productivity - Sam Altman](https://blog.samaltman.com/productivity?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [Why you need to know business](https://www.designbetter.co/business-thinking-for-designers/need-know-business?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [How to Build a Web Developer Portfolio That Would Stand Out](https://www.hostinger.com/tutorials/build-web-developer-portfolio?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [Ask Mathias: How do I delegate my work when I dont have enough time? | LeadDev](https://leaddev.com/personal-development/ask-mathias-how-do-i-delegate-my-work-when-i-dont-have-enough-time?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [The Human Side of Software Engineering Teams](https://newsletter.getdx.com/p/human-challenges-software-engineering?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [The Gulf Between Design and Engineering / Design Systems International](https://designsystems.international/ideas/the-gulf-between-design-and-engineering/?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [My process when starting a new job by Amy Hupe, content designer.](https://amyhupe.co.uk/articles/new-job-process/?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

***

### Misc 🗂️

- [Building In-Video Search. Empowering video editors with | by Netflix](https://netflixtechblog.com/building-in-video-search-936766f0017c?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [Testing with Intent: a Path to Embedded Accessibility](https://blog.scottlogic.com/2023/11/06/testing-with-intent-a-path-to-embedded-accessibility.html?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

***

### Tutorials 💻

- [CSS Positioning Crash Course](https://www.youtube.com/watch?v=7CACVgIZQ1k&ab_channel=CSSWeekly)

***

### Tips ✨

💡 I started to share some [tips](https://techfoutraque.hashnode.dev/series/tips) about web development and some tools. Take a look and upgrade your frontend skills and knowledge

***

### Tools & ressources 🔧

- [System-design-primer](https://github.com/donnemartin/system-design-primer?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email): Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards

- [Introducing React components for the Maps JavaScript API | Google Cloud Blog](https://cloud.google.com/blog/products/maps-platform/introducing-react-components-for-the-maps-javascript-api/?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [Super-expressive](https://github.com/francisrstokes/super-expressive?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email): Super Expressive is a zero-dependency JavaScript library for building regular expressions in (almost) natural language

- [Csv42](https://github.com/josdejong/csv42/): A small and fast CSV parser with support for nested JSON

- [Node-glob](https://github.com/isaacs/node-glob?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email): glob functionality for node.js

- [JSON Viewer + Editor](https://www.nekonik.com/projects/json-viewer-with-editor?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email) Neko Nik

- [Awesome-nodejs-security](https://github.com/lirantal/awesome-nodejs-security?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email): Awesome Node.js Security resources

***

### Videos 📼

- [JetBrains JavaScript Day 2023](https://www.youtube.com/playlist?list=PLQ176FUIyIUZmRHOyz_n9iy2qfHo4_GRT) all videos of the free virtual event about modern JavaScript and TypeScript development

- [The Story of Next.js](https://www.youtube.com/watch?v=BILxV_vrZO0&ab_channel=uidotdev) a 12-minute summary of the history of NextJs!

- [Simplifying Server Components by Mark Dalgleish - GitNation](https://portal.gitnation.org/contents/simplifying-server-components?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [How To NOT Get Screwed As A Software Engineer](https://www.youtube.com/watch?v=fcfVjd_oV1I&ab_channel=YCombinator)

- [Nathan Barry: Turning $1,000 in $320 Million](https://www.youtube.com/watch?v=ArZ-wCFsMwE&ab_channel=CallumMcDonnell) the incredible story of convertkit and its founder.

- [Why Signals Are Better Than React Hooks](https://www.youtube.com/watch?v=SO8lBVWF2Y8&ab_channel=WebDevSimplified)

***

### Podcasts, talks... 🎙️

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

Fewer episodes this week but Syntax FM released 3 very interesting ones.

- [You Should Be Using JavaScript Maps & Sets](https://syntax.fm/show/689/you-should-be-using-javascript-maps-and-sets?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [How To Dark Mode and Beyond](https://syntax.fm/show/690/how-to-dark-mode-and-beyond?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [Cloudflare Workers Are Next Level With Rita Kozlov And Brendan Irvine-Broque](https://syntax.fm/show/691/cloudflare-workers-are-next-level-with-rita-kozlov-and-brendan-irvine-broque?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email)

- [JavaScript Jabber 606](https://redcircle.com/shows/javascript-jabber/ep/790398a6-862f-4a9c-b9e6-70b5c048aeff?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email) Mastering ORM with TypeScript

- [ShopTalk 590](https://shoptalkshow.com/590/): Twisting Through Websites

- [Whiskey Web and Whatnot - Episode 116](https://whiskeywebandwhatnot.fm/engineering-management-vs-individual-contributor-travel-and-inflation-with-taylor-poindexter?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email) - Engineering Management vs Individual Contributor, Travel, and Inflation with Taylor Poindexter - Whiskey Web and Whatnot

- [Front-End Fire](https://podcasts.apple.com/us/podcast/web-dev-breakdown-remix-joins-the-vite-train/id1700169000?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email): Web Dev Breakdown: Remix joins the Vite Train, Docusaurus 3.0, and an Update on Vercel's AI Code Generator v0 on Apple Podcasts

- [Asian Efficiency](https://www.asianefficiency.com/podcasts/481w-adversity/) - From Setbacks to Success: Reclaiming Productivity in the Face of Adversity

- [IFTTD #244](https://www.ifttd.io/episodes/innovation-et-resultats?utm_source=tech-foutraque&utm_campaign=23&utm_medium=email) - Innovation et rsultats : Essayer, chouer, Essayer avec Sebastien Luttringer (French)

***

💌 If you like this newsletter, don't hesitate to share it. 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.