In my previous post I opened it with saying that developing this website has made me reconsider how websites are developed. In this post I wanted to give a brief history of this website and how it shaped the way that I think about web development and the web in general today.
The beginning
I've always liked the idea of having a personal portfolio ever since I started working on more personal projects in 2016/2017. Before that, I had never really considered the idea of having a personal website because I didn't have a lot of projects that I treated "seriously". I wouldn't work on things for long periods of time and I didn't treat them as if someone else might want to use or contribute to them.
At the time, I remember a lot of my friends were starting to experiment with a relatively new technology called React. React, and frameworks like it, popularised the idea of creating reusable components for your website.
I was a developer looking for new experiences and I already had a decent JavaScript knowledge at the time. So, I saw this as a good opportunity of learning a new technology.
The original design
Back at this point I wasn't in a great position to purchase a domain and web hosting. A lot of my design decisions around the original website (and even up until today) were based around how to make do with the free hosting services that I had access to. I used (and still use) Github pages. Github pages has one limitation - it can only store static content. That means that you can't do any server side rendering.
So, the original idea for the website is that the dynamic content would be stored on the Github repo.
In order to display a post list and the post content I used the fetch API. This would fetch the raw content off the Github repo. For the post list, I fetched the directory contents and it used the details tag and a tag in order to recreate the exact directory contents. For the post content, I had a single view page, which would take a URL parameter in order to fetch the post contents (this in a very similar manner to the watch page on YouTube, which takes a URL parameter called "v" in order to tell which video to fetch).
Overall this meant I had to learn many different parts of React. It was an extremely solid first project in order to learn React fundamentals. It forced me to deal with some more niche stuff that a lot of tutorials don't tend to cover..
I would later upgrade this website using slugs instead of a URL parameter. As I learned more about web development I even ended up porting this version of the website to Svelte after a friend recommended that I try it. I was always tweaking the backend of the website...
Abandonment
Even though I worked on the website a lot, I seldom used it for anything. I posted a few blog posts on some minor experiments I did, but nothing major. And, eventually, life caught up with me. I got busy with work and I stopped posting entirely.
At some point I went through a lot of my repos on my Github account, making quite a few of them private and even deleting a few. This was in an attempt to "clean up" my profile a little from all of the really small-scale first projects that weren't being maintained. I now regret doing this, it would've been nice to keep a lot of those projects for the memories.
One of these deleted repos was, sadly, my blog. I took it off Github pages and got rid of all of the spaghetti JavaScript code.
Web component woes
Fast-forward to last year and I felt the need to have a static portfolio. I had dabbled a lot in web development since creating my website, so I had a lot more insight when it came to creating my website for a second time.
I disliked the idea of having a build step for my website. I didn't want to have to run a dedicated localhost server in order to work on my website. I didn't like the idea of pulling in multiple dependencies to simply have repeatable components.
But pure HTML has its downsides. It doesn't have components, meaning I would have to repeat "code" often for elements such as the navigation bar.
I landed on HTMX. Using HTMX I could paste in the results of a request into a div. This allowed me to emulate web components by storing them in separate files and just requesting them. This also allowed me to generate post pages using the same idea.
This approach loaded a lot quicker than I remembered my React website loading. It worked really well actually! But it was just syntactically... ugly.
At the time I really enjoyed the idea of having super clean syntax. Now I look back and I see that this is kind of a childish reason to switch technologies. Syntax does weigh on the development experience slightly but for the most part I've learned to treat syntax like grammar in natural languages. It's just a thing that you have to deal with and it's very learnable.
Native web component woes
I switched the website over to native web components instead. The experiments that I did with web components on this iteration of the website is what lead me to make One More Framework.
After this point, my website was finally finished and I could start using it how I intended. I showed it off to my friends and even integrated an RSS feed into the website. But, in the process of showing it off to my friends one of them said that they couldn't see the content...
They had JavaScript disabled. This prevented any of the native web components from loading, and just resulted in the content of the page being mangled.
This really disappointed me at the time. But now it disappoints me on a deeper level. Why doesn't pure-HTML have a way to have web components?
A build step...
Thanks to my friend, I decided to move away from JavaScript entirely. One compromise that I had to make was introducing a build step into the website in order to generate the pages from some other place. I looked into various templating engines but eventually landed on just rolling my own templating engine. The idea behind this was to take an XML file and treat certain tags as a limited programming language. I called this Marktemplate.
This XML-based programming language went through many iterations. It was originally intended to be a quick script unique to this website, but expanded into its own project for a little bit.
But, while I was randomly browsing the internet at some point I discovered...
Reinventing the wheel
XSLT is a standard that takes in XML data and an XSL stylesheet and produces a XML output. Sound familiar? It is incredibly similar to Marktemplate.
Now, Marktemplate is unique (as it is a single XML file). But I lost a lot of motivation to work on that project after realising that there was an entire web technology that I could learn that did exactly what I wanted. I had effectively reinvented the wheel.
It took ages, but I moved everything over to XSLT. People who don't use JavaScript can now view the website. People who like RSS have RSS. And there is where we are now.
The future
My plan for the future of the website is to simply use my current XSLT file as-is. There isn't much more content that I would want to add to the website. Hopefully things will just keep working as is.
I have been thinking of using light-dark in order to add a dark mode to this website. That is the only feature that I've planned - but I'm not sure how that will interact with older browsers.
If you've read this far into this rambly post then... wow, thank you! I hope you enjoyed reading up on the history of this little place.