TF #15 | Your weekly frontend digest
Tags: frontend, javascript, webdev, react
Published: 2023-09-18 20:34:02

🗞 Article of the week : [My thoughts on Bun and other Adventures](https://adventures.nodeland.dev/archive/my-thoughts-on-bun/?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

Bun, the new JavaScript runtime engine, made quite a splash in the developer world this week with the release of its v1, so you'll find quite a few articles on it. Don't worry, we still have plenty of other frontend resources to share with you!  
**We're also on** [**twitter/X**](https://twitter.com/tech_foutraque) **and** [**BlueSky**](https://bsky.app/profile/tech-foutraque.bsky.social) **. Don't hesitate to follow us, as we'll be sharing lots of sneak previews.**

### 🎨 Frontend

- [Server-Side Rendering (SSR) with Bun and React](https://alexkates.dev/server-side-rendering-ssr-with-bun-and-react?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [How Custom Property Values are Computed](https://moderncss.dev/how-custom-property-values-are-computed/)

- [Revealing Images With CSS Mask Animations](https://www.smashingmagazine.com/2023/09/revealing-images-css-mask-animations/?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [A new method to validate URLs in JavaScript](https://dev.to/stefanjudis/a-new-method-to-validate-urls-in-javascript-2023-edition-blogpost-2pe7-temp-slug-6217673)

- [How <Suspense/> and Components Streaming works in Next.js](https://hackernoon.com/how-lesssuspense-greater-and-components-streaming-works-in-nextjs?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [Parents & Owners in React: Data Flow](https://julesblom.com/writing/parents-owners-data-flow?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [A Guide to React Portals](https://semaphoreci.com/blog/react-portals?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [Web Components Accessibility FAQ](https://www.matuzo.at/blog/2023/web-components-accessibility-faq/)

- [Front Matter CMS - a bit different approach to content management](https://maciekpalmowski.dev/front-matter-cms-a-bit-different-approach-to-content-management/)

### Web performances

- [Stop Lazy Loading Product and Hero Images](https://cloudfour.com/thinks/stop-lazy-loading-product-and-hero-images/)

### 📱 UX / UI

- [Adobes Firefly generative AI tools are now generally available](https://www.theverge.com/2023/9/13/23871537/adobe-firefly-generative-ai-model-general-availability-launch-date-price?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [Redesigning Design Systems - Redesigning Design Systems](https://redesigningdesign.systems/index.html?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [Improving responsive data table UX with CSS](https://blog.logrocket.com/improving-responsive-data-table-ux-css/?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [The psychology behind highly effective landing pages](https://growth.design/case-studies/landing-page-ux-psychology?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

### 📇 Management, organisation

- [7 simple habits of the top 1% of engineers](https://engineercodex.substack.com/p/7-simple-habits-of-the-top-1-of-engineers?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [TBM 240: The Ultimate Guide to Developer Counter-Productivity](https://cutlefish.substack.com/p/tbm-240-the-ultimate-guide-to-developer?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [The Silent Killer of Your Operating Practice: Fear](https://review.firstround.com/the-silent-killer-of-your-operating-practice-fear?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [How to pass the interview for software engineering roles in Big Tech](https://www.lambrospetrou.com/articles/big-tech-software-interviews/)

- [Stop saying fail](https://longform.asmartbear.com/fail/)

### 📂 Miscellaneous

- [The Tyranny of the Marginal User](https://nothinghuman.substack.com/p/the-tyranny-of-the-marginal-user?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [37signals Dev Minding the small stuff in pull request reviews](https://dev.37signals.com/minding-the-small-stuff-in-pr-reviews/?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

### 💻 Tutorials

- [Can it be done in React Native? - Telegram Dark Mode](https://www.youtube.com/watch?v=vKYEFpO06Tk&ab_channel=WilliamCandillon)

- [Role-based Authentication in NextJs 13 using NextAuth](https://www.youtube.com/watch?v=urZ0iMugiiI&ab_channel=HamedBahram)

- [2hrs to code Mario with Auth + save scores](https://www.youtube.com/watch?v=1CVSI3MZNNg&ab_channel=CodewithAniaKub%C3%B3w)

### Tools & ressources

- [Radix Vue | Unstyled, accessible components for building highquality design systems and web apps in Vue](https://www.radix-vue.com/)

- [Shadcn/vue - Shadcn for Vue](https://www.shadcn-vue.com/)

- [Vite-react-boilerplate: A production ready, scalable starter template for Vite + React](https://github.com/RicardoValdovinos/vite-react-boilerplate?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [React-plock: The 1kB Masonry Grid for React.](https://github.com/askides/react-plock?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [SVGOMG - SVGO's Missing GUI](https://jakearchibald.github.io/svgomg/)

- [Utopia | Fluid Responsive Design](https://utopia.fyi/)

- [Qr-code: A no-framework, no-dependencies, customizable, animate-able, SVG-based HTML element.](https://github.com/bitjson/qr-code?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [CSS HD Gradients](https://gradient.style?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email) create beautiful, complex gradient in minute

- [Unpic-placeholder: Pure-CSS image placeholders](https://github.com/ascorbic/unpic-placeholder?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [Scroll-Driven Animations Debugger (DevTools Extension) Bram.us](https://www.bram.us/2023/09/12/scroll-driven-animations-debugger/)

- [un-static | Hassle free contact forms on your site](https://un-static.com/)

### 🔗 SEO

- [User Behavior and SEO: A Deep Dive](https://backlinko.com/user-behavior-and-seo?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

### 📼 Videos

- [Bun is disrupting JavaScript land](https://www.youtube.com/watch?v=dWqNgzZwVJQ&t=197s&ab_channel=Fireship)

- [My thoughts on Bune](https://www.youtube.com/watch?v=z_66kDwxwBI&ab_channel=LeeRobinson)

- [What CSS is Chris Coyier bad at?](https://www.youtube.com/watch?v=ZropSprSNfs&ab_channel=BadatCSS)

- [Accessibility for designers, with Stphanie Walter](https://www.youtube.com/watch?v=H6zVqfESWdI&ab_channel=Penpot)

### 🎙 Podcasts, talks...

- [The Knowledge Project Ep. 175 - Shreyas Doshi: Better Teams, Better Products](https://fs.blog/knowledge-project-podcast/shreyas-doshi/)

- [Syntax.fm #666 | Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button](https://syntax.fm/show/666/hackweek-projects-realtime-markdown-editor-and-a-hardware-recording-button)

- [JS Party #292 - Type War (what is it good for?)](https://changelog.com/jsparty/292?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [JavaScript Jabber 598 | Exploring the True Measure of User Experience: Core Web Vitals & Beyond](https://redcircle.com/shows/javascript-jabber/ep/50b62d02-2caa-4bb0-8c08-3488390f9ece?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

- [Stop Reacting, Start Acting: How 30 Minutes Can Transform Your Productivity - Asian Efficiency](https://www.asianefficiency.com/podcasts/473w-stop-reacting-start-acting/)

For french speakers :

- [Message caractre informatique - LEurope lgifre avec des chips pour fiabiliser les mtriques de son Skyblo](https://www.clever-cloud.com/podcast/88-leurope-legifere-avec-des-chips-pour-fiabiliser-les-metriques-de-son-skyblog/)

- [If This Then Dev - Scuriser la donne : Scuriser le contenu plutt que le contenant](https://ifttd.io/securiser-la-donnee/)

- [Front-End Chronicles #18 - De JSLint ESLint, l'volution des principaux linters JavaScript](https://podcloud.fr/podcast/front-end-chronicles/episode/front-end-chronicles-numero-18-de-jslint-a-eslint-levolution-des-principaux-linters-javascript?utm_source=tech-foutraque&utm_campaign=15&utm_medium=email)

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