YUI Raptors Will Eat Your Face

By Evan — — Miscellany, Web

To my surprise, it turns out I have some influence over which animal will appear on the cover of the book. So I threw the question out on the internal YUI team IRC channel. As expected, the results were unsatisfactory.

To protect the guilty, all IRC nicks have been further anonymized.

  • [3:12pm] evangoer: Okay, important business.
  • [3:12pm] evangoer: My editor tells me that while I cannot choose the O’Reilly animal for the cover,
  • [3:12pm] evangoer: I can send her a list of suggestions.
  • [3:12pm] evangoer: So: floor is open
  • [3:12pm] MrPink: NARWHAL
  • [3:12pm] evangoer: ooh good start
  • [3:12pm] MrPink: Failing that, Moby Dick.
  • [3:12pm] MrPink: Or, really, any albino sperm whale.
  • [3:13pm] MrBrown: t. rex
  • [3:13pm] MrWhite: camel spider?
  • [3:13pm] evangoer: I was going to say velociraptor, but T Rex > Velociraptor
  • [3:13pm] evangoer: way too scary, Mr. White
  • [3:13pm] MrPink: If there’s a camel spider on the book, it will never enter my house.
  • [3:13pm] MrWhite: Has someone taken the angler fish?
  • [3:13pm] evangoer: yup bad marketing
  • [3:14pm] MrBrown: ditto
  • [3:14pm] evangoer: female or male angler fish?
  • [3:14pm] MrWhite: haha
  • [3:14pm] MrOrange: Velociraptors are scarier than T. Rex, IMHO.
  • [3:14pm] MrBlonde: Yeti Crab
  • [3:14pm] MrBrown: If they want a list, we should put both
  • [3:14pm] evangoer: yes but T. Rex kicked their butts in Jurassic park 1
  • [3:14pm] MrWhite: velociraptors are a fad (like the internet). T Rex has stood the test of time.
  • [3:15pm] MrOrange: True. But T. Rex couldn’t enter the computer room and kitchen.
  • [3:15pm] MrBrown: Mr. White: Good point.
  • [3:15pm] MrPink: YUI is clever. Like a raptor.
  • [3:15pm] MrPink: Also, learning YUI will help you open doors.
  • [3:15pm] MrOrange: Mr. Pink++
  • [3:15pm] evangoer: YUI will crunch through your problems like the jaws of a T. Rex.
  • [3:16pm] MrBlonde: Red Panda ‘(“shining cat,” from a Latinized form of the Greek, ailouros, “cat,” and the participial form of the Latin fulgere, “to shine”)’
  • [3:16pm] MrPink: Also, it’s modular. The modules work together to overcome problems, in much the same way that raptors work together to eat your face.
  • [3:16pm] MrWhite: Isn’t there a flying snake?
  • [3:16pm] MrPink: Mr. White: HOLY HELL WHERE KILL IT
  • [3:16pm] MrBrown: I think its a common misnomer that the T Rex is not as smart as the v-raptor. A consensus of paleontologists agree the T Rex is as smart as they come.
  • [3:16pm] MrPink: That said, as awesome as raptors are, narwhals are infinitely awesomer.
  • [3:17pm] MrWhite: 9 out of 10 paleontologists agree…
  • [3:17pm] MrBrown: Apparently, they are the most intelligent hunter evah
  • [3:17pm] evangoer: oooh the red panda is cute!
  • [3:17pm] MrPink: 1 out of 1 paleontologists I live with would agree with Mr. Brown’s stance on T-Rexes.
  • [3:17pm] evangoer: “its population is estimated at fewer than 10,000 mature individuals.” Well that’s YUI for sure.
  • [3:17pm] MrBlue: So, technically an animal: the YUI J-Pop star in illustration format on the cover?
  • [3:18pm] MrPink: 1 out of 1 paleontologists I live with would also like me to recommend the humble compsognathus, which she thinks is cute: http: //en.wikipedia.org/wiki/Compsognathus
  • [3:18pm] MrBrown: Mr. Blue: thread winner!!!
  • [3:18pm] MrPink: Mr. Blue: Ha.
  • [3:18pm] MrBlonde: We should get the “Distinct George” on the cover..
  • [3:21pm] evangoer: Alright, well fantastic work, gentlemen. Will send this out to O’Reilly post-haste.

Lean HTML

By Evan — — Web

When I started working on the YUI 3 Cookbook, I spent more time than I should have waffling on how to format the code examples. The most obvious way to go would be to show the entire page, like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Some Code Example</title>
    </head>
    <body>
        <div id="demo"></div>

        <script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script>
        <script>
        YUI().use("node", function (Y) {
            Y.one("#demo").setContent("HELLOSKI");
        });
        </script>
    </body>
</html>

That’s a lot of HTML line noise for three lines of JavaScript. Possibly okay for examples that are many dozens of lines long. But most recipes in the Cookbook just illustrate a single principle, and so are deliberately quite short.

A better approach, I thought, would be to strip away all the markup and keep the focus on the JavaScript:

YUI().use("node", function (Y) {
    Y.one("#demo").setContent("HELLOSKI");
});

The JavaScript would be understood to be running in a boilerplate page with a handy demo <div>, a <script> element to load the YUI seed file, and maybe a yui3-skin-sam class on the body. I figured that designing the right boilerplate would cover over 90% of the examples — any example that needed slightly different markup could just show the full HTML.

But as I started working through the recipes, I discovered that no matter how I tweaked the boilerplate, I never got close to 90%. It was more like 60%. Some examples in the Loading chapter needed a different <script> URL. Other examples didn’t work very well with with a single demo <div> — they needed multiple <div>s, or a <ul>. Or they needed some unique CSS classes. I found myself distorting the JS examples to fit the HTML boilerplate. Not good.

So I dropped that plan and went back to showing the entire page, but with structural open and close tags stripped out.

<!DOCTYPE html>
<title>Some Code Example</title>

<div id="demo"></div>

<script src="http://yui.yahooapis.com/3.4.0/build/yui/yui-min.js"></script>
<script>
YUI().use("node", function (Y) {
    Y.one("#demo").setContent("HELLOSKI");
});
</script>

Valid HTML, minimal line noise, consistently shows the reader the complete context that the JavaScript is running in. Success!

Of course, omitting optional tags from the markup isn’t anything new and exciting. This is how HTML has worked forever. It was a particularly useful feature to have in your pocket back in 2003-2004, the era when misinformed XHTML advocates were running around that XHTML was kewler and in particular, “more efficient!” than HTML. Thanks to some very aggressive marketing from various Industry Thought Leaders, the webdev community had managed to conflate “XHTML” with “clean markup” and also “CSS-based layouts.” So you had to gently point out to people that not only was it possible to write clean HTML 4.01 Strict, but an HTML 4 page would always be shorter than the equivalent XHTML. It took time to undo the damage, but these bad memes have long since been banished to low-information “webmaster” forums, setting up the larger community to receive and accept HTML5. You’re welcome, Thought Leaders!

Anyway, after working with a leaner style for a while, what surprises me is that it’s the exception, not the norm. Omitting <html>, <head>, and <body>means:

  • Fewer bytes. Actually, this is the weakest argument in favor, because we’re not talking about a large number of bytes. You could save even more bytes by dropping close tags (which in some cases I’m okay with) and by unquoting your attributes (which makes me queasy). Eventually you start crossing over into the world of HTML minification, which seems a tough nut to crack.
  • Less line noise. The difference is most obvious for short code examples. But even in a real world page, cruft is cruft.
  • Simpler indent style. This is something that’s bugged me for nearly fifteen years, and possibly the biggest win. Do I indent the <head> and <body>? Do I indent the direct children of the <head> and <body>? Using a lean style removes all of these annoying decisions. The elements you actually care about start flush left. End of story.

My guess is that the reason this style looks weird has to do with pedagogy. Since the early 90s, HTML books and tutorials have all shown these structural elements explicitly. This is a good idea because it helps new students understand the structure of the document. Or if you didn’t learn by reading a book or tutorial, you probably copied-and-pasted your code from someone who copied-and-pasted their code from someone who did.

However, professionals don’t need this crutch anymore. Better to just put the head stuff at the top, the body stuff below that, and separate the two with a newline. Boom, done. It will stop looking weird and start looking AWESOME in a day. Two days, tops.

One solid technical reason to have an explicit <body> is if you need that element stamped with an ID or class before JavaScript loads. Or you might be following an in-house coding convention or style guide, which of course trumps anything above.

The one thing I’m not concerned about is that people will read the code examples in the YUI 3 Cookbook and exclaim, “OMG that’s broken HTML!1!” The audience for the Cookbook is JavaScript developers, and in particular, JavaScript developers who are looking for a framework good for building large, sophisticated web apps. At that point, the reader really needs to know how HTML works. If they don’t, they probably bought the book too soon.

JSTutorial.net is Up (Sort Of)

By Evan — — Web

Per Echo Nolan’s suggestion, I’ve put up jstutorial.net as a simple static page with links to modern JavaScript tutorials. This is just a temporary measure (although “temporary measures” have a funny way of becoming permanent).
The site lists only two resources right now: Ilya Kantor’s The JavaScript Tutorial and Marijn Haverbeke’s Eloquent JavaScript. This is a pretty tiny list, so any further suggestions are most welcome. The submission guidelines from the site are repeated below.

JSTutorial.net Submission Guidelines

If you have a tutorial to suggest, please contact me. Any suggestion must A) at least be on par with the resources listed above and B) at least make some attempt to target non-programmers in the introductory lessons. There are many sites that meet A) but not B), or vice versa.

Here’s what will instantly disqualify a site:

  • Showing how to use <!-- //--> comments to hide JavaScript within <script> elements.
  • Providing a first example that uses alert() or document.write().
  • Attaching events using the onclick or related HTML attributes.
  • Covering the page with ads, branding, and other extraneous crap to the point where it’s impossible to focus on the actual text.

In other words, a late 1990s tutorial that has been sitting around collecting ad revenue for the last fifteen years will not make the cut. Even if it ranks well on Google. Sorry.

Posted in Web

Search Engines and JS Tutorials: Still Appalling

By Evan — — Web

About a year ago, I observed that ancient HTML and JS tutorials were choking the web like kudzu. Fast-forward to the present day, and… nothing has changed.

Focusing on Google results for JS tutorials (Bing is equally bad):

  1. On the first page of results for “javascript tutorial”, every single result ranges from bad to truly awful. My proxy for “bad” is, the first example A) uses fallback comments for Netscape Navigator 1.0 and B) uses alert() or document.write(). Most tutorials go rapidly downhill from there.

  2. The 1% of users who somehow manage to click through to the second page of results will finally stumble into the first good link in position #14 — Eloquent JavaScript by Marijn Haverbeke. This is an excellent JavaScript resource, well-written and modern. I own the dead-tree book and recommend it highly. Haverbeke bills Eloquent JavaScript as an “introduction to the JavaScript programming language and programming in general,” but I think that aside from the first chapter on variables and control flow, the book is too sophisticated to be an introductory tutorial.

  3. The third page of results includes the Mozilla Developer Network JavaScript docs, which are excellent but in no way a tutorial. It also includes a JS tutorial written by jQuery inventor John Resig, targeted at experienced programmers. Finally, in position #29, an actually useful JS tutorial site appears, javascript.info. javascript.info is well-organized and comprehensive. It’s not hideously ugly and slathered with ads. The early lessons ignore legacy nonsense from 1995. It’s pitched at the right audience. We have a winner!

This state of affairs has made me angry. So angry in fact, that in a fit of pique I ran out and registered jstutorial.net. That’s like making someone mad enough to take a $10 out of their wallet and tear it up right in front of you. That’s angry.

After the YUI 3 Cookbook draft is done, I’m going to check one last time to see if anything has changed. I’ve registered a domain name, people. Don’t make me use it.

Prescience

By Evan — — Tech

The scene: a demonstration in the mid-70s of an early multitasking OS at Xerox PARC:

To illustrate the flexibility of the system, the Xerox presenter clicked from a window in which he had been composing software code to another window that displayed a newly arrived e-mail message. He quickly read and replied to the message, then hopped back to the programming window and continued coding. Some in the audience applauded the new system. They saw that it would enable people to use their computers much more efficiently. Others recoiled from it. “Why in the world would you want to be interrupted — and distracted — by e-mail while programming?” one of the attending scientists angrily demanded.

— Excerpted from Nicholas Carr’s The Shallows. Highly recommended.

You Will Believe a Man Can be a Dying AT-AT

By Evan — — SF

It’s probably too late to get tickets, but if there are any to be had, I highly recommend One-Man Star Wars at the SJ Rep. Playing this weekend only.

Of course, this requires heading down to the land of SJSU students with extremely poor taste in clothing. Downtown San Jose. You will never find a more wretched hive of scum and villainy. You must be cautious.

Posted in SF

It’s Not Pharmacy Spam, It’s My *Art*, Damnit

By Evan — — Miscellany

When their comments are deleted, trolls typically complain about “censorship.” But an enterprising troll on Making Light, after having a previous comment disemvoweled, had the following interesting new angle. (Note that his post complaining about disemvoweling was also disemvoweled, but I have re-emvoweled this excerpt as best I could. Just one of the many services we provide.)

If [a] past comment here still keep the copyright [i]n [i]t (according to several experts, including [E]FF) is censoring it by removing vowels and turning it into gibberish is not only rude, it’s downright illegal.

Interestingly, the troll included the EFF as one of the “several experts” on copyright law who agreed with him. That made me curious — what does the EFF actually say about disemvoweling?

I’m upset that a moderator disemvowelled my comments. Is that illegal?

No. While we are aware of no court cases regarding disemvowelling, removing the vowels from a post is a form of criticism and commentary on that post. Even if it not explicitly permitted by the blog’s terms of use or an acceptable use policy, a court would likely consider the edit to be a fair use of your comment.

Well, what does the EFF know anyway? Buncha hippies. Hippies who are also lawyers. Hippies who are also lawyers based in San Francisco. Really, does it get any worse than that?

Quite frankly, I think that the safest legal interpretation is that once a troll or spammer deposits their droppings on your forum or blog, it becomes Sacred Text, protected by the full force of US Copyright law, WIPO, and most likely God Herself. Personally, I just hope I’m covered by fair use for daring to excerpt the troll’s comment. And for that matter, for excerpting the EFF. Although I’m somewhat less afraid of the EFF, ’cause you know, hippies — pfft.

Welcome to the Family!

By Evan — — Writing

David Mack, Another reason to loathe Facebook:

Facebook, on its own initiative and without asking me first, changed my Official Author Page to a Community Page, a sort of public forum that anyone can create. This removes certain features, takes its content out of people’s newsfeeds, deprives me of official control over the page, and generally makes it sort of useless. It also makes it harder to distinguish from Facebook’s automatically generated info pages.

I might have restrained my response to an angry sigh and a shrug except for one thing. In the page’s top bar of information, they altered a key piece of information. It now reads “Community Page about David W. Mack” — complete with that link. That’s right: those morons at Facebook linked what had been MY OFFICIAL PAGE to one about the OTHER David Mack, the creator of Kabuki. And they did this FOR NO REASON. And left me NO MEANS OF FIXING IT.

This just highlights the importance of proper namespacing, in meatspace as well as cyberspace. As luck would have it, I am offering membership in the extremely rare “Goer” namespace, for a reasonable price…