New Site

February 21, 2022 | 11:37 am


I’m guessing that nobody noticed it or cared; but we transferred over our personal site from Github Pages to Neocities.

What motivated the switch over was the fact that we got inspired to start a new project; making a static site generator.

It seemed like an easy and reasonable project. Some simple file editing, some folder management, and I knew enough HTML and CSS to make a good JavaScript-free site.

The problem is, I am a dog with ADHD and minimal programming skills.


The Static Site Generator

What we learned

So a project that was started in November didn’t get seriously worked on until December. Then took until February to be completed.

Looking at my git commits, consistent work didn’t start until halfway through January. So if I was to put a timeline into a “real work” sense, there was about a month of real work, split up by periods of inactivity.

Why did we have breaks?

  1. We have a terrible time working at home. Our original intention was to work on this during our Christmas break. Though in the end we were too unmotivated to do any work on this project; and spent our week at home sleeping, playing video games, and watching YouTube videos.
  2. Sometimes the project got too big in our head, and our next step was unclear. Which with our ADHD, meant that it was easier to get distracted than solve the next step.

That second part is the reason is part of why we wanted to work on a project like this, to help learn what a small-sized project entailed and how to navigate and organize the process.

What helped at first was utilizing Test Driven Design. It helped me think about the next step, what was required, and how to achieve that goal.

However, once it got to dealing with folders and dealing with complex (read; poorly designed) data structures and relationships, we ended up dropping it and barely using TDD.

To be honest, with better planning and better designing we probably could and should have used TDD longer. But as relative beginners we are giving ourselves a break on that front. For our next project, we’ll read up on TDD and integration tests (since we mostly relied on unit tests, and wasn’t aware of integration tests before starting).

Another thing we relied on was Object Oriented programming, and trying to use Rust in an OO way towards the end to deal with certain design issues. But in the end we think it may have hurt us, and made the design a bit more obtuse and convoluted than it needed to be. I think we’ll look more into functional programming and rely on it more to solve similar issues.

Getting it done

Part of what we wanted to achieve in the end was a Hugo-esque site generator that we crafted ourselves. It wouldn’t be as fully featured as Hugo, but that wasn’t the goal. The goal was to make something as minimal as we needed, and could theoretically be used by other people.

This won’t ever quite be the same as a site made with Jekyll or Hugo, and probably shouldn’t be used in a serious capacity. It’s goal is to host the same kinda site you would get in the late 90’s, just looking a lot nicer.

Part of our goal was to add some quality of life features. Open Graph support, automatic image processing, and easy embedding of YouTube videos.

We achieved one and a half of those goals.

Open Graph

For Open Graph, we were hoping to automatically generate preview images of articles. However, once we realized what that would entail (basically creating an HTML+CSS renderer that would basically work identical to chromium, then creating a screenshot of that renderer); we decided to just have a generic image. We may go back to making an automated image based on Site + Article Titles, but for now we’ll just do a screenshot of the background of this page.

Automatic Image Processing

Automatic image processing seemed more possible, however we couldn’t wrap our heads around the Rust Image library. Our specific goal was to allow for it to resize, and automatically dither images. Which is something we wanted to explore since we read Why Your Website Should Use Dithered Images. We did read the article responding saying why your website should not use dithered images; but decided that our particular use case and intentions fit the use for dithered images (i.e. we can still get the benefit of smaller images, and have a cool retro aesthetic).

However, one of the things we decided was to have dithered images use a small palette. The five colour palette that we used for the site.

I’m sure we could have figured it out, but for the most part the documentation did not seem to let you set a particular palette for dithering images. Nor an easy way to dither images as well.

We almost thought about using another Rust crate we found called Dither but with some testing, we were not satisfied with the results that it produced. Had some glitchy results and blotches of dark where it should have been light coloured; which was not produced in other dithering methods we tried.

[Editing Note: As we were finding a link for Dither, we found a crate called rscolorq that seems to do exactly what we wanted. So we may introduce this functionality to md_puppy in the future.]

In the end we gave up and used Dither Me This to produce the images we wanted for testing and creating the background GIF. As a side note; DMT doesn’t work with animated GIFs, so we split a GIF we liked into frames, processed the frames, and then stitched them back into an animated GIF. Which ended up being a quarter the size of the original GIF.

Embedding YouTube Videos

This was pretty easy, just find the YouTube iframe and add a placeholder for the video ID. We were inspired by Hugo’s YouTube embedding, so just used {​{ youtube <video id> }​} as the syntax to embed a video in a page. Then used CSS to make it responsive.

CSS

CSS Took about half a week to figure out. We haven’t done web design in a couple years, and I’m sure the CSS we set up could be done way better in modern web development standards. But we gave ourselves a pass since, well, it’s Neocities; it’s meant to be amateurish and out of date as part of the charm. But still, we worked hard to dig up the cobwebs of our memory to produce what we did.

We still needed to look up examples of reactive design, and copied a CRT effect from this blog post. But in the end we’re proud of how well we managed to do this without practicing CSS in years.

General Take Aways

Projects fun, and we learned how to mentally think about projects and cut down on features as needed.

The Future

Hopefully do a proper README and do better arguement parsing for the command line input. Likewise we want to do automated image editing, especially if rscolorg works as well as we hope. Maybe an automated Open Graph preview image, though might just be some text on a background rather than a preview of the web page.