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

The untold history of web development: 1990: HTML invented 1994: CSS invented to fix HTML 1995: JS invented to fix HTML/CSS 2006: jQuery invented to fix JS 2010: AngularJS invented to fix jQuery 2013: React invented to fix AngularJS 2014: Vue invented to fix React & Angular

Couldn't resist 😁 You can use some JavaScript <canvas> trickery to create a responsive clipped text effect ✨ context.drawImage(text, 0, 0) context.globalCompositeOperation = "source-in" context.drawImage(rings, 0, 0) Use compositing to clip the animated rings to text 🤓 –

CSS Trick! ⚡️ You can use scroll-driven animation with background-attachment to create a dynamic glowing card scroller without JS 🔥 section { animation:vibe; animation-timeline:--list; } @​keyframes vibe { to{--hue:320;}} .glow {background: hsl(var(--hue) 80% 50%);} Here's

✨ Tailwind CSS v4 demo ✨ Define **one** CSS variable in CSS and generate a comprehensive set of utilities to use the "design token" in your project. Colors for text, background, border, caret, shadow, gradient-from, via, to, etc 💥 Tailwind is a CSS framework... generator 🪄

Very cool and interactive blog post about micro-optimization with JavaScript, by romgrk romgrk.com/posts/optimizi…

PREVIOUSLY: separate rulesets for light and dark NOW: one ruleset with `light-dark()`

We're excited to have Drizzle ORM as the first ORM to support PGlite 🎉🚀 • Run full Postgres embedded in your app with PGlite. • At only 2.6mb, it's perfect for local-first apps! github.com/electric-sql/p… github.com/drizzle-team/d…

Do you remember when you joined X? I do! #MyXAnniversary

Good job to the whole Google (Flutter team) for their hard work, appreciated.

Use CSS custom properties and the sin() trigonometric function to give each character an eased animation-delay 🤙 .char { animation-delay: calc( sin((var(--index) / var(--total)) * 90deg) * var(--duration) ); }

An example of responsive, interruptible, draggable and auto-animated infinite carousel with the new anime.js v4 `createDraggable()` API.

Updating the "inverted radius" shape to add two more variables to control the offset of inner curve. css-shape.com/inverted-radiu…

attr() is getting an upgrade! Starting in Chrome 133 (stable rollout happening this month), you'll be able to access attributes in CSS as typed values beyond strings. Here's an example of where that's pretty cool. Given: <div data-rating="4.5"> You can use data-rating as a

extra detail: animate a CSS custom property from 0 to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);

<table> highlighting with CSS :has() 💡 td:has(~ td:hover), /* previous sibling cells */ table:has(td:nth-of-type(3):hover) /* column cells */ tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(3) { background: var(--highlighted); }

🚫 𝗔𝘃𝗼𝗶𝗱 Using a full context value in every component can trigger unnecessary re-renders. ✅ 𝗜𝗻𝘀𝘁𝗲𝗮𝗱 Use 𝘤𝘰𝘯𝘵𝘦𝘹𝘵 𝘴𝘦𝘭𝘦𝘤𝘵𝘰𝘳𝘴 to pull only the data you need. This reduces re-renders and improves performance.

how you take an image list and turn it into a 3D scroll-driven carousel with CSS 🤙

Use the standard Node.js "imports" field instead of TypeScript aliases:

table of contents marker w/ modern css 🧑‍🍳 .toc { scroll-target-group: auto; } a:target-current { anchor-name: --active; } .toc::after { position-anchor: --active; top: anchor(top); } fun progressive enhancement, no js 🤙