1. CSS 3D transformations in Firefox Nightly

    When the first 3D transformations in CSS got support on Webkit browsers people got incredibly excited about them. Now that they have matured we also support 3D CSS in Firefox. To see it for yourself, check out one of the latest nightly builds.

    You can see them in action in this demo of a rotating HTML5 logo and the screencast below:

    This means now that we need your support in trying out CSS 3D examples in Firefox and add other extensions than -webkit- to your CSS 3D products and demos. To show that this is possible, we took the well-known webkit-only “poster circle” demo and made it work with Firefox nightly by adding the -moz- (and of course the other prefixes and one set of instructions without browser prefixes). Here is a slight excerpt:

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    You can see this in action in the screencast below alongside Chrome and you try the demo out yourself. The slight jerkiness is actually my MacBook Air impersonating a starting jet every time I use ScreenFlow and not the browser.

    To celebrate the release and to show how CSS 3D can be applied as subtle effect, have a game of pairs using your favourite browsers (and a cat) :

    browser pairs

    Oleg Romashin also spent some time to convert a few CSS 3D demos to work with Mozilla and you can check the 3D city for more “wow”.

    If you are new to CSS 3D transformations here’s a good beginner course and a tool to create them.

    The rotating HTML5 logo demo also shows how you can check if the currently used browser supports 3D transforms. Instead of repeating the animation frames for all the prefixes we test in JavaScript and create the CSS on the fly:

    function checksupport() {
      var props = ['perspectiveProperty', 'WebkitPerspective',
                   'MozPerspective', 'OPerspective', 'msPerspective'],
          i = 0,
          support = false;
      while (props[i]) {
        if (props[i] in form.style) {
          support = true;
          pfx = props[i].replace('Perspective','');
          pfx = pfx.toLowerCase();
          break;
        }
        i++;
      } 
      return support;
    }
    if (checksupport()) {
      var s = '';
      styles = document.createElement('style');
      s += '#stage{-'+ pfx +'-perspective: 300px;}'+
           '#logo{-'+ pfx +'-transform-style: preserve-3d;position:relative;}'+  
           '#logo.spin{-'+ pfx +'-animation: spin 3s infinite linear;}'+
           '@-'+ pfx +'-keyframes spin {'+  
           '0% {'+ 
           '-'+ pfx +'-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);'+   
           '}'+
           '100% {'+   
           '-'+ pfx +'-transform: rotateX(0deg) rotateY(360deg)'+
           ' rotateZ(360deg);'+ 
           '}}';
      styles.innerHTML = s;
      document.querySelector('head').appendChild(styles);
    }

    For more information on creating your own pages that use 3D transformations, take a look at the draft specification

    As always, If you find any bugs, please report them at bugzilla.mozilla.org!

    So please reward our hard work bringing the third dimension to Firefox’s CSS engine by supporting and testing. Cheers!

  2. Debugging and editing webpages in 3D

    Tilt is a Firefox addon that lets you visualize any web page in 3D. A new update is available, coming with more developer-oriented features. Try the addon.

    Since the first alpha version of Tilt was announced (a Firefox extension focused on creating a 3D visualization of a webpage), a lot of work has been done to add a great number of developer-oriented features. These focus on debugging the structure of a webpage, inspecting styling and attributes for each node and seamlessly refreshing the visualization when the DOM structure changes or after contents of document are repainted.

    Solve nesting problems

    Tilt is useful when searching problems in the HTML structure (like finding unclosed DIV elements for example) by providing the extra third dimension, layering each node based on nesting in the DOM tree. Stacks of elements visually represent branches in the DOM, and each node can be inspected for the inner HTML contents, its computed CSS style and the attributes.

    Clicking anywhere on the visualization highlights a color-coded rectangle surrounding the corresponding node. Double click shows up the source preview for that node. Tilt also tries to show the most relevant information when needed (one is most likely to inspect the attributes of an input, button or image element, for example, but can easily switch between HTML, CSS and attributes view at any time).

    Minidom map

    The “minidom” is a tree view representation showing a minimalistic snapshot of the document object model. Each node is assigned a color associated by tag name (blue for div, green for span etc.) and represented as a strip, along with visual markers for the id and/or class if available. Each one of these strips also has a width relative to the type, id and class name length for the respective element, and the corresponding 3D stack in the visualization has color-coded margins. The coloring for individual elements is easily changeable using the color picker near to the minidom legend.

    Clicking a strip in the tree view (or directly a stack on the 3D document visualization mesh) also highlights the node with a colored quad. This behavior is a good way to relate with the Style Inspector, and a more unified interaction between Tilt and other Developer Tools is planned in the future. All of these additions make it easier to analyze the bounds of each node, along with the HTML, computed CSS and attributes.

    Realtime editing

    Because Tilt is able to detect when a webpage’s DOM structure changes or when a repaint is necessary, integration is seamless with existing Developer Tools. Using Tilt and Firebug or Style Editor at the same time is easy. One can enable or disable CSS properties, changing the style of a node, and the visualization changes accordingly.

    To enable realtime updates for the 3D webpage, go to the Options menu and check “Refresh visualization”.

    Useful for learning

    Developer tools such as “view source” have always been used to help people learn about web development. The 3D view highlights the structure of a page better than a flat view, thus anyone can immediately understand the parent-child relationship between nodes in a webpage, their positioning and how the layout is influenced.

    One use case for this is the Hackasaurus mashup. The X-Ray Goggles is a nice and fun tool designed to make it easier to learn about the different document node types, the “building blocks” which create a webpage.

    Export

    A requested feature was the ability to export the visualization as a 3D mesh, to be used in games or other 3D editors. Tilt adds the ability to export to .obj, along with a material .mtl file and a .png texture (a screenshot of the entire webpage). The open .obj format ensures the fact that the mesh can be opened with almost any editor. Here’s a ray-traced rendering of hacks.mozilla.org in Blender:

    Fun with experiments

    As soon as it was released, many people found clever and interesting alternative ways to interact with Tilt. One experiment was creating a 3D visualization of an image, by exporting chunks of pixels to a HTML representation. The result was a voxel-like representation, with node blocks and stacks instead of pixels. A simple Image2Tilt converter was written in JavaScript, and you can try it directly in the browser.

    Accelerometer support was another addition based on community request. This shows how easy it is to add functionality that wasn’t originally planned.

    You can view the source code, fork it and also contribute to the addon with ideas or feature requests on Github, at github.com/victorporof/Tilt.

    Available as an addon

    The latest version of Tilt can be found on Github, but you can also download Tilt as an addon from addons.mozilla.org.

    For compatibility, Tilt requires WebGL capabilities. Go to get.webgl.org to check availability and troubleshoot any issues. The current version works with Firefox 6.0 to latest 10.0 Nightly releases (latest Nightly builds now also support WebGL anti-aliasing, working great with Tilt).

    To start Tilt, hit Control+Shift+M (or Command+Shift+M if you’re on Mac OS), or go to Web Developer -> Tilt, available in the Firefox application menu (or the Tools menu on Mac OS). You can modify this hotkey (and other properties) from the Options menu after starting Tilt.

    More information about Tilt, the development process and milestone updates can be found on blog.mozilla.com/tilt.

    Future

    Tilt has become an active Developer Tools project, and an ongoing effort is made to integrate it with other existing tools like Style Inspector and Style Editor (source code and latest builds). As the 3D view of a webpage has proven to be useful for debugging, this main functionality will gradually become part of Firefox in future releases.

  3. Ben Adida on BrowserID and identity

    This is the second installment of Mission:Mozilla, a series of interviews that link Mozillians, the technology they produce and the Mozilla mission. Today Ben Adida is in the hot seat to discuss BrowserID, Mozilla’s identity initiative.

    Tristan Nitot – Hi Ben, can you briefly introduce yourself?

    Ben Adida – I’ve been hacking since high school and, since college, I’ve been fascinated with cryptography, security, and controlling my data. I built my first DB-backed web site before cookies. I ran my own IMAP mail server starting in 1997 because no one else was doing it the way I wanted it. I started an open-source web dev shop in 2000, went back to grad school in 2003 to work on secure voting, explored security and privacy of health data at Harvard Med for a few years, and joined Mozilla in March 2011. I’m now Tech Lead on Identity and User Data, and I’m having a blast.

    TN – Oh my… running your own IMAP server in 1997? That’s the kind of thing that gives instant nerd credibility ;-)

    BA – Oh yes, big nerd and proud of it!

    TN – So you’re now with Mozilla, focusing on Identity and User data. Can you update us on what’s Mozilla is doing on these fronts?

    BA – Everyone I talk to within Mozilla realizes that the Open Web depends on more than just the Firefox web browser. People are storing massive quantities of their personal data online, using dozens of services, and an open browser is not enough to ensure that they have true choice, true control, that they can shape the Web to their liking. So we need to be working towards providing user choice in web-based services, too. The first piece of the puzzle is a usable, federated, and distributed identity system. That’s what we’re doing with BrowserID.

    TN – “federated, distributed”, with users having control… Sounds like the original pillars of the Web, right? I mean, as opposed to what we tend to see these days, with identity being concentrated into the hands of very large commercial organizations… How do you plan to achieve this?

    BA – That’s right, distributed/federated *is* the way of the Web, but when you look at today’s identity solutions, most are incredibly centralized, and those that are more distributed in terms of protocol tend to become centralized in implementation because of the so-called NASCAR problem: you get to log in with Google or Yahoo, and if you’re *really* knowledgeable then maybe you can log in with your own Identity Provider. We think we can do better for users and developers in terms of ease of use and adoption.

    TN – And what about privacy?

    BA – We’ve specifically designed BrowserID to reduce the amount of private data that changes hands to the bare minimum required for authentication. For example, in every other web-based identity system today, the site you log into phones home to your identity provider. In the real world, the equivalent is: you check into a hotel, present your ID to confirm your name, and the receptionist calls the issuing government agency and says “Hi, this is the Hyatt San Francisco, Tristan is checking in just now, is that okay?” Why does the government agency or, in the case of a privately issued identifier, the commercial entity, need to know where and when you’re checking in? In the real world, the receptionist just checks the seal on the ID without phoning anyone. BrowserID recreates this more restrained, more privacy-protecting data flow for web logins.

    TN – So how do you manage to get the best of both worlds: user experience and user control?

    BA – First we’re making the browser an important part of the protocol. After all, the browser is the User’s Agent. Isn’t it a little bit silly on today’s Web that you typically have a tab open to your gmail, and then another site asks you to log in with Google or Yahoo? Why can’t the browser help coordinate those two tabs? You’re logged into gmail, of course you have a gmail email address you can use to authenticate! And in the enterprise setting, you’re logged into your company webmail, of course you can authenticate using that enterprise identity! The browser can help reduce user complexity significantly.

    TN – But I could want to use another email address, than the one I use for my Webmail…

    BA – Right, so we’re always going to give users a choice. Users can choose exactly which persona they want to present. And one major BrowserID design point is simply that users understand email addresses as personas. They typically have home and work email addresses, and they don’t use them the same way. If they have a moonlighting job, they often have a separate email address for that. So BrowserID is based on this concept users already understand: logging in is simply delivering an email address to a web site in a way that the web site can easily verify.

    TN – Cool. Say I’m a Web developer that wants to use BrowserID on my site. How hard is that? How much do I have to relinquish control of my users to Mozilla?

    BA – It takes about 5 lines of JavaScript and 10 lines of backend code to integrate BrowserID, and it works today. It’s by far the easiest of the available identity solutions. In the short term, it means you’re relying on Mozilla servers to provide the BrowserID interface and verify users’ email addresses. That said, this is only temporary scaffolding for our distributed system.

    TN – But as BrowserID becomes native in browsers and identity providers appear, this will change?

    BA – We’ve taken great care to design the system so that, as browsers begin to support the BrowserID APIs natively, we can remove our scaffolding and leave standing a truly distributed protocol. Best of all, web sites don’t have to change a line of code for that to happen: as the identity providers and browsers start supporting BrowserID, our scaffolding automatically fades away. And let’s say you’re a web developer and you want to stop using BrowserID for whatever reason: just send your users an email with their new password, and you’re done. No other identity system minimizes lock-in this much, for both users and web developers.

    TN – So minimizing lock-in is part of the BrowserID design goals?

    BA – Absolutely! This is part of our mission and manifesto. We don’t want to own users, we want to empower them. Mozilla is in a unique position to build this kind of identity system because, as we all like to say, Mozilla answers only to users, and we can leverage Firefox to deploy these pro-user designs.

    TN – Fantastic! What would you recommend to Websites who want to do a test-run on their site? And for users who want to experience BrowserID right away?

    BA – Web developers can check out our documentation. Users can check out http://current.openphoto.me, a very promising distributed photo storage system shepherded by WebFWD that chose BrowserID. Just click the distinctive BrowserID login button to get a taste of the user experience.

    TN – I’m sure our readers will try it right away! Thanks a lot Ben for your time. Long live BrowserID!

  4. WDC2011: Tomorrow’s Web (and Future Technologies)

    Last Friday I had the pleasure of attending and speaking at the Web Developer Conference in Bristol. This was the fifth conference in the event’s history and was attended by well over 200 Web designers and developers from across the UK.

    In my talk I covered some Web technologies that are on the horizon and coming your way in the near future. Some topics of particular interest are the WebAPIs that we’re working on, with the WebVibrator API easily being the most popular amongst the attendees (no idea why).

    But in all seriousness, it was a great event and I’m glad to see some of the attendees exploring these new technologies as a result of the talk.

    You can check out the slides below:

  5. HTML5 live: Rocking the boat – and causing a ripple

    Today was the HTML5 live conference in London, England. In this one day conference around 150 attendees learned the why of HTML5, and how to implement it in the current work environment.

    As Mozilla’s representative I was asked to give a talk on how we are faring as a movement when it comes to HTML5. In the talk Rocking the boat – and causing a ripple I discussed the necessity to take HTML5 away from something to build cool demos in to be used in day to day products so we can find and report bugs. I also covered a few of the issues that are cropping up like “best viewed with browser X” products and trying to impress users by listing the technologies used rather than just using them to improve the overall experience. In the end we also list some of the new technologies and products Mozilla is working on to make the web a real application platform that has the same access that native applications have.

    The slides are embedded below and use a modified DZSlides as the system. Focus on them and use the cursor keys to navigate. Display bullet points by pressing space and show and hide the notes by pressing N. Alternatively you can also see the slides a simple web page.

    The audio recording of the talk is available at archive.org

  6. JSConf EU fun and doc sprint results

    At the just-finished JSConf.eu (European JavaScript Conference), Mozilla sponsored the Hacker Lounge, and held a doc sprint during the conference.

    The conference kicked off with Bella Morningstar, president of the Brendan Eich Fan Club (a.k.a. Mandy Lauderdale), serenading Brendan:

    JSConf.eu opening song – JavaScript Will Listen from Alexander Lang on Vimeo.

    Later, at Brendan’s request, he received a hand-crafted “Mandy Fan Club” t-shirt. That t-shirt, in turn, was auctioned at the end of the conference to support the wonderful work of Coder Dojo, led by James Whelton, which teaches programming skills to kids in Ireland. Holger Blank won the auction on behalf of JSConf.eu, donating 1500 euros to Coder Dojo.

    Jsconf yea it's all about awesome people #jsconfeu  on Twitpic

    For the doc sprint, the Hacker Lounge turned out to be less than ideal for concentrated work, thanks to the digital foosball table, but the sprinters found plenty of places to sit and work in Alte Münze, which was an amazing conference venue.

    Doc sprinters and other JSConf.eu attendees in the Mozilla Hacker Lounge

    Here’s what the sprinters at JSConf.eu accomplished:

    We also had remote contributions:

    • Jean-Yves Perrier updated and added examples to a bunch of pages for CSS data types (such as <angle>, <ratio>, and so on).
    • Jonathan Willson added browser compatibility tables and info to several DOM properties.
    • Kevin Lim continued to improve the IndexedDB docs.
    • yyss translated Animating objects with WebGL into Japanese.
    • Berker Peksag fixed the code example and added a browser compatibility table to event.button and added an example to element.scrollLeft.

    We also had moral support from Tom Schuster, Neil Rashbrook, Jeff Griffiths (who also helped Franz Enzenhofer isolate a possible Canvas bug in Firefox), Chris Heilmann, and Dietrich Ayala. Thanks!

    Big thanks to Jared Wyles for mentioning the doc sprint during his talk. I’ll hold him to his request for peer pressure to work on open source!

    Thanks also to Holger Blank and the rest of the JSConf organizers for putting on an excellent conference, and accommodating Mozilla’s ticket purchase requests.

    And thanks finally to Chris Williams for suggesting that we hold the sprint during the conference, and for mentioning it in his inspiring closing keynote. One of the points he made during that keynote is that releasing software as open source is like baring a little piece of your soul. This conference reminded me yet again what an honor it is for me to work together with the thousands of people who pour little bits of their souls into the Mozilla project to create open source software and documentation to keep the Web open for everyone.

  7. Beam me up, Scotty – bringing HTML5 to the enterprise

    The last few days I was busy talking to in-house developers at two large enterprise companies, Sabre in Poland and SAP in Germany. Both these companies approached us asking for a talk about HTML5 as the topic gets a lot of interest in the upper echelons and there is a lot of confusion about it.

    As we were in Poland anyways to attend Frontrow it was easy to visit Sabre and give a one hour presentation on the ins and outs of HTML5 and where the web might go. The day after the same talk was repeated over Skype for the German office of SAP.

    In the one hour presentation we covered:

    • the basics of HTML5
    • what it meant as an evolution of markup
    • what HTML5 is not
    • common HTML5 myths
    • “Friends of HTML5″ – related technologies and
    • what the future of web technologies could look like

    The slides are available online or embedded below (cursor keys to navigate, press N to show and hide notes and cursor down to proceed on slides with bullet points):

    The audio recording of the talk is available on archive.org.

    The slides and the audio is licensed with Creative Commons, so feel free to re-use and distribute them.

  8. Located: Winners of the September Dev Derby on Geolocation.

    With more people going mobile and taking the Web with them, we thought Geolocation was a great topic for the September Dev Derby.

    Web developers explored a number of ways to bring your physical location into the Web experience and we had 16 demos submitted for the Dev Derby.

    Voting was tough this month, but once the votes were counted, we had our winners circle:
    Winners of the September Dev Derby - Geolocation

    1st Place: Urban arteries by Jaume Sánchez aka spite
    2nd Place: I Need A… by David aka d-b-f
    3rd Place: Find Street Art by Aaron Has

    Runners-up:
    Geosocial
    Geoapp

    Thanks to everyone that participated in the September Dev Derby and congratulations to the winners! A special shout out to Jaume for taking 1st place after submitting amazing demos for the past three Dev Derbies. Check out spite’s MDN profile to see what he’s done in the past.

    NOTE: We recently updated our Dev Derby rules to allow developers to participate in multiple contests until they win 1st place. That means if you’ve submitted awesome demos and come up short in the past, you still have a chance to win that top spot in future Dev Derbies… so keep those demos coming!

    If you’re working on CSS Media Queries, you have a few more days to join the October Dev Derby.

    Or get ready for the joy of painting in the November Dev Derby with Canvas. We’re looking forward to seeing some creative demos next month. So hack on!