1. 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

  5. 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.

  6. 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.

  7. HTeaML: A superbly traditional event for London Web developers

    • by Rob Hawkes • Event • No comments yet

    A new developer event is on the horizon for the lucky folks who live in and around London.

    HTeaML aims to be a light-hearted affair in which attendees will learn all about the latest Web technologies, whilst at the same time enjoying some scrumptious tea, coffee, and cake. What more would you want from a geek event?

    One of the biggest draws of HTeaML (aside from the yummy cake) is that it’s a much more accessible event. It won’t be held in a pub so you don’t need to be over-18 or comfortable with drinking culture to take part. The organisers believe that this is very important.

    It’s organised by Kat Thompson and Rob Hawkes (yes, that’s me), who are deep in planning-mode ready to bring on the awesome.

    Find out more about the event and have your say about the plans on Rob’s blog post about HTeaML.

  8. 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!

  9. 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.

  10. HTML5 APIs – Where No Man Has Gone Before! – Presentation at Gotham JS

    • by Robert Nyman • Canvas, FileAPI, HTML5, Video, Web Developers, WebGL, WebSocket • No comments yet

    Last weekend I was in New York City to speak at the GothamJS conference and Mozilla also sponsored it. It was a nice event with about 200 attendees, taking place in the NYIT Auditorium on Broadway.

    The event was one-track with 8 speakers, and personally I always prefer when it’s just one track for follow-up discussions and that everyone have seen and heard the same thing. The topics were ranging broadly between script loaders and HTML5 in one end, and voice-controlled telephony applications in the other.

    My presentation

    My talk was about HTML5 APIs in general, to give an introduction to them but also to inspire people to try things out and also give feedback to both working groups and web browser vendors about current implementations.

    Slides can also be downloaded at SlideShare.

    Additionally to the APIs covered in my London Ajax Mobile Event presentation, I went through Web Sockets, File API, HTML5 video, canvas and WebGL. Also, if you are more interested in the <canvas> element, my colleague Rob Hawkes recently released the Foundation HTML5 Canvas book.

    What I especially liked talking about is services like vid.ly which helps you take control over the problem of different video codec support in different web browsers, by storing various formats and then deliver the most suitable one depending on the web browser/device accessing it.

    Another favorite is Universal Subtitles, which is an excellent tool for everyone to be able to add subtitles to a video clip, empowering users with varying language skills to take part of a video and its content and sharing it with the world.

    An option to make the content of a web site richer, there is Popcorn.js to sync key events in the video playing to what kind of text or other information you want to present to go with that. To complement that, the Butterapp is an editor to create that kind of content syncing, currently in alpha.

    I also mentioned videograbber for taking easy video screenshots in the web browser.

    Dev Derby <video> challenge

    I also want to take the opportunity to remind you that Mozilla Dev Derby has a challenge for what you can accomplish with the <video> that goes till the end of July, so please submit anything if you have a good idea!