Citysearch Beta & Facebook Connect

First, let me introduce myself and my role in the project. I’m the senior user interface engineer for citysearch.com (a website that helps you find local businesses). I’ve been working, along with my colleages at Citysearch and the Facebook Connect team, to make the experience of using your Facebook login on Citysearch as seamless as possible.

So, what the heck is this Facebook Connect thing? Basically, it lets you log in to Citysearch using your Facebook account. Then when you write a review of a business on citysearch.com you can push it to your facebook feed at the same time. You can also see your other Citysearch/Facebook friends and the reviews that they have written on Citysearch.

We are combining the strengths of each website, Citysearch’s now hyper-local geography model, creating a home page for something like 75,000 neighborhoods, with Facebook’s ability to instantly connect you with all of your friends (and these days just about everyone is on Facebook). This creates a vital connection between messing around online, and finding a real world business or service.

“Okay, so you’ve got a local search website with a community writing reviews, so what’s the difference between that and say, Yelp?” you may ask. I would propose that with Facebook you get to share your favorite places with YOUR friends. Whereas on Yelp you are being asked to interact with a social clique which you may not be a part of.

Now, I am not without concerns about this integration, and here’s where any non-tech folk may want skip a few paragraphs.

To tell you what I don’t like about the basic premise of the way Facebook Connect works, first I’m going to talk a little bit about the right way to add JavaScript interactivity to a site. It’s called Progressive Enhancement. First you build a solid foundation, meaningful HTML. You set up your pages so that data is being passed consistently between server and browser using the technology of your choice, whether it’s a big corporate place using Java, or an agile satellite team using PHP. Next you make everything look pretty by adding a layer of CSS. Only then do you hijack that server interaction, attaching Ajax behavior with JavaScript to create a more interactive experience.

So that’s the problem that I have with the Facebook integration. The entire connection between the two sites is based on a hack, using JavaScript to create an iframe, and then passing information back and forth by reading the source of the iframe. For a more complete explanation, you can look at their diagram.

Now that’s not to say that I’m as strong a developer as some of the folks on the Facebook Connect team, or that a server side API would be as accessible to as many casual developers as a JavaScript API is. Only that a server side solution would have been more robust, and less susceptible to the vagaries of various web browsers.

Non-tech folks start again here :-)

Now, having said all that, once Citysearch and Facebook Connect are out of beta, I think we will have a very solid and nearly seamless interaction between the two sites. In fact, we think it’s working well enough that we invite you to try it out right now at this address:

http://beta.citysearch.com/

You can use the “Sign in Using Facebook” link at the top. Or search for the last restaurant you ate at, use the “Write a review” button in the middle of the page. You will see a couple forms that you can ignore, and click the big blue “Connect with Facebook” button.

In the future I’m looking forward to greater speed and reliability from Facebook, richer interactivity between Facebook friends on Citysearch, and I’ve got some interface kinks to work out myself.

Presidential Feet

Knock on wood.

Senator Obama was doing press interviews by telephone in a holding room between events. Sometime later as he was getting ready to begin his event, he asked me if I was photographing his shoes. When I said yes, he told me that he had already had them resoled once since he entered the race a year earlier. Providence, R.I., 3/1/2008.

via Callie Shell–Obama–Digital Journalist

iPhone 3G Case

Suggestions?

invisibleShield covering the face.

console is not defined

In firebug 1.2 console is not defined by default. See Changes to the ‘console’ object in Firebug 1.2.

Here’s Travis Cline’s solution. I would replace the function() {} definitions with window.alert for debugging in those other browsers.

Of course we’ll have to update this again if window.console becomes window.firebug.

Alps Panorama

Here’s a preview of the photos from our trip:

New Camera

Got a new Exilim for the trip. Snapped photos of Cats and Work.

Dracula's lament

Forgetting Sarah Marshall “Dracula’s lament”

This may just become an unconventional musicals blog. You’ve been warned.

Dr. Horrible's Sing Along Blog

Update: finally placed where I recognized Felicia Day from: The Guild.

Roar - Growl for Webpages via Mootools

Roar Notifications

dawn-a-pa-drew-za - two-za

Journal of Boardgame Design

Brilliant little blog, not to many posts but each one has a lot of depth. If you’re interested in game design this is worth a read: Journal of Boardgame Design.

shit, piss, fuck, cunt, cocksucker, motherfucker, and tits

Well, shit.

Warwick Castle Trebuchet

Just stumbled across (via xkcd’s blag) this video of the world’s largest trebuchet launching a burning cannon ball. This is the same trebuchet that I photographed during our 2005 visit to England.

Hulk Puts The Anger Back In Movie Violence

Just back from a press screening of The Incredible Hulk.

Edward Norton is a brilliant actor, even in an action flick, and Liv Tyler is gorgeous on top of being a gifted actress, but you already knew all that.

I really enjoy my violent movies, and they come in all flavors. Movies like Equilibrium and Kill Bill are violent and gruesome. Crouching Tiger and the like are violent and graceful. The Big Hit is violent and funny, Gross Pointe Blanke is violent and witty. Henry V is violent and real.

Now Hulk. Hulk is violent and angry. And I fucking loved it.

Cybil was bored at times by the extended action sequences, but I loved them. Going in I was worried the CGI would pull me out, but I managed to suspend disbelief. I think any “uncanny valley” creepiness contributed to the feel, rather than taking away like normally does.

We’ll see how it holds up, whether guys can drive the box office like chicks just did for Sex and the City.

GatePlay.com

Not to be confused with edge play (although the similarity cracks me up), GatePlay.com is my new favorite online board game retailer. I’ve always ordered from Funagain Games in the past, because I use their wishlist, and will not support crappy web design just to get a better deal at Thought Hammer. But GatePlay has a super friendly informative website, and awesome prices. Oh, and they ship Fedex from northern California, which is super fast to LA.

The only down-side is their selection. It’s a pretty focused website, mostly beginner to moderate Euro games. But they’ll surprise you every once and a while with a more essoteric game, some brand new games, and some transitional wargames like BattleLore (hint hint Jeff :-)).

Gristlestick - There and Back Again Tour 2008

According to the Gristlestick schedule on MySpace my brother is in playing in Montana on his way up to Alaska. Here’s a television interview they did a little while back. My brother’s the one in the red shirt.

have you met ted?

YouTube video of Neil Patrick Harris and Jason Segel singing the Confrontation song from Les Mis.

via: blog for all things how I met your mother.

Embedding Flash

It’s been a while since I’ve had to work with a flash movie, so here are a couple things I’ve learned today (applying my new policy of always researching problems before diving into code).

Using some third party flash embed code and the damn flash movie is on top of all your popups and shit? That’s because the jackasses forgot a parameter: wmode=“opaque”. See Flash content displays on top of all DHTML layers on adobe.com.

Also, here’s an improved version of the Satay Method, which you may remember from A List Apart. How to properly embed flash.

Timeout for Ajax Mootools

Mootools Ajax Timeout from blackmac.de

Mootools 1.11 doesn’t make the distinction between a failure due to timeout or 500 or whatever. This lets you.

Oh, and there’s a New Version.

JavaScript Session Variables (without cookies or query string)

Link: Session variables without cookies.

Now there’s a dangerously clever new idea. Use the window.name property to store a JSON object (converted into a string), and it stays there as you navigate from page to page. “What’s this window.name property, I’ve never heard of it?” was my first reaction, but then I recognized it from here: window.open(url, name, features). It’s been read/write since JavaScript 1.1, so I’m assuming this works in IE6, but it hasn’t been tested yet.

Of course this is completely insecure, when your visitor navigates to another site, that site will have access to your data. So it can’t hold sensitive user account information, and it can’t hold preferences that you wish to retain from visit to visit, but I’m sure there’s some sort of interface state data that would be handy to pass between pages, but not critical enough to warrant a back-end solution.

Sad Kermit

Sad Kermit sings Creep, by Radiohead.

Sad Kermit sings Hurt, by NIN.

It’s like a dream about pre-school nested within a dream about high school. Creep is worth listening to just to hear Kermit say, “fuck.”

Three Equal Height Liquid Columns In CSS

Presenting this code to demonstrate a couple concepts: gutter images on 3 liquid columns, and a generic column system. It may not work copy-paste. Also, I’m not going to bother explaining anything, or even demonstrating how the classes “double column” work with “single column”. The class clearfix is common enough, find it somewhere on position is everything, and to see what the heck I’m doing with those universal selectors (*) read liquid gutter dilemma.

The HTML:

<div class="section">

   <div class="gutter clearfix">
       <div class="single column">
          <p>Blah blah blah.<p>
       </div>
       <div class="single column">

          <p>Blah blah blah.<p>
          <p>Blah blah blah.<p>
       </div>
       <div class="single column">
          <p>Blah blah blah.<p>

       </div>
   </div>
</div>

The CSS:

.section { background: transparent url(../img/bg_gutter.gif) repeat-y 66% 0; }
.gutter { background: transparent url(../img/bg_gutter.gif) repeat-y 33% 0; }
.column { float: left; }
.column * { margin-left: 15px; margin-right: 15px; }
.column * * { margin-left: 0; margin-right: 0; }
.single { width: 33.2%; }
.double { width: 66.4%; }

Chair (One of a Pair)

LOL Cats Binge

see more crazy cat pics

see more crazy cat pics

see more crazy cat pics

see more crazy cat pics

see more crazy cat pics

see more crazy cat pics

Homer CSS

Homer Simpson in CSS

Cursor sometimes fails to appear in input text fields

link: Bug 167801

This bug won’t be fixed until Firefox 3. The fixed range from awful to horrible, involving both CSS and JavaScript. I am rather annoyed.

I think what’s throwing me off is that I’m used to IE bugs. I expect them. And so many of them are related to having layout, I know where to start.

Text Figures

link: Use titling figures with full caps, and text figures in all other circumstances, from The Elements of Typographic Style Applied to the Web.

Explored this myself 4 years ago in Typography Time. Back then I was going so far as to wrap all inline numbers in spans of class textfigure. Looks like the future of web typography is getting better, if only microsoft can build an operating system to go with those new fonts that people actually want to use.

Pulp Bard

link: Pulp Bard Wiki

It started over on ceruleanst’s livejournal. Now I might have to watch pulp fiction again just to read this. I wonder if we own it?

Dungeon

My copy of Dungeon that I picked up on eBay just arrived. I’ll have to ask my brother to see if he remembers, but I think this was our first introduction to fantasy gaming, before we even started playing AD&D, and long before M:tG.

Table-less Columnar Form or Key

I just implemented the solution to my longest outstanding CSS challenge: how to create two columns of elements with a gutter between them, without any knowledge of the height of either element. Two common examples are a graph key, and a form with labels to the left of the fields.

Your HTML could look something like this:

<dl>
    <dt>*</dt>
    <dd>required</dd>
</dl>

or this:

<div class="columnarForm">
    <label>fieldname</label>
    <div class="inputBlock">
        <input type="text" />
    </div>
</div>

The trick is to float the two elements left against each other, but make sure that the first element is set to clear left. Here’s the CSS for the form:

.columnarForm label {
    clear: left;
    float: left;
    width: 140px;
    margin: 0 10px 10px 0;
    text-align: right;
}

.columnarForm .inputBlock {
    float: left;
    margin-bottom: 10px;
}

I first attempted this challenge back in 2002 during my first days of learning hard-core CSS at Baxter. Jon asked me about it again recently, maybe last summer.

I’d be happy to see some more browser testing, might even find the time to build a sample page to facilitate that. I’ve tried it in Firefox and Safari on Mac and PC, IE6 & IE7 on PC.

Common CSS Layout Challenges

I’m switching gears at work from JavaScript widgets to CSS layout, and let me just say that web browsers, they are humbling things. But I’ve been making an effort to make better use of outside resources during my development process, and it is really helping. Here are some of the challenges I’ve banged my head against in the past but solved more elegantly today with the help of our friend Google:

Layout combining fixed and flexible elements

Specifically, a flexible main content column with a fixed width sidebar, the main content coming first in the code. If it weren’t for the source code order problem the sidebar could just be floated right. If we were using the same units for both columns we could float them left against each other, or use opposing floats. The solution is to use negative margins, which behave differently on floating elements. Here’s a good tutorial: Creating Liquid Layouts with Negative Margins.

Parent element inherits the top margin of its first-child

So I’ve got this #content div with no margins. The first element inside it is an H1 with a 1em top margin. The div actually takes on the margin of the header, creating an unsightly gap. As I suspected this is some bastardized form of margin collapsing. The solution in code looks like this: #content { padding-top: 1px; margin-top: -1px; }, for an explanation we turn to Eric Meyer’s article on Uncollapsing Margins.

Clearing floats in IE7

EasyClearing, the most popular clearing method without structural markup, needs a minor update for IE7: EasyClearing, the Aslett/PIE way is NOT broken in IE7! There’s another method that’s brilliantly simple, applying overflow: auto; to the containing element, but in my experiments it had a nasty tendency to introduce scrollbars.

Wild Animal Park Early Risers Caravan Tour

link: Early Risers Tour photos

Last weekend for Cybil’s birthday we went on this awesome tour at the Wild Animal Park in San Diego and bought the photo set (we spend too much money there, since it goes back to the animals).

The tour we took is the best one the park offers (we’ve also taken the Cheetah Run, Medical Center, and Carnivores Tours). The Early Risers tour is the Photo Caravan, a talk with a bird keeper, behind the scenes with the Asian elephants, a private animal encounter, and brunch in the place where the original founder hit people up for money. All of that starts at 7:30am and is done before noon, so you miss the worst of the heat.

After the tour we went up to the Kupanda Falls Botanical Center, up above the Conifer Forest (map) and played Ra, which is this nifty bidding game that works surprisingly well with just 2 players. The top of the park is really nice. It’s a steep walk and there aren’t many animals (none if you go up as high as the Botanical Gardens), so there aren’t many people. We’re down at the park enough for tours that when we’re done we often just hang out and play board games.

I’ll fill in titles and descriptions of those photos eventually. In the meantime highlights are the cloned cow (with the short horns), the mean-ass cows with the nasty curved horns, and the funny anime/pokemon looking animal at the end is a Springhaas.

Desired Paths

link: Desired Paths

Don’t see so many of these here in the southwest where grass is worth so much green. But back east I’d rarely walk on paved paths, there’s almost always a shorter way.

Gary Gygax Rest in Peace

Farewell to the Father of Roleplaying

Display a print friendly logo when CSS is disabled

This is totally how I’m going to do the Citysearch logo on the new version of the site.

link: Display a print friendly logo when CSS is disabled

Essoteric Celebrity Moment II

February 2008 has been a whirlwind. Started off by going up to SF to work with Adaptive Path every Monday for four weeks where I got to brainstorm with Jesse James Garret and had lunch with Peter Merholz and a bunch of other people from AP. So that sort of set the stage for this being an extraordinary month.

Now, I knew he was in town (I’m guilty of reading his livejournal in addition to watching his video podcast, and listening to the podcast On Board Games that he participates in), but when I saw Scott Nicholson of Board Games with Scott in the cafe where LA Games meets I was pleasantly surprised.

I even got a chance to chat with him a little bit, congratulating him on his new game that’s out in the fall. He said it’s not going to be for everyone, it’s a people-oriented economics game simulating the Tulip bubble market in 1637, but he’ll definitely make a video about it as soon as he gets a copy. Scott asked my name, and actually recognized it from when we corresponded via email back in September 2006. His email signature is where I borrowed the idea of providing a label for each of the several domain names in mine. Scott almost joined us for a game of Diamant, but opted for slightly more substance with Ticket to Ride (Diamant, now sold as Incan Gold, feels a lot like blackjack, even has gambling built in) .

So, that was my leap year. Not sure if anybody else will appreciate how cool it was, but just thought I’d share.

JavaScript: Defining console.log for IE

Front-end web development these days centers around one tool: Firebug. So we go merrily building away in Firefox, and then it comes time to debug in IE, and we’re screwed. Short of installing Firebug Lite (which I have future plans of doing, on demand via Mootools.Asset), but short of that, here’s a little code snippet that defines console.log:

if (!$defined(window.console)) { //$defined() == isDefined()
    window.console = {};
    console.log = window.alert;
}

The bit I missed first time around was testing for window.console, not just console. And the bit of syntax that may look funky, window.console = {};, is an object literal definition. We’re defining window.console as an object with nothing in it. You’ll also see it in my favorite new bit of JavaScript syntax: var namespace = window.namespace || {};. (In JavaScript the OR operator treats the left hand side as a boolean, and then returns the value of either the left or right hand side)

Podcasts

About a month ago iTunes decided that it would be fun to drop all of my podcast subscriptions. I think I’ve remembered all of them, although it wasn’t until last weekend that I caught a Carl Kasell reference on Car Talk and remembered Wait Wait (never mind that he’s the one reading my morning news half the time).

So here’s the list of podcasts to which I currently subscribe, in case they get lost again. Maybe I’ll come back later to add subscription links and categorize them (Board Games, Language, Sex, News).

1. A Way with Words
2. Dawn and Drew Show!, The (we’re going to dawn-a-pa-drew-za)
3. Dice Tower, The
4. Garrett’s Games and Geekiness
5. Grammar Girl’s Quick and Dirty Tips or Better Writing
6. Into the Gamescape
7. Legal Lad’s Quick and Dirty Tips for a More Lawful Life
8. Nolo: Your Legal Companion–Law and Business
9. NPR: 7PM ET News Summary
10. NPR: Car Talk
11. NPR: It’s All Politics
12. NPR: Marketplace (trial basis)
13. NPR: Science Friday (Mar 28, 2008 update)
14. NPR: Sunday Puzzle (update)
15. NPR: Wait Wait… Don’t Tell Me!
16. On Board Games
17. Onion Radio News, The
18. open source sex
19. Radio Blowfish Variety Show, The
20. Slate Explainer Podcast
21. Slate Magaine Daily Podcast
22. Spiel, The
23. Washington Week Podcast | PBS
24. WNYC’s Radio Lab
25. Word Nerds, The

Anything you guys would recommend I try out?

Snappy JavaScript Animation

All JavaScript animation should be this fast: Zipline Interactive.

…Looks like it’s Mootools. Not surprised. The more I use the library the more I’m impressed. It’s so powerful, and the syntax is so elegant. I’ve been writing a developer’s guide at work, have to see if some of it can’t be made available to the wider web (well, future prospective employers anyway).

The IE7 auto-rollout: fact and fiction

I’ve been hearing rumors about an IE7 push. Unfortunately it’s mostly just rumors, the only people rightfully forced to upgrade are those poor saps working in tightly controlled business environments. Still need to find some current stats on browser distribution to see what kind of effect it had.

Link: The IE7 auto-rollout: fact and fiction

No More Texas Sex Toys Ban

link: Federal appeals court overturns Texas sex toys ban

A sign of change for the better. Between this and the way the democratic primaries are going, there is hope for the country.

Mootools for Citysearch

Over at Citysearch, I’m going to be dropping the existing JavaScript library, which tries too hard to make JavaScript like Java, and switching over to using mostly mootools.  It’s light weight, has everything I might need from Array and String functions to Ajax and Animation, excellent documentation, and an active community building handy stuff like a Calendar and Slimbox (lightbox clone).

I’ve decided to keep Easy DOM (upgraded to the latest version of course), which allows for simple creation of DOM elements via an easy to read object literal syntax. I’ll have to dig up a sample…

UE Celebrity Moment

Jesse James Garret joined our discussion about bringing community to Citysearch. He had some particularly cogent things to say about the need to marry utility for the individual and contribution to the community, citing del.icio.us as an example of this.

Sketchboards with Adaptive Path

Flying up to SF on Monday to do some sketchboards with Adaptive Path. As long as I can stay in the trenches here and avoid the politics this gig might just work out.

Adaptive Path

First day working with Adaptive Path today. Man, they really do have their shit together. Also nice to be in a meeting with higher-ups at the company who have a realistic understanding of the current site, i.e. that it really sucks, from a functionality, usability, credibility, and well, pretty much every way except for getting merchants and advertisers to pay for its strong SEO. All that could change, presuming our CTO doesn’t kill us with unrealistic deadlines as we try.

The Spymaster's Lady by Joanna Bournne

Just finished a novel that would, if weren’t a romance, be getting serious critical acclaim. The writing is simply superb. I’ll spare you a thumbnail of the cover, but be warned it’s standard romance novel fair.

It’s a spy novel set during the Napoleonic wars, full of secrets and lies. The most striking thing about the book is the dialogue. Much of the book takes place in France, with the characters speaking in French. The dialogue is written in English, but with French sentence structures. The author doesn’t have to use “he said” or “she said”, the characters voices are so clear you can tell who is speaking. It’s not a story to read quickly, there’s no extra fluff and considerable subtext.

Here’s Cybil’s Review.

Gradient Headers Using CSS

link: CSS Gradient Text Effect

Nothing new, used the effect a year ago on the PSAS project with transparent gifs, but I’m posting it here as a reminder of how to do the “filter:” hack to get it to work in IE6 with pngs. Update: more thorough discussion of transparent PNGs in Internet Explorer 6.

There’s a good point somebody made in the comments about the text not being selectable, good thing to keep in mind, the link to the article would have been annoying to write without copy/paste.

My addition to the CSS would be to define the height in ems, not pixels, so that it scales with the text.

Wii VR

link: Head Tracking for Desktop VR Displays using the WiiRemote

behind on my feed reading (again) but if you missed this one it’s a must see.