Sandro

@sandroroth.com

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

> 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 🤦‍♂️

Finally found a way to archive interesting blog posts. From RSS into Readwise Reader → Download via Reader API → Extract content as Markdown → Create Markdown file with Frontmatter → Move into Obsidian Vault → Create table with Obsidian Base 🚀

Bild

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

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.

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