Mozilla

Articles

Sort by:

View:

  1. Announcing the winners of the March 2013 Dev Derby!

    This past March, some of the most creative web developers out there showed us what they could do for the mobile Web in the March Dev Derby contest. After looking through the entries, our our three expert judges–Craig Cook, Franck Lecollinet, and Guillaume Lecollinet–decided on three winners and two runners-up.

    Not a contestant? There are other reasons to be excited. Most importantly, all of these demos are completely open-source, making them wonderful lessons in the exciting mobile experiences you can create today using only the skills you already have.

    Dev Derby

    The Results

    Winners

    Runners-up

    The March Derby saw some great entries, from games to productivity applications to wonderfully useful location-based services and more. Please join me in congratulating these winners and all of our contributors for making the wireless world a better and more exciting place.

    Want to get a head start on an upcoming Derby? We are now accepting demos related to getUserMedia (May) and WebGL (June). Head over to the Dev Derby to get started.

  2. Localization in Action, part 3 of 3 – A Node.js holiday season, part 11

    This is episode 11, out of a total 12, in the A Node.JS Holiday Season series from Mozilla’s Identity team. It’s the last part about localization, hopefully making you feel all ready to handle that now!

    Using Our Strings

    So first we added the i18n-abide module to our code, then our Localization (L10n) team did some string wrangling, now we’ve got several locales with translated strings…

    Let’s get these strings ready for Node.js and see this puppy in action!

    The next step is that we’ll need your PO files, typically in a file system like this:

    locale
      en
        LC_MESSAGES
          messages.po
      de
        LC_MESSAGES
          messages.po
      es
        LC_MESSAGES
          messages.po

    We need a way to get strings from our PO files into our application at runtime. There are a few ways you can do this:

    1. Have server side strings and the gettext function provided by i18n-abide will work it’s magic.
    2. Have client side strings and you’ll include a gettext.js script in your code. This is distributed with i18n-abide.

    Both of these methods require the strings to be in a JSON file format.
    The server side translation loads them on application startup, and the client side translation loads them via HTTP (or you can put them into your built and minified JavaScript).

    Since this system is compatible with GNU Gettext, a third option for server side strings is to use node-gettext. It’s quite efficient for doing server side translation.

    We’ll use the first option in this blog post, as it is the most common way to use i18n-abide.

    compile-json

    So, how do we get our strings out of the PO files and into JSON files?

    Our build script is called compile-json.

    Assuming out files are in a top level directory locale of our project, and we want the .json files to go into static/i18n, we’d do this:

    Example:

    $ mkdir -p static/i18n
    $ ./node_modules/.bin/compile-json locale static/i18n

    And we get a file structure like:

    static
      i18n
        en
          messages.json
          messages.js
        de
          messages.json
          messages.js
        es
          messages.json
          messages.js

    compile-json loops over each of our .po files and calls po2json.js on it, producing .json and .js files. po2json.js is another program provided by i18n-abide.

    If we take the Spanish messages.po we have so far from these blog posts, we’d see:

    # Spanish translations for PACKAGE package.
    # Copyright (C) 2013 THE PACKAGE'S COPYRIGHT HOLDER
    # This file is distributed under the same license as the PACKAGE package.
    # Austin King <ozten@localhost>, 2013.
    #
    msgid ""
    msgstr ""
    "Project-Id-Version: PACKAGE VERSION\n"
    "Report-Msgid-Bugs-To: \n"
    "POT-Creation-Date: 2012-06-24 09:50+0200\n"
    "PO-Revision-Date: 2013-04-24 16:42-0700\n"
    "Last-Translator: Austin King <ozten@nutria.localdomain>\n"
    "Language-Team: Spanish\n"
    "Language: es\n"
    "MIME-Version: 1.0\n"
    "Content-Type: text/plain; charset=UTF-8\n"
    "Content-Transfer-Encoding: 8bit\n"
    "Plural-Forms: nplurals=2; plural=(n != 1);\n"
     
    #: /home/ozten/abide-demo/views/homepage.ejs:3
    msgid "Mozilla Persona"
    msgstr "Mozilla Personidada"

    which would be converted into

    messages": {
          "": {
             "Project-Id-Version": " PACKAGE VERSION\nReport-Msgid-Bugs-To: \nPOT-Creation-Date: 2012-06-24 09:50+0200\nPO-Revision-Date: 2013-04-24 16:42-0700\nLast-Translator: Austin King <ozten@nutria.localdomain>\nLanguage-Team: German\nLanguage: de\nMIME-Version: 1.0\nContent-Type: text/plain; charset=UTF-8\nContent-Transfer-Encoding: 8bit\nPlural-Forms: nplurals=2; plural=(n != 1);\n"
          },
          "Mozilla Persona": [
             null,
             "Mozilla Personidada"
          ]
       }
    }

    So we can use these .json files server side form Node code, or client side by requesting them via AJAX.

    The static directory is exposed to web traffic, so a request to /i18n/es/messages.json would get the Spanish JSON file.

    This static directory is an express convention, you can store these files where ever you wish. You can serve up static files this via Node.js or a web server such as nginx.

    Note: You don’t need the .PO files to be deployed to production, but it doesn’t hurt to ship them.

    Configuration

    i18n-abide requires some configuration to decide which languages are supported and to know where to find our JSON files.

    As we saw in the first installment, here is the required configuration for our application

    app.use(i18n.abide({
      supported_languages: ['en-US', 'de', 'es', 'zh-TW'],
      default_lang: 'en-US',
      translation_directory: 'static/i18n'
    }));
    • supported_languages tells the app that it supports English, German, Spanish, Chinese (Traditional).
    • The translation_directory config says that the translated JSON files are under static/i18n.
    • Note that translation_directory is needed for server side gettext only.

    We explained in the first post that i18n-abide will do its best to serve up an appropriate localized string.

    It will look at supported_languages in the configuration to find the best language match.

    You should only put languages in supported_languages, where you have a locale JSON file ready to go.

    Start your engines

    Okay, now that configs are in place and we have at least one locale translated, let’s fire it up!

    npm start

    In your web browser, change your preferred language to one which you have localized.

    Now load a page for your application. You should see it translated now.

    For a real world example, here is Mozilla Persona in Greek. So, cool!

    gobbledygook

    If you want to test your L10n setup, before you have real translations done, we’re built a great test locale. It is inspired by David Bowie’s Labyrinth.

    To use it, just add it-CH or another locale you’re not currently using to your config under both supported_languages as well as the debug_lang setting.

    Example partial config:

    app.use(i18n.abide({
      supported_languages: ['en-US', 'de', 'es', 'zh-TW', 'it-CH'],
      debug_lang: 'it-CH',
      ...

    Now if you set your browser’s preferred language to Italian/Switzerland (it-CH), i18n-abide will use gobbledygook to localize the content.

    This is a handy way to ensure your visual design and prose work for bi-directional languages like Hebrew. Your web designer can test their RTL CSS, before you have the resources to create actual Hebrew strings.

    Going Deeper

    We’ve just scratched the surface of i18n and l10n. If you ship a Node.js based service in multiple locales, you’ll find many gotchas and interesting nuances.

    Here is a heads up on a few more topics.

    String interpolation

    i18n-abide provides a format function which can be used in client or server side JavaScript code.

    Format takes a formatted string and replaces parameters with actual values at runtime. This function can be used in one of two flavors of parameter replacements.

    Formats

    • %s – format is called with a format string and then an array of strings. Each will be replaced in order.
    • %(named)s – format is called with a format string and then an object where the keys match the named parameters.

    You can use format to keep HTML in your strings to a minimum.

    Consider these three examples

    <%= gettext('<p>Buy <a href="/buy?prod=blue&amp;tyep=ticket">Blue Tickets</a> Now!</p>') %>
    <p><%= format(gettext('Buy <a href="%s">Blue Tickets</a> Now!'), ['/buy?prod=blue&amp;tyep=ticket']) %></p>
    <p><%= format(gettext('Buy <a href="%(url)s">Blue Tickets</a> Now!'), {url: '/buy?prod=blue&amp;tyep=ticket'}) %></p>

    In the PO file, they produce these strings:

    <p>Buy <a href=\"/buy?prod=blue&amp;tyep=ticket\">Blue Tickets</a> Now!</p>"
    msgid "Buy <a href="%s">Blue Tickets</a> Now!"
    msgid "Buy <a href="%(url)s">Blue Tickets</a> Now!"

    The first example has a paragraph tag that shows up in the PO file. Yuck. If you ever change the markup… you may have to update it in every locale!

    Also, look at that ugly URL.

    Reasons to use format:

    • Avoid confusing localizers who aren’t familiar with HTML and may break your code accidentally
    • Avoid maintenance issues

    The named parameters are nice, in that they are self documenting. The localizer knows that the variable is a URL. String interpolation is quite common in localizing software.

    Another example is runtime data injected into your strings.

    <p><%= format(gettext('Welcome back, %(user_name)s'), {user_name: user.name}) %></p></p>

    Avoid Inflexible Designs

    We need to put our L10n hats on early. As early as when we review the initial graphic design of the website.

    • Avoid putting text into images. Use CSS to keep words as plain text positioned over images.

    • Make sure CSS is bulletproof. An English word in German can be many times larger and destroy a
      poorly planned design.

    • Try this bookmarklet: Fauxgermanhausen das Pagen!

    Database-backed websites have already taught us to think about design in a systematic way, but designers may not be used to allowing for variable length labels or buttons.

    String Freeze

    Remember our build step to prepare files for localizers to translate? And in this post we learned about po2json.js for using these strings in our app… Well, this means we’re going to need to coordinate our software releases with our L10n community.

    Continuous deployment isn’t a solved problem with L10n. Either you have to block on getting 100%
    of your strings translated before deploying, or be comfortable with a partially translated app in some locales.

    L10n teams may need 1, 2 or even 3 weeks to localize your app, depending on how many strings there are. Schedule this to happen during the QA cycle.

    Provide a live preview site, so that localizers can check their work.

    Wrapping up

    In these three blog posts, we’ve seen how to develop a localized app with i18n-abide, how to add a L10n phase to our release build, and lastly, how to test our work.

    Localizing your website or application will make your site valuable to an even larger global audience.

    Node.js hackers, go make your services accessible to the World!

    Previous articles in the series

    This was part eleven in a series with a total of 12 posts about Node.js. The previous ones are:

  3. Web Payments with PaySwarm: Purchasing (part 3 of 3)

    The Promise of Web Payments

    The first and second articles in this series outlined how PaySwarm is designed to transmit and receive funds with the same ease as sending and receiving an email. The articles went on to explain how making the tools that have been traditionally only available to banks, Wall Street, and large corporations available to everyone can help reform our financial systems. The goal is not just one-click payments, but also to enable crowdfunding innovation, help Web developers earn a living through the Web, boost funding rounds for start-ups, and to advance initiatives that will lead to a more egalitarian society.

    This is the final article in a three part series on sending and receiving funds using the PaySwarm specification. This article will review some of the concepts in the first two articles and introduce the concepts of a purchase request, digital contract, and digital receipt. A tutorial will go on to explain how to perform a purchase via PaySwarm as well as how to download the digital receipt of sale. Code examples and video of the process are provided.

    Review: Identity

    As explained in the first article, the Web Keys specification provides a simple, decentralized identity solution for the Web based on public key cryptography. It enables Web applications to send messages that are encrypted and verifiable.

    The messages are marked up using the JavaScript Object Notation for Linking Data (JSON-LD). As the name suggests, JSON-LD is a way of expressing Linked Data in JSON. Both HTML documents and JSON-LD documents describe things and have links to other documents on the Web. The primary benefit of a JSON-LD document is that a machine can easily extract and perform basic reasoning over the information it contains without placing a large burden on its author.

    Web Keys coupled with JSON-LD provide the underlying identity and messaging mechanism used by PaySwarm to perform Web Payments.

    Review: Assets and Listings

    As explained in the second article, PaySwarm enables products and services to be listed for sale on the Web in a decentralized way. The specification allows content creators and developers to be in control of their own product descriptions and prices in addition to giving them the option to delegate this responsibility to an App Store or large retail website. The second article elaborated on the two basic concepts that are used to describe products and services for sale on the Web: assets and listings.

    An asset is a description of a product or service. Examples of assets include web pages, ebooks, groceries, concert tickets, dog walking services, donations, rights to transmit on a particular radio frequency band, and invoices for work performed. In general, anything of value can be modeled as an asset.

    A listing is a description of the specific terms under which an asset is offered for sale. These terms include: the asset being sold, the license that will be associated with the purchase, the list of people or organizations to be paid for the asset, and the validity period for the listing.

    Purchase Requests, Contracts, and Receipts

    So far this series has introduced a decentralized identity mechanism, a secure and verifiable messaging mechanism, and a decentralized mechanism for publishing products and services for sale. This article introduces the purchase request, the contract, and the receipt.

    A purchase request is sent to a PaySwarm Authority when a purchase is requested by the customer. It contains details about the asset and listing that the buyer would like to purchase. There are two ways a purchase request can be authorized:

    The first way is for the vendor to provide a customer with a purchase request to give to their PaySwarm Authority. Once the customer submits the purchase request, they can then use an interface provided by their PaySwarm Authority to view the potential contract and decide whether they agree to its terms.

    The second way a purchase request can be authorized by a customer is by digitally signing it using software running on a device like a personal computer or a cell phone. The purchase request can then be transmitted by this software to their PaySwarm Authority for processing. This approach allows the customer to use innovative third party applications that need to perform purchases on their behalf.

    A contract is an electronic document that expresses an agreement between all parties involved in a transaction. It contains the asset, digitally signed by the asset provider, and the listing, digitally signed by the vendor. A contract can be finalized in one of two ways:

    The first way a contract is completed is when an authorized purchase request is submitted to a PaySwarm Authority. If payment processing can occur without issue, then a contract for that purchase is completed and kept on record by the PaySwarm Authority.

    The second way to complete a contract requires a customer to digitally sign the contract before submitting it to a PaySwarm Authority. This approach allows a customer to fully review the terms of the contract using an interface that is not hosted by the PaySwarm Authority. If the customer agrees to the contract, their software digitally signs it. The digitally-signed contract can then be transmitted to their PaySwarm Authority using a variety of different mechanisms. This is particularly useful when the customer does not have access to the Internet, but the vendor from which they are purchasing does. An example of this is when a customer makes an in-store retail purchase with a PaySwarm-enabled mobile phone with no data plan. The phone could receive a contract from the vendor over NFC, digitally sign the contract on the phone, and transmit the signed contract back to the vendor over NFC. The contract would then be delivered to the customer’s PaySwarm Authority by the vendor and payment processing would be performed.

    A receipt is the result of a successful purchase. Typically, receipts are provided to a vendor by a PaySwarm Authority with the minimum amount of information necessary to prove that the sale of an asset to a particular customer was completed successfully. For a more comprehensive review of a purchase, a vendor or customer can request a full contract from their PaySwarm Authority. A contract is provided to buyers as a proof-of-purchase and for offline storage. It will contain all of the details proving the purchase occurred, even if the PaySwarm Authority that processed the purchase and/or the vendor go out of business or shut down for any reason.

    The video below shows a browser-based mechanism used to process a purchase request, contract, and receipt:

    The rest of this tutorial will demonstrate how to perform a console-based purchase where the customer constructs, signs, and transmits the purchase request to a PaySwarm Authority for processing. Code from the payswarm.js node module will be used throughout this tutorial. Specifically, it references the asset purchasing example. The payment processor will be the PaySwarm Developer Sandbox and the asset hosting service will be the PaySwarm Developer Listing Service.

    Performing the Purchase

    This tutorial assumes that you have already read the first and second articles in this series. In those articles, an identity was created via a PaySwarm Authority and a Web Key was associated with the identity for the purpose of creating digital signatures. The registered Web Key will be used to digitally sign the purchase request seen in this tutorial. An asset and listing were also published to the PaySwarm Developer Listing Service.

    The first step in performing a purchase is to retrieve the listing that indicates which asset is for sale. The getJsonLd() function in the payswarm.js library can be used to retrieve the listing data given a URL:

    var url = 
      'http://listings.dev.payswarm.com/mozhacks/html5-me-song#listing';
    payswarm.getJsonLd(url, {cache: true}, function(listing) {
      // do something with the listing
    });

    The code above simply fetches the listing from the given URL in JSON-LD format. The data could be expressed on the page as HTML+RDFa, which is then translated to JSON-LD and returned to the application. The listing data can then be used to construct a purchase request, digitally sign it, and deliver it to a PaySwarm Authority for processing. All of this is done below by calling the purchase() function in the payswarm.js library:

    // purchase the asset under the terms of the listing by 
    // digitally signing a purchase request and sending it 
    // to the PaySwarm Authority
    payswarm.purchase(listing, {
      // the Web Service that will process the purchase request
      transactionService: 'https://dev.payswarm.com/transactions',
      // the identity that is performing the purchase
      customer: 'https://dev.payswarm.com/i/IDENTITY',
      // this financial account will be the source for 
      // the payment funds
      source: 'https://dev.payswarm.com/i/IDENTITY/accounts/ACCOUNT',
      // the private key information used to digitally sign 
      // the purchase request
      privateKeyPem: publicKey.privateKeyPem,
      // the public key ID that will be associated with the 
      // digitally signed purchase request
      publicKey: publicKey.id,
      // log details of the transaction to the console
      verbose: true
    }, function(err, receipt) {
      // if err is null, the purchase was successful
      // do something with the receipt
      console.log('Receipt:', receipt);
      // the transaction ID can be used to download 
      // the complete contract
      console.log('Transaction ID:', receipt.contract.id);
    });

    The code above builds a purchase request using the listing data retrieved in the previous step. The purchase request also includes the financial account which will provide the funds for the purchase. It is then digitally signed using the buyer’s public key. The signed purchase request is then HTTP POSTed to the transaction processing web service on the PaySwarm Authority. If the asset, listing, license, and payment details in the contract are all valid, the PaySwarm Authority will process the payment and return a digitally signed receipt. The receipt will contain the transaction ID for the sale, which can then be used to retrieve the full contract for the sale.

    Downloading the Contract

    The contract for the sale can be downloaded and stored to be used as a proof-of-purchase. A utility provided with the payswarm.js library can be used to download the transaction by issuing a simple command:

    ./bin/payswarm url https://dev.payswarm.com/transactions/1.24.f3d
    

    The video below demonstrates what a console-based purchase looks like using the payswarm.js library:

    Conclusion

    This was the final article in this three part series on building PaySwarm-enabled websites and web applications. One of the primary goals of PaySwarm is to make transmitting and receiving funds on the Web as easy as sending and receiving an email. This is not just about one-click payments; it is also about using open standards to bring new and powerful tools to the general public that will breed competition and innovation.

    If you would like to keep up-to-date with the latest in Web Payments, join the Web Payments Community mailing list.

  4. Mozilla Persona for the non-web

    My good friend Nico Williams reckons that HTTP is the new TCP, and TCP the new IP. If this is the case, then perhaps the rest of this article isn’t worth reading. However, not every application – particularly in the slower-moving corporate world – is going to move to the web overnight, and even though off-line web-based applications continue to improve, some of us still prefer our thick-client mail readers, amongst other things. Further, remote logon protocols such as SSH, and file sharing protocols such as CIFS and NFS, don’t always have direct web equivalents.

    Now, Mozilla Persona solves a bunch of interesting authentication problems: it has the best properties of public key infrastructure (in particular, the server doesn’t need to share a key with the identity provider), without of some of its drawbacks (because certificates are short-lived, the revocation issue becomes less important). Another really nice property of Persona is that it doesn’t require you to initially authenticate in a particular way – one might use passwords, one time passwords, smartcards, PKIX certificates, Kerberos tickets, EAP, some combination of the above – and as long as your identity provider knows who you are and can issue a Persona certificate, you’re good to go.

    So, one might think: can we bring the benefits of Persona to non-web applications? We can. In the non-web world, many network protocols abstract away authentication using the Simple Authentication and Security Layer (SASL) or Generic Security Service Application Program Interface (GSS-API). We’re going to gloss over the details of these, suffice to say that in return for an application exchanging an arbitrary number of messages within its own protocol, the server is able to authenticate the client (and possibly vice versa). There may also be a shared key which can be used to encrypt or sign subsequent traffic.

    Protocols that can use SASL or GSS-API for authentication include the acronym soup of IMAP, SMTP, XMPP, LDAP, CIFS, NFS, SSH and even HTTP itself. So, if we profile Persona for SASL and GSS-API, we can authenticate using a Persona identity – that is, a verified e-mail address or similar – within any of these application protocols.

    This is indeed what we have been working on. Myself and Nico have written an Internet Draft that profiles BrowserID as a SASL and GSS-API security mechanism (we use “BrowserID” to refer to the actual protocol). My company, PADL, has developed an open source implementation which is available on Github. (We have also prototyped a Windows Security Support Provider which enables applications such as Outlook, Exchange and Internet Explorer to work with Persona. Plug: we are exploring commercial possibilities for this in conjunction with our partner Painless Security.)

    In the rest of this article, we’ll take a look at how Persona for the non-web differs from normal web-based authentication, and show an example demonstrating signing into an IMAP server with Persona from the Apple Mail client.

    Persona recap

    There are plenty of articles on how Persona works, but we’ll recap the protocol here for convenience. Persona is a federated, decentralised authentication protocol. Users sign-in using a browser to an identity provider (IdP), which is an entity that can authenticate their e-mail address, although it can be any verifiable address that looks like an e-mail address.

    When attempting to authenticate to a server (termed a Relying Party, or RP), the browser generates a private/public key pair, and asks the IdP to issue a certificate vouching for the public key. (These certificates may be cached.) The browser then generates an assertion, which contains the RP URL and a timestamp, and signs it with the user’s private key. The browser presents this and the user’s certificate to the web server, which validates the URL and timestamp and uses the user’s and IdP’s public keys to authenticate the user.

    More information on Persona is available in the Mozilla Persona web site. It has been written about on this blog in Persona Beta 2 launch and the first Persona release post.

    Extending to the non-web

    At its simplest, using Persona for the non-web is identical to the web case, with the exception that the assertion contains a service principal name instead of a HTTPS URL. Service principal names are a construct inherited from the Kerberos that identify a service (for example, “imap” or “xmpp”) running on a particular host. (They may also identify a specific instance of a service running on a host.) For example, the service principal name for the IMAP server on mail.example.com would be “imap/mail.example.com”. Because Persona audiences have to be URLs, we encapsulate the service principal name inside a URN.

    We don’t say anything about how the application sends the assertion to the server, because neither the SASL nor GSS-API abstractions do. This is the application protocol’s business: typically, it will have a particular message in its own protocol that can encapsulate an authentication token (in IMAP, for example, this is the “AUTHENTICATE” message). All we do say is that the application must allow the user to sign into their IdP and generate an assertion, which means they must have the ability to run an embedded web browser. Most operating systems provide a plug-in interface for new security mechanisms, so this is usually possible.

    So far, this is pretty simple: throw up a web browser control, use a slightly strange-looking URL to identify the server, get an assertion and send it to the server. The server verifies the assertion, identifies the user as per normal, and all is well. And indeed, this is pretty much the protocol; it’s testament to the designers of Persona that it can so easily be re-purposed.

    However, there are a few small tweaks that we have made to make Persona more useful for the non-web case. We describe these below.

    Replay detection

    The Persona specification doesn’t say anything about whether it’s safe to replay an assertion to a server or not. We’re a little paranoid, particularly because we don’t know whether the application is using transport security such as SSL/TLS. So we have built replay detection into the protocol. This works by either having the server maintain a cache of assertions it has received within a particular time frame, or having the client cryptographically sign a server-generated nonce.

    Channel binding

    Even if the client is using TLS, it can be desirable to protect against a man-in-the-middle that has a valid server certificate, but is not the party that authenticated the client. Channel binding allows the client to bind the assertion to a TLS server certificate or session. The server verifying the assertion can then verify that it matches the certificate it sent to the client. (The channel binding is simply an additional claim in the assertion, protected by the same chain of trust as the other claims.)

    Key exchange

    Not every application protocol uses TLS. Some protocols, such as NFS and CIFS, rely on a key negotiated by the authentication protocol to sign and potentially encrypt messages. Other protocols might support TLS but not require it. As such, having the client and server agree on a session key can be useful. We accomplish this by having the client and server perform an Elliptic Curve Diffie-Hellman (ECDH) key exchange. The resulting shared secret can be used to sign and encrypt messages using the SHA-1 hash algorithm and 128-bit or 256-bit AES.

    Other hash and encryption algorithms may be used without changing the base protocol; these are the ones we have defined for now, which are based on what contemporary Kerberos implementations do. A well-designed implementation should be field-upgradable to support new algorithms.

    We also provide a pseudo-random function so applications that do their own encryption or integrity protection can derive a key.

    Mutual authentication

    Again, for applications that don’t use channel-bound TLS, it’s nice for the client to be able to authenticate the server, not just the converse. We do this by allowing the server to send back a certificate, just as it would in TLS. In this case, we actually use standard X.509/PKIX certificates, rather than Persona ones: we felt that trading architectural symmetry for the ability to re-use existing keying infrastructure was the right compromise.

    (We could also specify Persona certificates, but that would require IdPs to issue host certificates. And given IdPs are ultimately authenticated using X.509 certificates, this approach has questionable value. Its primary advantage is that it would sidestep the CA infrastructure for host authentication, as only IdPs would need to be issued X.509 certs.)

    Fast re-authentication

    Applications such as mail clients tend to make and tear down a lot of connections, most often concurrently. Explicitly signing in with Persona and/or performing public key operations in JavaScript would make Persona for a non-starter for these protocols. To solve this, we allow the server to return a cookie (called a “ticket”, a homage to Kerberos) which can be used to subsequently re-authenticate. Unlike web cookies, this cookie is bound to a cryptographic key, so subsequent authentications have the same degree of security as the original private key signed one. Instead of sending an assertion signed with a user’s private key, we sign the assertion using a HMAC with a key derived from the initial key exchange.

    Putting it all together

    An assertion for authenticating to the IMAP server on mail.example.com might look like the following:

    {
         "opts": [
             "ma"
         ], 
         "exp": 1360158396188,
         "ecdh": {
             "crv": "P-256",
             "x": "JR5UPDgMLFPZwOGaKKSF24658tB1DccM1_oHPbCHeZg",
             "y": "S45Esx_6DfE5-xdB3X7sIIJ16MwO0Y_RiDc-i5ZTLQ8"
         },
         "nonce": "bbqT10Gyx3s",
         "aud": "urn:x-gss:imap/mail.example.com"
     }

    The “ma” in the “opts” claim indicates that mutual authentication is desired. The “ecdh” claim contains the selected ECDH curve and client public key, for session key agreement. The “nonce” claim is used for mutual authentication, to bind the request and response assertions together. The remaining claims, “exp” and “aud” are identical to a Persona web assertion, except the audience contains a service principal name. (We have omitted the signature on the assertion and the user’s certificate, as these do not differ from the web use case.)

    One other difference is that the server will send back its own assertion, either signed in the exchanged key or in a long-term private key. This looks something like the following:

    {
        "exp": 1362960258000,
        "nonce": "bbqT10Gyx3s",
        "ecdh": {
            "x": "bvNF6V1rpMeQyGOKCj0kBaOaSh3tlhUcbffaji4uCEI",
            "y": "Iuqs650FXzXFUD9kHknETfbqiB8XBbCHlJXoysx3rvw"
        },
        "tkt": {
            "tid": "Jgg7vKX2sEKlCWBfmLTg_n4qz3NVZxOU-a2B4qYMkXI",
            "exp": 1362992660000
        }
    }

    The response assertion contains an advisory expiry time, an echoed nonce, the server’s ECDH public key, and an optional ticket for fast re-authentication.

    Implementation

    Protocol specifications are all very well, but it’s also important to have an implementation that will work with existing applications. Ours is available at https://github.com/PADL/gss_browserid.

    The client side runs on OS X, and the server should run on any modern POSIX-compliant system that has a Kerberos library, libcurl and OpenSSL installed. Porting the client UI to other operating systems should be reasonably straightforward; the most difficult part is finding a library that can display a web browser control, and implementing a function that returns an assertion. On OS X, we use the built-in WebKit framework to accomplish this. (There is also the beginning of a Windows port that uses MSHTML, but it isn’t fully baked yet. We expect it should be complete by the end of 2013.)

    Our implementation is divided into two components, libbrowserid and mech_browserid, which we discuss below.

    libbrowserid

    libbrowserid is a general-purpose C library for acquiring and verifying Persona assertions. You can if you wish build it without building the SASL/GSS-API mechanism; this might be useful if you want a native code local verifier. (As with all local verifiers, beware that the Persona protocol is subject to change. We’ll be tracking any changes.)

    If you want a taste of how you might use this library independently of SASL/GSS-API, have a look at sample/bidget.c and sample/bidverify.c: these two short programs (~50 LOC) demonstrate respectively how to acquire and verify a Persona assertion using libbrowserid.

    mech_browserid

    The mech_browserid module is a plugin, built on top of libbrowserid, that allows SASL and GSS-API consuming applications to seamlessly use Persona. You’ll need to have a recent version of MIT Kerberos or Heimdal installed, as well as Cyrus SASL (if your application uses SASL). You will also need a recent version of OpenSSL with ECDH enabled, as well as libcurl; the versions that ship with OS X 10.8 work fine. (Building against the version of Heimdal that ships with OS X is difficult and not recommended.)

    To build, run the “autogen.sh” script in the top-level directory, and then it’s the usual “configure” and “make” dance. You may need the –with-krb5 option to configure in order to specify where you installed Kerberos. The build/ subdirectory has some sample scripts for invoking configure, which you can tweak to suit. You will need to build with -DGSSBID_DEBUG in order for the SASL examples to work, for the reason described in #ifdef GSSBID_DEBUG on GitHub.

    For example, assuming Kerberos has been installed in /usr/local, one might type:

    % ./autogen.sh 
    % OBJC=clang CC=clang CXX=clang++ OBJCFLAGS="-g -Wall -DGSSBID_DEBUG -Wno-deprecated-declarations" CXXFLAGS="-g -Wall -DGSSBID_DEBUG -Wno-deprecated-declarations" CFLAGS="-g -Wall -DGSSBID_DEBUG -Wno-deprecated-declarations" ./configure --with-krb5=/usr/local
    % make
    % sudo make install

    After you’ve installed (with “make install”) you’ll need to add a line to /usr/local/etc/gss/mech that looks like the following:

    browserid-aes128    1.3.6.1.4.1.5322.24.1.17 /usr/local/lib/gss/mech_browserid.so

    Replace /usr/local in both the configuration file and library paths above with the prefix in which you installed Kerberos and mech_browserid, respectively.

    Testing

    You can test gss_browserid using the samples distributed with the Cyrus SASL distribution. You will need a recent version of Cyrus SASL that supports GS2 (you can tell by whether libgs2.so is installed into the sasl2 directory). If you’re not configuring mutual authentication (i.e. you haven’t generated a server certificate) then you will also need a small patch to Cyrus, which can be found in contrib/cyrus-sasl.patch. Apply that and “make install” in the plugins directory of Cyrus SASL before running the tests.

    First, make sure your SASL_PATH environment variable is set to where the GS2 SASL plugin is installed. For example, if the GS2 SASL plugin is installed in /usr/local/lib/sasl2:

    % export SASL_PATH=/usr/local/lib/sasl2

    Start the server program below, replacing host.example.com with your canonical hostname (but not “-s host”, as that specifics the service name):

    % server -c -p 5556 -s host -h host.example.com

    And then the client:

    % client -c -p 5556 -s host -m BROWSERID-AES128 host.example.com

    If it works, you should see the Persona sign-in page pop up (remember, this currently works on OS X only). After typing in your e-mail address and password, you should be able to authenticate (you will see “successful authentication” on the server side).

    If you try it again, it should work without prompting, as you will have a cached ticket. You can list your tickets with the bidtool command:

    % bidtool tlist
    Ticket cache: /Users/lukeh/Library/Caches/com.padl.gss.BrowserID/browserid.tickets.json
     
    Identity        Audience                  Issuer        Expires                 
    --------------------------------------------------------------------------------
    lukeh@padl.com  host/host.example.com     login.persona Tue Apr 23 22:40:36 2013

    To remove the ticket cache, use “bidtool tdestroy”. (Kerberos users should find these commands familiar. Other useful commands include “bidtool rlist”, to show the replay cache, and “bidtool certlist”, to show the IdP public key cache. There are similar commands to purge expired entries, and to destroy, each type of cache.)

    If it doesn’t work, well: it’s true that error reporting is sub-optimal right now, and debugging can be difficult. Ensure you:

    • built libbrowserid with -DGSSBID_DEBUG;
    • that SASL_PATH points to a directory in which libgs2.so resides, and
    • that /usr/local/etc/gss/mech (replacing path as appropriate) points to where mech_browserid.so is installed.

    If you see the Persona dialog but authentication fails, make sure the hostname you specified matches the name the server is using. If you’re comfortable with a debugger, setting a breakpoint on gssBidInitSecContext can be useful. If all else fails, drop me a line or post to the dev-identity mailing list.

    To keep this article short, we haven’t touched on configuring mutual authentication (or, more correctly, server authentication). Configuring this is briefly described in README.md in the top-level directory of the source distribution. gss_browserid can also do other fun things such as surface certificate attributes to applications, even if they’re embedded in a SAML assertion tunnelled inside the user’s certificate. We’ll talk about those things in a future article.

    Applications

    So, why would you want to use this when you can authenticate to your (for example) IMAP server using passwords, DIGEST-MD5 or Kerberos? Here are some possibilities: your webmail provider wants to standardize on Persona authentication and deprecate password-based authentication (it could happen). You work in an enterprise that requires some complex multi-factor authentication using, say, hardware tokens and client certificates: it’s relatively trivial to build a Persona IdP than a new authentication protocol, so this allows you to deploy this authentication policy with all clients that support GSS-API or SASL. (This might be particularly useful for accessing e-mail outside the firewall.)

    In this example, we demonstrate how to use Persona to authenticate using the OS X Mail client. You should be warned that this is not for the faint of heart: it involves installing a plugin that fools Mail into using Persona when you ask for Kerberos authentication. (Note that this will prevent you from using Kerberos from Mail. And it is completely unsupported by Apple. But this is the Mozilla Hacks blog, right?)

    First, you’ll need to setup your IMAP server to support Persona, but as long as it supports Cyrus SASL, and you’ve got the SASL examples above working on the same machine, it should “just work”. Again, make sure SASL_PATH is set correctly and the IMAP server has read/write access to its authority and replay cache files (on OS X, these will be created in ~/Library/Caches/com.padl.gss.BrowserID; on other platforms, they will be in /tmp or $XDG_RUNTIME_DIR).

    You can test your IMAP SASL configuration with the cyradm tool (presuming you’re using Cyrus imapd). For example:

    % cyradm --user lukeh@lukktone.com --port 143 --auth BROWSERID-AES128 rand.mit.de.padl.com

    If there are any problems getting this to work (you don't see the cyradm prompt with your IMAP server name), then you'll need to troubleshoot this before proceeding. Otherwise, proceed to install the "masquerade as Kerberos" plugin, which may be found in the contrib/BrowserIDHelper directory of gss_browserid. In that directory, you can simply type "make && make install" to build and install. (To remove it, delete ~/Library/Mail/Bundles/BrowserIDHelper.mailbundle.)

    You will also need to modify the application sandbox so that the gss_browserid mechanism and its configuration files can be loaded. As root, apply the patch in application.sb.patch, adjusting paths as necessary. Then, delete ~/Library/Containers/com.apple.mail/Container.plist, and start Mail.

    In Preferences/Accounts/Advanced for the mail server that you wish to authenticate to with Persona, set Authentication to "Kerberos Version 5 (GSSAPI)". This kludge is necessary because Mail is not SASL mechanism agnostic; it only supports a fixed set of mechanisms, such as GSSAPI and DIGEST-MD5.

    All going to plan, you should be prompted to sign in:

    There you have it.

    Conclusion

    It's possible to use Persona for non-web applications today, but there's still a way to go before it's ready for prime time. We want to finish defining the protocol and publish it as an RFC, which in turn will require the underlying BrowserID (and JOSE) specifications to be stable. The implementation needs testing with more applications and complete ports to Linux and Windows. Applications that assume a specific set of SASL or GSS-API mechanisms need to be updated to be mechanism agnostic. Enterprise use cases will require IdPs that can bridge from Active Directory and other common authentication providers.

    We look forward to seeing how Persona evolves and how it can be applied to the non-web in the coming months.

    Finally, if you are planning on building your own implementation of draft-howard-gss-browserid, please get in touch directly or on the ietf-kitten mailing list.

    Acknowledgments

    My draft co-author, Nico Williams, provided much advice on the protocol design. The gss_browserid implementation was based on the Moonshot GSS EAP mechanism, sponsored by JANET(UK). Thanks also to Sam Hartman at Painless Security, and the identity team at Mozilla.

  5. HiDPI support, HTML5 notifications, Parallel JS, asm.js and more – Firefox Development Highlights

    Time for another look at the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).

    HiDPI support

    We’re happy to say that ico/icns with multiple images are now supported: the highest resolution icon is now used on HiDPI/Retina displays.

    Favicon implementation is described in bug 828508 and ico/icns is described in bug 419588.

    Performance improvements/Snappy:

    Numerous performance improvements have been made, such as faster startup, better scrolling on touchpads and smoother animations.

    The most important improvement, however, is probably multithreaded image decoder. The result should be faster page loads and tab switching. All the nitty-gritty detalis are described in bug 716140.

    HTML5

    When it comes to the world of HTML5 & friends, we have some good additional support:

    <input type=”range”>

    We now support the <input type="range"> element in forms. To style it, you can use the ::-moz-range-progress:

    ::-moz-range-progress {
        background: #f00;
    }
     
    <input type="range">

    You can see this <input type=”range”> demo in action on jsFiddle.

    HTML5 notifications

    HTML5 notifications have now been implemented. Basically, you ask for permission and then you can create a notification:

    function authorizeNotification() {
        Notification.requestPermission(function(perm) {
            alert(perm);
        });
    }
     
    function showNotification() {
        var notification = new Notification("This is a title", {
            dir: "auto",
            lang: "",
            body: "This is a notification body",
            tag: "sometag",
        });
    }

    See the HTML5 notification demo in action on jsFiddle.

    WebAudio API activated by default

    WebAudio API has been activated by default in Firefox Nightly. Testers welcome, though there are still work to be done before it can be released.

    JavaScript

    Parallel JS

    The first version of Parallel JS has landed for Firefox. A lot more details in the Parallel JS Lands article.

    asm.js

    We’re happy to say that asm.js is now in Firefox, scheduled to be released in Firefox 22! Luke Wagner has written more about it in asm.js in Firefox Nightly.

    ES6 Arrow function syntax

    We now support the ES6 Arrow function syntax

    let square = x => x*x;
    console.log(square(3));

    CSS

    @supports activated by default

    We plan on releasing this with Firefox 22. More about @supports on MDN.

    min-width and min-height ‘auto’ keyword

    min-width and min-height 'auto' keyword is no more supported. It has been removed from CSS3 Flexbox. More about that in bug 848539.

    CSS Flexbox has been re-enabled

    Happy to let you know that CSS Flexbox has been re-enabled by default in Firefox 22, which is currently in Firefox Aurora!

  6. Web Payments with PaySwarm: Assets and Listings (part 2 of 3)

    The Promise of Web Payments

    The first article in this series on PaySwarm outlined how the technology is designed to transmit and receive funds with the same ease as sending and receiving an email. It went on to explain how taking the tools that have been traditionally only available to banks, Wall Street, and large corporations and making them available to everyone can reshape financial systems in a very positive way. The goal is not just one-click payments, but also to enable crowdfunding innovation, help Web developers earn a living through the Web, boost funding rounds for start-ups, and more.

    This article is the second in a three part series on buying and selling content using the PaySwarm specification. It will review some basic concepts covered in the first article and then explain how to list things for sale using PaySwarm.

    Review: Web Keys and JSON-LD

    As explained in part one, the Web Keys specification provides a simple, decentralized identity solution for the Web based on public key cryptography. It enables Web applications to send messages that are both protected from snooping and verifiable via digital signatures.

    The messages are marked up using the JavaScript Object Notation for Linking Data (JSON-LD). As the name suggests, JSON-LD is a way of expressing Linked Data in JSON. Both HTML documents and JSON-LD documents describe things and have links to other documents on the Web. The primary benefit with JSON-LD is that the entire document is understandable by a machine to the point that it can extract and perform basic reasoning without placing a huge burden on the developer writing the JSON markup.

    Web Keys coupled with JSON-LD provide the underlying messaging and product markup mechanism used by PaySwarm to perform Web Payments.

    Decentralized Products and Services

    One design requirement of a Web Payments system is that the identity mechanism (Web Keys) must be decentralized. Another requirement is that the data markup mechanism (JSON-LD) must be capable of expressing decentralized resources like people, places, events, goods/services, and a variety of other data that will likely exist on 3rd party websites.

    Similarly, PaySwarm does not require that products and services be listed in a central location on the Web. Instead, it allows content creators and developers to be in control of their own product descriptions and prices in addition to giving them the option to delegate this responsibility to an App Store or large retail website. PaySwarm has the following requirements when it comes to listing products and services for sale:

    • The listings must be able to be decentralized, which reduces the possibility of monopolistic behavior among retailers.
    • The product being sold must be separable from the terms under which the sale occurs, enabling different prices to be associated with different licenses, affiliate sales, and business models like daily deals.
    • The creator of the product must be able to specify restrictions on pricing, resellers, validity periods, and a variety of other properties associated with the sale of the product. This ensures that the product creator is in control of her product at all times.
    • It must support decentralized extensibility, which enables applications to add application-specific data to the product description and terms of sale.
    • It must be secure, such that the risk of tampering with product descriptions and prices is mitigated.
    • It must be non-repudiable, such that the creator of the listing cannot dispute the fact that they created it.

    Assets and Listings

    There are two concepts that are core to understanding how products and services are listed for sale via PaySwarm.

    The first is the asset. An asset is a description of a product or service. Examples of assets include web pages, ebooks, groceries, concert tickets, dog walking services, donations, rights to transmit on a particular radio frequency band, and invoices for work performed. In general, anything of value can be modeled as an asset.

    An asset typically describes something to be sold, who created it, a set of restrictions on selling it, and a validity period. Since the asset is expressed using JSON-LD, a number of other application-specific properties can be associated with it. For example, a 3D printing store could include the dimensions of the asset when physically printed, the materials to be used to print the asset, and a set of assembly instructions. Upon purchase of the asset, a digital receipt with a description of the asset is generated. This receipt can be given to a printer to produce a physical representation of the asset.

    The second concept that is key to understanding how products and services are sold in PaySwarm is the listing. A listing is a description of the specific terms under which an asset is offered for sale. These terms include: the exact asset being sold, the license that will be associated with the purchase, the list of people or organizations to be paid for the asset, and the validity period for the listing. Like an asset, a listing may include other application-specific properties.

    This tutorial elaborates on creating an asset and listing and publishing them to a website, as shown briefly in the video below:

    Code from the payswarm.js node module will be used throughout this tutorial. Specifically, it utilizes the asset publishing example. The payment processor will be the PaySwarm Developer Sandbox and asset hosting service will be the PaySwarm Developer Listing Service.

    Creating an Asset

    As mentioned previously, an asset is described using JSON-LD. An asset is built in a programming language the same way one would build data to be published as a JSON document. Typically, this involves using an object (in JavaScript), a dictionary (in Python), an associative array (in PHP), or a hash (in Ruby). Here is the code to create an asset in JavaScript. Pay particular attention to the comments as they will explain what each key-value pair means. Let’s try a simple example first:

    // create a PaySwarm asset
    var asset = {
      // the @context is a hint to a JSON-LD processor on how to interpret the 
      // key-value pairs in the document
      '@context': 'https://w3id.org/payswarm/v1',
      // this is the global identifier for the asset
      id: 'http://listings.dev.payswarm.com/mozhacks/demo#asset',
      type: ['Asset'],
      // this is the person who created the asset
      creator: { fullName: 'Developer Joe' },
      title: 'Mozilla Hacks Demo Asset',
      // this is typically the link to the paid content
      assetContent: 'http://listings.dev.payswarm.com/mozhacks/demo#asset',
      // this is the entity that has rights to the asset (or owns it)
      assetProvider: 'https://dev.payswarm.com/i/YOUR_IDENTITY_HERE'
    };

    The code above is a working example of an asset description in about seven lines of code (without comments). It describes an asset called Mozilla Hacks Demo Asset, which can be sold by anyone. The idea is that you would express this data on a website, either as a separate JSON-LD document or directly in an HTML5 page using RDFa markup. Any PaySwarm-compatible payment processor could then get your document and know exactly what you have created and what the sale restrictions are.

    Let’s take a look at a more complex example. The asset below specifies a song with a twist on how it can be sold. It can be resold by anyone, with 80% of the proceeds, or a minimum of $0.50, going to the band that created the song.

    // create a PaySwarm asset
    var asset = {
      // the @context is a hint to a JSON-LD processor on how to interpret the 
      // key-value pairs in the document
      '@context': 'https://w3id.org/payswarm/v1',
      // this is the global identifier for the asset
      id: 'http://listings.dev.payswarm.com/mozhacks/html5-me-song#asset',
      type: ['Asset', 'schema:MusicRecording'],
      // this is the person who created the asset
      creator: { fullName: 'The Webdevs' },
      title: 'HTML5 Me, Baby',
      // this is the link to the paid content
      assetContent: 'http://listings.dev.payswarm.com/mozhacks/paid/html5-me-song',
      // this is the entity that has rights to the asset (the artist in this case)
      assetProvider: 'https://dev.payswarm.com/i/the-webdevs',
      // these are restrictions under which the asset can be sold
      listingRestrictions: {
        // validity dates so that the price information below doesn't
        // last forever (you may want to change your price)
        validFrom: payswarm.w3cDate(validFrom),
        validUntil: payswarm.w3cDate(validUntil),
        payee: [{
          // this is an entity that should be paid when the asset is sold
          type: 'Payee',
          // when the asset is sold, put the money for the asset provider here
          destination: 'https://dev.payswarm.com/i/the-webdevs/accounts/royalties',
          // the name of the group determines how this particular payee's rate comes 
          // out of the total price of the sale
          payeeGroup: ['assetProvider'],
          // next 6 lines: the greater of 80% of the vendor's price or $0.50 should go
          // to the content creator
          payeeRate: '80',
          payeeRateType: 'Percentage',
          payeeApplyType: 'ApplyInclusively',
          payeeApplyGroup: ['vendor'],
          minimumAmount: '0.50',
          currency: 'USD',
          // show this to the buyer as one of the line items in the digital receipt
          comment: 'Payment to The Webdevs for creating the HTML5 Me, Baby song'
        }],
        payeeRule: [{
          // next 2 lines: allow the payment processor (the PaySwarm Authority) to add 
          // a fee for processing the transaction
          type: 'PayeeRule',
          payeeGroupPrefix: ['authority']
        }, {
          // next 4 lines: vendors can only specify a flat fee for reselling the song
          // from their website
          type: 'PayeeRule',
          payeeGroup: ['vendor'],
          payeeRateType: 'FlatAmount',
          payeeApplyType: 'ApplyExclusively'
        }]
      }
    };

    The code above is a more comprehensive example of an asset description in approximately 30 lines of code (without comments). It describes an asset, which is a song, called HTML5 Me, Baby that can be sold by anyone who complies with the other restrictions set forth. A content creator who describes an asset this way on the web creates an incentive for their fan base to blog about and resell the content on their personal blogs. Imagine a WordPress plugin that allows you to review and resell your favorite bands songs directly from your blog. The artist is always guaranteed to get paid, regardless of which blog sells it or which PaySwarm Authority processes the payment. In this particular example, the asset provider has enabled their fans to take a 20% cut of the sale.

    When a sale of the song above occurs, 80% of the sale price, or a minimum of $0.50 USD, is transferred to the asset provider. The PaySwarm Authority may add a fee for processing payment for the asset. A vendor may set a flat price for the song. For example, if the song is sold for $1.00, then $0.80 goes to The Webdevs (80% of final price restriction kicks in). If the song is sold for $0.60 USD, then $0.50 goes to The WebDevs ($0.50 USD minimum restriction kicks in). As you can see, the listing restrictions provide a great deal of power to the asset provider to specify exactly how their product should be sold.

    Once the asset has been created, the developer can then use her private key to digitally sign the asset:

    payswarm.sign(asset, {
      publicKeyId: publicKey.id,
      privateKeyPem: privateKey.privateKeyPem
    }, function(err, signedAsset) {
      // do something with the signed asset
    });

    Digitally signing the asset ensures that no one can change any of the information associated with it. This is important because, at a minimum, a content creator wouldn’t want to be removed from the list of people who should be paid when the asset is sold. The digital signature also guarantees, to a buyer, that the content creator did in fact describe the asset and its sale restrictions as seen.

    The next step in preparing the asset for sale is to create a special identifier for the asset so that it can be accurately referenced by the listing. This identifier is called a cryptographic hash and is generated using the payswarm.js library’s hash() function:

    // generate a hash for the signed asset
    payswarm.hash(signedAsset, function(err, assetHash) {
      // do something with the signed asset hash
    });

    Once we have the signed asset and the signed asset hash, we can create the listing that will be used to purchase the asset.

    Creating a Listing

    As mentioned earlier in this article, a listing is a description of the terms under which an asset is offered for sale. A listing, like an asset, is expressed in JSON-LD. The listing below specifies which license to associate with the asset being sold as well as who should get paid for the sale of the asset. It also specifies restrictions on certain payees, such as how much a PaySwarm Authority can charge for processing a payment. Pay particular attention to the comments above each line as they explain what the line does:

    // create the listing
    var listing = {
      // the @context is a hint to a JSON-LD processor on how to interpret the 
      // key-value pairs in the document
      '@context': 'https://w3id.org/payswarm/v1',
      // this is the identifier for the listing
      id: 'http://listings.dev.payswarm.com/mozhacks/html5-me-song#listing',
      type: ['Listing'],
      // the identity offering the item for sale is The WebDevs
      vendor: 'https://dev.payswarm.com/i/the-webdevs',
      payee: [{
        type: 'Payee',
        // payment should be deposited into this financial account
        destination: 'https://dev.payswarm.com/i/the-webdevs/accounts/royalties',
        // this is used to determine how fees are applied to the final price
        payeeGroup: ['vendor'],
        // the next 4 lines: Sell the song for $1.00
        payeeRateType: 'FlatAmount',
        payeeRate: '1.00',
        currency: 'USD',
        payeeApplyType: 'ApplyExclusively',
        // this should be displayed for the line item in the digital receipt
        comment: 'Payment to The Webdevs for creating the HTML5 Me, Baby song'
      }],
      // the next 6 lines: The payment processor cannot take more than 5% of
      // the total sale price.
      payeeRule : [{
        type: 'PayeeRule',
        payeeGroupPrefix: ['authority'],
        payeeRateType: 'Percentage',
        maximumPayeeRate: '5',
        payeeApplyType: 'ApplyInclusively'
      }],
      // this is the ID of the asset being sold
      asset: 'http://listings.dev.payswarm.com/mozhacks/html5-me-song#asset',
      assetHash: assetHash,
      // this is the license that should be associated with the asset upon sale
      license: 'https://w3id.org/payswarm/licenses/personal-use',
      licenseHash: 'urn:sha256:' +
        'd9dcfb7b3ba057df52b99f777747e8fe0fc598a3bb364e3d3eb529f90d58e1b9',
      // the offer of sale is only valid between these two times
      validFrom: payswarm.w3cDate(validFrom),
      validUntil: payswarm.w3cDate(validUntil)
    };

    The code above states that the song HTML5 Me, Baby is for sale for $1.00 and a payment processor can’t charge more than 5% of the total sale price in transaction processing fees. The song is licensed for personal use, with the full text of the license available at the provided URL. Once the listing has been created, it must be digitally signed:

    payswarm.sign(listing, {
      publicKeyId: cfg.publicKey.id,
      privateKeyPem: cfg.publicKey.privateKeyPem
    }, function(err, signedListing) {
      // do something with the signed listing
    });

    The listing is digitally signed for the same reason that the asset is: to prevent tampering and for non-repudiation. Once both the asset and the listing are signed, they are ready to be published. This could be done by publishing them as two different documents or as a single document. The easiest way to publish them as a single document in JSON-LD is to use the ‘@graph’ keyword, which essentially states that you want to combine two independent objects into the same JSON-LD document.

    var assetAndListing = {
      '@context': 'https://w3id.org/payswarm/v1',
      '@graph': [signedAsset, signedListing]
    };

    Publishing an Asset and Listing

    The final step in the publication process is to take the signed asset and listing document and publish it to the Web. Since PaySwarm is decentralized, we can publish our signed asset and listing to any website. Since the assets are digitally signed, the website doesn’t have to be protected by Transport Layer Security (TLS), more commonly known as HTTPS. The digital signature guarantees that no one can modify the data without invalidating the signature on the asset and listing. In the following example, we use the payswarm.js library’s postJsonLd() function to upload the asset and listing to a public PaySwarm listing service.

    var url = 'http://listings.dev.payswarm.com/mozhacks/html5-me-song';
    payswarm.postJsonLd(url, assetAndListing, function(err, result) {
      // if result is a 200, then your listing has been published
    });

    After the asset and listing have been uploaded, the asset can be purchased by any PaySwarm client. Note that while the asset and listing information was expressed as JSON-LD, it could have just as easily been published as HTML5+RDFa. PaySwarm Authorities are capable of interpreting both JSON-LD and RDFa. While we won’t go into the details in this blog post, a future blog post will address how to take the asset and listing Linked Data expressed above and publish it as HTML5+RDFa.

    Next: Purchasing an Asset

    This is the second article in a three part series on developing PaySwarm-aware Web applications to engage in commerce. The next article will explain how to purchase the asset that was created in this tutorial and retrieve the digital receipt of the sale.

  7. Geeksphone to start selling Firefox OS Developer Preview phones on April 23

    Mozilla, Geeksphone and Telefonica have been working together to create a Firefox OS developer preview phone, and we’re excited to say they will go on sale April 23rd. With early access to hardware, developers can test the capabilities of Firefox OS in a real environment with a mobile network and true hardware characteristics like the accelerometer and camera that are not easily tested on the Firefox OS Simulator. Plus, new hardware is fun to play with!

    Firefox OS Phones Up

    Firefox OS Phones Up! Photo by Mark Coggins

    The Firefox OS Developer Preview Geeksphone devices have development versions of Firefox OS and are are unlocked so that developers can use them wherever they are in the world and they are updated regularly with the latest Firefox OS build. This will enable developers to explore the potential of the open Web and to bring the power of the Web to mobile for billions of users worldwide.

    Two developer devices

    Geeksphone has two Firefox OS developer devices for sale, the Keon and the Peak. Both phones can be bought online and shipped to just about anywhere in the world. The Keon has similar specifications as the actual target hardware that operators will ship in the phones they roll out to consumers later this year. The Peak offers a slightly more high-end device for developers wanting to experiment with apps for devices that might be commercially available in the future.

    The Keon is an orange (like Firefox!) phone with a 3.5″ screen Qualcomm 1Ghz processor and 512 MB of RAM. It’s available for €91 plus taxes, shipping and handling.

    The Peak has a slightly larger screen (4.3″) and a Qualcomm DualCore 1.2Ghz processor. It costs €149 plus taxes, shipping and handling.

    Both phones can be purchased directly from Geeksphone. Support and updates will also be provided directly by Geeksphone. Of course you can visit the Mozilla Developer Network for more information about Firefox OS and the Firefox Marketplace Developer Hub for information on how to build, publish and submit your open web app to Firefox Marketplace.

    Existing web apps

    Developers have already built and published awesome mobile web apps that you can check out today on the Developer Preview phone. We expect that these developer devices will inspire and enable even more. For some examples, you can check out the Marketplace for apps by indie developers that solve cool problems like:

    Or try these indie games or challenge yourself to write your own game:

    You can create an app for Firefox OS by making some small changes to your existing website. As Alexander Saladrigas said last weekend, “It was exciting to see Firefox OS in action on hardware that will be representative of the final commercial devices. I remember several devs pushing their web apps made for browsers or other platforms with the only addition of a tiny JSON manifest… and it worked flawlessly on the first try. I thought ‘Wow, that easy? Just as any web page?”

    Although, it’s great to have the actual hardware to test your apps, if you’re not in a position to purchase a Geeksphone at the moment, you can still try out Firefox OS and your app in several other ways:

    • Install Marketplace for Android on your Android phone. (Your friends and family can also do this – it’s as easy as installing an app, so they can try out your app too.)
    • Use the browser-based Firefox OS Simulator to view and test your mobile app on the desktop.
    • Install Firefox OS on your own hardware.

    Why develop an app for Firefox OS?

    • Keep the web open. Support the open web and help make sure the power of the web is available to everyone – even on mobile devices.
    • Simplicity. Develop on a single technology stack (HTML5/CSS/JavaScript/new WebAPIs) and deliver across the web and devices.
    • Freedom. You’re not locked in to a vendor-controlled ecosystem. You can distribute your app through the Firefox Marketplace, your own website, or any other store based on Mozilla’s open app store technology.

    If you have any more questions, please read the Firefox OS Developer Preview. Below is also a helpful FAQ on Geeksphone.

    We look forward to seeing what awesome apps developers make for the mobile open web. Happy hacking!

    Geeksphone FAQ:

    Q. What are you announcing today?

    A. We’re announcing the availability of two Firefox OS developer preview devices manufactured by Geeksphone and available for purchase at www.geeksphone.com. These devices allow developers to test the capabilities of Firefox OS in a real environment, testing characteristics such as real performance and interaction with the mobile network.

    Q. What are the device specs and how much will each cost?

    A. The Keon is equipped with a Cortex-A5 1Ghz processor, 3.5 inch multi-touch screen, tri-band UMTS/HSPA, 4GB ROM, 512 MB RAM and a long-lasting 1580 mAh battery. It will cost 91 € without VAT or shipping.

    The Peak is equipped with a 1.2 GHz dual-core Qualcomm 8225 chipset, 4.3-inch qHD IPS screen, 8 Mpx back camera and 2 Mpx front camera, as well as tri-band UMTS/HSPA and 1800 mAh battery. It will cost 149 € without VAT or shipping.

    Q. Why are there two devices?

    A. The Keon has similar specifications to the actual target hardware that operators will ship in the phones they roll out to consumers later this year. The Peak offers a slightly more high-end device for developers wanting to experiment with apps for devices that might be commercially available in the future.

    Q. Will Geeksphone ship to any country?

    A. Yes.

    Q. Who is Geeksphone?

    A. Geeksphone is a Spanish company dedicated to designing and manufacturing latest generation smartphones. It was formed in 2009 and was the first European company to develop a smartphone featuring Android OS.

    Q. What is Telefónica and Mozilla’s involvement?

    A. Telefónica and Mozilla worked closely with Geeksphone to make it possible to manufacture these developer test units.

    Q. Why do you need these devices?

    A. Making preview developer devices available is crucial to ensure a rich ecosystem is ready when handsets launch for the mass market. The Geeksphone devices will allow developers to test the capabilities of Firefox OS in a real environment beyond the facilities provided by current emulators. It will be possible to test some characteristics like real performance and interaction with the mobile network.

    Q. Are these the first ever Firefox OS devices?

    A. Through the development of the project Firefox OS has been ported onto a number of different devices from different OEMs in order to test and demonstrate. This is the first time that developer handsets have been made available for developers working outside of the project to take away and test their applications. Today’s announcement does not represent a commercial launch for Firefox OS. These will take place later this year.

    Q. Can consumers get the Geeksphone handsets?

    A. These devices have not been designed for consumers and include pre-release development versions of Firefox OS. Although we know many people are excited to get their hands on Firefox OS, we would urge them to wait until commercial devices are ready and they will be able to get the full experience.

    Q: What version of Firefox OS is this?

    A: v1.0.1

    Q: How often does it update?

    A: The software will update every couple of weeks as new builds become available.

    Q: Is this feature complete or will anything be added before launch?

    A: This is a developer device with a developer build. New features, performance/stability enhancements will continue to be added on a regular basis. The software here is not necessarily 100% representative of what will ship into customer’s hands.

    Q: How can I test v2/1.1/what’s next?

    A: New releases will be automatically made available OTA (over the air) and developers who have a Geeksphone will be able to update to their build in order to test their apps.

  8. The concepts of WebGL

    This post is not going to be yet another WebGL tutorial: there already are enough great ones (we list some at the end).

    We are just going to introduce the concepts of WebGL, which are basically just the concepts of any general, low-level graphics API (such as OpenGL or Direct3D), to a target audience of Web developers.

    What is WebGL?

    WebGL is a Web API that allows low-level graphics programming. “Low-level” means that WebGL commands are expressed in terms that map relatively directly to how a GPU (graphics processing unit, i.e. hardware) actually works. That means that WebGL allows you to really tap into the feature set and power of graphics hardware. What native games do with OpenGL or Direct3D, you can probably do with WebGL too.

    WebGL is so low-level that it’s not even a “3D” graphics API, properly speaking. Just like your graphics hardware doesn’t really care whether you are doing 2D or 3D graphics, neither does WebGL: 2D and 3D are just two possible usage patterns. When OpenGL 1.0 came out in 1992, it was specifically a 3D API, aiming to expose the features of the 3D graphics hardware of that era. But as graphics hardware evolved towards being more generic and programmable, so did OpenGL. Eventually, OpenGL became so generic that 2D and 3D would be just two possible use cases, while still offering great performance. That was OpenGL 2.0, and WebGL is closely modeled after it.

    That’s what we mean when we say that WebGL is a low-level graphics API rather than a 3D API specifically. That is the subject of this article; and that’s what makes WebGL so valuable to learn even if you don’t plan to use it directly. Learning WebGL means learning a little bit of how graphics hardware works. It can help developing an intuition of what’s going to be fast or slow in any graphics API.

    The WebGL context and framebuffer

    Before we can properly explain anything about the WebGL API, we have to introduce some basic concepts. WebGL is a rendering context for the HTML Canvas element. You start by getting a WebGL context for your canvas:

    var gl;
    try {
      gl = canvas.getContext("experimental-webgl");
    } catch(e) {}

    From there, you perform your rendering by calling the WebGL API functions on the gl element obtained there. WebGL is never single-buffered, meaning that the image that you are currently rendering is never the one that is currently displayed in the Canvas element. This ensures that half-rendered frames never show up in the browser’s window. The image being rendered is called the WebGL framebuffer or backbuffer. Talking of framebuffers is made more complicated by the fact that WebGL also allows additional off-screen framebuffers, but let’s ignore that in this article. The image currently being displayed is called the frontbuffer. Of course, the contents of the backbuffer will at some point be copied into the frontbuffer — otherwise WebGL drawing would have no user-visible effect!

    But that operation is taken care of automatically by the browser, and in fact, the WebGL programmer has no explicit access to the frontbuffer whatsoever. The key rule here is that the browser may copy the backbuffer into the frontbuffer at any time except during the execution of JavaScript. What this means is that you must perform the entire WebGL rendering of a frame within a single JavaScript callback. As long as you do that, correct rendering is ensured and the browser takes care of the very complex details of multi-buffered compositing for you. You should, in addition, let your WebGL-rendering callback be a requestAnimationFrame callback: if you do so, the browser will also take care of the complex details of animation scheduling for you.

    WebGL as a general, low-level graphics API

    We haven’t yet described how WebGL is a low-level graphics API where 2D and 3D are just two possible usage patterns. In fact, the very idea that such a general graphics API may exist is non-trivial: it took the industry many years to arrive to such APIs.

    WebGL allows to draw either points, or line segments, or triangles. The latter is of course what’s used most of the time, so we will focus entirely on triangles in the rest of this article.

    WebGL’s triangle rendering is very general: the application provides a callback, called the pixel shader or fragment shader, that will be called on each pixel of the triangle, and will determine the color in which it should be drawn.

    So suppose that you’re coding an old-school 2D game. All what you want is to draw rectangular bitmap images. As WebGL can only draw triangles (more on this below), you decompose your rectange into two triangles as follows,

    A rectangle decomposed as two triangles.

    and your fragment shader, i.e. the program that determines the color of each pixel, is very simple: it will just read one pixel from the bitmap image, and use it as the color for the pixel currently being rendered.

    Suppose now that you’re coding a 3D game. You have tesselated your 3D shapes into triangles. Why triangles? Triangles are the most popular 3D drawing primitive because any 3 points in 3D space are the vertices of a triangle. By contrast, you cannot just take any 4 points in 3D space to define a quadrilateral — they would typically fail to lie exactly in the same plane. That’s why WebGL doesn’t care for any other kind of polygons besides triangles.

    So your 3D game just needs to be able to render 3D triangles. In 3D, it is a little bit tricky to transform 3D coordinates into actual canvas coordinates — i.e. to determine where in the canvas a given 3D object should end up being drawn. There is no one-size-fits-all formula there: for example, you could want to render fancy underwater or glass refraction effects, that would inevitably require a custom computation for each vertex. So WebGL allows you to provide your own callback, called the vertex shader, that will be called for each vertex of each triangle you will render, and will determine the canvas coordinates at which it should be drawn.

    One would naturally expect these canvas coordinates to be 2D coordinates, as the canvas is a 2D surface; but they are actually 3D coordinates, where the Z coordinate is used for depth testing purposes. Two pixels differing only by their Z coordinate correspong to the same pixel on screen, and the Z coordinates are used to determine which one hides the other one. All three axes go from -1.0 to +1.0. It’s important to understand that this is the only coordinate system natively understood by WebGL: any other coordinate system is only understood by your own vertex shader, where you implement the transformation to canvas coordinates.

    The WebGL canvas coordinate system.

    Once the canvas coordinates of your 3D triangles are known (thanks to your vertex shader), your triangles will be painted, like in the above-discussed 2D example, by your fragment shader. In the case of a 3D game though, your fragment shader will typically be more intricate than in a 2D game, as the effective pixel colors in a 3D game are not as easily determined by static data. Various effects, such as lighting, may play a role in the effective color that a pixel will have on screen. In WebGL, you have to implement all these effects yourself. The good news is that you can: as said above, WebGL lets you specify your own callback, the fragment shader, that determines the effective color of each pixel.

    Thus we see how WebGL is a general enough API to encompass the needs of both 2D and 3D applications. By letting you specify arbitrary vertex shaders, it allows implementing arbitrary coordinate transformations, including the complex ones that 3D games need to perform. By accepting arbitrary fragment shaders, it allows implementing arbitrary pixel color computations, including subtle lighting effects as found in 3D games. But the WebGL API isn’t specific to 3D graphics and can be used to implement almost any kind of realtime 2D or 3D graphics — it scales all the way down to 1980s era monochrome bitmap or wireframe games, if that’s what you want. The only thing that’s out of reach of WebGL is the most intensive rendering techniques that require tapping into recently added features of high-end graphics hardware. Even so, the plan is to keep advancing the WebGL feature set as is deemed appropriate to keep the right balance of portability vs features.

    The WebGL rendering pipeline

    So far we’ve discussed some aspects of how WebGL works, but mostly incidentally. Fortunately, it doesn’t take much more to explain in a systematic way how WebGL rendering proceeds.

    The key metaphor here is that of a pipeline. It’s important to understand it because it’s a universal feature of all current graphics hardware, and understanding it will help you instinctively write code that is more hardware-friendly, and thus, runs faster.

    GPUs are massively parallel processors, consisting of a large number of computation units designed to work in parallel with each other, and in parallel with the CPU. That is true even in mobile devices. With that in mind, graphics APIs such as WebGL are designed to be inherently friendly to such parallel architectures. On typical work loads, and when correctly used, WebGL allows the GPU to execute graphics commands in parallel with any CPU-side work, i.e. the GPU and the CPU should not have to wait for each other; and WebGL allows the GPU to max out its parallel processing power. It is in order to allow running on the GPU that these shaders are written in a dedicated GPU-friendly language rather than in JavaScript. It is in order to allow the GPU to run many shaders simultaneously that shaders are just callbacks handling one vertex or one pixel each — so that the GPU is free to run shaders on whichever GPU execution unit and in whichever order it pleases.

    The following diagram summarizes the WebGL rendering pipeline:

    The WebGL rendering pipeline

    The application sets up its vertex shader and fragment shader, and gives WebGL any data that these shaders will need to read from: vertex data describing the triangles to be drawn, bitmap data (called “textures”) that will be used by the fragment shader. Once this is set up, the rendering starts by executing the vertex shader for each vertex, which determines the canvas coordinates of triangles; the resulting triangles are then rasterized, which means that the list of pixels to be painted is determined; the fragment shader is then executed for each pixel, determining its color; finally, some framebuffer operation determines how this computed color affects the final framebuffer’s pixel color at this location (this final stage is where effects such as depth testing and transparency are implemented).

    GPU-side memory vs main memory

    Some GPUs, especially on desktop machines, use their own memory that’s separate from main memory. Other GPUs share the same memory as the rest of the system. As a WebGL developer, you can’t know what kind of system you’re running on. But that doesn’t matter, because WebGL forces you to think in terms of dedicated GPU memory.

    All what matters from a practical perspective is that:

    • WebGL rendering data must first be uploaded to special WebGL data structures. Uploading means copying data from general memory to WebGL-specific memory. These special WebGL data structures are called WebGL textures (bitmap images) and WebGL buffers (generic byte arrays).
    • Once that data is uploaded, rendering is really fast.
    • But uploading that data is generally slow.

    In other words, think of the GPU as a really fast machine, but one that’s really far away. As long as that machine can operate independently, it’s very efficient. But communicating with it from the outside takes very long. So you want to do most of the communication ahead of time, so that most of the rendering can happen independently and fast.

    Not all GPUs are actually so isolated from the rest of the system — but WebGL forces you to think in these terms so that your code will run efficiently no matter what particular GPU architecture a given client uses. WebGL data structures abstract the possibility of dedicated GPU memory.

    Some things that make graphics slow

    Finally, we can draw from what was said above a few general ideas about what can make graphics slow. This is by no means an exhaustive list, but it does cover some of the most usual causes of slowness. The idea is that such knowledge is useful to any programmer ever touching graphics code — regardless of whether they use WebGL. In this sense, learning some concepts around WebGL is useful for much more than just WebGL programming.

    Using the CPU for graphics is slow

    There is a reason why GPUs are found in all current client systems, and why they are so different from CPUs. To do fast graphics, you really need the parallel processing power of the GPU. Unfortunately, automatically using the GPU in a browser engine is a difficult task. Browser vendors do their best to use the GPU where appropriate, but it’s a hard problem. By using WebGL, you take ownership of this problem for your content.

    Having the GPU and the CPU wait for each other is slow

    The GPU is designed to be able to run in parallel with the CPU, independently. Inadvertently causing the GPU and CPU to wait for each other is a common cause of slowness. A typical example is reading back the contents of a WebGL framebuffer (the WebGL readPixels function). This may require the CPU to wait for the GPU to finish any queued rendering, and may then also require the GPU to wait for the CPU to have received the data. So as far as you can, think of the WebGL framebuffer as a write-only medium.

    Sending data to the GPU may be slow

    As mentioned above, GPU memory is abstracted by WebGL data structures such as textures. Such data is best uploaded once to WebGL and then used many times. Uploading new data too frequently is a typical cause of slowness: the uploading is slow by itself, and if you upload data right before rendering with it, the GPU has to wait for the data before it can proceed with rendering — so you’re effectively gating your rendering speed on slow memory transfers.

    Small rendering operations are slow

    GPUs are intended to be used to draw large batches of triangles at once. If you have 10,000 triangles to draw, doing it in one single operation (as WebGL allows) will be much faster than doing 10,000 separate draw operations of one triangle each. Think of a GPU as a very fast machine with a very long warm-up time. Better warm up once and do a large batch of work, than pay for the warm-up cost many times. Organizing your rendering into large batches does require some thinking, but it’s worth it.

    Where to learn WebGL

    We intentionally didn’t write a tutorial here because there already exist so many good ones:

    Allow me to also mention that talk I gave, as it has some particularly minimal examples.

  9. WebRTC Update: Our first implementation will be in release soon. Welcome to the Party! But Please Watch Your Head.

    I want to share some useful and exciting updates on Firefox’s WebRTC implementation and provide a sneak peak at some of our plans for WebRTC moving forward. I’ll then ask Adam Roach, who has worked in the VoIP/SIP space on IETF standards for over a decade and who joined the Mozilla WebRTC in November, to provide some historical background on the WebRTC feature itself and how things are progressing in general.

    Getting ready to release our first implementation of WebRTC on Desktop

    Firefox has made significant progress with our initial implementation of WebRTC on Desktop in terms of security and stability. For the last several weeks, PeerConnection and DataChannels have been pref’d on by default in Nightly and Aurora, and we expect to keep them pref’d on for all release phases of Firefox 22 (which means we expect WebRTC will go to Aurora, Beta and General Release).

    We also got a chance to update the DataChannels implementation in Firefox 22 to match the recent spec changes (agreed to at IETF last month). Note: the changes we needed to make to comply with the spec changes are not backwards compatible with previous DataChannels implementations (in Firefox 21 or earlier). So please use Firefox 22 and later for testing your DataChannels apps.

    TURN support has landed

    And there’s more good news. We just added TURN support to Firefox Nightly and are in the process of testing it. This is a big deal since TURN will increase the likelihood that a call will successfully connect, regardless of the types of NATs that the end points are behind.

    TURN (Traversal Using Relays behind NATs) is a standard for managing (allocating, using, and destroying) a relay session on a remote external server. This relay session enables WebRTC to connect when the NATs at both ends would otherwise cause the call to fail. Because TURN can introduce delay, especially if the TURN server is remote to both endpoints, and TURN servers can be expensive (because it has to handle all the media flows during a call), ICE typically uses TURN only when other methods (like STUN) to get media flowing during a call fail to work.

    WebRTC on Firefox for Android is Ready for Experimentation and Feedback

    Back in February at Mobile World Congress we showed exciting, new demos of WebRTC calls on Firefox for Android. We have just finished landing this code in Nightly. The code for both getUserMedia (gUM) and PeerConnection is behind a pref (as Desktop was initially), but you can enable it by setting both the media.navigator.enabled pref and the media.peerconnection.enabled pref to “true” (browse to about:config and search for media.navigator.enabled and media.peerconnection.enabled in the list of prefs).

    In the same list of prefs, you can also set media.navigator.permission.disabled to “true” to automatically give permission to access the camera/microphone and bypass the permission/selection dialog when testing gUM and WebRTC.

    This code is still in the early phases of testing, but we encourage you to try it, report back problems, and ask questions and provide feedback. Please be sure to mention “Android” if you are reporting a problem or providing feedback since we are tracking both Android and Desktop issues now. Like with Desktop, we will be working to improve, stabilize and expand this code over the next year.

    WebRTC on Firefox OS Coming Next

    Mozilla is also working hard to get this code running on Firefox OS. WebRTC on Firefox OS is not yet as far along as WebRTC on Firefox for Android, but the Firefox OS team is working to close the gap. You can follow Bug 750011 to track this work.

    Future WebRTC Features

    Since all our products share the gecko engine, improvements and new features made to core “platform” or gecko code typically benefit all our products. Over the next year we plan to make the following improvements:

    • Complete error and state reporting (spec compliant)
    • Recording API support
    • Persona integration
    • Multiple audio and video flows per Peer Connection (beyond 1 video flow and 1 audio flow)
    • Persistent permissions support (in the UX/UI)
    • AEC improvements
    • Improved call quality (especially audio latency)

    We hope to do even more, but these are on the top of our list. We also have a WebRTC documentation and help page that we’re working to fill out over the next few weeks and then keep up-to-date. That will have links to what we’ve implemented and what we’re working on, as well as ways for contributors to get involved.

    Moving Forward

    Although we can’t wait to release our first implementation of WebRTC on Desktop (which is a huge milestone for Mozilla and the WebRTC feature itself), I am still encouraging all developers experimenting with WebRTC to continue to use Nightly for the foreseeable future because that is where the latest and greatest features from the spec land and bugs get fixed first — and that is where your feedback will be most helpful.

    And even more importantly, the WebRTC spec itself is still being standardized. For more details on that, as well as some behind-the-scenes history on WebRTC, I hand the rest of this article off to Adam.

    -Maire Reavy, Product Manager, Mozilla’s Media Platform Team

    WebRTC is the Real Future of Communications

    This is Adam.

    About three years ago, my dear friend and VoIP visionary Henry Sinnreich spent some time over lunch trying to convince me that the real future of communications lay in the ability to make voice and video calls directly from the ubiquitous web browser. I can still envision him enthusiastically waving his smartphone around, emphasizing how pervasive web browsers had become. My response was that his proposal would require unprecedented cooperation between the IETF and W3C to make happen, and that it would demand a huge effort and commitment from the major browser vendors. In short: it’s a beautiful vision, but Herculean in scope.

    Then, something amazing happened.

    WebRTC sees the light of day

    Over the course of 2011, the groundwork for exactly such IETF/W3C collaboration was put in place, and a broad technical framework was designed. During 2012, Google and Mozilla began work in earnest to implement towards the developing standard.

    Last November, San Francisco hosted the first WebRTC expo. The opening keynote was packed to capacity, standing room only, with people spilling out into the hallway. During the following two days, we saw countless demos of nascent WebRTC services, and saw dozens of companies committed to working with the WebRTC ecosystem. David Jodoin shared with us the staggering fact that half of the ten largest US banks are already planning their WebRTC strategy.

    And in February, Mozilla and Google drove the golden spike into the WebRTC railroad by demonstrating a real time video call between Firefox and Chrome.

    So Where Are We?

    With that milestone, it’s tempting to view WebRTC as “almost done,” and easy to imagine that we’re just sanding down the rough edges right now. As much as I’d love that to be the case, there’s still a lot of work to be done.

    Last February in Boston, we had a joint interim meeting for the various standards working groups who are contributing to the WebRTC effort. Topics included issues ranging from the calling conventions of the WebRTC javascript APIs to the structure of how to signal multiple video streams – things that will be important for wide adoption of the standard. I’m not saying that the WebRTC standards effort is struggling. Having spent the past 16 years working on standards, I’m can assure you that this pace of development is perfectly normal and expected for a technology this ambitious. What I am saying is that the specification of something this big, something this important, and something with this many stakeholders takes a long time.

    Current state of standards

    Even if the standards work were complete today, the magnitude of what WebRTC is doing will take a long time to get implemented, to get debugged, to get right. Our golden spike interop moment took substantial work on both sides, and revealed a lot of shortcomings in both implementations. Last February also marked the advent of SIPit 30, which included the first actual WebRTC interop testing event. This testing predictably turned up several new bugs (both in our implementation as well as others’), on top of those limitations that we already knew about.

    When you add in all the features that I know neither Mozilla nor Google has begun work on, all the features that aren’t even specified yet, there’s easily a year of work left before we can start putting the polish on WebRTC.

    We’re furiously building the future of communications on the Internet, and it’s difficult not to be excited by the opportunities afforded by this technology. I couldn’t be more pleased by the warm reception that WebRTC has received. But we all need to keep in mind that this is still very much a work in progress.

    Come and play! But please watch your head.

    So, please, come in, look around, and play around with what we’re doing. But don’t expect everything to be sleek and finished yet. While we are doing our best to limit how the changing standards impact application developers and users, there will be inevitable changes as the specifications evolve and as we learn more about what works best. We’ll keep you up to date with those changes here on the Hacks blog and try to minimize their impact, but I fully expect application developers to have to make tweaks and adjustments as the platform evolves. Expect us to take us a few versions to get voice and video quality to a point that we’re all actually happy about. Most importantly, understand that no one’s implementation is going to completely match the rapidly evolving W3C specifications for quite a while.

    I’m sure we all want 2013 to be “The Year of WebRTC,” as some have already crowned it. And for early adopters, this is absolutely the time to be playing around with what’s possible, figuring out what doesn’t quite work the way you expect, and — above all — providing feedback to us so we can improve our implementation and improve the developing standards.

    As long as you’re in a position to deal with minor disruptions and changes; if you can handle things not quite working as described; if you are ready to roll up your sleeves and influence the direction WebRTC is going, then we’re ready for you. Bring your hard hat, and keep the lines of communication open.

    For those of you looking to deploy paid services, reliable channels to manage your customer relationships, mission critical applications: we want your feedback too, but temper your launch plans. I expect that we’ll have a stable platform that’s well and truly open for business some time next year.

    Credits: Original hardhat image from openclipart.org; Anthony Wing Kosner first applied the “golden spike” analogy to WebRTC interop.

  10. Localization community, tools & process, part 2 of 3 – A Node.js holiday season, part 10

    This is episode 10, out of a total 12, in the A Node.JS Holiday Season series from Mozilla’s Identity team. Let’s talk some more localization!

    El equipo de Localización

    In our previous post “How to Localize Your Node.js service”, we learned how to add i18n-abide to our code.

    We wrapped strings in both templates and JavaScript files.
    As developers, our work ends there. But the work of getting our prose localized has just begun.

    The toolchain

    Persona’s Node.js based L10N toolchain is compatible with the larger Mozilla community, but retains the friendliness and flexibility that Node is known for.

    The Mozilla project is nearly 15 years old, with one of the biggest (and coolest) L10n communities in Open Source.
    As a result, it has many existing tools, sometimes old crotchety tools.

    Gettext

    GNU Gettext is a toolchain that allows you to localize text from webapps or native apps. When you write your Node.js code and templates, you put in English strings like normal, but each string is wrapped in the function call ‘gettext’.

    gettext does a few different things for you:

    • During a build step, gettext extracts all the strings into a string catalog
    • At runtime, gettext replaces the English string with its localized equivalent.

    String extraction during the build step is how we’ll create a catalog of strings from your code and template files.

    All these strings end up in text files that end with the .po file suffix. I’ll refer to these as PO files.

    PO Files

    .PO files are plain text files with a specific format that the Gettext tools can read, write, and merge.

    An example snippet of a PO file named zhTW/LCMESSAGES/messages.po:

    #: resources/views/about.ejs:46
    msgid "Persona preserves your privacy"
    msgstr "Persona 保護您的隱私"

    We’ll examine this in more detail below, but we can see that msgid is the English String and msgstr has the Chinese translation. Comments are anything that start with a #.
    The comment above shows the location in the codebase the string is used.

    Gettext provides many other tools: it can manage Strings, PO files, etc. We’ll cover these in a bit.

    Why a new toolchain?

    Before we get into the Node modules that make working with Gettext easy, we must ask ourselves… why this toolchain?

    A year ago I did a deep survey of all the Node L10n and I18n modules.
    Most “reinvent the wheel”, creating their own JSON based formats for storing Strings.

    The Mozilla community already uses many tools such as POEdit, Verbatim, Translate Toolkit, and Pootle. Instead of forcing new tools on the community, we decided to make our tools work within their standards.

    Which is how we’ll tell our localizers what all of our strings are and how they will give us the finished translations. PO files are the data exchange medium of the L10n community.

    Coming from PHP and Python at Mozilla, I’ve found that Gettext works very well. As a web application gets large and has more prose, there are many nuances of localizing text that require the well tested tools and APIs of gettext.

    Providing PO Files to localizers

    So our code is marked up with gettext calls. Now what?
    Get thee a String wrangler. This person or persons can be you, a localization expert, or a build system guru.

    What does a String wrangler do?

    • First time extraction of Strings from the software
    • Extract new, changed, or note deleted strings in later releases
    • Prepare the PO files for each localizer team
    • Resolve conflicts and mark strings which have changed or been deleted

    This may sound complicated, but there is some good news!
    These steps can be automated. Most of these steps can be automated. When problems crop up, the string wrangler is responsible for them.

    msginit, xgettext, msgfmt and other GNU Gettext tools tools are a powerful way to manage catalogs of Strings. Only the String wrangler needs these tools, most developers (as well as Node.js) can remain blissfully ignorant of them.

    Setup locale filesystem

    $ mkdir -p locale/templates/LC_MESSAGES

    This directory is where we’ll store the PO template or POT files. The POT files are used by the Gettext toolchain.

    Extract the Strings

    In the last post, we installed i18n-abide with

    npm install i18n-abide

    Among other command line tools, it provides extract-pot.
    To extract strings into a locale directory, we would use this command.

    mkdir -p locale/templates/LC_MESSAGES
    $ ./node_modules/.bin/extract-pot --locale locale .

    extract-pot creates a .POT file, which is a PO file Template.

    This script will recursively look through your source code and extract Strings.

    So how does extract-pot create these POT files? You can use traditional GNU Gettext utilities, but we’ve also written a Node module jsxgettext, which is a nice cross platform way to go.
    extract-pot uses jsxgettext behind the scenes.

    jsxgettext parses your source files looking for uses of Gettext functions, and then it extracts just the String part. It then formats a PO file, which is compatible with any other Gettext tool.

    Here is an excerpt from a POT File.

    #: resources/views/about.ejs:46
    msgid "Persona preserves your privacy"
    msgstr ""
     
    #: resources/views/about.ejs:47
    msgid ""
    "Persona does not track your activity around the Web. It creates a wall "
    "between signing you in and what you do once you're there. The history of "
    "what sites you visit is stored only on your own computer."
    msgstr ""
    ""
     
    #: resources/views/about.ejs:51
    msgid "Persona for developers"
    msgstr ""

    Later, we’ll create PO files from this template.

    After your localizers edit their PO file, it will look more like this:

    #: resources/views/about.ejs:46
    msgid "Persona preserves your privacy"
    msgstr "Persona 保護您的隱私"
     
    #: resources/views/about.ejs:47
    msgid ""
    "Persona does not track your activity around the Web. It creates a wall "
    "between signing you in and what you do once you're there. The history of "
    "what sites you visit is stored only on your own computer."
    msgstr ""
    "Persona 只是連結您登入過程的一座橋樑,不會追蹤您在網路上的行為。您的網頁瀏覽"
    "紀錄只會留在您自己的電腦當中。"
     
    #: resources/views/about.ejs:51
    msgid "Persona for developers"
    msgstr "Persona 的開發人員資訊"

    You can view the complete zh_TW PO file, to get a better idea.

    Create a locale

    The Gettext tool msginit is used to create an empty PO file for a target locale, based on our POT file.

    $ for l in en_US de es; do
        mkdir -p locale/${l}/LC_MESSAGES/
        msginit --input=./locale/templates/LC_MESSAGES/messages.pot \
                --output-file=./locale/${l}/LC_MESSAGES/messages.po \
                -l ${l}
      done

    We can see that we’ve created English, German, and Spanish PO files.

    PO files

    So we’ve extracted our Strings and created a bunch of locales.

    Here is a sample file system layout:

    locale/
      el/
        LC_MESSAGES/
          messages.po
      en_US
        LC_MESSAGES/
          messages.po
      es
        LC_MESSAGES/
          messages.po
      templates
        LC_MESSAGES/
          messages.pot

    You can give your localizers access to this part of your codebase. The Spanish team will need access to locale/es/LC_MESSAGES/messages.po for example. If you have a really big team, you might have es-ES for Spain’s Spanish and es-AR for Argentinian Spanish, instead of just a base es for all Spanish locales.

    You can grow the number of locales over time.

    Merge String changes

    Release after release, you’ll add new Strings and change or delete others. You’ll need to update all of the PO files with these changes.

    Gettext has powerful tools to make this easy.

    We provide a wrapper shell script called merge-po.sh which uses GNU Gettext’s msgmerge under the covers.

    Let’s put the i18n-abide tools in our path:

    $ export PATH=$PATH:node_modules/i18n-abide/bin

    And run a String merge:

    $ ./node_modules/.bin/extract-pot --locale locale .
    $ merge_po.sh ./locale

    Just like the first time… extract-pot grabs all the Strings and updates the POT file. Next merge_po.sh updates each locale’s PO file to match our codebase. You can now ask your L10n teams to localize any new or changed Strings.

    Gettext versus Not Invented Here

    It is easy enough to throw out Gettext and re-invent the wheel using a new JSON format. This is the strategy that most node modules take.
    If you have a healthy application, as you add locales and develop new features, you will find yourself frustrated by a thousand paper cuts.
    Without merge_po.sh, you’ll have to write your own merge tools. This is because if you have 30 locales, you’ll need to update 30 JSON files without losing the work they’ve already done.

    Gettext offers a powerful merge feature, which will save us many painful hours of coordination.

    Wrapping Up

    Now that we have various catalogs of strings in a po file per locale, we can hand these off to our localization teams.

    It is always a good idea to talk to the localizers before you start the extract / merge steps. Give them a heads up on when the PO files will be ready, how many strings they have, and when you’d like to have the localization finished by. Also, you can read Gettext tutorials, as they are all compatible with our setup.

    Okay, go get your Strings translated and in the next installment, we’ll put them to work!

    Previous articles in the series

    This was part ten in a series with a total of 12 posts about Node.js. The previous ones are: