Turning the sod

2021-02-02 — Back

It seems appropriate that the first thing I talk about on this website should be the website itself. Though it’s not very big, it’s actually been a few months in the making, with a lot of back-and-forth before getting to this point.

How did we get here?

I’ve messed around with HTML before, years ago when I didn’t really understand how a website worked. I never really expected anything to come from it and quickly abandoned it. Where this website came about is when I was doing some work for the Informal Forum of International Student Organisations.

At the time, which was back in September, I was trying to get a website set up for them before I finished my term on the Management Team. I figured that they really just needed something simple but professional to serve as a web presence, that was better than what they had before. I took it as an opportunity to improve my front-end skills and actually learn some HTML and CSS, so I built a site in that vein.

After getting most of the way through the design - I can already identify a lot of tweaks I’d make to what’s there! - that project was put on hold, for the reason that while I was comfortable diving into website development every time we needed to change the page, I was not staying on the team and those who would come after probably would not. We ended up scrapping that in favour of a CMS-backed website, which was fine. But I decided to move on, to a more ambitious project! You’re looking at it!

The design

The original design for the website was based explicitly on the above, and in some way it is still the foundation for what I have now. It’s like how layers of sediment are deposited in the earth and become rock. Broadly, the vision for the site was explicitly to create a simple, static webpage, without relying on a CMS or a generator. Doing either of those wouldn’t allow me to learn and write the bare HTML myself, and that was the point!

The header-content-footer structure of the HTML was straightforward and obvious. Most of my time, by far, was spent on tweaking the CSS. I’m a visually-oriented person, I enjoy design and being creative, and it turns out that CSS offers a very powerful way for me to express myself. It’s easy to describe layout and construct images, compared to (say) creating vector images, or traditional art.

As it happens, it’s also very complex for all its power, and so fiddly and easy to get wrong. So a lot of time was spent going back and forth, figuring out how to get things to work just as I wanted via trial and error. Firefox’s dev tools were invaluable for prototyping, but I’ll get into that in the next section.

I was living in 2020 when doing this work, unfortunately, but on the plus side had access to all the modern CSS tools which didn’t exist back in 2012. CSS Grid and Flexbox, for example. I started out by arranging the website with grid, which is nice for large-scale placement, but I found flexbox nicer to arrange elements within other elements. I eventually ended up with a mix of both as appropriate. This formatted a header with my wordmark and navigation, the main content, and the footer with various links. I made full use of semantic HTML, which means using meaningful HTML elements like <header> and <article> to separate and format content - good for accessibility and machine-readability, but also better for me than staring at a list of opaque <div>s on each page.

Speaking of modern tools, I also had the ability to implement responsive design, and I wanted to make sure my website was usable on mobile while I was at building it. As it happens, this is very easy to do: with the addition of a just few @media rules to resize and re-position elements that get squished, a simple vertical website like mine will come out looking decent on its own. The change that made the biggest difference was to add

<meta name="viewport" content="width=device-width, initial-scale=1">

to the <head>, since apparently mobile devices often lie about their screen size for some reason.

I was also able to add a dark theme, something that many desktop and mobile applications are only doing now in 2020… This necessitated the introduction of JavaScript. I’m fairly proficient with Python, if only on a scripting basis and not at all as a computer scientist, but when I say I knew nothing about JS I mean I was starting totally from scratch. There was a lot more trial and error, and copying code from StackOverflow, involved in learning how JS worked. I think at the moment, I’m at the point where I can try to guess how syntax I haven’t seen before works, and I remember the most important parts of the DOM that I need to reference. I still only know the parts that I directly needed, though!

Regardless, I was able to get a dark theme working, even with a theme preference stored in cookies. And then in web storage, so I ended up being able to avoid cookies entirely. I was pretty proud of this, since I had also tried to make CSS theming work on the website I made back in ’12 (for a certain definition of “tried” - I stole a style changer script and it didn’t work without any modification, so I gave up). Building on that I was able to make the photo gallery work by starting with an example script from w3schools and tweaking it to get it how I liked. So that was neat.

Overhaul

At this stage we had a relatively complete, if lacking in content, website. I was happy with it as it was, but I also knew there was more that I could do with a website. There was a lot of potential in design that I hadn’t thought about. And it was starting to feel a little cluttered, in the way that systems which one builds over time do, parts bolted onto other parts.

I spent some time looking around at personal websites made by others, seeking inspiration in design which I could then come back and apply. I didn’t want to just copy things - although I saw a lot of very nice layouts I would have loved to copy - but rather to build up a lot of ideas. Which I did! To call one out, I was particularly impressed by Nikola Knežević’s site layout¹, and I spent a bit of time writing an alternate stylesheet for my website based on that… It got to be very clunky, to test if nothing else.

A website for me, left side blue, right side content

Eventually I decided I had to do that other programmer thing and scrap the whole site, building it from scratch with new CSS. That’s always the most fun thing to do! Fortunately, I had at most ten pages at the time, so this was very feasible. I was able to get the new version together much faster than last time, since I sort of knew what I was doing, and the result is what you see before you. Ta-da!

The main changes are obviously the theming, where I softened the colours a bit by making them bluer, and in simplifying the header and footer. More focus is placed on the content, which is all the same as I had before. The projects page, which was empty up until recently, also acquired the colourful theming it has now. I’m very happy with how it’s all come out.

One other thing that bears mentioning is the wordmark. It’s constructed surprisingly simply, with a series of coloured drop-shadows on the text that collapse when hovered. The result is a bold visual design that I like a lot more than I expected to, and I ended up making it into a logo of sorts for the website (it’s also where the favicon comes from). It’s even vectorised!

This is also what I mean about CSS providing powerful tools for design that are easy to use; the wordmark is rendered solely based on the shape of the Sora typeface, the font-size, the drop-shadow specification and the animation. I don’t even know how or where else I would bring all of those things together to create the same thing.²

The process

In the process of actually developing, testing and deploying the website I used a few different tools, and learned a bit about what tools to use.

I did the actual writing of the files almost entirely in Notepad++, from start to finish - there’s not really a HTML IDE that I know of. It has tab-complete for most HTML elements and CSS rules, so it’s fine. For learning what rules and elements those were in the first place, the Mozilla Developer Network’s pages on web development were absolutely essential.³ I can’t possibly praise them highly enough. Every single HTML element, CSS property and JS function is documented there with all the potential parameters and multiple usage examples for each! They were great not just as a reference (I am, of course, nowhere near the stage where I have most properties memorised) but also to learn how to use the properties in the first place. And the site has extensive tutorials to teach you all about web development, too - I didn’t use these much, but some specific tutorials were really helpful, the ones on CSS Grid and Flexbox in particular.

I tested the website in my daily-driver browser, which is Firefox. Testing involved extensive use of the developer tools, mostly to tinker with CSS rules in real time, something that was invaluable to be able to do, and also using the console a bit to test JS. I used Microsoft Edge as a proxy for Chrome to test in that browser - I don’t have access to Safari so that’s basically all I need to do, all other browsers are based on one of those two engines 🙃 I was able to use devtools to test a mobile layout as well by simulation, but after I got as far as hosting the site on the web, it was nice to be able to see how it looked on my phone too.

At first, the website was tested offline by simply loading the .html files directly in my browser with file:/// links. This worked but it sort of messed up the links. Much better was when I learned that Python has a HTTP server library that you can run on localhost with one line. The advantage was to see how my website worked with the quirks of an actual webserver, like clean links and a 404 page.

In order to get the site online, GitHub was used as an intermediary - and for version control. I know (well enough) how to make a new repository locally, and after that it’s just repeated application of git add --all, git commit, git push origin main. Plus, at least once I was able to recover some lost content by looking at an old commit! It will continue to work fine just so long as I don’t ever make a git-related mistake.

The actual web hosting came a bit later. I deliberately decided not to use GitHub Pages, for the main reason that it requires the repository to be public. Fortunately, after a bit of searching I learned that Digital Ocean offers a hosting platform for web apps, where if the web app is a static site, they’ll host it for free. Very handy! If your code is stored in GitHub, you can link the repository to the project and whenever you make a new commit the site will automatically be redeployed. It’s unlikely that this site will stay there forever - they only give you three free static sites, for one thing, and I need one for each subdomain and for the landing page - but for now it’s extremely useful.

Soupault

Many other websites are, as I alluded to above, not static. A dynamic website is one that is generated on the fly, using some kind of server-side scripting. (I use client-side scripts, which are the .js files I load on pages to switch the theme and that.) A site that served by a CMS, like WordPress, counts for this - you write the text for the page, and the CMS turns it into the webpage. It’s fine, but not what I wanted to do with this site - as I said, the point was to write it myself, that’s the part I enjoy!

If you don’t want to use a CMS, or - like me - you don’t have full control over your hosting situation and can’t use one, you can always use a static site generator. This involves writing page templates, using some sort of template markup language that tells the generator where to insert your page content, and automatically applying CSS themes to the output. I didn’t choose this option because it felt like it would be awkward in learning the templating language, and that I wanted to go a bit more bare-metal with writing the files directly.

However, there is one big disadvantage to building a site without these tools. If you have to write each page individually and entirely, you have to work pretty hard to make sure the shared content is the same on each page. If I want to update the copyright year in the footer, I need to open every single page on my website to do that, and it’s easy to forget one.

So I was very happy to stumble upon Soupault while researching other websites. Soupault is a static site generator, but instead of processing templates written with some kind of templating language, it processes HTML files directly. It does the inserting-content bit by looking at HTML elements directly. For example, my template file for this website contains the header, footer, and everything in between, except the content inside the<main> tags. So I tell Soupault, when building my website, insert each page into the <main> tags in the template. Then for each page, I just write the HTML that would go inside those tags. It means I barely have to change my workflow at all, but I can use the advantages of a template file. It’s neat!

Soupault also provides various tools for processing and pre-processing pages as it builds the website. I use the processors (called widgets) to tweak various bits of the HTML that it’s easier to do afterwards. The pre-processing is important, because it’s used on this very page! What, you didn’t think I wrote this three-thousand word blog post in a HTML editor, did you? In fact, I write Markdown files,⁴ and then instruct Soupault to pass them to pandoc to be converted into HTML files. Pandoc converts almost any text file type to any other; it also requires a custom template file, but a brief one. I actually set that up before I started using Soupault to build my website, so it was very easy to integrate.

For some more custom tweaking, I had to write my own scripts. I used Python for that - conceivably I could have written my own widgets for Soupault or something else, but I already know Python. Those scripts are used to populate the main Thoughts index with each of the blog posts after they’ve been generated, to put a link to the latest one on the homepage, and add some classes here. Soupault can just call these scripts on the relevant pages with widgets. I will say, getting all the myriad widgets I ended up using to work right, and to select the correct pages, was a bit of a hassle and involved poring over the reference guide. I still think it’s worth it to get to use the templating feature, though.

In the end, I was able to write a simple batch file that I could use to

tell Soupault to build each subdomain of the site in turn
then tell git to stage, commit, and push each subdomain
resulting in the sites being automatically redeployed by my web host.

The content

So what is it that I’m deploying here? (I won’t do the “you’re looking at it” joke again)

To mention the landing page briefly, it hasn’t changed about at all since I first made it. I knew it had to have a section to click through for each family member with a subdomain, so I just made a bold three-colour layout with a picture and some text, and left it at that. I still like it. That also inspired the ellipsis icon used as the favicon and the back-link on each subdomain (here it’s in the footer).

As for my website, a five-link header was fixed from fairly on. Again, this was an inheritance from the original IFISO website design; I just adapted the links to what I needed. I had some sense that I wanted a nice number of links, more than just a contact page and a resume, so I settled on the five sections you see now: About, Projects, Thoughts, Photos, Links.

The about section is obviously an explainer of who I am. I kinda like talking about myself so it’s fairly extensive. It doubles as an informal resumé, too; lots of personal websites like this are built by people who want to advertise themselves and what they do, and I thought this would be a useful thing to have. It does also have my actual resumé on it. If anyone who wants to recruit me ever looks at it, maybe I’ll refine it a bit.

The projects section was also inspired by other, comparable personal websites; if I have a website, it seems silly not to use it to host the relevant things I have made or done. Right now that is just the website itself (how meta) but over time I may add older things, or more likely, make newer things. I had fun making it look nice so that each project can be self-contained and briefly described.

The thoughts section is… well it’s a blog. You’re looking at it. It also seemed silly not to have a place to put some writing, while I have a website. I hope that I’ll think of other things to write about, because the index page will look much nicer once it’s populated.

The photos section is a small gallery of pictures I’ve taken that I like. I enjoy capturing scenes that I see which look nice or visually interesting; I already show off some of that on my Instagram (hint, hint). But it seemed fun to highlight some of them here as well. I hope to add more images to that page, probably sooner than I add any projects.

The links page is also fairly self-explanatory, but it serves a more subtle purpose beyond providing ways to contact me. I can use it to gather all my online profiles and accounts in one place, so that this website can be a kind of authoritative source of information for and about me-on-the-internet. It actually wasn’t that long of a list.

Where are we?

So that’s it, this thing exists now!

I think it lives in a space sort of between professional websites made by techy people as presentation pieces (and for fun), and Web 1.0 webpages made by nerds as nostalgic art (and for fun). I don’t know if I captured the first part of either of those, but I did get the fun.

Hat-tip

Daniil Baturin, the developer of Soupault, helped me with a bug I found white writing this very post. I’m using an extra widget that he wrote while debugging to process these blog posts. If you didn’t already have reason enough to check out his work in Soupault, I hope this is convincing!

If you enjoyed my writing and you want to show your appreciation with cash, you can do that here with PayPal. Thank you!

Which I link to an archived version of, as he’s changed it a bit since. In fact, more than a few of the websites I’ve looked at have done that. Maybe I will too!↩︎
I suppose it does speak to how complex the machinery of web browsers is these days, though.↩︎
While I’m at it, CSS Tricks and Stack Overflow were much-used resources as well.↩︎
Using Typora, a very nice Markdown editor.↩︎