hello-world.txt

▶
Article

Hello World!

It’s a bit ironic, I’ve been developing websites and web applications for 20 years but I’ve never really published a website for myself. Fate would have it that I recently got the opportunity to take the foot off the gas and take the time to correct this missing piece in my web development career. I’ve been accumulating so much knowledge on the myriad build systems, frameworks and programming patterns that I feel it’s my time to pay that knowledge forward to help others in the way I have been helped by all the blogs and YouTubers that dedicate their (often) free time.

My goal for the year is to publish a monthly how-to or code snippet that contributes to the communal knowledge pool in some small way.

A Bit About This Site

I decided on a few limitations when designing and developing this site after being inspired by the current 1-bit renaissance in indie gaming:

  1. Only 1-bit colour schemes allowed,
  2. Minimal external images (icons excluded),
  3. Add the ability for visitors to set themes without creating new image assets,
  4. Attempt to recreate classic operating system designs while still working as a multipage static website and,
  5. Keep the site small and fast.

These rules don’t feel draconian but also give me some parameters to work in so I won’t stray and build out prototype after prototype like I usually do when I start making something for myself.

The Results

So far I feel like I’ve succeeded in keeping the scope of the site small while exploring 1-bit interfaces in the browser (I’ve recreated operating chrome with HTML and CSS before). Here’s how I achieved some of the look and feel:

1-bit colour scheme

This one was pretty easy, I just have global --theme-primary and --theme-secondary css variables

Minimal images

The background texture images are small, hand-written SVG images that I use as CSS masks (3 SVGS = 585 bytes). For example the dark background SVG is just 6 short lines, which could easily be minified even smaller:

<svg width="4" height="4" xmlns="http://www.w3.org/2000/svg">
 <g>
   <rect fill="#fff" x="0" y="0" width="2" height="2" />
   <rect fill="#fff" x="2" y="2" width="2" height="2" />
 </g>
</svg>

Which CSS can use like so (the SVGs could also be inlined as base64 data):

.shaded {
  --depth-image: url("/images/bg-dark.svg");
  --mask-position: 0 0;
  background-color: var(--theme-primary);
	mask-image: var(--depth-image);
	mask-position: var(--mask-position);
	-webkit-mask-image: var(--depth-image);
	-webkit-mask-position: var(--mask-position);
}

Now when ever I change the --theme-primary variable while changing a theme, no graphics need to be swapped out to change the colour scheme.

The 1-bit bevel look of the toolbars at the top of the window are just a 2 pixel high pseudo element with 4 box shadows, a neat trick I learned from Kevin Powell.

box-shadow:
  0 4px 0 var(--theme-primary),
  0 8px 0 var(--theme-primary),
  0 12px 0 var(--theme-primary);

Themeable UI

This one was fun, I used a <dialog> element which contains a simple form that lets visitors select a theme and mode radio. It was my first time using the <dialog> element and I really like the potential there. Selections are saved to localStorage.

Recreating classic Atari-8 and Macintosh operating systems

Pretty subjective, but I think the floating windows makes the site a little interesting to use. All the JavaScript is implemented as Web Components which contain the dragging and position caching logic. For my photo on the Info page I dithered a photo, deleted the values then inverted it in dark mode so the theme would still apply without having content stick out in the 1-bit style. Being a frontend developer, I ended up skipping the design phase and laid everything out in browser.

Keep the site small and fast

I used Hugo, which is a static site generator written in Go, and I’m pretty happy with how it came together. I didn’t use any 3rd party CSS or JavaScript libraries or frameworks, which resulted in 19kb of CSS and 4kb of JavaScript (minified). Though not the be all/end all, the site easily scores 100% for performance on a Lighthouse test.

Conclusion

Even though this was all done in the name of self-promotion, it was really fun and having some rigid rules, as well as the opportunity to make technical and creative decisions led to a result I’m actually happy with. Hope you enjoy it as well.

709 Words

Published