Jan Nicklas
@jantimon.bsky.social
living in Switzerland 🇨🇭 mainly working on typescript, css and compiler related frontend topics https://github.com/jantimon
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...
Nobody told me CSS could do this
YouTube video by Kevin Powell
youtube.com
@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?
Great news! The CSS sibling-count() and sibling-index() functions are now Baseline Newly Available! I.e implemented in all major browsers.
sibling-count() and sibling-index() - Web platform features explorer
The sibling-count() and sibling-index() CSS functions return integers that are useful to style elements based on their positions among siblings or on the number of siblings, for example as part of a c...
web-platform-dx.github.io
CSS text-box is newly baseline, and it's solves a common text layout issue. Here's how it works:
🚀 I made a smol ~2kb syntax highlighter that uses the CSS `::highlight()` API. davatron5000.github.io/microlighter/
MicroLighter - A zero-dep syntax highlighter
davatron5000.github.io
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.
Native apps on iOS can handle things just fine, so the web could (and should) do too. bsky.app/profile/bram...
Oh, I see. When testing things in a native iOS app like Settings, you _can_ initiate a scroll when the first tap on the screen happens to be over a switch control. In Safari you can’t :-/ Seems to me like the engine should be able to figure that out all by itself.
@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...
@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?
@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:
@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?
@danabra.mov we have accessibility problems with react because react does not allow using a HTML attribute which was already supported in IE10 do you maybe know anyone who might take a short look? github.com/facebook/rea...
Bug: autoFocus broken inside <dialog /> · Issue #23301 · facebook/react
React version: 17 and 18.0.0-rc.0-next-27b569969-20220211 Steps To Reproduce render <input /><input autoFocus /> inside <dialog /> execute the showModal() method of the dialog you will notice that ...
github.com
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...
@danabra.mov did I miss anything in github.com/jantimon/rea... ?
GitHub - jantimon/react-hydration-rules: Comprehensive guide documenting React hydration and Suspense fallback behaviors during SSR
Comprehensive guide documenting React hydration and Suspense fallback behaviors during SSR - jantimon/react-hydration-rules
github.com
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.
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...
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...
voidzero.dev
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.
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.
github.com
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
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 - hi-ogawa/rsc-movies
Contribute to hi-ogawa/rsc-movies development by creating an account on GitHub.
github.com
@scriptedalchemy.bsky.social and others who want a custom bundler integration take note, it's going to be easier than ever: github.com/jacob-ebey/p...
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.
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...
github.com
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...
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-...
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...
The Best Programmers I Know | Matthias Endler
I have met a lot of developers in my life. Late…
endler.dev
Thanks to @jantimon.bsky.social, expect up to 20% smaller CSS files in the next update of next-yak (github.com/DigitecGalax...).
GitHub - DigitecGalaxus/next-yak: 🦀 Zero-runtime CSS-in-JS powered by Rust. Write styled-components syntax, get build-time CSS extraction and full RSC compatibility
🦀 Zero-runtime CSS-in-JS powered by Rust. Write styled-components syntax, get build-time CSS extraction and full RSC compatibility - DigitecGalaxus/next-yak
github.com
css pace is mesmerizing lately, so much to play with these days <div class="bar" progress="55"></div> .bar { --progress: attr(progress type(<number>));
✍️ New Article: First Look at The Modern attr() I explored the new attr() capabilities and shared my thoughts about it. Happy reading! ishadeed.com/article/mode...
🚀 🆕 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
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...
lea.verou.me
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...
Hello 🦋! Here's sneak peek into Vitest reporter improvements I've been working on for a while now. This reduces terminal flickering, fixes scroll issues and adds status summary. It's still WIP but looking really good so far!
I wrote about `lh` units and `margin-trim’ for @5t3ph.bsky.social ‘s 12 Days of Web! 12daysofweb.dev/2024/css-mar...
CSS margin-trim and line height units | 12 Days of Web
Learn ways of perfecting design with line height units and margin-trim.
12daysofweb.dev