nelson.tsx
250 posts

nelson.tsx
@nelsondev_
Messista 🐐 frontend dev | @nucba_
Buenos Aires Katılım Ekim 2020
172 Takip Edilen33 Takipçiler

@LinuDev Lo quise usar hace un tiempo pero no me anduvo, seguro porque estaba en ubuntu, mas adelante lo quiero probar a ver que tul
Español
nelson.tsx retweetledi

🎬 En este video hablo desde mi corazón y experiencia personal sobre cómo manejar las críticas, balancear trabajo y vida personal, y la importancia de valorarnos a nosotros mismos frente a las adversidades.
i.mtr.cool/rtqdfapxit
Español

@LinuDev Estuve viendo bastantes configs de nix, esta lindo! Seguramente me pase mas adelante para probarlo
Español
nelson.tsx retweetledi

@nicokennydev Pero tomatela kenny, batite un dolca y disfruta del frio
Español
nelson.tsx retweetledi

Ustedes eran muy, en serio MUY chicos y quizas no saben, pero todos los “memes” del de la cara amarilla, llamado realmente EMOTIGUY salieron de Taringa, de los viejos post, cuando era meme la frase “despedite de tu cuenta lince” y mas cosas, Taringa fue la pionera de los memes y del humor negro mucho antes que twitter, por todo eso y mucho más hasta siempre Taringa, gran red social




¿Por qué es tendencia?@porquetendencia
"Taringa": Porque anunció que cierra el 24 de marzo
Español
nelson.tsx retweetledi
nelson.tsx retweetledi
nelson.tsx retweetledi

@midudev Hola Miguel, una pregunta, con que herramienta haces esas capturas de pantalla tan chulas con ese fondo detrás y demás? Yo lo hago manual, pero es engorroso
Gracias :)
Malaga, Spain 🇪🇸 Español
nelson.tsx retweetledi
nelson.tsx retweetledi
nelson.tsx retweetledi

CSS in 2024 🤯
You can create a range slider with updating value tooltip and color changing track without using any JavaScript 🤯
::-webkit-slider-thumb{
view-timeline: --thumb inline;
}
Scroll animation on the slider thumb that animates a number between the "min" and "max" of the range 😅
@property --value { syntax: ''; }
@keyframes sync { to { --value: 100; }}
Tie that up to the contain animation-range ⚡️
.control {
animation: sync both linear reverse;
animation-timeline: --thumb;
animation-range: contain;
}
Hoist the view timeline so the tooltip can use the value too!
:root { timeline-scope: --thumb; }
Then use it in the counter which goes in the tooltip 😇
.tooltip {
counter-reset: val var(--value);
}
.tooltip::after {
content: counter(val);
}
Then the accent color is based on the value too 🎨
[type=range] {
accent-color: hsl(var(--value) 90% 65%);
}
The magic from the quoted post is using anchor positioning on the range thumb to position that tooltip 👏 Never thought of that when working on the spec for this API. This API lets you tether elements to other elements. Using the pseudo is a clever move!
::-webkit-slider-thumb {
anchor-name: --thumb;
}
.tooltip {
position: absolute;
anchor-default: --thumb;
left: anchor(50%);
bottom: calc(anchor(top) + 25%);
}
The last piece is the little bounce transition... OK. I used a line or two of JavaScript for that 🙏😬
const updateDelta = ({ movementX }) => {
document.documentElement.style.setProperty('--delta-x', movementX)
}
document.body.addEventListener('pointermove', updateDelta)
But only so you can pass the movement delta to CSS and then reset the position with linear() to get that bouncy transition 😎
.hint {
rotate: calc(clamp(-60, var(--delta-x) * -1, 60) * 1deg);
transition: rotate 1s linear(
0, 0.2178 2.1%, 1.1144 8.49%,
...
);
}
Should probably do a video on this one. Lots of little tricks to break down with it for sure! 💯
As always, any questions, let me know! Also, this one only works in Chrome Canary with the Experimental Web Platform Features flag enabled ✅
This one almost feels like rocket science ha 🚀
@CodePen link below! 👇
一丝不go@yisibl
CSS Anchor + popover attribute = Magic🧙🏻 1️⃣Auto-follow the tooltip in `input type=range` 2️⃣Avoids being cropped by `overflow:hidden` Now the only thing we're missing is how to trigger the popover on the input without using JS. github.com/whatwg/html/is… Demo codepen.io/yisi/pen/jOJWL…
English














