Profile avatar
maikelkrause.bsky.social
Frontend engineer | JavaScript/TypeScript | ⚛️ React | ❤️ CSS | Linguistics | 日本語で🆗 📍Amsterdam
98 posts 418 followers 1,327 following
Prolific Poster
Conversation Starter

RSC support in React Router powered by Parcel! 🤩

ECMAScript excitement 😉 Node.js 24 LTS ships these new JS features 🎉 🔶 Atomics.pause 🔶 Error.isError 🔶 Explicit Resource Management (`using`) 🔶 Float16Array 🔶 Intl.DurationFormat 🔶 Promise.try 🔶 RegExp.escape 🔶 RegExp Modifiers 🔶 RegExp Duplicate Named Capture Groups

This XSS vulnerability using ISO-2022-JP content sniffing is kind of amazing. The fact that it only works because the ASCII mode is *almost* ASCII-compatible except for backslash/tilde, somewhat uncommon chars, and yet also backslash can break out of a string... www.sonarsource.com/blog/encodin...

Soft launching a new TanStack library today. Check out TanStack Pacer! A small utility library for debouncing, throttling, rate limiting, queuing, and task pooling. It's in alpha, but can't wait to see how this might evolve. Check it out at: tanstack.com/pacer

@nerdy.dev Are there any working examples of CSS Mixins in Chrome Canary? So far all the examples I've tried either do nothing (if I use arguments/@result), or they just crash 🥲

Now that Chrome (135) + Safari (18.4) both support #CSS `shape()`, I experimented rewriting @css-only.dev's CSS-only tooltip using just shape(). This means we can get rounded corners without having to use `::before` for the arrow (which doesn't work with overflow: auto). codepen.io/maikelkrause...

Safari 18.4 is out and it's loaded webkit.org/blog/16574/w... #css

Why does React Aria have its own Virtualizer implementation? Accessibility. Virtualization breaks keyboard navigation in most component libraries because the focused element is removed from the DOM. React Aria's Virtualizer automatically persists the focused item even when it scrolls out of view.

HUGE React Aria release! 🍿 🔍 Autocomplete: Command Palette, Searchable Select + Submenu 🆕 3 new components: Toast, Tree, Virtualizer 🧩 Custom Menu/Popover/Tooltip triggers 🌉 Table colspan 👆 usePress interop, fixing 15+ issues 💨 Tailwind v4 📅 DatePicker RTL react-spectrum.adobe.com/releases/202...

Because I keep seeing `position: absolute` + lots of of offset + size + transform + sometimes even margin properties to stack + middle align the stacked items... you can easily do it with 3 #CSS properties!

You can pass sub-classed Promises to React such as in use() with the fields status and value or reason. This allows React synchronously read the value without waiting on a microtask. This is much faster but it also ensures compat when someone needs flushSync(). Microtasks are bad, mkay.

#CSS only carousels arrive in Chrome 135 ⤷ nerdy.dev/css-carousel...

Safari Technology Preview 215 is here! It includes several exciting features: - Scroll Driven Animations - text-wrap-style: pretty - CSS Anchor Positioning - HDR images - Trusted Types - File System WritableStream API webkit.org/blog/16523/r...

Safari Technology Preview 215: #CSS - Scroll Driven Animations - text-wrap-style: pretty - Anchor Positioning Image - HDR images

After 2+ years, it's finally time to announce @TanStack.com Form v1! ✅ Type Safe 🚀 Framework Agnostic 🎭 Headless 🔄 Isomorphic 🛡️ Advanced Validation 📜 Standard Schema ➕ More!

The exciting future or Records & Tuples in JavaScript: github.com/tc39/proposa... * Now they're objects called Composites, instead * They're really just frozen Objects/Arrays! * Except with an extra bit for Map/Set key behavior * You need to call Composite.equals for comparison; === is by identity

🤩 Scroll-Driven Animations got switched on by default in WebKit! github.com/WebKit/WebKi... This means that the next Safari Technolgy Preview release should have it, and that a stable release might follow soon 🤤 ℹ️ Learn all about SDA over at scroll-driven-animations.style

Blink: Intent to ship: Customizable select

TypeScript excitement 😉 Thanks to @searyanc.dev for landing the new --erasableSyntaxOnly tsconfig flag. Heading for TS 5.8 Beta next week 🎉 🔷 Guides users away from TS-only runtime features such as enum & namespace 🔷 Pairs nicely with Node's recent TypeScript support github.com/microsoft/Ty...

It's happening! developer.mozilla.org/en-US/blog/j... #webdev #js #temporal

Accessibility essentials every front-end developer should know. I think the title is pretty clear, yet, so many "simple" things I see done wrong, over and over again. Please forward this tutorial by Martijn Hols to your front-end team. Thank you friends.

Chrome, as of 132, finally has keyboard support for scrolling containers: adrianroselli.com/2022/06/keyb... This assumes it doesn’t get rolled back again, as it has every other time it was deployed since 2018. Silence from Safari. #accessibility #a11y

Chrome 133 is _packed_! #webdev developer.chrome.com/blog/chrome-...

#CSS line-clamp (unprefixed) is available safari 18.2. I guess 🤷🏾‍♂️

Found two #Chrome rendering issues just in the past few weeks working on a new design system. Am I trying to be too clever with my #css...? No, it's the browsers who are wrong!

Almost forgot about #caturday

How do you make a button that doesn't change it's width when it's in a loading state? Use CSS Grid to stack items, and visibility: hidden to hide/show spinner! This approach allows the largest item to size the button, and keeps the button text accessible

Finally, text-box trimming in #css! WebKit team with the scoop 🙌 webkit.org/blog/16301/w...

👀 DOM Node.moveBefore is coming? Move a node from one tree to another 👍 Chromium: in canary, intent to ship 🆕 👍 Firefox/Gecko: positive 👍 WebKit: positive Already in HTMX 😄 Looks like this could be useful for React too 👀

We implemented a new value for `background-clip` called `border-area`. It lets you use CSS fill a border with a background image or gradient. This article explains how it works, and shows up the possibilities in 7 demos. #css #webdesign #webdevelopment #graphicdesign webkit.org/blog/16214/b...

I'm obsessed with #CSS Anchor Positioning lately, and @kevinpowell.co just did a great video on it. Must watch for any #frontend dev www.youtube.com/watch?v=DNXE...