Hyperlapse: Creating Assets

Have you seen Google Street View Hyperlapse? It’s the latest project from the minds at Teehan+Lax. To be more precise, it’s from the Teehan+Lax Labs, an offshoot within this top-tier creative/design agency where people explore new ways to use technology to communicate. https://player.vimeo.com/video/63653873 If you want to see how Hyperlapse works, the source code is available on GitHub. Teehan+Lax is a company that really likes to share. They share source code, tools,  ideas, design strategies, business philosophy. They follow this principle: ‘create more value than you capture.’  That’s a powerful idea championed by open source crusader and tech book publisher Tim O’Reilly. It’s an idea that you’ll find embodied on many of the best sites on the web.

When I was playing with Hyperspace yesterday, I was reminded of a 2010 post (that I happened to read only a few weeks ago) by Robert Niles, former editor of USC Annenberg’s Online Journalism Review. It’s an article about the need for journalists to think in terms of creating assets instead of stories. Here’s the crux of it:

To me, that’s the word ["assets"] that should replace “stories” in your vocabulary as a journalist. Too many of the journalists I’ve seen try to make the transition to running their own blogs and websites remain mired in the “story” mindset, endlessly creating newspaper-style “stories” or even brief-length snippets for their blogs. But they fail to create assets of enduring value that ultimately provide the income that they need to remain viable businesses online.
This is as true for online publishing as it is for any other online content. Assets that have enduring value keep people coming back. But I'd add that creating a good story, or narrative, to support your assets is just as important. Teehan+Lax is a great example of how this is done. Read their 'behind-the-scene' story about how they designed Medium to see what I mean.

I Won’t Miss Google Reader

I've used Google Reader for years, but I won't miss the service when it shuts down later this year. There are plenty of alternatives (and more on the way). A few of the more intriguing choices are Feedly, Feedbin, Fever, and NewsBlur.

Like many users, I never actually visit my Google Reader page. I rely on third-party services that suck in my Google Reader subscriptions. For the desktop, I use Feedly. For iOS, I use Reeder. Will it matter that I'm no longer using Google Reader on the back-end? Not really. I take solace knowing that I'll be using fewer Google services. My main concern is that this may be part of a broader trend with Google: trying to funnel us all into Google+ and clamping down on how (and if) third parties can use Google services. I wouldn't be all that surprised if Google were to lock down Gmail someday soon so that it could only be accessed via Google's mobile apps or their web-based service. It is an ad-based company, after all.

In any case, of the many alternative news aggregator services, my bet is that Feedly will rise to the top of the pack in terms of popularity. They're poised to seamlessly transition existing Google Readers (without any required user action). That's very handy, but it would only go so far if the service was so-so. On that front, I think the Feedly experience is one of the best out there. It looks great, it's easy to customize to fit different workflows and visual preferences, and they're aggressively honing the service to make it better.

As an example of this, I've just rediscovered Feedly's mobile apps. I've used Feedly on the desktop for quite a while and like how easy it is to view and manage feeds in various ways. While I tried the Feedly iOS apps early on in their history, I wasn't drawn in. Reeder was still a better experience on iOS. However, I tried the apps again last night. I'm glad I did. These apps have come a long way and I'm fairly convinced that they'll work for me quite well.

As an aside, I also enjoy news aggregation services like Zite and Prismatic, but I tend to put these sort of services in a different category as they focus on presenting stories based on reader interests. They are fantastic for discovery and casual browsing and are certainly worth a look. Lastly, you may note that I haven't mentioned Flipboard anywhere in this article. I must be one of the few people out there who just don't care for it. Nothing personal, Flipboard. I note it here, though, because it's an alternative highly-regarded reader that is also certainly worth a test drive.


I’m a hybrid content author and web designer with no formal training in computer science. Over the years, I've honed my HTML and CSS skills through trial and error, repetition, books, online courses, and by tapping the expertise of colleagues. 

But JavaScript? I'm not so good with that. Sure, I can deploy a jQuery plugin and fiddle with parameters. And I know a bit of PHP (enough to get me in trouble, as they say). In most cases, I can decipher code, copy what I need, and modify it to meet my needs … as long as I don’t have to change too much. But my depth of understanding is shallow, which is something I’ve long wanted to remedy. Now I feel like I'm really making some progress with Codecademy, a free online ‘academy’ aimed at teaching basic programming skills.

Codecademy gets it right. For starters, you aren’t required to sign up for an account prior to beginning lessons. Instead, you can dive right in by typing your name in the site’s integrated editor. Entering your name is your first lesson. Only later, after completing a few exercises, are you prompted to sign up for a free account (which you only need to do if you want to keep tabs on your progress). At this point, you’ll have a good idea if this is for you. While this is a relatively minor detail, it’s a thoughtful touch that underscores how this is a different kind of training tool.

Lessons are divided into topical sections that grow in complexity as you progress. At each step of the way, accompanying text explains what’s going on and why. Within a few days, you’re writing simple programs that tie together all that you’ve learned up to that point.

While there are badges for completing sections, progress meters, and a point scoring system to help keep motivation up, the real driver – and the heart of Codecademy – is the integrated editor that accompanies each lesson. Rather, the integrated editor really is the lesson. You read a short bit of natural language text explaining a concept or new syntax, and then you’re asked to write some code to demonstrate comprehension. Everything you learn, in other words, you learn by doing yourself. You can’t move on to the next lesson unless you get the code right. This real-time feedback works.

There’s a lot of course material available, which is growing exponentially thanks to the addition of crowdsourced exercises submitted by other developers. User forums are active, so you can get help when you get stuck or need something clarified. Right now, only JavaScript lessons are available, with Python and Ruby courses to come later. I reckon these lessons will keep me occupied and learning for a long time to come. The best part is that the people behind Codecademy say they’re committed to keeping this learning resource free.

More than other online courses, videos and books that I’ve tried over the years, Codecademy fosters a clearer understanding of what it is that I’m doing and why I'm doing it because it is, quite literally, engaging. It’s not that other courses I’ve taken are not good, it’s that the Codecademy model is particularly good.

Reminder: Delete Your Google History by March 1

Don't forget that Google's new privacy policy goes into effect on March 1. Policy changes will affect you if you use Google search while logged into a Google user account.

Here are the instructions from the Electronic Frontier Foundation on how to clear you browsing history. If you use multiple Google accounts, you'll want to delete browsing history for all of them. If you don't take these steps, all of your browsing history will be combined with and shared across all the other Google services you use. If you're not sure why this might be a concern, see this EFF post and this Slate article ... or search on it!

You might also consider trying out an alternative default search engine. Many people (me included) are now using DuckDuckGo. This search engine does not collect user data and emphasizes privacy. It's quite capable, although I do notice differences in terms of rankings and results compared to Google. That's not a bad thing, it's just different. 

If you're using Chrome, it's easy to change your default engine.  Look under 'Preferences' > 'Manage Search Engines.' It's relatively easy with Firefox, too. You'll find the option to manage search engines by choosing the dropdown arrow located in the browser's built-in search box. With Safari, it's a bit more complicated because the browser only offers Google, Bing, and Yahoo as default search engines. You can make DuckDuckGo your default, though, if you install the free Glims add-on. 

Captioning Web Video

I'm no video expert. Yet I often find myself encoding, editing, and otherwise manipulating video for the web. Recently, I completed a video project that involved converting a DVD of a 40-minute presentation into a movie that could be viewed on a web page, as a whole or in chapters. The final product had to be captioned.

Converting the DVD into video for the web was easy. I used Handbrake to rip the DVD into MP4 format. Editing was equally easy. I used iMovie to add title screens and transitions, and to break the movie up into chapters. Adding the captioning, however, was tricky.

Why bother with captioning? Here are some good reasons: so that those who are deaf or hard of hearing can enjoy the video, so the text is indexed by search engines, and to aid those for whom English is a second language. And here’s another: the Twenty-First Century Communications and Video Accessibility Act of 2010.

If captioning is important, then why isn't it a mainstream practice? I'm not qualified to answer that question, but my guess is that it's in part due to the fact that captioning is time-consuming and difficult. For instance: with external captioning (where captions are contained in an external file and sync with the video), there are multiple formats and a lack of clear standards. And for embedded captioning (where captions are simply typed in an editor and then exported with the movie), it's just plain tedious work.

For my recent video project, I considered three captioning options:

  1. Embed the captions. The first option is to place the captions directly into the movie itself using a tool such as Final Cut Pro,  iMovie, or  Adobe Premiere.  I have Final Cut Pro, but I tend to use iMovie since most of the video work I do is short and simple. It’s the easiest tool for the job and the results look good. Here’s the thing about iMovie: while there are dozens of title/text effect options, none are designed for captioning (which is surprising given Apple's robust accessability options for the OS). Despite this shortcoming, I’ve discovered that I can 'fake' captions by adding lower thirds to each segment of video. Making a default lower third overlay in iMovie into something that resembles a caption is a matter of changing font sizes. You can see an example of this in a recent video podcast I produced. This works, but it isn't a practical solution for a long movie. In truth, it's really not an ideal solution for any length movie because the captions are permanently embedded in the video. Screen readers and search engines can't see this text. People can’t choose to turn the captions on/off. So I didn't choose this option for my project.
  2. Dump the text on the page. A second option is to dump the captioning for a video on a page, underneath the video as HTML text. This may technically meets accessibility requirements, but it’s a lousy solution. The text is unassociated with the video. One can read the text or watch the video. It's not feasible to do both at the same time. Nix.
  3. Create an external caption file. This last choice is the best solution: create an external caption file that will appear in sync with the video. Captioning is then matched up with the video, it's readable by screen readers, and it's good for search engines. It can also be turned on or off at the user's discretion.

So how do you create and deploy and external caption file? If you simply wish to place a video on Youtube, it's easy. Once you upload your video to the free service, Youtube offers free auto-generated machine transcription. While you'll find that video speech-to-text accuracy is hit-and-miss (more miss in my experience), the important part is that Google generates  time codes that precisely match the the audio in the video. So once you download the caption file from Youtube, it's a simply a matter of manually correcting the text so that what appears in the caption will match what is actually being said in the video.

If you don't want to (or can't because of workplace policy) solely use Youtube to present your video, it's still a very useful tool. How? If you are embedding captions in a video using an editor such as iMovie, YouTube will do half of the work for you by delivering a fair approximation of a transcript. If you want to use an external caption file elsewhere with a different video player, you can still use this Google-generated file. You just need to convert it into the right format.

Here’s the process I used to generate a caption file for my video project:

  • I began by uploading the video to my YouTube channel.
  • I then requested that YouTube auto-generate a Subviewer caption file for this movie (Be patient. It may take hours to get this file back from Google because you'll be in a queue with tons of other people).
  • I then downloaded this file and opened it up in text editor. 
  • The next step is tedious, but necessary: cleaning up the machine-generated text. I opened my movie in a QuickTime player window and, as it played, edited my caption text to correct errors and typos. It's not too bad if you toogle between a text editor and QuickTime using Cmd-Tab.
  • Once I had my cleaned-up Subviewer text file, I copied and pasted it it into a free online converter to generate into the appropriate format. In my case, I generated a DFXP file for use with a Flash player. Here are three conversion tool options:
    • 3PlayMedia Caption Format Converter. This converter lets you convert from SRT or from SBV to  DFXP, SMI or SAMI (Windows Media), CPT.XML (Flash Captionate XML), QT (Quicktime), and STL (Spruce Subtitle File).
    • Subtitle Horse. A free online caption editor. Exports DFXP, SRT, and Adobe Encore files.
    • Subviewer to DFXP. This free online tool from Ohio State University converts a YouTube .SBV file into DFXP, Subrip, or QT (QuickTime caption) files. I used this tool for my project.

What’s the appropriate format?

  • YouTube: Subviewer (.SBV) 
  • iTunes, iOS: Scenarist Closed Caption (.SCC) 
  • Flash: DFXP, Timed Text Markup Language, the W3C recommendation. These are plain ol’ XML files.  You could also use the SubRip (.SRT) file format for Flash.
  • HTML5:  See this post.

If you're not using a hosted service like YouTube or Vimeo (which, incidentally, does not support external captions), you'll of course have to decide how to present the video on your site. There are many options. You can roll your own player with external captions using Adobe Flash. You can use off-the-shelf players that support captioning such as Flowplayer and JW Player — these two commercial products offer very easy setup and they offer HTML5 video players with Flash fallback. Another option: you might try HTML5 with experimental captioning support (note that Safari 5 now supports captioning with the HTML5 video tag). As I said, there are options. The video player discussion is beyond the scope of this post (and I don’t want to go down the HTML5 vs. Flash rabbit hole!).

My main goal here is to point out that Google's machine transcription is good for more than just hosting a captioned video on Youtube. It's trivial to convert this caption file into a variety of formats. The key point is that you don't have to manually add time codes for your video. This critical step is done for you.

Yet even with this handy Google tool, generating caption files (and getting them to work with video players) remains an unwieldy task. We clearly need better tools and standards to help bring video captioning into the mainstream.

P.S. While researching this post, I came across two low-cost tools that look like solid options to create iOS and iTunes movies with captions. Both are from a company called bitfield. The first is called Submerge. This tool makes it very easy to embed (hard-code) subtitles in a movie and will import all the popular external captioning formats. The second is called iSubtitle. This tool will ‘soft-code’ subtitle tracks so you can add multiple files (languages) and easily add metadata to your movie.


Huffduffer. It's a creation of web developer Jeremy Keith, who says he originally invented this tool for himself to fill a simple need.

Like many online tools with staying power, 'filling a simple need' is often the first litmus test for success. The second is filling a simple need well. And this site does the job very well. Huffduffer is an easy-to-use, elegant, friendly way to create your own personal podcast stream from found audio on the web. The part that makes Huffduffer so useful is RSS feed creation. It's easy to bookmark audio, but not so easy to create an iTunes-compatible RSS feed. I think of it this way: Huffduffer is to audio what Instapaper is to text.

I must admit, though, that I have only just started using this tool as intended. So far, I've primarily been using it as a discovery tool to find audio content I otherwise would not have known existed by subscribing to Huffduffer's 'Popular' feed. As you may surmise, this feed delivers a steady stream of what other people are 'Huffduffing.' The downside to this stream is that there are often many duplicate posts, so you'll find yourself often deleting entries that you've seen before. The upside is that the content is usually interesting and there's plenty of new content every day. For my long daily train commute, this feed is most welcome.

You'll find that much of the 'popular content' tends to be in the vein of tech, design, web design/development, science fiction, speculative science, and hard science. This surely says a lot about the core users of the site. And this makes sense given who created it: I surmise that site usage has spread mainly by word-of-mouth and via conferences. I, for instance, discovered it a web design conference where Jeremy Keith was speaking. So if you are particularly interested in this type of content, you'll get a lot out of this feed. As a secondary benefit, the popular feed has helped me find many a new podcast to subscribe to via iTunes. Now I need to start huffduffing some of my own 'found audio.' 

Here are a few recent items from the 'popular' feed that I really enjoyed:

Conversation with William Gibson — A discussion with William Gibson about where we are headed in the post-internet age.

Arthur C. Clarke, Alvin Toffler, Margaret Mead —  A talk recorded in 1970 about the future. From the show notes on Huffduffer: "At the time of this recording Arthur C. Clarke had recently collaborated on the movie 2001: A Space Odyssey with Stanley Kubrick. Alvin Toffler’s mega-influential book, Future Shock, is about to be published. And Margaret Mead is the world’s foremost cultural anthropologist."

Kevin Kelly interview — An interview with Kelly about his new book, "What Technology Wants." Fascinating stuff.

The Value of Ruins — James Bridle from dConstruct 2010 (a design & creativity conference) asks "as we design our future, should we be concerned with the value of our ruins?" 

If you'd like some more background, check out this interview with Jeremy Keith on Huffduffer. And if you're curious about the meaning behind the word 'Huffduffer,' here's an explanation.

Useful Little Tools

Over the past few months, a slew of interesting little tools made the rounds in various tech blogs. I thought I’d compile some of the more interesting ones here (and add a few of my personal favorites):


This free tool auto-adjusts the color temperature of your display(s) to match the time of day and your lighting source. The night mode is much easier on the eyes. Very pleasant. It can be temporarily disabled for those times when you’re engaged in a design project and need full color.

Alternative: Nocturne (from the developer of QuickSilver) offers ‘night vision mode for your Mac.’ It’s not nearly as subtle and elegant as f.lux, but you can adjust the settings to your liking. It’s especially great if you like it really dark when you’re computing at night…or if you like funky, inverted color schemes.


The answer to Windows 7 ‘Snap’ feature, this $7 tool allows you to instantly resize any open window by dragging it to an edge of your screen. It’s particularly great for managing multiple Finder windows on a small laptop screen. I use PathFinder (which offers dual pane and tabbed browsing to the Finder) and don’t really feel that I have a need for this, but it’s a great tool nonetheless.


This is the only way to read articles on the Web. It removes all the extra formatting, ads, buttons, colors, and other clutter that surrounds a typical Web-based article, leaving only the text you want to read.

I use Readability for articles I want to read now, and Instapaper for articles I want to read later on my iPhone (using the Instapaper Pro iPhone app).


If you’re like me and have many installed browsers, this $12 tool is a necessity. It allows you to choose which browser to use when opening an external link or when opening up an HTML file. You can also add other apps to the list. I have Choosy set to prompt me with a pop-up list of all browsers (prioritized with my favorites appearing first in the list), regardless of whether or not the browsers are running. I’ve also added MacRabbit’s Espresso as a ‘browser’ to send HTML files direct to this web development tool.

Alternative: I haven’t tried this one, but you may also want to check out Highbrow.


A unique tool that’s still in Beta (so it’s free to try), Ommwriter delivers a full-screen, clutter-free writing environment. This app focuses on setting the mood to foster a creative spirit, offering several nice fonts, a choice of ethereal background sounds, and a variety of subtle keyboard clicking noises that I find annoying (the sounds can be turned off).

I still prefer the retro simplicity of WriteRoom from Hog Bay Software when I need to focus on writing. I use it in combination with Hog Bay’s QuickCursor, a wonderful little tool that allows me to edit text from other applications with WriteRoom.


Rapportive replaces the ads you normally see in the right-hand sidebar of Gmail with useful information: a profile of the person you’re emailing. It only works in Firefox and Chrome right now, but I use it via Mailplane (available in the latest preview).

As an aside, if you use Mailplane, you may like the beautifully minimalist Helvetimail style sheet.


This tool places an Apple menu bar on your second monitor. I use it. It works well enough, providing basic menu bar functionality on the extra monitor. It’s quite nice to have the bar on both screens, although it doesn’t work with all apps (that’s because it’s still in early Beta). It’s currently free.


Quix is an extensible bookmarklet, billed as ‘command line for your browser.’ While it takes some time to learn the commands to use with this tool, it’s worth the effort. I love it.


This tool is certainly not new, but it stands apart as the easiest way to capture and mark up screen shots. I use it all the time and will gladly purchase it if and when it ever comes out of Beta.


I use Google Reader to manage my feeds, but don’t really like to read feeds with it. Instead, I use Feedly. The more I use this free online service, the more I like it. On my iPhone, I use Byline. Since both tools use the same Google Reader account, my feeds are always synced no matter where I choose to peruse them.

Notational Velocity

In case you haven’t heard, the venerable Notational Velocity is back. This free tool is a simple, minimalist note taking app that is lightning fast. It syncs with Simplenote on the iPhone. It’s still in Beta, but it’s performed flawlessly for me so far.

Before I started using NV again (I had used it many years ago), I was using another great tool called Justnotes (which is currently free and also syncs with Simplenote). It feels a bit heavier and is a touch slower than NV, but it’s still in early Beta. It’s certainly worth checking out. Which one you prefer may come down to your personal design tastes. There is one important difference, though, that may help you make a choice: Justnotes installs in the menu bar, while NV resides in the Dock.

The DNS choice

Last week, the tech world was abuzz with the launch of Google's new public Domain Name System (DNS) resolution service.

Since I posted a while back about OpenDNS, I thought I'd share my thoughts on this subject. The main question I set out to answer is whether or not I should switch from OpenDNS to Google's Public DNS?

As I began this experiment, my most important criteria was speed. Which service offers the fastest browsing experience? To answer that, I searched around and discovered this helpful post on TechSutraGoogle DNS vs OpenDNS: Google Rocks for International Users.

One of the readers over at TechSutra (Stevan Bajić) wrote the following bash script to test out the speed of four popular alternative DNS services. To use this script, run this in terminal (you can enter any domains you want here):

isp=$(dig +noall +stats 2>&1 | awk '$2~/^SERVER:$/{split($3,dnsip,"#");print dnsip[1]}');
s=" ";
header=("Domain${s:0:23}" "Your ISP${s:0:10}" "Google${s:0:10}" "${s:0:10}" "OpenDNS${s:0:10}" "DNS Adv.${s:0:10}");
echo "${h}";
echo "| ${header[0]:0:23} | ${header[1]:0:10} | ${header[2]:0:10} | ${header[3]:0:10} | ${header[4]:0:10} | ${header[5]:0:10} |";
echo "${h}";
for i in "lifehacker.com" "facebook.com" "viewfromthedock.com" "reddit.com" "tb4.fr" "bbc.co.uk";
echo -ne "| ${ii:0:23} |";
for j in "${isp}" "" "" "" "";
r="${s:10}$(dig +noall +stats +time=9 @${j} ${i} 2>&1 | awk '$2~/^Query$/{print $4" "$5}')";
echo -ne " ${r:${#r}-10} |";
echo -ne "n${h}n";

I ran tests at different times of the day, and on different days. For me, OpenDNS and Google were consistently fast. Results for Level3, DNS Advantage, and my ISP varied widely (sometimes I'd get decent results, sometimes response times were abysmal).

While the results I received from Google and OpenDNS were best, the difference in speed between the two was negligible. We're talking milliseconds here, after all. I don't think I'm really going to notice the difference between a response time of, say, 11 ms and 13ms (although research indicates that milliseconds do makes a difference).


One think to keep in mind is that the initial test you perform may return slower results than subsequent tests for some obscure sites. The first time you search for www.threetastes.com, for example, (my wife's blog) the DNS service will likely have to go out and get this IP address from an authoritative server. After that first lookup, the IP will be cached with the DNS server, so the response time will be quicker for subsequent tests. In short, run multiple tests.

My results jibe with those coming in from readers at TechSutra: that OpenDNS may have a slight edge for many U.S. locations, while Google DNS may have the edge for users outside of the U.S. Best to test it out the alternatives for yourself.

So, I've established that Google DNS and OpenDNS offer comparably faster DNS lookups compared to my ISP. Both services also offer security features to make browsing safer (my ISP may have these features, but I have no way of knowing what's going as these details aren't published. I have greater confidence that Google and OpenDNS DNS servers are not and will not be compromised).

Now, which to choose?

1. Do I want to use yet another Google service?

I'm not too worried about this. Google privacy policy is very clear. I've experienced no cause for concern with my Google services.

2. Do I have a problem with the way OpenDNS operates?

When I began this comparison, the answer was 'not really.' After pondering this for a while, I have to say I do have a problem. With OpenDNS, if you type in a domain that does not exist, you are redirected to an OpenDNS ad-based search page. This is bad behavior. I knew this already, but I didn't worry about. I turned off NX Domain redirection in my OpenDNS user settings. Here's the part that annoys me: OpenDNS describes this feature as 'typo correction,' but say nothing about how this is tied to redirection to their own ad page if the domain can't be resolved. They should take a cue from Google and explain this more clearly. Sure, this service corrects typos (changes .cmo to .com, for example), but this is only a minor feature of a service that's really about generating revenue from the mistakes people make in entering URLs. In addition, when you perform a Google Search using OpenDNS, your request is redirected to an OpenDNS server before going to Google by default. This may also be turned off (by unchecking 'Enable OpenDNS Proxy') but it's not really clear how to do it. And let's face it, most users aren't going to mess with OpenDNS advanced settings. Lastly, you must have BOTH 'Enable OpenDNS Proxy' and 'Typo Correction' turned on to enjoy the benefits of OpenDNS' content filtering features (one of the big reasons people like OpenDNS).

Here's the bottom line: OpenDNS offers a fast DNS service that includes many extra free or pay features. It's a good option if you need those extra features and aren't worried about the way the service handles your requests. The main gripe I have with OpenDNS is that they are not transparent about how they're doing business. Google, on the other hand, offers a fast DNS service and reliable security features. It's a good option if you don't need extra bells and whistles.

Think I'll switch over to Google DNS.