Presentation: Breaking the barriers - moving browsers and the web forward

Yeah, OK. We did a lot of cool stuff to HTML and CSS. We also are quite on the way to make plugins obsolete. But somehow we are not quite there yet when it comes to making browsers a real platform for development.

Hardware we use has a lot of features that is not available to us using the open web stack (html,css,js) and when we build inside the browser we are always limited to the space the browser gives us. Well, no point in complaining as there is more to web development than having pages inside a browser.

In this talk Chris Heilmann will show a glimpse into the near future on what is possible with browsers and the web as a platform. The technologies of the web are flexible enough to allow us to build amazing connected experiences for our end users. All we need to do is say "yes" and have a go!

Breaking the barriers

Moving browsers and the web forward

Christian Heilmann, Mozilla, Beyond Tellerand, November 2011

Today I want to talk about a web of the not long ago and show you some things that are in the works but you might not be aware of.

Beyond Talleyrand

Picture of Talleyrand

When Marc asked me to speak at this conference I was first confused about the title. Talleyrand was the first prime minister of France in 1815. Naturally what we are talking about here today would be beyond him, right?

A quick history lesson

The Commodore 64

You might not know it but Marc (the organiser of this conference) and me have some history together. We spent a lot of our free time as young lads to build things for the best computer on this planet: the Commodore 64.

BBS graphics

BBS ansii graphics

Marc did mostly things like this. These were BBS graphics. Images that were shown on mailboxes you called before we had the internet. As every byte was a prisoner in this case (and connections were 2400 baud) he was very limited in his arsenal of colours and pixels.

Incidently, when you go to ohh.io on a web terminal now you can see similar things, except now they are done with Node.js in JavaScript.

Native graphics

Splish Splash screen (c64 demo)

I, on the other hand, worked on visuals in another format, one that ran on the computer itself and allowed me the luxury of 160x200 pixels in 16 colours, one of which had to be the same for the whole screen. Every 8x8 pixels I could use 3 of the 16.

Geeky? Yep, but we learned things

guys in sweaters and glasses around a table

As you could see, this was geeky as hell. What it taught us though is an appreciation for restraints as something powering creativity. If you don't have much at your disposal, you get more creative using it as there are no distractions.

Facing similar issues and solutions

  • - Connectivity issues
  • - Limited hardware access
  • - Unknown or fixed environment
  • + Progressive enhancement
  • + Responsive design

I liked the concept of looking beyond what we are doing right now and I think the creativity we applied to a very limited system like the C64 can be used on the web, too.

The issues are similar, we have to care about connectivity and speed and we have to cater for limited environments and rich environments alike. The power of the web to me is its ability to change and to adapt to what the end user has. Progressive enhancement in development and responsive design are concepts that allow us to build for the future instead of locking us in to a current environment.

Modern tech is in the browser

A lot of what could be used right now is not used at the moment, and that saddens me - simply by testing what a browser supports we can give our end users amazing interfaces. Drag and drop from the desktop to the browser is not science fiction. Neither is image and file manipulation in the browser without the need for a server. 64 yourself is a good example of this.

Things we have no excuse not to use

  • Rich HTML semantics (HTML5)
  • Self-validating forms (HTML5)
  • Richer form controls with fallbacks (HTML5)
  • Canvas for painting in the browser (HTML5)

HTML5 has a lot of cool things in it and with "friend" technologies you can do amazing things in a browser. If we don't use them, then we can't complain browsers don't support them.

Things we have no excuse not to use

  • CSS gradients, multiple backgrounds, animation and transition
  • CSS 3D transforms
  • Local storage and offline storage
  • SVG for scalable and interactive graphics
  • RequestAnimationFrame for secure animation
  • History API
  • WebGL

Taking on challenges

Instagram unshredder

Why server?

HTML5 Unshredder

Aiming high

Dog fetching a massive tree

However, as this is a conference that asks me to lean out of the window a bit and show you what is beyond the now here are some things that get me as a veteran of web development with lots of scars to show very excited indeed.

OK, so let me lean out the window a bit and show you some of the things you can be part of right now that makes the web an amazing platform to play with.

All of the things I will talk about have one feature in common: they are open, supported by multiple players on the web and give freedom and responsibility to the users of your products.

Breaking the browser mould

One of the things that is constantly mentioned when it comes to the web and interfaces is that it is annoying to have the browser around our solutions and outside of our reach. This is not the case any longer.

Contextual browsing

Firefox with native toolbars

This is a demo how the browser could show different menus when you are on different web sites.

Adding your own menus

HTML5

Simple HTML, big result

<section class="slidecontent" contextmenu="imagemenu"> </section> <menu type="context" id="imagemenu"> <menuitem label="rotate" onclick="rotate()" icon="../img/arrow_rotate_clockwise.png"> </menuitem> <menuitem label="resize" onclick="resize()" icon="../img/image-resize.png"> </menuitem> </menu>

All you need to do to add new menus is use the correct HTML. In this case the rotation and the resizing is done with CCS3 transforms.

Going Fullscreen

  • DemoFirefox Nightly / Latest Webkit
  • Ongoing security discussion
  • Amazing opportunities

One of the big requests in the past was a fullscreen API for browsers. This is now available. You can make any element take over the whole screen, which is important for games especially.

Developing with the web

Now it is fun to build for the web, but isn't it time we used the web and browsers as a development platform? Seems simply logical, you build in the thing to build for.

Hackasaurus for kids

Hackasaurus is a project from Mozilla to get kids to start doing web development. Instead of teaching them coding it allows them to directly manipulate web sites and share their hacks with the world.

Cloud 9 IDE - editing on the web

Cloud 9 IDE

On the total opposite end of the spectrum we haveCloud 9 IDE - a fully fledged IDE in the browser. You can edit files on Github and collaborate live with your colleagues without needing to install anything.

Scratchpad

Scratchpad is a simple editor in the browser that allows users to write JavaScript to test on the current page to run against it. Instead of writing a JS and setting breakpoints you can highlight parts of the script and run only those. Once done, you can save the file to your hard drive.

As a developer, this saves me a lot of time trying out new things. I don't need to use a development server or local machine and insert a JS I need to remove later on and I don't need to build a project to try out some new functionality. Think of it as Greasemonkey on steroids.

Styling in the browser!

You can also style a page from scratch in the browser itself.

My HTML sucks?

It is time to give people different ways to realise what they are doing wrong when it comes to making the web fast. Almost every browser allows you to inspect the DOM and find issues with the structure of your document but it might not be obvious just how much your templating skills create in terms of HTML cruft.

Parse errors in view-source

Parsing errors with explantations

One great new feature to allow debugging in the browser is that the next Firefox versions will show HTML5 parsing errors already in the source view. That way developers can simply find issues. With templating the source we edit is not the one the browser creates.

Tilt: Making HTML cruft visible

Tilt is a unique new way to make this more obvious to people. It displays the page as a 3D model and you can easily see where your nesting went overboard even when the HTML is minified.

Making identity simple

Spartacus echo machine

One of the biggest problems of the web is that of identity - it is a wide ranging topic, and, at least to me the most important thing to fix.

The need for login systems…

In a perfect world, we wouldn't have to validate users at all. Sadly the web is far from being perfect and the main issue is that when you make it simple for people to comment, spammers and trolls will be the people to do it. This video is a great example for that. The author raised a discussion that he could make any atheist change because of one simple question and allowed people to annotate his video to give their opinions on what he said. As you can see that backfired. The sad thing is that nearly none of the annotations have anything to do with the subject at hand.

Our identification systems suck!

  • Go to kittensrule.com
  • Click register
  • Enter a massive form with all your data.
  • Choose a user name that is not taken yet
  • Provide an email to verify your identity
  • Retrieve email
  • Go back to web site
  • Choose a "secure" password, like l455m!chr31n~du=dr3xd1ng!

The normal system to get access to something is annoying and verbose

Coming back

  • Go to kittensrule.com
  • Click login
  • Enter username
  • Enter password - damn what was it again?
  • Try three times and get asked to reset it.
  • Retrieve email
  • Go back to web site
  • Choose a new "secure" password, like 4m4r5ch~sch3i55d!ng

Forcing users to remember usernames and passwords means they will forget them over and over again and go through the same annoying process.

What happens?

  • People use the same username and password everywhere
  • People constantly reset passwords
  • People open new accounts and let the old one sleep
  • We're wasting a lot of time, money and leave insecure trails ripe for abuse

Third party login?

  • Simpler, but you over-share
  • Do you know what the third party login button records?
  • What if the service goes down or becomes irrelevant?

Enter BrowserID

  • Go to kittensrule.com
  • Click button
  • Provide a verified email as your identity
  • Watch kittens! squee!

BrowserID shortcuts the whole system by making a verified email your identity.

Openphoto with BrowserID

What is BrowserID?

  • A very simple way to identify yourself on the web
  • Store your email(s) as your identity(ies)
  • The validation happens in the browser and with a trusted provider or on your own server
  • BrowserID is a protocol, not a service and is fully decentralised
  • It is driven by Mozilla, but independent of it

What is BrowserID?

  • BrowserID works in any modern browser (and IE8)
  • Right now, it is a JavaScript library and a validation service
  • You can also have an add-on to avoid the popup
  • Sites (email providers) can become identity providers
  • You do not give access to your emails, social graph, or other data.
  • Apps won't store your data at all = hacks are less dangerous
  • You can have several identities, and you can allow BrowserID to remember them.

BrowserID

Invoking a BrowserID verification

<script src="https://browserid.org/include.js"></script> <script> navigator.id.getVerifiedEmail(function(assertion) { if (assertion) { // now go and verify - simple XHR will do } else { alert('Whooooo are you? who? who? who? who?...'); } }); </script>

Asking the browser to verify with browserID is dead simple. All you need to do is ask it for getVerifiedEmail().

Verifying the email (via web service)

<?php $url = 'https://browserid.org/verify'; $assert = $_POST['assert']; $params = 'assertion='.$assert.'&audience=' . urlencode('http://thewebrocks.com'); $ch = curl_init(); curl_setopt($ch,CURLOPT_URL,$url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch,CURLOPT_POST,2); curl_setopt($ch,CURLOPT_POSTFIELDS, $params); $result = curl_exec($ch); curl_close($ch); echo $result; ?>

To verify the email you can host the code yourself or do a simple call to a web service right now provided by browserid.org.

Apps for the web

Lots of App icons

Apps - a revolution?

  • Best use of screen estate
  • Clicking a button is easier than typing an address
  • Built for the system they run on
  • Dreams of massive monetisation

When apps got out people got very excited about them.

Issues with native apps

  • Upgrades mean replacement of whole apps
  • Syncing across devices is not happening
  • App store placement is the new SEO
  • Icon model does not scale

The honeymoon period is over though and by now we realise that they have a few annoying problems.

A hybrid approach

  • Apps using HTML5/CSS/JS
  • The web is the distribution model
  • Web intents tie into existing data stores

A successful model for apps should use the best of both worlds and keep synced up over the web rather than through updates.

Apps / Web intents + activities

Open web apps is the next level of where apps on the web can go.

Web intents/activities rock!

  • Re-use of existing services without giving access
  • Keep storage of data in the hands of the user

Going mobile

Little fox grabbing the tail of its mother

The main target to get the web onto is mobile devices. It is simply not scalable to build natively for all the different hardware out there.

Are we mobile yet?

Instagram unshredder

Are we mobile yet is a site that shows you the different parts of a mobile device and how many of those are available using open technologies. Quite a grim picture, but we're getting there.

Boot to Gecko

Boot to Gecko is Mozilla's project to create a native interface for mobiles. The screens you see here are html5 and based on the web API specifications defined by Mozilla and others. The texting facility already works and we have mobile devices running this interface.

How can you help?

Everybody can help

Inspired? Like what you see? We need you to make this happen!

More honesty, less ninjas!

Everybody can help

You don't need to be an expert and full of awesome to be part of this. We need people to be honest about their abilities and ask for support when they need it and the web needs supporters and spokespeople on all levels.

You can…

  • play with BrowserID
  • build apps in HTML5/CSS/JS
  • play with the Devtools and give feedback (file bugs) - UX feedback very much wanted
  • review the BrowserID field guide
  • Join mailinglists, visit us on irc.mozilla.org
  • Tweet, blog and talk about all of this!

Time to play!

Dog wants to play