Frontend

A tool designed to intuitively generate spring animations for CSS linear(). Includes presets and customizable inputs for perceptual duration and bounce.

Article about the OKLCH color model.

ForesightJS is a lightweight JavaScript library that predicts user intent based on mouse movements and keyboard navigation, enabling optimal prefetching timing and improved performance.

Very fast Markdown parser and HTML generator implemented in WebAssembly, based on md4c - rsms/markdown-wasm

Supercharge your gradients with non-linear color mix and custom color spaces.

🧠 JavaScript Tip: No more custom string joins Let Intl.ListFormat make it elegant, native, and language-sensitive 👇

https://t.co/0Y2EdUyk3s No more hacky code trying to remove those spaces above and below an uppercase text. You can easily have a perfect centering for the text! pic.twitter.com/KRjZ5hy20F— CSS by T. Afif (@ChallengesCss) February 24, 2025

Liquid metal for your logo by paper.design

hyphens: auto; to achieve a better visual balance where needed 🤌 — jhey ▲🐻🎈 (@jh3yy)

Stop using border or box-shadow. Start using mask. — Brotzky (@brotzky_)

Toolbelt worthy, powerful, and meaningful CSS you'll need for 2025.

В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом сохранив адаптивность. Оказывается, это можно сделать, используя...

Drag selection is the defacto pointer multi-selection. In this guide we'll recreate native-like drag selection in react.

Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the latest CSS launched for Chrome and the web platform in 2024.

...

Users can then navigate between these elements using the arrow keys, like they do with radio buttons! — Josh W. Comeau (@JoshWComeau)

— Bartek (@bartek_marzec)

You can create a progressive blur effect using a single div and just 2 properties. Works best when your div is placed over an image and is more efficient than stacking multiple elements with increasing blur. — Moritz Petersen (@moritzpetersen)

A simple JavaScript tool for converting any layout you have to drag-to-swap layout

::view-transition-new(root) { animation: reveal; } [data-theme=dark] { --from: 0 0 100% 0; } @​keyframes reveal { from { clip-path: inset(var(--from, 100% 0 0 0)); } } Progressive enhancement 🤙 — jhey ▲🐻🎈 (@jh3yy)

Read all of the CSS and Web UI announcements from Google I/O 2024.

- transitions - entry/exit - backdrop included ready for richer design system integration try on Codepen — Adam Argyle (@argyleink)

Say goodbye to JS Calculate Height! Combined with , a nearly perfect and exclusive Accordion component can now be implemented. — 一丝 (@yisibl)

https://t.co/JJkZgC1WTo

.scroller { animation: mask-up; animation-timeline: scroll(self); animation-range: 0 1rem; mask-composite: exclude; } @​keyframes mask-up { to { mask-size: 100% 120px, 100% 100%; } } — jhey ▲🐻🎈 (@jh3yy)

— Emil Kowalski (@emilkowalski_)

This library provides TransformStream for ndjson.. Latest version: 1.0.0, last published: 7 months ago. Start using ndjson-stream in your project by running `npm i ndjson-stream`. There are no other projects in the npm registry using ndjson-stream.

The one where I demo some lesser-known CSS for stylin’ buttons

An extremely fast CSS parser, transformer, bundler, and minifier.

We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch.