Frontendɾ

Tweets mostly about #HTML, #CSS, #Javascript and other web based technologies.

[Sebastián Ramírez @tiangolo]

Go to your @FastAPI project and run:

uvx library-skills

Teach your AI coding agents to use FastAPI properly. 😎

https://t.co/AQ28m5P1pK

[TANSTACK @tan_stack]

New in TanStack Start: Deferred Hydration.

Choose when selected parts of your app hydrate, like when they become visible, get interacted with, or the browser goes idle.

[Victor @vponamariov]

The power of @ property

Without it → CSS treats --progress as text → no animation

With it → CSS knows it's percentage → smooth animation

[VoidZero @voidzerodev]

🚀Rolldown 1.0 is here!🚀

Rust-based high-performance JavaScript bundler.

🏎️ Runs at native speed that’s 10~30x faster than Rollup

🤝 Compatible with existing Rollup & Vite plugins

⚡The underlying bunder for Vite 8

After 2 years, Rolldown is officially stable and has 20+M weekly downloads. Companies like Framer & PLAID are already using Rolldown in production.

Thank you to every contributor, user, and team that helped us get here.

[James Tate @JamesTate121]

Too on point not to share, “Aussie reply to Trump rant about NATO not being there for us.

Mate. You run a country with 600,000 homeless people sleeping on the street tonight. A country where 40% of adults can't cover a $400 emergency without borrowing money. A country where insulin costs more than a car payment and people are rationing it to survive. A country where medical debt is the number 1 cause of bankruptcy. A country where women are dying in hospital car parks because doctors are too scared of abortion laws to treat a miscarriage.
You lock up more of your own citizens than any nation on earth. More than China. More than Russia. More than North Korea. The land of the free has 2 million people in cages, and a quarter of them haven't even been convicted of anything. They're just too poor to make bail.
Your life expectancy is going backwards. You're the only developed nation where that's happening. Your infant mortality rate is worse than Cuba's. Your kids do active shooter drills between maths and English while you sell the gunmaker's stock to your mates.
Your minimum wage hasn't moved in 15 years. You've got teachers working 2 jobs and veterans sleeping under bridges and you just spent a trillion dollars flattening a country that didn't attack you.
And you’ve got a convicted felon, adjudicating raping, paedophile protecting, porn star shagging insurrectionist running the biggest dumpster fire war campaign since the Taliban thanked you very much for losing again.
And you're calling Greenland poorly run?
Greenland has universal healthcare. Free education. One of the lowest incarceration rates in the world. Nobody goes bankrupt there because they got sick. Nobody dies in a waiting room because their insurance said no.
"NATO wasn't there when we needed them." When exactly was that, champ? September 11? Because NATO invoked Article 5 for the first and only time in history FOR YOU. Soldiers from dozens of countries deployed, fought, bled, and died in Afghanistan FOR YOU. Australia wasn't even in NATO and we still showed up. For 20 years.
And you pulled out at 2am without telling anyone and left them to deal with the mess.
So maybe before you start calling other countries poorly run, have a look at your own backyard, you spray-tanned aluminium siding salesman. The only thing poorly run in this picture is your fucking mouth. Credit (borrowed from) Jim Scroggins - original author 📷 unknown”

[pnpm @pnpmjs]

pnpm 11 RC 0 is out!

https://t.co/C8ZjUNVngZ

[Paweł Huryn @PawelHuryn]

So, I did some research.

The regression is real. But it's not Claude getting dumber. And you can fix that.

Thinking budgets were adjusted. For complex multi-file work, the default medium effort may not be enough.

Three fixes:

1. /effort high (or /effort max on Opus for hard debugging)
2. ~/.claude/settings.json → "showThinkingSummaries": true
3. CLAUDE.md: "Research the codebase before editing. Never change code you haven't read."

GitHub issue #42796 analyzed 17,871 thinking blocks across 6,852 sessions. The pattern: when thinking depth drops, the model shifts from research-first to edit-first.

Claude didn't get worse. The defaults got conservative.

[CSS by T. Afif @ChallengesCss]

💡 CSS Tip!

Ready for style queries and if()? Which of the following syntaxes do you think is the correct one? Spoiler: Both of them are valid!

https://t.co/yLsDk476P7

Learn the difference between them and when to use each one. It's the key to correctly using these features.

[Hayden Bleasel @haydenbleasel]

Today we're open sourcing the new Chat SDK, a unified TypeScript SDK for building chat bots across Slack, Microsoft Teams, Google Chat, Discord, and more. Now in public beta.

▲ ~/ 𝚗𝚙𝚖 𝚒 𝚌𝚑𝚊𝚝

Let's see how it works ↓

[Adham Dannaway @AdhamDannaway]

🙅‍♂️ Stop using modals for everything

Most designers choose between a modal or a page based on habit not logic.

But modals exist for one reason: to keep users in context while completing a focused task. Use them wrong, and you interrupt instead of help.

This framework is a great reminder to stop guessing and start making intentional decisions.

Worth bookmarking 👇

https://t.co/VXVrQg1iwZ

By Ryan Neufeld

[jhey ʕ•ᴥ•ʔ @jh3yy]

Progressive blurs in CSS using pow()/sin() 🤙

1. Create overlay layers
2. Mask and blur based on index using sin()/pow()

.layer {
backdrop-filter: blur(calc(
sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px
));
}

Made a sandbox 👇🤓

[TANSTACK @tan_stack]

We released a new TanStack library this week.

Introducing TanStack Hotkeys!

Setting up keyboard shortcuts is supposed to be easy and only take a few lines of code, right? Well, there are enough small "gotchas" that can eventually add up to an annoying amount of complexity.

[Will King @willking]

Use `element.setPointerCapture` when building UI with draggable interactions.

Avoids losing the pointer events for the currently active element when the mouse moves out of the elements bounding box.

[Bharat Kara @KaraBharat]

⚡️ JavaScript Proxy is so cool to handle state updates

#JavaScript

[Marko Denic @denicmarko]

CSS tip:

Use `svh` to stop the mobile address bar from hiding your UI. It guarantees a perfect fit within the visible screen.

[jhey ʕ•ᴥ•ʔ @jh3yy]

subtle css border pulse effect w/ :active + offset opacity transition 🧑‍🍳

button::after {
border: 1px solid #000;
opacity: 0;
transition: opacity 0.6s 0.1s var(--ease);
}
button:active::after {
opacity: 1;
transition-duration: 0s;
}

[Stephen Margheim @fractaledmind]

To master exit transitions for <dialog>s, turn to `transition-behavior: allow-discrete`. Most CSS transitions are smooth, but `display` toggles abruptly. `allow-discrete` ensures elements stay visible briefly for smoother exits before `display: none`.

[Theo - t3.gg @theo]

I’m so tired

[Bramus @bramus]

Scroll-Triggered Animations … with nothing but CSS … oh yeah 🤩

https://t.co/c0oyWjKpxm

(Blogpost coming soon)

[Vite ⚡ @vite_js]

⚡️ The first Vite 8.0 beta is here

- Powered by Rolldown bringing faster production builds and more consistency
- New features such as tsconfig paths or emitDecoratorMetadata support
- Align browser targets with Baseline Widely Available

More in our post https://t.co/380CDCToHD