HomeThe ClassicsFarai's Codelab

The Algorithmic Cookbook Has Been Re-Redesigned (And May Go Away Soon)

Published:

After burning my site down and rebuilding it many times over, I’m pleased to announce I’ve re-redesigned the Algorithmic Cookbook. At the time of publishing this, the site isn’t much to look at. That’s because I’ve decided to pursue “continuous improvement”, opting to make small changes over time rather than front load it.

Also, The Algorithmic Cookbook as a blog may not be around much longer, saving the name for some future projects. I don’t think I’ll stop writing, however.

What’s The Hold Up

There are many things I want, but I’m not sure how I’ll get them.

Design

I really don’t have the eye of design. Sure the resources are out there, but they just don’t click.

As I was making the colors for my soon-to-be-re-re-redesigned personal website, I wanted to work on this slick deep blue. Thing is, I really wanted it to make it as accessible as possible, by following contrast ratios. I heard the suggestion that contrast should be distringuishable in monochrome, which I interpreted to mean switch to HSL and only play with the lightness slider.

Fine, I shift it to the other side and I have a light blue background against dark blue text. Problem now is the links and their respective states just blend in. That’s where the problems began. Well contrasted links wouldn’t pass contrast ratio tests and the ones which did blended in with the rest of the text. Making things worse was that I was losing track of all the color combinations I used.

The way I’ve struggled with design is pretty much how I’m struggling to figure out design. What font sizes should I use? Modular scale? How do I layout this website out? Flex? Grid?

The only thing I have some certainty of is that I want to use the font Recursive, a variable font that can morph between sans-serif and monospace as well as serious to silly. While the 250KB variable font is much smaller than its constituent files, it’s far too big compared to everything else which is typically under 50KB before uncompressed. Surely there’s a way to make it smaller…

Favicons

It’s not much of a hold up thanks to Real Favicon Generator, but the issue is making the actual logo. I suck at design so the first iteration of the Algorithmic Cookbook’s logo sucks. It was a three legged pot with the letters ‘AGCKB’, but I can’t find it anymore

Actually, my design sucks big time in general as I’ve just covered.

SEO

You know how you sometimes get a little card whenever you post something onto social media? To do that, you need to add some markup to your website’s <head>, like Twitter Cards or Facebook’s Open Graph.

There are so many little things that need to be considered like what should be the description, what kind of page it is, what images to use, how to chose the date in which something was last posted and so on. Don’t get me started on open graph.

For now, I’ll just add a meta description so it shows up on Google. Just doing this is somehow enough to get 100’s on Lighthouse.

RSS Feeds

There’s a lot I want out of RSS feed. Actually, all I want are full RSS feeds, available in RSS, JSONFeed and Atom; as well as separate RSS feeds for each section.

That’s 3 thing, but there are so many steps and considerations for each thing. The most annoying thing is feed interoperability. There are plenty of RSS feeds out there, each with their own quirks. I wish I had a solid way of figuring out what I should do here.

I’ve tried adressing RSS interoperability but it’s such a fragile mess that I won’t have a full RSS feed for a while.

Cool URIs

The thing I’m struggling with the most is information architecture—simply put, I don’t know how to structure the site. I’ve been hung up on the rule that cool URIs don’t change. Trying to front load the website structure has left me stumped. It’s so hard that I’m opting to be uncool and 301 URLs to wherever I end up. Browsing the web for confirmation bias clarification on the rule, I came across [a post by Remy Sharp] (https://remysharp.com/2016/12/22/cool-uris-dont-change) who has a good interpretation of this rule. Essentially, the URI itself must not change, but you can’t make too many guarantees of the actual content under it since a lot of pieces are needed to keep it running. It’ll probably be better to try and ensure that it returns a sub 400ish error and regularly archived.

I’ve also found another post on Chris Wiki on the Cool URL Problem who notes that structuring information and getting it right the first time is hard and suggests giving your site proper navigation and search instead.

Making The Hugo Site Idiomatic

By idiomatic, I mean that I want to follow the conventions of a Hugo project. It’s hard to explain but it’s really messy. For instance, there are so many things that could be abstracted away, but I’ve insisted on copy-pasting it many times over instead of leveraging Hugo’s cascade.

Ah search. While I managed to do this on an older site, it wasn’t optimal since it did everything on the front end. This time around, I want to add search properly. I’m even planning to add a search backend to do this.

Until I figure out how, I’ll stick to a form which points to Google Search.

The Content

What’s the point of all this if the writing sucks. Even with all the revisions I made to my content, the writing still sucks. Maybe it has to do with me not having a systemic way of making content or it could be that I’m terrible at getting my points across. No wonder my blog (and career) haven’t gone anywhere.

Along with improving my writing, I also hope to bring my old content onto this site.

Image Processing

The heaviest assets on my site are images. I’m trying to figure out a way in which I can make images smaller without trashing image quality. I’m trying to figure out how I can use various image types (especially new ones like AVIF and WebP) and multiple image sizes. For the added challenge, I might support dark mode images as well.

Conclusion

There are many other things I’m struggling with in regards to getting this site back to life, but I’m hoping that by making continuous improvements, future me will be proud of seeing how the site comes out. I also hope to share how I solved most of these challenges.

I brought the blog back hoping to separate my personal stuff from my technical stuff. Honestly, I might shelve The Algorithmic Cookbook again soon, opting to use The Algorithmic Cookbook for a future book or something that’s actually about Computer Science. I dont plan to stop blogging however. Sure, I’ll probably take long awkward breaks, but I’ll drift back into writing.