Jan Nicklas
@jantimon.bsky.social
living in Switzerland 🇨🇭 mainly working on typescript, css and compiler related frontend topics
https://github.com/jantimon
https://github.com/jantimon
Reposted by Jan Nicklas
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...
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...
September 15, 2025 at 9:14 PM
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...
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
September 8, 2025 at 8:00 PM
@danabra.mov did I miss anything in github.com/jantimon/rea... ?
Reposted by Jan Nicklas
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.
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.
July 12, 2025 at 6:55 AM
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.
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.
Reposted by Jan Nicklas
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...
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
June 10, 2025 at 10:14 AM
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...
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...
Reposted by Jan Nicklas
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
May 28, 2025 at 12:14 PM
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.
Reposted by Jan Nicklas
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
If you want to see how next-yak transpiles your input to static CSS have a look here: yak.js.org/playground
May 19, 2025 at 7:11 PM
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
If you want to see how next-yak transpiles your input to static CSS have a look here: yak.js.org/playground
Reposted by Jan Nicklas
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`.
May 18, 2025 at 5:19 AM
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`.
Reposted by Jan Nicklas
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
May 10, 2025 at 4:49 AM
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.
Reposted by Jan Nicklas
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...
⚡️ 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...
May 11, 2025 at 6:49 AM
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...
⚡️ 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...
Reposted by Jan Nicklas
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-...
Install it, try it and write us what you think
yak.js.org/docs/eslint-...
May 7, 2025 at 11:43 AM
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-...
Install it, try it and write us what you think
yak.js.org/docs/eslint-...
Reposted by Jan Nicklas
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...
- 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
April 13, 2025 at 3:57 PM
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...
- 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...
Reposted by Jan Nicklas
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
April 9, 2025 at 7:59 PM
Thanks to @jantimon.bsky.social, expect up to 20% smaller CSS files in the next update of next-yak (github.com/DigitecGalax...).
Reposted by Jan Nicklas
css pace is mesmerizing lately, so much to play with these days
<div class="bar" progress="55"></div>
.bar {
--progress: attr(progress type(<number>));
<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...
I explored the new attr() capabilities and shared my thoughts about it. Happy reading!
ishadeed.com/article/mode...
April 4, 2025 at 9:56 AM
css pace is mesmerizing lately, so much to play with these days
<div class="bar" progress="55"></div>
.bar {
--progress: attr(progress type(<number>));
<div class="bar" progress="55"></div>
.bar {
--progress: attr(progress type(<number>));
Reposted by Jan Nicklas
🚀 🆕 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
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
February 12, 2025 at 3:03 PM
🚀 🆕 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
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
Reposted by Jan Nicklas
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...
November 18, 2024 at 2:23 PM
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...
Reposted by Jan Nicklas
I wrote about `lh` units and `margin-trim’ for @5t3ph.bsky.social ‘s 12 Days of Web!
12daysofweb.dev/2024/css-mar...
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
December 24, 2024 at 10:33 PM
I wrote about `lh` units and `margin-trim’ for @5t3ph.bsky.social ‘s 12 Days of Web!
12daysofweb.dev/2024/css-mar...
12daysofweb.dev/2024/css-mar...
Reposted by Jan Nicklas
🔥 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
Supports all sorts of fancy curves too, via the new `linear()` function!
→ easingwizard.com
December 23, 2024 at 3:27 PM
🔥 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
Supports all sorts of fancy curves too, via the new `linear()` function!
→ easingwizard.com
oh wow the team around cartes.app migrated their entire next.js app from styled-components to next-yak
December 19, 2024 at 7:13 PM
oh wow the team around cartes.app migrated their entire next.js app from styled-components to next-yak
@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...
Could we please add the same for Lightning CSS?
github.com/parcel-bundl...
December 16, 2024 at 7:39 AM
@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...
Could we please add the same for Lightning CSS?
github.com/parcel-bundl...
🔥 just released next-yak 4.0
(our 🦀 rust based 💅 styled-components to css compiler)
with a neat performance improvements thanks to React 19
(our 🦀 rust based 💅 styled-components to css compiler)
with a neat performance improvements thanks to React 19
December 10, 2024 at 10:33 AM
🔥 just released next-yak 4.0
(our 🦀 rust based 💅 styled-components to css compiler)
with a neat performance improvements thanks to React 19
(our 🦀 rust based 💅 styled-components to css compiler)
with a neat performance improvements thanks to React 19
Reposted by Jan Nicklas
React v19 – React
The library for web and native user interfaces
react.dev
December 5, 2024 at 7:05 PM
Reposted by Jan Nicklas
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
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
September 14, 2024 at 7:09 AM
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
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
Reposted by Jan Nicklas
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
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
November 21, 2024 at 2:44 AM
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
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
Reposted by Jan Nicklas
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)
(These may sound like silly questions, but I’d love to understand *your* specific context and use cases)
November 20, 2024 at 2:15 AM
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)
(These may sound like silly questions, but I’d love to understand *your* specific context and use cases)