Andrey Okonetchnikov
@okonet.dev
UI Engineer specializing in design systems @ https://www.component-driven.dev. Author of 🚫💩 lint-staged. Also Monolisa.dev, colorsnapper.com and more.
I’ve been trying to use CSS text-box: developer.mozilla.org/en-US/docs/W... to replace capsize but was disappointed it doesn’t work well with overflow: hidden. Did anyone manage to make text truncation work with a trimmed text? Cc @markdalgleish.com
text-box - CSS: Cascading Style Sheets | MDN
The text-box CSS property is a shorthand that corresponds to the text-box-trim and text-box-edge properties, which together specify the amount of space to trim from the block-start edge and block-end ...
developer.mozilla.org
March 12, 2025 at 12:50 PM
I’ve been trying to use CSS text-box: developer.mozilla.org/en-US/docs/W... to replace capsize but was disappointed it doesn’t work well with overflow: hidden. Did anyone manage to make text truncation work with a trimmed text? Cc @markdalgleish.com
Current AIs are good at generating a lot of non-working code with a lot of confidence.
February 8, 2025 at 11:00 AM
Current AIs are good at generating a lot of non-working code with a lot of confidence.
Reposted by Andrey Okonetchnikov
JavaScript's date object has been tricky for years, but that will change soon.
The NEW Temporal API brings,
🌍 Easily handle time zones
📆 Precise date math
🕒 Parse ISO strings without errors
⌛ Durations, date ranges, and more.
Start exploring 👇
developer.mozilla.org/en-US/blog/...
The NEW Temporal API brings,
🌍 Easily handle time zones
📆 Precise date math
🕒 Parse ISO strings without errors
⌛ Durations, date ranges, and more.
Start exploring 👇
developer.mozilla.org/en-US/blog/...
JavaScript Temporal is coming | MDN Blog
A new way to handle dates and times is being added to JavaScript. Let's take a look at Temporal, what problems it solves, the current state, and what you'll find in the new documentation about it on MDN.
developer.mozilla.org
January 27, 2025 at 5:00 PM
JavaScript's date object has been tricky for years, but that will change soon.
The NEW Temporal API brings,
🌍 Easily handle time zones
📆 Precise date math
🕒 Parse ISO strings without errors
⌛ Durations, date ranges, and more.
Start exploring 👇
developer.mozilla.org/en-US/blog/...
The NEW Temporal API brings,
🌍 Easily handle time zones
📆 Precise date math
🕒 Parse ISO strings without errors
⌛ Durations, date ranges, and more.
Start exploring 👇
developer.mozilla.org/en-US/blog/...
Kids IR controlled crane broke but I refused to throw it away. After some trial and error and with the help of AI got it integrated into my HomeKit setup 😆
January 6, 2025 at 12:07 PM
Kids IR controlled crane broke but I refused to throw it away. After some trial and error and with the help of AI got it integrated into my HomeKit setup 😆
If you have upgraded to iOS 18 and hate dark icons (like I do) there is a way to change them back. Long press on the Home Screen, select Edit on top, enter Customize and choose the Light color. As a bonus, you can change the size as well.
November 30, 2024 at 4:56 PM
If you have upgraded to iOS 18 and hate dark icons (like I do) there is a way to change them back. Long press on the Home Screen, select Edit on top, enter Customize and choose the Light color. As a bonus, you can change the size as well.
Reposted by Andrey Okonetchnikov
🚀 TypeScript Pro Tip: say goodbye to runtime env variable surprises!
Valibot ensures your secrets are present and correctly typed before your app even starts.
👉 if something's missing, fail fast and fail early
👉 no more typos or guessing what's available
Valibot ensures your secrets are present and correctly typed before your app even starts.
👉 if something's missing, fail fast and fail early
👉 no more typos or guessing what's available
November 21, 2024 at 8:58 AM
🚀 TypeScript Pro Tip: say goodbye to runtime env variable surprises!
Valibot ensures your secrets are present and correctly typed before your app even starts.
👉 if something's missing, fail fast and fail early
👉 no more typos or guessing what's available
Valibot ensures your secrets are present and correctly typed before your app even starts.
👉 if something's missing, fail fast and fail early
👉 no more typos or guessing what's available
Reposted by Andrey Okonetchnikov
🎉 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 Andrey Okonetchnikov
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...
Reposted by Andrey Okonetchnikov
🔔 a reminder 🔔
I’m looking for my next client project, I'm a front-end developer and design systems consultant with almost immediate availability.
Get in touch if you’re ready to strengthen your design and dev workflows, need some gnarly front-end or Design System help!
www.alwaystwisted.com
🙏🖤
I’m looking for my next client project, I'm a front-end developer and design systems consultant with almost immediate availability.
Get in touch if you’re ready to strengthen your design and dev workflows, need some gnarly front-end or Design System help!
www.alwaystwisted.com
🙏🖤
Always Twisted - Design Systems Consultant & Front-End Architect
Hi, I’m Stu Robson, a Design Systems consultant and front-end developer. I help teams build scalable, accessible, and efficient design systems and front-end codebases that enhance collaboration and st...
www.alwaystwisted.com
November 5, 2024 at 5:29 PM
🔔 a reminder 🔔
I’m looking for my next client project, I'm a front-end developer and design systems consultant with almost immediate availability.
Get in touch if you’re ready to strengthen your design and dev workflows, need some gnarly front-end or Design System help!
www.alwaystwisted.com
🙏🖤
I’m looking for my next client project, I'm a front-end developer and design systems consultant with almost immediate availability.
Get in touch if you’re ready to strengthen your design and dev workflows, need some gnarly front-end or Design System help!
www.alwaystwisted.com
🙏🖤
Reposted by Andrey Okonetchnikov
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 Andrey Okonetchnikov
🌠 For years, the #1 most requested feature in CSS was Container Queries. We wanted them so badly!
Well, they’ve arrived… and none of us are using them. 😂
I think I know why, and I just published a new blog post that will hopefully change that!
Check it out:
www.joshwcomeau.com/css/containe...
Well, they’ve arrived… and none of us are using them. 😂
I think I know why, and I just published a new blog post that will hopefully change that!
Check it out:
www.joshwcomeau.com/css/containe...
A Friendly Introduction to Container Queries • Josh W. Comeau
It’s been a couple of years since container queries started landing in browsers… so why isn’t anyone using them? It turns out that container queries are kinda tricky; they’re not as straightforward as...
www.joshwcomeau.com
November 4, 2024 at 4:36 PM
🌠 For years, the #1 most requested feature in CSS was Container Queries. We wanted them so badly!
Well, they’ve arrived… and none of us are using them. 😂
I think I know why, and I just published a new blog post that will hopefully change that!
Check it out:
www.joshwcomeau.com/css/containe...
Well, they’ve arrived… and none of us are using them. 😂
I think I know why, and I just published a new blog post that will hopefully change that!
Check it out:
www.joshwcomeau.com/css/containe...
I must admit being at 🦋 now is like being on twitter a few years back before it became too toxic and too political.
November 5, 2024 at 6:52 AM
I must admit being at 🦋 now is like being on twitter a few years back before it became too toxic and too political.
A new post about different methods of composing components in React.js https://www.component-driven.dev/articles/composition-in-react
Different methods of composition in React
Component-driven design & development for the modern web
www.component-driven.dev
May 31, 2023 at 3:50 PM
A new post about different methods of composing components in React.js https://www.component-driven.dev/articles/composition-in-react