Versions

#Time modifiedTypeSummaryEditor
2 Tuesday, July 16th, 2019 at 12:36 AM none typhoon
1 Sunday, November 4th, 2018 at 9:09 PM none typhoon

Differences

Revision 1
by typhoon
Revision 2
by typhoon
==== Her blade found its mark in the dark ==== {{post:August 1st, 2018|typhoon}} <p class="float c"><a href="/files/members/typhoon/affinity.png"><img src="af/misc/resize.php?img=%2Ffiles%2Fmembers%2Ftyphoon%2Faffinity.png&size=800" width="800" height="500" alt="[Affinity Designer editing an SVG]"/></a></p> 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 bigger iPhones) 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 <code>object</code> tags instead of <code>img</code> 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 also updated this site to not look like garbage on high-res displays. 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: *"Blue, "Century," "Midnight," "New Moon," "Red Moon," and "Slug"--Completely vectorized. I only did "Red Moon" this week, which was the first theme to use [[phal]]'s icon set (which were the basis of the menu icons used by most of the other themes). *"Forever" and "Green"--All vectors or 2x raster images. The "Green" theme only uses raster images for the menu text (because of the mouseover blur effect), but "Forever" uses them for almost everything except the little squares under the main page headings. I also saved a higher-quality version of the background image for "Forever" since internet connections are a lot faster (went from about 30 KB to 150 KB, so it looks much cleaner now). *"Starcraft" and "Christmas 2003"--No attempt made since these two (as the site's two original themes) are basically deliberately lo-fi. *"Hanukkah," "Christmas 2005," and "Christmas 2007"--Mixed. I redid things like the title images and gradients but probably won't ever bother with the rest of the images since these themes are goofy and use a lot of holiday clip art and such. All of the file icons in the <a href="/files/">/files/</a> directory are also SVGs (about a hundred of them!), though they're based on [https://github.com/jcfieldsgmailcom/svg-file-icons 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. ==== No more water but fire next time ==== {{post:July 31st, 2018|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 <a href="community/waste/">uploaded it here</a>: <p class="float c"><a href="/files/members/typhoon/site-waste-bluegrid.png"><img src="af/misc/resize.php?img=/files/members/typhoon/site-waste-bluegrid.png&size=600" width="600" height="623" alt="[WASTE site, 2004 design]"/></a></p> 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): <p class="float c"><a href="/files/members/typhoon/site-waste-steel.png"><img src="af/misc/resize.php?img=/files/members/typhoon/site-waste-steel.png&size=600" width="600" height="812" alt="[WASTE site, 2001 design]"/></a></p> 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 <a href="/law/">Love and War site</a> 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 <a href="community/waste/layout/bluegrid/h2-headquarters.gif">cute animated heading</a> for the "Headquarters" page that I ditched because I didn't want to remake the effect for all the other sections (I used to make animated GIFs in ImageReady; I wouldn't know what to use these days). 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: <p class="float c"><img src="files/members/typhoon/site-cc.png" width="800" height="760" alt="[Campaign Creations redesign]"/></p> 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 few similarly motivated 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 (a music journal called Slug that I wrote for a while but never actually put online). In 2014, I dug it up again and made it into an alternate theme for this site (themes are switchable in <a href="wiki.pl?action=editprefs">Preferences</a>), also called "Slug," for the sake of finally getting it out somewhere: <p class="float c"><a href="/files/members/typhoon/site-af-slug.png"><img src="af/misc/resize.php?img=/files/members/typhoon/site-af-slug.png&size=600" width="600" height="792" alt="[Antioch Forever, Slug design]"/></a></p> 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. 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: <p class="float c"><a href="/files/members/typhoon/site-af-century.png"><img src="af/misc/resize.php?img=/files/members/typhoon/site-af-century.png&size=600" width="600" height="915" alt="[Antioch Forever, Century design]"/></a></p> 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, though I still like "New Moon" more overall. 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. ==== The patterns, they awaken me ==== {{post:December 31st, 2018|typhoon}} I made a [https://jcfields.gitlab.io/starcraft2-hotkey-editor/ Starcraft II Hotkey Editor] since the in-game one is sort of a disaster for co-op mode. The advantages of using this editor instead of the in-game one are: *Every unit and structure is organized by commander, instead of a weird jumbled mess of multiplayer, campaign, and co-op units and fairly arbitrary faction divisions. *Shows you all related units that share the same hotkey (so it will show you that, for instance, editing Raynor's vulture hotkey will also affect the hotkeys for Swann and Nova's hellbats). *Likewise, lets you edit hotkeys with unclear relationships without having to figure them out. For instance, Nova's ghost hotkey is linked to Raynor's firebat hotkey. Zagara's scourge and corruptor are mapped to the roach and swarm host respectively. Swann's hi-sec auto-tracking upgrade is linked to the neosteel frame hotkey, not the multiplayer hi-sec auto-tracking hotkey. These hotkeys are technically editable in the in-game editor, but only if you're aware of these weird relationships. *Includes hotkeys that are outright missing from the in-game editor, such as the "disable structure attack" hotkey for scourge and other suicide units, the rally point hotkey for Stukov's colonist compound, and Zeratul's build assimilator hotkey. The in-game editor also has a few minor mistakes, such as having an unused "Self Repair" button for the Thor instead of the actual "Rebuild" ability. Some of the tech lab/tech reactor abilities also aren't normally editable in the in-game editor (such as Swann's hellbat upgrades). *Since it also contains the multiplayer and campaign units, it can show you conflicts across all three modes (in case editing a hotkey for one mode causes a conflict in another). It's based on my [https://jcfields.gitlab.io/warcraft3-hotkey-editor/ Warcraft III Hotkey Editor]. I actually originally intended to create this one first but thought it might be easier to start with Warcraft III (since I was more familiar with how its hotkey system worked), apparently forgetting that there are eleventy billion units in Warcraft III. Starcraft II is actually simpler in some ways. I was able to remove about six hundred lines of code right away that handled editing tooltips and dragging-and-dropping to reposition buttons. Warcraft III can also have multiple hotkeys for the same command, in ''two dimensions'': "horizontally" in the case of multi-tiered upgrades, such as weapons and armor upgrades or spellcaster training research, and "vertically" in the case of hero abilities having separate "use" and "learn" hotkeys or many abilities having two states (such as Gather/Return Resources). In Starcraft II, these sorts of cases are handled by using separate commands. I ended up having to rework some parts, including how it lays out the command card so it can display multiple cards per unit and how it handles inputting a hotkey to support non-character keys (such as escape and the space bar). The color overlay for the monochromatic buttons (e.g., move and attack) is a neat CSS/SVG trick. Most of the time I spent on both editors was inputting data (and pulling information and assets from the map editors) rather than working on the editors themselves. The Warcraft III editor ended up with 608 units and 1036 commands. The Starcraft II editor has 690 units and 1194 commands. ==== Who was it fell by the way? ==== {{post:November 4th, 2018|typhoon}} I made a [https://jcfields.gitlab.io/warcraft3-hotkey-editor/ Warcraft III Hotkey Editor]. I know that there are probably already utilities for this and that the timing is a bit funny considering //Warcraft III Reforged// will almost certainly include this functionality built-in, but everyone needs a hobby. It has all of the standard multiplayer units and structures, including creeps/mercs, plus campaign units. It generates a hotkey file that you can copy and paste into the proper directory. I've only tested it in Firefox, Safari, and Chrome. It can "spirit link" hotkeys so you can set a group of related ones all at once and can automatically generate appropriate tooltips. In addition to editing hotkeys, you can also edit tooltips by clicking on them and reposition buttons by dragging and dropping. Hotkey and button position conflicts are highlighted in red. The load function hasn't been tested extensively, but it can read the [https://liquipedia.net/warcraft/Custom_Hotkeys_Guide WTVR QWEASZ set] and the default "CustomKeysSample.txt" and should definitely work fine with any file generated by this editor. I also made a <a href="https://jcfields.gitlab.io/starcraft2-coop-randomizer">Starcraft II Co-op Randomizer</a> a while back (since the game client doesn't let you exclude particular commanders or maps from consideration). ==== Her blade found its mark in the dark ==== {{post:August 1st, 2018|typhoon}} <p class="float c"><a href="/files/members/typhoon/affinity.png"><img src="af/misc/resize.php?img=%2Ffiles%2Fmembers%2Ftyphoon%2Faffinity.png&size=800" width="800" height="500" alt="[Affinity Designer editing an SVG]"/></a></p> 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 bigger iPhones) 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 also updated this site to not look like garbage on high-res displays. 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: *"Blue, "Century," "Midnight," "New Moon," "Red Moon," and "Slug"--Completely vectorized. I only did "Red Moon" this week, which was the first theme to use [[phal]]'s icon set (which were the basis of the menu icons used by most of the other themes). *"Forever" and "Green"--All vectors or 2x raster images. The "Green" theme only uses raster images for the menu text (because of the mouseover blur effect), but "Forever" uses them for almost everything except the little squares under the main page headings. I also saved a higher-quality version of the background image for "Forever" since internet connections are a lot faster (went from about 30 KB to 150 KB, so it looks much cleaner now). *"Starcraft" and "Christmas 2003"--No attempt made since these two (as the site's two original themes) are basically deliberately lo-fi. *"Hanukkah," "Christmas 2005," and "Christmas 2007"--Mixed. I redid things like the title images and gradients but probably won't ever bother with the rest of the images since these themes are goofy and use a lot of holiday clip art and such. All of the file icons in the <a href="/files/">/files/</a> directory are also SVGs (about a hundred of them!), though they're based on [https://gitlab.com/jcfields/svg-file-icons 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. ==== No more water but fire next time ==== {{post:July 31st, 2018|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 <a href="community/waste/">uploaded it here</a>: <p class="float c"><a href="/files/members/typhoon/site-waste-bluegrid.png"><img src="af/misc/resize.php?img=/files/members/typhoon/site-waste-bluegrid.png&size=600" width="600" height="623" alt="[WASTE site, 2004 design]"/></a></p> 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): <p class="float c"><a href="/files/members/typhoon/site-waste-steel.png"><img src="af/misc/resize.php?img=/files/members/typhoon/site-waste-steel.png&size=600" width="600" height="812" alt="[WASTE site, 2001 design]"/></a></p> 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 <a href="https://loveandwartherpg.com/">Love and War site</a> 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 <a href="community/waste/layout/bluegrid/h2-headquarters.gif">cute animated heading</a> for the "Headquarters" page that I ditched because I didn't want to remake the effect for all the other sections (I used to make animated GIFs in ImageReady; I wouldn't know what to use these days). 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: <p class="float c"><img src="files/members/typhoon/site-cc.png" width="800" height="760" alt="[Campaign Creations redesign]"/></p> 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 few similarly motivated 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 (it looks like the default theme to a CMS, actually), but I thought it was clean and always liked it. Around that time, I adapted it for use for another project (a music journal called Slug that I wrote for a while but never actually put online). In 2014, I dug it up again and made it into an alternate theme for this site (themes are switchable in <a href="wiki.pl?action=editprefs">Preferences</a>), also called "Slug," for the sake of finally getting it out somewhere: <p class="float c"><a href="/files/members/typhoon/site-af-slug.png"><img src="af/misc/resize.php?img=/files/members/typhoon/site-af-slug.png&size=600" width="600" height="792" alt="[Antioch Forever, Slug design]"/></a></p> 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. 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: <p class="float c"><a href="/files/members/typhoon/site-af-century.png"><img src="af/misc/resize.php?img=/files/members/typhoon/site-af-century.png&size=600" width="600" height="915" alt="[Antioch Forever, Century design]"/></a></p> 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, though I still like "New Moon" more overall. 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.