Skip navigation
Help

web ninja

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

As part of our Doob-a-thon today, we have a Web Ninja Interview with Mr. Doob. The Web Ninja Interview series focuses on people doing amazing and interesting work using JavaScript, CSS, HTML, SVG, WebGL, and more.

Mr. Doob has delighted us with many awesome visualization and demos, including the recent Wilderness Downtown project. He is one of a crop of JS wizards that are taking advantage of new tools like Canvas, CSS3, SVG, and WebGL. Let's get started.

Brad Neuberg: First things first, the most important question is where the name Mr. Doob comes from?

Mr. Doob: I've always been very dependent on wearing headphones in order to get some level of concentration. Because of that I started using combinations like do_ob, dõ_õb, dò_ób, dê_êb, d=_=b, ... as IM nicknames. One day a friend greeted me as Mr.doob and the name somehow stuck. It was also easier for my coworkers to pronounce than my real name.

Brad Neuberg: Now that we have that out of the way, tell us a bit about yourself, where you're from, your background, interests, and some projects you have worked on (don't be humble!)

Mr. Doob: I'm originally from Barcelona (Spain). After primary school I studied Electronics and later Arts. From the early days I was very involved in this thing called Demoscene. Always attracted to anything computer graphics but, although I tried to learn code my mind wasn't ready yet and focused on design and editing. Because I felt I was learning way more from doing demos than attending college I stopped my education and looked for a job where I could develop my interests and ended up working as a HTML developer. Since then I've been alternating the coder and designer roles in every company.

Most of the projects I've worked on have been about creating the ID or online presence for small companies. It wasn't until I joined Hi-ReS! that I worked for bigger brands such as Sony, Nokia, Sprint, Jägermeister, Chanel, Dolce&Gabanna, ...

By that time I started experimenting with Actionscript and uploading the results to my site. Unexpectedly the site started to attract production companies and studios that were looking for some experimental effects and/or interactions.

Brad Neuberg: You recently worked with Google on The Wilderness Downtown. Tell us a bit about the project and what you did, including some technical details on how you built things.

Mr. Doob: Probably the project in which I've been able to apply most of what I've learned until now. There are some pieces of code reused in the project like three.js, the Sequencer code or the Harmony base code but my main tasks were working in the Street View shots and the birds. The Street View being by far the most challenging for performance reasons. We intended to directly use the Google StreetView Javascript Embed but it performed very slowly. A custom Street View Data viewer had to be done by drawing sinusoidally distorted columns of crops from the panorama texture. The effect isn't 100% how it should be but it's very similar and fast. After that there was the challenge of finding out where in the panorama was the user’s home so we could use the right point of view for some shots. I couldn't find much documentation about that, but just when I had a desperate email ready for the Google Maps guys I came up with idea of getting the vector from the lat/lng of the house and the lat/lng of the panorama data. It's now obvious but there was so much data around to assimilate and the deadline was approaching fast.

Brad Neuberg: Tell us about a hobby, interest, or something in your background that most people wouldn't expect or know about.

Mr. Doob: Hmm... not that it’s too interesting but... I used to be fairly good at football. At some point I had to decide whether to join a football team or joining a comic school. Some times I regret I didn't do the former. Something tells me I'll go back to that eventually...

Brad Neuberg: What is a clever hack, trick, or elegant turn of code you've discovered or created while working with JavaScript, HTML, CSS, etc. Give good details, and don't be afraid to be technical :)

Mr. Doob: It's not much of a trick or a hack, but I've always found very beneficial to avoid using libraries such as jQuery. I guess such libraries are helpful for cases where IE6+ support is required, but otherwise I think that, ironically, it over complicates things. The more control you have over your code the better.

Also, I’m still learning JavaScript and I don’t know the reason behind some objects. As an example, I recently stopped using new Image() and started using document.createElement( ‘img’ ) for consistency reasons.

Brad Neuberg: Where do you see HTML5, CSS3, SVG, (i.e. the new stuff on the web) going in the next year? How about the next 3 years?

Mr. Doob: They’ll continue evolving at a nice pace. And browsers will have to keep up to date or they’ll lose their user base.

In 3 years I think it’s all going to be WebGL though. I think it’s easy to imagine videogames moving from native applications to web applications. Windows/MacOS/Linux compatibility comes for free, the downloading/installing process won’t be needed and, if done right, the experience starts instantly. At this point Windows/MacOS/Linux as OS becomes irrelevant for most of the people.

It scares me that people browse the internet more and more from devices that can’t be used for authoring but, on the bright side, I like the fact that with Javascript nothing gets compiled and kids will be able to right click any page and see directly the code.

Brad Neuberg: What excites you the most about what is happening on the web today? What still frustrates you?

Mr. Doob: The competition between browser vendors. That competition is making the platform improve at a rate I wish the Flash platform would have been while I was into that.

This new trend of serving results in realtime and realtime interactions is also exciting. The internet is evolving very quickly.

What still frustrates me are usually stupid politics-based decisions like Safari and Internet Explorer not supporting Vorbis in <audio>, Safari only playing iTunes rendered h264 .mp4, ... And other than that I just can’t understand why ‘darker’ is being removed from context.globalCompositeOperation in the WHATWG specs.

Brad Neuberg: For folks that want to do the kinds of cutting edge things you've been doing, what advice or resources would you give or point them to?

Mr. Doob: Just look at the past. I’m not doing much else than combining old Amiga/DOS techniques with what the web has to offer. Thanks to the recent JS1k contest we now have lots of code to learn from and experiment.

Thanks Mr. Doob! What questions do you have for Mr. Doob? Ask them below!

We end with a presentation Mr. Doob gave recently at ARTtech 2010 on Laziness, Creativity, and Code:

ARTtech 2010: Laziness, Creativity and Code from AssemblyTV on Vimeo.

0
Your rating: None

Update: Bryan Veloso recently re-launched his personal site Avalonstar using the 16 column Photoshop template from the 960 Grid System. Special thanks to Bryan, for letting me use a screenshot of his work on 960.gs.

960 Grid System

As you might have heard, I recently launched a site for the templates that I created to use in my personal and professional projects. For lack of a better name, and because the numerals made for a nice logo, I’ve decided to simply refer to it as the 960 Grid System. It’s funny, because even though all I did was post a single tweet about it before going to bed Sunday night, viral word of mouth kicked in, and I’m already getting inquiring emails.

I should note that the 180 KB download size isn’t for the CSS framework alone. That download bundle is for all the files: printable sketch sheets, design templates for Fireworks, Photoshop, OmniGraffle and Vision + the CSS and HTML. The 960.css file itself is only 4 KB when compressed.

First of all, I made this for myself, to scratch an design itch. Not everyone will like it, and I’m okay with that. There’s an old saying: “You can please everyone some of the time, and some people all of the time.” I am not trying to accomplish either. I am simply sharing the grid dimensions that I have found myself gravitating towards over the past year or so. If others can benefit from that, then all the better. That being said, read on.

Browsers

I built the code in my grid system to accomodate all A-Grade browsers, as determined by Yahoo. At the time of this writing, that chart looks like…

A-Grade Browser Chart

Note that IE5.x is nowhere to be found. That’s for good reason. There’s not enough market share for it to be important to Yahoo. Not only that, but even Microsoft has discontinued support for it. If you’re stuck in a position where you’re still having to code for that ancient browser, the best suggestion I have is to go peruse Authentic Jobs and find better employment.

Background

I first became interested in grid design via reading articles by Khoi Vinh and Mark Boulton. Initially, I must admit that I didn’t fully grasp the concept. But, the more I thought about it, the more I realized that this time-tested practice from printing works well on the web. Like it or not, web pages essentially revolve around boxy shapes. Inevitably, these rectangles have to come together in some way or another to form a design.

As long as we’re using shapes consisting of right angles, we might as well make some logical sense of it all. Some time after the intial work of Khoi and Mark, I happened upon an article by Cameron Moll, heralding a width of nine-hundred and sixty pixels as the optimal size for design. Basically, 1024×768 is the new 800×600, and 960 makes for a good magic number to utilize the wider canvas on which we paint.

After that seminal article, I have been basically designing on some subdivided variant of 960 pixels ever since. Last spring (2007), I found my groove, so to speak. It happened when I began to redesign my personal site. It’s still in the works, but here’s a sneak peek. As you can see, I’m eating my own dog food, as the future version of my site will use a 16 column grid.

Sneak Peek

I have yet to sit down and complete the redesign, since I am still finishing up my masters degree via correspondence, and because other paying freelance work came up, plus day job, etc. Chronologically though, I technically “began” work on my grid system before the release of Blueprint.

That’s not a value judgement, but helps to explain “why another grid framework,” because I had already started down that path by the time Blueprint was announced. I have used BP, on a project where I was required to use a documented code base, to ease future maintenance of the site. Though it was agreed upon, the designer on the project didn’t design according to BP’s dimensions. That was partially my fault, for not better communicating how it worked. By the end of the project, I had basically overridden nearly everything BP brought to the table.

That’s when I got to thinking, wouldn’t it be great if there was a way to streamline things, to get designers and developers thinking and communicating better? And, what if IAs were included in that workflow? That inevitably led up to what is now the 960 Grid System.

What it’s not

By far, the most common question I have received via email has been “How does this differ from Blueprint?” People seem to ask the question almost antagonistically, as if to say — “You’re wasting your time, because Blueprint already exists, and I like it better, so nanny boo-boo.”

For those people, I say, bravo. Please, continue to use whatever works best for you, and whatever you are most familiar and/or comfortable with. I am certainly not looking to draw up battle lines, or trying to change anyone’s mind about what framework to use, or even if one should be used.

One of the glaring omissions, or nice features, depending on how you look at it, is the way the 960 handles (or doesn’t) typography. There is a text.css file included, but this is mainly to ensure that there is at least a something in place, so that as you do rapid prototyping, common elements such as headings, paragraphs and lists have basic styling.

I haven’t gone out of my way to establish a vertical rhythm for text, as is described in the Baseline article on ALA. It’s not that I don’t see the value in it, I do. I think it’s an awesome idea, and a noble pursuit. However, it is fragile. All it takes is for a content editor to upload an arbitrarily sized, 173 pixel tall image, and all the subsequent elements are off-beat.

I see this as being more of a design choice, than something that needs to be standardized. In fact, most things that might be considered unique to a site design have been left out. I have specifically not set any text or page background colors. Call me lazy if you want, but that’s one thing I found myself consistently overriding when using BP. I’d wonder things like: “Why is there a <th> background color?”

I have also not put in pull or push image/quote styles, as those are things I rarely use, and I consider that to be a bit more design and contextually content oriented than related to page layout and prototyping. It’d be easy enough to write as a one-off in your own design stylesheet.

So, I hope you’ll forgive me if my grid system isn’t all you think it should be. Much as I like the The Beatles, I don’t exactly want to hold your hand.

Texting

After that underwhelming explanation of what the 960 Grid System doesn’t do, let me highlight what I consider to be the features. First off, some love for Linux users. The default font-family order is Helvetica, Arial, Liberation Sans and FreeSans, with a generic fallback of sans-serif.

One thing I’ve found about Ubuntu is that the default sans-serif font is actually closer in width to Verdana than Helvetica or Arial. It’s not a big deal, but if you want text that looks relatively the same cross-browser, you need more than just a generic fallback for Linux users. This can be especially important if using the size of a particular font to approximate a certain width. It stinks to see carefully crafted navigation break to the next line.

In talking to my friend Yannick, he advised me that Liberation Sans is available by default on both Fedora and Red Hat distributions of Linux. It is also freely available under the GPL, so what’s not to like? If I had to describe it, I’d say the numerals are reminiscent of Verdana, but the rest of the characters map nicely to the dimensions (if not glyphs) of Helvetica.

From what I could tell via Jon Christopher’s article, FreeSans is the nicest looking equivalent to Helvetica available by default on Ubuntu. So, the text.css font-family list handles OSX, Windows, Linux builds.

Sizing + Spacing

Before we get into the pedantic debate about pixel font sizes, let me just say — Let’s not go there. I’m aware of all the arguments, and have even toyed with making elastic layouts. For me, it’s about ROI. You can spend countless hours toying with font-size inheritance, like I did on the Geniant Blog, or you can set sizes in pixels and get on with your life.

I’m aware that Blueprint’s text equates to 12px, but 13px is what YUI‘s fonts.css file specifies, and I actually quite like the way they’ve done their typography, aside from percentage based sizing being a bear to wrangle. We used it on the Geniant Blog, to great (albeit time-consuming) effect.

While I haven’t painstakingly set a vertical baseline, body text is 13px with a line-height of 1.5 (unit-less) = 19.5px. Most block-level elements have a bottom margin of 20px. So, that right there gets you pretty close to a consistent baseline. Just need to tweak line-heights on headings, etc.

The two block-level elements to which I did not apply bottom margin are blockquote and form. In strict doctypes, both of these require other block level elements to be inside of them. For instance, paragraph tag(s) inside a blockquote or fieldsets in a form. By not having any margins themselves, other blocky children can stack neatly inside.

I’ve also re-indented list items by 30 pixels on the left, so if you want hanging bullets, be sure to set that back to zero. I actually think hanging punctuation is pretty cool, but have yet to meet a client who agrees, so I erred on the side of caution in my CSS, in hopes of mitigating future arguments.

:Focus

I just wanted to briefly mention this, because it has to do with accessibility. While I personally think that Eric Meyer’s reset.css removal of :focus outlines is aesthetically pleasing, I think the right thing to do is to retain focus borders, for users that navigate links via a keyboard instead of a mouse.

This has been a longstanding gripe of mine with the Opera browser — the utter non-existence of any sort of :focus indicator. Anyway, you can remove the a:focus code in text.css if you want to have cleaner looking links, but know that you do so at the expense of accessibility.

Columns

One of the key differences between Blueprint and 960, aside from nomenclature, is the way the grid columns receive their gutters. In Blueprint, all the gutters are 10px wide (a bit too narrow for my taste), and are to the right side. The last column in each row needs class="last" to remove the margin. This means that neither the left nor right sides of a container have any spacing. For the most part, this is no big deal, but if a user’s browser is constrained, body text actually touches the browser chrome.

In the 960 Grid System, each column has 10px margin on both the left and right sides. This allows for the overall container to have a 10px buffer at the edges, and the margins combine between columns to form 20px gutters (a bit more room to breathe). Additionally, there is no need to add an extra class for the last column in a row.

In some unique cases, you might want grid units nested within a parent grid unit. In this case, you will need class="alpha" and class="omega" on the first/last child in each row. It’s a bit more work, but is more of a fringe situation, so it won’t come up as often.

I specifically chose grid_XX as the naming convention because for some reason, having a class named span-XX bothered my brain, since <span>, <td colspan="X"> and <colgroup span="X"> already exist in HTML. I guess I just like the idea of there not already being several tag/attributes with the same naming conventions. I also disliked the monotony of typing class="column ..." repeatedly, though to their credit, the BP guys have eliminated that necessity in their most recent build.

Much like with Blueprint, you can add empty columns before/after a grid unit, by specifying a class of prefix_XX and/or suffix_XX. The naming convention there was simply one of personal preference, as I admittedly tend to get confused by the word append, forgetting if it goes before or after.

Internet Explorer

Someone emailed me today asking about IE compatibility, and why there is no ie.css file included with 960. Simply put, it wasn’t needed to fix any of the grid aspects. IE6 has a wicked bug which doubles the margin on any floated elements. This could be a huge problem, but is easily fixed by adding display: inline to that which is floated. This causes no side-effects in any other browsers, so it simply lives in the main 960.css file.

You may find that IE6 and IE7 both get the spacing around <hr /> slightly off, by 7 pixels above and beneath, which is easily fixed by adjusting margins accordingly. To me, that’s an acceptable issue, and not really worth adding another CSS file with conditional logic in the markup. If you do end up creating a separate IE stylesheet, keep that in mind, and address it.

In the Clear

Lastly, I wanted to talk about the clearing methods included in the 960.css. First off is my personal preference, adding an innocuous bit of markup to clear all elements. I have already written about it extensively, so I won’t go over all that again. Basically, add class="clear" to a <span>, <div>, <li> or <dd> that you want to disappear. The only effect it will have is to clear floats.

The other method is for all you markup purists out there, who don’t want to dirty your HTML. Instead, you can insert markup via your CSS. This technique is well documented already as well. Essentially, add class="clearfix" to elements to clear what comes after them.

Licensing

The whole bundled package is free of charge, dual licensed under GPL and MIT. While I’m no suit, it is my understanding that these two licenses ensure that you can use the grid system in just about any situation. I must especially thank my friend Michael Montgomery for his informal advice, helping me to wrap my mind around all the legalese. He is a patent attorney by day, web ninja by night, and helped me wordsmith the 960 copy.

Finito

That’s all folks. Hopefully you’ll find the 960 Grid System to be helpful in sketching, wireframing, designing and/or coding. Future plans include a tutorial on how to use jQuery to add styling hooks to form elements, since I know from experience that is no cup of tea. I’m not sure JS belongs in a CSS framework, so I might just make that a separate tutorial series.

0
Your rating: None