Her blade found its mark in the dark

August 1st, 2018
Posted by typhoon

[Affinity Designer editing an SVG]

A few years ago, I had to get a laptop, which I hadn't had a need for since the days of my beloved 2005 PowerBook G4. I got a 2015 MacBook Pro, and it immediately became clear to me that web sites that are optimized for such a display look fantastic and web sites that aren't look like trash. Then I got a 5K iMac when it became further clear to me that everything looks like trash on a low-res display after using a high-res one long enough. I also realized that some of my own web sites were looking awful and that I should probably update the ones that are still alive(-ish) and online, including this one.

The naive approach to "upscaling" a web site is to go back to the original PSDs (or whatever) and double their dimensions. Then the vectorized parts of them (text and shapes) are redrawn at the higher resolution. Raster components may have to be redone (or left alone). Many images used for web sites are downscaled from larger images to begin with, so this alone can get you reasonably far. It's a bit clunky in that you generally have to keep both 1x and 2x versions of each image (to reduce download sizes for clients whose monitors can't display the extra resolution and also to avoid unpredictable aliasing inherent in doing the downscaling on the user's end). Furthermore, it doesn't scale for clients with 3x displays (as many phones have, including the iPhone X) or users who zoom in. But it works perfectly in the majority of cases and looks a lot better than nothing in all the others.

Fortunately, CSS and web dev in general has advanced such that a number of common things that previously required using images, such as gradients and embedded fonts, can be done prescriptively instead (and thus rendered by the user agent at the highest possible resolution). The final piece of the puzzle is to recreate as many images as practical as vector images, so that they too can be rendered by the user agent at whatever resolution it thinks is best. In this case, SVGs are the web's standard vector image format; they previously had poor support and required using object tags instead of img tags, couldn't be used as backgrounds, required third-party plug-ins to work at all in most browsers, etc. But now they're pretty great and can be used the same as any other image format.

So this is all a long-winded way of saying that, over the past few years, in addition to all of the pointless stuff previously mentioned, I've done all these things for this site. And joke's on me, because I made thirteen different themes for this site. While I initially only vectorized the default theme, "New Moon," eventually the annoyance of having all the others looking blurry and pathetic got to me and, over time, I got to most of them too. So the progress report is:

All of the file icons in the /files/ directory are also SVGs (about a hundred of them!), though they're based on an existing set. I originally converted them for a different, unrelated project, but I also made custom icons for Starcraft and Warcraft III maps and replays specifically for this site.

I also updated the Love and War site some time ago since it's still being updated, but I'm going to leave all my other sites on this domain alone.

No more water but fire next time

July 31st, 2018
Posted by typhoon

Years ago, Seawolf asked me to make a web site for WASTE. I made one in mid-2001 that I never finished—I think I tried to get too fancy with some parts and it wasn't really working—and forgot about it for a good while until I gave it another shot in early 2004. This version was basically completed, but we never did anything with it for whatever reason.

A couple of years ago, I finished a few odds and ends on it (mainly by copying stuff off the wiki) and uploaded it to the site:

[WASTE site, 2004 design]

The 2001 version is available as an alternate style sheet (or an adaptation of it is, anyway, since I had to redo it to work with the 2004 HTML):

[WASTE site, 2001 design]

I'm pretty sure that Firefox is the only browser that can switch between alternate style sheets without an extension (it's the "Page Style" submenu under "View"), to my perpetual annoyance since I do alternate styles for sites all the time. The Love and War site has a "dusk" theme, for instance, that probably no one has ever noticed (and the April Fools' Microsoft theme).

I'm still fond of the 2004 design, which is why I wanted to finish it (even though we're many years out from it mattering). The original version had a cute animated heading for the "Headquarters" page that I ditched because I didn't want to duplicate the effect for all the other sections. The 2001 design feels amateurish and incomplete, but I like it as an alternate theme because it's so different from the main theme.

Similarly, I mocked up a redesign for Campaign Creations some years ago, in 2006:

[Campaign Creations redesign]

I'm pretty sure I made it for a design contest they held, but it's possible I just did it because I thought their site was hideously ugly and wanted to see if I could do better (I've got a bunch of these sorts of designs laying around). At any rate, I never showed it to anybody or did anything with it. I guess there isn't anything about it that particularly evokes custom RTS campaigns, but I thought it was clean and always liked it.

Around that time, I adapted it for use for another project called Slug that ultimately never went anywhere. In 2014, I dug it up again and made it into an alternate theme for this site (themes are switchable in Preferences), also called "Slug," for the sake of finally getting it out somewhere:

[Antioch Forever, Slug design]

I liked that it was (at the time) the only theme for the site that used plain text for the menu instead of icons. I'm also partial to designs with weird color schemes. I still would've preferred to have put the design to use somewhere else, but alas.

Finally, a couple of weeks ago, I was going through some old stuff (as I apparently do every couple of years) and found an unfinished design for Antioch Forever. I started this one in April 2007, then decided I wasn't feeling it and made the "New Moon" design instead a couple of months later (which has been the default theme since then). I think I felt it was too similar to the "Red Moon" theme (the default theme at the time) and wanted something lighter instead. I finished it and called it "Century," since it uses Century Gothic prominently:

[Antioch Forever, Century design]

Century Gothic is a knock-off of Futura (similar to the relationship between Arial and Helvetica), which is the font used by "New Moon" and Antioch Remastered/Thoughts in Chaos.

Overall, I'm satisfied with the way it came out. Like "Slug," it uses plain text for the menu bar. It's a more pleasing dark design than "Red Moon" on the whole. "New Moon" is probably the best design for the site, though, so I think I made the right decision to abandon this one.

Anyway, none of this stuff is brilliant, and I fully understand that there's no real point in doing any of this work that nobody is ever going to see. But they're fun to make, and I get a sense of satisfaction out of finishing old things (and I've accumulated quite a collection of unfinished web designs over the years).