Julian
LightNews LightNews
banner
fettstorch.com
Julian
@fettstorch.com
870 followers 730 following 540 posts
🟦Typescript; 💚Vue; 🎲DnD
🎮 Game Programming/Design 👾
🦊My dog Kleo
34 he/him

https://www.programmier.bar/
Posts Replies Media Videos
fettstorch.com
Ok if you're still here and still want the impl here it is. But again: You should probably not use this 😅
(code is in alt text)
import { sleep } from './sleep' /** * * Allows to execute a function and retry it as you see fit. * The given action will get access to a 'retry' function that can be used to * 1. interrupt the current execution of the action * 2. re-execute the action * The action will also get the current try count. * * @example * ```ts * const result = retryable(({ retry, tryCount }) => { * const result = doSomething() * if (isNetworkError(result)) { * console.log(`try ${tryCount}`) * retry({ backoffMs: 250 }) * // unreachable code here 👍🏻 * } * }) * ``` * @param action the function to execute that might fail * @param action.tryCount the current try count * @param action.retry the function to initiate a retry * @param action.retry.backoffMs the backoff in milliseconds * @param action.retry.cause the cause of the retry * * @returns the result of the function */ export function retryable<T>( action: (context: { tryCount: number retry: (args: { backoffMs: number }) => never }) => T ): T { function retryDecoratedAction(tryCount: number): T { try { const result = action({ retry: ({ backoffMs }) => { throw new Retry(backoffMs) }, tryCount }) // case: result is a promise if (result instanceof Promise) { return result.catch((error) => { if (error instanceof Retry) { return sleep(error.backoffMs).then(() => retryDecoratedAction(tryCount + 1)) } return Promise.reject(error) }) as T } // case: not a promise return result } catch (error: unknown) { if (error instanceof Retry) { return retryDecoratedAction(tryCount + 1) } throw error } } return retryDecoratedAction(1) } //--- module private class Retry extends Error { constructor(readonly backoffMs: number) { super('retry') Object.setPrototypeOf(this, Retry.prototype) } }
November 21, 2025 at 11:55 PM
fettstorch.com
its the meme of timmys dad pointing to an empty pedestal saying "this is where i'd put my trophy - IF I HAD ANY" only this picture replaces the text with "this is unreachable code - IF YOU DON'T ASK TYPESCRIPT"
November 21, 2025 at 11:55 PM
fettstorch.com
unless... the never returning function is received as a function argument for some reason 🫩 (which is the case for my retry function 😭)
screenshot of the following code not including an error message as this time the code following the never returning function will not be detected as unreachable: retryable(({ retry, tryCount }) => doSomethingAsync().catch((error) => { if (isNetworkError(error)) { retry({ backoffMs: tryCount * 250 }); console.log( "this is unreachable code - but typescript thinks it is reachable :(" ); } return Promise.reject(error); }) );
November 21, 2025 at 11:55 PM
fettstorch.com
And I learned that typescript is actually smart enough to determine code as unreachable if it follows a function call that returns never e.g.:
screenshot of the following code including an error message stating that the console log is unreachable code: function main() { throwError(); console.log("this is unreachable code"); } function throwError(): never { throw new Error("this is an error"); }
November 21, 2025 at 11:55 PM
fettstorch.com
The first insight is that we can interrupt foo via the 'retry' function as the retry function throws. This is the only way how a nested function can preempt the calling function I think. While I wouldn't recommend abusing exceptions as a messaging/event system erm... we goofin 🤪🤙🏻
screenshot of the following code: function retry(args: { backoffMs: number }): never { throw new Retry(args.backoffMs); }
November 21, 2025 at 11:55 PM
fettstorch.com
Was goofing around with a functional approach to a 'retryable' construct today and learned a few things 🤓
Heres the concept:

- provide a 'retryable' function taking a function (foo)
- it provides a 'retry' function that interrupts the current foo's execution and re-executes foo

🧵

#Javascript #TS
screenshot of the following code: function main() { retryable(({ retry, tryCount }) => doSomethingAsync().catch((error) => { if (isNetworkError(error)) { retry({ backoffMs: tryCount * 250 }); } return Promise.reject(error); }) ); }
November 21, 2025 at 11:55 PM
fettstorch.com
Initially I thought I'd get away with being the lazy programmer I am but eventually people discovered that they could vote for their favorite result/contestant without limit 😅 resulting in... a little voting chaos

at one point someone created a script on the spot voting for a contestant endlessly 😆
November 18, 2025 at 4:10 PM
fettstorch.com
We had different challenges and difficulties. Here the contestants had to create the german flag using vanilla html/css only.
November 18, 2025 at 4:10 PM
fettstorch.com
I got to host the coding challenge event which was super cool 😊
November 18, 2025 at 4:10 PM
fettstorch.com
And had some fun with the blind coding challenge app I made for the event 🙈👨🏼‍💻
photo of three young men sitting in front of a tiny desk each with a laptop on top. they are facing a crowd of people. behind them a screen showing their projected screens with their coding results to the crowd.
November 18, 2025 at 4:10 PM
fettstorch.com
Besides great presentations I especially enjoyed meeting a lot of the people that enjoy the programmier.bar because it seems we have a great community at hand.
We had nerdy conversations, played some beerpong...
picture of a long table in an old room with high windows/glass-doors. on the table there are red and black cups on either side arranges for beer pong. a few cups are already missing on each side. we see one team of two young men both in black shirts looking at a ball slipping right into one of their cups. thrilling.
November 18, 2025 at 4:10 PM
fettstorch.com
3 weeks ago we at the @programmier.bar had our first Web- & AI conference 🎉
We had great speakers like @rich-harris.dev (fanboy moment), @mirjam-diala.bsky.social talking about testing and training dogs (I mean come on! 🐶❤️) and @nico.dev showing us how he recreated KITT 🤯🚗

#web #dev #conference #ai
screenshot from the programmier.bar webpage about the programmier.con conference showing three of the speakers rich harris (profile pic of him munchin a... burrito?) mirjam aulbach and nico martin.
November 18, 2025 at 4:10 PM
fettstorch.com
I am very fond of the 'tree' program. If you're also in the terminal a lot and like to get a quick overview of a certain dir you can enhance it very easily by using:
-C (for colorized output)
--gitignore (apply .gitignore to the search (!))
--dirsfirst (to sort dirs on top)

#terminal #dev
terminal screenshot with the following text: tre . ├── public │   ├── favicon.ico │   ├── garrelt-body.png │   ├── garrelt-dancing.png │   ├── garrelt-guitar.png │   ├── garrelt-head.png │   ├── garrelt-normal.png │   ├── garrelt-rocking.png │   └── Garrelt.png ├── src │   ├── App.vue │   └── main.ts ├── env.d.ts ├── index.html ├── package-lock.json ├── package.json ├── README.md ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts 3 directories, 19 files
November 17, 2025 at 4:02 PM
fettstorch.com
So we just wrap up a minimal Dockerfile like this:
github.com/koyeb/exampl...

Et voilà! 🍷🥖
screenshot of a minimal dockerfile in order to introduce the bun runtime to the container. it shows this code: FROM oven/bun:1 WORKDIR /app COPY . . RUN bun install ARG PORT EXPOSE ${PORT:-3000} CMD ["bun", "server.ts"]
November 16, 2025 at 5:07 PM
fettstorch.com
The hosting on koyeb was also really easy!
Since I wanted to use bun I just had to make sure the runtime knows bun. Thats where docker comes in.
Koyeb comes with a dockerfile builder.
screenshot of the koyeb config. one can see 'service type', 'source' and 'Builder'. The builder part is expanded and reveals two options: 'Buildpack' (Uses buildpacks to detect your project's language, install dependencies, and package the environment into a runnable image) and 'Dockerfile' (If your repository contains a Dockerfile, Koyeb can use it to build a runnable container image for your project)
November 16, 2025 at 5:07 PM
fettstorch.com
I thought it was especially cool how easy it is to set up and manage websocket connections.
A websocket can subscribe to a "channel" e.g. "match-${matchId}" and then from anywhere else in the code our server can publish to those channels 😍🧦
code snippet screenshot (to keep syntax highlighting) with this code: const server = Bun.serve({ fetch(req, server) { if (server.upgrade(req)) return; return new Response("Upgrade failed", { status: 500 }); }, websocket: { open(ws) { ws.subscribe("chat"); server.publish("chat", "User joined"); }, message(ws, message) { server.publish("chat", message); }, }, });
November 16, 2025 at 5:07 PM
fettstorch.com
While i made a 'blind-coding-challenge' I still wanted to be able to show a player's result in an iframe so I could:
1. offer a preview joker (e.g. look at your result once per match)
2. be able to execute the player's code and extract console output (e.g. for a console joker)
November 16, 2025 at 5:07 PM
fettstorch.com
This is actually also important for the player clients. As they are also just webapps, without an iframe a player COULD define a css rule in their editor (e.g. div background red) and affect:
leftmost: square titled 'host client' filled red containing two nested squares titled 'preview1' and 'preview2' which are both also filled red. on the right two squares titled 'player1 client' and 'player2 client'. while inside the player1 client nothing is filled red inside the player2 client everything is filled red.
November 16, 2025 at 5:07 PM
fettstorch.com
In essence player clients connect to the backend using websockets to update the backend with their current code.

The backend then relays those updates to the host client which will embed each player's code into an iframe.
This is actually important to isolate the players' codes from each other
top center a cloud icon (supposed to depict the cloud host koyeb) the koyeb icon on the cloud. inside the cloud a square titled backend containing both the docket icon and another nested square containing the bun icon. left bottom: a square titled 'host client' containing two nested squares titled iframe1 and iframe2. right bottom: two squares titled 'player1 client' and 'player2 client'. both contain another square titled 'iframe'. from the host client there is a bidirectional arrow between it and the backend. from the player clients there is an arrow (each) pointing to the backend.
November 16, 2025 at 5:07 PM
fettstorch.com
Shoutout to @bun.sh and @koyeb.com! 🎉
I made a blind-coding-challenge app for the evening entertainment at an event.
Both technologies are just chefs kiss 😚👌

🧵

#bun #hosting #javascript #buildinpublic #dev

(host client) (player client)
November 16, 2025 at 5:07 PM
fettstorch.com
Just learned that in Vi you can use 'zz' to scroll the editor view so that the cursor is centered.
So i immediately remapped {,},n,N to always center the cursor after a 'jump'. Feels great!

I'd be happy to hear about your favorite vimrc configs!

#vi #vim #vimrc
shows a snippet from a .vimrc file with the following instructions: " Center the view after jumping to the previous/next paragraph nnoremap { {zz nnoremap } }zz " Center the view after jumping to the next/previous search result nnoremap n nzz nnoremap N Nzz this remaps the {,},n and N actions in normal mode to just also execute zz
July 17, 2025 at 9:48 AM
fettstorch.com
Fun!!!! 🤩
Screenshot of nornoe’s profile showing a light purple variant of the generated avatar
May 17, 2025 at 9:33 AM
fettstorch.com
But what if we just cheat a little and also change the b value with each frame by updating the target value accordingly to the stones position ¯\_(ツ)_/¯.
Well cheating is - of course - the solution here 😌👏🏻👏🏻
And we also won't just stop executing our animation function after one second 💡
a microsoft paint-esque drawing. 4 frames each depicting one moment in time of a 2d side viewed curling game where the curling stone is sliding over an ice track. Behind the stone (in each of the 4 frames) is a camera that tries to catch up with the stone. in between the stones and the cameras are mathy lines depicting the distances between the stone and the camera or the stone and the origin. in red for each frame there is a t value. first frame t = 0. second frame t = 0.5. third frame t = 0.8. fourth frame t = 1. It shows an unusual lerp as this one not only steadily changes the t value but also the target value (here b). When the formula is lerp(a,b,t)=a+(b-a)*t both t and b constantly change.
May 10, 2025 at 6:02 PM
fettstorch.com
Worse. The lerp defined a maximum value for the desired target position, so the camera won't ever move further than that and the stone will leave us behind quickly... 😭
May 10, 2025 at 6:02 PM
fettstorch.com
Then we grow our 𝐭 value steadily towards 1 during a fixed amount of time of e.g. 1 second.

But the stone won't stop moving while we animate the camera towards its new target position 😵‍💫 So even when our camera will ultimately reach its desired position after 1 second the stone will be long gone.
a microsoft paint-esque drawing of a curling stone and a camera. The stone has almost left the screen and is only half visible with lines behind it emphasizing that it is leaving with high velocity. between the camera and its start point are several mathy lines depicting the linear interpolation that was used to move the camera to where it is now. but the camera is now at the lerp's maximum value and will no longer follow the stone but stay steady. On the camera is now also a picture of a known monkey puppet meme looking awkwardly
May 10, 2025 at 6:02 PM