Category: Tech

What Mega Man Powered Up Does Right and Mega Man: Maverick Hunter X Does Wrong, Part 1: Aspect Ratio

So the other day, I got to listening to OCRemix's Mega Man X: Maverick Hunter Rising album, and it got me jonesing to replay some Mega Man X.

I decided to take another crack at the 2006 PSP remake, Mega Man: Maverick Hunter X; it had disappointed me on my first playthrough, but I thought maybe I'd give it another chance.

And on a second playthrough, now that I'm familiar with its changes and idiosyncrasies, it went a lot smoother. Those changes and idiosyncrasies are glaring -- and they're what this series of posts is about -- but underneath them, it's a pretty solid remake of an excellent game.

But it's no substitute for the original.

And it's interesting to look at its immediate contemporary, Mega Man Powered Up, and see how much better Powered Up is than Maverick Hunter X.

There are a couple of reasons. One seems obvious -- in fact, it's the very first thing you notice:

  • Mega Man model
  • X model

Mega Man is short and squat, while X is tall and thin.

Now, these graphics tell you one thing right off the bat, and it's tone. Mega Man is fun and lighthearted; X takes himself seriously.

But the thing is, those designs affect every aspect of the game's design. And what you're looking at, in both cases, is a game that was originally designed for a 4:3 screen ratio, remade for a 16:9 one.

And which one of these guys do you suppose makes the transition better from 4:3 to 16:9 -- the one who's short and squat, or the one who's tall and thin?

At least, that's how it looks. But it's an illusion. Let's take a look at their actual dimensions, in-game:

  • Mega Man is 33x54px
  • X is 51x57px

Those are back-of-the-napkin measurements; I haven't taken the models through their full range of motion, and I'm not sure what the exact dimensions of their hitboxes are. But it's enough to see that Mega Man only looks shorter and squatter -- in terms of the dimensions rendered in-game, X isn't significantly taller than Mega Man, and he is significantly wider.

But it's not really just about the ratio of the character models -- it's about the design of the worlds they inhabit.

Both games face the same challenge: they have to substantially rework stage designs to fit a different screen ratio, while still making them feel like they play the same. Take a look at this screen from Cut Man's stage:

  • Cut Man Stage -- Mega Man
  • Cut Man Stage -- Mega Man Powered Up

It's pretty close.

In fact, it just hacks out the brick below the ladder, and the (inconsequential) top section of the ladder, above the range of the enemies.

It's got the same number of little eye-lantern guys, and nearly the same width to move around in. (The movable width of the screen in the original Mega Man is 12 "blocks", where in Powered Up it's a very close 11. And the height from the floor to the topmost enemy is 9 blocks in the original and 6 in Powered Up.)

There are places where Maverick Hunter X does a similarly good job, like here in Flame Mammoth's stage (after defeating Chill Penguin and freezing the lava):

  • Flame Mammoth Stage -- Mega Man X
  • Flame Mammoth Stage -- Mega Man: Maverick Hunter X

There's a lot less vertical space to move under that platform, but it's not important; it's still enough to fit, and still keep the entire room onscreen.

But other sections don't always fare as well. Look at the beginning of Spark Mandrill's stage:

  • Spark Mandrill Stage -- Mega Man X
  • Spark Mandrill Stage -- Mega Man Xtreme
  • Spark Mandrill Stage -- Mega Man: Maverick Hunter X

In the original SNES version of Spark Mandrill's stage, the sparks that run along the floor and ceiling are half X's height and half his width, and the gap between them gives you plenty of room to dodge them. In the Maverick Hunter X version, they're as big as X, and there's very little room in between them. Even the Game Boy Color Mega Man Xtreme, with its severely compromised screen size, didn't have that problem.

(On the plus side, this does mean that defeating Storm Eagle before Spark Mandrill (and thereby disabling the sparks in the floors) makes a much more significant difference in how the level plays than it does in the original game.)

Chill Penguin's stage has problems too:

  • Chill Penguin Stage -- Mega Man X
  • Chill Penguin Stage -- Mega Man Xtreme
  • Chill Penguin Stage -- Mega Man: Maverick Hunter X

In the original, you can see the wheel coming and have time to get out of the way; in Maverick Hunter X, you can't and you don't. Though in this case, at least it's not being shown up by Xtreme, which has the same issue.

In a nutshell, Powered Up does a really good job of redesigning its vertical segments to fit a 16:9 screen, while Maverick Hunter X doesn't. And this really sticks out, because like Powered Up, MHX is a really polished remake. It shouldn't have these kinds of glaring issues with cropping; they're the hallmark of much lazier ports, like Mega Man for Game Gear, Mega Man and Bass for GBA, and, yes, Mega Man Xtreme.

But it's not just a few sucker punches by enemies that are too big, or that come out of nowhere. No, worst of all are the tricky platform segments where your limited field of vision can result in cheap, instant deaths. And I'll get to those in my next post.


Mega Man ® 1989 and © 1987 Capcom Co, Ltd
Mega Man X ™ and © 1993 Capcom Co, Ltd
Mega Man Xtreme © 2001 Capcom Co, Ltd
Mega Man Powered Up and Mega Man: Maverick Hunter X © 2006 Capcom Co, Ltd

Character models supplied by Models Resource

I took all the screenshots myself, and tried to get them all at native resolution with no filters.
I used the following emulators:
NES: FCEUX
SNES: Snes9x
Game Boy Color: Libretro with the Gambatte core
PSP: PPSSPP

Mmm, Forbidden Comics

Modified from a post on Brontoforumus, 2015-09-23.


In honor of Banned Books Week, the latest Humble Books Bundle is made up of banned and challenged comic books.

It's not just a good theme, it is, in terms of quality content for your money, the single best collection of comics I have ever seen. I've got a couple caveats about the presentation, which I'll get to in a minute, but it's well worth the price of admission, whatever tier you choose to donate at.

Pay more than the average and you get Heartbreak Soup.

Heartbreak Soup is my all-time favorite comic. Your mileage may vary, but as far as I'm concerned, the list of Greatest Comics of All Time goes Heartbreak Soup, then Maus, then that Spider-Man arc where he has to lift the rubble off him as Doc Ock's underwater base collapses. (No, Watchmen is not in my top three.)

The bundle also has the first volume of Bone. Bone is phenomenal; it's an all-ages adventure story in the classic mold, with influences from Walt Kelly to Carl Barks to Don Martin; it's funny and it's gorgeously drawn. You should definitely get it if you haven't read it yet; it's at the first tier so it can be yours for a penny.

The bottom tier's also got Maggie the Mechanic, which is the other Love and Rockets vol 1. (Heartbreak Soup is the first volume of Gilbert Hernandez's Palomar stories; Maggie the Mechanic is the first volume of Jaime Hernandez's Locas stories.) Maggie the Mechanic is great too, but for my money it's not as great as Heartbreak Soup, or as the other Locas stories that followed. (The Death of Speedy is widely regarded as the best Love and Rockets story; it's in vol 2 of Locas, which is not included in this bundle.)

Bottom tier also has The Frank Book. Jim Woodring's work is beautiful, surreal, wordless, and incredibly detailed. I have six pieces of comic book art hanging on my walls. One is a Quantum and Woody poster signed by Christopher Priest; one is an Uncle Scrooge print signed by Don Rosa. The other four are Jim Woodring prints that my uncle gave me for my birthday after using them in a museum exhibit.

There's some other stuff in there that I don't know as much about. I like Chester Brown but I haven't read The Little Man; I like Jeff Lemire but I haven't read Essex County. I suppose they're probably both pretty great based on their respective cartoonists' other work, but I don't know them.

And The Boys is in there. The Boys is not for me; I'm not a Garth Ennis fan. But if you like the sound of a bunch of asshole superheroes being taken down by a group of regular guys led by somebody who looks exactly like Simon Pegg, you'll probably dig it.

To summarize: it's a great bundle. It's worth buying for Heartbreak Soup, Bone, and Frank alone; I bought it mostly because I'd been wanting to pick up Frank, Essex County, and Information Doesn't Want to be Free by Cory Doctorow (available as an audiobook in this bundle; the only item that isn't a comic book).

So. Great bundle. But. As I said, there are some caveats with the format.

The first of which is, you're probably going to be reading these on a tablet. And some of these comics just don't look as good on a 10" screen.

I was especially worried about The Frank Book given the detail of Woodring's work; this stuff's meant to be read at 8.5"x11" size. But I was surprised to find it actually looks great on my tablet. The full-size book would be better, but it also costs $35 and weighs 3 pounds. And that's the paperback version.

Bone looks fantastic on my screen too.

Surprisingly, of the books I've thumbed through, the one that suffered most was Heartbreak Soup.

Part of that's to do with the ratio. The pages of Love and Rockets are shorter and wider than standard comic book pages.

  • Bone page
    Bone
    Scaled to 325x500
  • Heartbreak Soup page
    Heartbreak Soup
    Scaled to 405x500

So on a 6:10 screen like my tablet's, you're left with some major letterboxing and a picture that is uncomfortably small and looks a little jaggy, and text that can be hard to read. (If, on the other hand, you have a tablet with a 4:3 screen, like an iPad, I imagine the Love and Rockets -- and the other more square-ish comics in the collection -- will look a lot better, and you'll have the opposite problem with the more traditionally-sized comics in the set.)

Perfect Viewer also seemed to choke on the file a bit; after the first few pages, it started pausing for long periods of time on each page turn. At first I thought it was due to the file size (the CBZ version is 675MB), but The Frank Book is even bigger and Perfect Viewer didn't give me any trouble with it. So I don't know why it doesn't like Heartbreak Soup, but it doesn't.

In short, Heartbreak Soup is my favorite comic, but my 10" tablet is most definitely not the best way to read it. Again, your mileage may vary; you may have better luck on an iPad, as noted, or if you're cool with just reading it on a desktop computer monitor, it looks great on my 27" 2560x1440 screen. But if you're looking for comics to read on a widescreen tablet, well, there are still a lot of great books in this set that totally justify the purchase, but don't buy it just for Heartbreak Soup. All that said, though? It's still a great damn comic, it doesn't look that bad on my tablet, and if you don't want to look for it at your local library or pay full price for the paperback version, well, it's still worth a read.

There's another one I looked through that I have a visual complaint about, and unfortunately, it's an important one and the granddaddy of all challenged comics: Crime Does Not Pay.

Crime Does Not Pay is a classic. It's the first and most successful of the 1940's-'50's-era crime comics that led to Senate hearings and, eventually, the Comics Code and most of the industry going out of business. But, aside from simply being popular, controversial, and lurid, it's just plain good, with superlative work from the likes of Charles Biro, Bob Montana, and George Tuska.

It's also public domain. You can find most of the series for free on Digital Comic Museum (though if you can spare a donation to keep the site up and running, that would be swell too).

Given that, it's damned disappointing that Dark Horse did such a shoddy job on the colors.

  • Crime Kings splash page
    Digital Comic Museum
  • Crime Kings splash page
    Dark Horse

The first image is a scan from one of the original 1950's printings of the comic. It's not pristine; the colors bleed, and if you look closely you can see right through the page to the panel grid from the opposite side. And there are marks on the left side of the page where the staples were.

But despite those flaws, it looks better than the second image, from Dark Horse's restoration. The colors in Dark Horse's version look garish.

And it's down to the paper stock. The scan looks the way it's supposed to, because those colors are supposed to be printed on newsprint. The background is supposed to look a little gray or tan, and the colors are supposed to soak in and blend together.

Dark Horse's version looks garish because they kept the original four-color printing process but put it on high-quality, glossy paper (or the digital equivalent of same). The colors look wrong.

But, in Dark Horse's defense, it could have been worse -- at least they didn't re-color it. Have you seen what they've done to their Conan reprints? Photoshop gradients everywhere. The horror. The horror.

"It could have been worse" isn't a great defense, though. When it comes right down to it, I'd rather read the Digital Comic Museum version, even if I can see the grid lines from the other side of the page.

The only problem is, the Dark Horse collection contains issues #22-#25 (don't let the numbering fool you; #22 is the first issue -- in those days it was common, when a publisher canceled a comic and started a new one, for the new series to continue the old series' numbering with a new title), and Digital Comic Museum doesn't have #23-#25. So while you can download DCM's superior version of issue #22 (and #26, and #27, and lots more, on up through #147), if you want to read #23-25 then you're stuck with the Dark Horse version, and you'd better be prepared for a hell of a lot of eye-searing bright yellow.

There are plenty of instances of publishers doing reprints of old comics right -- either by using newsprint or by scanning or photographing the original printed pages -- but this isn't one of 'em, and that's a shame.

But, all that grousing aside, this bundle? If you have never read a comic book in your life, this has three that I would rank as Absolute Must-Read, in Heartbreak Soup, Bone, and Frank. It's got one of the legitimate most important comics of all time in Crime Does Not Pay, even if I've got some gripes about the presentation and you might be better off grabbing a scanned version from Digital Comic Museum. And aside from those, it's got several more that may not be quite so high on the must-read list but still rank as Great.

If you like good comics, you should get it. And if you don't like good comics, you should get it anyway, because maybe you just haven't ready any comics this good yet.

The bundle runs for five more days.

E-Mails and Passwords

So the other day I decided it was past time to reset all my passwords.

I'm pretty good about password hygiene. I've been using a password locker for years, with a unique, randomly-generated* password for every account I use. But I'll admit that, like most of us, I don't do as good a job of password rotation as I might. That's probably because I've managed to amass over 150 different accounts across different sites, and resetting 150 different passwords is a giant pain in the ass.

(I'm thinking that, from here on in, I should pick a subset of passwords to reset every month, so I never wind up having to reset all 150 at once again. It would also help me to clear out the cruft and not keep logins for sites that no longer exist, or which I'm never going to use again, or where I can't even find the damn login page anymore.)

There was one more reason I decided now was a good time to do a mass update: I've got two E-Mail addresses that have turned into spam holes. As I've mentioned previously, I'm currently looking for work and getting inundated with job spam; unfortunately I went and put my primary E-Mail address at the top of my resume, which in hindsight was a mistake. Never post your personal E-Mail in any public place; always use a throwaway.

Which I do, most of the time -- and that's created a second problem: I've been signing up for websites with the same E-Mail address for 15 years, and also used to use it in my whois information. (I've since switched to dedicated E-Mail addresses that I use only for domain registration.) So now, that E-Mail has turned into a huge spam hole; it's currently got over 500 messages in its Junk folder, and that's with a filter that deletes anything that's been in there longer than a week. My spam filters are well-trained, but unfortunately they only run on the client side, not the server side, so any time Thunderbird isn't running on my desktop, my spam doesn't get filtered. (If I'm out of the house, I can tell if the network's gone down, because I start getting a bunch of spam in my inbox on my phone.)

So now I've gone and created two new E-Mail addresses: one that's just for E-Mails about jobs, and another as my new all-purpose signing-up-for-things address.

My hope is that the companies hammering my primary E-Mail address with job notifications will eventually switch to the new, jobs-only E-Mail address, and I'll get my personal E-Mail address back to normal. And that I can quit using the Spam Hole address entirely and switch all my accounts over to the new address. Which hopefully shouldn't get as spam-filled as the old one since I haven't published it in a publicly-accessible place like whois.

Anyway, some things to take into account with E-Mail and passwords:

  • Don't use your personal E-Mail address for anything but personal communication. Don't give it to anyone you don't know.
  • Keep at least one secondary E-Mail address that you can abandon if it gets compromised or filled up with spam. It's not necessarily a bad idea to have several -- in my case, I've got one for accounts at various sites, several that I use as contacts for web domains, and one that's just for communication about jobs.
  • Use a password locker. 1Password, Keepass, and Lastpass are all pretty highly-regarded, but they're just three of the many available options.
  • Remember all the different devices you'll be using these passwords on.
    • I'm using a Linux desktop, an OSX desktop, a Windows desktop, and an Android phone; that means I need to pick a password locker that will run on all those different OS's.
    • And have some way of keeping the data synced across them.
    • And don't forget that, even with a password locker, chances are that at some point you'll end up having to type some of these passwords manually, on a screen keyboard. Adding brackets and carets and other symbols to your password will make it more secure, but you're going to want to weigh that against the hassle of having to dive three levels deep into your screen keyboard just to type those symbols. It may be worth it if it's the password for, say, your bank account, but it's definitely not worth it for your Gmail login.
  • Of course, you need a master password to access all those other passwords, and you should choose a good one. There's no point in picking a bunch of unique, strong passwords if you protect them with a shitty unsecure password. There are ways to come up with a password that's secure but easy to remember:
    • The "correct horse battery staple" method of creating a passphrase of four random words is a good one, but there are caveats:
      • You have to make sure they're actually random words, words that don't have anything to do with each other. Edward Snowden's example, "MargaretThatcheris110%SEXY.", is not actually very secure; it follows correct English sentence structure, "MargaretThatcher" and "110%" are each effectively one word since they're commonly-used phrases, the word "SEXY" is common as fuck in passwords, and mixed case and punctuation don't really make your password significantly more secure if, for example, you capitalize the beginnings of words or entire words and end sentences with periods, question marks, or exclamation points. Basically, if you pick the words in your passphrase yourself, they're not random enough; use a computer to pick the words for you.
      • And this method unfortunately doesn't work very well on a screen keyboard. Unless you know of a screen keyboard that autocompletes words inside a password prompt but won't remember those words or their sequence. I think this would be a very good idea for screen keyboards to implement, but I don't know of any that do it.
    • There are programs and sites that generate pronounceable passwords -- something like "ahx2Boh8" or "ireeQuaico". Sequences of letters (and possibly numbers) that are gibberish but can be pronounced, which makes them easy to remember -- a little less secure than a password that doesn't follow such a rule, but a lot more secure than a dictionary word. But read reviews before you use one of these services -- you want to make sure that the passwords it generates are sufficiently random to be secure, and that it's reputable and can be trusted not to snoop on you and send that master password off to some third party. It's best to pick one that generates multiple passwords at once; if you pick one from a list it's harder for a third party to know which one you chose.
  • Of course, any password is memorable if you type it enough times.
  • And no password is going to protect you from a targeted attack by a sufficiently dedicated and resourceful attacker -- if somebody's after something you've got, he can probably find somebody in tech support for your ISP, or your registrar, or your hosting provider, or your phone company, or some company you've bought something from, somewhere, who can be tricked into giving him access to your account. Or maybe he'll exploit a zero-day vulnerability. Or maybe one of the sites you've got an account with will be compromised and they'll get everybody's account information. Password security isn't about protecting yourself against a targeted attack. It's about making yourself a bigger hassle to go after than the guy sitting next to you, like the old joke about "I don't have to outrun the tiger, I just have to outrun you." And it's about minimizing the amount of damage somebody can do if he does compromise one of your accounts.
  • And speaking of social engineering, security questions are deliberate vulnerabilities, and they are bullshit. Never answer a security question truthfully. If security questions are optional, do not fill them out. If they are not optional and a site forces you to add a security question, your best bet is to generate a pseudorandom answer (remember you may have to read it over the phone, so a pronounceable password or "correct horse battery staple"-style phrase would be a good idea here, though you could always just use letters and numbers too -- knowing the phonetic alphabet helps) and store it in your password locker alongside your username and password.
  • You know what else is stupid? Password strength indicators. I once used one (it was Plesk's) that rejected K"Nb\:uO`) as weak but accepted P@55w0rd as strong. You can generally ignore password strength indicators, unless they reject your password outright and make you come up with a new one.

* For the purposes of this discussion, I will be using the words "random" and "pseudorandom" interchangeably, because the difference between the two things is beyond the scope of this post.

Getting Sprint LTE to Work on CyanogenMod 12

Update 2015-10-12: My new advice for getting Sprint data to work on a Nexus 5 phone running CyanogenMod 12 is "Don't bother." I never did get it working right, and had to reboot at least once a day to get it working. I've since reverted back to KitKat. Original post follows, but if you want my advice it's "Stick with CM11."


First, let's get one thing out of the way: if you're using a custom Android ROM on your phone (or any device that can receive text messages), you're going to want to make sure it's up-to-date. There's a vulnerability in an Android component called Stagefright that is potentially devastating; it allows an attacker to gain control by doing nothing more than send a text message, and there are now attacks in the wild.

If you've got the stock firmware on your phone, and your phone is relatively recent, you should get the patch to fix this vulnerability automatically. (If, for example, your phone is running Lollipop, either because it came with it or automatically updated to it, you're probably good.)

But if you're running a custom ROM and don't have automatic updates enabled, you're going to want to check on whether you're running a current version that includes the Stagefright fix.

I'm a CyanogenMod user. If you're using the latest version of CyanogenMod 11.0, 12.0, or 12.1, then you've got the Stagefright fix.

I recently took the opportunity to upgrade my phone to the latest 11.x series to get the fix. And I figured while I was at it, why not upgrade to 12.1 and see if it's any good?

So I installed CyanogenMod 12.1, and everything looked like it was working fine at first -- when I was using it in my own house, on my wifi network. It wasn't until a day or two later that I realized my Sprint data connection wasn't working.

It took rather more searching than it should have, but it turns out there's an easy solution (albeit an annoying one if you've already got your phone set up the way you want it, because it involves wiping it to factory again).

mjs2011 at XDA Developers links to a sprint.zip file assembled by somebody named Motcher41, and gives these instructions for use:

The fix should be flashed during initial installation, so:

  1. Flash ROM
  2. Gapps
  3. SU (if necessary)
  4. Sprint APN Fix zip

I can confirm that you don't need to worry about setting up root before sprint.zip; it's fine if you do it afterward (my recovery, for example, sets up su right before reboot). However, I can confirm that you need to install sprint.zip after Gapps and before your first boot; if you install it before Gapps or after your first boot then it won't work.

Update 2015-09-30: After a few days my data connection quit working again. I rebooted to recovery, reinstalled sprint.zip, and it started working again. So never mind about not working if you install it after you've already booted the ROM; it will still work just as well. Unfortunately, "just as well" appears to mean "just for a few days"; I'm not sure what happened that changed my settings to make it stop working, but if I figure it out I'll update this post again.

You may notice that the linked thread is old (it's from November 2013) and was written in reference to pre-11.0 versions of CyanogenMod. However, I can confirm that it applies to the 12.x series too. This issue appears to be a regression; CM fixed it in version 11 but then broke it again in version 12.

So if you're a Sprint customer and you just installed CyanogenMod 12 on your phone and then discovered Sprint data was no longer working, this is what you're gonna wanna do to fix it.

Web Design Got Complicated

It's probably not surprising that rebuilding my website has gotten me thinking about web development.

The first six years I ran this site, I did it all by hand -- my own HTML, my own CSS, no scripting languages. I thought that CMS software was for pussies.

But ultimately, plain old HTML just doesn't scale. I conceded that when I started using b2evolution for my blog back in '06, and it's truer now than it was then.

You can poke around some of the old sections of the site a bit, the ones that haven't been updated significantly since the turn of the century -- KateStory's a good one, or the Features page (though I'd like to get at least the Features page up to date sooner than later, and maybe the KateStory one too, so maybe there'll be people reading this post well after those pages shed their 1990's style) -- and they get the job done. Breadcrumb navigation at the bottom of every section, leading you back to either the parent page or the main index.

But Jesus, you can only manually copy and paste "Back to Features / Back to Index" so many times.

And maintaining a years-long blog archive without a CMS to automate it for you? It gets old.

So, you want some automation? You're going to need a scripting language. That usually means PHP for server-side, and JavaScript for client-side.

I got to thinking the other day -- man, it's weird that you need extra toolsets to perform such common tasks as, say, reusing a navigation bar. It's weird that there's not some way just to write up a navigation bar and then write code, in HTML, no scripting required, to embed that common HTML block on the current page.

I thought this was a pretty smart observation.

For about three seconds.

At which point I realized I had just described fucking frames.

Course, the biggest problem with frames is that they weren't exactly what I'm describing. I'm talking about just an HTML snippet in some secondary file that you call from a primary file -- like an include in PHP.

That's not what frames were. Frames were complete fucking HTML pages -- <html>, <head>, <body> (or, more likely, <HTML>, <HEAD>, <BODY>, because in the old days we wrote HTML tags in all-caps) -- which is, most times, downright stupid and wasteful, and was much moreso in the days of 14.4 dialup. Even worse than the load time was the logistics -- if you used frames to build a website with a header, a footer, and a sidebar, you'd have a total of five separate web pages -- a content area, the three other sections, and some kind of main page that all of them were embedded into. This was a fucking nightmare for linking, both for the developer (who had to remember to set the target attribute on every single link, lest the page load in the navigation bar instead of the content area) and the end user (because the URL in the location bar would be the container page that called all the other pages, not the content page the user was currently looking at).

In a way, it's kinda weird that nobody's gone back to that well and tried to do it again, but do it right this time. Update the HTML spec to allow an HTML file to call a reusable snippet of HTML from another file, one that isn't a complete page.

Given all the concessions HTML5 has made to the modern Web, it's surprising that hasn't happened, even given how slowly it takes for a spec to be approved. We've got a <nav> tag, which is nice and all, but who the hell uses a <nav> tag without calling some kind of scripting language that automates code reuse? There really aren't that damn many reasons to use the <nav> tag for code that isn't going to be reused on multiple pages throughout a site.

And I dunno, I'm sure somebody's brought this up, maybe it's on the itinerary as a consideration for HTML6.

Which is another thing, really: the people making the decisions on the specs do not want the same things I want.

I liked XHTML. (In fact, lest this whole thing come off as a curmudgeonly damn-kids-get-off-my-lawn diatribe against new technologies and standards, I'd like to note that I was using XHTML Strict back when you pretty much had to be using a beta version of Phoenix -- before it was Firebird, before it was Firefox -- for it to render correctly.) I thought it was the future. I wish XHTML2 had taken off. HTML5 feels ugly and inconsistent by comparison, and, as legitimately goddamn useful as it is to be able to put something like data-reveal aria-hidden="true" in the middle of a tag's attributes, it always feels dirty somehow.

But I digress.

Point is, in 2006, I switched the blog from just plain old HTML and CSS, and added two more elements: a MySQL database to actually store all the shit, and a PHP CMS (originally b2evolution, later switched to WordPress).

And then came smartphones.

We live in a world now where every website has to be designed for multiple layouts at multiple resolutions. You wanna try doing that without using an existing library as a base? Try it for a few days. I guarantee you will no longer want that.

I think my resistance to picking up new libraries is that every time you do it, you cede a measure of control for the sake of convenience. I don't like ceding control. I like my website to do what the fuck I tell it to, not what some piece of software thinks I want it to.

I've spent the last decade arguing with blogging software to get it to quit doing stupid shit like turn my straight quotes into "smart" quotes and my double-hyphens into dashes. Just the other day, I built a page in WordPress and discovered that it replaced all my HTML comments with fucking empty paragraphs. Why would I want that? Why would anyone want that?! And that's after I put all the remove_filter code in my functions.php.

And that's the thing: WordPress isn't built for guys like me. Guys like me use it, extensively (it is the world's most popular CMS), because it automates a bunch of shit that we'd rather not have to deal with ourselves and because when we're done we can hand it off to end users so they can update their own site.

But I still write these posts in HTML. I want to define my own paragraph breaks, my own code tags, the difference between an <em> and a <cite> even though they look the same to an end user.

(And okay, I still use <em> and <strong> over <i> and <b>; there's really no explaining that except as a ridiculous affectation. I recently learned Markdown and used it to write a short story -- I'll come back to that at a later date -- and I could see switching to that. HTML really is too damn verbose.)

...and that was another lengthy digression.

So. Mobile design.

Bootstrap is the most commonly used toolkit for responsive websites. I've used it, it works well, but it's not my favorite idiom, and I've decided I prefer Zurb Foundation. So that's what I used to build the new site layout.

Except, of course, then you've got to get two dueling design kits to play nice to each other. Square the circle between WordPress and Foundation.

I started to build the new theme from scratch, and I'm glad I was only a few hours into that project when I discovered JointsWP, because that would have been one hell of a project.

JointsWP is poorly documented but has proven pretty easy to pick up anyway.

So. I've gone from HTML and CSS to HTML, CSS, and WordPress (HTML/CSS/PHP/MySQL), to HTML, CSS, WordPress, Foundation (HTML/SCSS/JavaScript, importing libraries including jQuery), and JointsWP (ditto plus PHP). And on top of that I'm using Git for version tracking, Gulp to process the SCSS, and Bower to download all the other scripts and toolkits I need and keep them updated.

So, going with Foundation (or Bootstrap, or whatever) as a standard toolkit, you get somebody else's codebase to start from. That comes with some elements that are a necessary evil (I hate fucking CSS resets, and think writing p { margin: 0; } is an abomination in the sight of God and Nature -- but if it means I can assume my site will look more or less correct in Mobile Safari without having to go out and buy an iPhone, then I guess I'll take it), and others that are actually pretty great -- I find SCSS to be really exciting, a huge saver of time and tedium, and it's hard to go back to vanilla CSS now that I've used it.

Course, with increasing complexity, you still hit those things that don't quite work right. One example I've found is that Foundation sets your placeholder text (the gray letters that appear in an "empty" input field) too light to be legible, and does not have a simple definition in _settings.scss to let you adjust it to darker. I've found a mixin that allows you to create such a definition pretty simply, but for some reason JointsWP doesn't like it (or maybe Gulp doesn't). So until I get around to finding a fix, the text stays light, and I'll just have to trust that you the user will be able to determine that the input field under the phrase "Search for:" and to the left of the big blue button that says "Search" is a search box.

I've also got loads of optimization still to do; part of that's going to mean figuring out what parts of Foundation's CSS and JS I'm not actually using and cutting them out of the calls, and part of it's probably going to mean minification.

Minification is one of those things I resisted for awhile but have come around on. It can be a real hassle for debugging, not being able to view a stylesheet or script in full, and it may not be practical just to save a few kilobytes (or a few dozen, rarely a few hundred) -- but on the other hand, well, it's not so different from compiling source code to binary; the end result is still that you take something human-readable and turn it into something much less human-readable.

And of course now that I'm using a preprocessor, my CSS file isn't my real source code anyway; it's already the result of taking my code, feeding it through an interpreter, and outputting something that is not my code. If you want to look at the stylesheet for this site, you want to look at the SCSS file anyway (it's on Github), not the CSS file. And if I'm already telling people "Look at the SCSS file, not the CSS file," then what's the harm in minifying the CSS file and making it harder for people to read?

For now -- prior to removing unnecessary code calls and minifying everything -- I feel like the site design's a lot more bloated than it needs to be. And even once I slim it down, there are going to be some compromises that go against my sensibilities -- for example, when you loaded this page, you loaded two separate navigation systems, the desktop version (top navigation and sidebar) and the mobile version (just a sidebar, which contains many of the same elements as the topnav and sidebar from the desktop version but is not exactly the same), even though you can only see one of them. That redundancy makes me wince a little bit, but ultimately I think it's the best and simplest way of doing it. Sometimes, good design does require some redundancy.

All that to say -- man, there have been a lot of changes to web design in the last twenty years. And while there are trends I really don't like (if I never have to build another slideshow it'll be too soon; gradients are usually dumb and pointless; and the trend of making visited links the same color as unvisited ones feels like a step backward into 1995), there are also a lot that I've eventually warmed up to, or at least accepted as something I've gotta deal with.

Anyway. Welcome to the new corporate-sellout.com.

And one more thing about the site before I go: it's probably worth noting that this site is different from the other sites I build, because it's mine. Its primary audience is me. I like having an audience, but frankly I'm always a little (pleasantly) surprised whenever anyone actually tells me they enjoyed something I put on this site.

Because this site isn't one of my professional sites. I didn't build it for a client. It's not my portfolio site, which I built to attract clients. This one? It's for me. As should be clear from this rambling, 2200-word stream-of-consciousness post about the technical ins and outs of web design, as it applies specifically to me and to this site.

Frankly I'm always surprised when anyone actually reads anything like this.

I'll Call It a Good Start

Well, that's the update done, and you should be looking at the new theme now.

It needs work (the current "Archives" list in the sidebar is 67 lines long and I need to remember how to limit it to just the last few months like in the old version), but it's a start.

I'll be puttering around behind the scenes for a little while yet. Course, the point of all this is that I'd like to start blogging regularly again; there's not much point to going to all this trouble to pretty it up if I don't start using it.

As you might expect, just the update itself gives me plenty of things to talk about -- what I like about modern Web design and what I don't.

More to come, I should think.

Hang On to Your Butts

Gearing up for a major site update -- first I'm disabling all my plugins, then I'm updating WordPress, then I'm installing a brand new theme, and then I'll be beating the theme into working shape. Things may break at any and all points of this process.

Ubuntu on an Old Mac Pro

So I spent the past few days trying to get Ubuntu Studio installed on my 2006-era Mac Pro 1,1. I can't speak for other Macs specifically, but here are some details you're going to want to know if you engage in that undertaking:

  • The Mac Pro 1,1 won't boot Linux from a USB stick.
  • It also won't boot it from a dual-layer DVD. Double-check and make sure you're not using dual-layer.
  • The LTS releases of Ubuntu (such as 14.04) have images that are specifically labeled "amd64+mac". Use those. Otherwise you might wind up stuck on an unresponsive "Select CD-ROM Boot Type" prompt.
  • You may or may not need to install rEFInd to help you boot from a Linux disc. If your disc isn't showing up when you hold the Option key at boot, give rEFInd a shot.
  • There's a useful guide at Ubuntu Community Help called Installing on a Mac Pro - Cylinder (Late 2013). As the title implies, it's not written for the older-model Mac Pros, but most of what it says is still applicable. (But it tells you not to use the Mac-specific ISO files. Don't listen to that part; you should use those on the 1,1 model.)

Getting Rid of Firefox Error Beeps in OpenSUSE

This is, more than anything, a Note to Self for the next time I do a clean install of OpenSUSE and can't figure out how to make Firefox stop making incredibly loud error beeps every single time I type Ctrl-F and type a search term that it can't find.

Disabling audio notifications in KDE's Configure Desktop has no effect on Firefox, because it uses GNOME's audio event system, not KDE's. (Not sure why it also completely ignores current system volume and always blasts the error beep so friggin' loudly; I'm sure there's a configuration setting for that somewhere.)

The program for controlling GNOME/GTK audio events is called pavucontrol (for Pulse Audio Volume Control).

Run that, go to the Playback tab, and click the Mute icon next to System Sounds.

This is really the sort of thing OpenSUSE should fix, seeing as its default configuration is a KDE desktop with Firefox as the default browser. It would be nice for YaST to have some kind of integrated audio notifications configuration tool, or, at the very list, to document pavucontrol better.

Theming

So I made a few changes to the site design.

I've still got a ways to go -- so far all I've done is tweak my existing, circa-2008 codebase. I'd like to redo the backend and base it on the latest WordPress default theme (for better compatibility with widgets and things, and ideally to get responsive CSS and semantic tags working from the get-go), but that's probably going to take me a bit.

In some ways, I'm veering more retro than ever (you'll note the red links are gone and we're back not just to blue but to good old #0000FF); in others, I've made a few modest concessions to CSS3 (rounded corners and box-shadows aren't so bad -- gradients and transparencies are still bullshit, though).

I thought about writing a lengthy post discussing my design sensibilities and how I've applied them in this latest update, but I think I'll hold off because I'm not actually done yet and I'm still deciding on some changes. (Links aren't currently underlined; I'd like to underline them, but post titles are also links and if they're links I want them to look like they're links, and I don't like underlines on post titles. Considering adding a colored background to post titles, but I'm still deciding. Stuff like that.)

I've learned a lot about modern Web design over the course of the past year and a half or so, since it went from being hobby/occasional freelance gig to day job. I'm still not much of a graphic designer, and my sensibilities are still very much those of a programmer rather than an artist. (I'm disappointed that XHTML was deprecated in favor of updating the HTML4 standards base, but on the other hand I dig the semantic stuff.)

And speaking of Web design as day job...well, I feel like one of these days I should continue my Tempin' Ain't Easy post and talk about the jobs I've had since. It's been interesting.