Brewster's Field Guide to Web 2.666 .:. kentbrewster.com

Who Likes Mitt?

Here's a real-time look at the total count of likes for Mitt Romney's Facebook page. Mmm, sweet tasty schadenfreude!

Fluent 2012: Eight Simple Rules for Running Your JavaScript on My Page

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!

Avatar Portraits

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.

Instant Data URIs

Drag and drop files into your browser and immediately see their base64-encoded data:uris, with thumbnails.

Input Placeholders for Everyone

Placeholders are sweet; they supply the reader with a hint about what he's supposed to enter in a text field, allowing for much tighter design. Sadly, placeholders only work with the most recent browsers, which do NOT include Firefox less than version 4 or IE less than version 9.

South By Southwest, 2011

Random notes about the fine time we had in Austin, including my 20x2 movie and Mistakes I Made Building Netflix for the iPhone.

Gawker Damage Control

While I was away in Brazil, crackers released a large blob of information containing much of Gawker Media's user database.

On Leaving Netflix

After many fine adventures at Netflix, I'm off to do the next thing

Position:Fixed on Android 2.2 Devices

Hello, Froyo! Love your position:fixed support! Got fixed headers and footers with scrolling body working with zero per cent JavaScript!

Safari Autocomplete Exploit

Turns out @jeremiahg's Safari autocomplete exploit is trivially easy to implement.

Hacking Flickr's HTML5 Video

Hey, neat! Flickr's launching HTML5 video for the iPad. Here's how to find it and get it for your site. (Webkit only, sorry!)

South By Southwest Interactive Panel API

Shown at Revenge Of Kick-Ass Mash-Ups, SxSW 2010

Missing Kids CAPTCHA: a Hack for Good

Here's the hack that won me the very first Yahoo! Hack for Good award, way back in 2007. Sadly, this did not ship while I was a Yahoo employee; I am seeing encouraging signs that Phillip Tellis is working on it, so I now feel free to post this in public.

Inside Netflix Widgets

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.

Backchannel: an Offline-Capable Web App for the iPhone

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. 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.

Collide-O-Scope: a Canvas Experiment

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.

Fixing (Some) Twitter Replies

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.

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. 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.

Build a Twitter Search Badge in 15 Minutes

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?

Also included: my 15-slide presentation from the May 9th BayJax meet-up, detailing the development process.

Netflix Catalog API Explorer

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.

True OAuth Confessions, or Why My Hand-Rolled Calls All Blew Chunks

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?") Here's my top ten list of horrible mistakes made while trying to reverse-engineer OAuth.

Amazon Wish Lists Are (No Longer) Dreadfully Insecure

Updated 3/27/2009, 10:01PDT: looks like this may have been fixed a few minutes ago. Read on, to learn more about what was happening.

With a few lines of JavaScript it's possible to discover whether your Web site's visitors are signed in to Amazon, find out if they have a wish list, add the arbitrary items of your choice, and extract their names, all without their knowledge or permission.

Bad.js : a Searchmonkey Filter for Bad JavaScript Advice

News flash: there is a crapload of really bad JavaScript programming advice out there. I click into this junk a lot, and it bothers me. With a simple set of URL filters, I was able to build an add-on for Yahoo! Search that warns me away from all those lovely canned scripts from 1997.

GitHub Social Badge

As usual I'm late for the bandwagon. Here's my very first GitHub project, a case-hardened badge that allows a certain amount of surfing around between GitHub repositories, owners, and watchers.

iClipper: Client-Side iPhone Copy and Paste

The first thought I had after building Cleeper was "Dude, this is way too complicated. It should just copy straight to e-mail."

Cleeper: an iPhone Copy-To-Twitter Assistant

One of the iPhone's few glaring disappointments is the lack of proper copy and paste. If I'm on a page and I want to send a chunk of it over to Twitter, I have no choice but to memorize it, bring up Twitter's horrific little iPhone interface, and painfully bang it in there with my big fat fingers. After warming up with iClock, a toolbar bookmarklet that contains an entire Web page in a base-64 encoded data: URL, I was ready to try something a bit more useful.

Cleeper will inject itself into the page you're on, wait for you to click an existing block-level element, and copy the text of the element into an entry box, where you can edit it. After you're done editing, click the Cleep button to send your message off to Twitter.

iClock : an Instant iPhone App

Once it's running, go back out to your Settings, turn off your network by going into Airplane Mode, and then come back and try iClock again. If all went well, you should see a working clock with your network disabled, because the bookmark itself contains everything necessary to recreate the page.

Delicious Search Exploder

Until the release of Yahoo! Query Language, one of the key parts missing from del.icio.us (or "Delicious," as it's now branded) was a full-text search API. Delicious Search Exploder uses YQL, Pipes, and a couple of native feeds from Delicious to provide an on-page search-and-browse experience, for users, tags, and sites.

Identica Badge: No Longer Just a Prototype

Added: native API calls, searching, sorting, Identica-like styling, home-page, reply-to and original-message links. Fixed: Unicode support.

For more about the project, see Marshal Kirkpatrick's Identi.ca: May A Million Twitters Bloom, Hugh McGuire's Why Identi.ca Matters, and Edd Dumbill's Why Identi.ca is Important.

Baby Steps with OAuth and Yahoo! Query Language

For my SeedCamp talk I've built a small application using Yahoo! Query Language and oAuth. To try it out, enter the stock ticker symbol of your choice. (YHOO, MSFT, GOOG, and AAPL are a few of my favorites.)

Of particular interest here may be the compressed HMAC-SHA1 function; this was simplified from Paul Johnston's full-sized version, here: http://pajhome.org.uk/crypt/md5/sha1.js.

CrunchBadge : a Syndicated Widget for the CrunchBase API

Here's a single-line JavaScript include that will check all the links on your page for pointers to CrunchBase, heat 'em up, and pop up a badge full of lovely explanatory data when your reader mouses over and holds for a quarter-second.

CrunchBadge uses many of the techniques detailed in Case-Hardened JavaScript; please go there for technical details. If you want to poke at the CrunchBase API, which is pretty sweet, check out their Google group.

After the result renders, we're running everything back through the link detector, so you can continue to surf CrunchBase while remaining on the page you were interested in. Once you mouse over a second enhanced link, its title will go into the select box in the headline, and you'll be able to easily find your way back.

Case-Hardened Web Badges: the Live Version

Here at last is my presentation from Web 2.0, which I've been criminally remiss in posting. It's live now because of L.M. Orchard's marvelous Firefox Download Day Mega Widget, which uses some of the techniques.

Creating Open Profiles

For a while now I've been hearing about various "data portability" initiatives, most of which will only allow you to make a copy of some small subset of the current state of your profile. Everything else--including historic transactions and top-secret personal information--remains online, per the terms of the TOS you ignored when you first joined up.

Remember, if you can't delete it, it's not portable.

FOAFster -- Mashable FOAF, from MyBlogLog

I've been interested in FOAF for a long time. Abstracting out all my social relationships into a separate layer, just as I do with my presentation and behavior layers, really resonates. Future possibilities like being able to point marketers at my FOAF object so they will quit wasting their time trying to sell me timeshares seems like a very real possibility.

What changed today? MyBlogLog rolled out FOAF. And now, finally, I don't have to worry about keeping a file on my Web site. All I need to do is add people and services to my network on MyBlogLog, and it's taken care of for me.

Pipes Badges

This morning, the Pipes team launched a new feature, Pipe Badges. Using several of the ideas collected in Case-Hardened JavaScript, Pipe Badges allow the site operator to include a single line of JavaScript, hosted by Pipes, and see one of three handy badges--list, image, or map view--pop up instantly.

Patching Privacy Leaks

Over the past few months I've published articles documenting an extremely trivial weakness that allows any third-party operator to determine if its users are signed in to several well-known Web services. This is pretty clearly information that ought not to be shared; even if it's not explicitly stated in the service's terms of service, it's expected by the public.

Blog Juice

Here's a toolbar bookmarklet that looks for a MyBlogLog identifier on the page you're on, and uses the MyBlogLog API to dig out information about its reader roll. You can try it here, or drag it to your bookmarks toolbar and run it anywhere else on the Web.

First Steps with the MyBlogLog API

After much hard work, the team at MyBlogLog and the Yahoo! Developer Network--including but definitely not limited to Todd Sampson, Ian Kennedy, J.R. Conlin, and the one and only Chris Goffinet--have released the MyBlogLog API into limited public beta.

Suddenly there's a wide-open source of information about who lives where on the Web. With a minimum of fuss it would be easy to go grab a Twitter status, del.icio.us bookmark set, or Flickr feed for anybody listed below and slot it neatly into place, and that's just the beginning.

Glint: an iPhone Toy

Think of it as a small-scale Sudoku board with a twist: you must place pieces on the board in the order that they're given to you. If you make an illegal move, by duplicating a color in any row or column, the move you made will stay while enough of the previous moves (row, column, or sub-board) will drop out and return to the end of the line. This may turn out to be smart strategy, depending on the layout you're faced with. To try this out on your iPhone or iPod Touch, visit http://kentbrewster.com/glint

The Well-Tempered iTouch

Here's a list of notes-to-myself about hacking the iPod Touch. I'm posting it here in the hope that it may be useful to other owners, who are happy with their new toys but can't help thinking that there might be more fun to be had.

In Which Tom Boyd Punches my Wife in the Face

We're into the New Year, and not a word from Mr. Boyd besides the demand that I take this down. While I understand some folks would like more detail, it won't be posted here. Unless you're the sort of person who thinks "she pissed me off" is a good reason for a man to sucker-punch a woman, details are not important.

Overheard at Defrag

Back late last night from Defrag, which I hope to attend again next year. It's been noted elsewhere that most speakers at the conference repeated several main themes; this seems true to me. In this post is a long list of highlights, sorted in alphabetical order, which seems as good as any.

Hide Recent Document History in WinXP

If you're like me and you prefer the "classic" Windows start menu and task bar--flat gray, minimal distraction, not so Teletubbies-looking--you may have already noticed that there's no easy way to tell the Classic version not to track and show your recently opened documents.

Easy Flash Drive Data Recovery with PhotoRec

Had a bit of trouble today: one of Vickie's two-gig thumb drives went catatonic. All Windows could come up with was the scary message that the disk in drive E wasn't formatted, and did she want to format it now? (Answer: nooooooo!) After a bit of investigation--the usual stuff: reboot, pray, try it on several machines, sacrifice a chicken--we came to the conclusion that the thing's file system had broken. To the rescue: Christophe Grenier's TestDisk/PhotoRec suite, at http://cgsecurity.org.

Adobe MAX / UIUC Hack Day

Back from a week-long jaunt to the heartland: to Chicago, for Adobe MAX, and thence to Champaign-Urbana, for a lecture to Mike Woodley's class and the kick-off event for the UIUC chapter of Yahoo!'s University Hack Day.

Adobe AIR + Yahoo! Search = AIR Search

In which our friends Structure, Presentation, and Behavior go on a New Adventure, outside the browser window....

Case-Hardening the Del.icio.us Tag-O-Meter Badge

Implementing the del.icio.us tagometer badge on the new site clashed with my main goal for the redesign: it had to be as fast as possible. So I cracked into it this afternoon, and wound up with a single 6k script that works, and does nothing to my YSlow score, which is currently a 96% on pages that don't have a bunch of external includes. (Bonus: there's even a way to recreate the del.icio.us logo without loading an image!)

Inside Amazon Widgets

A week or so back, Amazon released their Widgets page, which seems to be a corral for many existing widgets and services, plus some neat-looking new ones. What's most interesting to me is that the cool new toys all seem to be in HTML, and not Flash. Amazon seems to be going after a smaller, more-capable crowd (bloggers, hackers, small business operators) and not the denizens of the MySpace/Facebook walled gardens.

Things to Do with the Yahoo! Answers API

Because of the way Answers is set up, high-level users--and by "high-level," I mean "anybody level 3 and above"--are not powerful because of what they know, but because of the frequency and tone with which they communicate what they know. They're on the service a lot. They answer questions quickly and accurately. And they have high status because they write graceful, easy-to-digest answers that don't make the person who was brave enough to ask the question feel stupid for having done so in public. These folks are volunteer evangelists for whatever product or site they recommend ... and they are easy to find, using the Answers API.

In Which the Site is Redesigned

I'm doing my best to bring all the old posts, content, and comments over, and have added something new. Here and there you'll spot a closed norgie next to a purplish headline, indicating that there's something behind the curtain that you might or might not want to see. In this case, it's the nerdish details of how the new site works. (Or, in the words of the folk singer: "I've suffered for my art; now it's your turn.")

Vertical Dividers with YUI Grids

Creating properly-sized vertical dividers between columns seems like it ought to be easy. It is, if you're using tables for layout: you bang out a couple of cells, put a border-right on the left one, and you're done. If, on the other hand, you choose to write standards-compliant HTML, you're heading down a harder road.

Creating Dynamic Stylesheets

Recently I found myself in the position of needing to code a series of syndicated Web badges. To guarantee that they ran as consistently as possible, I started looking for ways to create stylesheets with JavaScript, instead of having to do an additional HTTP request, and--assuming the stylesheet actually loaded--worry about the possibility that my selectors could be overridden by an additional set of rules loaded somewhere else on the page.

Put Your Digg in a Box

A second case-hardened JavaScript badge. This one takes a Digg category (or a group of them, or none at all) and builds a full-featured search badge. Cute stuff abounds: mouse over the story to see details, the user to see profile, and the vote count to see the category and optionally add it to your list.

Twitterati Badge

A case-hardened JavaScript badge. Grabs the Twitter feed for the ID of your choice; massages it into a neat little badge; allows continued interaction with your friends and their feeds.

Case-Hardened JavaScript

Everybody likes a nice little Web badge. Here's a set of methods that will allow you to build and serve darn-near-bullet-proof Web badges from your network to anywhere on the Web, so your clients won't have to do anything but include a single line of JavaScript.