Berat

I love building beautiful things, and help each other. #Svelte #React #Solid #Qwik #Vue #Angular, #Typescript, #Flutter, #Dart, #Node, #Next.js #Nest.js #Node

[Berat @BeratSdev]

@Jakubantalik @raunofreiberg Same, bad performance, crashes the browser.

[jhey ʕ•ᴥ•ʔ @jh3yy]

table of contents marker w/ modern css 🧑‍🍳

.toc { scroll-target-group: auto; }
a:target-current { anchor-name: --active; }
.toc::after {
position-anchor: --active;
top: anchor(top);
}

fun progressive enhancement, no js 🤙

[Berat @BeratSdev]

@v0 @shadcn , really great work, can you please put search input for fonts, could be helpfully, thanks.

[Haz @diegohaz]

Use the standard Node.js "imports" field instead of TypeScript aliases:

[Berat @BeratSdev]

@ChallengesCss Is there we can have a rounded version of it?

[jhey ʕ•ᴥ•ʔ @jh3yy]

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

[George Moller @_georgemoller]

🚫 𝗔𝘃𝗼𝗶𝗱 Using a full context value in every component can trigger unnecessary re-renders.

✅ 𝗜𝗻𝘀𝘁𝗲𝗮𝗱 Use 𝘤𝘰𝘯𝘵𝘦𝘹𝘵 𝘴𝘦𝘭𝘦𝘤𝘵𝘰𝘳𝘴 to pull only the data you need. This reduces re-renders and improves performance.

[jhey ʕ•ᴥ•ʔ @jh3yy]

<table> highlighting with CSS :has() 💡

td:has(~ td:hover), /* previous sibling cells */
table:has(td:nth-of-type(3):hover) /* column cells */
tr:not(:first-of-type):has(~ tr:hover)
td:nth-of-type(3) {
background: var(--highlighted);
}

[CSS by T. Afif @ChallengesCss]

Updating the "inverted radius" shape to add two more variables to control the offset of inner curve.

https://t.co/psg33yqkZN

[Una 🇺🇦 @Una]

attr() is getting an upgrade!

Starting in Chrome 133 (stable rollout happening this month), you'll be able to access attributes in CSS as typed values beyond strings.

Here's an example of where that's pretty cool. Given:

<div data-rating="4.5">

You can use data-rating as a numerical value with:

attr(data-rating type(<number>)

So in this demo, I'm using that value to show a fill percentage in the stars (as a background gradient with a mask). I'm also able to use this value as a string (which was possible before) to represent its content as a string in a pseudo element. Two for one!

[jhey ʕ•ᴥ•ʔ @jh3yy]

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter()

label::after { content: counter(complete) '% complete'; }

translate the label using container query units ✨

translate: 0 calc(var(--p) * 1cqh);

[Julian Garnier @JulianGarnier]

An example of responsive, interruptible, draggable and auto-animated infinite carousel with the new anime.js v4 `createDraggable()` API.

[jhey ʕ•ᴥ•ʔ @jh3yy]

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙

.char {
animation-delay: calc(
sin((var(--index) / var(--total)) * 90deg) *
var(--duration)
);
}

[Berat @BeratSdev]

Good job to the whole Google (Flutter team) for their hard work, appreciated.

[Jesse Ezell @jezell]

React Native Skia uses MakeLazyImageFromTextureSource for video frames. We hacked this into Flutter web Jan 2023, a few days after trying to move to Flutter. Reported our findings in Flutter repo, and opened a ticket about Texture support mentioning this challenge and hoping there might be interest in enabling better video support (issue #119649).

A year and a half later, React Native Web ships a feature that does what we wanted to do in Flutter. Still no official support for this API in Flutter web.

[Berat @BeratSdev]

@noseratio I know Andrew, loved more Twitter than the X, but times changes, and has been a long journey,.

[Berat @BeratSdev]

Do you remember when you joined X? I do! #MyXAnniversary

[Berat @BeratSdev]

@jh3yy Amazing....

[Adam Argyle @argyleink]

PREVIOUSLY:
separate rulesets for light and dark

NOW:
one ruleset with `light-dark()`

[Electric @ElectricSQL]

We're excited to have @DrizzleORM as the first ORM to support PGlite 🎉🚀
• Run full Postgres embedded in your app with PGlite.
• At only 2.6mb, it's perfect for local-first apps!
https://t.co/lRA5cLXZ3U
https://t.co/xZj6TJl64x

[Anthony Fu 🦋 @antfu.me @antfu7]

Very cool and interactive blog post about micro-optimization with JavaScript, by romgrk
https://t.co/fJET0RLQAq