Sasha ⭐️

🍃 ui/ux engineer 🌙 ex-apple  •

[Cheng Lou @_chenglou]

My dear front-end developers (and anyone who’s interested in the future of interfaces):

I have crawled through depths of hell to bring you, for the foreseeable years, one of the more important foundational pieces of UI engineering (if not in implementation then certainly at least in concept):
Fast, accurate and comprehensive userland text measurement algorithm in pure TypeScript, usable for laying out entire web pages without CSS, bypassing DOM measurements and reflow

[Sasha ⭐️ @vibesbysasha]

I have been summoned ✨

tried out Claude + Pencil, can’t believe how fast this was designed/built 🤩

still need to tweak some stuff, but off the bat it looks amazing!

https://t.co/NN2DQ3vk1S

[andrew gao @itsandrewgao]

you can instantly 10x your vibecoded frontends by just learning what different ui components are called

ofc opus is creating generic slop, the only words you know are menu and button.

[Sasha ⭐️ @vibesbysasha]

@evniaglobal thanks for the feature 😊

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Tip! ✨

It's 2024 and you have a new way to make animated borders 🚀

.glow::after {
offset-path: rect(0 100% 100% 0 round var(--radius));
animation: loop;
}
@​keyframes loop { to { offset-distance: 100%; }}

Using the offset-* properties you can animate elements along the perimeter of others 😍

The rect() value gained support in Safari 17.2 🙌

To start, you create an element and put it inside your main element. For example, you put a span inside the button 🤙

<button>
<span data-glow />
Click me!
</button>

Make the element fill its parent with absolute positioning and inset

[data-glow] {
position: absolute;
inset: 0;
}

Now the good part, you use a pseudoelement on that element and define an offset-path

[data-glow]::after {
content: "";
offset-path: rect(0 auto auto 0 round var(--radius));
animation: loop 2.6s infinite linear;
}

With the rect value, you are saying the path fills the parent container:

top: 0
right: auto || 100%
bottom: auto || 100%
left: 0

Then you can use round to make sure the path uses the same radius as whatever the parent has

The @​keyframes animation merely animates the offset-distance of that pseudoelement to 100%

@​keyframes loop { to { offset-distance: 100%; }}

You can see this more clearly in the video 🫶

The offset-* properties also include an offset-anchor property. This allows you to dictate which point of the element follows the path. For example:

anchor-offset: 100% 50%;

This means that the "right, center" of the element will follow the perimeter of the parent element 🤙

Lastly, the visuals 🎨 For color, you can use a gradient such as a linear gradient to fill the pseudo-element.

[data-glow]::after {
background:
radial-gradient(
circle at right,
hsl(320 90% 100%),
transparent 50%
);
}

Then clip away everything so you only have the border and can still have translucent backgrounds, etc. Use a mask with mask-composite ✨ A little transparent border trick:

[data-glow] {
border: 2px solid transparent;
mask:
linear-gradient(transparent, transparent),
linear-gradient(white, white);
mask-clip: padding-box, border-box;
mask-composite: intersect;
}

Bit of a long one. Hope you find it useful 🙏

@CodePen link below 👇

[Wes Bos @wesbos]

🔥 As of today, CSS :has() is now supported in every browser!

This is a next-level selector that opens up a ton of new possibilities. Here are 10 hot tips for using CSS :has()

Details of each below

[Una 🇺🇦 @Una]

Stable today in Chrome 114 🎉:

🎁 CSS: text-wrap: balance
https://t.co/mvTBYZxsAc

🍿 HTML: popover API
https://t.co/LCNWobYJIg

⏱️ JS: scrollend event
https://t.co/0AvhkS1a61

🎥 Video:
https://t.co/0itohDvD5w

[Una 🇺🇦 @Una]

🤯🤯🤯

Checkout the slides here: https://t.co/rAewRI2B2h

And the slide framework he just open sourced, morphull: https://t.co/CVGhVIoi26

#smashingconf

[AdirCode @adircode]

Here's a fun concept - Filtering tags made with only pure #CSS (with no #javascript at all) using the :has selector 👍
Here's the @CodePen:
https://t.co/3AWJpfwG84

[Una 🇺🇦 @Una]

A recap of the 20 top Web UI things we talked about at Google I/O yesterday ⏪⏪⏪

If you're a front-end dev who builds and styles interfaces, be sure to check it out and catch up on all the things! 🌈💖👇

✍🏼 Written by @argyleink @bramus &amp; me! 🥳

https://t.co/kVTTr3VcO5

[Sasha ⭐️ @vibesbysasha]

especially CSS Nesting, it would not only save the hassle of installing Sass package, but also helps minimize repetition and group related elements together #GoogleIO📷 ✨

https://t.co/eOWNnUsRCW

[Sasha ⭐️ @vibesbysasha]

playing with css style queries with vue✨ https://t.co/vnMBwR41Ys

also CSS Nesting without SASS is awesome 👏🏼

#100DaysOfCode #CSS

[Sasha ⭐️ @vibesbysasha]

so excited for all the new CSS features mentioned in this video, game changing! #GoogleIO ✨

https://t.co/h3nzmFBENm

[Sasha ⭐️ @vibesbysasha]

@YashDwi44103509 Thanks!

[Sasha ⭐️ @vibesbysasha]

@BatsouElef thank you! 😄

[Sasha ⭐️ @vibesbysasha]

@multimicah latte ✨

[Una 🇺🇦 @Una]

What's new in Web UI? 👀

A whole lot, actually 😛

Learn about 20 of the most useful new &amp; upcoming features in CSS &amp; HTML! #GoogleIO

- logical styles
- color features
- typography updates
- component primitives
- architectural controls
- interactions++

https://t.co/kJ705nZ99m

[jhey ʕ•ᴥ•ʔ @jh3yy]

Have you tried out the View Transitions API? ✨

Been playing have a play with it this evening 👀

A bit of JavaScript Web Animations API usage for those rainbow lines but sets me up for another demo idea! 💡

Repo &amp;&amp; deets 👇

[Sasha ⭐️ @vibesbysasha]

front end dev looking for new role! 👋🏻 Former UI Engineer @ Apple with experience working on https://t.co/K4M0qTGniv pages. Let's connect!

[Sasha ⭐️ @vibesbysasha]

css container queries is so fascinating😍

https://t.co/e6Zl57Le5v