Dont fear the internet

Don’t fear the internet has some good primers on the internet, HTML, CSS and using the browser as a development tool.

Adobe BrowserLab: test your websites

If you do web site development you’re probably well-acquainted with browser testing*—checking your site in a variety of web browsers to ensure that you know how it’s going to look and behave for the vast majority of users. You especially want to test against Microsoft’s Internet Explorer browser: it has been one of the worst in terms of rendering consistent with HTML and CSS web standards.

Adobe has a free online tool—BrowserLab—that will let you check your site in a simulated browser session using a wide variety of rendering engines, including IE 6, 7, 8 and 9, various versions of Chrome, Safari, Opera and Firefox. You can specify Windows or OS X versions and quickly check where you may need to fix some coding errors, or even hack your perfectly-compliant code to accommodate IE’s willful ignorance of basic CSS rules.

BrowserLab is really useful, and seems to give an accurate rendering. I fired up Windows in a virtual machine on OS X and did some testing with the Windows versions of IE 7, Chrome, Safari and Firefox, and then checked the results against BrowserLab—the results in Windows looked the same as what I got from BrowserLab, including some ridiculous scrolling issues on Chrome 11. You just need to create an account on the site and log in to use it.

* If you’re not testing against other browsers besides IE on Windows, or whatever development platform you use, give it a try and make sure that your site looks the way you expect it to across different browsers and operating systems. Your users will appreciate it.

Google Refine

Today Google announced Refine 2.0, a “power tool for working with messy data sets, including cleaning up inconsistencies, transforming them from one format into another, and extending them with new data from external web services or other databases.” It looks kind of like an extension of Google Spreadsheets with some powerful data-scrubbing features.

Open source (Mac, Windows, Linux) project is here: code.google.com/p/google-refine

Vimeo’s new iframe embed code

As a follow-up to a previous post about embedding Vimeo videos and having them work on Apple’s iOS devices (iPhone, iPad and iPod Touch), Vimeo just announced their Universal Player which will deliver the appropriate video format for the device being used. Vimeo’s FAQ page has more info on it, but the new method uses an <iframe> HTML tag to frame in the content, and the player will detect the device to serve the right video file. YouTube has recently rolled out something similar. Vimeo’s code looks like this (line breaks were added):

<iframe src="http://player.vimeo.com/video/12345678?title=0&amp;byline=0&amp;
portrait=0&amp;color=CC6600" width="640" height="360" frameborder="0"></iframe>

I did some quick testing and it worked fine. Both the iPad and iPhone were delivered h.264 versions, while Mac and PC still get the standard Flash player. I would like to see Vimeo offer some embed options to include serving straight HTML5/h.264 to the desktop as well and avoid Flash altogether.

WordPress doesn’t like the <iframe> tag, so if you’re using WP you will need to install the Embed Iframe plugin. In my testing this plugin has supported the new Vimeo method within a WP post. I have a test page here where I embed two videos, the first one using the new iframe code and the second one with the earlier javascript workaround.

Vimeo HTML5 Embed Workaround

Many people are using Vimeo.com for their video hosting rather than YouTube. I’ve been using it for nearly a year. Personally, I like it better than YouTube because you’re not limited to 10-minute segments per video. I like the features they provide with a Vimeo Plus membership, and the user community that’s grown there. Also, the content on Vimeo seems to have more of an artistic focus, with some very talented folks posting quality work.

One of the limitations with Vimeo right now, however, is the lack of HTML5 embedding and the impact this has on iPhones and iPads. You can view videos on the Vimeo.com mobile site (www.vimeo.com/m) with your iPhone and iPad (neither of which will display Adobe Flash content), but if you want to embed your videos on another site, Vimeo doesn’t yet have a player implemented to handle embedding for those devices.

YouTube has a solution in place, and there’s been some push from Vimeo members in recent months to get this done there as well. Recently the Vimeo staff responded that they’re working on it, and I expect they will deliver something good. We don’t know how long it will be until it’s ready, so in the meantime I thought I would post a temporary solution to get embedded Vimeo videos working on the iPhone and iPad. This is not my original idea. I found it in this YouTube video describing the process, and decided to document it a little further and put it here. Thanks to YouTube user “optikalefxx” for posting his solution for everyone.

(It’s nothing more than a javascript browser-sniffing workaround/hack, but it works well enough and might be a good way to bridge the gap and get your videos to these popular iDevices until Vimeo delivers a proper API for it.)

Here’s a link to the code in a PDF you can download, including some notes, caveats and assumptions about using it. (If you have trouble with formatting when copying the code from the PDF, try this Google doc where I have included a complete HTML page that you can work from.) I assume you’ll know what to do with this, how to modify it for your particular video ID, dimensions, controls color, etc. As always, make a backup copy of any files before you modify, and test it across your platforms and devices before publishing. This method is intended to be temporary, and it may break in the near future as Vimeo implements their HTML5 embed solution, so don’t put this out there expecting it to be a long-term fix. Caveat developer.