TF #26 | Your weekly frontend digest
Tags: webdev, javascript, programming, react
Published: 2023-12-04 08:47:23

🤩 If you find this newsletter useful and satisfying, please support us by subscribing and sharing it with others! Thank you.

---

🗞 Article of the week : [**Prompt Structure in Conversations with Generative AI**](https://www.nngroup.com/articles/ai-prompt-structure/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email) Great study case by NNGroup (as usual)

---

### Frontend 🎨

- [Head Toward the Light DOM](https://begin.com/blog/posts/2023-11-10-head-toward-the-light-dom?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Track Frontend JavaScript exceptions with Playwright fixtures](https://www.checklyhq.com/blog/track-frontend-javascript-exceptions-with-playwright/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Using on-demand resources for securely storing API keys in iOS apps](https://augmentedcode.io/2023/11/27/using-on-demand-resources-for-securely-storing-api-keys-in-ios-apps/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Elevate your CSS debugging skills with these Chrome DevTools tricks in 2024](https://utilitybend.com/blog/elevate-your-css-debugging-skills-with-these-chrome-devtools-tricks-in-2024/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

WebComponents

- [Messin around with web components. AlsoJavaScript, generally](https://www.leereamsnyder.com/web-component-and-somehow-also-js-101?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Web Components Eliminate JavaScript Framework Lock-in](https://jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

CSS

- [A Few Ways CSS Is Easier To Write In 2023](https://www.smashingmagazine.com/2023/11/few-ways-css-easier-write-2023/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701548697297/44423e22-fa50-40f2-8b3e-4db7390b7bf8.jpeg)](https://www.smashingmagazine.com/2023/11/few-ways-css-easier-write-2023/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [CSS Responsive Multi-Line Ribbon Shapes (Part 2)](https://www.smashingmagazine.com/2023/11/css-responsive-multi-line-ribbon-shapes-part2/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [How Bear does analytics with CSS](https://herman.bearblog.dev/how-bear-does-analytics-with-css/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

React

- [3D Glass Portal Card Effect with React Three Fiber and Gaussian Splatting](https://tympanus.net/codrops/2023/11/29/3d-glass-portal-card-effect-with-react-three-fiber-and-gaussian-splatting/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Concurrency in React 18 for busy bees](https://sinja.io/blog/guide-to-concurrency-in-react-18)

### Web performances

- [Psychology of Speed: A Guide to Perceived Performance](https://calibreapp.com/blog/perceived-performance?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Resource Loading at the Cutting Edge | performance.now() 2023](https://www.youtube.com/watch?v=MV034VqHv5Q&ab_channel=WebConferencesAmsterdam)

- [A New Technique for Image Optimization: SVG Short Circuiting](https://www.zachleat.com/web/svg-short-circuit/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Should AVIF be the dominant image format on the web?](https://tsev.dev/posts/2023-11-10-should-avif-be-the-dominant-image-format/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

### UX / UI📱

- [The State of UX in 2024](https://trends.uxdesign.cc/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email) Beautiful website to discover! We expected no less for this survey

- [The Usability of Augmented Reality](https://www.nngroup.com/articles/ar-ux-guidelines/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Creating Bento Grid Layouts](https://www.julienthibeaut.xyz/blog/create-bento-grid-layouts?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email) Everyone's talking about it! It's the design trend for 2024.

- [Trending Design - The Best Design Inspiration on 𝕏](https://trending.design/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

### Management, organisation 📇

- [Are remote workers more productive? Thats the wrong question. - Stack Overflow](https://stackoverflow.blog/2023/11/27/are-remote-workers-more-productive-that-s-the-wrong-question/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [5 Ways To Work Effectively With Someone You Really Dont Like](https://www.forbes.com/sites/tracybrower/2023/11/26/5-ways-to-work-effectively-with-someone-you-really-dont-like/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701532356194/7d83bac2-c06e-406d-8191-950061798ddc.jpeg)](https://www.forbes.com/sites/tracybrower/2023/11/26/5-ways-to-work-effectively-with-someone-you-really-dont-like/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [6 tiny wording tweaks to level up your communication as a software engineer](https://careercutler.substack.com/p/6-tiny-wording-tweaks-to-level-up?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [How to be a good manager at a startup (9 principles)](https://www.boringbusinessnerd.com/post/how-to-be-a-good-manager-at-a-startup?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [OKRs in Software Engineering](https://newsletter.getdx.com/p/software-engineering-okr?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Organizational danger zones](https://www.rubick.com/organizational-danger-zones/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Software Development and Postmortems](https://vadimkravcenko.com/shorts/dealing-with-failures-and-postmortems/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

### Misc🔋

- [Tech predictions for 2024 and beyond](https://www.allthingsdistributed.com/2023/11/tech-predictions-for-2024-and-beyond.html?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701532079994/f583fd52-075e-408d-bc84-da0286156cfb.png)](https://www.allthingsdistributed.com/2023/11/tech-predictions-for-2024-and-beyond.html?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [One year of ChatGPT](https://stackdiary.com/one-year-of-chatgpt/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [10 Weird HTML Hacks That Shaped The Internet](https://tedium.co/2023/11/24/weird-html-hacks-history/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Why we use AWS instead of Vercel to host our Next.js app](https://graphite.dev/blog/why-we-use-aws-instead-of-vercel?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Demystifying Web Push Notifications](https://pqvst.com/2023/11/21/web-push-notifications/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [An Introduction To Full Stack Composability](https://www.smashingmagazine.com/2023/11/introduction-full-stack-composability/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Prompt Structure in Conversations with Generative AI](https://www.nngroup.com/articles/ai-prompt-structure/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701532032717/d7b113b7-4ee7-4f8f-bbf8-8bf1b45a97f2.png)](https://www.nngroup.com/articles/ai-prompt-structure/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

---

🌟 If you derive value and satisfaction from this newsletter, we invite you to bolster our efforts by subscribing and spreading the word among your network. Your support is genuinely appreciated. Thank you! 🚀

---

### Tutorials 💻

- [Changes you made may not be saved alert on page leave in react app](https://robiul.dev/unsaved-changes-alert-and-unsubmitted-data-preservation-on-page-exit-in-react-app?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [How to create a React components ESM+CJS library](https://blog.coderspirit.xyz/blog/2023/09/15/create-a-react-component-lib/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Debug a React app with Visual Studio Code](https://leonardomontini.dev/vscode-react-debugger/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Building Real-Time Notifications with Upstash Redis, Next.js Server Actions and Vercel](https://upstash.com/blog/realtime-notifications)

### Tools & ressources 🔧

- [Knip](https://github.com/webpro/knip?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email): Find unused files, dependencies and exports in your JavaScript and TypeScript projects. Knip it before you ship it! Already talk about it but they released a new version with lot improvement.

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701531914258/29aee011-4b56-4dee-8653-decb9298cc29.png)](https://github.com/webpro/knip?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [XState v5 is here](https://stately.ai/blog/2023-12-01-xstate-v5?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Console Ninja](https://console-ninja.com/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email): log output right next to your code

- [Animotion](https://cssanimotion.pages.dev/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email) Visual CSS Animation Builder

- [CSS Hooks](https://css-hooks.com/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Tamagui](https://tamagui.dev/) React Native + Web UI kit

- [React-native-ai](https://github.com/dabit3/react-native-ai?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email): Full stack framework for building cross-platform mobile AI apps

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701550076982/d796c1c7-3666-4c92-8244-785d965251e6.png)](https://github.com/dabit3/react-native-ai?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)


- [Marker](https://github.com/VikParuchuri/marker?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email): Convert PDF to markdown quickly with high accuracy

- [Introduction | How React Works](https://incepter.github.io/how-react-works/docs/intro?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email) blog post series aiming to explain how react works under the hood

- [A Collaborative List Of 1400+ Public APIs For Developers](https://publicapis.dev/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email) Generally quite well known but I came across it again so I'll put the link back up.

### Videos 📼

- [[1hr Talk]](https://www.youtube.com/watch?v=zjkBMFhNj_g&ab_channel=AndrejKarpathy) [Intro to Large Language Models](https://i.ytimg.com/vi/zjkBMFhNj_g/maxresdefault.jpg)

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701531725962/e3e41fb2-c23c-4c09-bf4d-32efad00599a.jpeg)](https://i.ytimg.com/vi/zjkBMFhNj_g/maxresdefault.jpg)

- [AI: Grappling with a New Kind of Intelligence](https://www.youtube.com/watch?v=EGDG3hgPNp8&ab_channel=WorldScienceFestival) If you have 2 hours to spare, I suggest you watch this discussion

- [The Weird World in RGB](https://www.youtube.com/watch?v=uYbdx4I7STg&ab_channel=TechnologyConnections) Weird, but cool !

- [10 JavaScript changes you missed in 2023](https://www.youtube.com/watch?v=ANCm3oG7htM&ab_channel=Fireship)
    
[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701549153753/565b4865-ec01-4c74-b564-40d4c4043c24.jpeg")](https://www.youtube.com/watch?v=ANCm3oG7htM&ab_channel=Fireship)

- [Vue and Vite Status Update - Evan You](https://www.youtube.com/watch?v=Hz_zCR28oKE&ab_channel=VueConfToronto)

### Podcasts, talks...🎙

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

- [Syntax 698](https://syntax.fm/show/698/why-you-should-be-using-css-layers?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email): Why You Should Be Using CSS @Layers

- [JS Party #303](https://changelog.com/jsparty/303?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email) | Art of the state machine with Laura Kalbag from Stately.ai

- [ShopTalk 593](https://shoptalkshow.com/593/?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email): Beep & Texts, Tumblr, JavaScript & Web Components, & Cool Blog Post Ideas

- [Whiskey Web and Whatnot - Episode 119](https://whiskeywebandwhatnot.fm/cracking-the-podcasting-code-with-andrew-lisowski-and-justin-bennett?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email) - Cracking the Podcasting Code with Andrew Lisowski and Justin Bennett

Productivity and Working podcasts

- [Developer Tea :: The Dark Side of Optimism Bias](https://developertea.com/episodes/34dc210d-cf88-4dfa-90bd-4e21800c14d6?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [Developer Tea :: Fresh Eyes - How Anchoring Bias, Bandwagon Effect, Status Quo Bias, and Uniqueness Bias Interact When Joining New Groups](https://developertea.com/episodes/225ab48c-c693-42e8-9abc-35db7f6edbba?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email)

- [The Productivity Show #484](https://www.asianefficiency.com/podcasts/484w-embracing-gratitude/) - Embracing Gratitude and Positivity into December and Beyond
    
[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701549206279/757a71a0-8da1-4725-9789-4d6183393231.jpeg)](https://www.asianefficiency.com/podcasts/484w-embracing-gratitude/)
    

The French corner

- [IFTTD #247](https://www.ifttd.io/episodes/environnement-et-numerique?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email) - Environnement et Numrique : Le dev est-il une rponse tout ? avec Gilles Babinet

- [AXOPEN](https://podcast.ausha.co/axopen/intelligence-artificielle-developpement-informatique-possibilites-limites?utm_source=tech-foutraque&utm_campaign=26&utm_medium=email) | Intelligence artificielle et dveloppement informatique : explorer les frontires des possibles

---

💌 If you like this newsletter, don't hesitate to subscribe, to share it and support us! 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. Thank you!