Sign in

Sandro

@sandroroth.com
36 followers 31 following 40 posts

Software Developer based in Switzerland 🇨🇭 🔗 sandroroth.com 🔗 tinytip.co

PostsRepliesMedia
Sandro @sandroroth.com · 08/07/2026
I built #Wordle in pure #TypeScript types. No runtime - the type checker runs the whole game 🟩🟨 ➡️ sandroroth.com/blog/wordle-...
010
Reposted by Sandro
Josh Collinsworth @collinsworth.dev · 11/06/2026
I've been working on this post for a while now. It's about why I think the productivity boost LLMs offer for developers is regularly and severely overestimated. joshcollinsworth.com/blog/product...
joshcollinsworth.com
LLMs and performative productivity
It's worth asking whether LLMs are actually making us more productive at all—and if so, what we might be sacrificing in return.
6418
Sandro @sandroroth.com · 22/04/2026
Sure, but without knowing it. They don't read their AI generated code.
050
Sandro @sandroroth.com · 07/02/2026
Eleventy Notes turns 3 today 🎂 🥳 The first version shipped on February 7th, 2023 and it's come a long way since then, lots of new features and improvements over the years. Thanks to everyone using it and helping make it better 🙌
eleventy-notes.sandroroth.com
Eleventy Notes
A simple, lightweight, and flexible note-taking template for Eleventy.
010
Sandro @sandroroth.com · 24/01/2026
> I made a serious mistake. The regex failed to capture the numbers and titles, and all 24 files were renamed to the same filename, causing 23 files to be overwritten. I'm very sorry - this data loss cannot be undone through normal means Thanks Claude Code for deleting my files 🤦‍♂️
12333
Reposted by Sandro
Sandro @sandroroth.com · 04/01/2026
Just launched Unfortunate Transitions 👻 A little puzzle game where you're a poltergeist eliminating your cheerful housemate through indirect means. Built with #XState, with actor code visible in-game. ➡️ unfortunate-transitions.sandroroth.com
011
Sandro @sandroroth.com · 04/01/2026
Just launched Unfortunate Transitions 👻 A little puzzle game where you're a poltergeist eliminating your cheerful housemate through indirect means. Built with #XState, with actor code visible in-game. ➡️ unfortunate-transitions.sandroroth.com
011
Sandro @sandroroth.com · 21/12/2025
Thanks 😊
010
Sandro @sandroroth.com · 21/12/2025
Rebuilt my website sandroroth.com from scratch with @astro.build 🚀
180
Sandro @sandroroth.com · 23/11/2025
Metal parts and screws are even more fun 🪛🔧 That one is from Metalkitor 🦂
010
Sandro @sandroroth.com · 14/11/2025
Absolutely, I already use it in a new project at work and it's great.
010
Sandro @sandroroth.com · 13/11/2025
Does anyone actually use Playwright's Component testing feature? It's marked experimental for more than 3 years now 🤔
200
Sandro @sandroroth.com · 05/11/2025
VSCode supports inlay hints for that (but I'm not a fan of them): `"javascript.inlayHints.parameterNames.enabled": "all"`
110
Reposted by Sandro
Erik Rasmussen @erikras.com · 31/10/2024
👻 HAPPY HALLOWEEN!! 👻
133
Sandro @sandroroth.com · 30/10/2025
Just migrate to Vitest Browser Mode 😉
010
Sandro @sandroroth.com · 22/10/2025
How is this measured? For me (iOS 16 / iPhone 8) it shows a total app startup time of 1.3s, but if I record the screen and check the time it's actually 2.5s (from iOS app-icon-zoom animation completed - "New Tab" page is visible).
100
Sandro @sandroroth.com · 13/10/2025
Yes, maybe. We'll see it when it's released.
010
Sandro @sandroroth.com · 12/10/2025
Not sure how this would work with Parent and Child being in different files. We'll end up with circular dependencies. And if we see context as a kind of dependency injection, I don't really care *where* the context is coming from, so binding it to a specific component doesn't feel right.
110
Sandro @sandroroth.com · 10/10/2025
We use errors for critical things/potential bugs (e.g. button without type attribute) and warnings for things that that are okay while coding (e.g. debugger statement). Both need to be fixed before merging (max-warnings=0). Just looks a bit nicer with the different colors in the IDE.
130
Sandro @sandroroth.com · 02/10/2025
🧩 Code Puzzle, a little side project I made. Each level gives you a JS snippet split into pieces. Arrange them in the right order with drag and drop to solve the puzzle. ➡️ code-puzzle.sandroroth.com Built with #React and #XState
061
Sandro @sandroroth.com · 02/10/2025
yep, so weird 🤯
010
Sandro @sandroroth.com · 02/10/2025
> If an attribute name is not a valid JS identifier (like a data-* attribute), it is not considered to be an error if it is not found in the element attributes type. It's not even typed as `any`, JSX just allows them without type-checking 😕
typescriptlang.org
Documentation - JSX
Using JSX with TypeScript
120
Reposted by Sandro
Axel Rauschmayer (also on 🦣) @dr-axel.de · 25/09/2025
Neat CSS game by @sandroroth.com: “CSS Selectors Playground” selectors.sandroroth.com
selectors.sandroroth.com
CSS Selectors Playground
041
Reposted by Sandro
TypeScript.fm @typescript.fm · 26/08/2025
Today on the pod, major TS ecosystem updates: TypeScript Go gets biggest nightly update yet, Rspack announces new Rslint linter, Bun 1.2.21 features 500x faster postMessage, plus Next.js 15.5 has typed routing! share.transistor.fm/s/0304855f #typescript
share.transistor.fm
TypeScript Go Nightly Improvements, Rslint Announced, and Big Bun Updates | News | Ep 32 | TypeScript.fm - The Friendly Show for TypeScript Developers | Episode 32
News of the week of August 18, 2025: one of the biggest nightly updates for TS Go, Rspack team announces a new linter, the new minor Bun release is pretty major, and Next.js 15.5 features typed routing...
284
Sandro @sandroroth.com · 24/08/2025
Here's the code
sandroroth.com
Type-Level Hangman in TypeScript | Sandro Roth
Implementing a Hangman game entirely at the type level using TypeScript’s type system.
010
Sandro @sandroroth.com · 23/08/2025
☠️-Hangman in pure #TypeScript types 😎
140
Sandro @sandroroth.com · 28/07/2025
Lucky you - we use a component library that often re-creates DOM elements when unstable values or callbacks are passed in 🤷‍♂️ 😢
120
Sandro @sandroroth.com · 19/07/2025
Isn't that expected as Recoil is no longer maintained?
100
Sandro @sandroroth.com · 14/07/2025
> Reproduction: I'm not lying 😂
120
Sandro @sandroroth.com · 22/05/2025
You can already display properties 🤨
110
Sandro @sandroroth.com · 02/05/2025
Nice setup 👍 We use Vitest + happy-dom but we'll evaluate Vitest's browser mode when it's stable. We have units tests for transition-heavy machines that are not fully covered by UI tests. UI tests give as much more confidence, they test everything together (just API request are mocked).
010
Sandro @sandroroth.com · 01/05/2025
Then you don't test the UI components?
100
Sandro @sandroroth.com · 01/05/2025
> [...] to validate my machines Do you test your machines directly? I sometimes write test for the machine itself but mostly prefer to test the UI and treat the machine as an implementation detail. And the UI doesn't even have to be implemented as a state machine for model-based testing.
100
Sandro @sandroroth.com · 01/05/2025
I still need to learn more about how to model the machine for model-based testing, I think it's harder than modelling a machine for the app itself. @davidkpiano.bsky.social Maybe something for your next talk 😉
110
Sandro @sandroroth.com · 01/05/2025
I think Model-based testing is helpful if there are many UI states and interactions. Writing tests manually for all the possible transitions is a lot of work and it's easy to overlook some paths.
110
Sandro @sandroroth.com · 01/05/2025
I just used Model-based testing for the first time. It's in a small side-projection and traditional tests would actually work fine for this use case. I'm still waiting for a good use case to come up at work.
110
Sandro @sandroroth.com · 01/05/2025
I could be wrong but I think it happens if the promise resolves in less than 300ms (min duration for Suspense AFAIK) and the sibling component is updated after the promise resolved but before the 300ms are reached.
140
Sandro @sandroroth.com · 01/05/2025
Interesting, I just have 3 snapshots (not 4) with the Body only being rendered once ("This is the first time the component rendered"), but render count is 2. It's also reproducible with just `use(someStaticPromise)` without a query, so it's not doesn't seem to be related to uSES.
130
Sandro @sandroroth.com · 27/04/2025
Model-based testing with XState helps you test your app more thoroughly without writing every test by hand. You define the model, add test code for states and events, and XState generates the rest. Here, I’m running over 60 tests from just one model. 🚀 #testing #xstate #statemachine
100
Sandro @sandroroth.com · 28/03/2025
Not that bad 😇 but I'm unsure if it's a good idea, as plain HTML introduces other issues, such as overly long text lines that hinder readability 🤔
100
Sandro @sandroroth.com · 25/03/2025
It should not be needed in upcoming versions: github.com/facebook/rea...
github.com
Use valid CSS selectors in useId format by sebmarkbage · Pull Request #32001 · facebook/react
For the useId algorithm we used colon : before and after. #23360 This avoids collisions in general by using an unusual characters. It also avoids collisions when concatenated with some other ID. Un...
150
Sandro @sandroroth.com · 16/03/2025
My interactive playground for CSS selectors now uses @tanstack.com Start + Router. I also redesigned the homepage and added a few more selectors. Do you miss a selector? #css #react #tanstack
selectors.sandroroth.com
CSS Selectors Playground
162
Sandro @sandroroth.com · 19/12/2024
- Integration of other libs/state like a router. - Simplify machines with many transitions (e.g. wizards, users can nav back to any not skipped step until submit state). Not sure how this could look like. - Derived context/selectors - Better type-safety - Tell Copilot that v5 was released
030
Sandro @sandroroth.com · 01/12/2024
Using string union types for handling translations not only autocompletes the keys but also provides their default English translations. This helps you understand what to translate and identifies available dynamic values. TypeScript is incredibly powerful! 🚀 #TypeScript #i18n
A Visual Studio Code screenshot showing a TypeScript code snippet for defining German translations. The cursor is positioned at the value of the translation key "sidebar.navItemToggle.label," and an autocomplete popover suggests the default English translation "Toggle {{ title }}" as a possible value.
010
Sandro @sandroroth.com · 17/11/2024
React Component Composition with polymorphism is quite tricky. You loose type-safety and it's easy to break a11y. The `as` prop is probably the worst (slow type checking + ambiguous props). `asChild` hurts readability and introduces additional nesting. Is @ariakit.org's `render` approach the best?
```tsx
<!-- Approach 1: as prop -->
<Dialog.Close as={MyButton} variant="outlined">
  <Icon />
  <span>Close</span>
</Dialog.Close>


<!-- Approach 2: asChild prop (Radix UI) -->
<Dialog.Close asChild>
  <MyButton variant="outlined">
    <Icon />
    <span>Close</span>
  </MyButton>
</Dialog.Close>


<!-- Approach 3: render prop (Ariakit) -->
<Dialog.Close render={<MyButton variant="outlined" />}>
  <Icon />
  <span>Close</span>
</Dialog.Close>
```
0111