Subscribe to RSS feed

Posts tagged with "HTML5"

HTML5 Please

,

Several months ago, Paul Irish and I got an idea to create a service that would give out recommendations on which HTML5 features to use and how to use them. Finally, yesterday, we pushed that site live: html5please.us.

The pressing problem for web developers has been to know which features are good to use, which are not. Most likely, they spend hours working on sites using some new features, only to be burnt in the process using features that are not performance-friendly, having incomplete support or using the wrong polyfill.

I spent a lot of time thinking of how to best implement this such that it would be easy to work with among contributors and also be easy to compile into a single site. Tim Branyen helped in much of the brainstorming and finally we came up with a node/backbone implementation that took a set of markdown posts and stitched them into a single HTML page. The node application also automatically tries to add a link to when can i use for each of the features. I also added another check to verify these links exist and if not, remove them before being published.

Thanks to Deepak Jois for writing the shell-script that allows easy addition of new features. Connor Montgomery, Peter Beverloo and Addy Osmani also helped significantly in making sure the content was relevant and correct.

Let us know what you think and also if you could, help in the effort.

Custom Protocol and Content Handlers in Opera 11.60

,

Custom Protocol and Content Handlers in Opera 11.60 beta

The Opera 11.60 alpha snapshot introduces support for HTML5 custom scheme and content handlers.

Not yet supported are the isProtocolHandlerRegistered, isContentHandlerRegistered, unregisterContentHandler, unregisterProtocolHandler methods which were added to the spec recently.

The idea is pretty simple. Your site can offer to handle certain MIME types or schemes (aka “protocols”) and the user has the option of opting in. One obvious use-case is webmail. For example, a service like Fastmail.fm or Gmail could tell your browser to open its "Compose" page if you click on a "mailto:" link rather than open a native mail application.

Of course, there are reasons why you wouldn’t want to pass off every type of content to a web-app—we want JavaScript and CSS to be handled by the browser, for example—so a blacklist exists. For security reasons, there's also a whitelist for schemes (but with the option to create a custom “web+” scheme).

Protocol Registration

navigator.registerProtocolHandler takes three arguments: the protocol, a URL which points to the custom handler application with a placeholder “%s”, and a title.

navigator.registerProtocolHandler(
  "tel",                           //protocol
  "/protocolhandler.html?%s",      //handler
  "Telephony"                      //title
);

In a user-agent that supports this, the user will be prompted to allow this registration to happen. Here is how this currently looks in Opera 11.60 alpha:

Once that’s taken care of, all “tel:” links will have the opportunity to be handled by this “Telephony” app. For example: clicking on tel: 555-1234 brings up a dialog asking if you would like to open the link with the just-registered application, or the default.

The browser then navigates to http://miketaylr.com/pres/capjs/demo/?tel%3A5551234. A script can then parse the URL and operate on the “tel%3A5551234” content (in this case, just put the phone number in the phone’s LED).

You can try it out here.

Content Registration

navigator.registerContentHanlder takes three arguments as well: the content-type, a URL which points to the custom content handler with a placeholder “%s”, and a title.

navigator.registerContentHandler(
  "text/x-cheeseburger",                     //content-type
  "http://miketaylr.com/code/cb.html?cb=%s", //handler
  "Cheeseburger Parser"                      //title
);

Just like registerProtocolHandler, the user will be prompted to allow the content-type registration to happen.

In this example, we have a custom text/x-cheeseburger content-type parser (see the syntax diagram) to operate on our .cheeseburger files. When we download a resource with the text/x-cheeseburger content-type, our browser will ask us to allow it to open it with our custom handler.

Again, just like registerProtocolHandler, the application is opened with the “%s” placeholder replaced by the URL of resource to be handled. In this case, http://miketaylr.com/code/cb.html?cb=http%3A%2F%2Fmiketaylr.com%2Fpres%2Fcapjs%2Fdemo%2Fsingle.cheeseburger. Now our script can fetch the contents and present it in a colorful way.

You can give it a spin here.

Opera Tech Break: HTML5 with Bruce and Zi Bin

,

Our very own Bruce Lawson and Zi Bin Cheah give a light-hearted, yet accurate overview of HTML5 and what it means for consumers and developers in the latest installment of Opera Tech Break. Enjoy!