Someone emailed us today asking how exactly that scrolling preview box on the main Coda page works. I got a little carried away with my response, so I figured it might be worth posting:
That horizontal scrolling thing is something Cabel dreamed up when he was doing his Photoshop mock-up, without giving any thought to how ridiculously complicated it would probably be to implement. (Outside of Flash, of course, which I shall never mention again.) In actuality, it was reasonably simple.
Each content “pane” is a fixed width div. The panes are then floated side-by-side inside a super-wide, fixed-width container div (#content), to make sure they always stay side-by-side.
That super-wide container is then absolutely positioned inside another div (#scroller), which functions like a sort of viewport. The width determines how much of the super-wide content div will be visible at any given time. The height is set in ems to make sure folks could still resize the text, but we needed the width to remain fixed.
None of this is really very interesting — people have been making iframe-like things with CSS since the Dawn of Timeâ„¢, but they always have a nasty, dirty scrollbar, which we wanted to take care of with javascript. So you slap an “[overflow: hidden;]” declaration on the viewport div (#scroller), which does away with the scrollbar and clips anything that would spill out of the viewport.
The real internet magic is that even though the content div is visibly clipped, you can still scroll to the hidden stuff, even though there’s no scrollbar. It took nearly 3 days of trial-and-error to discover this, and I won’t tell you all the various things I tried before that hallelujah moment. Even IE 6 likes it!
From there, it was just a matter of applying some tasty javascript to scroll to the appropriate anchor. Even without javascript, though, the anchor links in the toolbar still scroll appropriately, just not smoothly. That smooth scrolling sauce can be found in any number of tutorials online.
Now that I think about it, the javascript we used is actually a bit more complicated than that; it walks through the toolbar UL and builds an array of items to scroll between, then figures out the position of each pane so that we can dynamically scroll to anywhere from anywhere else. There’s also the next/previous buttons, which are more complicated than simple anchor links. To be honest, I don’t actually know how it all works. Cabel, you are the David Copperfield of javascript. I just lay the bricks.
† This article was published Wednesday April 25, 2007.
If I’ve been a little hard to get a hold of recently, it’s because I had the distinct honor of being the first person to use Coda to build a “production” website. And it was a pleasure.
Cabel Sasser designed the site from head to toe, in addition to writing the magic javascript pixie dust that powers the horizontal scrolling preview box (who needs Flash, anyway?) and the thumbnail image-zooming we first unveiled with the Rip-Off Express about a year ago.
My main challenge was to turn all of Cabel’s rounded-corner/drop-shadowy/crazy-scrolling dreams into semantically-sound, standards-compliant xhtml. When I first saw his mockups and heard him describe this dynamically-scrolling preview box, I think I pooped my pants a little. I mean, this is why people build stuff in Flash — because HTML+CSS just ain’t there yet.
Somehow, with a surprisingly minimal amount of css-hackery and a liberal amount of Cabel’s javascript wizardry, we made it. It doesn’t quite validate (input type=“search” isn’t valid yet), and the layout still uses a couple of tables here and there — I spent 2 days just on that little gray pop-up download bubble, only to resort to sticking it in a table — but by and large, I think we can be happy with the way the site turned out. And apologies to those of you using Internet Explorer 6 and below; I did all I could to accommodate you, but a man has limits.
Of course, the real news today isn’t the site we spent the last three weeks building; it’s the incredible app we’ve spent the last year and a half bringing into the world. If you make websites by hand, Coda is truly revolutionary, and it’s totally changed the way I approach web design and site management. I would have cut off any one of several appendages to have had an app like this when I was freelancing. I remember the feeling of dread when I’d have to close all my browser tabs and TextWrangler and Transmit windows at the end of the day, knowing that it would be a tedious task to get back up and running when I started work again in the morning. But Coda remembers everything, so I all I have to do is double-click that gorgeous little leaf, and I’m ready to go.
Okay, enough already. Off to answer the 500+ e-mails1 in my inbox I’ve been neglecting for the last three weeks.
1Note to my bosses: I don’t actually have 500 un-answered e-mails in my inbox, I promise. It’s more like 350. ;)
† This article was published Monday April 23, 2007.
In what I assume to be the current issue of Commerce, published by Portland’s Daily Journal of Commerce, there’s a piece about local designers who can “rattle the hell out of a keyboard,” and for some reason this site (and its author) got a mention.
Sport Bucket—“neither sporty nor bucket-y”—lets one-man design firm Tim Coulter get his sometimes design-related thoughts on screen at sportbucket.com/blog.
I’ll try to track down a physical copy to scan and post for the benefit of my extensive readership. (If the magazine retails for over $4, though, you can forget it. I’m not that vain.)
Incredibly, we’re mentioned in the same breath as folks like Jeff Fisher, whom I’ve actually heard of, Kamp Grizzly (which I hadn’t heard of, but his/her/their stuff looks quite nice), and Samuel John Klein, who looks to be a legitimate blogger (if not designer), as opposed to my half-assed attention whoring.
So I’ve got that going for me, which is nice.
They even name-checked the Portland Institute for Contemporary Arts, which seems to imply I’m of the same importance and stature as entire civic organizations1. Which, of course, I am, and it’s about time somebody noticed.
I chalk it up as a triumph of the Google-friendliness of standards-based design, as the writer almost certainly stumbled upon this site using some combination of the keywords ‘portland’, ‘design’ and ‘blog’, all of which are up there in the keywords tag I made over a year ago and promptly forgot about. (If you’re savvy enough, check out that description, too. I honestly don’t remember doing that, but there’s no way I’m changing it now.)
Most designers, Portland-based or otherwise, prefer to peddle their wares via Flash-based sites, which are patently un-searchable and un-indexable, so they’re not quite as easy to find in your general Googling. Score one for web standards!
1 Coincidentally, PICA’s blog is hosted by my friend Mike’s project Urban Honking.
† This article was published Friday September 29, 2006.
I haven’t exactly been a prolific writer the past few days months. Sorry about that. I’d like to say I’ve been too busy to post, but perhaps I’ve just been too uninteresting.
So what have I been up to since April?
In early May I bought one of these. I’d been using a 3-year old PowerBook, and it was time to upgrade. And it’s a hell of an upgrade — much, much faster (2GHz Core Duo vs 867MHz G4), brighter (and unfortunately shiny) screen, and it’s capable of running Windows if I have a sudden hankering for Internet Explorer. It’s Revision A hardware, so there’s bound to be some problems, which I’ll probably discuss later on. But by and large, I’ve been very happy.
I spent Memorial Day weekend visiting Steve and Emma Nelson in Washington DC. Within 30 minutes of arriving, we met our congressman at a bar and had drinks with him. I’m just that important. We didn’t actually spend the weekend in DC — since it’s a terrible, terrible place — but headed to the Maryland coast to camp on Assateague Island. They had wild horses, which were surprisingly surly for federally protected animals. If it didn’t carry such a heavy penalty, I would have kicked one of them1.
In early August, the company took a trip to San Franscisco for WWDC. I can’t legally talk about most of it, but I did get to meet the guy who’s more or less responsible for me finding a job.
So that’s pretty much been the extent of my summer — music, Apple geekery, and fireworks. I’m in Seattle right now, and Ash, I’d like to take this opportunity to thank you for opening your home couch to me. This post is for you, so you don’t have to look at Eddie everytime you pull up ol’ Sportbucket.
1 Come on, I don’t hate animals. Some of my best friends are animals. Send hate mail here.
† This article was published Friday August 25, 2006.
This is perhaps the worst thing that’s ever happened to my friend Eddie La Berge, and possibly the greatest thing to happen to me.
Good Day Oregon, a daily program on “meth-and-porn” Fox 12, does a segment called “Monday’s Man,” featuring local eligible bachelors. Eddie is both eligible and a bachelor, so he was a natural. And was he ever a natural. Look at that grin. Look at it.
As Eddie’s best friend, it’s my duty to make sure this video is spread as wide and far as possible, so please, please, please send these links to everyone you know.
I don’t have one of those fancy smart phones that does all that mobile web stuff, so finding out you can use Google via text messages is pretty damned cool.
I don’t have anything invested in it yet, but it’d be a good thing if everyone ditched MySpace and moved to Virb. It’s got everything MySpace does, minus the coldfusion backend and the terrible, terrible design. Do it.
Well, not exactly, but our office makes a cameo in their new ad campaign. In fact, the whole thing looks like it was filmed within a 3 block radius of our building.
