iiinova — where your digital self keeps evolving

Reposted by Jan Nicklas

Kevin Powell @kevinpowell.co · 26/08/2026

Scroll-triggered animations that fire once and stay without any JavaScript. The trick is using animation-play-state to pause the animation when it's out of view. www.youtube.com/watch?v=onra...

youtube.com

Nobody told me CSS could do this

YouTube video by Kevin Powell

5566

Jan Nicklas @jantimon.bsky.social · 24/08/2026

@webdevs.firefox.com in nightly this animation timeline based carousel navigation is broken are these kind of bugs already known (it is nightly after all) or is it new?

152

Reposted by Jan Nicklas

Firefox for Web Developers @webdevs.firefox.com · 19/08/2026

CSS text-box is newly baseline, and it's solves a common text layout issue. Here's how it works:

1234858

Reposted by Jan Nicklas

Dave Rupert @davatron5000.bsky.social · 19/08/2026

🚀 I made a smol ~2kb syntax highlighter that uses the CSS `::highlight()` API. davatron5000.github.io/microlighter/

davatron5000.github.io

MicroLighter - A zero-dep syntax highlighter

622242

Reposted by Jan Nicklas

Anne van Kesteren @annevk.nl · 13/08/2026

Thank you for the excellent report! This is a known limitation of our current implementation and also impacts <input type=range>. Fixing it is somewhat involved, but I agree we should do it.

121

Reposted by Jan Nicklas

Bramus @bram.us · 12/08/2026

Native apps on iOS can handle things just fine, so the web could (and should) do too. bsky.app/profile/bram...

041

Jan Nicklas @jantimon.bsky.social · 12/08/2026

@annevk.nl I think <input type=checkbox switch> has an iOS bug: a touch starting on the switch can't scroll the page. the input swallows the touch then toggles on release css touch-action doesn't help and other form controls scroll fine bugs.webkit.org/show_bug.cgi...

240

Jan Nicklas @jantimon.bsky.social · 22/03/2026

@capt.dev hi I'm Jan frontend lead at Galaxus where we heavily use relay and relay is literally the last thing blocking us from going full ESM.. I'd love to work on the relay esm support myself just need your guidance to do it right could you please drop me a DM if you find some time?

130

Reposted by Jan Nicklas

Lars @webpro.nl · 10/03/2026

✂️ Knip v6.0.0-0 is out A new chapter has begun. 👇

try.venz.dev

Venz

Easy and accessible dataviz

3629

Jan Nicklas @jantimon.bsky.social · 17/02/2026

@jensimmons.bsky.social we need your help @⁠⁠media queries stopped working on our production page safari now requires a reload to trigger the media query after resize bugs.webkit.org/show_bug.cgi... Safari Version 26.3 (21623.2.7.11.6) & Safari TP the reproduction has no javascript only css:

0101

Jan Nicklas @jantimon.bsky.social · 29/01/2026

@ricky.fm I am looking for the correct way to merge two ref callbacks for example a text-field with a ref returned by a library like react-hook-form together with in view tracking we ran into bugs and tried to solve it with a hook: github.com/jantimon/rea... is this approach the right way to go?

screenshot of https://github.com/jantimon/react-use-ref-effect/blob/master/src/useMergeRefs.ts

highlights the tricky part: if one ref changes, others should not be affected

also highlights the part where reconcilation is directly triggered within react render

000

Reposted by Jan Nicklas

Bramus @bram.us · 15/09/2025

Viewport behavior in Safari 26 is utterly broken. 🙄😭 Time to get Viewports into #Interop2026 because viewports on iOS have gotten only worse since I did the initial research in, *checks notes*, 2022 — github.com/web-platform...

Screenshot of Safari 26 in "tabs at the top" mode showing a webpage that is set to `viewport-fit=cover` and the dynamic toolbars scrolled away (minimized). The viewport is too short and the safe area insets are all wrong. Device: iPhone 13 Pro.

Screenshot of Safari 26 in "tabs at the top" mode showing a webpage with the dynamic toolbars scrolled away (minimized). The viewport (blue box) is way too short and does not toch the very top of the screen. Device: iPhone 13 Pro.

814025

Reposted by Jan Nicklas

Patrick Brosset @patrickbrosset.com · 12/07/2025

I wouldn’t bet on 2025, but my hopes are high for 2026. Firefox has had an experimental implementation for years. Safari also has one now. And we’re implementing in Edge/Chrome. It’s a matter of agreeing on the spec now. Once done, it won’t take long for the feature to ship.

141

Reposted by Jan Nicklas

VoidZero @voidzero.dev · 10/06/2025

We're thrilled to announce the first stable release of Oxlint - version 1.0! Our Rust-powered JavaScript/TypeScript linter delivers 50~100x faster performance than ESLint with 500+ rules and zero configuration required. Time to give it a try! voidzero.dev/posts/announ...

voidzero.dev

Announcing Oxlint 1.0

The first stable version of Oxlint, a fast & easy-to-use Rust-powered linter for JavaScript and TypeScript, is out. Learn about its 50~100x speed advantage over ESLint, support for 500+ rules, real-wo...

1030161

Reposted by Jan Nicklas

patak @patak.cat · 28/05/2025

Vite 7 (to be released in ~2 weeks) will be distributed as ESM-only, unblocked by require(esm). We decided to bump node versions to 20.19+, 22.12+ to have it unflagged. Here is @sapphi.red's PR removing the bits of CJS we were still shipping.

github.com

refactor!: bump required node version to 20.19+, 22.12+ and remove cjs build by sapphi-red · Pull Request #20032 · vitejs/vite

Description Built on top of #19972 Bumps required node version to 20.19+, 22.12+ so that we can remove cjs build. I haven't tested yet.

1333

Reposted by Jan Nicklas

Luca Schneider @luca.schneider.is · 19/05/2025

We found a way to run our custom SWC plugin on the client in WASM 🎉 If you want to see how next-yak transpiles your input to static CSS have a look here: yak.js.org/playground

Next-Yak playground showing an editor on the left hand side, the rendered output on the right side on the upper two thirds and the transpiled CSS output on the lower third. You can see that next-yak transpiles styled-components looking code to static CSS

131

Reposted by Jan Nicklas

hiogawa.bsky.social @hiogawa.bsky.social · 18/05/2025

I ported React Router RSC Movies demo to Vite. github.com/hi-ogawa/rsc... RSC bundler feature is encapsulated in the package `@hiogawa/vite-rsc` and React Router RSC API integration is found in `./react-router-vite`. The latter part is mostly a copy of `parcel-plugin-react-router`.

github.com

GitHub - hi-ogawa/rsc-movies

Contribute to hi-ogawa/rsc-movies development by creating an account on GitHub.

1153

Reposted by Jan Nicklas

hiogawa.bsky.social @hiogawa.bsky.social · 10/05/2025

I just updated `react-server-dom-vite` PR with css import support github.com/facebook/rea.... I'm not sure if this is a right direction, but this seems to nicely handle css code split at each client reference level and it might potentially work as "framework-less" abstraction for Vite RSC.

github.com

feat: add react-server-dom-vite by hi-ogawa · Pull Request #33152 · facebook/react

Summary As a continuation from the discussion on Jacob's PR #31768, this is a new PR to add the react-server-dom-vite package and fixtures/flight-vite. To begin with, thank you to the React tea...

0437

Reposted by Jan Nicklas

Devon Govett @devongovett.me · 11/05/2025

Lightning CSS v1.30.0 is released! 😀 ⚡️ Updated relative color spec for numbers and percentages ⚡️ Updated nesting spec for pseudo elements and interleaved rules ⚡️ Skip generating unnecessary @supports ⚡️ Android support ⚡️ ... and more! github.com/parcel-bundl...

0252

Reposted by Jan Nicklas

Luca Schneider @luca.schneider.is · 07/05/2025

We've released a eslint plugin for next-yak to make the migration from styled-components even easier and faster 🎉 Install it, try it and write us what you think yak.js.org/docs/eslint-...

A symbolic image of a cute little yak, holding a magnifying glass an reading something on a paper. It should symbolize that next-yak now is able to lint your code with the new eslint-plugin-yak.

021

Reposted by Jan Nicklas

Sarah Drasner @sarahedo.bsky.social · 13/04/2025

This is a great list, things that “the best engineers I know” do, stuff like: - understanding things deeply, reading the actual source - being willing to help other people - status doesn’t matter, good ideas come from anywhere endler.dev/2025/best-pr...

endler.dev

The Best Programmers I Know | Matthias Endler

I have met a lot of developers in my life. Late…

726040

Reposted by Jan Nicklas

patak @patak.cat · 04/04/2025

css pace is mesmerizing lately, so much to play with these days <div class="bar" progress="55"></div> .bar { --progress: attr(progress type(<number>));

3404

Reposted by Jan Nicklas

Lea Verou, PhD @lea.verou.me · 12/02/2025

🚀 🆕 style-observer: A robust solution for observing CSS property changes in JS. Developed with @d12n.me’s help over the last month. Made possible by the pioneering work of @bram.us, Artem Godin, @janeori.propjockey.io and many others! Blog post: lea.verou.me/blog/2025/st... Docs: observe.style

lea.verou.me

Style-observer: JS to observe CSS property changes, for reals • Lea Verou

I cannot count the number of times in my career I wished I could run JS in response to CSS property changes, regardless of what triggered them: media queries, user actions, or even other JS. Use cases...

627259

Reposted by Jan Nicklas

AriPerkkio @ariperkkio.dev · 18/11/2024

Released in 2.2.0-beta.2 and it's even smoother now! Here's comparison of latest Vitest on left vs beta on right. Flickering is gone and now you can scroll up to see results without scroll jumping. And of course there's the status summary of active test run on the bottom. github.com/vitest-dev/v...

1811417

Reposted by Jan Nicklas

Josh W. Comeau @joshwcomeau.com · 23/12/2024

🔥 Just found my new favourite tool for customizing easing curves! Easing Wizard, by @matthiasmartin.dev. Supports all sorts of fancy curves too, via the new `linear()` function! → easingwizard.com

223215

Jan Nicklas @jantimon.bsky.social · 19/12/2024

oh wow the team around cartes.app migrated their entire next.js app from styled-components to next-yak

A standing artistic yak wearing a beret painting paths and routes on a floating globe with a small miniature eiffel tower on it

010

Jan Nicklas @jantimon.bsky.social · 16/12/2024

@devongovett.bsky.social postcss allows global CSS keyframe animations in CSS-Modules Could we please add the same for Lightning CSS? github.com/parcel-bundl...

Example CSS Code to show the usage of a global and a non global css-animation name in the same declaration

CSS Code:

animation:
global(pulse) 2s infinite ease-in-out,
slide 4s infinite linear;

150

Jan Nicklas @jantimon.bsky.social · 10/12/2024

🔥 just released next-yak 4.0 (our 🦀 rust based 💅 styled-components to css compiler) with a neat performance improvements thanks to React 19

1142

Reposted by Jan Nicklas

React @react.dev · 05/12/2024

React v19 is now stable! react.dev/blog/2024/12...

react.dev

React v19 – React

The library for web and native user interfaces

321279340

Reposted by Jan Nicklas

Ana Tudor @anatudor.bsky.social · 14/09/2024

About half a decade ago, I made this set of single div loaders codepen.io/thebabydino/... The trick is to register a custom property in order to animate a `conic-gradient()` and use `mask` compositing for the rings/ radial slices. At the time, this was Chrome only. Now it's cross-browser! #CSS

Screenshot. Shows three double ring loaders, each at 35% progress around the ring starting from 12 o'clock. The inner ring is a thin, almost hairline one, whereas the outer one is thicker and may be split into fewer and chunkier slices or into more and thinner ones. The colour progresses from red at 0% to blue at 100%, going through orange, yellow, green, aqua.

1494

Reposted by Jan Nicklas

Jhey ʕ·ᴥ·　ʔ @jhey.dev · 21/11/2024

CTA to Nav 🗺️ taking the CSS container query for stuck position: sticky elements for a spin 🔥 nav { container-type: scroll-state; } @container scroll-state(stuck: top) { .nav__content { --expand: 1; } } trick here is to transition grid-template-columns with the custom property value to morph

1430223

Reposted by Jan Nicklas

Nicole Sullivan @nicolesullivan.bsky.social · 20/11/2024

Would you want core web vitals In Safari? Can you help me understand how you would use them and why numbers in one browser isn’t enough? (These may sound like silly questions, but I’d love to understand *your* specific context and use cases)

508540

Jan Nicklas @jantimon.bsky.social · 19/11/2024

To help fixing the CSS order issues in next.js and webpack I am currently analysing why the order is not the same as in parcel and vite: github.com/webpack/webp... If you have any insights about this topic please let me know

A table comparing CSS order and CSS Treeshaking for webpack, vite, parcel and turbopack - also available on https://github.com/webpack/webpack/issues/18961

061

Reposted by Jan Nicklas

Adam Argyle @nerdy.dev · 18/11/2024

here's more on interpolate-size! nerdy.dev/interpolate-... here's more on starting-style! nerdy.dev/using-starti...

nerdy.dev

CSS interpolate-size to the rescue · September 25, 2024

Animate to height or width auto with 1 CSS snippet

26711

Reposted by Jan Nicklas

Nicholas C. Zakas @humanwhocodes.com · 08/11/2024

Working on the new CSS plugin for ESLint. We're at the point where new rules are testable! 🎉 That also means it's open for rule submissions. Check it out during the long weekend: github.com/eslint/css

github.com

GitHub - eslint/css: CSS language plugin for ESLint

CSS language plugin for ESLint. Contribute to eslint/css development by creating an account on GitHub.

1545

Jan Nicklas @jantimon.bsky.social · 09/11/2024

quite impressed with Bluesky's UX 🦋

090

Reposted by Jan Nicklas

Luca Schneider @luca.schneider.is · 30/07/2024

🦀 Rust meets CSS-in-JS! next-yak now ships with a SWC plugin for lightning-fast static extraction

Symbolic picture of a yak riding a rusty SWC rocket. Should symbolize that next-yak uses SWC and rust to be faster

051