Fonts

I’ve been getting more and more excited about the impending freedom of the @font-face CSS declaration. The prospect using any true-type or open-type font in a web page without resorting to flash or images is incredible. If you’re viewing this site in Safari 4 or the latest beta releases of Firefox, Opera, and MSIE, you’ll have a much improved experience.

The body text is set in Bodoni SvtyTwo OS, chosen for its beautiful italics (not an oblique, but a true italic), dramatic hinting, and straightforward lines. I chose the OS over the regular Bodoni SvtyTwo because of the more stylish “lower case” numerals: 1234567890.

The headings are set in Qlassik Medium, by Dimitri Castrigue. It has just enough fun to make it stand out, but not so much as to be ridiculous.

Code snippets are set in the famous Bitstream Vera Sans Mono. I’d initially planned to set all things monotype in my favorite coding font, Century Schoolbook Mono. Once you get used to coding with serifs, nothing else feels right. Unfortunately, it doesn’t include bold and italic versions. While the OS will “fake” bold and italics with fonts that it has installed, it won’t play ball when asked to manipulate dynamic fonts linked from a CSS file.

If you don’t have a browser that understands dynamic fonts, you can grab them from http://foohack.com/tpl/fonts/.

Layout

I really wanted to stretch my CSS abilities a bit, and also apply some of the principles of typographic design that I’d been learning about lately. The single-column is about 66 characters wide in the target font, and feels about “right” for readability.

Despite my best intentions, a lot of feature creep had somehow taken over, prompting the last revamp. In this version, I put back some features that I’d removed, and removed some things I’d left in.

The vertical measure is set at 30px, with a font-size of 20px. While that’s a bit large, I’ve always favored erring on the side of “too big”, and the Bodoni just felt too cramped at 16/24.

I’ve also taken a lesson from the print world, and set all my bullets and other adornments off into the margins, such that the text is kept strictly flush left. The only element that I couldn’t figure out how to do this with is the <q> element when it starts a paragraph. In that case, it should have a text-indent somewhere around -0.5ex, but I couldn’t manage to do that without borking quotes that start somewhere in the middle of the paragraph.

Since all the major browsers support resizing fonts that are set in pixels, and “zooming” is now preferred over simple font resizing, I went ahead and set everything in pixels so that the math would be easier. There’s really no benefit to so-called “fluid” layouts that are set in ex or em measurements. Plus, browsers that support dynamic fonts seem to have a really hard time with ex/em measurements, since the layout is rendered before the font has downloaded. I do hope that gets fixed at some point, but doing layout in pixels was a welcome return to basics.

Supported Browsers

The luxury of a personal site: I didn’t test even once in MSIE, and I don’t plan to.

Also, since a lot of the style is in the typography, anyone with a browser older than 6 months isn’t going to see my beautiful styles. But they’ll see their own default font settings, I suppose, and that’s probably fine.

What do you think?

Is it excessively nerdy that I’ve been looking forward to this for the past few years?

Table

A specified set of columns and rows with cells that automatically and fairly smartly expand to fit their contents; cells can span rows or columns; the table as a whole can be treated as one block, and cells can contain tables. A table is a metaphor for visually laying out 2-dimensional content.

CSS

cascading style sheets; not floating divs, not any specific markup, but just the concept of the visual display of markup specified by a series of rules that are kept separate from the markup they operate on, generally in an external linked file or a style tag in the head of the document.

Talking Past Each Other

CSS is (for various reasons cited elsewhere ad nauseam), in most cases, the more optimal technological approach. That’s not to say that the existing state of the CSS language is perfect. In fact, even the most vocal CSS advocates regularly assert that there are deep problems with the existing spec and browser support.

Tables are (for various reasons cited elsewhere ad nauseam), in most cases, a more optimal metaphor than any of its rivals. There’s nothing inherently wonderful about the tags themselves. In fact, even the most vocal table advocates regularly assert that the markup is ugly.

Therein lies the crux of the problem. CSS is a great technological approach, and tables are a great metaphor. The question then usually becomes, Should I mark up my content using <div> tags or <table> tags?, which really means, Is the separation of style from content more or less important than using the optimal layout metaphor? The debate goes a little like this:

tables

This layout metaphor is better, so you should use these tags. All you idealists are unrealistic! (Also, if you think markup matters, you believe in fairies. It so doesn’t!)

CSS

Metaphor shmetaphor! You don’t care about the sanctity of data or code quality. Think of the maintenance! (Also, if you can’t do it with divs, you’re stupid. It’s so easy!)

The Right Answer, it would seem, is to use the table metaphor with the CSS technology. In the ideal world, you’d always mark up your content using the tags that would communicate your meaning most clearly to your intended user agents. Then you’d tell user agents how to treat those tags visually. To describe this visual display, you should be able to use the table metaphor, or the float metaphor, or absolute and relative positioning, or anything else, but that should not be done by your markup.

Getting Real

In the real world, it’s not so nice. The CSS specification has a set of display values designed to mimic the table tags, but they aren’t well supported, and anyway, it’s an imperfect imitation of a hack that was not really intended to be used the way we all ended up using it.

In other words, CSS is not an ideal example of what CSS aims at, and the table/tr/td tags are not an ideal implementation of the table/grid metaphor. CSS tables, though they are clever and in some cases quite useful, take it from bad to worse.

The state of the CSS art is not at a point where you can realistically expect to make any significant stylistic changes to your pages without altering the markup. If you need to move the navigation bar from the right to the left, or re-skin the page with dropshadows instead of rounded corners, or convert your gradients from 2-tone to 3-tone, or make your boxes vertically centered instead of top-aligned, you’re probably going to have to change your markup, at least a little.

In theory, it’s possible. I know a handful of my colleagues will vehemently disagree and point at countless approaches to enable virtually any kind of reskinning using only CSS changes. (I’ve used Leslie Sommer’s CSS Mojo technique to great success in the past; we used it for pretty much everything on Yahoo! Buzz.) But let me tell you, from years of experience building production sites with CSS, most of the time, in reality it just doesn’t work that way.

And why should it? What kind of crazy lunatic writes all their HTML by hand in text files, anyhow? Clearly you have some kind of back-end engine spitting it out from templates, so you just change the template, and voilà!, the markup is changed everywhere.

A Very Blue Bike Shed

Working at Yahoo, I’ve met some webdevs with truly incredible CSS ability, who crank out live code under real deadlines to exacting standards. They use CSS, and not tables, and they Get Shit Done. There are a lot of them, more than I can list here, but Nate Koechley, Matt Sweeney, Hedger Wang, and Leslie Sommer all deserve a special mention. I came to Yahoo knowing CSS pretty well, but I became an expert largely as a result of working in such a highly skilled community of developers.

Also due to my time at Yahoo, I’ve seen some absolutely crazy debates about markup and coding standards on the devel-frontend mailing list. I mean, you think this little flare-up in the blogosphere is anything? You got no idea, buddy. Seriously. And these are coworkers who (for the most part) really like and respect one another.

You wanna know a secret? It makes no difference.

Language is as language does. If everyone uses the <table> tag for markup, guess what happens: <table> is now a semantically meaningless (or at least, semantically vague) tag, and any user agents that might care about navigating tabular data have to deal with that fact. It becomes just another <div>, for all intents and purposes, but a little less flexible, and with a default styling that makes it handy for layout.

The passion for the rants comes from the fact that it is meaningless! Of course it’s a fertile ground for bikeshedism!

That’s right: It doesn’t matter.

Use whatever tags work for you. I don’t care. You’ll still be a good person.

I can tell you from experience that a deep knowledge of CSS is essential for serious front-end development. (Most so-called DHTML is actually just manipulating CSS with Javascript, and the Javascript is pretty light.) CSS can do some things that table tags can’t, so you ought to learn it. The reverse is also true, so you should know how to use tables, too.

Write code that you can maintain, that is flexible enough to let you change it without sacrificing the stability of your product. Test it in the user agents that you expect to support. Stop debating the color of this bikeshed.

If there’s ever a good reason to go back and change your tables to divs, or vice versa, you can do that. Hell, plan for that, because whether you use CSS for layout or not, you’re going to need to touch your markup sometimes. It is much much harder to build a product people want than it is to build a product that works in Browser X.

My fellow nerds and I will retire to the nerdery with our calculators.

I saw the movie back in high school when it was in the theater. Immediately—I mean, before we had gotten out of our seats—we were using “nerdery” to refer to our pack of nerds [1]. It’s like there was a linguistic void waiting to be filled, one that we had somehow never noticed before, and that term came to our rescue, identifying and defining a concept that we all knew but could never properly articulate.

It’s interesting that he’s clearly talking about a location in the quote, and not necessarily a pack. Nevertheless, the longing for this term is clear in the fact that literally every single person I know has exactly the same concept of what it means [2], despite having grown up in different parts of the world. That’s pretty rare for a concept so squishy, even if the term is only 13 years old.

ζῷον πολιτικὸν

Nerds are humans, and humans travel in tribes. Nerds may fail at popularity, but the human qua πολιτικὸν phenomenon is inescapable. We are social creatures, by our nature. You can’t keep up with it all on your own, which is why your lazyweb is smarter than google.

It’s kind of easy bait to just say that nerds fail at people, but to stop there is missing the point [3]. The lack of popularity doesn’t change the need for polis; it simply changes the types of people that nerds tend to associate with. Given the right conditions, we clump together, and form nerderies.

If nerds didn’t need people, we wouldn’t clump. We’d all be loners. And really, deep down, we’re not, no matter what we may tell ourselves.

You can do things with a nerdery that you can’t do alone. Hacking on your own can be fun, but no matter what it is, projects really take the fuck off when a few heads are working together. That’s how you get explosive momentum. No matter how smart or driven you are, you cannot do it alone. The genius of the future stands on the shoulders of everyone.

Connecticut

In high school, I was a part of a quality nerdery. We were the kids who sat in the back of the class in AP Calculus, who stopped doing homework so we could study harder and get a 5/5 on The Test. We made web pages and played dungeons and dragons. We ran with the artists and freaks.

But it was high school. Things were awkward and weird. We knew each other too well, and yet not at all. After graduation, I fell out of touch with most of those guys. Maybe there was a really strong tribe there, and I was just never quite in it. Or maybe we just grew up, and our interests diverged.

In college, I lived in Neff Hall, the designated geek dorm. It really was. The top two floors were even preferentially assigned to Honors College students. In my second year, we reached Critical Mass. We were a tribe, Tre Neff. We had a call. We organized acts of benevolent mischief. A decade later, I follow a bunch of them on twitter, and comment on their blogs. I moved to California with one of them, and we all know each other, an extended family of sorts.

California

Connecticut is beautiful, and great for a lot of things. I’m glad to have grown up there, and I would recommend that anyone spend their college years in New Haven. But it’s a terrible place to be a grown-up hacker. When I moved out to San Diego, I was sans-nerdery. Lone wolves catch no caribou.

Transporting my tribe to California was a pleasant fantasy, but not realistic. They all had their own lives. Some of them moved to Boston. Others were still in school in New Haven or elsewhere. Wasn’t gonna happen. Even if we were all local, we’d grown up, and we weren’t into the same things any longer. We were still friends, but not a nerdery.

So, that meant building a new one. When I got a job at a little windows shop, I thought Well, a nerdery just kinda happened in high school, and another one just kinda happened in college, seems reasonable that I’ll find one at a software company. Lotta geeks there. Ha. How very naïve. My god, we do fail at people.

There were about 30 people at that company, and I did meet more nerds there. A few became friends and are still. But somehow, it lacked cohesion.

After a few years, that job wasn’t doing it for me anymore. I focused all my time and energy on learning the latest in web development. PHP, CSS, Javascript, semantic markup, XML, and so on. I started writing a blog, reading blogs, commenting, conversing, everything I could do to tap into this tribe and be one of its members.

One day, a woman named Amy emailed me about a position at Yahoo. I interviewed, and an invitation to the technopolis fell into my lap. 3 years later, I’m still here, and my unwillingness to leave has even attracted some attention, temporary though it may be.

Stars and Nets

I’ve met a lot more high quality nerds here at this company, more than I can link to in one sentence. Since moving to Silicon Valley, I’ve also found other hacker groups and interest meetups and so on.

For whatever reason, it seems like only about 10% of the people we meet have friend potential, and only maybe 10% of those fall into the right blend of coincidence to actually result in any kind of useful relationship. Maybe these numbers are skewed down by the fact that I’m talking specifically about nerds, but I suspect that, for anyone, the vast majority of acquaintances and colleagues never make it to “friends”. There are only so many hours in the day, and relating takes time. We are limitful creatures.

When it comes to functional groups, size matters. A lot. The ideal size for a nerdery seems to be about 7 people, and it needs the right balance of skills.

Nevertheless, that 1% turns out to be quite enough, if you’ve got access to a big enough population. It’s quite helpful to start out at a large software company or a college that attracts technical talent. It’s easy to meet a few like-minded friends if you are exposed to a few hundred likely contacts. I didn’t realize at the time that the difference between college and that first software company was mostly scale; 30 employees vs 30,000 students. (It was a state university—at a place like MIT or Stanford, the pool would probably not need to be so large.)

Cohesion happens in the progression from “star” to “net”. In this extremely technical diagram, the red dots are people, and the blue lines are relationships between them. A person’s group of friends and associates starts out as a star. We relate to people who might not relate much with one another, and who have associations with other people outside the group, that we don’t know.

The ideal net is where each of the points interacts with all or most of the others. That’s where the good stuff happens. We can spend less time relating, and get more value from it. See how all the blue lines cross over one another? Ideas flow across those channels, and they pollute one another as they bounce around. Conversations produce accidental ideas, and the more collisions, the more accidents are liable to occur. Nets tighten. Things get caught in nets. Tasty things.

I suspect that a functional group also can’t really be without a function. It has to start as bonding over some purpose, or else it just doesn’t get there. It’s hard to organically attract the right blend of skills without some need for those skills.

The way to get from star to net is just to get bigger. Meet more people, stick with the ones that seem the most interesting. As the star grows more dense, the spokes bump into one another, and it collapses in gradual steps. At some point, it’s ripe for being drawn together by some unifying project or task, and the right members join together to make it happen. Some pieces fly off, and the rest is pulled into the new shape.

The best communities organize themselves.