Agustín Díaz

[Agustín Díaz @HiroAgustin]

Hola @javivelasco, tremenda la charla! De casualidad el codigo que mostraste está disponible en algún repo? O que recurso recomendarías para aprender sobre server side components + suspense + streams?

[Andrés Actis @ActisAndres]

Jets privados:

➡️Lo utilizan el 0,003% de la población mundial.
➡️2019-2023: +28% de aviones y +50% de emisiones.
➡️ Emiten el mismo C02 que los 60 millones de habitantes de Tanzania.

"Se usan como taxis", describe un investigación publicada hoy en @Nature.

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Trick 🎞️

You can create an infinite marquee/carousel animation without duplicate items 🤙

li { --destination: calc(var(--idx) * -100%); }
@​keyframes slide { to { translate: var(--destination) 0;}}

Animate the items, not the list 😎

Here's the next <noscript>! 👇

The main trick here is animating the items and not the list. You can lean into custom properties to work out the origin and destination of an item.

Inline some custom properties on the list and the items.

<ul style="--count: 4;">
<li style="--index: 0;"></li>
<li style="--index: 1;"></li>
<li style="--index: 2;"></li>
<li style="--index: 3;"></li>
</ul>

Then use these to calculate the origin and the destination for each item in the list ⭐️

li {
--origin: calc((var(--count) - var(--index)) * 100%);
--destination: calc((var(--index) + 1) * -100%);
}

The last piece is hooking up the animation

li {
--duration: calc(var(--speed) * 1s);
--delay: calc(
(var(--duration) / var(--count)) * var(--index, 0)
);
animation:
slide var(--duration)
calc(var(--delay) - (var(--count) * 0.5s))
infinite linear;
}

The important part here is using those custom properties to define and calculate the animation properties for the items in the list 🤙

It's hard to cover everyone's use case in one demo 😅

But we try 🙏

As always, any requests, suggestions, questions, etc. Hit me up! 🤙

@CodePen link below 👇

p.s Can anyone recommend a decent lavalier microphone so I can record these better on the road 😭

[mer @fercazher]

Andrew the whole date:

[Bramus @bramus]

“Added support for cross-document view-transitions.” 🤩

Add the following opt-in to your code to get started:

```
@view-transition {
navigation: auto;
}
```

Full docs: https://t.co/tjmgtCIP5V

[Intendencia de MVD @montevideoIM]

En bici, ahora por la ciclovía 🚴‍♀️

Para que llegues a tu destino de manera segura, saludable y sostenible 🚴‍♂️

Casi 5 kilómetros de extensión con doble carril y velocidades diferenciadas para vehículos 🚘

[Bramus @bramus]

Exciting release, as Safari now joins Chrome in supporting (Same-Document) View Transitions and Style Queries! 🎉

🔗 View Transitions: https://t.co/xDBwNrhf4b

🔗 Style Queries: https://t.co/MwfOsM1Ps2

[Wes Bos @wesbos]

I'm sick

of the CSS centering jokes.

You can now vertically center the contents of a block level element without Grid of Flexbox!

[Agustín Díaz @HiroAgustin]

@argyleink Couldn’t find an easy way to play with starting-styles to tweak transition values. Checked out the animations panel but couldn’t make it work.

[Sara Soueidan is on Bluesky @SaraSoueidan]

Period reminder that "wrapping the &lt;label&gt; around the &lt;input&gt; is fine, and is sufficient for conformance on its own, however adding explicit association with` for` and `id` is still necessary in practice."

Details: https://t.co/FIzvHyXXyR

#a11y #HTML

[Ana Tudor 🐯 (find me on Bluesky/ Mastodon) @anatudor]

Since I've seen this again...

If you're going to make links bold on `:hover`, then for the love of Satan, please use a font where the *width* doesn't change when changing the *weight*, so you don't have the rest of the stuff on that same line dancing out when you hover the link.

[Danny Moerkerke @dannymoerkerke]

Safari Tech Preview 202 has been released and as usual, there's stuff that's not in the release notes.

Even though it's not functional, a flag has been added for cross-document View Transitions so Safari will soon support View Transitions for multi-page apps as well!

This release also adds support for View Transition Types and View Transition Classes.

View Transition Types enable you to change the transition based on a certain context. For example, you can use View Transition Types to change a page transition when navigating forward or backward.
🧵

The following demo now works in Safari Tech Preview 202 👇
(demo link below)

[Una 🇺🇦 @Una]

The simple joy of the upcoming customizable select API 🙂

https://t.co/t5nemAjPQK

[Eoin Tighe @eointighe]

So my legend of a cousin Lorcan just realised he was kind of important to the creation of @foofighters @FooFightersUK He saw a video by Dave Grohl talking about why he got back to work after a visit to Ireland. Lorcan was out hitchhiking wearing his nirvana top when Dave stopped

[Una 🇺🇦 @Una]

Wow, this is stop-what-you're-doing-to-try-it-out brilliant.

- No-JS needed
- No-HTML wrappers

Just a colr font with built-in syntax highlighting 🤯

What an innovative idea from Heikki Lotvonen 😍
(h/t @argyleink for sharing this with me)

https://t.co/FPctAmuaX9

[Agustín Díaz @HiroAgustin]

@piccalilli_ “Hey there shopamaniacs, you are listening to the @ShopTalkShow…”

[🛶🧁🍨 𝐌𝐢𝐜𝐡𝐚𝐞𝐥 𝐓𝐚𝐫𝐚𝐧𝐭𝐨 @michaeltaranto]

Exciting to see Capsize text trims coming to the platform! Being able to influence naming and implementation of future CSS via GitHub is 🔥.

Trying to steer the default under text-edge for `cap` and `ex` to be `baseline` rather than `descent`.

Thoughts?

https://t.co/BVFaD1Y9Ka

[Una 🇺🇦 @Una]

As of this week, the ability to animate entry effects for elements like dialog and popover is now in every browser engine!

This leverages the starting-style at-rule and transition-behavior which became Baseline with Firefox 129.

https://t.co/SzwJBCNvUo

(Exit effects are still only in Chrome at this time, but I hope will land cross-browser next. See article for more)

[Ansub @justansub]

React 20 be like: