Cowsay and Rewarding HTML

Rewarding HTML

There's something that's becoming more and more a relic today, thanks to “Web 2.0”: HTML that's rewarding to read.

Tell me, if you had to read one, which of these two would you actually not mind reading?

Raddle's website HTML-- it is orderly, well-formatted,
		with plenty of line-breaks, and is perfectly legible.
A - Some of Raddle and Postmill's HTML.
CBC News website HTML-- it is messy, unformatted, without
		any line-breaks, and is completely illegible.
B - Some HTML from CBC News.

I don't know about you, but I'd rather slam my skull against my desk than read B in any timeline, in any context.

But isn't it obvious why B is so much worse than A? Clearly, someone had their hand in A, manually typing up the HTML, or at least lovingly creating its template. Whereas B was almost certainly generated with entirely non-cohesive templates, randomly strung together in a syntaxically-acceptable order-- but not a human-acceptable order. The entirety of the news article (sans the script-loading) is on a single line; just look at the horizontal scroll-bar! There are only 34 lines in the page! It's completely impossible to sift through.

There's a reason why almost every “Learn to Code” book says to read other people's code. People learn by example. There might be billions of courses and cheat-sheets and videos on HTML, but there really is no replacement for learning from others work. That's how you learn the ins and outs, good practice from bad, what is acceptable and what isn't-- otherwise, you're just learning what's syntaxically valid, the bare minimum of understanding anything. It's like learning vocabulary without grammar itself.

If everyone's HTML is like B, how will people learn to code HTML? The only options are “terribly” or “not at all.” When you decide to “not at all” learn HTML, what're you going to turn to? WordPress, Wix, GoDaddy, the sort. Bloated, anti-semantic, proprietary HTML generators that, predictably, make even more ugly HTML. Which in turn, makes it harder to learn good practice, and makes even more people turn to generators.

Even if you don't consider “good HTML practice” important-- “that's for nerds, I hate nerds”-- think about how ugly HTML discourages curiosity.

I know, it might seem like a reach, but think about why people learn to program, why people like to look at the insides of their computer, or the toaster oven they've promptly disassembled-- they are curious. Closing off an avenue to satisfy curiosity discourages curiosity itself, no matter how slightly. It re-enforces the idea that they can't understand “computer stuff”, that it's out of their reach. That only “smart people” can understand it. It exacerbates what makes tech “meritocracy” so problematic in the first place.

I'd prefer to live in a world where curiosity is satisfied and encouraged, and where people can feel like technology is genuinely grokable.


And it's always rewarding to see a cute little message, or some ASCII art, or even a job-offer in an HTML comment. What better way can you reward curiosity than through cute source-code? How can technology seem more approachable than with a friendly note to readers?

Enter cowsay(1)-- a really nice Perl program (that's a bloody classic and should absolutely be included in every operating system's base installation). It prints a cute little ASCII cow saying whatever message you pass onto it.

/ why did the cow cross the road? to get \
\ to the other side!                     /
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Plainly, cowsay's absolutely perfect for making friendly comments in HTML!

Oh, wait...

Picture of the W3C HTML validator rejecting standard
		cowsay output
The W3C Validator rejecting a poor, defenseless animal. Not cool, mate.

Apparently, since cowsay outputs more hyphens than XML 1.0 allows, you've got to get rid of them in order for the validator to, well, give you friendly validation. So you could replace them every time you print a cow in HTML… but wouldn't it be nicer to have a genuine fix?

So I spent a while trying to figure out how to replace the hyphens in the program's “cow” file format (just some Perl code with variables set), hoping that I could replace them through that. But it turns out the speech bubbles are made by the program itself-- so you need both a custom “cow” file and a patch to the program itself, in order to print underscores instead of hyphens.

The cowsay patch itself is pretty simple:

<         " " . ("-" x $max2) . " \n"
>         " \\" . ("_" x $max) . "/ \n"

And the change to the original “default.cow” is pretty minimal, too:

<              $tongue ||____  |
<                 ||    w||
>              $tongue ||----w |

After that, the result's a little something like this:

/ i like to lie down and watch the stars. \
\ mainly when dumb kids tip me over...    /
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||____  |
                ||    w||
                ||     ||

Just apply those patches (with the patch(1) command) and you can easily make your milky comments, and thus encourage curiosity itself! :)

Get the cowsay patch here and the standalone HTML cow here. Patch the script, then put “html.cow” in your cow directory (/usr/share/cows/ or /usr/local/share/cows/, probably).

Alternatively, you can get a pre-patched version of cowsay here.