koaning.io

I need to make thumbnails now and again for YouTube and my image editor has a few tools that are missing for my workflow. But instead of looking for another tool, I figured that I might try and build one myself. Turns out, you can get pretty far in javascript-land for this stuff these days with a little bit of vibe coding.

The tools are hosted on Github pages (repo) and at the time of writing there are two tools.

Rounding tool

Rounded squares often look so much better on thumbnail, which is exactly what this tool can add.

Outline tool

This tool can add an outline of any color to a png. This is especially useful to add a white glow to a face on a YouTube thumbnail.

Zero-shot?

The rounding tool was a zero-shot but the outline tool needed a bit of help from stack-overflow. It was really hard to describe the behavior that I needed but after copy-pasting an existing example that was close to what I wanted it figured out the right APIs to use.

Hi all.

Jack Conte, of Patreon and Pomplamoose fame, recently stated that “we might be witnessing the death of the follower”. It’s a good interview, I can recommend a listen!

His message is that where from 2019-2023 you would have had a good time on social media by gaining a large following you now need to make sure that you get picked up by the algorithm of whatever platform you are on. Being a follower no longer means that you'll be kept in the loop.

A few people have started pointing this out to me personally, asking me if I stopped posting ever since I became a dad, which is not the case. The discovery mechanism of the internet has changed and it seems to favor content that is willing to adapt to the platform. You may have noticed this on YouTube and on LinkedIn. Thumbnails and titles really matter more and posts that share links get downvotes by the algorithm because it leads people off the platform. Short-form content scores better, long-form content is harder to gather attention for.

In short: it seems like maintaining an email list is pretty much the only way for me to really guarantee that folks can be kept up to date with stuff that I do.

Just to name a few things that I’ve done in the past few weeks.

• I revamped my personal blog by vibe-coding a personal editor in Flask. Details can be found here. It also features a basic RSS feed that people can follow.
• I learned about some CSS tricks while implementing the santorini board game for HTML. Details, and the live game, can be found here.
• I built a “newspaper” that make summaries of popular hackernews discussions. You can find it on thedailybin.com and you can learn all about how it’s made on YouTube or on my blog. It’s been an entertaining way for me to keep up to date without getting distracted/sucked into a lot of threads.
• I made a new tool that I pretty much use daily called mohtml. It’s a library with 50 lines of Python that can generate most of HTML in a functional style. There’s a calmcode course for it and a YouTube deep dive.
• I also made a Python notebook widget called mopaint that allows you to draw images in a MSPaint themed drawing utility. Once drawn, you can use the drawing to pass it forward to other tools. This includes vision models!
• And this is just my personal stuff, not even mentioning some of the things that I am doing over at marimo. So I guess there’s plenty of material for me to share.

The goal of my newsletter will be to keep folks in the loop via email. I might send something weekly, maybe monthy, but this way I can guarantee that you can be in the loop. Even if I cannot reach you over social media anymore. Substack seems like the simplest provider to set this up, but I might switch in the future. Time will tell if I like the platform.

This blogpost is the first message that I am sending and it's posts like this that I hope to share.

You can sign up for the mailing list here or via the iframe below.

I got Claude to implement Santorini for me the other day. It's one of the coolest ever boardgames and while it took me a few shots, it was able to generate the following:

The demo is cool on a lot of levels, but the main reason is that it highlights a new theme in "vibe"-coding for me. Instead of merely generating code, you can also take the time to study the code. And when you do, you might just learn a new trick.

In this case, everything you see above is done with HTML5 elements and CSS. No canvas or anything like that! That had never occurred to me.

Notice the isometric view? Notice that rotate button? That's all a CSS transform!

// Update the rotation of the game board
function updateRotation() {
    gameBoard.style.transform = `rotateX(${currentRotation.x}deg) rotateZ(${currentRotation.z}deg)`;
}

Notice how you can build a tower in this game? That's literally done by just appending div elements!

// Add building levels
for (let i = 1; i <= cellState.level; i++) {
    const levelDiv = document.createElement('div');
    levelDiv.className = `level level-${i}`;
    cell.appendChild(levelDiv);
}

Honestly, the people who just "vibe" code without looking at what is being generated are missing out. Not just because the generated code might have bugs but also because you can also vibe-code out of curiosity to see how something could be implemented. Do it right, and you'll learn a lot.