blog

In an always-on, broadband-prevalent digital world shaped by the likes of YouTube, video on the web is commonplace. We interact with video in its various online varieties everyday. However, before the end-user can experience the video it must be sent to them in one of many digital formats using a specific delivery methods. How this happens is currently evolving in order to provide the best quality video to the most people with the least effort.

Whether the delivery method is live streaming, on-demand streaming, or canned progressive download, there has traditionally been a wide array of formats in which the video can be encoded, each with a different browser/OS/platform for which they were designed. For example, Windows Media Player works best in, you guessed it, Windows.

Flash Video Content

For a long time, web types had been looking for that single format that will readily play a quality video to all web users independent of browser or platform. Enter Macromedia (now Adobe) Flash and the Flash Video Format (FLV). The Flash plugin, love it or hate it, is running on 99% of internet browsing desktop computers. This incredible penetration effectively solves the accessibility problem as sites such as YouTube can serve up video in FLV format and be confident that nearly all internet users can easily view it. Today, Flash remains the best solution due to its high level of compatibility as well as its ability to handle high quality videos.

HTML5 Video

The HTML5 Specification, which defines the future of in-browser web technologies, introduces a native video tag that will allow for easy delivery of video content. Moving forward this is the way to go as it works towards every goal of web video usability. The quality of video with HTML5 video is unmatched as it uses newest video formats and the latest in compression technology. Implementation calls for the least effort — it is as simple as dropping in a simple HTML tag. No more building a player and figuring out how to embed it into a page. This aides web developers certainly, but also the web content editor as a Content Management System will be more capable of handling video. Finally, because it is a web standard rather than relying on a plugin, it will have support across platforms and devices. This means videos will be served on mobile devices such as cell phones and tablets that do not support certain plugins (read: iPhone and iPad).

The Future of Video

The future of video will use the HTML5 video spec exclusively, but it won’t happen overnight. The solution will be excellent for content providers, web developers and web consumers alike, but the journey there will not be easy. Many things must happen first.

1. Browsers need to evolve: the support for HTML5 is growing, the latest versions of  Opera, Safari, Chrome, and Firefox all support some form or another of the <video> tag. The nightly builds of IE9 also provide support for HTML5 video. But, the compatibility needs to continue to increase.

2. Old browsers must be phased out. It doesn’t matter how advanced new browsers become if they don’t get widespread adoption. Flash has been such a boon to internet video because of its 99% market penetration. If people still use old browsers the compatibility issues will continue.

3. A single video format must prevail. We are almost seeing a small step backward in terms of video encoding. Presently, there are three common HTML5 video formats (OGG, MP4, and WebM), one of these must prevail (or at least gain support from all major browsers) if HTML5 video is to succeed.

Either way, it is exciting to think of a web where video is as simple to implement as a static image.

Examples and Resources

Several major players are already experimenting with HTML5 video. We’ve been playing around with HTML5 video a little bit ourselves, but presently there are many hoops to jump through to keep the video playing correctly in all browsers with HTML5. Here are some links to examples and resources if you’re interested.

• HTML5 Working Draft
• Wikipedia HTML5 Video
• YouTube and HTML5
• CBS Publicly Testing iPad-Ready Video
• Video for Everybody

One of the coolest things Apple did with Safari on the iPhone (and now iPad) is implement JavaScript APIs that allow ordinary websites to interact with some of the device’s unique features.

My favorite example of this is the multi-touch events that can be attached to standard HTML elements. With just a bit of extra coding, your website can recognize touches and gestures on the iPhone and iPad. For more information see the Safari Web Content Guide provided by Apple, this reference provides a good overview of how this all works.

I finally got a few minutes to play around with this stuff today, so why not see if I can take a common carousel and have it navigate to the next or previous slide on swipe.

I grabbed a client at random that has a carousel on their homepage and went to work on their free upgrade. I learned a couple of things along the way (for example, using the jQuery bind function to attach these special JavaScript events cause event.touches to be undefined), but all in all I was able to crack out the basic swipe gestures without too much trouble. Check out my source code to see how I am defining my swipe gesture.

If you have an iPad or iPhone handy, have a look at Charley’s Grilled Subs (http://charleys.com) and navigate the main banner carousel using a swipe. Swipe left to go to the next slide or swipe right to return to the previous one. It works on the Charley’s menu too.

Pretty cool, huh?

I’ll be the first to admit that I am not the best programmer in the world. Half the people that work for me are every bit as capable at coding to a comparable or better level of quality. The one leg up that I have on the crowd is that I am fast, very fast. I can roll out high-quality, highly-functional applications at very high pace. Here are some general tips/tricks that help me code faster.

1. Experience
It’s obvious, but it’s true. Being an effective, fast programmer takes experience. This is one that you can’t fix quickly, but you can fix it. The more practice you have the more programming operations become routine. The less you have to think through every step of the logic, the faster you’ll be able to lay down code that works. To get faster simply practice coding on common problems.

2. Focus
Rid yourself of all distractions. Ignore the co-worker across the room, logout of Facebook and Twitter, put on your headphones with the volume loud enough to block out ambient noise, put your head down and code. Development means you actually have to think, the slightest loss of focus can jumble your thoughts and greatly slow you down.

3. Organize yourself
Spend 5 to 10 minutes upfront (and/or periodically throughout) and understand exactly which tasks you need to complete and in what order you are going to complete them. Create a mini to do list in your head (even jot it down if you think it’ll help). Having your tasks well-defined make them quicker/easier to knock off.

4. ATTACK!
Get fired up and go. Don’t fret of trying to prevent errors, just GO! What I like to call “work faster music” can help too. Faster paced music helps pump you and and get your brain and fingers moving quicker. For me it’s upbeat hip-hop (such as OutKast) or the infectious dance-pop of Lady Gaga. Sounds crazy, but I think it helps.

5. Test early, test often
Don’t expect yourself to write perfect error-free code, don’t even try (see #4 above). Instead, get the code down and as soon as you have written one functional unit, test it. You can then fix bugs while you are focused on that piece. If you wait too long to test you have to jump in and out of different pieces of code when fixing bugs. Plus, your fix for one bug may alter how you execute the next coding task and prevent bugs down the line.

Two years ago, Matt wrote a blog post (before we even had a blog) about our affinity for the Thurman Cafe and its fares. Indeed, it continues to be a “rite of initiation” for all dynamIt team members.

Specifically, to avoid endless ridicule, each dynamIt employee must tackle and conquer the Thurman Burger (fully dressed, in one sitting, without putting it down).

The tradition continued last week when we officially welcomed Bill Condo and Andy Hutter to the dynamIt team.

Luckily, they both passed the test. However, as his enthusiasm waned, Andy learned the valuable lesson that nothing comes easy.

BEFORE

AFTER

A common situation: you are about to checkout at an online store, but before you can buy that new T-shirt you must first choose which color you want and select what size you wear.

You’ve likely never stopped to think about the data behind this simple interaction, but what really needs to happen is that based on these choices the application is actually selecting the specific inventory item you wish to purchase.

Let’s consider this same problem from the other side of the counter. Now, you are creating an online store and you have several lists of options that you must combine to form your inventory. How do you create every possible combination without missing any and without repeating? And, more importantly, how do you accomplish this programmatically so that store owner does not have to create each combo by hand (a task that quickly becomes overwhelming)?

In my elementary example you have a list of sizes {S, M, L, XL} and a list of colors {orange, red, blue, green}. Here it is quite simple: look at each color and make sure you have one item of each size for that color.


for( $i = 0; $i < count($colors); $i++ )
    for( $j = 0; $j < count($sizes); $j++)
        array_push( $combos, array( $colors[$i], $sizes[$j] ) );


But what if we have an unknown number of variables (maybe there is a third, or maybe there is a total of eight)? Our simple nested loop will no longer works when we don’t know how deep to go.

<mathspeak>

It helps to define this problem correctly, which is where the math comes in. Here, we have a finite number of finite sets and we wish to find all of the distinct ordered n-tuples who elements are the members of these sets. In other words, we want to find the Cartesian Product of the sets of our product options.

Symbolically…

if X₁, X₂, …, X_n are our sets of product options,

then, we want to calculate X₁ × X₂ × … × X_n = { (x₁, x₂, …, x_n) | x_i ∈ X_i }

This may look somewhat familiar from back in your days of graphing equations. The most common example of a Cartesian Product is what is called a Cartesian plane, or the x- and y- axes made up order pairs of numbers. Consider my original example, imagine labeling the x-axis with sizes and the y-axis with colors, the points then are your combinations. Same idea, just in more general terms.

</mathspeak>

Once we have the problem defined, we can tackle it programatically. My first reaction was to think recursion, but this problem can actually be solved quite elegantly in O(n²) time.

Click here to see my solution.

It happened again.

Facebook, with their technical brilliance (or general creepiness, I’m not sure which), has managed to freak me out just a little bit.

Twice now, Facebook has popped up someone under “People You May Know” that (1) I do in fact know, but (2) Facebook should not know that I know.

Here’s one such situation:

Three years ago we worked with a global ad agency in London to launch a campaign site for the British Broadcasting Corporation called It’s Not Funny (a YouTube-esque video contest targeting British university students).

There were many parties involved: the BBC, the BBC’s agency (Proximity), their agency’s streaming media partner (Streaming Tank), and the streaming media partner’s web application development partner…that’d be us.

While working on this project we reported directly to the project manager at Streaming Tank, however, during the user acceptance testing stage of the project we also worked with Proximity to perfect the site. Exposure to Proximity was primarily via the project manager on their end, though we occasionally received correspondence from the account leader.

So, Facebook shows me the profile of the account leader at Proximity as a person I may know. Yes, I suppose I know this person, but let’s run down the connection we had:

• We had zero direct contact, neither phone nor e-mail. We had been copied on the same e-mail chain maybe a handful of times, but even these were before I started using Gmail.
• We have zero mutual friends of Facebook. Plus, neither me nor any of my friends are connected via Facebook to anyone involved with this project.
• We live halfway around the world from each other (London, UK versus Ohio)
• We may have been shared on the same Google Doc at one point, but it is no longer in my Google Docs.
• Any connections we did have (e-mail chains, Google docs) ended over three years ago.

So, what gives? Is Facebook just that good? Have they been stalking me and mining my data for last three years? Is it just coincidence?

The mathematician in me knows better than to think it’s coincidence. That leaves the possibility that Facebook has some secret algorithm for delving into my life and history to find possible friends. But how does it work?

Any ideas? Has anyone had similar experiences?