Jr de Freitas

👨‍💻 Software Engineer 📷 🎸Photographer and musician 🇨🇦 🇧🇷 Sometimes in English sometimes in Portuguese.

[Jr de Freitas @thejfreitas]

All comes in time, don't fight it don't mind it whatever may come

[Jr de Freitas @thejfreitas]

Hello There! 👋🏼

[React @reactjs]

There is critical vulnerability in React Server Components disclosed as CVE-2025-55182 that impacts React 19 and frameworks that use it.

A fix has been published in React versions 19.0.1, 19.1.2, and 19.2.1. We recommend upgrading immediately.

https://t.co/kue7kd0XEX

[Jr de Freitas @thejfreitas]

Hello! It’s been a while…

[Jr de Freitas @thejfreitas]

Finally taking a deep dive into @tailwindcss and I am amazed how cool are these utility classes combined and creating my own using @PostCSS

[jhey ʕ•ᴥ•ʔ @jh3yy]

UI && CSS Tip! 🔥

You can create these dynamic glowing card effects with a single JavaScript event listener, some CSS tricks, and an HTML attribute 🤙

<article data-glow />

Here's how! 👇

You can use a combination of tricks from previous posts. Let's start with the JavaScript 📜

Use a function like this to send the pointer position via custom properties to the glows ✨ Attach this to the pointermove event 👆

const onPointermove = ({ x, y }) => {
document​.documentElemen​t​.style.setProperty('--x', x)
document.documentElement​.style.setProperty('--xp', x / innerWidth)
document.documentElement​.style.setProperty('--y', y)
document.documentElement​.style.setProperty('--yp', y / innerHeight)
}

Now for the styles 🎨 These custom properties define the border and spotlight size. The first trick is how you can change the color(--hue) based on the pointer position with calc 😎

[data-glow] {
--border-size: 2px;
--spotlight-size: 150px;
--hue: calc(var(--base) + (var(--xp) * var(--spread)));
}

The magic is using the pointer position in a radial-gradient combined with background-attachment: fixed ✨ (Check the video for an exploding view 🎞️)

[data-glow] {
background-image: radial-gradient(
var(--spotlight-size) var(--spotlight-size) at
calc(var(--x, 0) * 1px)
calc(var(--y, 0) * 1px),
hsl(var(--hue) 100% 70% / 0.25), transparent
);
background-attachment: fixed;
}

The last major piece is using mask-composite on the pseudoelements of the [data-glow] element and the same background-attachment: fixed trick 🫶

[data-glow]::before,
[data-glow]::after {
pointer-events: none;
content: "";
position: absolute;
inset: calc(var(--border-size) * -1);
border: var(--border-size) solid transparent;
background-attachment: fixed;
background-size: calc(100% + (2 * var(--border-size)));
background-position: 50% 50%;
mask:
linear-gradient(transparent, transparent),
linear-gradient(white, white);
mask-clip: padding-box, border-box;
mask-composite: intersect;
}

This masks the elements so only a fake border is shown. That border is actually the spotlight background that moves around 👀 But now it's clipped to the border width 😎

Then it's a case of switching out the background-image for each pseudoelement based on purpose 🧐

For example, to get the white light, use your custom properties, make the light a little smaller and the color bright!

[data-glow]::after {
background-image: radial-gradient(
calc(var(--spotlight-size) * 0.5)
calc(var(--spotlight-size) * 0.5) at
calc(var(--x, 0) * 1px)
calc(var(--y, 0) * 1px),
hsl(0 100% 100% / 1), transparent
);
}

These are the major pieces you need to get it done. Extras?

Want the outer glow? Nest a glow!

<article data-glow>
<span data-glow />
</article>

Give the inner glow a blur to create the outer glow 😅

[data-glow] > [data-glow] { filter: blur(10px); }

It's worth digging in with this one. Have a play around with the demo and the custom properties.

The code isn't perfect after introducing all the configuration pieces 😅 Will put together a reduced example for you! 🙏

Any questions, let me know! 💙

@CodePen link below! 👇

[Jr de Freitas @thejfreitas]

The scariest thing in this #AppleEvent was when I saw that they silently raised the price of the Apple Care plans for MacBooks

[Jr de Freitas @thejfreitas]

@Spotify I wish have an option to pay my subscription for the entire year

[Jr de Freitas @thejfreitas]

@catalinmpit @documenso I did some tweaks changing indent to 16 instead and the color to fit better with my current theme. Worked like a charm! Thank you.

[Jr de Freitas @thejfreitas]

@janm_uiux I liked the idea in the number four.

[Jr de Freitas @thejfreitas]

I have a feeling that CSS is underrated to so many Frontend developers. Only React won’t make you a frontend engineer.

[Jr de Freitas @thejfreitas]

World Photography Day Giveaway 2023 https://t.co/KYG4K3pgto

[Jr de Freitas @thejfreitas]

Do you remember when you joined Twitter? I do! #MyTwitterAnniversary

[Jr de Freitas @thejfreitas]

Hello Twitter, it’s been a while

[Jr de Freitas @thejfreitas]

This week I had a lot of learning in a Hackathon building an AI based moderator using AWS Comprehend, Rekognition and Lambda 🤞🏻I hope be in the finalists this year

[Jr de Freitas @thejfreitas]

I’m quite impressed what #AdobeRush can do for video editing

[Jr de Freitas @thejfreitas]

@cagataycivici @flaviocopes Didn’t had a nice experience many years ago unfortunately. In the other hand now Primereact looks very interesting at first glance, I’ll give a try 😃

[Jr de Freitas @thejfreitas]

Interesting reading about GraphQL. It’s nice read opinions out of my bubble. As for me I still enjoying working with GraphQL in the daily basis even after two years.
“GraphQL: From Excitement to Deception”
https://t.co/nvcay1iSJl

[Jr de Freitas @thejfreitas]

@alexandreitpro @nextjs @rustlang @yesdavidgray Nice! Following now

[Jr de Freitas @thejfreitas]

I’ll take this day off to look at some @nextjs content but I’m on the fence to take some time to back to study @rustlang as well 🤔

[Jr de Freitas @thejfreitas]

@housecor “!!array.length”