Hi there! It's been quite some time since I last updated my website. However, I wasn't abandoning the website. instead, the real problem is interesting to look at since it's quite a slap in the face to use proper organization. I didn't originally did this impulsively, but rather I think of it as a move that comes with some decently good side effects.
Backstory
Okay, to kick things off, I think it's a good idea to talk about the old website's architecture, as I probably never shared this before. It is a fairly simple Django application running on a SQLite database. For the UI I pulled off an HTML template and modified it to work with Django well. It was decently good, and I like the concept altogether, but the site's quite slow. If you don't believe me, test it yourself, please:
- Open up the new project site and the old projects site in two separate tabs.
- Do a hard of the webpage. Now to be clear this not the usual
F5 or Ctrl/Cmd + R shortcut. Instead, you should press something Ctrl/Cmd + shift + R, depending on the browser. This sequence clears all cache in the browser, showing how a new user sees the loads. Make sure to run them at the same time e.g., by selecting both tabs and applying the reload key. - Behold, the difference should show up! The new site finishes loading faster, while the old site, while already mostly loaded, was still waiting for some time.
Disclaimer: I run both applications on the same hosting account (it's a traditional deployment, burst your in-head edge or CDN network cloud right now), so the results shouldn't be too different depending on your internet connection.
The way I found out about this was when I ran GTMetrix, where I got a measly D rank at best. Frustrated, I searched for a way, since I knew that this is gonna make my site great. So, I tried minifying assets manually without any VCS like Git, and I was stubborn enough to have node_modules stuck on the top branches of my filesystem tree.
Disaster strikes!
Over time, I didn't really have anything to fix/improve, so I had let my bundles sag and tangle up over time. Then, the time came when I should be fixing a bug where one of the buttons didn't click correctly. I was ready to ship out a CSS-only fix to the problem, but my bundling setup was nowhere to be found, and neither were the original source files, so I was forced to hog down thousands of characters to locate and apply the fixes. It was a nightmare-like experience to do this every single time a patch was made. The code wasn't exactly minified by modern standards, with some files being left untouched, but wasn't in source code either, as some files are production bundles, creating a nasty mess. By then, I knew that I could not continue doing this for long.
Moral
Now I don't want you to just lift your shoulders on this issue. Sure everything loads, but I can guarantee you will not like how the files reek if you just let everything happen without a source of truth to compare.
I know how skipping one typo feels all too easy, but in the future this will devolve into each file having many copies spread all over the place. Then again, even if you pull it off this way, how are you going to release it? What about bundling/minification? What about a staging?
Instead, I highly recommend using something like GitHub, which gives a free, online, Git-based solution to manage your code. Not only does it save headaches on file organization, you also get the added advantage of being able to track a bad commit, the ability to create issues, forks and pull requests, a built-in Continuous Integration (abbreviated as CI, this might help you log off early knowing that a cloud server will get the builds done as you drive home) service, as well as the ability to code online on any platform irrespective of resources.
Yes, GitHub ships with an online coding environment. It is called Codespaces, and you can use it on any machine with a decently modern browser. After creating an instance online, you can use it anywhere. For example, you can link Visual Studio Code to the instance with a special extension. You can also use it on an online version of VS Code, letting you code comfortably in a public computer without installing software or leaving any files behind.
The first changelog
In this version of the site, which I will call v2.0.0, there are notable changes
Architecture
In the previous site versions I used Django, which makes the site very easy to code but didn't come with decent optimizations built in. Moreover, the Python language does not easily play with JavaScript build tools, forcing me to maintain two environments simultaneously - one for the Python server and a Node project to bundle and optimize source code. Additionally, Django was not built with optimizations that require client-side and server-side code, such as image optimizations.
Therefore, I am dropping Django in favor of Next.js, a better-suited full-stack framework with an emphasis on web performance. It is based on the React system, easing the introduction of custom components that can perform under-the-hood optimization. The full-stack framework easily allows a mix of static site generation, server-side rendering with hydration, and client-side rendering to coexist with minimal problems. Additionally, it is built with JavaScript, so build tools and server logic coexist as one application. Additionally, it does techniques such as minification and code-splitting with no custom configuration, as well as image optimizations.
To make content management easier, I decided to use Strapi for my content, containing projects and blog posts at the same time (see the Blogging section too).
Site look and feel
Frustrated by using templates, I steered quite far from ready-made, fully fledged templates, and created my own site layout. It is powered by Tailwind CSS with some Chakra UI components thrown in occasionally. I also used a flatter, darker theme using the Nord color theme. Finally, I used modal-aided navigation for easier access using Next.js Parallel Routes and Intercepting Routes, while also creating a smooth and intuitive experience.
Speed
Inadvertently, using Next.js actually helps my site. It bests my previous system at almost all web metrics, showing a good start. It is generally a cheering result indicating that this is probably right for me, giving the performance without the hassle (no ads!!).
Blogging
The old blog at https://blog.ackhava.com is still alive and well, but I will not update it again. Instead, I will add new content and updates to the Blog section of the https://ackhava.dev site. This makes life easier than maintaining a separate system. However, I have no intentions to perform a migration due to the incompatibilities present. Instead I have made a fresh start, including with this blog.
Anyways, I think that is enough for the update and I'll see you next time!
