Unclouded by Conscience, Remorse, or Delusions of Morality

My second favorite Slate contributor Tom Scocca piles onto the Yankees:

Before I first moved to New York, I hadn’t fully understood what sad, wretched front-runners the legions of Yankees fans really are. I always knew they were awful people, the most obnoxious fans in sports, but I hadn’t grasped how weak-hearted they were. When the Yankees lose, there is no defiance, no residual pride, no we-want-a-rematch resolve. (The closest the Yankees come to that is their annual scheming to hire anyone who beats them.)

A great read, but there’s something Scocca is missing here. Yes, Yankees fans are the worst of the worst. But you have to kind of admire the ruthless soulless perfection of the team, in much the same way that Bishop and Ash admired the Facehugger xenomorph.

So yes, let’s all cheer the disappearance of Yankees caps. But our joy in victory must always be tempered with the knowledge that by spring, new eggs will be hatching.

YUI 3 Grids are Dead Simple

If we were summarizing the history of webpage layout technologies, it would look something like the following.

  • 1990 — 1993: Before the Dawn of Civilization. Wandering hunter-gatherer tribes use only the primitive tools available to them: headings, lists, paragraphs.
  • 1994 — 1997: The Tabular Empire. The invention of the “sidebar”. Enterprising tribes settle down and begin building magnificently complex structures.
  • 1998 — 1999: The Baroque Period. Monuments constructed by the Tabular Empire grow increasingly ornate and unstable. The Browser Wars threaten all civilization. Meanwhile, barbarians lurk out in the steppes, armed with increasingly sophisticated div weaponry.
  • 2000 — 2002: The Dark Ages. The economy collapses. Citizens flee into the unprotected wilderness, and many are absorbed into the barbarian tribes and learn their ways. It takes secret black magic to get anything to work at all. Only the greatest shamans are able to build anything in this cold, hostile environment.
  • 2003 — 2005: The Renaissance. People begin sharing knowledge. Great new schools of thought begin to arise on how to work around browser quirks.
  • 2006 — 2010: The Age of Enlightenment. Systematic investigation of the browser universe. Knowledge is codified. The rise of CSS frameworks.

My CSS framework of choice has long been my own employer’s YUI. YUI Fonts and YUI Reset (or their moral equivalents from other frameworks) have always been no-brainers. But YUI 2 Grids has always been more optional.

As an example, take this site’s layout. It’s currently a single column, so no need for a grid there. However, it does actually put two columns next to each other in a couple places — in the Comments form and in the footer. So I could have used Grids… but chose not to. First, YUI 2 Grids is several KB, which is large enough that I didn’t want to just throw it in there if I wasn’t sure I was going to use it. Second, it’s complicated enough (with its nested doc3s and yui-t6s and yui-u firsts and whatnot) that for simple things it’s easier to just do a homebrew solution. Float a div over, style it, peek at it in a couple browsers, and hope for the best.

That’s all changed with the recent release of YUI 3 Grids, new in YUI 3.2.0. Not only is this version tiny (1.5 KB), but it’s the first layout system I’ve ever used where I can just write out whatever grid I want from memory, without ever needing to look at the docs. Observe:

<div class="yui3-g">
  <div class="yui3-u-1-3">
    <p>1/3</p>
  </div>
  <div class="yui3-u-2-3">
    <p>2/3</p>
  </div>
</div>

View results here.

You can slice and dice up the parent yui3-g div into as many units as you like using yui3-u-numerator-denominator, going all the way down to 1/24ths. Or you can use generic yui-us and fix the widths of each unit to a particular pixel.

Nesting is straightforward as well. Just spawn a new yui3-g, and everything works as expected.

<div class="yui3-g">
  <div class="yui3-u-1-3">
    <p>1/3</p>
  </div>
  <div class="yui3-u-2-3">
    <div class="yui3-g">
      <div class="yui3-u-1-2">
        <p>2/3 * 1/2</p>
      </div>
      <div class="yui3-u-1-2">
        <p>2/3 * 1/2</p>
      </div>
    </div>
  </div>
</div>

View results here.

I’ve also been playing around with weird edge cases. At work, I have a project that generates 1-4 widgets in rows. I was curious to see what would happen with Grids if you leave a column out:

<div class="yui3-g">
  <div class="yui3-u-1-4">
    <p>1/4</p>
  </div>
  <div class="yui3-u-1-4">
    <p>1/4</p>
  </div>
  <div class="yui3-u-1-4">
    <p>1/4</p>
  </div>
  <-- Ruh-oh, missing div! -->
</div>

View results here.

Grids does the right thing again: it fills up the space with three columns, and leaves the fourth slot empty. This meant that I wasn’t forced to create a dummy div to fill up the space, which slightly simplified my backend code. Not that this was a huge win or anything, but still, a happy moment.

So I think at this point, there’s not a single site where I wouldn’t just go ahead and use all three of Reset, Fonts, and Grids. Huge thanks to Matt Sweeney for architecting the new Grids. It was worth the wait.

Ancient HTML and JS Tutorials are Choking the Web Like Kudzu

The timing of Promote JS! is impressive. Just last Friday, I was complaining to one of my colleagues about the decrepit state of online JavaScript documentation, as viewed through the lens of the major search engines.

It turns out that the search engines actually do a fine job for most languages:

  • php string” — Google’s top result is the PHP String Functions section of the official PHP.net manual, with PHP Strings as a secondary result. I actually might flip the order here, but still an excellent job. Bing points directly to the string page, with a bunch of secondary links. Also excellent.
  • python string” — Google’s top result is the Built-in Types section of the official python docs, followed by the official docs for string functions. Bing does the reverse, pointing to string functions first, then the types page. All good.
  • java string” — Google’s top result is the official Java 1.5 Javadoc for String. This should probably be v1.6 (aka Java6 SE, aka whatever label the Sun marketing department was using that month), but v1.5 isn’t bad. Bing’s top result is the official String page… for Java v1.3. Oops!
  • c# string” — Bing and Google both point to the official MSDN string type documentation.
  • ruby string” — Bing and Google’s both point to the official Ruby doc for the String object.

And so on. Not a whole lot to complain about.

A Vast Wasteland of JavaScript Tutorials

But when it comes to JavaScript, Google and Bing both go braindead. The top result for “javascript string” is not something sensible, like MDC Strings. It’s a page owned by W3C Schools, a mediocre tutorial site. In fact, searching for “javascript anything” is very likely take you to W3C Schools. “javascript array“. “javascript split“. “javascript dom“. More on W3C Schools later.

Searching for “javascript tutorial” is even more depressing. One could imagine a really great JavaScript tutorial, a tutorial written from the ground up for the modern era. But we’re not looking for greatness; we’re just looking for “avoidance of really dumb stuff.” With that bar in mind, here’s what Google’s Top Ten gets you:

  • Tutorials that feature document.write() front and center with no caveats: 8
  • Tutorials with no syntax highlighting: 7
  • Tutorials that waste time explaining how to write inaccurate browser detection scripts: 4
  • Tutorials that include HTML comments in the script element, despite the fact that this is only necessary if you are designing for Netscape 1.0 and Mosaic: 9
  • Tutorials that devote more than half their page real estate to ads: 4
  • Tutorials with hilarious old skool background images and clip art: 1

Every single one of these tutorials is completely disconnected from modern frontend engineering practice. They were written in an era when the competition was Java applets. And yet over a decade later, Google and Bing still link to them.

HTML: Party like it’s 1999

The situation for HTML tutorials isn’t much better. From Google’s first page of results for “html tutorial“, you get:

  • Tutorials that engage in unironic discussion of font, basefont, align=center, vlink, or other nonsense: 5
  • Tutorials with no syntax highlighting: 7
  • Tutorials that suffer from a fundamental confusion about tags vs. elements: 5
  • Tutorials that contain detailed instructions on how to use the applet element: 3
  • Tutorials that devote more than half their page real estate to ads: 3
  • Tutorials with hilarious old skool background images and clip art: 3

There’s actually one tutorial on the first page that is kinda sorta okay. But you have to click through to Page 2 to get to a truly excellent, modern HTML tutorial. That means HTML is arguably ahead of JavaScript, if not by much.

A Great Vampire Squid Wrapped Around the Face of the Webdev Community

When I first started writing this piece, I thought there was no reason to pick on any of these sites by name. Most of these tutorials were written long ago by well-meaning people and then abandoned. If these obsolete tutorials still SEO well after all these years, that’s not their fault, that’s Google and Bing’s fault.

But it soon became clear there would have to be an exception.

Say what you will about W3C Schools — they are geniuses at SEO. They are the #1 HTML tutorial. The #1 JavaScript tutorial. The #1 CSS tutorial. The #1 PHP tutorial. The #1 SQL tutorial. The #1 ASP tutorial, the #1 SOAP tutorial, the #1 XML tutorial, the #1 Flash tutorial, and many many more. W3C Schools just dominates nearly every important technology for building web apps, at least as the world understood web apps in 2003. Unfortunately, some of those same technologies are still very important for building web applications today.

W3C Schools tutorials aren’t actually the worst out there — the field is pretty bad — but they’re awfully mediocre. Each tutorial is a flat list of concepts, all treated equally. A typical tutorial page consists of NAME OF CONCEPT, a couple of sentences about CONCEPT, and a short code snippet that includes CONCEPT. Then click NEXT. No meaningful discussion, advice on best practices, pitfalls, etc.

Now don’t get me wrong — you can’t fault someone for trying to make an honest buck by maximizing ad impressions while minimizing content production costs. Still, I would argue that this pedagogical approach is not necessarily optimal. To make matters worse, some of the material is actively harmful.

  • The HTML tutorial is weak tea, but at least it doesn’t exactly do anything really atrocious. I would like it to have discussed CSS in a more integrated way. Or provide some real context or guidance. But whatever. It does omit a good deal of the bad stuff. There are far worse things out there.

  • The JavaScript tutorial is more dangerous. Heavy usage of document.write(), silly browser detection scripts, and other things that would give poor Douglas Crockford a heart attack. The script element is shown going anywhere in the document you please without a word about performance considerations. Et cetera. Nor is there any larger discussion of how to actually use JavaScript, but of course there’s really no room for that kind of stuff given the format.

  • The PHP tutorial isn’t as fundamentally important as HTML and JavaScript, but I thought it would be worth checking out. I was pleasantly surprised to discover that it actually has some meat on its bones — its pages have more substantial code examples, and there’s actual advice on what to do and what not to do. There’s even discussion on how to sanitize your inputs, imagine that! Sadly, the MySQL section is seriously broken. Nothing about PDO or even mysqli_connect() — it’s all about the old, dangerous mysql_connect() API. Yuck.

Anyway, this is what Google, and therefore newcomers to the subject, think is the best educational material to be found. Which means that thousands of people every day are learning all kinds of things that they will have to unlearn months or years later. Or worse, will never unlearn.

What to do?

In the beginning, there was a primeval explosion of HTML and JavaScript tutorials. Today, we are living with the decaying remnants of that explosion. Ordinarily these remnants would be invisible, but thanks to powerful, expensive instruments such as Google, we can detect them even today. Isn’t science awesome?

Well, we can’t exactly launch the Space Shuttle to install a corrective lens in Google’s optics.

Or… can we?

For starters, yes we can… whine to Google and Microsoft. A lot. And loudly! Shame them into fixing their algorithms. There are thousands of Google and Microsoft engineers using JavaScript too, and they must be embarrassed at how poorly they’re performing for these queries.

I also think the organic SEO approach is worth pursuing. The Promote JS! project is a an interesting start. More links pointing to the good stuff from more trusted sites — probably couldn’t hurt.

Finally, we need a new generation of modern HTML and JavaScript tutorials to flood out the crap that’s currently there. You only need one canonical version of the reference documentation, but when it comes to well-written, beautifully designed tutorials and guides, the more the merrier. Of course, propective tutorial writers should keep in mind that there’s no serious money to be made in this space, which is why we’re stuck with the fossils we have today. It’s going to have to be a labor of love — from today’s front end engineers to tomorrow’s. Awwww.

Fever

I’m trying out a new feed reader called Fever. So far, I like it. Even if I didn’t like it, at the very least Fever’s creator Shaun Inman deserves major credit for diving into a moribund marketplace and trying to create something new and interesting.

Fever is a collection of PHP files that you install on your own server, sold for $30/pop. There is no central hosting, so if you don’t have access to a server, you’re out of luck. At first glance this seems like a crazy business decision. On the other hand:

  • running a hosted service is a PITA
  • in 2010, anyone who is actively looking for a new feed reader is almost guaranteed to be a nerd who has their own server

More interesting than Fever’s basic architecture or business model is how Fever treats feeds and entries. There are three basic categories:

  • Kindling — feeds that you want to read on a regular basis. Family, friends, important stuff.
  • Sparks — feeds that you don’t really care about reading regularly. These feeds only really exist as fodder for the Hot list.
  • The Hot list — a list of links that Fever has determined to be relevant based on the contents of your Kindling and Sparks.

For example, one of the top entries in my Hot list right now is “Do you skim?” In NetNewsWire, I would have seen this post anyway, since tor.com is one of my daily reads. However, Fever boosts this post to the top because the link is also referenced by SFSignal (a Spark) and a couple of science fiction author blogs (also Sparks). Another link in the Hot list is a PDF article in National Affairs by Robert Solow, “Science and Ideology in Economics.” I don’t subscribe to National Affairs at all, but that link appeared in a couple of my Sparks, so poof! there it is.

What I love about this design is that it mirrors how I actually want to think about feeds. There are my actual friends and colleagues who I want to pay attention to, plus a small number of pro blogs that are consistently interesting. And then there are feeds that are sort of interesting, but just not worth the cost of adding to the feed reader. But in Fever, you can just throw lower-priority feeds into Sparks and never have to think about them again. If anything interesting happens, Fever will bubble it up. In traditional feed readers, this kind of thing is a chore — I know I can only keep up with so many feeds, so every new feed is a costly decision. Fever solves this problem elegantly. It’s actually kind of liberating to race around the web, adding feeds again.

The other brilliant thing about Fever is that unread counts are not shown by default.

What are my issues with Fever?

  • The only big one is, reading authenticated feeds does not seem to work, at least not with protected LiveJournals. This only affects a couple of my feeds, but it’s something I really need to figure out before I’ll be able to wean myself from NetNewsWire entirely.
  • This might be pilot error, but as far as I can tell, links in the Hot list don’t seem to have the concept of “Read / Unread”. Instead, they have a “Blacklist” button that nukes the link from view. There’s something a little off about having only this metaphor for clearing up the Hot list.
  • Building up Sparks is pretty fun, but you have to be careful to keep things balanced: if you add a bunch of SF writer blogs, you need to add a roughly equal number of econ blogs, and so on. Otherwise one group will start to dominate. (SF nerds vs. econ nerds: FIGHT!)
  • So far, Twitter appears to be useless. I’ve added a few of the people I follow on Twitter to Sparks, and either these test feeds don’t include enough overlapping links to make a difference, or Fever is getting confused by Twitter’s link shorteners. Screw link shorteners and screw Twitter.

So next up, figuring out the auth problem. After that, pulling in my Facebook activity and turning it into a dedicated private feed for Fever to consume. Thanks to Facebook’s EVIL PRIVACY-DESTROYING BABY-KILLING Graph API, I think that project might be easy enough even for me.

The Greatest Generation Really Was Pretty Great!

I’ve been reading Steve Blank’s outstanding series, The Secret History of Silicon Valley. Blank makes the case that much of the valley’s history has been simply forgotten, and the true starting point is at least 100 years ago:

I read all the popular books about the valley and they all told a variant of the same story; entrepreneurs as heroes building the Semiconductor and Personal Computer companies: Bill Hewlett and David Packard at HP, Bob Taylor and the team at Xerox PARC, Steve Jobs and Wozniak at Apple, Gordon Moore and Bob Noyce at Intel, etc. These were inspiring stories, but I realized that, no surprise, the popular press were writing books that had mass appeal. They were all fun reads about plucky entrepreneurs who start from nothing and against all odds, build a successful company.

To my surprise, I discovered that yes, Silicon Valley did start in a garage in Palo Alto, but it didn’t start in the Hewlett Packard garage. The first electronics company in Silicon Valley was Federal Telegraph, a tube company started in 1909 in Palo Alto as Poulsen Wireless. (This October is the 100th anniversary of Silicon Valley, unnoticed and unmentioned by anyone.) By 1912, Lee Deforest working at Federal Telegraph would invent the Triode, (a tube amplifier) and would go on to become the Steve Jobs of his day — visionary, charismatic and controversial… By 1937, when Bill Hewlett and David Packard left Stanford to start HP, the agricultural fields outside of Stanford had already become “Vacuum Tube Valley.”

The part that really struck me was the section about World War II, where Fred Terman and his colleagues were tasked with defeating Germany’s very sophisticated and secret electronic air defense system, which was responsible for inflicting unsustainable losses on Allied bomber crews. In an incredibly short period of time, these engineers completely transformed the nature of electronic warfare. Or as Blank puts it,

Just to give you a sense of scale of how big this electronic warfare effort was, we built over 30,000 jammers, with entire factories running 24/7 in the U.S. making nothing but jammers to put on our bombers.

By the end of World War II, over Europe, a bomber stream no longer consisted of just planes with bombs. Now the bombers were accompanied by electronics intelligence planes looking for new radar signals, escort bombers just full of jammers and others full of chaff, as well as P-51 fighter planes patrolling alongside our bomber stream.

Unbelievably, in less than two years, Terman’s Radio Research lab invented an industry and had turned out a flurry of new electronic devices the likes of which had never been seen.

Aside from catching up on my history, the other thing I’ve been doing is moving the HTML tutorial out of WordPress completely and into the new template. This also gave me the opportunity to do some cleanup — fixing typos, outdated sections, broken links, and so on.

One section of the tutorial discusses abusing HTML borders to do dotted underlines and other fancy decorations. Originally, I had a link to a 2003 version of the CSS 3 spec, which included the possibility of doing dotted underlines natively, using CSS text-decoration As I was editing, I thought it would be good to update the link to the latest version of the draft. To my surprise, the 2007 version of the section now says in red,

Paul and I have agreed that we want to simplify the set of properties introduced in the previous CSS3 Text Candidate Recommendation. We’re not sure how yet, though, and would like to solicit input from the www-style community.
So far, we think that the following capabilities should be sufficient…

Hmmm. Okay, so to recap:

  • In the early 1940s, Fred Terman’s Radio Research Lab spawned an entire new industry in a couple of years, based on far-out science-fictional technology, shipped product, and helped win the war against fascism.

  • Meanwhile in the 2000s, after nearly a decade, we still can’t figure out how to do fancy underlines.

Welcome to goer.org 4.0

After three and a half years, it’s about time for another redesign. Welcome to goer.org 4.0 — now with fewer features!

For comparison and amusement, the previous three revisions are preserved in amber here:

  • goer.org 1.0 (2000-2003): Look at those elegant rounded corners! Clearly a site way ahead of its time.
  • goer.org 2.0 (2003-2006): We’ve made the jump from a table-based layout to an all CSS version. It turned out… awfully boxy and green. Although to be fair, I believe this layout actually worked in Netscape 4 and Internet Explorer 4.
  • goer.org 3.0 (2007-2010): Goodbye green, hello brown! This was my first attempt at a YUI Grids based layout.

I was satisfied with version 3.0 at the time, but over the last couple of years, I became more and more unhappy with the site. Not only did it still look amateurish, it was way too hard to read. But a major overhaul seemed daunting, and I wasn’t quite sure how to fix it in the first place.

An Epiphany

Then I downloaded Safari 5, which comes with the famous Readability plugin built in, and tried it out on a couple of popular news sites. The effect of seeing the article without all the extra navigational crap was startling, and it jolted me into taking a hard look at my own site.

  • Why bother listing recent posts next to every entry? Especially since the posts aren’t necessarily so recent?
  • Why show the blogroll next to every entry? Giving a nod to friends and family is nice, but do all those links need to be there every time?
  • Why show my Delicious linkroll next to every entry? Is there a reason that Javascript needs to be loaded for every entry?
  • Why is the Creative Commons section so huge?
  • Does the site really need a site-specific search box? (Oops, it’s broken anyway.)

It occurred to me that just because blogs traditionally have linkrolls and tag clouds and thirty different “sharing” buttons and blog ads and God knows what else in the sidebar, doesn’t mean that’s how it has to be.

Now inspired, I read up a little on typography for the first time, well, ever. And the good news is that some of the principles of good typography are so simple that even knucklehead non-designers like myself can understand them. For instance, I had always believed that websites should let the main content area flow as wide as the user wanted. If the user wanted a narrower or wider view, they could just stretch their browser window. Oh sure, some websites force a particular column width — websites run by The Man! Why not be freaky and free?

However, now I realize that there is in fact an optimal range of width for English text. That’s why paperbacks are as wide as they are. That’s why newspapers and magazines have columns. And that’s why this site now uses a fixed width layout. If you don’t like it, take it up with the Commandant.

So What’s Changed?

A bunch of things:

  • As mentioned above, the sidebar is completely gone. All the stuff that was there has been either A) miniaturized or B) moved to a separate dedicated page.
  • Although the layout of the new site is actually much simpler, there are many changes to typography and general look-and-feel. The overall look I was going for was “book-like”.
  • The banner at the top has been refined. The images are larger, and I’ve eliminated a couple of the picture frames. The site’s color scheme still derives from the images (browns and other warm shades).
  • The comment form has been revamped according to the guidelines in Luke Wroblewski’s Web Form Design. That process might be worth a post all by itself.
  • The backend is still Movable Type, but upgraded from MT3 to MT5. I put a lot of thought into other options: staying on MT3 forever, migrating to WordPress, and even (briefly) rolling my own system. That process might be worth a separate post as well.
  • A number of performance improvements thanks to the slimmer design and some help from YSlow. Page weight is smaller, fewer HTTP requests, static assets have far-future Expires headers, etc. Most pages now fully load in subsecond time.
  • Finally, the site has migrated from HTML 4.01 Strict to HTML 5. Not that I’m using any major HTML 5 features yet, but I do like me that HTML 5 doctype.

Credits

This redesign probably would not have been possible without:

  • The engineers who support YSlow.
  • Luke Wroblewski, for writing Web Form Design.
  • The Yahoo! Search design team. I’m not a designer by any means, and my visual thinking is pretty weak. But thanks to being around some really talented people the last couple of years, I’ve managed to pick up a few tricks by osmosis. Remember, it’s not that the bear dances well, it’s that he dances at all.
  • My wife Sarah, who has a much keener eye for color and layout than I do, and can spot something that’s a pixel out of line without even straining.

And that’s about it! Here’s looking forward to goer.org 5.0, coming in 2014 to a browser near you.

Baby Goer Has Arrived

“He is the one baby on the floor we’re not remotely worried about,” said the nurse as she looked at his vitals on the monitor.

He is able to lift his head easily.

He has nearly a full head of hair.

He is alert, present, curious.

He is nursing like a champ.

He is so handsome.

We are so fortunate.

Evan and Sarah meeting their new baby boy

Scrunchy face baby

Hello world!