Implementing Steam Cloud and Dark Mode
It has been a busy January, during which I accomplished a great deal on the WTF-Model.
Here’s an overview of the updates:
Keyboard Shortcuts & Mouse-Over Overlay I integrated keyboard shortcuts and developed a dynamic, language-adjusting and mobile-friendly mouse-over overlay that fades in/out while hovering the Menu button.
Relativ Display Rework I reworked the Relativ Display, now featuring toggle arrows on its sides. This improvement also included a cleaner CSS implementation.
Selling on Steam & Minimal Model Release
I’ve been quite busy getting everything up and running for the release of the WTF.
Unfortunately, I did not manage a full release in 2024 as anticipated, but at least I was able to push the Minimal Model public end of December. The Minimal Model includes 50 Descriptions yet Zero Overlays. It’s usable - but without proper context and introduction, it may not be of much value. That’s fine for now, as I expect the WTF to have a significant impact on my life once it gains traction.
Azure Exploration & Certifications
I’ve been into Azure for quite a while now as it’s my cloud provider of choice. As can be seen on the following screen, in 2024, I loved <3 spending my monies on cloud services.
Initially, I did some experimenting with VMs on GCP, but this hyperscaler didn’t stick with me.
Iirc, I didn’t like the interface, and, frankly, Google radiates these woke vibes for a few years now. If you’ve been around, you know what I mean.
Discourse Forum via Azure IaaS
I realized the need for a dedicated space to exchange ideas and discuss specific mappings or overlays of the WTF. Therefore, I integrated clickable URL icons for each description item, linking directly to a new forum subdomain at forum.wtf-model.com.
To save setup time, I used the pre-built Bitnami Discourse image from the Azure marketplace. This allowed me to bypass a lot of manual Linux setup, and configured everything for me down to the Postgres Database that runs alongside a shared B2s instance.
IaaS to PaaS: Migrating to Shopify & Webapps
I’ve been quite busy the past few weeks, contributing only minimal structural changes to the WTF project.
Given the expected traffic and cost considerations, I decided to move away from the Azure B1M VM setup I had configured last year.
At my current job, I’ve gained more experience with Azure and realized that Static Web Apps could be a more suitable alternative to self-hosted VMs and scaling.
I also decided it would be smarter to integrate the shop via Shopify into my regular website hosted on GitHub Pages, which is also static, replacing WooCommerce and eliminating the WordPress overhead.
Fabric.js, YAML Pipeline & Model Category
I recently posted about the TypeScript changes, but a lot more has happened over the last month. I wasn’t really able to post a full summary until today, so here’s a major recap.
First off, I implemented a new drawing functionality with Fabric.js. This allows users to draw on the screen when Caps is pressed or when the Presentation Mode is accessed. Holding Alt+Shift draws rectangles, while the Mouse Wheel changes the color.
Typescript: Partial Migration, Book & Exam
For years, I worked exclusively with vanilla JavaScript—no React, no Vue, no Angular. I know about all of these frameworks, but I never had the opportunity to work with them. Angular, in particular, has bugged me because it has recently become the bread and butter of frontend development for full-stack developers. Angular is heavily dependent on TypeScript, so what better use of my free time and vacation than to dive into that?
AI Refactoring for larger files
I had some really ugly code in description.js that had grown tremendously in size over 2years. As context: description.js is the centerpiece for displaying any sort of visual description, including resizing, badges, icons, etc. It handles 95% of the interaction with the .json data files.
As of last week, description.js had reached the atrocious size of around 2800 lines of code - which is extremely bad, to put it mildly. It’s also the biggest single file in the project aside from the third-party libraries.
New: Visual Scope Identifier
Yesterday, I added visual identifiers to better identify the currently selected Scope:
One continuous line for the Local Scope… …and a point-based circle for the Global Scope: Both markers resize and adjust position according to the base vortex movements - so it looks like one homogeneous part. I thought this would be a handy and useful visual clue.
After implementing that, I also redesigned the former Perspective icons that are now labeled as Scope:
Oscillating Circuit: LC Charging & Discharging
After implementing Low-Pass and High-Pass filter mappings last week on the global and local scope, I took the time to focus more on coils and capacitors.
Because this entire topic is already quite complex, let me explain its importance in simple terms:
Capacitors, Coils, and Resistors are the three main building blocks of electronics. There are about two dozen other components, but these three are fundamental. Together with chips, they account for over 90% of the action on any circuit board.