Ville Vanninen
@sakamies.bsky.social
Senior dev at OP
Minimalism, accessibility, ethical tech
Best of: OP Kevytyrittäjä, Gridlover
🏳️🌈🏳️🌈🏳️🌈
pumpula.net
Minimalism, accessibility, ethical tech
Best of: OP Kevytyrittäjä, Gridlover
🏳️🌈🏳️🌈🏳️🌈
pumpula.net
Some day I'll stop fighting windmills, but not today.
October 14, 2025 at 2:45 PM
Some day I'll stop fighting windmills, but not today.
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.
October 14, 2025 at 2:44 PM
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.
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.
Loading spinner (radial + conical gradient)
...
codepen.io
October 10, 2025 at 7:34 AM
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.
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.
September 18, 2025 at 2:29 PM
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.
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.
August 29, 2025 at 1:19 PM
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.
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...
gridlover.css (Gridlover in vanilla css)
...
codepen.io
July 19, 2025 at 1:21 PM
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...
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 - 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
github.com
May 27, 2025 at 5:39 PM
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...
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.
May 18, 2025 at 8:54 PM
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.
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...
May 6, 2025 at 7:37 PM
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...
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...
In an alternate future we'd be exclusively writing layouts in html only like so. github.com/sakamies/far...
April 19, 2025 at 8:15 PM
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...
In an alternate future we'd be exclusively writing layouts in html only like so. github.com/sakamies/far...
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.
April 15, 2025 at 3:35 PM
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.
Yet another custom element. Specially made for Ethan Hunt. Fused by how many dashes are in the element name. Like takes four seconds to go boom.
sakamies.github.io/boom-custome...
sakamies.github.io/boom-custome...
Boom custom element
sakamies.github.io
March 18, 2025 at 9:38 PM
Yet another custom element. Specially made for Ethan Hunt. Fused by how many dashes are in the element name. Like takes four seconds to go boom.
sakamies.github.io/boom-custome...
sakamies.github.io/boom-custome...
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. 😄
March 6, 2025 at 7:03 PM
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. 😄
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.
February 6, 2025 at 6:57 PM
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.
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 - 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
github.com
January 29, 2025 at 9:54 PM
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...
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 - sakamies/memelib
Contribute to sakamies/memelib development by creating an account on GitHub.
github.com
January 14, 2025 at 11:31 PM
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...
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?
January 12, 2025 at 11:12 AM
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?
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...)
January 11, 2025 at 11:46 PM
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...)
Reposted by Ville Vanninen
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.
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.
January 7, 2025 at 3:17 PM
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.
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.
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. 😄
January 5, 2025 at 10:50 AM
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. 😄
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 - 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
github.com
January 5, 2025 at 10:35 AM
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...
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...
December 30, 2024 at 10:43 PM
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...
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. 🤷♂️
December 16, 2024 at 10:10 PM
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. 🤷♂️
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/
Anagrammer
pumpula.net
November 28, 2024 at 9:51 PM
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/
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...
What if button links were actual buttons?
...
codepen.io
November 13, 2024 at 7:43 PM
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...