To finish up with the Dark Mode I started implementing in January, I delved into GLSL (a C derivative) and WebGL to build proper Fragment and Vertex Shaders for application on textures. I now have inversion of dark/white colors while respecting transparency and leaving RGB values outside of gray tones untouched- just look for yourself: I also did a lot of clean-up, restructuring and polishing on CSS and interface design. Here’s an excerpt of just 2 weeks of GIT commits:

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 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. Dark Mode Implementation Dark Mode was a major update, requiring extensive manual fine-tuning and coding in addition to basic CSS optimizations. If the user has App-DarkMode enabled in Windows settings, it will be automatically detected and applied as the default.

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.

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.

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.

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.

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.

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?

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.

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: