Filipe Guarnieri retweeted
Chrome DevTools for Agents is powerful. If you don't already have it in your workflow, I would strongly consider it! It's been useful for testing, and works with all my various agents
The video shows scaffolding and then testing WebMCP tooling right in one prompt:
Filipe Guarnieri retweeted
📸 Fotógrafo Brenno Carvalho, do O GLOBO, revela ter registrado, por uma fresta entre a cortina e o vidro, a foto de Alexandre de Moraes rindo em meio à crise no STF envolvendo Daniel Vorcaro: “Entendi na hora que era uma foto boa em relação ao contexto atual.”
Filipe Guarnieri retweeted
🚨URGENTE | Campanha de Flávio Bolsonaro diz que o candidato do PL não irá a debates caso Renan Santos (MISSÃO) esteja presente.
A campanha ainda condicionou a ida do bolsonarista caso Renan não seja convidado pelas emissoras. A exceção é o crescimento de Renan.
🗞️: Metrópoles
Filipe Guarnieri retweeted
Obrigado, Bolsonaristas. Sem vcs esse cancelamento jamais existiria, e isso nao nos faria criar a Missao!
Filipe Guarnieri retweeted
“É vil” — continuo — “porque remete exatamente ao racismo eugênico do fim do século 19, o mesmo que ainda alimenta o racismo atualmente”. Sei que o Bisotto não é racista, o conheço e sei não faz sentido acusá-lo disso. Porém, a verdade incômoda é: +
Filipe Guarnieri retweeted
E segue o artigo, caso alguém queira ler:
gazetadopovo.com.br/vozes/pa…
Filipe Guarnieri retweeted
you can create a sticky navbar that morphs when you scroll with pure CSS, no JS or animation libraries required
𝚑𝚎𝚊𝚍𝚎𝚛 {
𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎;
𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢;
𝚝𝚘𝚙: 𝟶;
}
@𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) {
.𝚗𝚊𝚟-𝚋𝚊𝚛 {
𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖;
𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖;
𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸);
}
}
the browser now knows when a sticky element is stuck, all triggered by one container query
available only in chromium browsers only, no firefox or safari which is a shame
Filipe Guarnieri retweeted
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 👇
Animated gradient border but with my own twist to it, I used offset path to achieve this animation and it resulted in less code than I expected while avoiding some pitfalls that I saw with other solutions.
It is a very pleasing visual effect ✨
@CodePen is in the 🧵