A Fresh Coat of Paint

A couple of days ago I posted the first update to my weblog in a year and some change. The reason is that I was mostly busy with work and projects. I actually wrote several drafts for this website, but nothing ended up being published. Things kept changing, and I also wasn’t feeling the website anymore. The scripts I wrote to update the website years ago were stretching their usefulness, and I felt like I needed to write a set of tools for updating the thing before I actually published anything. Client work also pushed things back, but after a long time of saying I’ll do it and not I finally just did.

Back to Basics

I wasn’t ever truly happy with what I made last time. The overwhelming blueness of the design wasn’t a good idea, and I spent way too much time with JavaScript making unnecessary things happen to the page. I didn’t overengineer the JavaScript like we see a lot of these days on the Web, but superficial things were done simply because I could. I wanted to simplify everything and make the content stand out more, especially if it contained color. Often the best design comes out of limitations. So, I set myself some limitations before designing the website’s layout:

1. The only two colors which may be used on most things are the page’s color and a text color.
2. A tertiary color can be used for accents but only very sparingly.
3. No shades or tints can be used for any of the colors.

These limitations forced me to use typography to create “color”. I could, for instance, use a lighter weight to make text darker or lighter in appearance without modifying its color. This is how typography should be used anyway. This led me to deciding to not use my font, Ook, anymore. Ook only comes in regular, bold, and italic variants. While it contains a lot of special characters it doesn’t come in a lot of variants. Since my restrictions demanded a font with a lot of weights I must retire it. When I first started creating it almost a decade ago there were no free fonts that had advanced typography features with ligatures, small caps, old-style, proportional, and lining numerals, subscripts and superscripts, etc. Nobody but typography nerds even considered it important nor possible, but many web browsers supported them. I had to create my own if I wanted them, so I did. The font was experimental, and it wasn’t well-designed. I even said so when writing about it initially. It was my first attempt ever at a font, and I even changed it a lot while designing it. Today there are a lot of fonts that do support advanced typographic features, including the one I chose for the body copy of this website — Noto Sans.

Noto Sans was designed at Adobe and commissioned by Google to support most languages. Its eventual goal is to support them all, and that is where its name comes from. Sometimes when there is no font installed on a system to support a particular character a replacement symbol is drawn there instead which is called tofu. Noto is short for no tofu. I have been a fan of the font since first seeing it shortly after I finished my own, and since it has matured over the years a lot of errors in the font and missing features have been added. I am sad I won’t be using a font of my own creation anymore, but it’s past time to retire it. The best part about Noto is that it is truly open source, being licensed under the SIL Open Font License.

Most websites by designers for themselves these days tend to be pretentious, ostentatiously showing off things at the expense of user experience. Just visit almost any website featured on Awwwards where the name of the game is bombard the viewer with flashy interactive special effects instead of providing them with information in a easy-to-understand manner. Forget making anything on the page accessible to those with disabilities. I won’t win any awards with my design here of course. When I write a blog post about my newest work I want the work to be what the eye is drawn to, not the website’s user interface. If that means this website is “boring” then so be it.

Under the Hood

This website makes liberal use of CSS grid layout. My last redesign used it, but only sparingly and with extensive fallbacks because most browsers that supported it then were quite buggy with it, especially Firefox. I don’t have any sort of fallback for grid on this. Without support for CSS grid the website would simply fall back to traditional flow content which is quite acceptable in my opinion. It keeps the CSS itself cleaner and easier to manage, too. I have also tried to make my website friendly to printers with print styles and also with people who prefer dark themes. This website (and its favicon in supporting browsers) will change when dark mode is turned on.

So, with that said of course there’s no JavaScript running on the page to make crazy shit fly at you or pictures to materialize and drop from your mouse pointer. There’s not much running at all, even. I don’t even have analytics. I’m pleased if people read my blog, but I’m not interested in tracking anyone. There’s far too much of that going on around the Web. That’s not to say there aren’t any interesting JavaScript things on the website. I just leave it for where it is necessary. For example, when I wrote Color Modes I experimented with very basic Web​GL to show a RGB cube and HSB cone along with an interactive image diff, allowing the user to slide a bar across an image to reveal a secondary image to show differences between the two. These are still present in the original post, but they have been re-implemented using Web Components and delivered using JavaScript modules. They work like this:

<script type="module" src="/scripts/js/elements/RGBCube.js"></script>
...
<rgb-cube>
 <div class="notice">
  <p>Sorry, your browser appears to be incapable of viewing this 3D content properly. There is a <a href="https://www.youtube.com/watch?v=mI51DTNh11E" title="RGB Cube">YouTube video</a> available of the content if you are interested.</p>
 </div>
</rgb-cube>

Only recent browsers can load JavaScript modules so it works well for graceful degradation as old browsers won’t even load anything at all; they haven’t an idea what a module type is. Web components are incredibly flexible. With that one module I can put many RGB cubes on this page (and possibly crash your browser in the process because of all that Web​GL). All I need to do to make one appear after including the module is drop a rgb-cube element anywhere in the document; the stuff inside is just fallback content, intended to be shown if the JavaScript didn’t fire or it failed. This didn’t come out of nowhere. I’ve been experimenting with Web components for the past couple of years in an attempt to create a Web interface for The Arsse instead of using something like React. I should probably get on that because if I don’t Jeff will likely want to throttle me; actually, now that I think about that he probably wants to do that to me anyway.

I expect to keep this design for a while. There are some fixes I want to make to things I’ve noticed since going live with it. I also would like to write more, especially about what I’ve been up to lately. I know I’ve promised it before and didn’t deliver. I apologize for that. I’ll definitely try especially since I’ve made it ridiculously easy for me to do so.