# ryupold.de

> Personal portfolio, blog and project showcase by Michael Scherbakow (ryupold).
> Topics: web frontend development, Zig game development, raylib bindings, game jams, board games.
> The site itself is built with [Vode](https://github.com/ryupold/vode)  

## Author

**Michael Scherbakow** — software engineer, hobby game developer and open-source author.

- Website: https://ryupold.de
- Email: ryupold@gmail.com
- GitHub: https://github.com/ryupold
- Codeberg: https://codeberg.org/ryupold
- Bluesky: https://bsky.app/profile/ryupold.de
- Twitter: https://twitter.com/ryupold
- LinkedIn: https://linkedin.com/in/michael-scherbakow-a68b7a290

---

## Open-Source Projects

### Vode
- URL: https://ryupold.de/post/vode
- GitHub: https://github.com/ryupold/vode
- Codeberg: https://codeberg.org/ryupold/vode
- npm: https://www.npmjs.com/package/@ryupold/vode
- Latest version: 1.11.0 (released July 03, 2026)
- License: MIT
- Language: TypeScript (100%)
- Tags: web, frontend, framework

A compact virtual-DOM web framework for minimalist developers. Zero dependencies, no build step beyond TypeScript compilation. Provides full autocompletion via `lib.dom.d.ts`. Suited for single-page applications and isolated components with complex state.

**Core concept — the vode tuple:**
A `vode` is a lightweight virtual DOM node written as a plain array tuple:
```
[TAG, PROPS?, CHILDREN...]
```
Tag constants (DIV, SPAN, INPUT, etc.) are exported from the library. Props map directly to HTML attributes. Children can be strings, other vodes, or component functions.

**Key API:**
- `app(containerNode, state, renderFn)` — mounts a vode app onto any DOM element; returns a `patch` function.
- `patch(object | fn | asyncFn | asyncGeneratorFn | [])` — applies a deep-merged state update and triggers a re-render. Supports plain objects, sync/async functions, async generator functions (for incremental yields), and view transition arrays.
- `defuse(containerNode)` — removes all event listeners and state references from a mounted app (for cleanup/garbage collection).
- `memo(depsArray, componentFn | propsFactory)` — memoizes a component or props object; skips re-render when shallow-compared deps are unchanged.
- `context(state).path.to.substate` — creates a typed sub-state context for passing to reusable components without exposing the full state.
- `mergeClass(...args)` — intelligently merges class values (string, array, or `Record<string, boolean>`).
- `mergeStyle(...args)` — intelligently merges style values (string or object).
- `mergeProps(...args)` — intelligently merges props objects (left to right)
- `hydrate(element)` — reads an existing DOM element as a vode (useful for debugging).
- `tag(vode)`, `props(vode)`, `children(vode)` — accessor helpers for vode tuples.

**Special vode props:**
- `onMount(state, element)` — called when an element is first created in the DOM.
- `onUnmount(state, element)` — called when an element is removed from the DOM.
- `catch(state, error)` — error boundary; returns a fallback vode if a render error occurs in the subtree.

**State management:**
State is a plain JS/TS object passed to `app`. After mounting, a `patch` function is added to the state object itself. Patching `undefined` for a key deletes it from state. Silent (no-render) mutations can be done by directly setting properties and then calling `patch({})`.

**Installation options:**
- ESM via unpkg: `import { app, DIV, ... } from 'https://unpkg.com/@ryupold/vode/dist/vode.min.mjs'`
- Classic IIFE (ES5): `<script src="https://unpkg.com/@ryupold/vode/dist/vode.es5.min.js">` — binds to global `V`
- npm: `npm install @ryupold/vode`
- Direct download: https://ryupold.de/main/assets/posts/vode/vode-1.7.1.zip

**SVG & MathML:** Supported; require the `xmlns` attribute in props.

**View Transitions:** Experimental support for the browser View Transitions API. Pass an array of patches to `patch([...])` to animate them. Disable globally via `globals.startViewTransition = null`.

**Performance:** Optimized for small-to-medium apps; handles tens of thousands of DOM elements. Per-render stats available at `appNode[VODE].stats`. Smart use of `memo` further improves performance. Benchmarked at https://krausest.github.io/js-framework-benchmark/current.html.

**Philosophy:** Inspired by [hyperapp](https://github.com/jorgebucaran/hyperapp). Intentionally feature-frozen — designed to feel nice to code with, not to be the fastest or most feature-rich framework.

---

### zecsi
- URL: https://ryupold.de/post/zecsi
- GitHub: https://github.com/ryupold/zecsi
- Example usage: https://github.com/ryupold/zecsi-example
- Posted: April 30, 2022
- Tags: zig, games, raylib

A small game framework built with [Zig](https://ziglang.org) and [raylib](https://www.raylib.com), designed for rapid prototyping and experimentation. Created as an alternative to Unity for quick game ideas — Unity WebGL builds often exceed 100 MB and take a long time; zecsi produces Windows `.exe` files of 1–3 MB and WebGL builds under 1 MB, with build times under 5 seconds.

Built on top of ECS concepts (influenced by [SystemBase](https://github.com/limered/SystemBase)) and the `raylib.zig` bindings. Intended for experiments and prototyping rather than AAA game development. Includes a live WebGL demo playable in-browser at https://ryupold.de/main/assets/posts/zecsi/game.html.

---

### raylib.zig
- URL: https://ryupold.de/post/raylib.zig
- GitHub: https://github.com/ryupold/raylib.zig
- Examples: https://github.com/ryupold/examples-raylib.zig
- Posted: April 28, 2022
- Tags: zig, games, raylib

Idiomatic Zig bindings for [raylib](https://www.raylib.com), generated automatically from raylib's own `raylib_parser` tool (which outputs JSON metadata for all structs, enums, functions and constants).

**Why custom bindings instead of direct C import:**
- Direct C header import in Zig produces `[*c]T` pointer types — ambiguous (single vs multi-item, nullable vs non-nullable).
- IDE tooling (e.g. VSCode) cannot provide tooltips/autocomplete for imported C headers.
- Emscripten/WASM targets require all struct parameters to be passed as pointers; raw C bindings fail with cryptic "index out of bounds" errors.

**Generation pipeline (3 steps):**
1. Run `raylib_parser` to produce `raylib.json`, `raygui.json`, `raymath.json`, `physac.json`.
2. Convert to "zigified" intermediate `binding.json` (each definition can be marked `custom=true` to override).
3. Generate final `raylib.zig` + `marshal.h` + `marshal.c` from `binding.json`.

**Covered headers:** `raylib.h`, `raymath.h`, `rlgl.h`, `raygui.h`, `physac.h`.

Includes many live WebGL demos of official raylib examples ported to Zig, playable in-browser on the post page (hello_world, input_keys, 3d_camera_free, bunnymark, raygui, 3d_picking, heightmap, audio_stream, and more).

---

## Board Game

### Agnej — Competitive Tower Building Game
- URL: https://ryupold.de/post/agnej
- Posted: September 19, 2024
- Tags: board game

A physical board game that inverts the classic Jenga concept. Players cooperate and compete simultaneously to build an ever-growing tower from the ground up — but the ground is lava (foundation blocks must never be moved off the playing field).

**What you need:** A flat surface, an even number of equally-cut blocks (e.g. a Jenga set), at least 2 players.

**Gameplay summary:**
- **Setup:** Each player places 1 foundation block anywhere on the playing surface.
- **Build-up phase:** On each turn, draw 2 blocks; place the first on the previous player's last block, place the second anywhere on the structure. Wait 5 seconds for stability, then release. If any non-foundation block touches the ground, the game ends immediately.
- **Build-down phase:** Triggered when the block pile is empty (or by mutual agreement). Players take turns removing one block per turn and moving it outside the playing field, scoring 1 point per block removed (plus 1 bonus point for each block riding on top of the removed piece).
- **Placement rules:** One hand only; flattest orientation; no supporting with a second hand; blocks may bridge multiple pieces at the same level.
- **Game over conditions:** Any non-foundation block touches the ground; a foundation block is moved outside the playing field; a player disrupts the structure causing blocks to fall.
- **Optional point buy-in:** Players pre-agree on a buy-in value; each point grants a block from a personal pile.

---

## Game Jam Entries (Ludum Dare)

All entries are team projects unless noted as Compo (solo).

| Event | Date | Title | Description | Links |
|---|---|---|---|---|
| LD 59 (Jam) | April 2026 | Lost in Transit | Help “routing” the sent packets from the sender to you. Made with Godot. | [Post](https://ryupold.de/post/ld59) · [itch.io](https://ryupold.itch.io/lost-in-transit) · [ldjam](https://ldjam.com/events/ludum-dare/59/packet-loss) · [source](https://github.com/ryupold/ld59) |
| LD 57 (Jam) | April 2025 | Brainwash | Sci-fi brain-cleaning game set in 2084. WASD + arrow keys. Shoot lasers to destroy microplastics. Made with Godot. | [Post](https://ryupold.de/post/ld57) · [itch.io](https://limered.itch.io/brainwash) · [ldjam](https://ldjam.com/events/ludum-dare/57/brainwash) · [source](https://github.com/limered/ld57) |
| LD 56 (Jam) | October 2024 | Creature Grabber | Claw machine game — grab the tiny creature out of the machine. | [Post](https://ryupold.de/post/ld56) |
| LD 52 (Jam) | January 2023 | Our Hill of Stars | 20 logic puzzles. Guide Harvey over fields finding the path with the fewest turns. 3-star rating system. | [Post](https://ryupold.de/post/ld52) |
| LD 51 (Jam) | October 2022 | LOve FInder | Dating app parody. Every 10 seconds someone falls in love. Fast-paced matchmaking with compromises. | [Post](https://ryupold.de/post/ld51) |
| LD 50 (Compo) | April 2022 | Tick Tack | Solo 48h entry. Student cheating on an exam — silently pass answers to classmates while dodging a patrolling teacher. | [Post](https://ryupold.de/post/ld50) |
| LD 49 (Jam) | October 2021 | Unstable Way Home | Help the very drunk Rodrigues navigate his unstable way home to his girlfriend. | [Post](https://ryupold.de/post/ld49) |
| LD 48 (Jam) | April 2021 | Is this a tiger? | Tourist guide Davi leads curious tourists safely through a dangerous jungle to a temple. | [Post](https://ryupold.de/post/ld48) |
| LD 47 (Jam) | October 2020 | Another One Loops The Dust | Help Hansel the Hamster clean a dusty record player before the song loops into disappointment. | [Post](https://ryupold.de/post/ld47) |
| LD 46 (Jam) | April 2020 | Joe Disco | New York, 1976. Keep the party alive at Boogie Wonderland. You are Disco Joe. | [Post](https://ryupold.de/post/ld46) |
| LD 44 (Jam) | April 2019 | Fishtastic - The Adventures of Kailax | Kailax the salmon is kidnapped and dropped in the ocean. Help him find his way back home. | [Post](https://ryupold.de/post/ld44) |
| LD 42 (Jam) | August 2018 | S.P.A.C.E – Stinky Purring Annoyed Cat Escape | Play as a cat at a crowded party. Eat, use the toilet, get cuddles — but don't invade anyone's personal space. | [Post](https://ryupold.de/post/ld42) |

---

## About This Site

- Built entirely with [Vode](https://ryupold.de/post/vode) — Michael's own TypeScript virtual-DOM framework.
- Single-page application; all routing is client-side.
- Initial server-side rendering; content is hydrated then rendered in the browser via JavaScript.
- Supports dark/light theme switching (preference stored in `localStorage`).
- Several posts include embedded WebGL demos running in sandboxed iframes (zecsi game, raylib.zig examples).
- Comments section is lazy-loaded per post.
- The site is a personal hobby project — not a commercial product.