# olli.works — Full Site Content > Personal website of Olli Granlund — senior full-stack developer, entrepreneur, mechanical keyboard enthusiast, and photographer based in Helsinki, Finland. ## Pages # Oliver Granlund — Senior AI-Native Full-Stack Developer in Helsinki region URL: https://olli.works | Published: 2025-10-27 | Updated: 2025-10-27 > Oliver Granlund is a senior AI-native full-stack developer in Helsinki, sharing practical projects, technical writing, photography, and mechanical keyboards. This is where I bring up my own thoughts about different subjects and keep my blog up to date ## Brief introduction My name is Oliver Granlund, though most people just call me Olli. Online, I go by olligranlund. I’m a Finlandssvensk Senior AI-Native Full-Stack Developer located in the Helsinki region in Finland and I’m currently working as a Senior Developer at [Into-Digital](https://into-digital.fi/). I also have my own company for side gigs like development projects, photography and keyboards. Most of my spare time goes to my lovely family, but I occasionally have time for cycling, doing repairs at home, playing videogames, or enjoying good whiskies. [More about my personal life](https://olli.works/about-me) ## Skills & Experience ## The FMKC ## Get in touch ## My blog When I originally launched olli.works, I also started my blog where I collect various projects from my life. At first, it was mainly meant for keyboard and tech demos, but quite quickly I felt like I could express myself on a broader range of topics. Every once in a while, I have something worthy to write about, and here are my latest posts. --- # About me URL: https://olli.works/about-me | Published: 2025-10-27 | Updated: 2025-10-27 > "Who is this guy?", this page should answer some of your questions! You already got the brief introduction on the frontpage, but let's dig a bit deeper! ## Personal life Living in the Helsinki region means there are plenty of things to do, but honestly, I mostly spend my time with my family and friends. Being a relatively new dad takes up a lot of time, and it's definitely a challenge trying to fit my hobbies into life with kids. 🚲 ## Work life I'm a Senior AI-Native Full-Stack Developer and currently working as a Senior Developer at Into-Digital. Besides the 9 to 5 job, I also have my own company on the side for smaller gigs. I take on select freelance projects alongside my full-time role. If you've got something interesting, I'd love to hear about it 😃 You can read more about my skillset and previous workplaces here: [Skills & Experience](https://olli.works/skills-and-experience) ## Hobbies Everyone needs hobbies, right? Right? ### Keyboards I'm the founder and a moderator for FMKC (Finnish Mechanical Keyboard Community). I also designed the Neito keyboard, which I sold worldwide. I always have a keyboard project going, though it’s not always my main focus. [Fmkc.fi](https://fmkc.fi/) [Neito Group Buy](https://olli.works/blog/neito-group-buy-a-alice-like-keyboard-with-iso-support) ### Cycling I’ve been more of a maniac before, at one point having four different bikes in use, but I’ve calmed down and currently have only two (though desperately wanting two more). I love doing MTB rides in the forest, especially on my favorite route, [EKP 4.2](https://www.trailforks.com/route/ekp-4-2-km/), but gravel rides are also nice when the forest isn’t in rideable condition. I’d love to get back to road cycling, as I used to do that a lot years ago, with such passion that I even wrote a blog post about my longest trip! [My longest bike ride - 250km](https://olli.works/blog/cycling-espoo-hanko-espoo/) ### Software development Despite being a full-time developer, I still enjoy my own projects, as the challenges they provide differ from day-to-day work. I sometimes improve olli.works or build a quick tool to help with a task. One example was when I needed to know the exact location of RGB LEDs on the Neito Rev.2 firmware in relation to each other, where the most “extreme” positioned LEDs defined start/end values. By writing a script for this, I saved myself a lot of work calculating each position by hand 🔥 I think [Advent of Code](https://adventofcode.com/) is a great way to challenge yourself and see how far you can get. I’ve tried to keep up with the tasks for several years in a row and have stayed away from using AI to provide solutions. [My Advent of code solutions](https://github.com/OlliGranlund/Advent-of-Code) ### Whisky I have two different whisky casks aging right now, one at [Teerenpeli](https://teerenpeli.com/) and one at [Nagu Distillery](https://www.nagudistillery.com/). My collection of bottles is also steadily growing. I also like other poisons like beer and gin, but whiskies are great as they last longer and don't tend to go bad. [Teerenpeli Cask](https://olli.works/blog/share-a-whisky-cask-with-me/) [Nagu cask](https://olli.works/blog/nagu-cask-sharing/) ### Videogames Despite having a huge Steam and Epic Games library, I rarely have time to game anymore, and when I do, I’m often too rusty to do well in faster-paced games. However, when I do play, it’s usually an immersive single-player game like Red Dead Redemption 2, Skyrim or Minecraft, and lately Valheim & MegaBonk. Every once in a while, I also manage a co-op session of Rocket League 🎮. ### "Tinkering" This is a broad one. Often, when I notice a new need, I start thinking about how I could potentially solve it myself. Sometimes it’s creating a 3D model and ordering a print from Hekeke, sometimes just repairing things with or without YouTube tutorials, and every once in a while I bring out the power tools for more demanding tasks. I previously wrote a blog post about Modern DIY repairs—check it out to see the kinds of problems I’ve solved! [Modern DIY repairs](https://olli.works/blog/modern-diy-repairs/) ## See what I've been up to lately --- # Skills & Experience URL: https://olli.works/skills-and-experience | Published: 2025-09-12 > I've always known I'd be working with computers; I grew up with the rise of the internet from a young age. While studying at Arcada UAS, I was fortunate enough to land my first development job, even before finishing my degree. That experience, along with the connections I made at Arcada, definitely pushed me towards entrepreneurship and building for the web. That's what I've done professionally since 2016, both at various companies and with my own. On this page, I'll share a bit more in-depth about my current experience and where I've worked. I’ve always known I’d be working with computers. I grew up on the early, uncensored internet, landed my first developer position before finishing my studies, and have been active in several developer communities along the way. Between agency life, product engineering, and running my own company, I’ve been at it professionally since 2016. Today, I heavily rely on an AI-native workflow to push out software harder, better, faster, and of course, stronger 💁‍♂️ See what skills I've gained over the years and where I've been working. [Tech Stack](#tech-stack) [Work Experience](#work-experience) ## Tech stack Here's a breakdown of the technologies and tools I've worked with. ### Languages & Core Web Technologies * JavaScript / TypeScript * HTML * CSS / SASS / SCSS * PHP ### Frontend Frameworks & Libraries * React * Node.js * Next.js * Astro * Qwik * jQuery * Vue * Tailwind CSS * Hugo ### Backend Frameworks & CMS * Node.js * WordPress * HubSpot * TinaCMS * ProcessWire * ExpressionEngine ### AI & Agentic Workflows * Agentic Orchestration * AI-Augmented Engineering * Local LLM Benchmarking ### E-commerce * WooCommerce * Snipcart ### Development Tools & DevOps * Git * SVN * Docker * Vite * Biome * Webpack * Babel * ESBuild * Composer * Netlify * DNS Management ### Testing & QA * Playwright * Vitest * React Testing Library * Cypress ### Accessibility (A11y) * WCAG 2.2 AAA (with practical experience & advocacy) * VoiceOver * Axe * Wave ### SEO, GEO & Analytics * Technical & Semantic Architecture (JSON-LD, Meta, Schema) * LLM, SEO & GEO Optimization (AI search crawler readiness) * 100/100 Core Web Vitals ✅ (Run Google Lighthouse on this page to verify 😉) * Screaming Frog & Google Analytics I hope I didn't forget something 😅 Did I tick some boxes? If so, get in touch! [Contact me](https://olli.works/contact) ## Work Experience I’ve got to experience quite a few different companies and how it is to work with them. ## Into-Digital **2026Q1 - Present** I'm currently one of the Senior Developers at Into-Digital. While my main focus remains on delivering high-quality and accessible services, I've taken on a broader role in running projects, integrating AI-assisted development workflows into our tooling, and implementing my past knowledge to help Into-Digital thrive 🔥 [Into-Digital](https://into-digital.fi/) ## Granlund Oliver Egon Tmi. **2019Q2 - Present** I run my own company primarily to fuel my passion projects and serve as my tech sandbox. I take on a small subset of full-stack development clients using an AI-first workflow, benchmark local LLMs, and offer photo and videography services. In addition, I design PCBs and create 3D models to support my custom keyboard hobby and business. [VAT Number: 3001992-5](https://www.asiakastieto.fi/yritykset/fi/granlund-oliver-egon/30019925/rekisteritiedot) 📈 ## Linear **2022Q2 - 2025Q4** At Linear, I worked as a Full-stack Developer, focusing on MRR-enhancing add-on services and maintaining diverse technologies, including React, TypeScript, Node.js, Next.js and WordPress. [Linear](https://linear.fi/) ## Evermade **2019Q1 - 2022Q2** I mainly worked with creating and/or improving both small and massively complex WordPress sites for clients like salo.fi, finnlines.com and sydan.fi. I led initiatives to improve accessibility (WCAG 2.1 AA) and mentored new developers in our team. In addition to WordPress, I worked with React, TypeScript and Hubspot. [Evermade](https://evermade.fi) ## Sofokus **2018Q1 - 2019Q1** As a consultant through Sofokus, I mainly worked with a single large client as a Full-stack Developer, using their repos and pipelines (AWS + Atlassian). [Sofokus](https://www.sofokus.com/) ## Mysteerio **2017Q1 - 2017Q4** I was most of the time working as a consultant through many hoops with Otavamedia, working on sites like Tekniikanmaailma, Dekolehti, Anna, Seura, Venelehti and Golfpiste. [Mysteerio](https://mysteerio.fi/) ## LevelUp **2016Q1 - 2016Q4** Mainly working with creating fully custom WordPress websites for customers as well as contributing for Levelup’s own WordPress theme to accelerate website development. Also organised trainings for clients. [LevelUp](https://levelup.fi/) ## Internships These companies hosted my practice periods while I was studying at Arcada UAS * Liideo * Haahtela ## Got interested? If you feel like I can help you out with something, get in touch and we'll see what problems I can solve 😊 [Contact me](https://olli.works/contact) --- # Contact me URL: https://olli.works/contact | Published: 2025-10-27 | Updated: 2025-10-27 > Got a question or perhaps a proposal? Contact me 😀 # Contact me Got an idea or proposal, or perhaps need help with something? Contact me! By Email [olli.granlund@gmail.com](mailto:olli.granlund@gmail.com "olli.granlund@gmail.com") Via WhatsApp or Signal [+358 40 558 6455](https://api.whatsapp.com/send?phone=358405586455\&text=Hey!%20I%20contacted%20you%20because... "WhatsApp contact link") In Discord **olligranlund** or start a chat with me in [FMKC Discord](https://discord.gg/zgmtnrR "Finnish Mechanical Keyboard Community Discord link") By Phone [+358 40 558 6455](tel:+358405586455 "Call me") --- # The Finnish Mechanical Keyboard Community URL: https://olli.works/fmkc | Published: 2025-10-27 | Updated: 2026-08-27 > The Finnish Mechanical Keyboard Community brings together enthusiasts who enjoy any kinds of keyboards. The hobby is nice but the community makes it better. ## What is the Finnish Mechanical Keyboard Community? I’m one of the founders and a main administrator of FMKC. Despite the first organized meetup in Finland having only three participants, we’ve managed to gain attention meetup after meetup. After each gathering, the community grew steadily. Today, FMKC brings together: * Over 1,300 Discord members * Several active Finnish keyboard vendors * Meetups that have steadily grown the community More info on FMKC\:s own website [fmkc.fi](https://fmkc.fi) ## FMKC Website The Finnish Mechanical Keyboard Community used to have all their previous event info and links on my site, but over time, as the amount of data grew, I felt it no longer belonged on [olli.works](https://olli.works). I built [fmkc.fi](https://fmkc.fi) for this purpose and made it open source, accepting Git pull requests with a low barrier to entry. Read about the new site here: [How fmkc.fi was built](https://olli.works/blog/how-fmkcfi-was-built) ## See my keyboard related posts --- # Photography URL: https://olli.works/photography | Published: 2025-10-27 | Updated: 2026-08-27 > Photographer in Helsinki, capturing events from nightclubs to daytime gatherings, while keeping photography as a personal hobby. Photography kind of just happened to me, and before I knew it, I was working as a photographer at various nightclubs in Helsinki. Over the years, I’ve shifted my focus more toward daytime and evening events, as well as keeping photography as a personal hobby. While photography is mainly a hobby for me, I enjoy taking occasional gigs. I love participating in events, which motivate me to work more creatively and push my skills. As for delivering photos, I don’t like leaving editing on my to-do list, so I try to get it done quickly. My fastest delivery of edited photos has even been before the afterparty ended 😅. [Let’s capture your next event](https://olli.works/contact) While photography is a passion, I do take on select projects. If you need someone to capture: * Portraits * Events or shows * Weddings * Parties * Products ...or anything else you have in mind that's not listed here, just get in touch! We can chat about it and see what's possible ✌️ [Get in touch](https://olli.works/contact) --- # Privacy URL: https://olli.works/privacy | Published: 2026-09-05 | Updated: 2026-09-05 > How olli.works handles browser storage, external content and your privacy. # Privacy This is a personal website operated by **Oliver Granlund**. You can contact me at [olli.granlund@gmail.com](mailto:olli.granlund@gmail.com). ## Analytics and advertising The site does not use analytics, advertising trackers or profiling cookies. Its own code does not attempt to identify you or follow you across websites. Like other websites, the hosting infrastructure necessarily receives technical request information such as your IP address, browser information and the requested address when delivering a page. ## Browser storage used by this site The site stores your chosen light or dark theme in `localStorage` after you use the theme control. It also keeps a bounded list of previously loaded image URLs in `localStorage`, with a legacy copy read from `sessionStorage`, to avoid replaying image-loading effects. The service worker uses the browser Cache API to make same-origin pages and assets more resilient and efficient. These values stay in your browser and are not used for analytics, advertising or profiling. You can remove them through your browser's site-data controls. The image-cache storage is scheduled for a separate privacy-minimisation review. EU rules about access to a device can apply to browser storage as well as traditional cookies. ## External content Some articles contain videos, forms or interactive examples hosted by YouTube, Google, CodePen or WordPress.com. These services are blocked when the page first loads. No iframe or remote preview is requested from them until you choose to load their content. Before loading an embed, the page identifies its provider and explains that connecting will share technical information such as your IP address and browser information. The provider may also store or access data on your device under its own privacy policy. Your choice applies only to that named provider on the current page. It is not saved in cookies, `localStorage` or `sessionStorage`, and it resets when the page is reloaded or left. You can also use the provider's hide control to unload its embeds again. Provider privacy information: - [Google and YouTube privacy policy](https://policies.google.com/privacy) - [CodePen privacy policy](https://blog.codepen.io/documentation/privacy-policy/) - [Automattic and WordPress.com privacy policy](https://automattic.com/privacy/) You can always use the direct external link without loading an embedded frame on olli.works. ## Changes This notice was last updated on 5 September 2026. It will be updated if the site's data practices change. --- # Blog URL: https://olli.works/blog | Published: 2025-10-27 | Updated: 2025-10-27 > Here I share my ideas and highlight various projects and demos I’ve worked on. Here I share my ideas and highlight various projects and demos I’ve worked on. **Uh oh, you scrolled until the end, there are no more blog posts here 🆘** If there’s something you’d like me to try out or write about, get in touch and we’ll see if you have something interesting to suggest 😊 [Contact me](https://olli.works/contact) --- ## Blog Posts --- # Visiting our Nagu Distillery whisky cask URL: https://olli.works/blog/visiting-our-nagu-distillery-whisky-cask | Published: 2026-08-21 | Updated: 2026-08-21 | Tags: whisky > I finally visited Nagu Distillery's new premises and got to see and taste our shared whisky cask for the first time. One of my goals for this summer was to visit Nagu Distillery's new premises and finally see our shared whisky cask in person. We had talked about making this trip for quite some time, and finally found a free Wednesday in July. Here is a short story of the day, with plenty of photos! ## An early start from Espoo It was an early morning in Espoo. After helping with the kids, I quickly drove our electric car to maintenance in Helsinki. I got a hybrid as a replacement, which meant I could forget all the charging strategies I had planned and simply start driving 🏎️ I picked up my friend from Ekenäs, had a coffee and we headed towards Nagu. Once we got off the highway and got closer to Pargas, we started to see some beautiful scenery. When we finally arrived in Nagu, I had driven around 275 km and spent almost four hours behind the wheel. ## Nagu Distillery's new premises Nagu is a small place, so the new distillery is easy to spot on the left side of the road when arriving in the centre. The new premises were built where the old Nagu Korv och Spik used to be. There is plenty of parking and you enter through the terrace. The inside is one big open space where you can order drinks, hang out and see what is happening on the production side. We got a tour of the distillery and saw what they had been working on. ## Down to the cask cellar After the production tour, we headed downstairs. The stairway was still very much under renovation, but it led us to the cellar where some of the casks are stored 👀 As soon as the cellar door opened, we were hit by wave of a lovely whisky smell! Only a small part of Nagu Distillery's casks were stored there, but luckily our cask was one of them. ## Finally meeting our cask We got to taste the contents of our cask and also filled a small bottle to take home for a more focused tasting. I find it hard to give any useful judgement on the spot. The "whisky", or distillate as it technically still is, had been ageing in the barrel for two years and two months. My first quick impression was that it was sweet, maybe with a hint of elderflower. I know the taste is probably what most of you are interested in, so I will sit down with the sample in peace and update this post with proper tasting notes later 👌 ## A few other things to taste Our cask was not the only thing we tasted. We also tasted fresh distillate and whisky from another cask using the same base distill. We also tried a whisky which, if I remember correctly, was made by distilling a failed batch of beer from Kimito Brewing. The Kimito beer-based whisky was quite unusual and did not taste like traditional whisky, probably because of the hops, but was still very enjoyable. I heard that you might be able to grab a bottle of that later this year if you are lucky 😉 Nagu Distillery has also started selling their own beer. They do not brew it themselves: the ingredients come from the nearby area, while the brewing is done by Stallhagen in Åland. It clearly tasted like a Stallhagen beer, which was not a bad thing, but I had hoped for a unique Nagu flavour profile. I am not sure if the malts are similar because both places are in the archipelago, or if the familiar taste comes more from the equipment and Stallhagen's brewing know-how. We still bought several cans to take home, as they were cheaper at the distillery than in the nearby stores 💁‍♂️ ## Lunch at Söder After the tour and tastings, we went for lunch at a nearby burger place called Söder. I had last visited around four or five years ago and the quality was still just as good. The food also offered really good bang for the buck. We made a quick stop by the harbour and its small stalls before getting back on the road. ## Kimito Brewing and distillery On the way back we stopped at Kimito Brewing. They were open, so we bought a few beers and also got a tour of the brewery. The brewery smell immediately reminded me of the old brewing days with TLK Bryggeriklubben. They also have a distillery, which I did not know before the visit. They are not planning to make whisky, though, as they do not believe producing it would be profitable for them. ## A good summer day After around 440 km behind the wheel, frisbee golf, grilled food, whisky samples, Rocket League and football made for a pretty solid ending to the day! ## The story behind the cask If you missed the earlier post, you can read more about the shared Nagu Distillery cask and how this all started. [Read about the shared Nagu whisky cask](https://olli.works/blog/nagu-cask-sharing/) ## See my other whisky-related posts --- # Website refresh - part 2 URL: https://olli.works/blog/2026-website-improvements | Published: 2026-05-09 | Updated: 2026-08-27 | Tags: development > Phase two of the site refresh: QwikCity tested and scrapped, Tina visual editing in Astro, LLM benchmarking, further image optimizations, and a drafted search feature. At the end of 2025 I did a website rework, switching from my old Hugo + ForestryCMS stack to [TinaCMS](https://tina.io/) + [Astro](https://astro.build/) & [Qwik](https://qwik.dev/). One of the main goals in that rework was to hit a perfect 100/100/100/100 [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) score, and I actually managed to do that, but despite the speed, there were still some issues (or features, however you like it) that needed to be addressed. Lets go through my findings! ## Goals I had a pretty clear vision on what I wanted of my "round two" of my new website. - Even better Lighthouse scores (target lower digits) - Potentially change stack to QwikCity - TinaCMS visual editing - Resolve MDX renderer issues (eg. 2nd level lists were not working) and ontop of these I had a nice to have feature that is still to be implemented: - Search feature ## Did QwikCity improve the site? As I already used Qwik in all the components on the site, and its Astro support was in Alpha/Beta state when I initially took it to use, I thought that perhaps doing everything the [QwikCity](https://qwik.dev/docs/qwikcity/) way would result in some improvements in speed, or at least simplify the logic of my setup. As I discussed about this in the QwikJS Discord, one user pointed me in the direction of a repo that actually used QwikCity, all components as Qwik components, and TinaCMS visual editing was working flawless. As you can guess, I was hooked! I pulled down the repo and started digging in. With the help of various LLMs, copying my content, structure and components over to this new base went very easily. As this was a test, I worked on this in a new repo to keep things clearly separated. It didn't take long before I had most of the features done. Migrating the content turned out to cause some headache as the MDX structure was not identical, 90% of the content migration went smoothly, and rest of the content needed special attention. **Alright!** So now I had my site running on QwikCity, looking identical as before, but having also the visual editing possibility. I was ready for the Lighthouse test. I ran it and the result was ... the same as before... Turns out that in the midst of seeking the best bleeding edge stack to get maximum performance and/or feature benefits, I was fully oblivious to the main reason you want to use static sites, having the site be static. **It turns out that it doesn't really matter how fast or slow your static site generator (SSG) is as long as the output is optimized.** In my case, we had the potential to get some benefits from having less wrappers for components, but the results speak for themselves as there was no clear benefit with the stack change. I do also prefer Astro over QwikCity as Astro's more flexible and has a more mature ecosystem, it's clear that the insignificant benefit that I might get right now from QwikCity is not worth it. ### TinaCMS visual editing in Astro And we are back with the old Astro site. Since I had experienced that QwikCity could run with the [TinaCMS visual editor](https://tina.io/docs/contextual-editing/overview/), I knew that Astro must also be able to run that way somehow. As the trend goes nowadays, I put a LLM working on said task, and after several trial & error iterations, we had the visual editor working in the same was as with QwikCity, this was (for the moment) my final nail in the coffing for QwikCity. ## Content and parsing fixes My old content parsing logic worked in a way that I turned every element into a JSX element, and this simplified the rendering logic for the most part. This still caused some issues with elements being at a depth, so eg. a list withing a list was not possible, and the LLMs of 2025 Q3 were good helpers but not yet so good that they wouldn't make mistakes in a niche-stack repository, hence the solution I had was hand made. It was time for the 2026 LLMs to give a shot! It turns out that by simplifying the render logic and not doing the JSX-wizardy, the rendering of content sections started working properly! This is a good reminder that if you can do something in a simpler way, it is probably worth doing so. While I was up to speed with the LLMs, I also had them cleanup unused CSS and deps. I also asked for a optimixation plan, but any potential speed/performance boosts that we tried applying were causing a lacking user experience or breaking the site. I knew that there was not much to be gained, but felt that it was worth a shot. ## Search feature (drafted) i've been thinking if I should have a search feature on my site. I do feel that I don't have too much content on this site, but if a user were trying to find something about tech/coding, a search could guide them in the right direction eg. to my CV or to some blog post about some mundane topic. I got quickly drafted a initial version of the search, only missing microanimations to finalize it. I'm still tho twosided should I even have a search or not. Right now it's still drafted, but what do you think, should I implement it or not? ## Final yappings This update post was quite not dramatic, but I did learn my lesson with the static site logic. I did also try various LLMs and services to redesign my site, but none of the redesigns really felt like "me", so I'm sticking to my old precious super barebones styles that I've used for years. As for the text contents, I still write my blog posts by hand, and use AI to just polish the texts and handle typos. I feel that as content generation is easier than ever, having your own tone of voice brings a certain kind of human touch to the content. **It's odd that you kind of start to appreciate the non-perfect output since it sounds human, and that's the way I want to keep on making these blog posts.** ## See my other development blog posts! --- # 2025 Website refresh URL: https://olli.works/blog/2025-website-refresh | Published: 2025-10-27 | Updated: 2025-10-28 | Tags: development, presentation > My old website had flaws. See how I rebuilt my entire site from Hugo to a new Astro/Qwik stack, fixing broken services and hitting perfect Lighthouse score. Despite liking my old Hugo site and it being fast, it had its flaws. Over time, issues came up that would have required a repository migration from BitBucket to GitHub and additional logic changes in the code. I never felt motivated to resolve the issues, as I knew the site could be built in an even better way. I ended up redoing the whole site on a new base to get it to a point I'm (mostly) satisfied with. ## Old Hugo site I originally built my site to have a place to share my own projects, mainly keyboard related back then, but as the content was made for that time period, I noticed it didn’t age well and certain sections became outdated. The old site also had some dynamic pages based on tags, but I had forgotten to build templates for those, so essentially there were broken pages (though they were hard to find). I did, however, like the base layout of my old site, having every page work in a similar manner and the content be block-based for presenting information in a flexible format. ## Things that broke down over the years When I originally released the Hugo site, everything was working just fine, but as we all know, services can sometimes stop working and replacements need to be found, but I never got to fixing these as they were not always small things: ### Forestry CMS 💀 I really liked Forestry, and it provided a free tier that allowed me to make quick content changes on the fly. Forestry was discontinued at one point, and the team moved on to work on Tina CMS, a very similar CMS but with its own tweaks. I would have migrated over, but Tina required the repo to be on GitHub, so I never got around to doing the migration, as I would have needed to redo the deployment pipeline as well. ### Netlify Image Transforms 🪦 I used the service to adjust my images into a more optimized format so that I could focus on content and let the service downscale the images depending on the block they were used in. This service, however, was ended in favor of Netlify Image CDN, another similar service that worked in a slightly different way. Since my site was still fully functional, I never got around to implementing it. ### Deprecated text content 👵 When I released the site, the content was tailored for that moment in my life. As the years went on, I noticed that the content on the non-blog pages no longer reflected me in the same way, as my priorities had changed quite a bit. Lesson learned: when making non-blog content, keep in mind how it will age and how to make it cause less work for you in the future. ## Goals with new site When planning anything, having goals makes it clear what you want to achieve. As this was a project I did for myself, I knew I had set the bar quite high, and in the end I had to take some shortcuts to reach the goal, as one cannot keep working on a single project forever. * Super fast site (static) * Tina.io support * Qwik support (nice to have) * Lighthouse score 100 in all categories * Previously mentioned issues resolved * Slightly modernized visuals (using Tailwind) * Dark/Light switcher * Modernized and more mature content * Use a more up-to-date profile photo I knew these were possible to achieve but there was definitely work to be done. ## Hunt for the optimal stack I had been interested in trying out a JS framework called Qwik, as it promises dynamic components without hydration, which could also help me get a better performance score. Qwik itself, however, is only meant for the client side, and I needed a framework to handle all the routing and data mapping. That’s when I stumbled upon Qwik City. Qwik City focuses on the server side of things like pages, routing, and data handling. I gave this a shot and quickly got stuff to show up, but when I tried to get it to work together with TinaCMS, I was out of luck. Qwik City is still (at the time of writing) a quite new framework and doesn’t offer much flexibility, so I was forced to look at other alternatives, and that’s when Astro looked promising 👀 [Qwik](https://qwik.dev/) [Qwik City](https://qwik.dev/docs/qwikcity/) ### Builder.io? Builder.io, the main supporters of Qwik, provide a CMS experience that’s a little Figma-like. You can visually create your own site and use AI tools to generate specific elements in Qwik. This sounded too good to be true, and I gave it a shot. Unfortunately, at least when I tried it, the results were not that impressive, and the AI was only capable of making very simple elements. I also found the UX a tad confusing, as you are simultaneously editing component layouts and text content. I quickly gave up on this because I did not want my editing experience to be so clunky. I didn’t need millions of tools to create elements; I wanted simplicity and limited editability, and if I needed something more, I could develop it myself. ### Astro + TinaCMS Astro is a framework meant to be very adaptive with various stacks, allowing you to mix, for example, React and Vue on a single page without hassle. The challenge was that I needed TinaCMS to edit and create files in a structure that could be read by Astro as the page structure. I started with pure .md files, and after some tweaking, I actually had the base structure working 🎉 [Astro](https://astro.build/) ### Final piece of the puzzle 🧩 Around the same time as I got the base Astro + TinaCMS working, a new package called @qwikdev/astro was released, bringing Qwik support to Astro. I was one of the earliest users of this package and helped out with bug reports. My plan was to use it on my site, but as you might have noticed, making this site took quite a while, so I can’t call myself an early adopter of the package 😅. I had to switch from .md to .mdx to fulfill my needs, but that was luckily no problem for TinaCMS nor Astro 👍 **This was it!** TinaCMS for handling content, Astro for handling all routing and base logic, and Qwik for all components in the frontend. My stack was decided and PoC was done; now it was time to get to work and actually build the site! ### Full Stack for clarity * Astro * TinaCMS * Qwik * Tailwind 4.0 * Netlify ## Content structure & .mdx parsing challenge The way I wanted to handle content was block-based, each block having its own specific content fields (whether text, selected values, or media), and then the block is rendered with its own structure. By making blocks work after each other in any order, I created a flexible system that is super fast to add content to, and you can be sure the visuals always look right, as you are never touching the HTML structure. This approach is similar to **WordPress ACF Flexible Content/Blocks** or **only using Gutenberg patterns**. When I create content, I don’t want to think about the technical stuff, just do the content and stay as much in the flow as possible. ### The Parsing Challenge TinaCMS supports adding custom elements in its .mdx content. Often, if that were vanilla JS, it would be easy to parse, but since we were using Qwik components, we needed a parser that understood the JSX components were supposed to be handled as Qwik components, not vanilla JS. **This caused a lot of issues…** I tried many workarounds, and AI tools couldn’t come up with a solution either, as they hallucinated wrong answers. Fixing one issue would cause two new ones. **In the end, I decided that the parser should, instead of trying to separate out the JSX components, turn every element into JSX with its own props.** That turned out to be the temporary (read: permanent-ish) solution that worked. This way, I could have classic HTML but also render Qwik components like buttons without an issue. It wasn’t perfect, but in this situation, I was happy with the solution until I found something better. Also, since it was good enough, I could move on to other things and potentially fix this in its own MDX-render function later. ## Image Optimization Let’s be realistic, on most websites the thing that slows the site down is unoptimized images. A single unoptimized image can easily be, at worst, the size of several fully optimized sites with images. Google Lighthouse is also pretty aggressive at pinpointing the potential bandwidth savings with smaller images and better formats. I didn’t want to optimize images manually, so everything needed to be done either in the build process or by an external service, and I ended up choosing the latter. ### Netlify Image CDN Similar to my old site, I utilize the tools Netlify offers and decided to use Netlify Image CDN for my image optimizations. The CDN also provides the possibility to create a blurhash, similar to what services like Wolt use. ### My optimized solution I had a vision to have my images initially blurred, and when nothing else is blocking loading, we load the necessary sized optimized images. As we have loaded the small blurred images and scaled them up to size on the page, we can inspect their rendered size and use that info to load a optimized resolution version from Netlify Image CDN. Contained images are loaded more naturally, but all cover images are scaled in one way or another to cut away pixels which would not be anyways shown. I've also set some breakpoints that retrigger the loading of the images so that we don't get very zoomed goofy images at any point. Yes, it does require JS to run, but I feel that in my use case (and by being lazy) srcset would never be optimized enough that I could use that. As the layout is dynamic, images are scaled in different ways and setting up srcset to work better would require setting it up in a different way for each image-render position, yet it would not be perfect, when my solution is again more flexible and lives with the moment. I don't load the perfect optimized resolution image ever as I round up the needed images by 25px so that I won't cause a AWS/GCP outage 😂 ### Caveats & my two cents Making this image component was far from easy, as I wanted to do it using a pure `` tag with object-fit instead of CSS background images. I ran into issues with scaling, weird behavior with the object-fit rule, and a game of whack-a-mole trying to get the images to work in cover vs contained. In the end, I got it working reasonably well, but I feel it can still be optimized further. At some point, however, you just need to settle for “ok” to eventually finish a project instead of endlessly trying to resolve a minor detail. ## Header I wanted to keep the Header similar to my old site, having the logo and a hamburger menu, but also adding in a theme-switcher. I'm a heavy user of dark themes wherever possible, but I know that there are some physopaths who like burning their retinas with light themes (jk). On my old site, I had a sidebar that animated in, but as I scrolled through Siteinspire for inspiration, I came across a fullscreen menu with the site owner’s image next to the links. I thought that was a clean way of showing the links while still reminding the reader who is behind the content. I also added some micro-animations to the icons in the header. Most users probably won’t notice them, but I felt there should be something more than just a fade 💁. ### Theme switcher When implementing a theme switcher, you need to think about the best way for it to make a change. You could replace your whole content with something different, but I chose to use CSS variables to decide the colors for all elements. This way, we can use the prefers-color-scheme CSS media feature to detect user preference and apply the right CSS variables. If a user wants to switch the theme, we need to store the change somewhere, so I used localStorage to save the setting. ## Content Since one of my goals was to update the content, I actually made the drastic change and removed some pages: * Keyboard services (ain't got time for that) * Keyboard (base hobby page) And the pages that got a major rework: * Frontpage * Development (Now [Skills & Experience](https://olli.works/skills-and-experience)) * FMKC (directing traffic to [https://fmkc.fi](https://fmkc.fi)) As I aim for a perfect Lighthouse score, every image needs an alt text. Since I hadn’t added them previously too all images, that took a while to resolve... Redirections were also made for the changed URLs to avoid any SEO penalties. Additionally, when I released this site, I added a few new blog posts to give visitors more reasons to explore the new content, not just because the site is new. ## Ecological impact There has lately been quite a lot of talk on LinkedIn about the ecological impact of websites, and various companies have tried to claim their sites are eco-friendly, but I beg to differ. **Many companies still rely on non-optimized systems that save time and money and keep production costs down, but these are precisely the sites that would benefit most from going static, as they tend to have larger user bases.** I want to use my site as a demonstration on how one can still make a fast and usable site with reduced carbon footprint. Both my new and old site scored a 92% on the Website Carbon Calculator. **This translates to just 0.09g of emissions per visit, an A+ rating, making them more ecological than 92% of all global websites.** You should tho takes scores from this site with a grain of salt. **Despite my new and old site are built in different stacks, the new site is much more optimized.** By building a static site, avoiding unnecessary caching layers, relying on native fonts, using Qwik to load only what’s needed, and optimizing images heavily, this site is a example on how to deliver excellent performance while keeping ecological impact in mind. [Website Carbon Calculator](https://www.websitecarbon.com/) ## Cutting corners This project probably has the worst possible person chosen to judge the site and suggest improvements, and that's me.. Being somewhat of a perfectionist, I’ve many times had to push myself to stop improving things and just “ship it.” Luckily, I can improve this site further in the future, as I had to make compromises with certain features. ### TinaCMS Serverless hosting One of my goals was to edit content like in ForestryCMS, on the go and anywhere. TinaCMS offers a self-hosted option, but setting this up is no easy feat. I tried getting it running on Netlify functions without success, and TinaCMS members tried to help, but with no results, one even saying after lots of debugging “use Vercel" 😂 I did try Vercel but faced similar issues. Since I wanted to use Netlify Image CDN, I decided to give up and settle on plan B: always host TinaCMS locally to make changes (or edit .mdx files on GitHub directly). ### Content parsing issues This is probably the first thing I'll revisit and see if I can resolve. Most tags work without issues but I noticed that if I do a list inside a list, a nested list, my parser breaks and renders the whole list in a very weird way with some HTML tags rendered as cleartext. I had to make some adjustments to my older blogposts because of this. No big deal, I can live with this, but it would be nice to get fixed 😶 ### Visual design Despite having a sharp eye for pixel-perfect alignment, I wouldn’t want to be solely a web designer. I like clear visuals without distractions and have come to like my current layout, as it follows a pattern, is simple, and doesn’t confuse users. The site could perhaps look better in some ways, maybe by adjusting gradients or colors, but I worked to get it to a point I’m currently satisfied with and may revisit the design in depth later. ## Summary Final Lighthouse Score: **PERFECT** The result of all this work: * Desktop: **100/100/100/100** * Mobile: **100/100/100/100** At first I only got 99 in performance, but once I switched over to a ignito window without chrome plugins, I was able to get a perfect score! Lighthouse seems to complain about images, even though all are optimized via Netlify. You shouldn’t focus solely on Lighthouse scores, but they give a pretty good indication of how the site performs. I'm satisfied with my score 🎉 If you’re interested in a site that performs at a similar level, get in touch and we’ll see what we can do! [Get in touch](https://olli.works/contact) ## Phase two? As you’ve noticed, I’m happy with my site, but there are still some issues to address. At the time of writing, I’ve already made a long list of To-Dos to make the site simpler, faster, better, and more future-proof. I might even write another blog post on this phase two update if there are enough things to cover. ## See my other development blog posts! --- # How fmkc.fi was built URL: https://olli.works/blog/how-fmkcfi-was-built | Published: 2025-10-27 | Tags: development > A quick project to make a website for the Finnish Mechanical Keyboard Community to have a proper place to host information about the community. For years, I hosted information about old FMKC (Finnish Mechanical Keyboard Community) events on olli.works, but as the number of events grew, I realized my site was no longer the right place for them. These should have their own dedicated site, which led to this quick project of setting up a site with free hosting. [fmkc.fi](https://fmkc.fi) There had been many discussions about creating a fmkc.fi website or docs to host important information, as well as niche topics relevant to the Finnish community (like keycap NorDe support), but there always seemed to be a reason not to pursue it or to stop using solutions like a Hugo Docs site managed with ForestryCMS. I had enough of hosting the content on my own site, so I decided to just do it—and hopefully this encourages others to help out as well. ## The stack As I was familiar with Astro from building this site, I came across a version specifically made for docs pages that promised easier setup: Astro Starlight. So here was the stack for this project: * Astro Starlight * Catppuccin theme for Starlight * Github Pages Nothing more, nothing less, just a simple setup, maybe some custom CSS and all the content in markdown files. [Starlight](https://starlight.astro.build/) [Catppuccin theme](https://starlight.catppuccin.com/) ## Setting things up Starlight was a breeze to get working, and since we were using a template, there were no major issues. I did, however, add some custom CSS tweaks to make the templates look a bit nicer, but nothing major. Perhaps the largest task was importing all the data by hand. At the time of writing, there were 17 meetups to document. Thankfully, I had information on most of them from my own site, but many of the image album links had broken, so I had to contact various people to host the photos elsewhere instead of on Imgur. ## End result The final site is simple yet clean and gets the job done. I’ve also managed to encourage other members to make pull requests, so I don’t have to maintain it all by myself. ## See my other related posts --- # Own a share of Nagu Distillery's first whisky casks! URL: https://olli.works/blog/nagu-cask-sharing | Published: 2025-05-26 | Tags: whisky > A rare opportunity to own a share of the first whisky barrels aged by Nagu Distillery! I'm organizing once again a shared-cask opportunity, but this time with a cask at Nagu Distillery. The thing that makes this special is that this is one of the first whisky casks from Nagu Distillery and I feel privileged to get to be a part of owning one of them. Due to the limited nature of this cask run, I have already secured my cask, but I'm willing to share its contents with you! ### 10/10 shares taken ## Preliminary words Last time when I organized the cask-sharing opportunity, we didn’t get the barrel before we had everyone involved and all shares verified. This time though things are little different. I have already secured the cask, made the contract and paid the initial fee, but I’m pretty certain that I would be happy with a lesser amount than the full barrel, and hence I’m sharing it with you! ## About Nagu Distillery Nagu Distillery is on paper nearly 30 years old, but the distillery had a long idling period and was resurrected by a few fellows in Nagu. Nagu Distillery has mainly produced Gin, which have won some awards, but my personal favorite is their Akvavit that is the perfect companion for crayfish parties. Now Nagu Distillery is taking steps towards whisky production, at first with this non-smoky distillate, but later maybe with some smoky options as well. [Nagu Distillery](https://www.nagudistillery.com/) ## The cask and distillate **Cask:** 55L American White Oak\ **Distillate:** Nagu Distillery's own non-smoky distillate \~60% I have sadly not had the chance to taste the distillate yet, but based on how much I like their Gin and Akvavit, I trust that the distillate in itself is high quality. ## The proposal I’m offering you a chance to own a share of this historic whisky cask. Owning a whole cask by yourself can be a bit too much to handle, and that’s the way I also feel. This is a hassle-free way to get your hands on a share or two as I’ll handle everything with the whisky and will be in touch when it’s time to give over the bottles. In return, I’ll take a few bottles from the total count as compensation for organizing this experience. The remaining bottles will be divided equally among the shareholders. Any extra bottles will be raffled among the participants and affect the final price for each share. Once the whisky has been bottled, we can arrange either a pickup in Espoo, or have these somehow delivered to you at your expense. ## Prices In total this cask with content, bottling and other fees cost together around 6000€, so 1/10 share is approximately 600€ Initial cost: 350€ per share Taxes and other expenses upon bottling: approx. 250€/share Estimated outcome: Hoping atleast 6 bottles as cask strength per share The final bottle count is verified upon bottling, and as we do cask strength, this reduces the bottle count vs. diluting the whisky down to 40%. Nagu has promised in the contract at least 80 bottles of 40% whisky, but I have confirmation that they can also bottle our whisky as cask strength. This will however cut down on the bottle count. ## Schedule **Spring of 2024** The cask got filled and started maturing. **2025 Q1** I made a contract with Nagu over one cask and paid the initial fees **2025 Q2** Cask shares are assigned **Between 2027 - 2029** Updates will be provided on the whisky’s progress. The contract I made with Nagu Distillery offers initially 5 years of aging. There is no hard stop deadline for when the bottling happens, the whisky is done when it is done. **(if necessary) Between 2029 - 2034** In case the whisky is not ready, we can extend the contract for a few years. **Between 2027 - 2034** Bottling time when the whisky is done! ## Risks The contract I have made with Nagu states that the risks with the cask are all on Nagu Distillery until I have collected the bottles. The whisky cask is insured so any potential natural issues e.g. cask leak should be covered. Exceptions to this are circumstances beyond reasonable control e.g. war, pandemics or shitty decisions made by our government. ## Transparency I intend to be open about the situation with the cask and its contents and will provide updated whenever there is something to share. Since the cask will be maturing in the Nagu archipelago, I won’t be able to visit the cask too often, but I’ll try to get my hands on some samples over time so that you will get some idea on how the whisky is maturing. ## Participate Don’t miss this opportunity to own a share of my Nagu Distillery whisky cask! Fill out the form below to secure your spot. Only join if you’re 100% committed and financially prepared for this long-term investment. ## See my other whisky-related posts --- # Neito Rev. 2 Collaboration Opportunity URL: https://olli.works/blog/neito-rev.2-collab-callout | Published: 2025-01-03 | Tags: keyboards > I'ts been too long since Rev. 1, but sometimes life happens and things take longer than anticipated. Now, however, progression has happened! It’s been far too long since Rev. 1, but sometimes life happens, and things take longer than expected. Now, however, progress has been made, and I’m looking for collaborators to help bring it to life! ## Why has it taken so long? **Neito has always been and will always remain a passion project of mine. Realistically, I might never be 100% satisfied with it.** I was super excited about Rev. 1 and learned a lot from the experience, both about PCB/CAD design and the business side of things. I decided to cut the first group buy short due to potential issues, and I’m glad I did, as there were quite a few surprises, ranging from production challenges to bookkeeping complications. The group buy gave me a bit of burnout, but I still decided to push forward with the next iteration of the project. Rev. 1 was, and still is, awesome—it’s even my daily driver to this day. That said, there are aspects of it that could be more premium. However, achieving premium quality doesn’t happen overnight, nor is it something that can be invented on the fly. ## The progression When I started working on Rev. 2, I initially thought about just slapping in some hotswap sockets and calling it a day. But I felt that would be the lazy way out and wouldn’t make the board feel more premium. I knew it needed something more—more features and a different kind of case. That’s when the iterations began. **At that time, KiCad was at version 5.x.** ## Iterations I’ve scrapped the Neito project a total of 5–6 times and started over from scratch. Some of these iterations will never see the light of day, but I can summarize the main ones into these three below: ### ATmega32u4 Hotswap The first iteration focused on simply adding hotswap sockets while keeping the trusty ATmega32u4. However, since this design came together quickly, I felt that pairing it with a stacked acrylic case wouldn’t be justified. Plus, I found myself craving more RGB LEDs. ### STM32 Taking inspiration from how the Gondolindrim Apollo87 was designed, I created my iteration of Neito using the STM32 chip. Getting the prototypes to work was nothing short of a small miracle, but with some jumper cables, I managed to get the board operational. The RGB LED placements were calculated using a small Tampermonkey script I wrote, and I had most things working—except the plastic on the JST ports turned out to be too brittle. The experience of working with the STM chip after using the ATmega wasn’t a pleasant one. I felt the board had become overly complicated for what it was. ### RP2040 After a long break, I decided to give it another shot using the RP2040, as it greatly simplifies the design. And this is where things stand now! **Also, KiCad is at version 8.x 😂** ## What’s new in Rev. 2? ### Layout The ISO-Alice layout has always had an issue with gaps. I took this as a challenge and spent far too much time in Fusion360, turning the sharp turn into a smooth curve to hide the gaps. Each key in the *curve* is set at a slightly different angle. One concern was that some keys might overlap, but when I tested it with MT3 keycaps (which should be the widest ones), the tolerances allowed for these small overlaps. ### PCB Design This time, Neito is hotswap, just as Mechmerlin had wished. The PCB is now a 4-layer design, with all traces routed inside the board. I had issues in the past where surface scratches on the PCBs caused the keyboard to malfunction. With this design, debugging is more difficult, but the end product is sturdier and has a reduced risk of scratch-related issues. ### Connectors The original Neito had only a Type-C port, and that worked fine. However, the trend is shifting toward gasket-mounted keyboards with daughterboards, so supporting this would be nice to have. I felt, though, that part of the original Neito's spirit would be lost if I didn’t allow for custom solutions without a daughterboard, so I decided to include both options, so that one can choose to either go the premium route, or perhaps make their own custom case for the PCB! ## Looking for Case Collaboration! Here’s where you come in. I’m seeking collaborators to design cases for the Neito Rev 2 PCB. The idea is that I would focus on the PCB and firmware, but let others handle the case design. I’ve made a proto-case design already, but I’m pretty sure you might be better than me at CAD and can design something aesthetically pleasing. [Let’s collaborate ✌️](https://olli.works/contact/) ## Next steps There are still some things I need to do with the PCB, but I have a vision for the final product. * Fix remaining PCB issues. * Finalize the firmware. * Order release candidate versions of the PCBs. * Work with collaborators to create cases. * Launch a group buy. ## My goal As mentioned, this is mainly done as a passion project, as there is nothing quite like this sold in stores. The Keychron Q8 ISO is available, but it’s not the same as what I’ve designed. As a primary goal, I want a new Neito keyboard, and as a byproduct, I’ll try to get this up for sale worldwide. ## Collaboration Want to participate? Send an email, and let’s discuss how we can bring the Neito Rev 2 to life together. [Contact me 🔥](https://olli.works/contact/) ## Other Keyboard related posts --- # Vortex Model M SSK kit review (Sponsored) URL: https://olli.works/blog/vortex-model-m-ssk-kit-review-sponsored | Published: 2024-04-13 | Tags: keyboards > Review of the new Vortex Model M SSK keyboard Kit. This is a sponsored review but I'm not sensored in any way and can give my honest opinions. This kit was supposed to arrive the 2nd of March 2023 but was delayed for over a year due to various reasons. After the long wait, I finally received this highly anticipated keyboard for testing and it did impress me in some aspects! The end result is a pretty solid keyboard but there are a few caveats which might or might not matter to you. **It finally arrived!** Ever since I first laid eyes on it, I knew I had to try it out. While I'm not usually drawn to retro-styled keyboards, there was something about the Model M that intrigued me. I've tested an original Model M before, but the buckling springs didn't quite suit my taste. So when I discovered that Vortex had created their own version, I was immediately interested. [Model M SSK kit](https://vortexgear.store/products/vortex-model-m-ssk-kit?ref=6ctx9y82) [Vortex store](https://vortexgear.store?ref=6ctx9y82) *Note, affiliate links that might provide me with a small kickback from purchases. If you are located in the EU, I would suggest making Vortex item orders from EU vendors, and I'm explaining why later on in this blog post.* ## Transparency I want to be upfront about the fact that Vortex provided me with this keyboard for "free". However, I insisted on sharing my honest thoughts in this blog post and taking the keyboard to various meetups I attend. The opinions expressed here are solely mine, and Vortex had no influence on what I write. I prefer to be straightforward with my opinions rather than sugarcoating them. ## Vortex Model M SSK Kit As this is a more premium kit, you have to source switches, stabilizers and keycaps from somewhere else. It's quite uncommon for Vortex to make a board that is not right away usable, but perhaps they want to have a step into the "custom mechanical keyboard scene" with this entry. ## Instructions Vortex has previously lacked instructions on how to assemble their keyboards, but this time we actually get a proper guide. The guide is, for the most part, pretty good, but there are a few sections that are somewhat hard to understand, especially regarding cable routing. Additionally, there were some images where connectors were flipped compared to what I saw on the board, but I still managed to build this keyboard and the guide was mostly helpful. ## CNC case I was slightly worried about the quality of the case after hearing about the production issues. Apparently, the case manufacturers had caused several defective products, and that’s one of the reasons this board has been delayed. Vortex even says on the sales page, "Slight scratches to a case or any components are acceptable to our quality standard," but upon checking the case, I could not see any flaws. I may be lucky; the coating quality is okay and didn’t get damaged during assembly, and the case looks great. I think the coating could look better, but it seems to do the job well. I would have loved to get a non-coated board, but Vortex doesn’t offer that, sadly. The case has a small detail that might be annoying to some of you. The CNC'd curvature by the switches looks nice, but it’s frontal part somewhat pointy towards the user. If you look at the original Model M, the pointyness is only towards the monitor, never the user, and some might find this annoying, even though your hands won’t touch the pointed bit during normal use. ## Cushions I knew that the keyboard would come with foams to put everywhere, but I was surprised that this time Vortex did actually include some additional foam pieces to support non-ANSI layouts. With the earlier board, Hellcat, there were not enough (or nicely separated) foam mats to add under switches if you built it as ISO, but with the Model M SSK Kit, there is no question on which pieces to cut out or if there is enough! The kit comes with foam for both between the PCB and plate, under switches, as well as under the PCB. Gaskets for the gasket mount are also provided. Note: The kit does not come with pieces for under the stabilizers, you need to source those elsewhere if you want them. ## Foam mat hint When assembling the board, I noticed that the foam mat did get misaligned pretty easily, but by easing the screws that keep the PCB and plate together, you can realign these easily with, for example, a small screwdriver. ## PCBs The kit comes with 2 PCBs: one main one for the majority of the keys and one for the F-row. The main board is based on an STM32 chip and should be more than sufficient to handle QMK and all the macros that you want. It seems like depending on which configuration you get, you receive a different PCB, so make sure that you choose the right one the first time if you plan on ordering this kit. ## Assembly The assembly of this kit is similar to following a Lego build guide, quite simple and straightforward. However, I did encounter one challenge with the assembly, and that was how to connect the two PCBs together when assembling the case. The connection was clear, a ribbon cable was provided for this, but due to the short length of the cable, it was very difficult to attach the cable between the PCBs and assemble the case. Vortex could have made this ribbon cable longer as there is space in the case to tuck away any additional cabling. I also had to improvise a little bit by cutting one of the gasket mount foams a little bit to make it easier to install the ribbon cable. ## Switches At first, when I knew that this build was coming up, I wanted to buy some exciting and/or odd switches which still had the chance of being endgame switches. Due to the long delay, there wasn’t really anything that special available at the time of the build, so I decided instead to focus on some quality stock factory-lubed linear switches. After some research, Gateron Smoothies looked really promising. Once I received the switches, I knew right away that I had made the right choice. These are really smooth, have little wobble, and still have a tiny bit of long-pole feel in them. I do prefer longer pole switches, but these are still darn good and to my liking, not to mention the cheap price! Vortex boards have plates with 13.9mm holes, requiring you to use non-filmed switches. As the market has matured, I feel that nowadays you don’t necessarily need to lube or film switches as there are most likely in-stock options that fit your needs. ## Stabilizers I had ordered some Staebies V2.1 stabilizers for Neito Rev. 2, but since it’s been delayed for so long, I decided to use them on this build instead. I had heard that these stabilizers are really good, and after testing them in this build, I can also vouch for them. They are very smooth and have little to no wobble. I did add some lubricant to them as well as did the band-aid mod, as I always do. ## Keycaps I also had sourced GMK keycaps for the Neito I thought I would have at this point, so I decided to give the GMK keycaps a run on this board instead. The keycap set is GMK Oblivion 3.1, and it does include NorDe keycaps. These are in my favorite profile, cherry profile, and are probably as premium as you can get. ## Finished product After some hiccups, I did get the board assembled, and let me tell you, it is pretty great. I do get lightly annoyed by the pointy parts close to the front edge, but I think you won’t mind those after some time of use. The sound profile is very uniform on a row-basis, sounding great, and the F-row complements the main board with its own sound profile. While the main section sounds clean and uniform, the F-row has a more metallic clang to it, as the switches are directly mounted to the case. The per-key RGB is vibrant, but in a retro board like this, it does look somewhat silly and out of place. I'm sure I'll be running the board with them shut off. There was, though, one thing missing from the kit that was promised to be included: another badge that could be changed on the case. I do think that this is a fault of Vortex QA, as the badge was not included in the package. One thing that I’m having a hard time getting used to is the front edge of the board. I usually use a wrist rest, but with this board, I can’t use it as the front edge is too rounded. Using the board without a wrist rest is also possible, and I think my issue might just be down to not being used to it. ## VIA issues I feel that if you sell a keyboard and market it with VIA support, it should work plug n play with VIA. In this case those the situation is not that straight forward. To get VIA working with thi keyboard, you need to download the specific JSON for this board from the Vortex website, insert that to VIA, and then it should work. That is jut unnecessary hassle that could be resolved my the manufacturer with a PR into the VIA project. ## Vortex shenanigans I wish I could only say positive things about Vortex as a company, but there has been quite a bit of stir in the mechanical keyboard community about whether one should support Vortex or not. The Model M SSK kit delays have been very poorly handled with lackluster communication and false promises, and some have even faced quality concerns like missing drilled Type-C ports. It seems like Vortex support has also been lacking and not fair for the consumers. It’s a big pity that there are these issues, but one can circumvent most of them by using some other vendor instead. If you live in the EU, I would suggest buying any Vortex product from a European vendor instead of Vortex directly, as you will get better support and have better consumer rights. If Vortex were to be more open about issues and challenges and be more proactive with communication, lots of these negative opinions would have been avoided. [Reddit rant 1](https://www.reddit.com/r/MechanicalKeyboards/comments/180u2zw/avoid_vortex_keyboards_at_all_costs/) [Reddit rant 2](https://www.reddit.com/r/MechanicalKeyboards/comments/193g3kw/avoid_vortex_keyboards_1/) ## The verdict **TL;DR An endgame retro-themed keyboard that might or might not work for you.** I really like this board, and if you are a sucker for the Model M style, this board is definitely a modern take on the classic keyboard. This is a high-quality board, but you should be aware of the potential issues that might arise. [Model M SSK Kit](https://vortexgear.store/products/vortex-model-m-ssk-kit?ref=6ctx9y82) [Vortex Store](https://vortexgear.store?ref=6ctx9y82) *Note, affiliate links that might provide me with a small kickback from purchases* ## See my other keyboard-related posts --- # Vortex x MiTo Hellcat keyboard kit review (Sponsored) URL: https://olli.works/blog/vortex-hellcat-keyboard-review-sponsored | Published: 2023-11-06 | Tags: keyboards > Review of the new Vortex & MiTo Hellcat keyboard kit. Despite this being a sponsored review I'm allowed to give my honest opinion on the keyboard. Vortex sent me another board to try out and to bring to the Finnish keyboard meetups. This time, the board is something modern-looking with both old and new features. It might not be the endgame you are looking for, but for its price, it's a pretty competitive board! Hope you find this usefull ✌️ After the PC66 review, I’ve been actively in touch with Vortex, voicing my own opinions on their products and suggesting areas for improvement. The PC66 was a genuinely good store-bought keyboard. However, when Vortex asked me if I’d want to review other retro-themed keyboards, I was hesitant because I felt they might be essentially the same as the PC66 with just a different layout. And it turns out, I was right. Vortex’s retro-themed boards all seem to be built quite similarly. Therefore, reviewing another one would have been unsurprising, at least from my perspective. I’ve been eagerly anticipating the release of the Model M SSK Kit. However, it has been delayed significantly due to manufacturing challenges. After discussing alternatives with Vortex, this kit came up for consideration, and I happily agreed to take it for a test drive. 😁 [Vortex x MiTo Hellcat Kit](https://vortexgear.store/products/hellcat-kit?ref=6ctx9y82) [Vortex Store](https://vortexgear.store/?ref=6ctx9y82) *Note, affiliate links that might provide me with a small kickback from purchases* ## Transparency Once again, all the opinions here are mine and have not been altered in any way, nor has this review been reviewed by Vortex before its release. I’m not getting paid for this, and Vortex has only provided me with the keyboard kit. ## Vortex x MiTo Hellcat Kit * CNC Acrylic case * 65% layout * Type-C daughterboard * QMK/VIA/VIAL support * Per-key RGB * RGB underglow * Included keycaps This kit comes with almost everything you need to build your keyboard. You just need to select switches that suit you, or you can order the pre-assembled version. The kit includes stabilizers that closely resemble Durock V2s, with an additional lip to prevent the stabilizer wire from jumping out. ## Case Usually, when you talk about tray-mount keyboards, I start to think about the mounting pole positions as they used to be all over the keyboard in no logical way. Vortex, however, has taken their own approach to the tray-mount design and actually made it good…for a tray mount. The case is CNC-carved polycarbonate, and if you look closely, you can see some of the machining paths. On the backside of the case, the Hellcat logo is carved into the case itself, which is a nice touch. Due to the choice of material, the case doesn't weigh that much, but its structure is still solid, and it doesn't warp much when you try to twist it. Due to the lighter weight, the keyboard is easy to carry around, and it doesn't take up much space in your bag. ## Daughterboard You usually see daughterboards on keyboards that have more flexible (literally) mounting methods and would need a bigger opening in the case for the Type-C port to have space to move with the PCB. I cannot really see a reason why you would add a daughterboard on a tray-mount keyboard other than the Vortex tray-mount still offering a little flex, risking breaking the Type-C port otherwise. Having a daughterboard never makes a board worse; it's actually the opposite, but sometimes the benefits are not that significant. Vortex uses a custom-made daughterboard instead of the unified one the keyboard community is used to. This doesn't really matter as it's a small part and doesn't have much complexity; it's just interesting to see that they opted for their own solution rather than using something ready-made and community-approved. One reason for the custom daughterboard might be the screw holes, as the daughterboard is fastened into the case with screws. ## Keycaps AEven before receiving the keyboard, I was skeptical about the keycaps since the kit's price is quite low. There's no way Vortex can provide good keycaps at this price, or can they? The kit comes with dye-sub PBT keycaps in the DSA profile. The kit includes all the necessary keycaps, as well as some additional ones, allowing you to choose if you want all the keycaps to be vanilla white or if some should be purple. Since the keycaps are in the DSA profile, you can flip them without affecting the feel, and this way, the crosses almost look like the flags of Finland, which is a fun unintended feature. 😅 ### Thickness Keycaps are decently thick, making them sound more premium than what they are. ### Legends Despite the keycaps not being doubleshot, the legends are still sharp. Vortex boasts that the legends are going to last for a long time. Dye-sub isn't the most durable method for creating legends, but I think it'll be more than enough for the lifespan of this keyboard. Doubleshot keycaps would have been nicer, but that would have made the kit significantly more expensive. ### Warping I noticed some warping issues with larger keycaps like the spacebar and ISO-enter. In my case, the ISO-enter keycap might be a tad more sluggish due to this, and there is no real official fix for this. I wish Vortex would have done better quality assurance in this regard, as it's a common issue with cheaper keycaps. One thing to note, though, is that your mileage may vary; some users may get more warped keycaps than others. ### PCB The PCB is a 65% PCB with per-key RGB and RGB underglow. The PCB is powered by an STM chip, most likely including more memory than anyone would ever need. Due to the per-key RGB, the keyboard layout is fixed to the one you've ordered, whether it's ISO or ANSI. I was surprised by the underglow RGB LED sizes as they are really small. It's nice to see smaller components making their way into custom keyboard PCBs. ## Firmware Vortex states that the keyboard supports both VIA and VIAL, but at the time of writing, I have not managed to test this out. Vortex offers .json and .uf2 files, but at least the .json seems to cause an error when inserted into VIA. I feel that any production ready keyboard should have their software sorted out so that one wouldn't need additional firmware files, and also be properly tested to work. I'm sure Vortex will get this resolved eventually and I've informed them of the issue. ## Switches There were no switches included in this kit, so I used some that I had lying around. My first choice was to go with Hades switches, which were both lubed and filmed. However, upon installing them, I noticed that the plate cutouts were too small. It seems like the Hades switches are so tight as stock that they become slightly wider when applying the film. I think these switches would have fit into the board if the plate cutouts were exactly 14mm, but they are apparently only 13.9mm. It's strange how a difference of 0.1mm can make a big difference. To clarify, I was able to push the Hades switches into the board, but the plate cramped the switches, turning these linear switches into clicky ones (don't ask how). I replaced all the switches with some stock SP-Star UBE Crinkle Cookie switches, which fit properly right away. I do feel a bit sad because the Hades switches are really amazing, and I had hoped to put them to good use. ## Stabilizers The kit comes with some unbranded stabilizers that offer a similar wire-protection lip as Durock V2 stabilizers. The kit also includes holee-mod cushions to help dampen the stabilizer rattle. I did not try these dry but applied a little bit of lube as well as a *band-aid mod* with a cushioning piece under the stabilizer parts. Note, though, that this *band-aid mod* cushioning does not come with the package, nor are the stabilizers pre-lubed. With the mods done, the stabilizers are solid, and I cannot complain about them at all. ## My own take on Vortex x MiTo Hellcat Kit I think this keyboard is targeted towards someone who is looking for a lightweight yet stylish keyboard and wants to have a say in which switches it should have. The price of this kit at the time of writing is $169.99 USD, which is a very good price point for what it includes. However, I’m not a fan of the tray-mount mechanism, but for a tray mount, it is actually quite decent and provides a uniform feel. I do believe that if this kit included band-aid mods and a small flask of lubricant for the stabilizers, it would be a more complete kit. ## The verdict **TL;DR A decent RGB keyboard for reasonably low price, but it comes with some caveats.** The Vortex keyboard kit provides an enticing choice for individuals in search of an affordable, visually appealing RGB keyboard that's also highly portable. Notably, the kit includes premium features like a custom daughterboard and modded stabilizers, which contribute to a better overall experience. However, it's evident that cost-saving measures have been taken in certain aspects. The sound profile could be improved, and the software (as of the time of writing) leaves something to be desired. It's apparent that this keyboard is geared more toward those prioritizing visual aesthetics over functionality. The Vortex keyboard kit strikes a balance between affordability, style, and practicality, offering a bang for buck option for new hobbyists. If you were to get this keyboard in the ISO-configuration, I would first wait until the software issues have been resolved. [Vortex Hellcat Kit](https://vortexgear.store/products/hellcat-kit?ref=6ctx9y82) [Vortex Store](https://vortexgear.store?ref=6ctx9y82) *Note, affiliate links that might provide me with a small kickback from purchases* ## See my other keyboard-related posts --- # My presentation at WordCamp Finland 2023 URL: https://olli.works/blog/wordcamp-finland-2023 | Published: 2023-10-30 | Tags: presentation > I was invited to talk at WordCamp Finland on a very short notice. A short story about me facing my biggest audience so far. From time to time, I've pushed myself to step out of my comfort zone and engage in public speaking, despite my usual apprehension. Recently, I received a sudden invitation to speak at WordCamp Finland, and despite the short notice, I accepted the challenge, knowing it would be the largest audience I've ever faced. ## The setup I was asked back in 2022 to give a speech at a WordPress Helsinki meetup, and I took on the challenge in the spring of 2023 with my talk about 'The Transition from Agency to Product Development.' The talk went somewhat okay, but I noticed that I was quite nervous and hadn't had enough time to prepare for my talk. The audience at that meetup was around 30 people, so it was thankfully quite laidback, and there was no time pressure. I knew that a WordCamp Finland was coming later in 2023, but I thought about skipping it since I knew I could spend my time more wisely. However, I informed the organizers of WordCamp Finland that I could be a backup speaker. Que to one week before WordCamp Finland, I receive several Slack messages pinging me and asking if I can come and give a speech. I thought about it for a while, made some arrangements at work, and finally accepted the speaker position. ## Preparation Initially, my plan was to deliver the same speech I had presented earlier at WordPress Helsinki. However, I couldn't ignore the fact that my previous talk hadn't gone as smoothly as I'd hoped. That's when I made the decision to switch my topic to "What to Consider When Publishing a Plugin." This new focus allowed me to delve deeper into the technical aspects and provide a more comprehensive perspective. ## 04:45 wake up As WordCamp was held in Tampere, I had to wake up early to make it to my talk at 09:20. I had prepared everything the night before and left on schedule. However, I should have spent more time checking the metro schedule, as Google Maps indicated I would make it to the train on time as long as the metro wasn’t delayed, which, of course, it was. I missed my train, but fortunately, I had planned to arrive in Tampere around 08:00 for breakfast and had a backup plan with the next train that would still get me there in time for my presentation. This did stress me a bit, but once I found my seat on the train, I began to feel more relaxed. During the entire train ride, I dedicated my time to rehearsing my talk, thinking about what to say and in what order, and when to incorporate jokes and puns. I finally arrived in Tampere just 20 minutes before my talk and managed to make it to the venue on time. ## The talk I was pleasantly surprised by the turnout for my talk; there were so many attendees that some had to sit on the stairs because there were no free seats left. At the beginning of the talk, I felt quite nervous. However, thanks to my rehearsal on the train, after about four slides, I began to feel more relaxed, allowing me to slow down my presentation pace and avoid feeling rushed. As I progressed through many slides and sprinkled in some jokes, I reached the conclusion of my talk and noticed the sign that read "2 minutes," indicating how much time I had left. Fortunately, I was already at the end of my speech by that point, so I didn't need to skip anything. Following the presentation, there was a brief Q\&A session before I exited the stage. After my presentation, several people approached me to discuss their experiences with plugin development, and we exchanged thoughts. The remainder of the day was spent socializing, attending other people's talks, and having a great time. ## See my other presentations --- # A Long-Awaited Update: Insights into the Last 8 Months of My Life URL: https://olli.works/blog/a-long-awaited-update | Published: 2023-06-26 | Tags: diy > It's been a while since the last post on my blog. A lot of things have happened and there simply hasn't been enough time to give some love to my blog. Despite the turbulence, certain projects have actually progressed. It's been a while since the last post on my blog. A lot of things have happened and there simply hasn't been enough time to give some love to my blog. Despite the turbulence, certain projects have actually progressed. ## The Real Life Let's start with the real-life stuff. Firstly, I've bought a new apartment, renovated it extensivly, and moved into it. Almost all surfaces have been renovated in some way eg. Floors changed, walls straightened and sanded, new kitchen, bathroom redone, new doors, painted all surfaces etc. and I've done most of the renovations myself, which has taken most of my free time. **It's been very rought and stressful**, but so far it's been worth it. There are still several things to do, but it's already a nice place to live in. We're also expecting our firstborn very soon which will change our lives forever. I'm very excited about this and can't wait to meet our little one. ## RIP Forestry CMS I used to edit and update my site through Forestry CMS, that provided a very user fiendly UI for handling content. Sadly the project was recently shut down in favor of a new *"better"* service called TinaCMS. I started the migration of my site to TinaCMS but didn't get far when it requires your site repository to be in Github, when mine is in Bitbucket... I could move my site to Github but I feel that it starts to be quite a lot of work for pretty much no gain. For now, I'll just write my posts in Markdown and manually handle Git LFS files. I've looked into various other stacks to replace Hugo and Forestry but haven't yet decided on one. One interesting stack would be [Quik JS](https://qwik.builder.io/ "Quik JS") combined with [Builder.io](https://www.builder.io/ "Builder.io") since that could help me get the site score 100 in Google Lighthouse. ## Neito Rev. 2.1 I know this project has taken way too long, but I'm finally happy to reveal that there is some actual progress! The case will be done by a new partner in this project while I'm focusing on getting the PCB done right. More info about this project will be revealed in another blog post. For now, I'm leaving you with a slight sneak peak of what might be coming. ## FMKC Tampere Meetup I had the pleasure of participating in the FMKC Tampere meetup where I delivered a memory lane speech to commemorate the 5th anniversary of the FMKC Discord server. The meetup turned out to be a fantastic experience and something I had eagerly anticipated for quite some time. Words cannot adequately express how wonderful it feels to reconnect with amazing individuals whom you rarely get to see. Witnessing the growth of the Discord server from its humble beginnings to now boasting over 1250 members has been an incredible journey. I take great pride in the community and the remarkable individuals who contribute to it. It brings me immense joy to have played a part in fostering the growth and evolution of this community. I eagerly await the next 5 years and all the exciting things they will bring. ## My whisky cask turned 1 year old My original whisky cask sharing experience has finally shown what it's becoming, and the results look very promising. The distill had gotten a lot of color from the bourbon barrel and the taste is very nice. You can notice some hard-edges in the distill that hints you of a young spirit, but nothing that would be unpleasant. I'm very excited to see how the cask will evolve in the future. ## Planning a new shared cask experience! Since the first experience turned out (atleast so far) to become a good product, and I have a firstborn on the way, we've been thinking about getting a second cask. I would like to have a whisky cask age at the same rate as my newborn, it would make the whisky special for me. We've been looking at larger casks, targeting aging time of 7-10 years. We're still in the planning phase but currently it seems like we would do a non-smoky distill in a Madeira cask. I'll make a separate post about this and how one can participate, but if you are overly eager, you can fill this form and I'll email you whenever the project has progressed to a point where I need to ask for monetary commitment: [Sign up for updates](https://forms.gle/wDWegGL9acCvUfyW7) ## Vortex keyboard Affiliate Program Despite focusing on creating text-and-image based content, I was invited to participate in the Vortex Affiliate Program. What this does is giving me a small kickback when you visit Vortexgear store and buy something through my links. I'm not expecting to make any money from this, but it's a nice gesture from Vortex to invite me to the program. I wouldn't do it if their products wouldn't be good, but from what I've tested so far, their price to quality ratio is very high. You can pay Vortex store a visit through my affiliate link: [Vortex keyboard](https://vortexgear.store?ref=6ctx9y82) ## See what else I've been up to lately! --- # Vortex PC66 keyboard review (Sponsored) URL: https://olli.works/blog/vortex-pc66-keyboard-review-sponsored | Published: 2022-10-25 | Tags: keyboards > Review of the semi-popular Vortex PC66 keyboard. Despite this being a sponsored review I'm allowed to give my honest opinion on the keyboard. This is my first proper keyboard review and I'm happy to be able to do it as sponsored content. I had one main requirement for doing this as sponsored content was that I wanted to stay true to my opinion. I'm happy that Vortex was alright with this. If a company isn't scared of constructive feedback, they really must believe in their products, and I gotta say that this keyboard did surprise me! Enjoy ✌️ I was contacted by Vortex and asked if I would be interested in doing a partner review(s) of their products. I haven't done something like this before so it sounded interesting. Upon deciding on details, I felt that this was something I want to try out. This review will be of the Vortex PC66 keyboard, hope you like it 😁 *Spoiler: It's quite alright* [Vortex PC66](https://vortexgear.store/products/pc-66-66-key?variant=42608200515747&ref=6ctx9y82) [Vortex Store](https://vortexgear.store?ref=6ctx9y82) *Note, affiliate links that might provide me with a small kickback from purchases* ## Transparency One thing that I insisted on upon taking on with this review was the right to have my own opinion over the product, in both positive and negative aspects. Vortex didn’t hesitate at all with this requirement. This review is hence my unbiased review and Vortex only provided me with the product. ## Vortex Pok3r, the old legend Maybe the most known product by Vortex is the POK3R 60% keyboard. It was launched back in 2014 and I bought mine in 2015 as my second mechanical keyboard. One thing that I fell right away in love with in the Pok3r was the Caps-Lock function layer. The feature to bring the arrow keys to the keys IJKL is something that I still use on all my keyboards. The build quality of the Pok3r was way ahead of other manufacturers. The aluminum case was really sturdy for the time and almost no other manufacturer offered cases from metal. Over the years there was been lots of improvements in the keyboard scene regarding feel, sound, and firmware, and the old Pok3r isn’t with today’s standards anymore. My old Pok3r is still going strong since I’ve modded it. The mods include lubed switches, PCB foam, case foam, Durock stabilizers, and thicker keycaps. With the mods, the only downsides are the missing QMK support and the mini-USB port. ## The PC66 This board was created as a tribute to the IBM PCjr but with a modern twist resembling a traditional 65% keyboard. The keyboard is advertised as a hotswap gasket-mounted keyboard with wireless support. Compared to a 65% layout, the lower left control-key is shorter (1U) and located next to the left-alt-key. The left edge of the spacebar is located 1U more towards the right edge. Other than that, the layout is quite standard and if you are an Apple-user, you will feel right at home with the control-key (command on apple) position. ## Build quality At first glance, the build quality is good but after some inspection, I started noticing some issues with the case. ### Case Upon first trying out the keyboard I didn’t notice anything, but once I started taking photos I noticed two things. The first one was that the plastic surface of the board wasn’t uniform and had some spots that looks like dents. There are hard to spot but if you look at the board with light reflection, you can notice them. One spot also seemed slightly smoother than what the case normally feels like, hence shining a tad more. The other flaw was that the case was warped. The warp turns the keyboard into a slight banana, dropping down slightly in the middle. The rubber feet on the bottom ate only on the sides, hence allowing the curving to happen. You can easily twist the case to be straight but it doesn’t stay straight. ### Keycaps The keycaps are thick dye-sub PBT and the print looks clean and sharp. I would have wished for dual-shot plastic but I bet that it would increase the price of the product too much. These are very nice keycaps for what they are. ### Peripherals The package comes with a decent coiled cable, hex key, metallic Vortex badge for the front of the keyboard, keycap puller, switch puller, and some additional Vortex-themed keycaps. ## Disassembly The case is held together with 8 hex screws. Upon removing these we can carefully remove the bottom and see how the keyboard is assembled. Once the back is carefully removed, you are faced with a large rubber mat and some cables dangling to the bottom piece. This board hosts a battery compartment and a daughterboard in the bottom part of the case. The daughterboard was a nice feature I hadn’t expected. The PCB is fully surrounded in rubber which is used quite wildly, giving most of the weight to the keyboard. The PCB is a normal-looking 65% one but you can notice that Vortex is using the same PCB for their other products as this keyboard is e.g. missing the per-key RGB LEDs. It’s smart for a company to reuse PCBs or make them as variable as possible, as this reduces production costs. The PC plate rests between soft gaskets making this a gasket mount, however, due to the excess amount of rubber used, the board doesn’t flex like a gasket-mounted board usually does but is rather stiff. All the rubber on the bottom stops any flex. Despite missing flex, the typing experience is good as the feel is very uniform and solid, making the switches stand out more. ## Switches & feel The board I received came with Gateron G Pro Brown switches. I had never tried these before and I was interested in seeing if Gateron was able to make a high-quality switch. I need to say that I am impressed with the quality of the switches, but I still feel that they are subpar to e.g. Durock switches. The switches are also only 3-pin, which makes them slightly less stable than 5-pin switches. The switches felt smooth but had a too-shallow bump for my liking. Luckily the PCB is hotswap so these can be easily replaced. The sound profile is something that fits very well into an office space as it’s quite muted with no high-pitch noises. ## Stabilizers I wanted to create a separate heading for stabilizers as they are often the largest issue in market keyboards. My old Pok3r had rattling stabilizers until I lubed them. **PC66 has straight-from-the-box very solid stabilizers.** The sound profile is uniform for the spacebar and the other keys (Enter & Backspace) have a satisfying thock. I would bet that these stabilizers have some rubber padding on the PCB and are lightly lubed. There is absolutely no rattle which was a really nice surprise! I wish other manufacturers would take notes since market boards would be much better if their stabilizers were properly handled. ## Firmware The board doesn’t support QMK which is a big downside. I tried downloading the Windows GUI software for PC66 but that program didn’t do anything despite having the keyboard connected. Downloading the firmware for PC66 prompted again for a non-signed .exe file so I didn’t want to install it. You should be able to reconfigure the keyboard with the software but for some reason, my experience with the software has been lackluster. I feel that Vortex should support QMK, and if they insist on making their software for changing the keyboard layouts, why not just make a fork of VIA but limit it to Vortex boards? The current solution only supports Windows, Mac, and Linux users who are left out of luck (even if the software worked). ## Usability I thought about comparing different scenarios on how your experience would feel with this keyboard. ### Typing/Working Great, but only if you get used to the layout. This board is great for pure typists but if you do many combos (shortcuts), the missing keys might make things somewhat tricky. You might also get some street cred from senior workers who have experienced IBMs in their glory. ### Gaming I would say that this depends on the game you play. I would not play any FPS game with this board as my little finger wants to control the control key 🥁, but thankfully Vortex offers also a version of PC66 that comes with the left control key in case you need it. If you game something more casual, this keyboard might work for you. ### Traversal This keyboard can be used wirelessly with either Bluetooth or 2.4Ghz. I didn’t try these options as I want all my keyboards wired. Vortex has saved a buck with this keyboard by using AAA batteries instead of something rechargeable. The size of the keyboard doesn’t make it easy to travel with so it feels weird that it still supports wireless mode, maybe so that you can have a clutter-free desk. ## My take on PC66 I can right away say that this is not a keyboard for me. I’m just too much in love with a more ergonomic layout and going back to 60/65% just doesn’t do it for me. Here are my caveats in importance order: * Not the layout for me * Missing QMK * Wrist-rests would be quite awkward with the front edge of the board * Not the best switches for me (I’m very picky) As you might notice, most of the caveats are something that many users can live happily without, hence you should not justify your opinion alone on my review but rather use it as a reference point when thinking about buying this keyboard. ## The verdict **TL;DR solid keyboard that could be better in some aspects.** If you fancy the look of old keyboards, this can be a good choice for you. Finding old keyboards and getting them running with modern PCs is quite tedious and costly, PC66 is a much cheaper and solid alternative instead. There are some drawbacks with this board but as of its out-of-the-box quality, it’s quite good. **The good things worth mentioning** * Satisfying sound profile * Good stabilizers * Nice thick keycaps **The bad things worth mentioning** * Not the best layout (in my opinion) * Lack of QMK support If you would like to try this out I’ll be taking this with me to various keyboard meetups in Finland ✌️ ### See my other keyboard-related posts --- # Modern DIY repairs URL: https://olli.works/blog/modern-diy-repairs | Published: 2022-10-07 | Tags: diy > When something breaks, do you toss it or try to fix it? As a tinkerer (and a bit of a cheapskate), I’ve repaired all kinds of uncommon items over the years. Here’s some inspiration to help you repair more and waste less. What happens if an item breaks, do you throw it away or wonder if it can be repaired? As a tinkerer *(and partially cheapass)* I've made quite a few repairs in the last years which are not that common. Hopefully, this inspires you to repair more of your items. Hammer, nails, duct tape and glue, and you used to be able to “fix” anything stationary in the old days. Modern times have brought us new repair challenges as the materials used are most often more complex than just wood, and many items contain some electric circuits. Someone who is not familiar with the modern types of items might feel encumbered to even try to fix any modern issue eg. broken plastic parts or electrical devices not working properly. **However, if you have tinkered with electronics lately or played around with CAD, you probably have a sense of how things work and how they can be fixed.** One thing that I have learned the hard way over the years is that **the best way to learn is by failing**. I've made several mistakes which have had their price. once I almost ruined a new parquet floor, and the last keyboard prototypes that I ordered had design faults so they didn't work. No one likes making mistakes, but making them really teaches you to work differently. Nowadays we have lots of tools that we can use for repairs. The internet is full of repair guides (eg. YouTube, ifixit), libraries (atleast in Finland) offer workshops where you can solder, 3D-print, laser-cut and work with fabrics and spare parts can be found on global sites like Amazon, eBay and Aliexpress, sometimes even from local hardware stores. Doing repairs is also cool from a sustainability point of view, less waste is always a plus. Here are some of the items that I've fixed/repurposed and a little backstory about how I did them. ## Car AUX port **Issue:** The AUX-port wasn't working anymore **Solution:** Spare parts were not easily accessible and those were still quite expensive for what they were. 10€ for an AUX port is quite expensive. The issue was that the port had received mechanical stress from plugging and unplugging an AUX cable and hence lost contact between the female jack and the PCB. I was able to find the blueprint of the component and was able to solder some jump wires to fix the broken connection in the port. ## Battery bank charging port **Issue:** The charging port had burnt and broken due to a bad USB adapter, and the power bank didn't charge at all. **Solution**: Replace the charging port with a new one. I happened to have a USB Type-C female port that I had used for debugging USB wires and thought it would be perfect for the power bank as it's easy to solder wires to its pins. I took the power bank into pieces, ripped the old charging port away and soldered some wires to the super thing traces on the PCB. USB used to only require 4 wires (5V, d+, d-, GND) but as this was a charge-only port I decided to try it out firstly with just the power traces. To my surprise, it worked normally with only power attached, and because data wasn't added I didn't need to fiddle around with resistors. Several layers of 5-min epoxy and cocktail sticks made the final result much studier than the old one. It does look a little funky but for me, the only thing that matters is that it works. The TSA at the airport did look at it for a while as it's missing the CE certificate, but I haven't yet had to discard it. ## The broken camera focus ring **Issue:** The camera had a design flaw in the focus ring. It is too thin making it warp really easily from a frontal bump. **Solution:** I just followed one YouTube tutorial on how to fix the focus ring. I took the camera apart, cleaned the pieces with IPA, removed the focus ring and used some raw power to straighten it out, started reassembly with the addition of grease and got it quite quickly packed back together. Due to the relatively thick grease that I applied, the camera lens now works more silently than a brand-new one. ## Car front grill **Issue:** A acquaintance's car had hit some snow wall when parking last winter and replacing the whole front grill would have been quite expensive. The issue was only cosmetic. **Solution:** I took some measurements with a periscope and took the values to Fusion 360. I designed a part that would mostly fit in the broken slot but that could be slightly modified by sanding or using a Dremel. The part was printed as thick as possible from ASA by [Hekeke](https://heke.io "Hekeke"). I thought I would also help out with the installation of the part (using epoxy) but my acquaintance was handy enough to do it himself and the end result was great! You cannot see the replacement part unless you stare at it. Also, wait till that part gets partially dirty/dusty and it blends in perfectly! ## Mouse (Razer Deathadder) switches **Issue:** Middle mouse click stopped working. **Solution:** I ordered a new middle mouse click switch as well as new main switches for the mouse. After the mouse disassembly, I replaced all the switches with new ones. The mouse felt now just like new. I also added to the mouse some new rubber pieces as the old pieces had worn out. Sadly I didn't take photos of the repair process... ## Repurpose worn-out mountain bike tyres **Issue:** My mountain bike tyres were really worn out and didn't have the necessary grip for rides in the woods. **Solution:** I decided to turn my old tyres into spiked tyres. I bought the cheapest short screws from a hardware store and screwed them to the tyre pointing outwards. When done it looked like in the picture, Mad Max style. It felt really weird to ride with these spikes. You had 10/10 grip on any terrain that those spides were able to dig into, however, on totally flat surfaces the tyres were quite slippery. The spikes provided maximum grip in most terrains but also made the bike much harder to pedal due to the increase in rotational mass and friction from the spikes. Despite that, it felt quite insane to be able to ride normally on an ice hockey rink and not slip. I ended up shortening the spikes as they were a bit overkill as in the picture. One side-effect of the spikes was that I started having quite a few punctures but that was resolved by adding padding between the inner tube and screws. ## Final words There are many more things that I’ve fixed but here are perhaps the ones that I’m most satisfied with. I see broken items as an opportunity to learn something new and I get joy from getting more use of repaired items as well as appreciate the items more than previously since I’ve added my own touch to them. ## Check my other posts --- # Share a whisky cask with me! URL: https://olli.works/blog/share-a-whisky-cask-with-me | Published: 2022-02-05 | Tags: whisky > This is a thing I've wanted to do for a long time but it makes no sense to buy a whole barrel for yourself. Come and share a whisky cask with me! I'm arranging a shared-cask order from Teerenpeli to have a manageable amount of bottles per person. I tried to do this cask group buy once before but that failed due to not having enough participants. This time I've broadened the target group and adjusted the ratios to 1/10. This round will happen! ### 10/10 shares taken ## 16.02.2022 Update ### So it happened I managed to find enough people to participate in sharing this cask with me. Now we just have to wait and see what the end result becomes. The initial cask gave a clear vanilla scent before we filled it. The distillate again was very tasty, apricot and a hint of smoke. I have high hopes for this barrel. ## Preliminary words Buying a cask from Teerenpeli will cost you about 5000-6000€ depending on the configuration. I would love to get a cask for myself but I don’t want to sit on 120 bottles of whisky all by myself. The idea with this group buy is to share the bottles of a cask so that everyone gets a much more manageable share of bottles. I tried to do this once before but it failed. You can read about it here [Failed whisky cask group buy](https://olli.works/blog/want-to-share-a-whisky-cask/) ## The distillery I've contacted several distilleries about producing a cask and it seems like Teerenpeli would be the best choice for this round. I've looked at Kyrö, Nagu, HDCO and 1000 Lakes for different options and prices. You can see the PDF document for more information about Teerenpeli. [About Teerenpeli](https://www.teerenpeli.com/) ## The proposal I want to host this whisky cask group buy transparently and fairly. I’m offering you a chance to own a part of the contents of a whisky cask. The upside with this arrangement is that this is an easy way for you to get a part of the cask. The downsides of this arrangement are that you are not as much in control as if you would buy a cask by yourself. What you trade in for control you’ll gain by getting to take part in this relatively cheap whisky cask ownership. ## The distillate and cask **Cask:** 65L ex-bourbon **Distillate:** 61.7% Teerenpeli default “vakiotisle” There is an option for a smoky distillate but in my opinion non-smoky option would be better as the smoke flavour is often too dominating and covers other flavours. Don’t get me wrong, I like smoky whisky but non-smoky ones are in my opinion more elegant. **The final whisky will be bottled as cask strength. This gives you as the consumer more ways to enjoy the whisky. 61.7% or whatever the ABV will be at the end of the process.** ## Prices There are no certain set prices because the final cost will vary depending on how much whisky there is to bottle and what the taxation looks like that year the bottling happens. **Cask:** 450€ (we share this cost between the shares) **Distillate:** 18€/L **Taxes and other expenses:** about 25€/0.5L According to the estimate, everything together would cost around 5000-6000€. There will be a total of 10 shares of the cask. ### 1/10th share: Price: 500-600€ Estimated bottles: 10-12 bottles cask strength ### Payments The payment will happen in two stages. The initial payment will be about half of the total sum of your share(s) and is needed to be paid for the process to start. The other half will be paid when the bottling has been done. ## Schedule **2022 Q1** I’ll be making the order right away when all the shares have been taken. The first payment will happen on my call and be paid to me as I’m the middleman between the shareholders and the distillery. **Between 2022 - 2032** I’ll keep you up to date on how our whisky has changed and opinions on if it should be bottled at that point or not. This is a waiting game. I’ll be trying a sample of the whisky once a year and report to you about the progress. Various distilleries have said that smaller casks like this take maybe 4-5 years to mature, but we can go up to 10 years if we wish so. I’ll be making decision calls on a yearly basis where the majority decides if we let the whisky mature for longer or not. **Some date in the years 2025 - 2032** Bottling time! This is when the second payment will happen. I live in the Helsinki region so you could pick up the bottles or alternatively ask me to ship the bottles to you (at your expense). ## Transparency, uneven shares, force majeure and other details I want to be very open with this whole cask sharing experience. What I’ve learned from previous group buys is that communication is key and there is no reason why I should hide some information. Let’s be honest and open, and everything will go smoothly. My interest is to share my passion for whisky with you, in any problematic cases you can count on that I’m working for our best interest. ### Uneven amount of bottles There will most likely be an uneven amount of bottles. I’ll be taking 2 bottles for myself as a small reward for hosting this cask sharing experience, but any more bottles will be raffled out. The chosen ones will get 1 bottle more than the others but that will also affect their last payment with a slightly increased price. This way this is fair for all participants and no one is paying anyone else’s whiskys. ### The cask We are buying the cask for ourselves for this cask sharing experience, hence it is also ours at the end of this experience. I have some use for the cask so I’m suggesting that the cask is also given to me at the end of the process as a small additional reward for hosting this experience. ### If the whisky has gone bad We have the option to cancel the deal with Teerenpeli and pay a fine for the storage that it has required. This is something that will be done if there is something clearly wrong with the whisky, the final decision is done by voting. In this case, you’ll receive a part of your initial investment back. This is a potential risk, however, Teerenpeli is experienced in making whisky so this most likely won’t be a problem. ### If something happens to me You can never know about life and what happens. I’ll be sharing all the information about the cask sharing with one of the participants so that in the worst possible situation, you still should be able to get the whisky. ### The name of the whisky and the label This is something that we need to think about once we’ve gotten the process started. I have some designer contacts who might be able to give us a hand at designing a cool looking label for the bottles. The design work won’t be free so I feel that we could budget around 200€ or perhaps a few bottles for this. This is something that we decide once we have gotten the process started. ### Your responsibility You are responsible to keep me up to date with your latest contact information and being active in the voting. If you are not voting, your vote won’t be counted. It is also important that you are active and do the payments as I request. Failing with payment one will result in kicking you out, failing with the second (after bottling) payment and not being in touch results in losing your investment. These terms are somewhat harsh but I shouldn’t need to hunt you down. If you just keep an eye on your email you shouldn’t have any problem with this. After-bottling neglected whiskeys will change ownership to me if there is no contact and the second payment is left undone. ### Trying out samples This is something that we could do when we think the whiskey is close to done. This mean that around 4-5 years of aging, we’ll get to sample the whisky as a group and decide if we want to age it further or bottle it. The sampling would happen in Lahti. ## Status updates and voting I’ll keep you up to date with the situation of the whisky, give my own opinion as well as the opinion of Teerenpeli. The updates will be yearly, or whenever there is something new to tell. Any decision for bottling or cancelling the batch will be done by voting, each share representing one vote. The voting won’t be anonymous but rather just in a simple form by email where you state your own opinion for the options given, your personal vote won’t however be shared with the other participants. In a case of a standstill (50/50 votes), my vote will decide the decision. ## Participate I want you to fill out this form to participate in this cask sharing experience since it’s much easier for me to handle your information if I have it in one place. Only participate if you are 100% sure you are in and have the monetary situation allows for it now and some years from now. ## See other whisky related posts --- # Keyboardpresentation at Fraktio HQ URL: https://olli.works/blog/keyboardpresentation-at-fraktio-hq | Published: 2021-12-08 | Tags: keyboards, presentation > I'm held a presentation about mechanical keyboards at Fraktio 10.12.2021 at 16:00. The presentation could be attended physically but there was also a stream for those who couldn't attend. Who the hell would go talk about keyboard publicly? Well, apparently I do. This is something I've been thinking about for a long time but this year felt like the right time to do it. ## The presentation will be held the 10.12.2021 at 16:00 in Fraktio HQ in Helsinki. If you are interested in attending this presentation physically, please sign up as there are only a handful of seats available due to the global pandemic. You are also required to have a valid Covid-19 certificate for physical attendance. You can also tune in to watch the stream via YouTube and hence watch it later if the showtime doesn’t work for you. More info on Fraktios perjantaipresis site. [The presentation page](https://www.fraktio.fi/perjantaipresikset/10.12.2021-raataloidyt-nappaimistot) ## See other relevant posts --- # Bypassing shitnewspaper "Plus" subscription URL: https://olli.works/blog/bypassing-shitnewspaper-plus-subscription | Published: 2021-11-18 | Tags: development > I noticed one day that a certain shitnewspaper "Plus" service doesn't really need the paid subscription to read articles behind paywall. One day I was looking at this one particular shitnewspaper site and felt slightly annoyed over their paywall articles requiring a "Plus" membership. I wanted to know how much of a certain article I would be able to see and it turns out that it's more than just the ingress! ## Update 2024 Sadly this workaround has stopped working, just FYI. ## Disclaimer: This was not done for monetary reasons but rather to show you what side-effects sloppy features can have. Any info or code used here comes with no liability and is only meant for personal use. If you happen to enjoy the “Plus” content of this shitnewspaper, go ahead and support their service as it’s not expensive. As you’ve noticed, I’m avoiding using the name of the specific shitnewspaper site. I would rather not have this blog post be indexed with that keyword, hence I refer to this particular shitnewspaper as shitnewspaper. ## The paywall Here you can see how the paywall looks like when you try to look at a "Plus" article. A normal user would just go on to the next article but I decided to stay and see how the paywall has actually been implemented. I've heard rumours of bad practices eg. hiding *premium* content with bare CSS and wanted to know if there would be something similar here. Well, apparently there is something 🔥 ## The bypass When having the dev-tools open, you can see that the shitnewspaper loads a ton of stuff on page load, but one of these things is the actual page. The page in itself has a paywall integrated by default, but all the data of the article is visible in the file, however in another format. At this point, I knew that I could somehow run my own script on the shitnewspaper site and populate the content. As this seemed like *too easy* I had my bets that someone else had already come up with this and I was right. [The bypass](https://ylilauta.org/satunnainen/129374482) Someone had already done the hard work for me, but the script was not that fresh and didn't work so I decided to fix it to see that something that I had imagined would actually work. ## The code I had little time one evening after some beverages and wanted to give the fix a shot. I used the Tampermonkey chrome plugin to inject scripts on the page and found out that the original code almost worked, I just had to tweak a few parts of it and add some missing styles that the shitnewspaper loads via JS for some reason. Feel free to copy this and remember to edit the scripts **@match**-attribute to the actual URL. This script reads the article data from the global set variable and builds up every piece of the article with the respective proper elements (paragraph, heading, subheading, image etc.). The current script could be improved by getting some event listener connected to the ReactJS that’s being used. I could have used some setTimeout solution but that felt too hacky. In case the Plus content is behind paywall with this solution, just refresh the page and it should be displayed properly. --- # DIY whisky glass lid with Fusion 360 and 3D-printer URL: https://olli.works/blog/diy-whisky-glass-lid | Published: 2021-05-22 | Tags: diy, whisky > I found a really nice looking whiskey glass lid that was sold in the US. Buying that lid as a European would have caused high shipping and taxes so I decided on giving a shot creating the product by myself. I gotta admit I’m a fan of whisky. I find it really fascinating how a strong spirit can change so much in taste by just sitting in wooden barrels for years. One good place for information about whiskys is the [Whiskey Vault YouTube Channel](https://www.youtube.com/channel/UCElm866_W5r1eg8VjhFNARw). After watching too many of their video, I decided to join their community and stumbled with that on their merchandise, which included a **challenge coin**. ## The challenge coin When I saw this coin/glass lid I knew I wanted one but the steep price for such a small item wasn't really attractive. If you live in the US, that price would still be somewhat reasonable, but when you have to ship the item over to Europe and pay additional taxes, you start to think twice if you really want it or not. I started thinking that could I replicate or make a product similar to this one myself. The lid feature was essential and the toast message was a high-priority nice-to-have. [The Challenge Coin](https://whiskeytribe.com/collections/challenge-coins) ## Thingiverse and Tinkercad There were some ready-made designs for whiskey glass lids. I took one of these, imported it into Tinkercad and tried to work with it. Apparently changing from a .stl-file to something workable doesn't really work out nicely and produces overly complex points in the model versus how simple the design actually is. I would have been able to do this with Tinkercad but due to its lack of precision, I felt that I needed something better. I hadn't before made any particular 3D models so each software was a little challenge in itself. After giving up with Tinkercad and the usage of pre-made models, I decided that I would need to create the lid from scratch. ## Hello Fusion 360 I had previously made sketches for laser cutting in Fusion but creating 3D models was something new. After a little investigation, I found all the same tools that Tinkercad has and I was able to create something. For simplicity, I split the task for myself into four parts, four parts that should be printed on top of each other to form the final lid. * Top-ring * Middle layer with toast-message * Bottom outer ring * Bottom inner ring I got the toast message from the actually products image, cleaned it up in Gimp with contrast and partially fixed issues by hand, and finally converted the image into vector format so that it could be imported into Fusion. ## First proto I had used a digital ruler to get the dimensions of a Glencairn glass and used those to create the initial model, leaving a generous 0.5mm additional space the for glass edge cutout. My friend Hekeke printed out this first proto with his **Prusa i3 Mk2.5S**, using Clas Ohlson PLA and 0.25mm nozzle, 20% infill gyroid (Some printer nerds might find these stats interesting). [Check out Heke.io for more awesomeness](https://heke.io) After the print was done we noticed that the PLA had shrunken a tiny bit, but so much that this piece didn't fit anymore on top of the glass. I guess my tolerances were too strict and I should have made it larger to also take into account the paint and lacquer I had planned on using. In the image, I had cut the piece to see how much wider the lid would have to be. ## Proto #2 and finish I enlarged the whole model in diameter by 2mm and made the gap for the glass edge also significantly wider. These values were pretty safe to work with but also caused 3D-print wise a larger overhand which might have caused issues when printing. I finally received 4 lids that worked well. I painted them with several layers of enamel gold paint (same stuff as used with miniature cars) and gave them finally several coats of spray lacquer. ## End result I feel that the end result turned out really nice. The original product still blows this out of the water but for my own use, these will be enough. Also, every time you create something yourself, you feel better using it due to the attachment and memories you have with making the product. I still haven't *tried* the product with whisky but as of writing, I have all the lids soaking in whisky water to get rid of or override any smells from the paint or lacquer. Making these lids also creates the need to have a whisky evening with my friend, it's really important to test these with good company 😉 If you managed to get this far, I’ll salute you! Let us toast for this project ## If you fight, may you fight for a friend. If you steal, may you steal a lover's heart. If you drink, may you drink with us. ## Skål! ## Update 25.5.2021 - Critisism I’ve received some complaints about this product as some say I’m fully ripping off the store. The whole intention with this tinkering has been to be able to enjoy whisky in a new way without having to pay over double the price 43$ (product price + shipping and taxes) for the product. This is compared far from perfect and only meant for personal use. I also have no plans on sharing the .stl-file because it’s an overly simple 3D object and the text/image on it is very poor quality, especially for 3D printing. ## See other whisky related posts --- # Animating matrix of items with just CSS URL: https://olli.works/blog/animating-matrix-of-items-with-just-css | Published: 2021-04-02 | Tags: development > Exploring my idea of creating animated visuals with the help of SCSS I've always loved CSS and how well it performs with animations. I've had this one idea growing on me about creating visuals or landscapes created mathematically and be animated to some extent. Here is my first test on how well this works. ## The Goal There are several fancy JS libraries for creating stunning visuals, but I’ve never really been that hyped to do things via JS if you can do it with CSS. Thanks to having “long math” in high school, I remembered that you could create mathematical expressions and use that to generate visuals. For a first demo, I felt like a moving plane could be a good demo, so here are the specifications for the project: * Moving plane (matrix of HTML items) * Use mathematical expressions for some values * Interactivity ## How we are going to achieve it CSS is quite limited and since we need to do mathematical calculations, it would be better to have the calculations be done when the client is loading the page. This can be achieved if we do the logic in SCSS and generate the proper values. By creating a matrix of items, targetting them with CSS nth-selector and doing the expressional calculation depending on matrix dot index, we can achieve mathematically calculated visuals. ## The code Here is the part of the code that does the magic: ```css // Expression: x^2 + 4 @for $r from 0 through 9 { $rowStart: ($r * 10 + 1); @for $c from 0 through 9 { $columnStart: $rowStart + $c; // Work with row values $valueX: pow($rowStart, 2) + 4; @if $row == 0 { $valueX: 0; } // Work with column values $valueY: pow($columnStart, 2) + 4; $valueY: 0; @if $column == 0 { $valueY: 0; } // Working on translate Z div.dot:nth-child(#{$columnStart}) { .dot__inner { $hslColor: (($c + $r) * 15deg) % 360; animation-delay: $c * 0.1s + $r * 0.2s; animation-name: gradientWobble_ + $r + $c; // Hue background-color: hsl($hslColor, 50%, 50%); @keyframes #{gradientWobble_ + $r + $c} { 0% {transform: translateZ(0px);} 50% {transform: translateZ(($valueX + $valueY) * 0.025px);} 100% {transform: translateZ(0px);} } } } } } ``` We are using the simple mathematical expression (x^2 + 4) where x is the index of the elements. As we traverse the indexes, the result from the expression changes and therefore generates a different translateZ value. The colors are not made in any fancy but they are also based on the index. We calculate the HUE with (index-X + index-Y) times a modifier. With this, we get a rising HUE-value that we can set to a value between 0 and 360 with the help of modulo (HSL-Value % 360). These 40 lines of code generate approx 2000 lines of CSS with this 10x10 grid. As we made the grid bigger, CSS-size increases quickly. ## Demo