Around this time-ish in 2019, I wrote a post about having migrated my website from Javascript and Sails.js to TypeScript and Express.js. Now six years later, I’ve just spent a bit over two months doing another rewrite, but from TypeScript back to Javascript, and along the way I ditched the CSS preprocessor Sass that I’d been using since 2013 with the previous Perl-based incarnation of my website!
Why ditch TypeScript?
I’d been getting a little irritated with TypeScript for a while now, mostly around dependency upgrade time and problems with the TypeScript compiler tsc complaining about types not matching when the definitions hadn’t been updated to match the library. It also meant a bunch more dev dependencies in my package.json and just generally more places for things to go wrong. I can definitely see the value in TypeScript for larger codebases, but when it comes down to it, my website is just a little hobby project worked on by one person (even if it does have comprehensive test coverage and a deployment pipeline in Bitbucket Pipelines) and I decided it’d be nice to simplify things as much as possible, especially since a lot of the modern tech stack is decreed by huge tech companies that have far more complex requirements than I do.
The process
Most of the conversion process was just renaming files from .ts to .js, updating the import statements to include the .js in the filename, and removing all the type information. And having my existing test suite made it far easier to make sure I hadn’t accidentally ballsed anything up! It look a while to get through everything but it wasn’t particularly arduous, just time-consuming.
As part of the simplification process, I also tackled the page rendering process as well. Back in August of last year I moved from EJS templates to Mustache — which was an absolute delight, the templates are so much easier to read now — and I wanted to see what else I could do.
I’d been using the library Pikaday as the date picker for the Memories pages on my website and hadn’t upgraded it in ages, so I figured that would be a good first start. I found that the maintainer had marked the library as read-only and recommended that people use the native HTML date picker which I didn’t even know existed! A few changes later to handle dates being set via query parameter, and I could completely ditch Pikaday. I also discovered that the charting library I’m using on the Weather pages, D3, has its own built-in date/time parsing, and as a result I was able to entirely ditch Moment.js on the frontend. Now the only frontend Javascript is the aforementioned D3, along with Fancybox on the Media, Photos, and Memories pages to give a nice full-screen lightbox when clicking on images (and if Javascript is entirely disabled, it’ll just link to the original image file instead).
The only extra complexity I added with all of this was moving from Linkify (for simple conversion of URLs to add an <a> tag so they can clicked on) to the Marked library to do full Markdown rendering of my Media posts. All my posts are sent to my GoToSocial instance which supports Markdown, but it was getting increasingly ugly having the raw Markdown showing on my website.
Ditching Sass
As I mentioned in the intro paragraph, I’d been using Sass since 2013 when I first started mucking around with theming on my website because it made it quite simple to have a base file with most of the styling in it, and just include overrides for the different themes.
I knew CSS had gotten a fair few new features over the years, but I hadn’t realised just how many, and with the help of this guide I was able to migrate to CSS variables and remove the need for Sass at all. I also discovered the color-mix() function which I used to make automatic colour theme matching for blockquotes and the background of <pre> blocks!
Moving from VS Code to WebStorm
During this whole rewrite period I’ve also been making another parallel switch, from Microsoft’s VS Code IDE to JetBrains’ WebStorm as part of my ongoing project to migrate away from the huge US tech companies as much as possible (and Microsoft’s jamming of AI into everything it can get its hands on in particular, hence my migration from GitHub to Codeberg a few months ago).
The developers at work use JetBrains’ products a lot and we’ve got a site license for it, and I was quite delighted to discover that WebStorm is actually free for non-commercial use. I’ve had to import a keyboard mapping so it’d match VS Code so I didn’t get frustrated because none of my muscle memory worked for the keyboard shortcuts (I should probably just suck it up and put up a cheatsheet of the default keys and make myself learn it), but WebStorm has been really nice to use. It was far easier than VS Code to set up the run/debug configurations, and it’s got really neat stuff like database integration such that it can look at my opaque SQL query strings in the codebase (literally strings in the editor surrounded by backticks) and actually analyse them and let me know if I’ve made an error or if a table or column doesn’t exist!
Onwards!
I have a few items in my backlog that came out of all of this, mostly some other areas that could do with a tidy-up, but it’s been far nicer to work on the codebase now and should be less fiddly to keep things updated.
Excluding package-lock.json because it’s absurdly large, there was a fair bit of change:
$ git diff --stat 9.15.4 10.0.0 -- . ':(exclude)package-lock.json'
[...]
175 files changed, 3990 insertions(+), 4482 deletions(-)(9.15.4 being the version of my website I was on prior to all of this, and 10.0.0 being the initial release with all of these changes included.)