TF #27 | Your weekly frontend digest
Tags: webdev, javascript, programming, react
Published: 2023-12-11 11:19:22

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

---

🗞 **Article of the week :** [Astro 4.0](https://astro.build/blog/astro-4/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

---

### Frontend 🎨

- [Making SVG Loading Spinners: An Interactive Guide | fffuel](https://fffuel.co/svg-spinner/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Revolutionising the way art collections are presented online](https://engineering.q42.nl/oculi-mundi/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702284776376/e9924f76-4ddf-4f94-9217-20b354f092e5.jpeg)

- [Build an OTP input field Phuoc Nguyen](https://phuoc.ng/collection/html-dom/build-an-otp-input-field/)

- [Best Practices using React Server Components with a Headless CMS | Cosmic](https://www.cosmicjs.com/blog/best-practices-using-react-server-components-with-a-headless-cms?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Getting Started with React Native Skia (2023)](https://shopify.engineering/getting-started-with-react-native-skia?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [CSS { In Real Life } | Oh No, Overflow!](https://css-irl.info/oh-no-overflow/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [You don't need JavaScript for that - HTMHell](https://www.htmhell.dev/adventcalendar/2023/2/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Creative Coding - SVG](https://svg.bradwoods.io/lessons/viewbox?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [HTML Web Components Are Having a Moment Cloud Four](https://cloudfour.com/thinks/html-web-components-are-having-a-moment/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702284765008/32bfaa56-5559-4471-b23d-188387a1c78b.webp)

###  

Web performances

- [Web Performance Calendar Why web perf tools should be reporting website carbon emissions](https://calendar.perfplanet.com/2023/why-web-perf-tools-should-be-reporting-website-carbon-emissions/)

- [Web Performance Calendar An Informed Pre-caching Strategy for Large Sites](https://calendar.perfplanet.com/2023/informed-pre-caching-strategy-for-large-sites/)

 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702284754022/8f4a6f0c-add5-4bec-aba2-762e329da79c.png)

- [SpeedCurve | Does Interaction to Next Paint actually correlate to user behavior?](https://www.speedcurve.com/blog/INP-user-experience-correlation/)

### UX / UI📱

- [Email Design Trends for 2024 - Designmodo](https://designmodo.com/email-design-trends-2024/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702284739406/e58baf24-71bc-4e4d-9630-310a41d3fff7.jpeg)

- [Readymag Websites of the Year 2023](https://readymag.com/websites-of-the-year?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Getting better feedback on your work | hellojames](https://hellojames.co.uk/writing/better-feedback/)

- [Is the flat design trend finally over? | UX Collective](https://uxdesign.cc/is-the-flat-design-trend-finally-over-1e531ceb0ffa?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702284712040/bf900f44-95ff-4248-86f2-03e597d2718e.jpeg)

### Management, organisation 📇

- [How Google takes the pain out of code reviews, with 97% dev satisfaction](https://engineercodex.substack.com/p/how-google-takes-the-pain-out-of?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Create technical leverage: workflow improvements & product capabilities](https://lethain.com/create-technical-leverage/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Ship / Show / Ask](https://martinfowler.com/articles/ship-show-ask.html?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Beyond the Code - An Engineers Battle Against Knowledge Loss allegro.tech](https://blog.allegro.tech/2023/10/battle-against-knowledge-loss.html?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Getting better feedback on your work | hellojames](https://hellojames.co.uk/writing/better-feedback/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Synchronizing concurrent teams](https://blog.ploeh.dk/2023/11/27/synchronizing-concurrent-teams/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Reshaping the tree: rebuilding organizations for AI](https://www.oneusefulthing.org/p/reshaping-the-tree-rebuilding-organizations?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

### Misc🔋

- [Design Systems Database: Surf among topnotch Design Systems](https://designsystems.surf/?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Uber ETA - by NK - System Design Newsletter](https://newsletter.systemdesign.one/p/uber-eta?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Examples of Great URL Design - Jim Nielsens Blog](https://blog.jim-nielsen.com/2023/examples-of-great-urls/)

- [From Chaos to Cohesion: Architecting Your Own Monorepo - HedgeDoc](https://monadical.com/posts/from-chaos-to-cohesion.html#)

- [How to Create Stunning Slanted Containers with CSS](https://www.youtube.com/watch?v=emP8tWHtpwk&ab_channel=CSSWeekly)

### Video 🎬
- [How to Create Stunning Slanted Containers with CSS
](https://youtu.be/emP8tWHtpwk?si=dUBnBUaoPAN2KptY)

### Tools & ressources 🔧

- [Introducing StyleX](https://stylexjs.com/blog/introducing-stylex/)

- [TSDiagram - Diagrams as code with TypeScript](https://tsdiagram.com/)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702284696704/1c9eb53b-7a9c-4176-801f-62ff6b5bd6bf.png)

- [Remix-json-routes: A Remix package to allow custom route definition via JSON or React elements](https://github.com/brophdawg11/remix-json-routes?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

- [Lossless-json: Parse JSON without risk of losing numeric information](https://github.com/josdejong/lossless-json?utm_source=tech-foutraque&utm_campaign=27&utm_medium=email)

### Podcasts, talks...🎙️
🎧 Find our list of the best English and French podcasts [here](https://tinyurl.com/2s4738fb)

### Fun 👾

- [Internet Artifacts](https://neal.fun/internet-artifacts/)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1702284673380/1dbfb005-9a3b-4cde-bd93-b862abf84950.png)

---

💌 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