iiinova — where your digital self keeps evolving

Sandro

@sandroroth.com

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

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

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

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 · 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 · 23/08/2025

☠️-Hangman in pure #TypeScript types 😎

140

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 · 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