Trickr, or Humanising the Developers (Part 1)

We busy little nerds of Flickr may act and smell like a bunch of psychotic monkey-bots, but beneath our filth-drenched metal exteriors beat the fleshy hearts of a thousand delicate human flowers. We feel, we love.

Ever wondered what keeps us well-oiled? I did, so I asked people, “What do you use to get the job done?”

And this, my dubious friends, is how we (rick)roll.

[flickr_staff_buddy_icon name=straup]
Aaron, Ce sera mauvais français parce que j’ai utilisé l’Internet
You’re still wrong

  • Emacs (dired-mode and shell-mode and M-x goto-line)
  • Glimpse (and alias grep grep -n -r -e)
  • Tabs and virtual workspaces

[flickr_staff_buddy_icon name=bees]
Cal, Baconmeister
Fuck off and die

  • shitty pc laptop w/ xp pro
  • twin 20″ monitors
  • noted
  • explorer
  • ff & thunderbird
  • putty / pageant / plink
  • winscp
  • cygwin
  • msys & mingw
  • wireshark
  • paint shop pro 5
  • miranda
  • calc & chamap
  • tortoise cvs/svn
  • beyond compare
  • apache/mysql/php
  • ms office w/ visio
  • itunes

[flickr_staff_buddy_icon name=revdancatt]
Dan, The Rev.
I don’t do quotes

2 Machine setup;

MacBook Pro for writing code, TextWrangler (off-white Lucida Grande 11pt font on blue background, for reduced eye-strain), Safari & Opera for (final) testing.

PC for testing, with IE6,7,blah + MS Script debugger. Most testing takes place in Firefox + Firebug (cannot live without firebug). Monitor rotated 90 degrees to give Firebug more real estate for hacking around the dom, editing js script on the fly, etc.

Extras:

[flickr_staff_buddy_icon name=dunstan]
Dunstan, He’s like, got a dog and stuff
Mistakenly included on the engineering mailing list for 505 days and counting

  • Macbook Pro
  • Textmate
  • Photoshop
  • Transmit
  • Safari
  • Firefox+Firebug
  • IE (in Parallels)
  • Quicksilver

[flickr_staff_buddy_icon name=eric]
Eric, Teenage Mutant Ninja Scripta
Please, just work

Powerbook, BBEdit, Perl scripts to manage scp+cvs+Flex+compression, Firefox w/ Firebug and Webdev toolbar, Flex 3 SDK, Terminal, nano, Parallels.

[flickr_staff_buddy_icon name=kellan]
Kellan, Rebellious off-worlder
I’d rather be building cloud castles

MBP, a hot-rodded version of Textmate, QuickSilver+Terminal.app (what’s the Finder?), Thunderbird + keyconfig for threading and archiving, SSHKeychain, grep, awk, tree, QuickProxy for Firefox (2.x), WordPress.com, last.fm, Pandora, and Adium. used to use PHPfi, but less lately.

[flickr_staff_buddy_icon name=murphy_slaw]
Murphy, Secret ops mole
… –force –yes –quiet > /dev/null 2>&1

  • MacBook Pro
  • iTerm
  • vim, kill, screen, awk, rsync, mtr, nmap, strace, gdb
  • Wireshark
  • SSH Agent
  • Thunderbird + Enigmail
  • Firefox + Firebug + SwitchProxy + Nagios Checker
  • Adium
  • Caffeine
  • Home Zone

Coming soon: more responses!

Flickr at XTech (and slides from SXSW…)

Once upon a time, webheads used to talk about “conference season”, but it seems that these days there’s always a conference running somewhere. Having dispensed with Web 2.0, we’re now turning our attention to XTech 2008, which takes place in Dublin, Ireland from Tuesday May 6th to Friday May 9th.

The Flickr team has two talks lined up for those attending XTech. Through a freak scheduling accident they’re back-to-back, giving attendees the exciting opportunity to experience one and a half straight hours of pure Flickr-related goodness:

Hopefully we’ll see some of you there!

Looking backwards for a moment, this is also a chance to re-post the slides from my previous internationalization-themed talk, “Taking Over the World, The Flickr Way” which I gave at South by Southwest in March. This hour-long session was a high-level overview of some of the challenges and solutions we stumbled upon during the internationalization and localization of Flickr.com which we undertook in the first half of 2007:

Versions of the slides in other formats (keynote, swf, pdf) are available here.

As for Web 2.0 Expo, some of the team’s presentations should be showing up here in the next week or so, starting with slides from the delectable John Allspaw.

Videos in the Flickr API

It isn’t just you, the pictures really did start moving, some of them at least. Which is an attempt at humor to cover the fact that this post is very belated.

Presumably you’ve noticed that folks are uploading videos to Flickr, and you’re wondering how to work with video in the API? I’ll try to recap, and expand upon the info in this thread in the API group.

Long Photos

First thing to understand is as far as Flickr is concerned videos are just a funny type of photo. Your API application can ignore that video exists and everything should go on working. This means:

  • you can display a preview of a video by treating it exactly like any other photo on Flickr.
  • photos AND videos are returned by any method which used to return just photos
  • you can get info about a video like you would a photo.

Videos, photos, and “media”

If you’re calling one of the dozens of API methods including flickr.photos.search() and … that return what we call a “standard photo response” then that API method takes an “extras” argument. extras is a comma separated list of additional metadata you would like included in the API response.

With the launch of video we’ve added a new extra: “media”. Included media in your list of requested extras and we’ll include a new attribute media=photo or media=video with each photo element. Like so:

<photo id="2345938910" owner="35468159852@N01" secret="846d9c1be9" server="1423" farm="2" title="Naughty Dandelion" ispublic="1" isfriend="0" isfamily="0" media="video"/>

Additionally if you’re calling flickr.photos.search() you can filter your results by media type by passing `media=photos` or `media=videos` as an additional search argument. (not to be confused with the extras of the same name)

Default is “media=both” returning both photos and videos.

Displaying videos: just funny photos

For each uploaded video we generate a JPG preview in a range of sizes. Identical to what we do for photos.

Read the documentation for flickr.photos.getSizes() to get you started on how to display Flickr photos.

Playing videos: constructing the embed code

We don’t currently provide a way to get to the FLV for a video. (the Flash encoded video file) We’re looking into making this possible. In the mean time if you want to display watch-able videos you’ll need to embed our video player.

In addition to the photo height and width of the preview images, videos also have a stream height and stream width which we set when we process videos during upload. While you can make the video player any size you want the videos are going to look much better if displayed at the proper size.

You can get the stream height and stream width and the URL for the video player using the standard flickr.photos.getSizes() method:

<sizes canblog="1" canprint="1" candownload="1">
<size label="Square" width="75" height="75" source="http://farm2.static.flickr.com/1423/2345938910_846d9c1be9_s.jpg" url="http://www.flickr.com/photos/revdancatt/2345938910/sizes/sq/" media="photo"/>
... standard getSizes stuff ...
<size label="Video Player" width="500" height="375" source="http://www.flickr.com/apps/video/stewart.swf?v=49235&photo_id=2345938910&photo_secret=846d9c1be9" url="http://www.flickr.com/photos/revdancatt/2345938910/" media="video"/>
</sizes>

Alternately the stream width and height are included in the new video element returned by flickr.photos.getInfo()
:

...
<video ready="1" failed="0" pending="0" duration="14" width="500" height="375" />
</photo>
....

Generating Embed Code

The player takes a height, a width, a photo id, a photo secret (required for playing non-public videos), and the argument flickr_show_info_box, which when set to layers over top of the video videographer, and video title info when the video isn’t playing.

I’m not going to go over in depth the markup for the player, but here is a quick and dirty PHP function for generating it:

#
# takes a "Video Player" source from flickr.photos.getSizes() and optional display arguments
#

function flickr_video_embed($video_url, $width="400", $height="300", $info_box="true") {

    $markup = <<<EOD
<object type="application/x-shockwave-flash" width="$width" height="$height" data="$video_url"  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="flashvars" value="flickr_show_info_box=$info_box"></param> <param name="movie" value="$video_url"></param><param name="bgcolor" value="#000000"></param><param name="allowFullScreen" value="true"></param><embed type="application/x-shockwave-flash" src="$video_url" bgcolor="#000000" allowfullscreen="true" flashvars="flickr_show_info_box=$info_box" height="$height" width="$width"></embed></object>
EOD;
    return $markup;

}

Videos in the feeds

Videos, unsurprisingly, are included in all of the various RSS and Atom feeds which contain photos. For each video entry we include a MediaRSS content element that points to the SWF player, and has a content type of “application/x-shockwave-flash”. Additional we include the stream height and width as the height and width elements in the content element.

In RSS 2.0 feed we also include an enclosure element.

Uploading Videos

Upload videos just like you would a photo. We’ll do the magic to figure out whether the uploaded file is a video or a photo. You’ll generally want to use the asynchronous upload methods as videos tend to be larger, and take more time to upload.

Videos need to be “transcoded” — turned into an FLV which is playable on the Web. As this takes time videos aren’t always immediately available for viewing. You can check the processing status of a video using flickr.photos.getInfo(), and examining the video element.

<video ready="1" failed="0" pending="0" duration="14" width="0" height="0"/>

ready is watchable, pending is still being transcoded, and failed videos need to be re-uploaded. (possibly in a different format)

More Questions?

We’ve got an open thread in the Flickr API group discussing video.