Acko.net

Introducing Facing.me

2012-04-25T00:00:00-07:00

Introducing Facing.me

A unique way to meet people

We've been sending out whispers for a while now, but it's finally out: a new web site called Facing.me. Coded and designed by Michael Holly, Ross Howard-Jones and myself, it promises a unique way to meet people online. This would be the point where the obvious question is dropped: wait, what… you built a dating site?

Sort of. Let me explain.

Having spent many years in the web world, we'd all gotten a bit complacent. The web has settled into its comfortable rhythms. Sites and applications can be modelled quickly and coded on your framework of choice. And nowadays, Web 2.0 cred comes baked in: clean URLs, semantic HTML, AJAX, data feeds, APIs, etc. Isn't this what we all wanted?

But the web continues to evolve, and giants are roaming the playground. Sites like Facebook and Twitter hold people's attention with surgical precision, while engines like Google answer your queries with lightning speed. Given that we've all slotted such services into our workflows and indeed lives, it seems only natural that 'indie' developers should keep up. We can't pretend that a 2000-era style web-page-with-ajax-sprinkles is the pinnacle of modern interactive design.

So we set out to try something different.

A Guy Walks into a Bar...

If you've managed to score an invite, the first thing you'll see is the wall of faces that loads and fills the screen. The second thing you'll notice—we hope at least—is the lack of everything else.

The metaphor we kept in mind was the idea of walking into a bar, and looking around. If you see someone you like, you can go up to them and strike up a conversation. So that's exactly what the app lets you do, through video chat. You can pan around to see more people, and just keep going. If you're looking for something specific, you can filter your view with a simple "I'm looking for…" dialog.

As you mouse around, you can see who's online, and flip open their profile. If you want to strike up a video chat, it happens right there too. If the person is online, they'll see your request immediately in a popup and can choose to accept or decline after reviewing your profile. If they're offline, they'll see your request next time they visit.

To avoid missed connections, you can 'like' people you're interested in. You'll see (and hear) a notification pop up the moment they're online. You can keep the app open in a background tab and never miss a thing.

Aside from some minor social glue and a few fun little extras for you to discover, that's it. It's our twist on a minimally viable product if you will. Studies have shown that online matching algorithms are a poor predictor for how well people mesh in person. Until you meet face-to-face, you just don't know. We think direct, spontaneous video chat is a better first step rather than endless profile matching and messaging.

Polishing Bacon

But despite its minimalism, a big aspect of Facing.me is the effort and care we put into it. Our goal was to achieve a level of polish typically reserved for premium iPhone apps and bring it into the browser. We wrapped the whole thing in a crisp design, enhanced with tasteful web fonts. But most importantly, we sought to expose the app's functionality with as little interruption as possible. To do that, we layered on plenty of transitions driven by CSS3 and JavaScript, and stream in data and content as needed.

Based on previous work in custom animations—and bacon—we refined the approach of using jQuery as an animation helper for completely custom transitions. We tell jQuery to animate placeholder properties on orphaned proxy divs, and key off those animations with per-frame code to drive the fancy stuff.

As a result, we can have a photo grow a picture frame as you pick it up, and then flip it around to show a person's full profile. This careful choreography involves animating about a dozen CSS properties, including borders, shadows, margins and 3D transforms, all with custom expressions and hand-tuned animation curves. Similar transitions are used for lightbox dialogs.

Throughout all of this, the animations remain eminently manageable. We can interrupt and reverse them at any point, and run multiple copies at the same time, thanks to pervasive use of view controllers. Far from being a useless tech demo, it actually enables us to craft the user experience exactly the way we like it: being able to acknowledge user intentions with intuitive feedback no matter what's going on, and firing off new events and requests without worrying about the internal state. Gone are the fragile jQuery behavior soups of old.

The one downside is that only the newer browsers—i.e. Chrome, Safari and Firefox—get to see everything the way it was intended. And actually the performance in Firefox is still a bit disappointing. IE9 users will have to be satisfied with a crude 2D approximation until IE10 comes out.

Rapid Rails and Real-Time Node

To make all this work effectively on the server-side, we used a dual-mode stack of Rails and Node.js.

The Rails side houses the app's models and controllers, and provides an API for all the client-side JavaScript to do its job. Video chats are handled through Flash and routed through its built-in peer-to-peer functionality.

The node.js component acts as a real-time presence daemon which users connect to over socket.io. It's used to drive the status notifications and to coordinate the video chats. We can exchange any sort of notifications between users with a publish-subscribe model, opening up many interesting avenues for future development.

Overall, this approach has worked out great. Rails' ActiveRecord and the stack around it allowed us to build out functionality quickly and with just the right amount of necessary baggage. We made generous use of Ruby Gems to save time while still maintaining full control.

Node.js's event-driven model adds real-time signalling with no hassle. For the few cases where node.js needs to interface with the Rails database directly, we slot in some manual SQL to take care of that. For everything else, Rails and node.js exchange signed data through the browser.

Come Take it for a Spin

Finally, we also put our heads together and made a promo video, voiced by the lovely Tina Hoang:

REXML could not parse this XML/HTML:

Built in our spare time by just 3 guys in a virtual garage, we're pretty proud of the end result. We'd love for you to take it for a spin, so head over to facing.me and grab yourself an invite. There's a feedback form built-in, and any suggestions are welcome.

Discuss on Google Plus.

Abusing jQuery.animate for fun and profit (and bacon)

2008-09-22T00:00:00-07:00

Abusing jQuery.animate for fun and profit (and bacon)

The days of static UIs that only have jarring transitions between pages are pretty much over. With frameworks like CoreAnimation or jQuery, it's easy to add useful animations to applications and webpages. In the case of jQuery, you can easily animate any CSS property, and you get free work-arounds for browser bugs to boot. You can run multiple animations (of arbitrary duration) at the same time, queue animations and even animate complex properties like colors or clipping rectangles.

But what if you want to go beyond mere CSS? You might have a custom widget that is drawn using , whose contents are controlled by internal variables; maybe you're using 3D transformations to scale and position images on a page, and simple 2D tweening just doesn't cut it.

In that case, it would seem you are out of luck: jQuery's .animate() method can only be applied to a collection of DOM elements, and relies heavily on the browser's own semantics for processing CSS values and their units. However thanks to JavaScript's flexibility and jQuery's architecture, we can work around this, and re-use jQuery's excellent animation core for our own nefarious purposes.

Hackity hack hack

First, we need an object to store all the variables we wish to animate. We use an anonymous

outside of the main document, so that jQuery's DOM calls still work on it. We simply add our own properties to it:

var vars = $.extend($('

')[0], {

  foo: 1,

  bar: 2,



  customAnimate: true,

  updated: true

});

In this case, our properties are foo and bar. We also set customAnimate and updated to identify this object (see below).

Next we need to override jQuery's default step function, which gets called for every step of an animation, and applies new values to an element's CSS properties.

// jQuery.fx.step._default _default: function(fx) { fx.elem.style[fx.prop] = fx.now + fx.unit; }

We can replace it using the following snippet:

var $_fx_step_default = $.fx.step._default; $.fx.step._default = function (fx) { if (!fx.elem.customAnimate) return $_fx_step_default(fx); fx.elem[fx.prop] = fx.now; fx.elem.updated = true; };

With the new step function, jQuery will check for the presence of a customAnimate property on any element it is animating. If present, it will assign the (unit-less) value to element.property rather than element.style.property and mark the element by setting element.updated to true.

Now we're ready to animate, using the normal $.animate syntax:

$(vars).animate({ foo: 5, bar: 10 }, { duration: 1000 });

The values vars.foo and vars.bar will now smoothly change over time. You can use any of jQuery's animation abilities as usual.

Now what about that updated variable? Well to actually use these animated values, you will need some kind of timer or step callback to read them back and draw them on the page. If you're using , you need to redraw your entire widget for every change, but you don't want to be wasting CPU time by constantly refreshing it. Furthermore, if you're running multiple animations at the same time, you'll want to aggregate all your property changes into a single redraw per frame. This is easy with the updated property and a simple timer:

setInterval(function () { if (!vars.updated) return; vars.updated = false; drawWidget(); }, 30);

Now your widget will only refresh itself when its values are changed by the animation step function we defined earlier, and very few CPU cycles are wasted. As a plus, you can render updates as fast or as slow as you want, without affecting the duration of your animations.

Demo

I whipped up a quick demo which renders a cloud of bacon using . All the motion in the demo is created through $.animate(), with a bunch of animations running at once.

This demo will not work in Internet Explorer, and has only been tested in Firefox 3 and Safari 3.

This is a rather esoteric example, but there are plenty of useful ways to apply this technique. I've used it to implement smooth, beautiful, usable widgets. You can combine multiple motion and opacity animations triggered by clicks and hovers without issues.

Final notes

While this technique works great, there is one big caveat. You should avoid animating any property that exists in CSS ('float', 'display', 'opacity', ...) because these have unexpected side effects depending on the browser.

There are also a couple of weaknesses:

jQuery does not support continued easing. That is, when you override an animation that is already in progress, the variable being animated will instantly stop and restart from its current position. The rate of change is not continuous between the two animations.
Animating angles is tricky. E.g. when animating from 350˚ to 0˚, you want it to animate across 10˚ and not the long way around. This requires manual correction.

And obviously, it would be cleaner if jQuery's animation core was refactored to separate out the CSS-specific code instead...

Nokia N73 Review

2007-01-31T00:00:00-08:00

Nokia N73 Review

Two months ago I got a Nokia N73 hand-me-down from Roland thanks to Nokia's Blogger Relations Program. It's a 'smart phone' with a large 320x240 screen, a 3 megapixel camera and more. Before this, I'd been using an old Nokia 3310 brick (monochrome screen) so this was quite a step up. Still, I wasn't particularly unhappy with my old phone because all I really needed was voice calls and SMS. So I was curious myself to see if I'd actually use all the bells and whistles.

The good news is that making calls and sending text messages has become easier. The default interface has a quick launch bar to access contacts, text messages and other features. Selecting a contact by typing some letters is fast and accurate, and the big screen is easy to read. I also have no problems using predictive text input thanks to years of SMS'ing, while the improved controls (such as the 4-way stick) make entering symbols easier.

Managing my contacts is now a non-issue. I edit my entire address book in Mac OS X and just sync it to the phone, including everyone's pictures. Plus, with Adium address book syncing, this means that it automatically imports IM icons for contacts that don't yet have a picture. However, I did try editing contacts on the phone itself, and it was way too complicated.

Now, the first phone feature I really enjoyed was the built-in camera. Unlike most camera phones, the N73 has a pretty good camera and lens, with auto-focus and all the works. The phone also has a flip cover, so to take a picture, you just slide open the cover on the back and hold it like a real camera (including holding down the snap button half-way for focus). There is even a button to go straight to your pictures.

However, there is a big annoyance here: it takes 5-7 seconds to open the camera application. This is way too long and makes it impossible to snap spontaneous pictures. Also, in spite of all the technical wizardry, pictures in low-light conditions and at night look very bad and washed out. The pictures it takes are also compressed too much. There's a 1GB memory card in mine, so I really wish I could save images to (near-)lossless JPEG.

The second interesting feature was the MP3 player, especially in light of the 1GB of storage which would fit a lot of music. I even found a nice OS X app iTuneMyWalkman that automatically syncs iTunes playlists for me.

However, the phone's music player is simply horrible. The UI makes no use of the N73's buttons: I'd expect to be able to fast forward or backward by holding the stick left/right, and clicking it left/right to go to another song. Instead, you have to press up/down to reach the right on-screen button and then press the stick to push it.

Even more annoying is that leaving the music player stops all playback. If you wish to use the N73 like a real MP3 player, you have to go into a context-menu, scroll down and select "Play in background", then lock the keypad from the main screen every single time. The current behaviour only makes sense if you wish to listen to random audio clips at random moments, which I really don't see myself doing.

To top it all off, there's the fact that you can only use the official Nokia headphones with the N73, because they have a proprietary connector. I already have headphones for my laptop and I don't want to carry another set around.

Next, I've gotten to really like the calendar and the alerts it can provide. However, here I also stick to iCal on OS X and simply sync all my events to the phone. The phone's own calendar input is, again, clunky and cumbersome to use.

After this, I looked at the other capabilities of the phone. A highlight is the included Snakes game, which is in full 3D and features whacky snake action on square and hexagonal grids, even on curved surfaces. I've played it several times while queueing up for various things, and it's fun and easy to pick up. Bonus points for the automatic checkpointing of your progress in the game.

For playing video, the phone uses RealPlayer. Now, I realize this might sound a bit irrational, but I for one don't want anything to do with Real. They have screwed over their users for years on end producing ridiculously crappy players bundled with some of the most insidious spyware and adware seen. But even disregarding that, RealPlayer is a horrible choice as it doesn't play any of the most popular video formats, like DivX or QuickTime. With open-source players like VLC being able to play every format under the sun, there is really no excuse for this.

As for the internet features, I can't try them out because I have no data plan. It's apparently impossible to get an unlimited data plan in Vancouver, unless you get a Hiptop or have connections.

Finally, more small annoyances:

The Nokia proprietary connector is almost-symmetrical, which means half of the time I'm trying to plug it in the wrong way.
The default setup and some of the applications (like the photo browser) contain annoying plugs for online services and various lame ideas (like Nokia Lifeblog). Most cannot be removed and just get in the way.
The phone always complains I unplugged it incorrectly after using the USB data cable. I haven't found any 'right' way to unplug it (and yes, I do unmount/eject the drive in OS X).
The phone automatically formats the memory card in an obscure directory tree that mixes user-owned content with system libraries and applications. Images and video are saved in nested subdirectories with a weird numerical format that includes a sequence number and date, but not a single separator character. When was 28012007240.jpg taken?
There is an utterly useless second "Quick launch" button that pops up an elaborate directional menu where you can choose up/left/right to pick a command. Of course, all that window dressing means it's actually terribly slow to use. It's an embarrasingly bad waste of a button and cannot be replaced or disabled.
The data cable's connector is flaky and will disconnect momentarily if you fiddle with the phone while it's plugged in.
The default menu setup is bizzare. Some features are located at the top level, some are inside "Tools", some are inside "Applications", some are inside "Downloads!" (yes, with exclamation mark). Luckily you can rearrange this to your liking.
The keyboard is really small vertically, yet there is a lot of wasted space. Bigger buttons would be nice.

After two months, the only thing I've consistently used other than voice calls and SMS is the camera, because it is really good for a phone. All the pictures on my Flickr page since December 1st were taken with the N73. I also listen to music whenever I can, but the MP3 player and proprietary headphones are too cumbersome.

The only part of the N73 that really stands out for me is the phone's form factor. I love that in spite of all its features, it's only as big as a typical phone. It's clearly designed for snapping pictures with and the screen is large and gorgeous. If the data-cable and file system didn't suck so much, I'd probably use it as a USB stick too (or better, if you could mount Bluetooth storage as local, ejectable drives).

Having used this phone, I can clearly see why traditional cellphone makers should fear Apple's iPhone. I've consistenty avoided using the phone's built-in tools like address book and calendar editing, because doing it on my Mac is orders of magnitude easier and faster. From what I've seen, the iPhone changes that. I really wish the iPhone will bring a fresh wave of usability improvements for mobile devices. But, if usability was all that mattered, we wouldn't be seeing so many Windows installs out there either...

Making Drupal smarter

2007-01-19T00:00:00-08:00

Making Drupal smarter

One of the things I worked on for Drupal 5 was to make Drupal smarter about itself. For example, the new status report tells you about security or maintenance problems, and can alert you if you need to run update.php after updating a module. These warnings are also pushed out to the main administration page.

This is a significant improvement in usability, as we try to make site set up and maintenance as painless as possible. The user can focus on the things they care about. If there is something that needs the admin's attention, it is clearly indicated.

The inspiration for this came from OS X. There are some really great examples of this in both Apple and third-party applications. For example, Mail.app automatically figures out if your mail server requires SSL or not: it simply tries both and sees which works when you set up the account. It happens transparently.

NewsFire does something similar. When you click the "Add feed" button, it automatically takes any URL on the clipboard, pings it and fetches the feed title (provided it points to a valid feed). All you need to do is press ok on the pre-filled form. If there is no URL on the clipboard, you get a blank form.

With our new _install and _enable hooks, and _requirements to examine the server environment, Drupal 5 modules have a lot of more opportunities to 'do the right thing' transparently.

We should encourage this practice as much as possible. Modules that require Drupal's configuration to match certain settings should make sure they are set correctly. If the setting is relatively benign and related to the module's purpose, it can be set automatically. Otherwise, it can be a requirement for the module to be installed/enabled.

We do need to walk a fine line between information overload and too much magic. But I think we've managed to do fine so far.

jQuery Menu Scout

2006-12-07T00:00:00-08:00

jQuery Menu Scout

Updated video: now also highlights deep links (though gray, not white), bubbles are prettier and aligned better and video capture is smoother. I also changed the music to please termie.

Out of a whacky conversation on IRC comes the latest treat for Drupal 5.0.

The new administration section is nice, but it's a big adjustment for 4.7 users. It's not immediately obvious where to go to find a certain option. Wouldn't it be handy if you could find any administration page with a couple of keystrokes? Something like Apple Spotlight?

Today's usability special: a nice slice of jQuery with some search module on the side, sprinkled with menu magic and topped off with some sexy CSS. Feast your eyes on this:

(MPEG-4 movie)

Patch is available on drupal.org.