1. Tilt: Visualize your Web page in 3D

    • by Paul Rouget • Add-ons, Demo, Developer Tools, WebGL • 101 comments

    Tilt is a Firefox extension that lets you visualize any web page DOM tree in 3D. It is being developed by Victor Porof (3D developer responsible with the Firefox extension itself), along with Cedric Vivier (creating a WebGL optimized equivalent to the privileged canvas.drawWindow, see #653656) and Rob Campbell (who first thought about creating a 3D visualization of a webpage). Everything started initially as a Google Summer of Code project, but now, with an enthusiastic team behind it and so many new features and ideas, it has become an active Developer Tools project.

    Tilt is a fun new Firefox extension focused on creating a 3D visualization of a webpage.

    Since the DOM is essentially a tree-like representation of a document, this tool layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering itself.

    Unlike other developer tools or inspectors, Tilt allows for instant analysis of the relationship between various parts of a webpage in a graphical way, but also making it easy for someone to see obscured or out-of-page elements. Moreover, besides the 3D stacks, various information is available on request, regarding each node’s type, id, class, or other attributes if available, providing a way to inspect (and edit) the inner HTML and other properties.

    Based on WebGL

    The visualization is drawn using WebGL, for dynamic, fast, in-browser rendering. At initialization, Tilt creates individual 3D objects (structures describing how the webpage geometry looks like) using the DOM, with the BODY as the lowest layer and the base of the document upon which descendant nodes are layered. For each successive level, another platform is built, adding depth to the 3D webpage mesh. For example, stacks are built from DIVs, ULs, or any containing node with children.

    Controls

    Controlling the visualization is achieved using a virtual trackball (arcball), which rotates around the X and Y axes. Other mouse events exist to control yaw, pitch, roll, pan, zoom, as well as various additional keyboard shortcuts. The controller is not tied to these peripherals only however, making it accessible and easily scalable for other input methods or devices. Double clicking a node brings up the Ace Cloud9 IDE editor, showing more useful information about the node and the inner HTML.

    Try it

    You can find the Tilt source code and the latest extension builds on Github, and a development blog with milestone updates on blog.mozilla.com/tilt.

    For now, to test the extension, just download the latest stable build (tilt.xpi: download the file, then open it with Firefox or drag’n drop it on Firefox), install it and search for Tilt inside the Tools menu. Or, you can use Ctrl+Shift+L (or Cmd+Shift+L if you’re on a Mac) to start the visualization. Close it at any time with the Esc key. Tilt works with any webpage, so you can even inspect this blog to see how it looks in 3D.

    Future

    More features are soon to be added, some of which include: modifying and updating the 3D webpage mesh on the fly (as the webpage changes, exposing CSS transforms for each node, plus customizing stack spacing, thickness, transparency etc.), rendering elements with absolute position or floats differently (e.g., hovering above the webpage based on their z-index), creating a more developer-friendly environment and better integration with the Ace editor and the Firefox Developer Tools. (highlighting the currently selected node, instant 3D preview), exporting the visualization to other browsers or applications (as a 3D object file, probably .obj and/or COLLADA).

    The greatest milestone will be achieving seamless 3D navigation between webpages, as in a normal 2D environment.

    For more information about upcoming tasks visit the TODO.md list.

  3. Aurora 7 is here

    • by louisremi • Aurora, CSS, Performance • 27 comments

    Aurora Logo

    Download Aurora

    Keeping up the pace with our new development cycle, today we release Aurora 7. Enjoy its new features and performance improvements: CSS “text-overflow: ellipsis“, Navigation Timing API, reduced memory usage, a faster javascript parser, and the first steps of Azure, our new graphics API.

    text-overflow: ellipsis;

    It is now possible to get Firefox to display “…” to give a visual clue that a text is longer than the element containing it.

    At last, with text-overflow implemented in Aurora 7 it’s now possible to create a cross-browser ellipsis!

    Navigation Timing

    Performance is a key parameter of the user experience on the Web. To help Web developers monitor efficiently the performance of their Web pages, Aurora 7 implements the Navigation Timing specification: using the window.performance.timing object, developers will be able to know the time when different navigation steps (such as navigationStart, connectStart/End, responseStart/End, domLoading/Complete) happened and deduce how long one step or a sequence of steps took to complete.

    Reduced Memory Usage

    Our continuous efforts to monitor and reduce memory consumption in Firefox will substantially pay off with Aurora 7:

    • The memory “zone” where javascript objects reside gets fragmented as objects are created and deleted. To reduce the negative impact of this fragmentation, long-lived objects created by the browser’s own UI have been separated from the objects created by Web pages. The browser can now free memory more efficiently when a tab is closed or after a garbage collection.
    • Speaking of garbage collection, as we successfully reduced the cost of this operation, we are able to execute it more often. Not only is memory freed more rapidly, but this also leads to shorter GC pauses(the period where javascript execution stops to let the garbage collector do his job, which is sometime noticeable during heavy animations).
    • All those improvements are reflected in the about:memory page, which is now able to tell how much memory a particular Web page or the browser’s own UI, is using.

    More frequent updates and detailed explanations of the memshrink effort are posted on Nicholas Nethercote’s blog.

    Faster Javascript Parsing

    A javascript parser is the part of the browser that reads the javascript before it gets executed by the javascript engine. With modern Web applications such as Gmail or Facebook sending close to 1Mb of javascript, being able to still read all of that code instantly matters in the quest of responsive user experience.
    Thanks to Nicholas’s work, our parser is now almost twice as fast as it used to. This adds up well with our constant work to improve the execution speed of our javascript engine.

    First Steps of Azure

    After the layout engine (Gecko) has computed the visual appearance (position, dimension, colors, …) of all elements in the window, the browser asks the Operating System to actually draw them on the screen. The browser needs an abstraction layer to be able to talk to the different graphics libraries of the different OSes, but this layer has to be as thin and as adaptable as possible to deliver the promises of hardware acceleration.
    Azure is the name of the new and better graphics API/abstraction layer that is going to gradually replace Cairo in hardware accelerated environments. In Aurora 7, it is already able to interact with Windows 7′s Direct2D API to render the content of a <canvas> element (in a 2D context). You can read a detailed explanation of the Azure project and its next steps on Joe Drew’s blog.

    Other Improvements

    HTML

    Canvas

    • Specifying invalid values when calling setTransform(), bezierCurveTo(), or arcTo() no longer throws an exception; these calls are now correctly silently ignored.
    • Calling strokeRect with a zero width and height now correctly does nothing. (see bug 663190 )
    • Calling drawImage with a zero width or height <canvas> now throws INVALID_STATE_ERR. (see bug 663194 )
    • toDataURL() method now accepts a second argument to control JPEG quality (see bug 564388 )

    CSS

    MathML

    • XLink href has been restored and the MathML3 href attribute is now supported. Developers are encouraged to move to the latter syntax.
    • Support for the voffset attribute on <mpadded> elements has been added and behavior of lspace attribute has been fixed.
    • The top-level <math> element accepts any attributes of the <mstyle> element.
    • The medium line thickness of fraction bars in <mfrac> elements has been corrected to match the default thickness.
    • Names for negative spaces are now supported.

    DOM

    • The File interface’s non-standard methods getAsBinary(), getAsDataURL(), and getAsText() have been removed as well as the non-standard properties fileName and fileSize.
    • The FileReader readAsArrayBuffer() method is now implemented. (see bug 632255 )
    • document.createEntityReference has been removed. It was never properly implemented and is not implemented in most other browsers. (see bug 611983 )
    • document.normalizeDocument has been removed. Use Node.normalize instead. (see bug 641190 )
    • DOMTokenList.item now returns undefined if the index is out of bounds, previously it returned null. (see bug 529328 )
    • Node.getFeature has been removed. (see bug 659053 )

    JavaScript

    Net

    • WebSockets are now available on Firefox Mobile. (see bug 537787 )

    console API

    • Implement console.dir(), console.time(), console.timeEnd(), console.group() and console.groupEnd() methods.
    • Message logged with console.log before the WebConsole is opened are now stored and displayed once the WebConsole is opened.

    (see the Web Console page in the Wiki)

    Web Timing

  4. Introducing BrowserID – easier and safer authentication on the web

    • by Robert Nyman and Chris Heilmann • Identity • 15 comments

    Security on the web is more important than ever. Almost weekly reports of exploits of information and leaks into the public make it hard for a lot of people to trust the internet.

    One of the main annoyances is that every service expect us to have a login and password. As we use lots of services this means we have to remember a lot of login names and passwords. People deal with this in various ways. The most dangerous is using a simple password across different services. Another way is to not bother remembering your secure password and instead re-set it every time you come back to the site you want to access by going through a verification by email. This could also be a very dangerous approach – especially when the site you log in to sends your password as plain text rather than forcing you to create a new one. In any case, you spend a lot of time running in circles between you, the site you want to access and your email client.

    There were a few ideas in the past how to work around the issue of logins and passwords. OpenID was the most ambitious one, but failed to get traction in the main market as having a URL as your identifier seemed alien to a lot of end users.

    Taking the lessons and learnings from the mistakes of OpenID and other approaches Mozilla Labs is now proposing BrowserID which moves from domains and sites to emails as your main identifier. In essence, we promote the “password recovery” mechanism of the traditional login approach to your main point of access.

    What is BrowserID?

    BrowserID aims to offer you one single log-in to web sites and services, connected through your e-mail address (with the option to add more than one e-mail to the same account). The core idea is that you will always remember your e-mail address instead of a made-up user name or URL.

    The main pillars of BrowserID are:

    • Ease of use
    • Security
    • Cross-browser implementation
    • Decentralized, web-wide validation
    • Improved experience in future browsers
    • Respecting the privacy of the user

    Using one e-mail address and a master password, you only need to activate and verify your account once. As BrowserID is implemented with the Verified E-mail Protocol it has built-in security. Furthermore it offers a verification service to check against.

    It works cross-browser, both on desktop and mobile, and it’s decentralized so that anyone can chose to implement it on their web site. Respecting user privacy is a very important factor for Mozilla. Therefore no information is shared with any service about your BrowserID usage (check the BrowserID Privacy statement for more information).

    What makes it even more enticing in the long run is that BrowserID could be implemented natively in the web browser, for example through the URL bar, where the user could choose to log in/out. This will make it an even more secure measure against phishing and other attacks, and give end users the most consistent and reliable experience.

    Try it out

    If you want to try an example, you can go to the TextChannels web site, create a BrowserID account and sign in with it.

    After you have created a BrowserID account at TextChannels, you can go to our other test web site and see how easy the experience is when you have a BrowserID account.

    Here is a video explaining the procedure:

    How to implement BrowserID

    If you want to use BrowserID in a web site, you have to go through three main steps:

    1. Enable BrowserID
    2. Identify the user
    3. Verify the User’s Identity

    Enabling BrowserID is quite easy: simply include the BrowserID JavaScript in your web page. Then add an event handler to a sign in button in your web page. This button will be used to identify the user. When that is done, you need to verify that user’s identity on the server-side. This can be easily done through the BrowserID verification service.

    Here’s some complete sample code:

    <img id="sign-in" src="https://browserid.org/i/sign_in_green.png" alt="Sign in">
 
<script src="https://browserid.org/include.js"></script>
<script>
  document.getElementById("sign-in").addEventListener("click", function () {
    navigator.id.getVerifiedEmail(function(assertion) {
      if (assertion) {
          /*
              User has successfully selected an email
              address they control to sign in with.
          */   
      } else {
          // The user is not logged in
      }
    });
  }, false);
</script>

    When you successfully received the assertion, send a request to https://browserid.org/verify with two GET parameters. For instance:

    $ curl "https://browserid.org/verify?assertion=<ASSERTION>&audience=mysite.com"
    {
  "status": "okay",
  "email": "lloyd@mozilla.com",
  "audience": "mysite.com",
  "valid-until": 1308859352261,
  "issuer": "browserid.org:443"
}

    How does it work?

    If you want to delve deeper into the flow and inner workings of BrowserID, check the How BrowserID Works article.

    BrowserID is experimental – help us

    Please note that while Mozilla Labs is putting a lot of work and thought into BrowserID, its current state is experimental. That means that it is not recommended to use in any real-world production web sites at this moment.

    BrowserID is something Mozilla believe to be very beneficial to the web, but we need your help! Please try BrowserID out as a user, play around with the code and give us feedback! We are working on making this a great asset for users and developers alike, and any input we get will make it easier and faster to reach that goal!

  5. Firebug 1.8 New Features

    • by Jan Odvarko • Firebug • 13 comments

    Firebug 1.8 compatible with Firefox 5.0 has been released and I would like to get this opportunity and introduce some new features in this version.

    Firebug 1.8 has been also uploaded to AMO, but it can take some time to appear.

    Firebug

    First of all, check out the following compatibility table:

    console.timeStamp()

    There is a new API that can be used to create time-stamps during Javascript execution and compare them together with HTTP traffic timing on the timeline in the Net panel: console.timeStamp();

    See detailed description of this feature with examples how to use it.

    IP Address displayed in the Net Panel

    The Net panel displays remote & local IP address + port number for each request. There are two additional columns, see the screen-shot:

    HTML Preview Reloaded

    This feature is back and better than before. Now you can adjust height of the preview by drag-and-drop to see more or less content as necessary.

    Improved Script Location List

    Script location list available in the Script panel adjusts its size automatically according to the screen size and uses scroll-bar as needed. This makes easier for the user to pick up the right script.

    Command Line Content Persistence

    Command line content is now persistent across reloads. This feature allows to quickly execute the same expression on different pages. This is one of many little details that make Firebug the indispensable tool.

    New DOM Panel Options

    The DOM panel has two new options:

    • Show Own Properties Only check if you don’t want see the prototype chain for objects
    • Show Enumerable Properties Only check if you want to see only enumerable properties

    CSS Panel Color Tooltips

    A tooltip with color preview is displayed for colors specified in various formats. Supported formats are: hex, rgb, rgba, hsl and hsla.

    Shortcuts for Changing CSS values

    Firebug is great when tweaking CSS of the current page to perfection. Now, there are also new keyboard shortcuts for changing CSS values (numbers).

    • Ctrl+Up/Down increases/decreases by 0.1
    • Shift+Up/Down increases/decreases by 10

    Better Support for External Editors

    As you might know Firebug allows to configure and open an external editor (or IDE). There has been two arguments you could pass to such editor:

    • %url URL of the file (if %url is not present, %file will be added by default)
    • %file Path to the local file (or to the temporary copy)

    Firebug 1.8 introduces a new %line argument that allows to open the external editor scrolled at the right position (according to the current scroll position in the the Script panel).

    • %line Line number

    Box Sizing Exposed

    CSS3 introduced a new property called box-sizing, which allows the user changing the box model for an element and thereby influence element layout. Value of this property is now exposed in the Layout side panel.

    Stay Tuned!

    Honza

  6. Ask MDN: Our experts are ready to answer your questions

    • by Rob Hawkes • Ask MDN, Event, HTML5, JavaScript, Learning, MDN • 8 comments

    [Update] The panel of experts and time of the first event have been added below.

    Something amazing is starting next week. No, not pay day. It’s more important than that. Got it yet? No? It’s Ask MDN, silly! Still no idea what that is? Don’t worry, it’s new and I’m here to tell you all about it.

    Introducing Ask MDN

    Ask MDN is a new initiative from MDN and the Developer Engagement team here at Mozilla.

    For one hour a week on Twitter we will get a panel of experts together to answer your questions about a specific topic related to Web development.

    Every week we choose a different topic, which will be announced in advance so you have plenty of opportunity to send in a question for our experts (who also change each week).

    After each week we will archive the questions and answers so you can search through them and continue learning long into the future. We see this as being just as valuable a resource for learning as the documentation is on MDN.

    Engaging with the developer community on Twitter

    We’re starting Ask MDN because we believe that there isn’t much help for developers on Twitter outside of questions and answers between friends.

    With Ask MDN we want to bring together the developer community and our long-standing relationship with experts. We want to make it super easy to get a trusted and valued opinion on something that’s been bugging you, no matter how simple.

    Announcing the first topic: HTML5 gaming and creative JavaScript

    The first Ask MDN hour on Twitter is next week and it will be focussing on HTML5 gaming and creative JavaScript (animations, graphics, etc).

    We’ve already got a great panel of experts lined up ready to answer your questions. They include game developers, authors, JavaScript ninjas, and Flash heavy-weights (there is a still a lot that we can learn from the Flash guys).

    We’ll announce the next topic after the HTML5 gaming hour is over.

    When and where?

    The live HTML5 gaming and creative JavaScript Q&A will take place on Friday the 29th of July at 6pm in the UK (BST), and will be moderated through the @AskMDN Twitter account. Make sure to follow that account to keep up-to-date with what’s happening.

    We chose 6pm in the UK because it’s a time that the majority of the world will be able to access; it’s morning in the US, and evening in Europe. We appreciate that this isn’t perfect for everyone, but we haven’t gotten around to building a time machine just yet.

    The first event will occur at the following times around the world:

    • 10am in San Francisco (PDT)
    • 1pm in New York (EDT)
    • 7pm in Paris, Berlin and Madrid (CEST)

    Find the time where you live to make sure you don’t miss out.

    Who are the experts?

    We’re really proud to bring you an astounding panel of experts, each carefully chosen to give a fascinating insight into the tech surrounding HTML5 gaming and creative JavaScript.

    You don’t get a chance like this often, so make sure you submit a question to the panel.

    Seb Lee-Delisle

    Seb (@seb_ly) is an internationally recognised creative coder best known for his award-winning Flash work. He has recently been teaching developers the delights of creative JavaScript through his workshops in the UK and US.

    Seb was recently interviewed as one of our People of HTML5.

    Rob Evans

    Rob (@IsogenicEngine) is the developer behind Isogenic Engine, one of the most promising HTML5 gaming engines out there today.

    Dominic Szablewski

    Dominic (@phoboslab) is the developer behind the Impact HTML5 gaming engine, one of the most popular publicly-accessible engines out there right now.

    Andreas Røsdal

    Andreas (@andreasrosdal) is the developer behind Freeciv.net, which is a HTML5 version of the strategy game Freeciv.

    Tom Schuster

    Tom (@evilpies) is a core contributor to Mozilla’s SpiderMonkey JavaScript engine. His knowledge with JavaScript performance and optimisation will be invaluable.

    Michal Budzynski

    Michal (@michalbe) is the developer behind onGameStart, the first large-scale HTML5 gaming conference in the world.

    Benoit Jacob

    Benoit (@BenoitJacob) is a Software Developer here at Mozilla who works on graphics and WebGL. As a result of this he has in-depth knowledge about hardware acceleration in these kinds of environments.

    Rob Hawkes

    Rob (@robhawkes) is me. I am a Technical Evangelist at Mozilla with experience developing games and creative experiments with HTML5 and JavaScript. I will be on the panel, but my main role will be moderating the discussion and keeping things running smoothly.

    Getting involved

    It’s going to be a great experience so I encourage you to get involved by following @AskMDN on Twitter.

    Submit your questions about HTML5 gaming and creative JavaScript in an @ reply to our account. Nearer the hour itself we’ll announce a hash-tag that can also be used to submit questions.

    Got a topic that you want us to cover in a future Ask MDN hour? Send it as an @ reply on Twitter, or reply in the comments below.

    Taking things forward

    This is just the beginning. We have big plans for Ask MDN, but we won’t be able to do any of it without you.

    Get involved today and help us make the Web a better place.

  7. People of HTML5: Mr. Doob

    • by Chris Heilmann • HTML5, People of HTML5 • 4 comments

    HTML5 needs spokespeople to work. There are a lot of people out there who took on this role, and here at Mozilla we thought it is a good idea to introduce some of them to you with a series of interviews and short videos. The format is simple – we send the experts 10 questions to answer and then do a quick video interview to let them introduce themselves and ask for more detail on some of their answers.

    Mr. Doob Today we feature the elusive Mr Doob. Ricardo is a man that always crops up when the talk is about impressive technology demos. Starting with the ball pool, continuing with the beautiful Harmony and culminating in The Wilderness Downtown and Three Dreams of Black he continuously got commissioned to do things Google showed off at their big events.

    Ricardo values his privacy, so he didn’t want to be interviewed on camera. We respect this, and instead only give you his answers in text.

    1) Welcome. It seems to me there is not a single conference or article about the use of modern web technologies that doesn’t feature work by you. You also seem to have appeared out of nowhere. What’s the secret? What is your background?

    My brother introduced me to the demoscene at the age of 12 and slowly learnt my way creating graphics and modelling lowpoly 3d scenes to be rendered in realtime. So far I’ve done more than 50 demos in my spare time. Only on the last demos I did the code part though. My role was always being the designer, illustrator, 3d modeller and/or director.

    During that time I was working as HTML/PHP developer and later, when I moved to London, I started working as Designer/Flash developer. At this point I was slowly becoming a graphics programmer and I saw the chance of messing with the tricks I saw being used in all these demos and also finally putting into practice my own ideas for effects. I started uploading the experiments on the mrdoob website with no real reason. That turned out to be a great way for attracting interesting projects that allowed me to keep experimenting.

    2) A lot of the work you’ve done is experimental and very much on the bleeding edge of what browser technologies can do. Live products on the web however should not frustrate users and tell them to upgrade their browser or give them a broken interface. What is your stance on progressive enhancement and polyfills for older environments?

    Well, the demoscene is way worse. If you don’t have the newest graphics card, chances are you can’t run the new demos being released. You have to upgrade your graphics card every few months. The browser world is simpler, you just need to download a piece of software which you don’t even have to pay for. And, now that browsers seem to be adopting auto-update mechanisms, feels like this problem will finally go away. However, I always develop on fairly low-end computers (MacMini/MacBook) so I can avoid the demoscene problem.

    As per progressive enhancement… if I had to include some kind of backwards support in the experimentation process the result will for sure get affected.

    Not only the code wouldn’t be as simple but, in some cases, I wouldn’t even start because it wouldn’t be as fun. With my current approach, some users won’t see anything or get errors, but there is a chance that some of these will upgrade to a modern browser in order to play with the experiment. Which, not only helps me, but the rest of developers and, I want to think, also the whole web.

    3) Whenever a new demo comes out and it only works in a certain browser without gracefully giving others a diminished experience I get the feeling we are not doing a good job advocating open technologies. After all no clothing store would display dresses in edge case sizes or with missing buttons. Do you agree? Or is it OK to build a demo for one single environment and call it a “web technology showcase”?

    I personally try to make sure all the projects I do work on as many modern browsers as possible and I try to avoid technologies that have only been implemented in just one vendor. There are cases, however, that a experiment may not work in a browser because the Javascript engine isn’t fast enough.

    These demos make the problem evident and if the browser developers notice it they’ll work to make sure their engine is fast enough to match the other browsers with that demo.

    4) Looking at similar groundbreaking work like you’ve done in the demo scene I found that the really successful groups tend to build their own tools for edge case tasks. When Farbrausch for example released their 96KB 3D Shooter game .kkrieger they soon after also released werkkzeug to create similar games and animations easily. Do you have some awesome tools up your sleeve? What is your development environment?

    No tool yet. But now that the Filesystem API is being adopted I’m starting to seriously consider it.My development environment is, for some, surprisingly (and disappointingly) simple. I use Ubuntu’s default text editor gedit with a dictionary-based code completion plugin. I also have a plugin enabled that shows unneeded spaces at the end of the lines – I’m a bit obsessed with clean and spaced code.

    5) What product are you most proud of and why? Who inspires you? Are there any cool web technology demos that made you go “wow”?

    I don’t know why but I’m unable to be proud of anything I do. There is always something to improve, and that thinking makes me almost be ashamed when talking about my work.I get inspired by anyone that spends an admirable amount of time in creating something different or unique. Thankfully, the list of names would be endless. Also, open source as a whole inspires me, not only libraries but the linux world in general. The fact that you can see the code other people are committing pushes you to continue doing your part. As per impressive technology demos, this Path Tracer and the latest experiments by the miaumiau guys are good examples. I wish I knew how to do these things :)

    6) Are there parts of the technology implementation of the HTML5 standard do you still consider terribly broken? For example the web version of Angry Birds uses Flash for the audio – why is that?

    I won’t get tired of saying that <canvas> should bring the “darker” blending mode back…I haven’t played with <audio> much yet, but I haven’t heard good things about it. Hopefully the upcoming Audio APIs will sort this out. They first need to agree on an API though.

    7) A lot of the “wow” that we are shown these days in open technologies has been done in Flash before. You hear a lot “this is not Flash, even when it looks like it”. Are we just reverse engineering what the closed technology world did in the past or is there some re-use and knowledge sharing going on?

    And a lot of the “wow” that was done in Flash was done before in MSDOS and Amiga (yes, sadly the gap was that big). But we managed to bring to the platform some of the tricks that the Amiga people found during all these years. With WebGL now the web is finally catching up with modern graphic pipelines. The problem will now be that website production will become more costly. A bit like the videogame world where they spend many months (or years) in production.

    8) Let’s quickly talk about performance. When I watch 3 Dreams of Black on my MacBook Air it sounds like my vacuum cleaner and the battery drains very quickly. What are the most resource hungry technologies in the open stack and what could be done about this? Will there be adaptive technologies that for example give a higher poly version for beefy machines and low poly versions for slower ones?

    With video we have something like that in Silverlight and Flash when it comes to streaming. Is there work done in open technology we can look forward to?There is a tiny detail to consider there, I used to have a MacBook Pro with an ATI graphics card and the fan would get noisy the second it started to render a few polygons. Now I use a MacBook with a NVIDIA and I hardly hear the fan. The GPU use is the same, but just happens that the graphics card was designed to be quieter. If you happen to have such a card the performance issue decreases considerable – as there is no annoying noise.

    However, we should indeed optimise our code and only render what’s required when it’s needed. As soon as WebGL lands in Android/iOS devices we’ll probably start to seriously considering serving low-poly objects to such devices.

    9) Resources. Let’s say some gifted kid coming from school right now wants to be Mr.Doob and bring the awesome. Where can you learn? What should you concentrate on?

    Not sure… I guess one needs to spend a lot of time tinkering with code, experimenting and creating projects just for fun. While you’re in such a loop ideas arise constantly and the only thing left is spending more and more time turning these ideas into life.

    And now that we’re moving to HTML5/Javascript, you only need to right click and view the source. I still can’t even begin to imagine the ramifications of this simple fact.

    10) What’s next? Anything cool coming our way we can look forward to? Also, what do you want? What do you think keeps us from going really all in when it comes to open web technology?

    Well, right now I’m still trying to “solve” three.js. It does feel like an endless task right now, but I’m confident there is a way. With libraries like stats.js, tween.js and sequencer.js I have proven myself that libraries can reach a state when do not require more features.

    Lately I’m on a personal crusade on creating open source libraries and tools that make the web development possible without the need of proprietary tools and operating systems. I have a ton of .psd and .fla files that I can’t open now that I run Linux. I would like to avoid such scenarios to happen again.

  8. HTML5 Battles still to be won – a talk at Open Web Camp III

    • by Chris Heilmann • Conferences, HTML5 • 3 comments

    Last Saturday was the Open Web Camp at Stanford University in Palo Alto. Around 300 developers, designers and project managers signed up to hear up-to-date information about web technologies, accessibility and design. The event was free and, although it started very early for Silicon Valley standards, very well attended.

    Mozilla’s contribution (other than being a sponsor) was a keynote on the merits of HTML5 for web development and a call to arms or developers to ask for the implementation of a few missing parts.

    The slides are available on Slideshare and here:

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

    There is much more great content that was released at the conference – simply look for the owc3 hashtag on Twitter or the same tag on the web.

  9. Congratulations to our June Dev Derby winners!

    • by Jay Patel • Challenge, CSS, Demo Studio, Dev Derby, Featured Article, Web Developers • 2 comments

    We kicked off our series of monthly developer challenges in June to see what Web developers could do with CSS3 Animations. Our first ever Dev Derby was a huge success with almost 30 entries and a variety of demos that brought action to the Web without JavaScript. The results have been awesome!

    Early fan favorites included Rofox CSS3 and CSS Nyan Cat, which remain among the most viewed on Demo Studio.

    While all the demos were amazing, we had a tough task in narrowing down the submissions to 5 finalists based on our judging criteria. After careful review and feedback, the following demos surfaced as candidates for our final round of voting:

    Animated menu icons
    Auto-run photo album
    BATTLEFIELD CSS3
    CSS Tricks
    Plan B – Retro Demo

    With those 5 demos left in the running, we brought in our expert judges and a few members of the Mozilla team to vote on the finalists. Judges rated each demo on a scale of 1 – 5 across the following dimensions:

    • Technology – Does the demo showcase the power of open Web technologies?
    • Originality – How innovative and unique is the demo?
    • Aesthetics – How good is the visual design and interaction experience?
    • Practicality – How useful is this demo in enhancing the Web today?

    It was a close race and we’re excited to announce that the winners of the June Dev Derby are:

    1st Place: CSS Tricks by Mircea Piturca.
    2nd Place: Animated menu icons by Koen Hendrix.
    3rd Place: Plan B – Retro Demo by matt64.

    Runners-up:
    Auto-run photo album
    BATTLEFIELD CSS3

    Thanks to everyone that submitted their awesome demos for the June Dev Derby. Up next we have HTML5 video for July, History API for August and Geolocation for September. We look forward to seeing even more great submissions for July and beyond! Hack on.

  10. HTML5 and CSS3: Exploring Mobile Possibilities – presentation at London Ajax Mobile Event

    • by Robert Nyman • Conferences, CSS, Geolocation, HTML5, JavaScript, Mobile • 2 comments

    In the beginning of July, I was attending and giving a presentation at the London Ajax Mobile Event about possibilities offered by HTML5 and CSS3 when it comes to developing mobile web sites and applications.

    Short introduction of me

    Being my first post here at Mozilla Hacks, I thought I’d start by briefly introducing myself first: My name is Robert Nyman and I’ve recently joined Mozilla as a Technical Evangelist, talking about HTML5, the Open Web and how we can help web developers. I’ve been working since 1999 with Front End development for the web, and I regularly blog at http://robertnyman.com, tweet as @robertnyman and love to travel and meet people!

    The London Ajax Mobile Event

    The conference took place at the Vodafone headquarters in London, arranged by Sitepen CEO and Dojo co-founder Dylan Schiemann. It was packed to the brim with speakers, from early morning raging on into the night. Various talks were given on a number of topics – from mobile apps and implementations to a more experimenting approach and future visions.

    My presentation

    You can see the slides from my HTML5 and CSS3: Exploring Mobile Possibilities below or download the slides at SlideShare

    The aim of my talk was to give both an introduction and reiterate on some of the important options we have when developing web sites, especially when it comes to the mobile world. With the CSS3 field I covered CSS Media Queries and Flex Box and the options they give us in creating more flexible layouts and presentation alternatives. I also spoke about CSS Transitions and Animations and how they can assist in an easy manner to get nice effects, that are also hardware-accelerated on certain devices.

    When it comes to the HTML5 part, I’m excited by all the new HTML5 form elements and how they can improve both user experience and the input of data. As support grows for this in web browsers, I believe it will make things a lot easier for both developers and end users.

    I briefly touched on link protocols, such as tel: and sms:, to trigger mobile-specific actions when activating a link, and then various useful APIs such as Web Storage, Offline Applications, History API and Geolocation (not all necessary official HTML5 APIs, but usually used in conjunction with them).

    I ended the talk with touching on tool such as Steve Souders’ Mobile Perf bookmarklet and weinre, for remote debugging on mobile devices.

    You and mobile

    What I am interested in is if you are developing for a multitude of mobile and other devices, what you believe are the biggest obstacles as well as the most promising options. Any thoughts, please let me know!