TF #29 | Your weekly frontend digest
Tags: webdev, javascript, programming, react
Published: 2024-01-08 19:35:01

🗞 Article of the week : [2023 JavaScript Rising Stars](https://risingstars.js.org/2023/en?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

Lots of recap articles from 2023 and predictions for 2024. Also lots of tools and good reading! (as usual)

---

### Frontend 🎨

- [The View Transitions API And Delightful UI Animations (Part 1) Smashing Magazine](https://www.smashingmagazine.com/2023/12/view-transitions-api-ui-animations-part1/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [Why JavaScript promises arent technically monads | functional fascinations](https://rybicki.io/blog/2023/12/23/promises-arent-monads.html?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [2023 JavaScript Rising Stars](https://risingstars.js.org/2023/en?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649722848/8da7690f-bb29-4792-8e8c-1795af28e935.png)

- [Why I use Astro by Flavio Copes](https://flaviocopes.com/why-i-use-astro/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [Never underestimate HTML - HTMHell](https://www.htmhell.dev/adventcalendar/2023/24/)

- [What the heck is a homomorphic mapped type? andrea simone costa](https://andreasimonecosta.dev/posts/what-the-heck-is-a-homomorphic-mapped-type/)

- [Let's Bring Back JavaScript's `with()` Statement | Alex MacArthur](https://macarthur.me/posts/with?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [Making Sense Of Senseless JavaScript Features Smashing Magazine](https://www.smashingmagazine.com/2023/12/making-sense-of-senseless-javascript-features/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649975870/63054af0-6cd3-4c7b-9715-33c4bd12d533.png)

CSS

- [Container Style Queries | 12 Days of Web](https://12daysofweb.dev/2023/container-style-queries/)

- [Container Queries and Units Frontend Masters Boost](https://dev.to/1marc/container-queries-and-units-3lf0-temp-slug-1613476)

Vue

- [Announcing Vue 3.4 | The Vue Point](https://blog.vuejs.org/posts/vue-3-4?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [What to expect from Vue.js in 2024](https://vueschool.io/articles/news/what-to-expect-from-vue-js-in-2024/)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704650177692/8393d626-d0cd-48d1-a49b-10cd70a67b38.png)

WebComponent

- [Web components in VS Code 12 Days of Web Components](https://hawkticehurst.com/writing/12-days-of-web-components/day-5/)

- [Alternate Futures for Web Components The Ethically-Trained Programmer](https://blog.carlana.net/post/2023/web-component-alternative-futures/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

React

- [React Server Components: the Good, the Bad, and the Ugly](https://www.mayank.co/blog/react-server-components/)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704650075812/ead6ced8-c5b3-4fe7-a31d-223c3b301bde.png)

- [Concurrent React, External Stores, and Tearing](https://interbolt.org/blog/react-ui-tearing/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [How Lee Robinson created his Guestbook, and you can do it too - Bejamas](https://bejamas.io/blog/how-to-create-a-guestbook/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

### Web performances

- [Web Performance Calendar Digging through Chrome traces: an introduction with an example](https://calendar.perfplanet.com/2023/digging-chrome-traces-introduction-example/)

- [Web Performance Calendar A checklist for CLS scenarios](https://calendar.perfplanet.com/2023/a-checklist-for-cls-scenarios/)

### UX / UI📱

- [Figma and Adobe are abandoning our proposed merger | Figma Blog](https://www.figma.com/fr/blog/figma-adobe-abandon-proposed-merger/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [Top UI/UX Design Trends of 2024 | Shakuro](https://shakuro.com/blog/ui-ux-design-trends-for-2024?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [The Best Book Cover Designs of 2023](https://kottke.org/23/12/the-best-book-cover-designs-of-2023?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [From identities for a bakery to the Milanese orchestra, heres our most-read projects from 2023 The Brand Identity](https://the-brandidentity.com/resource/from-identities-for-a-bakery-to-the-milanese-orchestra-heres-our-most-read-projects-from-2023?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704650329871/6b1894fe-de33-4fc4-8cd5-c01784beb166.png)


- [Spotify Wrapped: 6 psychology principles that make it go viral every year](https://growth.design/case-studies/spotify-wrapped-psychology?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704650257905/a32a8768-c7e4-47a0-9be7-8c8476b2b6b4.png)

- [How to fix a bad user interface](https://www.scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack/)

- [Porsche Design System](https://designsystem.porsche.com/v3/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

### Management, organisation 📇

- [Why do programmers need private offices with doors? (Do Not Disturb)](https://blobstreaming.org/why-do-programmers-need-private-offices-with-doors-do-not-disturb/)

- [How we work asynchronously - by Ian Vanagas](https://newsletter.posthog.com/p/how-we-work-asynchronously?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649961681/1efbf0af-8f11-496d-b6b4-c7c717c6fcec.png)

- [First do it, then do it right, then do it better.](https://addyo.substack.com/p/first-do-it-then-do-it-right-then?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [New Ways of Working Playbook](https://newwaysofworking.notion.site/newwaysofworking/New-Ways-of-Working-Playbook-dc607e37f7894f4a9be698a6573cb97b?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [How to Write Great Tech Specs - by Nicola Ballotta](https://hybridhacker.email/p/how-to-write-great-tech-specs?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [3 scenarios when you should ask for help](https://leaddev.com/personal-development/3-scenarios-when-you-should-ask-help?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649596397/67be10ff-a181-4902-8aaa-137efa20abb2.png)

- [2024 Guide to Goals for Software Engineers](https://careercutler.substack.com/p/2024-guide-to-goals-for-software?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649754322/015e8437-ae34-4c5c-bb61-91213787844f.png )

- [We invested 10% to pay back tech debt; Here's what happened](https://blog.alexewerlof.com/p/tech-debt-day?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [8 Tips to Manage Your Time Better to Achieve Your Goals in 2024](https://creatoreconomy.so/p/tips-to-manage-your-time-better?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

> 🤩 If you find this newsletter useful and satisfying, please support us by [subscribing](https://techfoutraque.hashnode.dev/newsletter) and sharing it with others! Thank you.

### Misc🔋

- [Is NoSQL dead? - Turso Blog](https://blog.turso.tech/is-nosql-dead-fe57c5e4?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [Being Normal - Christopher Butler](https://www.chrbutler.com/being-normal?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [PostgreSQL 14 Internals : Postgres Professional](https://postgrespro.com/blog/pgsql/5969985?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [How Big is YouTube? - Ethan Zuckerman](https://ethanzuckerman.com/2023/12/22/how-big-is-youtube/?utm_source=hackernewsletter&utm_medium=email&utm_term=fav)

- [How to make your team read your mind - by Anton Zaides](https://zaidesanton.substack.com/p/how-to-make-your-team-read-your-mind?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [The 30 Best Pieces of Advice for Entrepreneurs in 2023](https://review.firstround.com/the-30-best-pieces-of-advice-for-entrepreneurs-in-2023?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

### Tutorials 💻

- [HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript](https://www.youtube.com/watch?v=0UvA7zvwsmg&ab_channel=TraversyMedia)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649919981/b6a59259-1bd2-4e91-8e08-f263ce27658c.png)

- [Full Stack React Developer Course with Appwrite](https://www.youtube.com/watch?v=Bvwq_S0n2pk&ab_channel=freeCodeCamp.org)

### Tools & resources 🔧

- [Face Photo Restorer](https://www.restorephotos.io/)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649823071/4ac209c1-8511-4c49-90fd-7b5ceec1fa7b.png)

- [Strawberry - Zero-Dependency, Build-Free JavaScript Framework](https://strawberry.quest/)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704650125455/98df80b9-9da7-492a-a345-e259ed8c6d4d.png)

- [Sailboat UI - Modern UI component library for Tailwind CSS](https://sailboatui.com/)

- [Observable Plot | The JavaScript library for exploratory data visualization](https://observablehq.com/plot/)

- [Cool Symbols and Fancy Text Symbols to Copy Paste 😍 Cool Symbols](https://fancysymbol.com/)

- [Realtime Colors](https://www.realtimecolors.com/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704650099695/a4777a18-b6ae-4339-ae36-154c853a5891.png)

- [date-fns v3 is out!](https://blog.date-fns.org/v3-is-out/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [Color Designer - Simple Color Palette Generator](https://colordesigner.io/)

- [Front Tips | Frontend Development Video Tips and Tricks](https://front.tips/)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649873626/ee6ff7dd-b1e3-4839-848b-5f5bd8b61b05.png)

- [DevResume](https://devresume.app/)

- [StyleX](https://stylexjs.com/) Meta now offers a styling solution to compete with tailwind

- [React Aria](https://react-spectrum.adobe.com/react-aria/index.html?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704650045737/1a4d41c5-ee65-40b2-8918-1fb7efb34080.png)

### Videos 📼

- [Under the radar CSS features for your CSS reset](https://www.youtube.com/watch?v=cCAtD_BAHNw&ab_channel=KevinPowell)

- [Most TS devs don't understand 'satisfies'](https://www.youtube.com/watch?v=r1L35zxZQPE&ab_channel=MattPocock)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704650017938/d80dcc17-f074-455a-ae21-561793a2186e.png)

- [the ChatGPT store is about to launch lets get rich](https://www.youtube.com/watch?v=9T_wv6D8PYo&ab_channel=Fireship)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704650143764/f985f3a4-2352-451d-8805-90a33b29a1fa.png)

- [React Server Components: the Good, the Bad, and the Ugly - YouTube](https://www.youtube.com/watch?v=8DyzsSWNcDE&ab_channel=LeeRobinson)

- [Figma côté développeurs](https://www.youtube.com/watch?v=Gtb5_j2gZpE&ab_channel=Grafikart.fr) (French) Encore une très bonne vidéo de [grafikart](https://grafikart.fr/?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email) runissant le meilleur des 2 mondes, (dev et design)
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649846757/b8ae3d43-ef2c-4483-bde3-2353e5cf1a98.png)

### Podcasts, talks...🎙

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

- [2024 Predictions - Syntax #712](https://syntax.fm/show/712/2024-predictions?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email) I love the "predictions" articles or videos and seeing if the guys bet on the right bet or totally missed out.
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649770758/c4e5c6a0-f903-4ccb-876a-36e72bd24f91.png)

- [A Passwordless Future Passkeys with Anna Pobletts - Syntax #710](https://syntax.fm/show/710/a-passwordless-future-passkeys-with-anna-pobletts?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [The Surprisingly Exciting World of Print + PDF CSS - Syntax #711](https://syntax.fm/show/711/the-surprisingly-exciting-world-of-print-pdf-css?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [JSJ 613 - The Future of Authentication in JavaScript: An Inside Look into Passport JS with Jared Hanson](https://redcircle.com/shows/javascript-jabber/ep/befdbd3d-f93e-4cb9-ad66-426bf5711657?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [What's next in JavaScript (a TC39 update) featuring Daniel Ehrenberg from Bloomberg (JS Party #305) |> Changelog](https://changelog.com/jsparty/305?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [Whiskey Web and Whatnot - A whiskey fueled fireside chat with your favorite web developers.](https://whiskeywebandwhatnot.fm/)

Productivity

- [Developer Tea :: 9 Years - Persistence by Reducing Expectation](https://developertea.com/episodes/16882e2e-efab-4208-8627-019bf99654b6?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email)

- [3 Tips to Stay Motivated in 2024 (TPS489)](https://www.asianefficiency.com/podcasts/489-stay-motivated-2024/)

The french corner

- [IFTTD - Une année pleine d'IA ! Avec Quentin Adam](https://www.ifttd.io/liste-des-episodes?utm_source=tech-foutraque&utm_campaign=29&utm_medium=email) Comme tous les ans, l'épisode rcap de l'année avec le [CEO](https://twitter.com/waxzce?lang=fr) de Clever Cloud. Toujours très pertinent !
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704650467351/bc8c932f-ae12-4eb1-bae2-37e369f2af64.png)
    
- [Double Slash //77 - Les News Web Dev pour Nol 2023](https://double-slash.dev/podcasts/newsnoel23/) Double dose d'actu pour Double Slash avec l'épisode de Noel et de la nouvelle année !
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1704649695142/78f2fbb8-1ce4-4c89-a966-877adbc25784.png)

- [Double Slash //78 - Les News Web Dev janvier 2024](https://double-slash.dev/podcasts/news24w1/)

- [Steampunk Caf : histoire de la tech en Europe continentale (2/2) Tech Caf](https://techcafe.fr/steampunk-cafe-histoire-de-la-tech-en-europe-continentale-2-2/) (French) La suite encore meilleure que le premier pisode ! J'ai appris beaucoup de choses. Je vous le recommande !

---

💌 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