📬 TF #18 | Your weekly frontend digest 🗞️
Tags: webdev, javascript, programming, frontend
Published: 2023-10-09 10:30:12

🗞 Article of the week : [Photoshop is now on the web! Enabled by WebAssembly, Web Components](https://medium.com/@addyosmani/photoshop-is-now-on-the-web-38d70954365a?utm_source=tech-foutraque&utm_campaign=18&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.

* * *

### Frontend 🎨

We start with CSS resources and various articles

- [CSS Subgrid](https://web.dev/css-subgrid/?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [Fun with stroke-dasharray](https://yuanchuan.dev/fun-with-stroke-dasharray?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [Limit the reach of your selectors with the CSS `@scope` at-rule - Chrome for Developers](https://developer.chrome.com/articles/at-scope/?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [The ups and downs of text-wrap: balance and a polyfill](https://bleech.de/en/blog/the-ups-and-downs-of-text-wrap-balance-and-a-polyfill/?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [An Interactive Intro to CRDTs | jakelazaroff.com](https://jakelazaroff.com/words/an-interactive-intro-to-crdts/)

- [The State of Web Frameworks on Deno](https://deno.com/blog/web-frameworks-on-deno?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [The Story of Third-party JavaScript](https://benv.ca/blog/posts/the-story-of-third-party-javascript?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [The Uphill Battle of Memoization | TkDodo's blog](https://tkdodo.eu/blog/the-uphill-battle-of-memoization?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

Still a lot of content on react, as usual

- [The future of rendering in React](https://prateeksurana.me/blog/future-of-rendering-in-react/)

- [Introduction to the New React useEffectEvent Hook - Semaphore](https://semaphoreci.com/blog/useeffectevent?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [Next.js 13 vs Remix: An In-depth case study](https://prateeksurana.me/blog/nextjs-13-vs-remix-an-in-depth-case-study/)

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

- [Deep dive into React's virtual DOM and reconciliation](https://borstch.com/blog/deep-dive-into-reacts-virtual-dom-and-reconciliation/?utm_source=tech-foutraque&utm_campaign=18&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/)

- [Building Responsive SaaS Apps with Chakra UI Components](https://javascript.plainenglish.io/building-responsive-saas-apps-with-chakra-ui-components-fec62609357?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

### Web performances

Harry Roberts is a reference in web performance, and every one of his articles and speeches is worth its weight in gold. I'm always on the lookout for anything he might say or do.

- [The Ultimate Low-Quality Image Placeholder Technique Harry Roberts](https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/)

### UX / UI📱

- [Whats the right font size in web design? - Pimp my Type](https://pimpmytype.com/font-size/)

- [The constant tension between design tools and soft skills](https://uxdesign.cc/the-constant-tension-between-design-tools-and-soft-skills-9f27ed832e7c?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [A Guide to Prototyping Automotive Interfaces](https://www.theturnsignalblog.com/blog/guide-to-prototyping-automotive-interfaces/?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [Dark Themed Web Design Inspiration](https://www.dark.design/?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [The complexity of telling stories in UX](https://uxdesign.cc/the-complexity-of-telling-stories-in-ux-f773ffe834d8?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

### Management, organisation 📇

Great content today! These 3 articles are pure gems. Hope you like them

- [Kind Engineering: How To Engineer Kindness](https://kind.engineering/)

- [How I stay motivated as a solo-creator | ( ) Herman's blog](https://herman.bearblog.dev/how-i-stay-motivated-as-a-solo-creator/?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [The power of soft skills in product development: Insights from engineering leaders](https://www.deptagency.com/insight/soft-skills-in-product-development-insights-from-dept-engineering-leaders/?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

### Misc🔋

This week, we talk about money, AI, database and architecture

- [Top AI News, September 2023 - Everypixel Journal](https://journal.everypixel.com/top-ai-news-september-2023?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [What does it take to raise capital, in SaaS, in 2023?](https://medium.com/point-nine-news/what-does-it-take-to-raise-capital-in-saas-in-2023-56d8f617714?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [How Miro Grows: Tactical Lessons From The $17.5B Whiteboard](https://www.news.aakashg.com/p/how-miro-grows-tactical-lessons-from?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [Avoid Common Pitfalls with Serverless Architecture](https://completecoding.io/avoid-serverless-pitfalls/)

- [Storage Challenges in the Evolution of Database Architecture | Postman Blog](https://dev.to/jansche/storage-challenges-in-the-evolution-of-database-architecture-1lll-temp-slug-6959238)

- [Websites in the dock](https://adactio.com/journal/20520?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

### Tutorials 💻

A good start if you want to take a look at Astro

- [Astro Web Framework Crash Course](https://www.youtube.com/watch?v=e-hTm5VmofI&ab_channel=freeCodeCamp.org)

### Tools & ressources 🔧

[rapidpages/rapidpages:](https://github.com/rapidpages/rapidpages?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email) Generate React and Tailwind components using AI. It's like Vercel's V0, but you don't have to wait for access. 😅

The components corner

- [Tailwind Elements - 500+ free Tailwind CSS components](https://tailwind-elements.com/)

- [Toastalia - Powerful, beautiful, free popups](https://toastalia.com/)

- [react-markdown](https://remarkjs.github.io/react-markdown/) a markdown component for React!

- [Bay/nice-modal-react: A modal state manager for React](https://github.com/eBay/nice-modal-react?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [Selection JS](https://simonwep.github.io/selection/) A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop

Some ressources about style, colors and AI...

- [Stylex](https://stylex-docusaurus.vercel.app/docs/?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email) (by Meta) a simple and easy to use CSS-in-JS library that gives you the developer experience of using inline styles in Javascript combined with the performance of statically generated atomic styles.

- [GitHub - Blazity/styled2tailwind: 🌀 Transform your Styled-Components into TailwindCSS with this handy codemod.](https://github.com/Blazity/styled2tailwind?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [QrGPT](https://www.qrgpt.io/) - QR Code Generator

- [AI Color Palette Generator -](https://aicolors.co/) Browse, Edit, Visualize and Generate Unique Palettes

- [timlrx/tailwind-nextjs-starter-blog:](https://github.com/timlrx/tailwind-nextjs-starter-blog?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email) This is a Next.js, Tailwind CSS blogging starter template

- [addyosmani/critical:](https://github.com/addyosmani/critical?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email) Extract & Inline Critical-path CSS in HTML pages

They're not tools, but useful resources nonetheless

- [The Internals of Deno](https://choubey.gitbook.io/internals-of-deno/) A book to read online to understand everything about Deno under the hood

- [React Knowledge Base - Obsidian Publish](https://publish.obsidian.md/react-knowledge-base/React+Knowledge+Base?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

### Videos 📼

Watch videos from the event: State of the Browser 2023. Great speakers and topics

- [London Web Standards - YouTube](https://www.youtube.com/@londonwebstandards8403)

A conversation to look at the relationship between designers, developers, and AI

- [Democratizing Design with Figma's Dylan Field](https://www.youtube.com/watch?v=i2KEc-VBzCc&ab_channel=a16z)

Always full of discoveries in "Learn with Jason". I like the format and the sharing of quality information.

- [Demystifying CSS Container Queries - YouTube](https://www.youtube.com/watch?v=eTTdl5CZDlo&ab_channel=LearnWithJason)

### Podcasts, talks...🎙

- [ShopTalk 585: Blog Redesign, Sounds on a Website, Accessibility Tests, and Safari 17](https://shoptalkshow.com/585/)

- [Syntax Podcast 676 | Google IDX - VS Code in the Browser with David East](https://syntax.fm/show/676/google-idx-vs-code-in-the-browser-with-david-east?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [JS Party #295 - Reflecting on Bun's big launch with Jarred Sumner, founder & CEO of Oven ()](https://changelog.com/jsparty/295?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [Jamstack Radio #135 | Maintainer Funding with Birk Jernstrm of Polar](https://www.heavybit.com/library/podcasts/jamstack-radio/ep-135-maintainer-funding-with-birk-jernstrom-of-polar?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [JavaScript Jabber #601 | Accessibility in Component Libraries with Maya Shavin](https://redcircle.com/shows/javascript-jabber/ep/954f09f8-e3cd-4e32-b0b6-d99226575c13?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [Developer Tea | Backlog Psychology - Practice Requires Rhythmic Predictability](https://developertea.com/episodes/033c4156-b9b6-4a06-9991-13268216e4b6)

- [Master The Q4 Sprint and Crush Your Goals In Less Time](https://www.asianefficiency.com/podcasts/476w-master-q4-sprint/)

🇫🇷 The French Corner 🇫🇷

- [Depuis Anvers, le mistral emporte lIA dans une java binaire Clever Cloud](https://www.clever-cloud.com/podcast/depuis-anvers-le-mistral-emporte-lia-dans-une-java-binaire/)

- [AXOPEN | Mesurer lempreinte carbone des dveloppements](https://podcast.ausha.co/axopen/greenframe-interview-empreinte-carbone-developpements?utm_source=tech-foutraque&utm_campaign=18&utm_medium=email)

- [IFTTD - If This Then Dev | Recrer un ordinateur 8 bits : Tout recrer, mme l'assembleur](https://ifttd.io/recreer-un-ordinateur-8-bits/)

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