agckb.xyz

Over the years and especially since the begining of the COVID pandemic, I’ve remade my personal website over and over again—roughly 80 times in fact. Each time I’d be filled with passion designing the ultimate website only to become overwhelmed at how I’d fucked my website up so badly that the only reasonable thing to do would be to start all over again. Don’t get why I’m so scared of modifying what already exists since that what most software development is. As I’m about to start yet another website redesign and I’d like to look back at the work I’ve done so far, I’ve decided to look through those 80-some sites in my old website code folder as git bundles and reflect on them. To start things off, I’ll look into AGCKB.xyz, which was my attempt to bring back the title of my first blog.

The first blog I started was called the Algorithmic Cookbook shortened to AGCKB. I eventually switched to Farai’s Codelab, but at some point in 2020 I decided to bring the AGCKB brand back. The first attempt at this looks unfinished but it had potential, but for some reason it has no CSS besides constraining images and handling overflowing code blocks in the HTML page.

It had a search bar, although it just went to Google and appended site:agckb.xyz to the query. Adding the search form used the following code (if you copy this, just make sure to put your site URL instead):

<form action="https://www.google.com/search" method="get" role="search" class="search-form">
    <label for="search-form__input" class="visually-hidden">Search Term</label>
    <input type="text" name="q" id="search-form__input" class="search-form__input" autocomplete="off">
    <input type="text" name="q" value="site:http://localhost:1313/" hidden>
    <button class="search-form__button">Search Site on Google</button>
</form>

You’ll notice that there’s two text inputs with name attribute q. This is so that I can hide the site Google can search instead of sticking it in one input. This is valid HTML¹ and Google manages to mash them together unlike DuckDuckGo.

One interesting thing about the lack of CSS is that it reveals some of my attempts at accessibility, particularly through the reliance on visually hidden text via CSS. I read that it’s a robust way to convey hidden labels to screen readers as opposed to aria-* attributes, but it doesn’t seem like a big issue these days.

It’s in a few places, like the header navigation marking the current page and the like to social site’s at the bottom which say Farai's (Twitter|GitHub|Patreon). For some reason, the links to the accompanying YouTube videos on the post listings don’t attempt to refer to the title, opting just to say Availible on YouTube without being specific as to what title it meant.

I also added a colophon, but it’s unclear as to why I needed it if it’s just saying I made the site in Hugo and there’s a funny copyright footer.

There’s a projects listing, but it’s quite boring without any screenshots. The ideas was to include posts referencing the project as well as links to it and screenshots but I didn’t do that here.

Last thing is the part to Find Your Way The Cookbook (sic, forgot the “about” 🤦🏾‍♂️) with links to the various site pages and sections as well as a brief description. I think I took this from Sara Soueidan’s old website since I thought it was cool.

Outside the code, it loks like I used GitLab Pages given the .gitlab-ci.yml file I included. I don’t know why I went with it at the time, especially since GitHub Actions would let me build a Hugo site as well as the fact that it had had HTTPs support for a while by the time I made this site. Regardless of why, it looks much simpler than the CI script I use in GitHub Actions.

This had potential, but I didn’t do much with it since I tried to make this site again. Also, I didn’t include an RSS feed for some reason.

Wait, this site looked somewhat better, no?

It probably did. I thought I had two AGCKB sites saved but I only had one. with the other one being a failed attempt. To figure out what I was trying to do, I had to look for agckb.xyz in the Wayback Machine and surely enough, it had way more style than this.

Since this post is long enough already, I’ll write about those on the next post in this series.