mbeaudru
@mbeaudru.com
Frontend ⚛️ dev
Modern JS Cheatsheet author ✏️
Working at Datadog, previously Deezer, Mirakl 🇫🇷
Modern JS Cheatsheet author ✏️
Working at Datadog, previously Deezer, Mirakl 🇫🇷
I spent some time over-engineering my new blog, and there are good reasons why 👀
mbeaudru.com/posts/why-i-...
mbeaudru.com/posts/why-i-...
Why I over-engineered this blog?
Exploring the benefits of doing your own blog from scratch
mbeaudru.com
December 16, 2024 at 1:06 PM
I spent some time over-engineering my new blog, and there are good reasons why 👀
mbeaudru.com/posts/why-i-...
mbeaudru.com/posts/why-i-...
Very exciting!
Running tests with JSDOM can be really painful when the test is about layout/scroll/CSS - hope this approach solves this problem 🙏
Running tests with JSDOM can be really painful when the test is about layout/scroll/CSS - hope this approach solves this problem 🙏
Running eight component tests for a complicated form in a *real browser* (!) in 768ms? This changes my stance on mainly using a mock DOM environment for testing!
@vitest.dev Browser Mode is a true paradigm shift!
@vitest.dev Browser Mode is a true paradigm shift!
December 8, 2024 at 8:11 PM
Very exciting!
Running tests with JSDOM can be really painful when the test is about layout/scroll/CSS - hope this approach solves this problem 🙏
Running tests with JSDOM can be really painful when the test is about layout/scroll/CSS - hope this approach solves this problem 🙏
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/
The dots have a color that matches the section of the code it corresponds to, which makes its understanding a breeze 💪
bennettfeely.com/clippy/
November 26, 2024 at 2:08 PM
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/
The dots have a color that matches the section of the code it corresponds to, which makes its understanding a breeze 💪
bennettfeely.com/clippy/
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...
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...
November 22, 2024 at 2:35 PM
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...
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...
Reposted by mbeaudru
🚀 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...
Explore how overflow: clip works in CSS and see why it’s useful with practical examples and demos.
🔗 ishadeed.com/article/over...
November 12, 2024 at 5:22 PM
🚀 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...
Explore how overflow: clip works in CSS and see why it’s useful with practical examples and demos.
🔗 ishadeed.com/article/over...
Reposted by mbeaudru
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
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
November 12, 2024 at 7:39 AM
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
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
Reposted by mbeaudru
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...
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...
November 9, 2024 at 9:51 AM
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...
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...
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...
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...
November 9, 2024 at 9:51 AM
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...
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...
Reposted by mbeaudru
Reposted by mbeaudru
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...
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...
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...
blog.kizu.dev
November 6, 2024 at 10:27 PM
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...
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...
I really miss the bookmarks feature - if anybody knows how to "save for later" a bsky post I'm all ears 🙏
November 4, 2024 at 12:18 PM
I really miss the bookmarks feature - if anybody knows how to "save for later" a bsky post I'm all ears 🙏
Great to see some love being given to webdev profiling 💪
💡 Tip: In Chrome DevTools you can now find memory issues more easily.
We recently added new filters to the "Memory" panel to find duplicate strings, objects retained by detached DOM nodes and other reasons when taking heap snapshots.
We recently added new filters to the "Memory" panel to find duplicate strings, objects retained by detached DOM nodes and other reasons when taking heap snapshots.
November 4, 2024 at 2:04 AM
Great to see some love being given to webdev profiling 💪
Replaced X app shortcut with 🦋, let’s see how it goes 👀
Looking forward sharing/learning about web tech here (JS/react/frameworks/dev)!
Looking forward sharing/learning about web tech here (JS/react/frameworks/dev)!
November 3, 2024 at 10:56 PM
Replaced X app shortcut with 🦋, let’s see how it goes 👀
Looking forward sharing/learning about web tech here (JS/react/frameworks/dev)!
Looking forward sharing/learning about web tech here (JS/react/frameworks/dev)!