Subscribe to RSS feed

Posts tagged with "HTML5"

SXSWi: the aftermath roundup

, , , ...

The SXSWi 2012 festival is over, and the merry men and women of Opera have returned to their castles, caves and dungeons. We didn't have much of a chance during our visit to Austin to write intermediate reports and post interviews, as we were far too busy meeting great people, spreading the good word of Opera, and rocking out. So in lieu of what was promised in my previous post about SXSWi, here is a summary of our talks including links to slides and other resources associated with them, and some highlights.

SXSWi highlights

We really liked the following:

  • The choice of beer at The Gingerman
  • The free beer in the SXSWi tradeshow
  • Talking to so many Opera fans in the good old US of A.
  • The beer and food in the Ironworks (a pattern emerging here)
  • Having a chance to talk to so many talented developers and designers and spread the good word of open standards and best practices!
  • Checking out some awesome bands (I got my metal fix in Austin)

Opera talks FTW

Overall, our talks went really well — all of them seemed to have good turnouts, and good comments. In short, I think we kicked some ass at SXSWi! Below you will find talk summaries and links to resource for each talk.

Leaving Flatland: Getting Started with WebGL, featuring Luz Caballero

Luz and talk partner Nicolas Garcia Belmonte delivered a very interesting intro to WebGL, talking about what browsers support it, when you should use it, and what you can do with it. This was accompanied by some really cool visualization demos.

The State of Browser Developer Tools, featuring Mike Taylor

In this talk, the rock 'n' roll Mr Mike Taylor teamed up with representatives from other browser vendors to discuss new debugging features from browser vendors like Google, Opera and Firefox. I think he held his own nicely against the likes of Paul Irish and Brendan Eich, providing a witty and informative presence for Opera.

HTML5 and CSS3: Does Now Really Mean Now?, by Chris Mills

I was very pleased with the reception my talk got: I provided some tips for using HTML5 and CSS3 shiny, while keeping content accessible and usable in older browsers via polyfills, feature detection, and more. I raced through my talk pretty quickly, but the ample time I had for questions was productive, eliciting lots of useful questions and comments. I had around 200 positive tweets afterwards ;-)

Building Great Games in HTML5, by Erik Möller

Erik is a truly great programmer, and his work inside Opera on WebGL really shows off some of his knowledge from his past life in the games industry. In this talk, he shared some of his <canvas>, WebGL and COLLADA knowledge for creating web-based games, to a great reception.

Browser Wars V: The Angry Birds Era, featuring Charles McCathie Nevile

Chaals got together with the equivalent open standards divas from Mozilla, Microsoft and Google to talk about big issues of the day, such as DRM in browsers for video, the move towards supporting -webkit- prefixes in non-WebKit browsers, and the controversy of Google products such as DASH. It was fun and informative, but surprisingly less controversial than previous year's browser wars panels.

CSS.next: Current Experiments, CSS4 and the Future, featuring Divya Manian

The assembled team of CSS experts discussed where CSS is at now, how you can use some of the existing features to do great things, and where it will go in the future. This generated a lot of great discussion!

Lie to Me: CSS3 Demystified, by Håkon Wium Lie

Our CTO gave a presentation on CSS, looking at where it is going, some of the killer new features introduced in the CSS3 modules (such as web fonts and paged media), and historical context on how we got to where we are. It was delivered in a fun, lighthearted way that was accessible to non-CSS experts.

Feel free to ask us questions on Twitter, or comment on this post!

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.