This Website, V:1.0.0!

By Tanzil Zubair Bin Zaman

Published on Oct 03, 2019


Oct 03, 2019

The Tech Stack

HTML, CSS, Javascript, Hugo, Forestry

This Website!

Yes, this website!. Built using HTML, Javascript and CSS (along with libraries to ease the pain of boilerplate code) , with Hugo as the CMS and Forestry mixed in for a little GUI convenience, this is my little space on the internet.

The Motivation

Building, and maintaining a website was always pretty high up on the list of things I wanted to do, as it would’ve (and does) provide me with a place to write my thoughts, random tid-bits, tutorials (if I ever get to them) and what I learned along the way. Most importantly it also provides me with a place to showcase all the projects I devote my time to.

Also building a website is pretty cool, and rewarding, with a unique sense of accomplishment tied to it, as a website, in essence, represents the internet itself, and rightly so too, in my opinion, as it is of course how most information on the web is represented and communicated.

The Beginning

I actually stumbled onto Hugo, the CMS (Content Management System) and backbone of my site, completely by chance, while doing quick research to see how would I go about building a website (Hint: There are a lot, and I mean a lot of ways to do it, almost frustratingly many, and as it is with most code, almost no “bad” ways).

Reading up on Hugo’s excellent documentation, and searching about for a few use cases to get a proper feel for its capabilities and limitations, I decided to definitely use a static site generator for my site (of which Hugo is one), but to not settle on Hugo just yet.

Static site generators seemed to fit my idea well, and provided bonuses in the form of faster build times and less demanding server requirements, things I hadn’t even originally factored into what I had wanted to make.

After diving a bit more into the topic, I found that with Hugo, I had, by chance, found out the exact fit for my site!

I had wanted to put off building this site until I actually had stuff I could put here, but, using greatly built software, which I was beginning to see more and more Hugo definitely was, is one of my greatest weaknesses, and the sheer amount of fun I knew working with software that was such greatly designed is proved to be too great a temptation, and here we are, with a V1 site, hosted on GitHub Pages.

The Complexity

The pages on the site are generated by Hugo from custom-built layouts made with HTML, CSS and JS, the legendary trio. While HTML and CSS seem easy enough from the outside looking in, and are in all honesty easy enough to start out with, I learned they can quickly get quite complex.

This was also the first time I experienced what felt, to me at least, coding blind, with no Intellisense, auto-complete or even code formatting ( I know about Prettier, but due to complex compatibly issues that I couldn’t quite figure out the cause for, I couldn’t use it without runtime errors ) to guide and aid me, and so the first few days were quite rough.

This first version of my site is also quite basic, with minimal animations and nearly no logic, as I am new to all of the three languages my site is written in.

Especially with JS, its lack of type-safety, coupled with the fair amount of convoluted behavior and esoteric gotchas it is known for all slowed me down quite a bit, and I missed some of these and more language features I was coming to realize I much preferred in a language; still, the transition back to it after such a long hiatus didn’t take long, and soon I was writing it at a decent pace once more.

Regardless, after the first few days of repeatedly and furiously bashing my head against it and more Stack Overflow combing than I’d care to admit err practicing with it, I had come to appreciate it for its differences, and while I missed the things I had come to rely on with Dart, I had found most of their counterparts, or developed workarounds, slowly progressing towards the logic I required from my site.

As for HTML and CSS, they were pretty straightforward, but deceptively deep in terms of nuances and what you could do with them, but, in my opinion, quite lenient in terms of what code was acceptable, even more so in terms of what wasn’t a runtime error altogether.

I realize this sentiment was accentuated by my minimal experience, that too with only a few programming languages, which resulted in me drawing comparisons to it regardless of how much I tried not to, and disregarding parts that didn’t match with its style, but still, did there really need to be that much leniency ?

Funnily enough, through my search for more strict ( and hence, in my opinion, safer, and more maintainable ) ways to write HTML, CSS and JS, I stumbled upon Rust, what I’ve heard called a very type safe, strict language that is accompanied by an even stricter compiler that allows very few if any errors through.

It also happens to be low level enough to write kernels in, with an open source project out there making a whole entire operating system with it.

I don’t currently have any projects in the pipeline that could really benefit from its speed, or its general area of expertise (its a systems programming language) , but its been rated Stack Overflow’s most loved language several times in a row, and it just happens to also encourage the style of code that I most love writing, so I’ll probably find a way to sneak it in somewhere.

Regardless, after about about a week of messing around with these 3 languages, I had gotten a grasp on the very basics, and most importantly, could start to accurately predict what the code I had written would end up actually producing on the screen, which was a key milestone.

I had some basic animations and most of the (minimal) logic needed ready to go by this point, and all that was left was to configure the hosting, and build it up and yeet pardon me, launch it onto the internet.

The End

Hugo has, as I correctly guessed, been an absolute joy to work with, HTML, CSS and JS a bit less so, but the plethora of online tutorials out there (as there always are) proved once more to be especially invaluable, especially Mike Dane’s Getting Started With Hugo series on YouTube, which helped me out greatly with setting up and configuring the CMS, and a whole army’s worth of channels which had videos for everything from hour long overviews of the trio of languages to 5 minute bite-sized videos showing how to make the near exact feature I wanted in my website.

While there are many cons with it, such widespread support is one of the most powerful reasons why older languages and developer tools are still so widely used.

As for Forestry, it was also something I discovered by chance, and wasn’t quite sure I would end up using, but after checking it out some more, I decided to use it too, to reduce the slight inconvenience of having to involve a CLI (Command Line Interface) whenever I wanted to make another post.

That and it was clearly very elegantly and thoughtfully crafted, so how could I resist ?

Perpetual Improvement

I’m not done with the website yet, nowhere near it actually. I plan to add many more animations, provide proper responsiveness for smaller devices, actually have good-looking typography, add a host of other features, and finally, optimize as much of all of this as I can.

My first few projects taught me the importance of having a plan before starting, and to have a relative idea of where and how all the pieces fit together at all times.

I’ve already roughly sketched out the path I’m going to take, with there most likely being 4 - 5 versions of this site before I’m done with mostly everything I want this site to be capable of.

The Fear

My other projects until now, most still in various stages of development as of writing this, have all been mostly offline, and I’ve avoided networking or web code to the best of my ability, frightened by the complexity and intricacies it no doubt housed (read: Red lines of fatal errors I would have no idea where to even begin to solve), but it was something new to try, a previously unexplored part of the world of the internet for me, and while I knew it would not be easy, and most definitely frustrating at times, , if coding for the past so many years has taught me anything, its that we should not be afraid to jump into the unknown, the unexplored, or the possibly very frustrating, not regardless, but despite of the problems and frustration we know we will face.

Now, with a little more experience under my belt, and having clearly made it to the other side of this project, I understand how it may seem like I’m telling you to jump of a cliff based on a promise that its not actually as high as it looks, but I cannot reiterate the importance of learning and exploring new things, of jumping off the proverbial cliff, of not being afraid to fail, but rather embracing it as a part of the learning process.

The Courage

It is our instinct as humans to be afraid of that which we don’t know, and to get attached to what we do know, what we no doubt have spent huge amounts of time and effort into learning, but in doing so we often forget that there is a world out there, waiting for us, a world full of possibilities, endless possibilities, each one having the power to change the course of our lives forever, and each one but a grasp away, if only we have the courage, and the trust in ourselves, to jump.