My jQuery Conference Presentation

As I’ve been talking about on Twitter since I first heard, my topic for the jQuery Conference Boston 2010 was accepted and I’ll be presenting at the event.  I want to give people some advance idea of the topics I’m going to cover so they can make an informed decision as to whether they want to attend my session or the session featuring Menno Van Slooten on increasing velocity.

What follows is the official abstract from the jQuery Conference literature for my talk, jQueryUI and HTML5 Video Play Nice:

With mobile device usage skyrocketing and Flash Player 10.1 failing to provide a “silver bullet” for developers, even on the range of devices that do support it, working effectively with HTML5 video is becoming more critical every day. In this session, we will walk through the basics of creating a jQueryUI-based interface for an HTML5 video player complete with ThemeRoller support.  With support for HTML5 video on mobile  devices incomplete in many cases, we’ll also talk about the nuances of HTML5 video element support on mobile devices including how to properly prepare your content for mobile delivery and common “gotchas” when deploying to these devices.

jQuery topics covered include jQueryUI widget creation, ThemeRoller integration, and how to leverage core jQuery functionality to build HTML5-based video players on mobile devices. Sample code will be provided to all event attendees for a sample jQueryUI HTML5 video player via GitHub.

So how does that abstract translate into what we’re actually going to cover?  I’m glad you asked!  For the first 15-20 minutes, I’m going to talk about various aspects of HTML5 video including what it is and the current state of mobile device support.  I’ll talk about some of the major roadblocks that can make development of players more difficult, and various ways to work around these problems.

From there, I’ve built a very simple jQueryUI based video player. I’ve done my best to build it using as many of the “out of box” jQueryUI components as possible including:

  • Slider
  • Button
  • Position
  • Dialog

All of these controls will be wrapped in a jQueryUI widget that acts primarily as a controller for interaction between the various components.  We’re going to walk through the code of how I set up the widget, how to enable ThemeRoller support on our own elements so they match the built-in jQueryUI widgets, and how to build the event-driven interaction between the various widgets and the video element.  All the while, I’ll be pointing out areas where we need to be concerned about support on mobile devices.

There will be some live-coding, but I’ve done a lot of work to break up various sections ahead of time so we don’t get bogged down in me making simple mistakes while trying to get through the material quickly.  I don’t consider this to be an “advanced” session by any means; with only 45 minutes, this talk will serve primarily as an introduction to jQueryUI, the video element, and the various implementations across mobile devices.  If you’re working in an environment where you may be tasked for creating a cross-platform video application, you’ll likely find the discussion of the various implementation bugs invaluable.

So whether you choose to attend my session on jQueryUI video or Menno’s presentation on Saturday afternoon, there’s going to be a ton of value during that 45-minutes for everyone.

Looking forward to seeing you and meeting you at the jQuery Conference Boston 2010!

Incredibly Strange iOS Issue

Update 8/19/2010 @ 11:55 EDT

It looks like this may be a cross-domain issue after all.  I changed my testing methodology and was able to reproduce this issue without Gmail being involved. That’s the good news, the bad news is that even in a cross-domain scenario, access should simply be denied to the properties or an exception should be thrown.  In this case in Mobile Safari, the script dies at the point in execution where it attempts to access the property.

</update>

I’m posting this to my blog in hopes of finding some help; I’d love to file this issue as a bug report but I have no idea if it’s a bug in Gmail or a bug in Mobile Safari.  I’m inclined to think the latter; but the fact that I can consistently reproduce this issue in the manner described below leads me to think it could be something crazy that Gmail does.

Window.opener

The window.opener object is available on browser windows that have been spawned by other browser windows (either using Javascript or the classic target=”_blank”). It’s a reference to a window object. In general, it behaves entirely as expected on the iOS; except when you click a link from Gmail (and the issue occurs whether you’re using the Mobile Gmail version or the desktop version on an iOS device).

What Happens?

Clicking a link from Gmail on an iOS device causes the link to open in a new browser window. However, if you have a page that attempts to reference any properties of the window.opener object, you’ll receive the error:

TypeError: no default value

Here’s where it gets really strange, if I evaluate the window.opener object itself in any way, it reports that its a DOMWindow object. However, if I try to enumerate the properties of that object none are found.  If I try to access a property of a DOMWindow object by name, I receive the above error.

What I’ve Tried

I’ve tried and ruled out several possible methods of reproducing this issue without Gmail; in each case the window.opener object behaved normally and I was able to both enumerate the properties and read a property directly without an error:

  • I created a page with a link using target=”_blank”
  • I created a page using Javascript’s window.open to open a link
  • I hosted the pages on different domains to see if there was some cross-domain issue affecting it.

I’ve also tried a few workarounds; none of which prevented the error:

  • Check for the presence window.opener.location (or any specific property) before using it in an assignment.
  • Wrapping any references to properties of window.opener in a try / catch.

At this point, I’m pretty well stumped on what’s happening here; or if there’s any way for me to work around it.  I’ve set up a demo that I encourage you to email to yourself so you can see this bug in action.   Turn on the debug console in MobileSafari, click that link from the gmail web app, and you’ll see the errors.  Click that link from anywhere else, you’ll get every property of the window.opener object written to your console.

You can test this on the devices themselves or the emulators; the behavior is consistent.

One more thing…

It just wouldn’t be an Apple-related post without that line; Once you see the error, tap the icon to switch browser windows.  Safari will crash.

Back from Hiatus

I’m back from my blogging hiatus. Between a wedding, honeymoon, and the whirlwind that is HTML5 video, I’ve been completely out of the loop blogging-wise. Add onto that that just 45 days after the wedding my wife got pregnant, and life has been very busy, and very good.

Upon coming back to my blog, I discovered that it had been hacked. I’ve upgraded to WordPress 3.01 and the latest versions of all my plugins. Some things are still screwy (code isn’t being syntax highlighted yet) but at least I’m no longer pushing out malware!

Hey Web Developers: Step up!

In my career, I’ve been fortunate (or unfortunate depending on your point of view) to become heavily involved in the process of recruiting and hiring engineering talent for multiple companies.  I’m discouraged to say that the User Interface Engineer (which I’m defining quite differently than Jared Spool’s UIE.com site) is among the most difficult positions to fill (right up there with build & release engineers). Too many people get into Web Development with no formal engineering background making them ill-equipped to solve engineering challenges that they face daily while building a User Interface. I see so many resumes for traditional web developers who can’t tell me the difference between an Array and a List or how recursion can often provide a simpler solution than iteration. I can assure you as the guy who will be reviewing your resume or doing your phone screen or interview: developing these skills is no longer optional!

Continue reading

Dear MSFT and AAPL, Embrace Theora!

I swear; I’m not a hypocrite. I 100% stand by what I wrote to Mozilla about supporting H.264 or risking killing video on the Web sans plugins. I also continue to believe that H.264 is a significantly superior codec to Theora (it’s a fact so it’s hard to deny). And I also continue to believe that publishers with huge libraries of H.264 encoded video don’t want to go through the process of re-encoding all that video; not to mention the added expense of storing and distributing multiple formats. Mozilla, I say to you again: you need to support H.264 video (be it natively or through system libraries such as Quicktime or Gstreamer).  The Web needs H.264 to be universally available because the largest content producers need the highest quality codec to distribute their video to everyone; they need a codec with broad hardware support such that mobile devices don’t run themselves dead in 5 minutes of video playback. For now, and for the foreseeable future, H.264 is that codec.

Perhaps the greatest misunderstanding of my previous article was that I was somehow saying that Mozilla should drop support for Theora. Despite the number of times I refuted this claim, it seemed to persist. For the record, I do not think Mozilla should drop support for Theora in Firefox; I think they should add support for H.264 .

The Pareto Principle, if you subscribe to it, tells us that 80% of video content is going to be generated by 20% of the market. That 20% simply won’t settle for an inferior codec in the interest of that codec being free. For all of Mozilla’s posturing and idealism, the only real outcome they can achieve is that some 80% of the most viewed online video content will continue to be delivered via Flash, Silverlight, or some other plugin. Of course, that leaves us with all the video content that other 80% of content producers generate; and that’s where Theora comes in.

It’s All About the Tail!

The Web has given everyone a voice (I certainly could never have written an article that was read by over 10,000 people in less than 24 hours without the Web). The Long Tail Phenomenon a truly wonderful and powerful force; independent content producers now have the ability to distribute their content to a huge audience. The aspiring filmmaker can post his video on the Web; the aspiring musician can post her music on the Web. Bloggers are treated more and more like first-class journalists every day. And the potential for exposure is certainly far beyond what could have been achieved independently even 10 years ago.

But members of the Long Tail have very different needs and expectations for their content than the major content providers. For starters, the aspiring filmmaker probably doesn’t have the $10,000 per year royalties that could (theoretically) be due for his video encoded in H.264 and distributed on the Web. He also likely doesn’t have a lawyer to help him understand the obscure patent laws that cover H.264 usage. And he certainly doesn’t have the resources to fight the potential legal battle if he’s found to (even accidentally) misuse his “rights” to H.264.

This niche is where free formats demonstrate their great value; and speaking for the likely thousands of these hopeful filmmakers out there, we need a format that we can be confident will always be free. We need a format that we are free to do whatever we want with. We need a format that enables everyone to create their content and share it with the world freed from any legal concerns. For now, and for the foreseeable future, Theora is that codec.

No, the quality’s not nearly as good; but it’ll work for the guy just trying to get his film out there (Conversely, it definitely won’t work for FOX for putting HD episodes of 24 and House online). The point is, for people in the Long Tail, sometimes “good enough” really is good enough.

Microsoft and Apple Agree?

These guys are never on the same page so this must be big! Neither Microsoft or Apple are supporting Theora in their browsers. My thought is: Apple? Really? “Best friend” of the Indie Producer? A company that has built a reputation for providing fantastic support for creative professionals in both the audio and video industry should know better! As for Microsoft; well, nothing that company screws up surprises me, honestly.  There’s simply no excuse for not supporting Theora (on the desktop; Mobile is a different matter altogether due to the aformentioned availability of hardware decoders for H.264). The code is out there; there are implementations for every major OS. There’s nothing preventing either company from supporting it other than their own stubbornness; very much like Mozilla’s own stubbornness regarding H.264.

It’s About Producer Choice

This isn’t about consumer choice; it’s very clear that consumers just don’t care. It’s about choice for the content producers. It’s about letting the guy who maxxed out 10 credit cards to scrape together a movie (and unlike Kevin Smith, got rejected by Sundance) get his film on the Web for the world to see knowing that he’s not in danger of racking up even more debt.  It’s about embracing the long tail; the Here Comes Everybody mentality.

The Web needs H.264. The major broadcast and cable TV networks and the other big names of content will never choose Theora (I reiterate, they’d rather deliver their video via Flash to take advantage of H.264 than use Theora). For HTML5 video to succeed Firefox must support H.264.

Microsoft and Apple, it’s time for you two both to ensure that the independent content producers of the world get equal treatment in your browsers. I applaud you for accepting H.264 so that we could all get our favorite TV shows and movies online without plugins. Now I’m asking you to make sure we can also get content from smaller sources like The Guild and Red vs. Blue. For the Long Tail to continue to grow as a source of meaningful and influential content, we also need free video; and for that, we need Theora.