Wow, long time no write! I am alive!!

Refactorin' the fronts and ends

The past few months I've been busy refactoring the way that the "frontend" side of the site is packaged together. In developer terms, I have moved the entire frontend build to ViteJs, and then thanks to Vite's easy configuration I was able to add support for Tailwind's new "Just In Time" (JIT) mode. The changes are currently in feature/use-vite PR.

I need your help! Since I refactored a lot of code I'd rather avoid updating live (here) too soon. Instead I have pushed the new code to staging dot koohii dot com. If you type that URL you will be able to use exactly the same site, and use your account normally. You can tell it's not the live site because of the gray coloured header bar. Simply use the site as you would normally, and please let me know if you find any issues that are not present on live. Particularly if you use older models of phones / tablets / browsers. Please note this update will definitely END support for Internet Explorer (any relatively recent version of Microsoft EDGE should be ok).

I'm embarrassed that I still am not working on new improvements or features. But on the development side of things, these are really exciting changes. The ability to develop all JavaScript for the site in a single Vite build adds a new lease of life to the site. I should now, in theory, be able to easily add support for UX framework like "element plus". While Tailwind JIT will be a real boon in updating outdated stylesheets.

Side projects

Earlier this year, with the announcement of Diablo II Resurrected, I was finally motivated to do a full rewrite of an old little site called Runewizard. This was the perfect opportunity for me to gain experience with Vue 3 and TypeScript, and especially starting a new project from scratch.

It turns out there were new exciting developments in the JavaScript world that happened right around that time:

First, ViteJs was announced. As I worked on the Runewizard rewrite, I became confident that Vite was stable enough and provided all the features I needed to replace Webpack for building the JavaScript on Kanji Koohii.

Next, Tailwind announced the Just In Time mode. Tailwind JIT works really well with Vite, and it will be a real boon when phasing out old css, and write new code.

So I completed my rewrite of Diablo II Runewizard, and published the code on Github. This is a really small site that gives me a room to experiment, as well as just take a break now and then. I expect that with the release of Diablo II Resurrected there will likely be new Runewords released for new ladders, so the site can receive contributions to update stats and what not.

Apple Silicon

Other things that kept me busy, or distracted me... I needed a change from working in the Ubuntu environment. I was also becoming tired of switching between Windows and Ubuntu partitions. So with the excitement around the Apple M1 chips, I decided to just go for it : switch back to OS X, and use just one OS for personal use and for development purposes.

So "Back to the Mac"... indeed I did have a few years of experience on OS X way back around 2009-2010. And in fact after I sold my late 2009 iMac and bought a PC, I bought a LED Cinema display because I loved the screen. I am still using that display to this day; and this led me to cancel my iMac order and go for the M1 Mac Mini instead. In retrospect, with the announcement of the Steam Deck in particular, I think it was the right choice.

So incidentally it means I am not yet enjoying the 5K resolution, which is one of the things that really got me excited at first. I think for previewing a site on phone / tablet it may be useful, but on the other hand the majority of users out there are still on 1080p or 1440p monitors and I think I prefer to preview the site I'm working on just how most users will see it. It takes some time getting used again to the font smoothing on OS X (some say it got worse because it is now optimized for 5K), but now I'm just used to it.

To be perfectly honest the Docker setup on this Mac Mini M1 feels slower. Even running Vite's dev server feels noticeably slower. Likely due to Docker using emulation on the M1, even with ARM images. I'm not sure. But the overall improvement in my user experience is well worth it. To be fair I am using almost the same suite of tools I was in Ubuntu. VSCode, SublimeText, SublimeMerge, MacVIM, and the Terminal is very similar.

I needed to update the Kanji Koohii repository as well, since I needed an ARM64 image for MySQL. Mariadb was recommended and thankfully it was truly a "drop in" replacement for MySQL, a few changes in the Docker configuration and it worked right away.

Next

I am excited to experiment with this new Vite setup. First I'll need to chose a UX framework and stick to it. I have had good experience with element-ui, so I am leaning towards element-plus which should be easy to add with Vite. It can be a little bloated though, and I have no idea how much "weight'" those frameworks will add to the JavaScript bundles.

But things are looking good. Going forward I will be able to write a lot more on the frontend side of things, while the aging php framework will act more like an API.

One of the things I could experiment first with, is to replace the old dialogs, so I can completely phase out the YUI2 library. Then perhaps improve the "Star / Copy / Report" buttons in the Shared Stories list, by using a proper modal for a better user experience (it's really not obvious the vote / report buttons are toggles for example).

Rewriting the Study page entirely with Vite would be fun.. but also realistically a ton of work. So I am looking at incremental improvements. I've wanted to rewriote the Shared Stories list for a long time and this could be a good candidate. Have a "Shared Stories List" component. A "Shared Story" individual component. And then I could try to make a better modal for the Star/Copy/Report functionality.

All of this is a lot of work though and I don't even know where to start but what's awesome is it IS possible now, thanks to ViteJs.

In about a week from now I will update the live site with the refactored code. Hopefully by then we will catch a few minor things before they go live.

I will also update the setup instructions in the github repository's README files, to match the new Vite setup. I'm afraid there is still a lot of legacy code in there, but if anyone wants to fiddle with it, it's definitely possible now to create an entirely new page built completely from the Vue/Tailwind JIT side, and just add one action/route on the php side to render it. So it's much better now to experiment with some ideas.