Mickaël Oth
@mickaeloth.dev
🌐 Web & mobile dev
✨ DX / UX / UI
🪄 JavaScript / TypeScript
💚 Vue.js
✨ DX / UX / UI
🪄 JavaScript / TypeScript
💚 Vue.js
Reposted by Mickaël Oth
How to determine if it's a nav with tabbable links or ARIA tabs:
Design comes first. Then, semantic HTML. If needed, ARIA follows.
Designers should first consider how users will engage with a widget and the rest of the page, always striving for the best user experience.
Design comes first. Then, semantic HTML. If needed, ARIA follows.
Designers should first consider how users will engage with a widget and the rest of the page, always striving for the best user experience.
December 9, 2024 at 7:53 PM
How to determine if it's a nav with tabbable links or ARIA tabs:
Design comes first. Then, semantic HTML. If needed, ARIA follows.
Designers should first consider how users will engage with a widget and the rest of the page, always striving for the best user experience.
Design comes first. Then, semantic HTML. If needed, ARIA follows.
Designers should first consider how users will engage with a widget and the rest of the page, always striving for the best user experience.
Reposted by Mickaël Oth
Excited for Advent of TypeScript, which starts tomorrow. It was a lot of fun last year, I made it to day 20. www.adventofts.com
Advent of TypeScript
Advent of TypeScript
www.adventofts.com
November 30, 2024 at 6:08 PM
Excited for Advent of TypeScript, which starts tomorrow. It was a lot of fun last year, I made it to day 20. www.adventofts.com
Reposted by Mickaël Oth
We are really considering dropping Vue 2 and going Vue 3 only, as the misalignments between them became harder to smooth out.
Any objections or ideas?
Any objections or ideas?
November 20, 2024 at 4:04 PM
We are really considering dropping Vue 2 and going Vue 3 only, as the misalignments between them became harder to smooth out.
Any objections or ideas?
Any objections or ideas?
Reposted by Mickaël Oth
🎉 After six incredible years at Framer, it’s time for my next step.
Today, we’re spinning Framer Motion out as its own independent open-source project, to better serve the whole community.
Introducing Motion. For React, and now, for everyone.
Today, we’re spinning Framer Motion out as its own independent open-source project, to better serve the whole community.
Introducing Motion. For React, and now, for everyone.
November 12, 2024 at 2:46 PM
🎉 After six incredible years at Framer, it’s time for my next step.
Today, we’re spinning Framer Motion out as its own independent open-source project, to better serve the whole community.
Introducing Motion. For React, and now, for everyone.
Today, we’re spinning Framer Motion out as its own independent open-source project, to better serve the whole community.
Introducing Motion. For React, and now, for everyone.
Reposted by Mickaël Oth
Recently, I released a universal visualizer and analyzer for JavaScript and CSS called `sonda`.
It works with @vite.dev, Rollup, esbuild, webpack, and @rspack.bsky.social and is more accurate than some existing tools.
www.npmjs.com/package/sonda
It works with @vite.dev, Rollup, esbuild, webpack, and @rspack.bsky.social and is more accurate than some existing tools.
www.npmjs.com/package/sonda
sonda
Universal visualizer and analyzer for JavaScript and CSS bundles. Works with Vite, Rollup, webpack, Rspack, and esbuild. Latest version: 0.4.1, last published: 10 days ago. Start using sonda in your p...
www.npmjs.com
November 3, 2024 at 9:30 AM
Recently, I released a universal visualizer and analyzer for JavaScript and CSS called `sonda`.
It works with @vite.dev, Rollup, esbuild, webpack, and @rspack.bsky.social and is more accurate than some existing tools.
www.npmjs.com/package/sonda
It works with @vite.dev, Rollup, esbuild, webpack, and @rspack.bsky.social and is more accurate than some existing tools.
www.npmjs.com/package/sonda
Reposted by Mickaël Oth
Reposted by Mickaël Oth
This "sliding drawer" tutorial from @jhey.bsky.social is incredible. Learned 10 CSS and JS utilities I've never heard of. Like watching a professional street fighter use every combo perfectly 🔥
craftofui.substack.com/p/building-a...
craftofui.substack.com/p/building-a...
November 7, 2024 at 3:35 PM
This "sliding drawer" tutorial from @jhey.bsky.social is incredible. Learned 10 CSS and JS utilities I've never heard of. Like watching a professional street fighter use every combo perfectly 🔥
craftofui.substack.com/p/building-a...
craftofui.substack.com/p/building-a...
Reposted by Mickaël Oth
JavaScript tip: Use Unicode regular expressions to match letters in any language.
\p{L} - Letter in any language
\p{Z} - Whitespace or invisible separator
\p{S} - Symbol
\p{N} - Number in any script
\p{P} - Punctuation
You can also match characters NOT belonging to the group by uppercasing \P
\p{L} - Letter in any language
\p{Z} - Whitespace or invisible separator
\p{S} - Symbol
\p{N} - Number in any script
\p{P} - Punctuation
You can also match characters NOT belonging to the group by uppercasing \P
![A screenshot showing a list of regular expressions attempting to match words from various languages.
Full code:
/^[a-z]+$/i.test("car"); // ✅ true
/^[a-z]+$/i.test("pão"); // ❌ false
/^[a-z]+$/i.test("知道"); // ❌ false
/^[a-z]+$/i.test("يعرف"); // ❌ false
/^\p{L}+$/u.test("car"); // ✅ true
/^\p{L}+$/u.test("pão"); // ✅ true
/^\p{L}+$/u.test("知道"); // ✅ true
/^\p{L}+$/u.test("يعرف"); // ✅ true](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:eaimln3uk5ntgmykcbxrmsyp/bafkreidqqa36kazqj74xsaasywc5qgiybdq37hfebdypkhcqy3i6etyavi@jpeg)
November 4, 2024 at 10:23 AM
JavaScript tip: Use Unicode regular expressions to match letters in any language.
\p{L} - Letter in any language
\p{Z} - Whitespace or invisible separator
\p{S} - Symbol
\p{N} - Number in any script
\p{P} - Punctuation
You can also match characters NOT belonging to the group by uppercasing \P
\p{L} - Letter in any language
\p{Z} - Whitespace or invisible separator
\p{S} - Symbol
\p{N} - Number in any script
\p{P} - Punctuation
You can also match characters NOT belonging to the group by uppercasing \P
Reposted by Mickaël Oth
I couldn't find any Vue starter pack, so I made one.
Comment if you're part of Vue community so I can add and follow you!
Cheers!
go.bsky.app/H8Tibki
Comment if you're part of Vue community so I can add and follow you!
Cheers!
go.bsky.app/H8Tibki
October 31, 2024 at 3:39 PM
I couldn't find any Vue starter pack, so I made one.
Comment if you're part of Vue community so I can add and follow you!
Cheers!
go.bsky.app/H8Tibki
Comment if you're part of Vue community so I can add and follow you!
Cheers!
go.bsky.app/H8Tibki
Reposted by Mickaël Oth
October 28, 2024 at 8:53 PM
Reposted by Mickaël Oth
allright I gave it a go: go.bsky.app/RtabAyB
pls giff me feedback, I tried my best to go wide and varied but it's hard 🫠
(if you have self-noms pls dm them)
pls giff me feedback, I tried my best to go wide and varied but it's hard 🫠
(if you have self-noms pls dm them)
November 1, 2024 at 6:49 PM
allright I gave it a go: go.bsky.app/RtabAyB
pls giff me feedback, I tried my best to go wide and varied but it's hard 🫠
(if you have self-noms pls dm them)
pls giff me feedback, I tried my best to go wide and varied but it's hard 🫠
(if you have self-noms pls dm them)
Reposted by Mickaël Oth
😮 Bluesky pro-tip: in the accessibility settings, you can enforce that the images you post must have alt text.
This is important for folks who use screen readers. Instead of seeing the image, the supplied text will be read to them instead.
This is important for folks who use screen readers. Instead of seeing the image, the supplied text will be read to them instead.
November 1, 2024 at 2:14 PM
😮 Bluesky pro-tip: in the accessibility settings, you can enforce that the images you post must have alt text.
This is important for folks who use screen readers. Instead of seeing the image, the supplied text will be read to them instead.
This is important for folks who use screen readers. Instead of seeing the image, the supplied text will be read to them instead.