iiinova — where your digital self keeps evolving

Ville Vanninen @sakamies.bsky.social · 24/09/2026

I was going to make device independent controls for space flight, and being a web developer that would be within my expertise... doesn't rhyme but I'm coining scope-cut-thrursday and I'll just make a traditional keyboard+mouse interface to get the game done some day.

010

Ville Vanninen @sakamies.bsky.social · 20/09/2026

Would there happen to exist a bluesky app that works like rss readers? Folders, where I can chuck accounts I follow and read posts by account, not as a feed. Bonus if it didn't support likes, replies, link previews or any of that stuff. Just like "I want to read what that person has said this week"

251

Ville Vanninen @sakamies.bsky.social · 19/09/2026

I've been dedicating my entire professional life to the pursuit of perfection, while what I've learned recently is that I'm much better off enjoying failure. Kinda the same thing, just framing the constant need for learning a bit different. Something like overachieving vs relax & learn.

020

Ville Vanninen @sakamies.bsky.social · 26/07/2026

I thought today is saturday. I don't even know what day is it when I'm on holiday, which is nice though. Got rudimentary scenario files loading so I'm not stuck to my hard coded ships side by side thingy any more. Trying to figure out some exciting maneuvers. #screenshotsaturday

053

Ville Vanninen @sakamies.bsky.social · 24/07/2026

Screenshots seem to so much sexier than unreadable scribbles, but scribbles are so human! I'd like to see more of them. Spent a week away from my computer because I felt sick and stuck for thinking about sensors too much. And of course it seems obvious now that it just dropped on me in the shower.

A spread in a notebook on a wooden table. Hand holding it open, pen at upper right. On both pages, triangles depicting ships, one in the middle, another at top right quarter. Lines emanating from the center triangle toward the other triangle. Barely legible hand written notes: "Angular rez = amount of rays. Detection: angular size vs rays available per angle. Same notion for observed/identified, only diff is num of rays required! Noise is optional spize."

030

Ville Vanninen @sakamies.bsky.social · 12/07/2026

Incredibly hard to get low res pixelated vectors out of browsers. Didn't figure a (performant) way with svg so here go with webgpu at 640x400. If it's possible, let me know! Harrowing stuff when my brain is so hardwired for the dom and svg. It's sunday already but coded late so.. #screenshotsaturday

Two vector ships side by side. Trajectory vector lines emanating from their noses and possible predicted trajectories emanating from them in every direction. Pixel starfield as the background.

0152

Ville Vanninen @sakamies.bsky.social · 08/07/2026

What if chess was a dance... in space! Show the area where things can maneuver within x time. Overlap is danger. Try to go where your adversary can't, so you're safe. Pretty much my whole game there. Can't be that hard to make, I thought. 😅

Line drawing on paper. Two triangles, bottom left and bottom right. Bubbels drawn from their tips. Intersecting area of bubbels is shaded. Shaded area marked "danger", unshaded area of left triangle maked "safe.

010

Ville Vanninen @sakamies.bsky.social · 04/07/2026

This week I've learned. - Computers can do scary amounts of math per frame - Won't need decorative UI, just stuff to even understand what's going on - More fun to streer ship close than avoid, dunno how to flip that for gameplay - Working on it always spawns even more work 🫠 #screenshotsaturday

Dense overlapping spider web looking cones drawn from two ships, denoting the possible trajectories they can thrust to. Shows that the small ship at the top cannot escape the thrust capability of the torpedo at the bottom. Debug stats for most tracked game data at the top left of the screen. Stereotypical scifi asethetic: monospace font, phosphor glow style red, green, cyan, orange and yellow line graphics.

3182

Ville Vanninen @sakamies.bsky.social · 27/06/2026

Fill rate (?) may be the limiting factor with SVG. Thousand lines are fine, but fills tank fps quickly. Five torps is already too much. Anyway, I call that new overlay the possibility cone, tells you where you are able to maneuver within the (currently 3 second) tactical horizon. #screenshotsaturday

081

Ville Vanninen @sakamies.bsky.social · 20/06/2026

Look ma, I made asteroids! Not much of a game yet, but feels exciting for me at least. I've been playing this in my head for years though, so not quite sure about anybody else. 😄 I'm trying to follow a lineage of Auts, Wings, Liero, Hotline Miami, The Expanse and now this. And yeah, SVG is glorious!

160

Ville Vanninen @sakamies.bsky.social · 14/06/2026

I made a little 2 player game about overcoming mököttäminen. Doesn't really have a direct translation I guess, kind of like sulking, having a hard time connecting. Really lacking finishing, but I think the game is mainly there. It's kind of like an inversion of a fighting game. mokotan.netlify.app

mokotan.netlify.app

PICO-8 Cartridge

241

Ville Vanninen @sakamies.bsky.social · 06/06/2026

After more than a week of toiling on a spatial reference grid for insane speed spaceflight, I have discovered: *The starfield effect* One of those, how did I not see the obvious right away, moments. Everything forever has done it this way. Anyway, I guess I learned it from first principles today.

020

Ville Vanninen @sakamies.bsky.social · 06/06/2026

I'm rendering my game with SVG at 60fps and nobody can stop me. 😁 Tried to start with Godot but sort of gave up and restarted with a plain web page. Maybe I'll rearchitect when I have a good handle on the systems and such.

1110

Ville Vanninen @sakamies.bsky.social · 21/05/2026

I'm a stress based lifeform. Good thing I melt in sunlight though. Reverts me to my low stress primordial form.

010

Ville Vanninen @sakamies.bsky.social · 19/05/2026

Started making a game! I've been trying to make this game since the moment I understood inertia and touched a computer. Just didn't realize until now that I think I might have tiny chance of being able to make it.

020

Ville Vanninen @sakamies.bsky.social · 03/05/2026

Well I actually did it. There were a couple services already to convert google docs to sites, but wasn't exactly sure what they'd do. My pipeline is now: mom & docs → fetch .docx via share url → doc tabs to markdown files → 11ty build. The conversion is quite the contortionist act but it does work!

010

Ville Vanninen @sakamies.bsky.social · 29/04/2026

I've started listening quite a few podcasts at .8 speed. Maybe I'm slowing down or general speech is speeding up. I don't really want more content faster, rather I want to spend more time with my favourite internet people.

020

Ville Vanninen @sakamies.bsky.social · 04/04/2026

I'm working on a new version of Gridlover. It's 9kb over the wire, the whole app, everything. Not quite finished but still I'm a bit dumbfounded. Gotta admit I was trying to optimize a little but man. It's like I was trying to prove a point or something. gridlover8.netlify.app

gridlover8.netlify.app

Gridlover

Establish a typographic system with modular scale & vertical rhythm.

030

Ville Vanninen @sakamies.bsky.social · 10/02/2026

Today I learned there's a native node.normalize() method. Insanely useful at least when dealing with contenteditable=plaintext-only. Will fix a whole tree at once so there are no broken apart or empty dangling text nodes. developer.mozilla.org/en-US/docs/W...

developer.mozilla.org

Node: normalize() method - Web APIs | MDN

The normalize() method of the Node interface puts the specified node and all of its sub-tree into a normalized form. In a normalized sub-tree, no text nodes in the sub-tree are empty and there are no ...

000

Ville Vanninen @sakamies.bsky.social · 09/02/2026

In these times it's good to have a north star, so I wrote a manifesto. Trying to take some poetic licence here, might be a little clumsy at times. I'd welcome any discussion! pumpula.net/manifesto/

pumpula.net

The gentle software manifesto

Let's be human to each other, even when our tools can be inhuman.

130

Ville Vanninen @sakamies.bsky.social · 08/02/2026

Had the bright idea that my mom could do her website content in google docs. I'd just fetch it as markdon, split some pages and render with eleventy. I had no idea word processors could go totally bananas in so so many ways, but also markdown is the pinnacle of human achievement.

000

Ville Vanninen @sakamies.bsky.social · 10/01/2026

It's been below -20C for over a week now. Just about everything looks incredible every second of the day.

050

Ville Vanninen @sakamies.bsky.social · 14/10/2025

Some day I'll stop fighting windmills, but not today.

000

Ville Vanninen @sakamies.bsky.social · 14/10/2025

Can you believe I'm doing prompting workshops at work? My first advice: "Please don't, you human brains are so much better at all of this and your thoughts matter." But it's already happening anyway so I'm trying my best to defuse any bombs before they go off.

020

Ville Vanninen @sakamies.bsky.social · 10/10/2025

Nothing too glamorous, but managed to delete a lot of old code at work with this. The old loading spinner one was an svg file and a bunch of other stuff, now it's just a couple css gradients. codepen.io/sakamies/pen... Also you know @keyframes spin {to {rotate: 1turn}} is like poetry.

codepen.io

Loading spinner (radial + conical gradient)

...

040

Ville Vanninen @sakamies.bsky.social · 18/09/2025

Saw a 100% generated frontend refactor go verbatim into production. The file had now doubled in size, had a big block of js that did literally (not figuratively) nothing and custom styles because why use our own styles. 🤷‍♂️ My responsibility but didn't catch it in time. This will become exhausting.

130

Ville Vanninen @sakamies.bsky.social · 29/08/2025

Had an actual real summer vacation for the first time in my adult life and didn't do anything on my computer. It was glorious.

180

Ville Vanninen @sakamies.bsky.social · 19/07/2025

Looks like I never posted gridlover.css here. Modular type scale & pixel perfect grid snapping. Css math and round() made this so much easier. Gridlover used to have a bunch of javascript to figure this out and now it's just a couple lines of css. codepen.io/sakamies/pen...

codepen.io

gridlover.css (Gridlover in vanilla css)

...

140

Ville Vanninen @sakamies.bsky.social · 27/05/2025

Another sorta blog post is up. Code golfing a tabs custom element. Hopefully simple enough to read and understant the code to make your own. As usual I think the accessibility and progressive enhancement sections are the important bits. Otherwise nothing too fancy. github.com/sakamies/tab...

github.com

GitHub - sakamies/tabs-customelement: A minimal tabs custom element that tries to work exactly according to APG Tabs Pattern.

A minimal tabs custom element that tries to work exactly according to APG Tabs Pattern. - sakamies/tabs-customelement

020

Ville Vanninen @sakamies.bsky.social · 18/05/2025

Seems lately that the blog I never had is actually my github repos list. This should be a thing! Maybe the meta thing to do here is to make a repo that makes a blog out of repos.

000

Ville Vanninen @sakamies.bsky.social · 06/05/2025

How about an element where you write a naked js template string and render it. It's nice because you can write a template in your html file with html syntax highlighting, but it's still a real js template literal. github.com/sakamies/tem...

<template-string id="template">
<script type="text/html">
<b>Hello ${name}</b>
</script>
</template-string>

<div id="output"></div>

<script>
output.innerHTML = template.render({name: 'Ville'})
</script>

010

Ville Vanninen @sakamies.bsky.social · 19/04/2025

I think I've found a productive way to vent frustrations. Making meme libraries. There's the anger and stupidity, but also can't help but still learn something. In an alternate future we'd be exclusively writing layouts in html only like so. github.com/sakamies/far...

Screenshot of code, where html tag names represent css style properties, like <padding- all="1rem"> and the like.

052

Ville Vanninen @sakamies.bsky.social · 15/04/2025

Trying to make a combobox thing without the mess of aria attributes. It's a filterable list of radios in a dialog. codepen.io/sakamies/pen... Yet to test it comprehensively with screen readers, but it's just regular form with no need for aria attributes so I'm kinda hopeful this would work well.

110

Ville Vanninen @sakamies.bsky.social · 18/03/2025

Yet another custom element. Specially made for Ethan Hunt. Fused by how many dashes are in the element name. Like <boom----> takes four seconds to go boom. sakamies.github.io/boom-custome...

sakamies.github.io

Boom custom element

120

Ville Vanninen @sakamies.bsky.social · 06/03/2025

Been trying to learn how js signals work. That's some dark wizard level hackery. I think I got enough that I could make my own naive version. Feeling dangerous. 😄

220

Ville Vanninen @sakamies.bsky.social · 06/02/2025

Just solved a gnarly layout problem with css floats of all things! I had almost forgotten they exist. Tried grids and flexboxes and all the things, but where we can't have subgirds yet, floats can pierce layout through containers.

020

Ville Vanninen @sakamies.bsky.social · 29/01/2025

Wrote some actual docs for that library. Yep, seems like a real thing now. Any suggestions for a proper name? Blog post coming up too. (I don't have a blog though, so a plain old web page 😄) github.com/sakamies/mem...

github.com

GitHub - sakamies/memelib: A thin convenience on top of native DOM element methods to get and set elements and their content.

A thin convenience on top of native DOM element methods to get and set elements and their content. - sakamies/memelib

010

Ville Vanninen @sakamies.bsky.social · 14/01/2025

Well I did it! My very own meme libraby for DOM manipulation. Not even sure it's a joke though. Feels useful and low overhead for simple pages. I'll explain it better after I get some sleep. github.com/sakamies/mem...

github.com

GitHub - sakamies/memelib

Contribute to sakamies/memelib development by creating an account on GitHub.

010

Ville Vanninen @sakamies.bsky.social · 12/01/2025

You know that feeling when you think "I'll just make this one little utility that I need every day" and now your thing is fast approaching the meme library threshold?

020

Ville Vanninen @sakamies.bsky.social · 11/01/2025

TIL javascript proxy objects. Been on my mind forever, but today a use case actually popped up! Powerful stuff. The reason is laziness of course. Just wanted to do a bunch of `form.email = val` instead of `form.elements.email.value = val`. (For reference: developer.mozilla.org/en-US/docs/W...)

020

Reposted by Ville Vanninen

kepano @stephango.com · 07/01/2025

Flexoki 2.0 introduces 88 new colors that feel like watercolor pigments on paper. This is my attempt to bring the feeling of analog color to digital emissive screens. This version expands the palette to a full range of values for every color, without desaturating the pigment effect.

1019130

Ville Vanninen @sakamies.bsky.social · 05/01/2025

Any time I post about any project it makes me see all the things to improve and just creates more work even if I was already happy with the thing. Maybe that's why I go on polishing old stuff without ever publishing. 😄

020

Ville Vanninen @sakamies.bsky.social · 05/01/2025

Made this custom element that you can slap next to your form to filter a list of elements. Tried to make it as simple and idiomatic to the web as I know how. (and somewhat readable too) I wish I had the energy to blog about these, learned so much again doing this. github.com/sakamies/fil...

github.com

GitHub - sakamies/filterer: A custom element for filtering a list of elements based on a form

A custom element for filtering a list of elements based on a form - sakamies/filterer

120

Ville Vanninen @sakamies.bsky.social · 30/12/2024

Trying to figure out reflected boolean attributes on custom elements. I'd like to match this behaviour as close as possible to how native hidden or disabled attribute/property pairs work on elements. Am I doing this right? codepen.io/sakamies/pen...

120

Ville Vanninen @sakamies.bsky.social · 16/12/2024

My hobby is to refactor old code to be simpler and nicer. I sometimes do that even if the project is offline and might never be published. 🤷‍♂️

030

Ville Vanninen @sakamies.bsky.social · 28/11/2024

Oldie but still such a satisfying toy and project. Made this anagram or any kinda wordplay thingy where you type a word and then arrange letters like fridge magnets. pumpula.net/p/anagrammer/

pumpula.net

Anagrammer

000

Ville Vanninen @sakamies.bsky.social · 13/11/2024

Maybe links styled to look like buttons could be actual buttons by using the formaction attribute. Would make them buttons for screen readers and everybody, not just visually. Maybe good/bad for bots, maybe links need to be links still? Here's a codepen to try it out. codepen.io/sakamies/pen...

codepen.io

What if button links were actual buttons?

...

100

Ville Vanninen @sakamies.bsky.social · 02/11/2024

We use spaces for thousands separators in Finnish and screen readers have a hard time with that. (Like 10 000 €) Looks like &numsp; &puncsp; and   would work well at least for VoiceOver. Would anybody happen to have other screen readers handy to test this? codepen.io/sakamies/pen...

codepen.io

Unicode space in numbers

...

062