mbeaudru's Avatar

mbeaudru

@mbeaudru.com

Frontend ⚛️ dev Modern JS Cheatsheet author ✏️ Working at Datadog, previously Deezer, Mirakl 🇫🇷

66
Followers
381
Following
21
Posts
03.11.2024
Joined
Posts Following

Latest posts by mbeaudru @mbeaudru.com

Oh wow, I have to try this out 🙈 thanks for sharing this hidden gem!

On a side note, it makes me think I should not wait too long before adding a commenting section on the blog itself ^^

17.01.2025 09:08 👍 1 🔁 0 💬 0 📌 0

That’s still not the entire formula (I have thousand of stars, definitely didn’t starred that much this year)

My bet would be that it’s the sum of stars user gave + stars received 😵‍💫

31.12.2024 00:13 👍 1 🔁 0 💬 0 📌 0

I think the stars are not solely for the 2024 year but instead are « all time » - which is definitely a bit misleading 😅

Nice statsss btw 😎

30.12.2024 20:52 👍 1 🔁 0 💬 1 📌 0
Preview
Why I over-engineered this blog? Exploring the benefits of doing your own blog from scratch

I spent some time over-engineering my new blog, and there are good reasons why 👀

mbeaudru.com/posts/why-i-...

16.12.2024 13:06 👍 5 🔁 0 💬 1 📌 0

Very exciting!

Running tests with JSDOM can be really painful when the test is about layout/scroll/CSS - hope this approach solves this problem 🙏

08.12.2024 20:11 👍 5 🔁 0 💬 0 📌 0

Hopefully it will stick and webdev community will fully shift 🙏

03.12.2024 19:02 👍 2 🔁 0 💬 0 📌 0

Why the sad face? SSR/RSC is more exciting to you nowadays? :)

01.12.2024 18:45 👍 2 🔁 0 💬 0 📌 0

I would’ve loved this to be a poll 😅

CSR too!

01.12.2024 18:04 👍 1 🔁 0 💬 0 📌 0

Interesting use case! That should help when Chrome fails to reproduce accurately hardware results, which is not uncommon 😅

27.11.2024 08:28 👍 1 🔁 0 💬 1 📌 0
Screenshot of the UI to make & learn how to use CSS clip-path

Screenshot of the UI to make & learn how to use CSS clip-path

Recently tumbled on a nice CSS clip-path generator - I find it useful both to quickly make one, but also to learn how it works!

The dots have a color that matches the section of the code it corresponds to, which makes its understanding a breeze 💪

bennettfeely.com/clippy/

26.11.2024 14:07 👍 4 🔁 0 💬 0 📌 0

Great tool indeed!

What libraries do you like the best or recommend?

22.11.2024 17:20 👍 1 🔁 0 💬 0 📌 0

👋

Hosting my personal websites/blog on a VPS, it’s been very stable so far (6 months up)!

What I love the best is that it allows me to create a new project easily: create new DB, deploy the app, maybe a dedicated node server and voilà :)

DB in particular is comfortable, free plans are limited

22.11.2024 17:19 👍 1 🔁 0 💬 0 📌 0

👀

22.11.2024 15:28 👍 2 🔁 0 💬 0 📌 0

It's definitely more explicit & less prone to changes/refactoring issues indeed

I still am amused to the fact that ref callback calls are made on referential change though - but just for the sake of making things easier to understand for other devs it's probably not such a good idea

22.11.2024 15:24 👍 1 🔁 0 💬 0 📌 0
Leveraging useCallback + ref avoids to useEffect and is simpler to reason about

Leveraging useCallback + ref avoids to useEffect and is simpler to reason about

TIL that if you need to perform a DOM operation only after its created, you can simply leverage useCallback + ref!

Why? Because React will only re-run the ref passed callback if its reference changes 😮

Thanks @tkdodo.eu, read his post if you want a deeper understanding: tkdodo.eu/blog/avoidin...

22.11.2024 14:35 👍 2 🔁 0 💬 1 📌 0

👋

14.11.2024 09:47 👍 0 🔁 0 💬 0 📌 0
Video thumbnail

🚀 New Interactive Article: Overflow Clip

Explore how overflow: clip works in CSS and see why it’s useful with practical examples and demos.

🔗 ishadeed.com/article/over...

12.11.2024 17:22 👍 128 🔁 34 💬 0 📌 8
Screenshot of Chrome DevTools after right clicking a node. In the menu that pops up, "Capture node screenshot" is highlighted.

Screenshot of Chrome DevTools after right clicking a node. In the menu that pops up, "Capture node screenshot" is highlighted.

Capture node screenshot in Chrome DevTools is such a time saver. Especially when creating screenshots for an article.

No more dragging handles back and forth forever because you can never get it right and you're always still off by a pixel or two.

Right click node & find it in dropdown.
#DevTools

12.11.2024 07:39 👍 65 🔁 7 💬 5 📌 3
Search in VSCode using "page" keyword now shows the directory they are in first in the results, greatly improving search experience

Search in VSCode using "page" keyword now shows the directory they are in first in the results, greatly improving search experience

Tabs for page/layout.tsx files now show the directory they are in!

Tabs for page/layout.tsx files now show the directory they are in!

Tired of confusing NextJS page.tsx tabs in VSCode?

Using custom labels you can show the directory they're in, and it works when searching too!

How?

1. Open User Settings (JSON)
2. Add the following JSON config and enjoy!

gist.github.com/mbeaudru/aca...

09.11.2024 09:50 👍 1 🔁 1 💬 0 📌 0
Search in VSCode using "page" keyword now shows the directory they are in first in the results, greatly improving search experience

Search in VSCode using "page" keyword now shows the directory they are in first in the results, greatly improving search experience

Tabs for page/layout.tsx files now show the directory they are in!

Tabs for page/layout.tsx files now show the directory they are in!

Tired of confusing NextJS page.tsx tabs in VSCode?

Using custom labels you can show the directory they're in, and it works when searching too!

How?

1. Open User Settings (JSON)
2. Add the following JSON config and enjoy!

gist.github.com/mbeaudru/aca...

09.11.2024 09:50 👍 1 🔁 1 💬 0 📌 0
Preview
The TSConfig Cheat Sheet Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.

@mattpocock.com 's tsconfig cheat sheet is 💎
www.totaltypescript.com/tsconfig-che...

07.11.2024 15:56 👍 86 🔁 14 💬 3 📌 2
Recent CSS Bookmarks 19: Container Queries I originally wanted to write about something else today but, for some reason, did not have any motivation for it. But hey, let me then do the best thing I could do otherwise: share some other people’s...

Looking for some potential distractions?

Well, Roman Komarov has just put together a list of a bunch of fantastic articles on container queries, including a great introduction of them, great use cases, some future possibilities, and cool experiments

blog.kizu.dev/recent-css-b...

06.11.2024 22:28 👍 70 🔁 15 💬 2 📌 0

I really miss the bookmarks feature - if anybody knows how to "save for later" a bsky post I'm all ears 🙏

04.11.2024 12:18 👍 0 🔁 0 💬 0 📌 0

Great to see some love being given to webdev profiling 💪

04.11.2024 02:03 👍 2 🔁 0 💬 0 📌 0

Thank you ☺️ how long have you been around?

04.11.2024 01:59 👍 0 🔁 0 💬 1 📌 0

Replaced X app shortcut with 🦋, let’s see how it goes 👀

Looking forward sharing/learning about web tech here (JS/react/frameworks/dev)!

03.11.2024 22:56 👍 3 🔁 0 💬 1 📌 0