Mozilla

Event Articles

Sort by:

View:

  1. Announcing Firefox OS App Workshops

    Madrid, Bogotá, Warsaw & Beyond


    blaze_your_fxosFirefox OS phones will be available to consumers in several countries this summer, and they will be looking for great apps to install from Firefox Marketplace. If you know how to build mobile app experiences with HTML5 and JavaScript, we’re looking for you—especially if you’d like to develop apps in Spanish, Polish or Portuguese! If you’re fast and focused, this is the time to take first-mover advantage.

    Our first three hands-on technical workshops for skilled web app developers take place in Madrid, Spain, on Saturday, April 20; in Bogotá, Colombia on Saturday, May 18; and in Warsaw, Poland on Saturday, June 1. We hope to announce more workshops in more locales later in the season.

    You must apply to attend: We’ll ask you to show us your JavaScript expertise and/or past experience building web apps and working with web APIs.

    Who Should Apply


    We’re looking for small teams or solo developers with solid ideas and strong web development skills. If you’ve already built a successful PhoneGap, Chrome, webOS, Blackberry WebWorks app, or other open web app for mobile or desktop, we’d love to work with you on migrating your existing app or building a new one. Mozilla engineers and tech evangelists will help participants complete an app or port an existing one to the Firefox OS phone and into the Firefox Marketplace.

    Please apply now if you’d like to attend any of these workshops. We’ll be reviewing applications as they come in, with a focus on our first locations. We’ll get back to you as soon as possible.

    Moz_Ldn

    What We’ll Offer

    • A great place to hack.
    • Hands-on help from Firefox OS developers.
    • Food, drink and demos. And t-shirts, of course.
    • More code, less talk.
    • Firefox OS Developer Preview phones, really!

    How to Prepare

    There’s more than one way to start building Firefox apps. Here are a few resources to get you started:

    Firefox OS Workshop application form.

  2. Firefox OS App Days: It’s a Wrap!

    Over the last few weeks, Mozilla sponsored a worldwide series of hack days for developers to learn about creating apps for Firefox OS. Dubbed “Firefox OS App Days,” the events took place in more than 25 locales around the world, starting on 19 January in Mountain View, California and ending on 2 February in Berlin, Germany. The events were organized with the support of our Mozilla Reps, the Mozilla community and Firefox OS partners Telefonica and Deutsche Telekom in Africa, Asia, Europe, New Zealand, as well as North and South America.

    Hacking

    Hacking at a Firefox OS App Day

    2,500 New Developers for Firefox OS

    Our goals were to educate developers around the world about Firefox OS and open web apps and inspire them to start building apps for the Firefox Marketplace.

    We engaged with over 2,500 developers worldwide. Hundreds of apps were demonstrated at the events, and many of them have already been submitted to the Marketplace. Some of the apps developed include:

    • Bessa – An image editor for Firefox OS, demonstrated in Berlin
    • Web Sliding Puzzle – a sliding puzzle game made from the Firefox OS App Days logo, demonstrated in Paris by Mathieu Pillard
    • Ash’s Rising – a strategy game, demonstrated in Toronto
    • Travel Saver – a local travel app, demonstrated in Warsaw
    • FoxKehCalc – a Fox-themed calculator, demonstrated in Tokyo

    In addition to apps, we saw over two million impressions of the #firefoxosappdays hashtag on Twitter, and hundreds of photos from the events were posted on Flickr, Facebook and other social media sites.

    Sample of Apps Developed at Firefox OS App Days

    Sample of Apps Developed at Firefox OS App Days

    Going Forward

    Thanks to everyone who participated in the App Days, and if you haven’t submitted your app to the Marketplace yet, please do so as soon as you can. If you have a website or github repo hosting your app or a post about your App Day experience, please add your links to the comments below. We’d love to hear from you and check out your apps in progress. If you missed the events, or there wasn’t one in your area, stay tuned — our Mozilla Reps team plans to enable more in the near future.

    And if you are just hearing about Firefox OS, and want to get started developing apps on your own, the Developer Hub, the Hacks Blog and the Mozilla Developer Network are excellent places to start. To stay in touch with upcoming App Days, developer phone releases, and app development news, subscribe to our monthly Firefox Apps & Hacks newsletter.

  3. Join Us for Firefox OS App Days

    Firefox OS App DaysIf you’re a developer interested in web technologies, I’d like to invite you to participate in Firefox OS App Days, a worldwide set of 20+ hack days organized by Mozilla to help you get started developing apps for Firefox OS.

    At each App Day event, you’ll have the opportunity to learn, hack and celebrate Firefox OS, Mozilla’s open source operating system for the mobile web. Technologists and developers from Mozilla will present tools and technology built to extend and support the Web platform, including mobile Web APIs to access device hardware features such as the accelerometer. We’ll also show you how to use the browser-based Firefox OS Simulator to view and test mobile apps on the desktop.

    Firefox OS App Days are a chance to kick start creation of apps for the Firefox Marketplace, and represent a great opportunity to build new apps or optimize existing HTML5 apps for Firefox OS, as well as demo your projects to an audience of peers, tech leaders and innovators.

    We’re exciting to be working with our Mozilla Reps, who are helping organize these events, and with our partners Deutsche Telecom and Telefónica, who are supporting a number of them across the world.

    We look forward to seeing you there!

    Event Details

    The agenda for these all-day events will be customized for each locale and venue, but a typical schedule might include:

    • 08:30 – 09:30 Registration. Light breakfast.
    • 09:30 – 11:30 Firefox OS, Firefox Marketplace & Mozilla Apps Ecosystem.
    • 11:30 – 12:00 Video. Q&A.
    • 12:00 – 13:00 Lunch
    • 13:00 – 17:00 App hacking.
    • 17:30 – 19:00 Demos & party.

    Signing Up

    Firefox OS App Days launch on 19 January and continue through 2 February, with the majority of the events taking place on 26 January. This wiki page has a master list of all the events and their registration forms, from Sao Paulo to Warsaw to Nairobi to Wellington — and many more. Find the App Day nearest you and register. (N.B. Venue capacities vary, but most are limited to 100 attendees so don’t delay.)

    Getting Ready

    Plan on bringing your Linux, Mac or Windows development machine and an idea for an app you’d like to develop for the Firefox Marketplace. If you have an Android device, bring it along, too. You can see the Firefox Marketplace in action on the Aurora version of Firefox for Android.

    If you want to get started before the event, review the material below and bring an HTML5 app that you’ve begun and want to continue, get feedback on or recruit co-developers for.

  4. Selling HTML5 to a consulting company

    I just spent a weekend in a resort in Mallorca. I was invited by an IT consultancy from Frankfurt to join them at their off-site and give a two hour (re)introduction to HTML5.

    The audience and the challenge

    The consultancy is very successful in what they do and are very much a Java / native code shop. Their clients are insurance companies, banks and the like which means the topic of HTML5 came up only peripherally in their discussions. With more and more clients looking for iPad apps and other demands for cross-platform solutions they wanted to know more about HTML5, what is possible and what can be done.

    This sounded like a great opportunity to go out of my comfort zone and see how good my skills as an advocate for web technology are. Ever the optimist, I also considered this a great opportunity to inspire in a field in which IT is used to make a difference to the lives of a lot of people. So I said yes.

    The presentation

    Without any preparation (there was no time), without knowing who the audience will be (turns out it was the whole company, including non-technical employees and some contractors) and being asked to deliver the talk in German I found myself in front of a room with about 70 people, set up my computer (which failed to do so the first time, it will go to the farm of old computers soon), happily realised that the WIFI worked and went right into it.

    Instead of talking about HTML5 in isolation, I thought it best to show off the web as a development platform and the advancements that happened in the last few years that may not be known. Turns out this was exactly what was needed and I’ve had a lot of 1:1 conversations later on with people who want to seriously give HTML5 a go. Their idea is converting some of the tools used now in the company to move from Java and fixed-size, Photoshop driven interfaces to more flexible solutions using HTML5 and JavaScript. Score, I’d say.

    What I’ve done

    Seeing that it was more or less an open 2.5 hours show and tell with questions from the audience I have no notes. So here is a list of the things I showed and mentioned which had quite some impact and the techniques how I presented them.

    Laying the groundwork

    I started by explaining the need for HTML5 (document to app transition) and that with a unified and defined HTML parser, we finally have a level playing field across browsers. I explained that a face to face comparison of HTML5 apps and native apps is not fair as the performance of browsers and webviews is hindered in many cases by hardware and the OS. Which means that browers can not use the same resources native code can which of course is a difference in performance. That said, web apps can be more nimble and update much easier than native ones.

    In the spirit of pre-emptive writing I also took the Mark Zuckerberg quote from TechCrunch disrupt a few weeks ago and explained that he didn’t say that HTML5 was a mistake but that the way they approached it was. I also pointed out his quote stating that Facebook’s number of mobile web users are more than the ones of Android and iOS combined.

    Techniques

    I think the most impactful part of the presentation was that I didn’t prepare any slides but used the browser to show everything to the audience. I used Mozilla Thimble to show live code and the immediate impact of my changes. I used the developer tools in Firefox and Chrome to show how to change a live site and try out some of the new technology in existing pages instead of showing demos that are impressive but don’t apply to the audience.

    Platform demos

    All in all my aim was to show that HTML5 is an interesting thing to bet on as it is part of the web ecosystem. This means instead of starting with code I showed:

    • Collaborative editing using online editors
    • GitHub as a place to get code, meet other developers and submit fixes
    • Developer tools of browsers to show that now we can test and fix things outside of a code first, deploy, find bug development cycle
    • MDN as a resource for demos and documentation
    • Browserstack.com to test on browsers and operating system you don’t have

    Technology demos

    The technology demos were simple, but I got lots of good feedback on them as I kept them relevant.

    • Introducing HTML5 form elements and showing that simply adding a number attribute and a required attribute means that this field will always be a number and users can not send the form (in the browser) without satisfactorily having filled the field. This means there is no need for writing client-side validation any longer which is a big headache for non-JavaScript enthusiasts.
    • Adding a video element in the page, playing it with a right-click, adding the controls attribute to add controls and adding a CSS transformation (rotation for example) to prove that video is just another page element in a HTML5 world.
    • Showing a simple example on how to use MediaQueries to do responsive designs and showing the Responsive Mode in the Firefox developer tools
    • Showing a simple hover state in CSS and adding a transition to prove that these days you can make things look smooth very simply without having to add another JavaScript
    • Showing how to progressively enhance a simple HTML document using some CSS transitions to make it look much more engaging.
    • Showing the simplicity of local storage (using the 123done task list example) and explaining how AppCache and manifest files can turn a web page into a locally cached app.
    • Showing how easy it is to plot something in the page using Canvas and explaining that canvas using drag and drop can also allow for image cropping and thumbnail generation.
    • Showing that file uploaders can be much more convenient for the end users these days with the Flickr image uploader as an example
    • Showing how to make a video interact with web content using Mozilla Popcorn – explaining that this could be used for interactive training materials

    Near future gazing

    As requested by the audience I also showcased some of the near-future parts of web tech:

    • The toycam demo explaining that it uses WebRTC which can be used to get video input and manipulate it using WebGL live in the browser. I also pointed out that WebRTC is not limited to that but could be used for all kind of other data streaming tasks
    • Firefox OS, how it is architected and why we do it
    • Mozilla’s Web APIs and how they are used in Firefox OS (showing the FFOS desktop build, playing with the dialer and showing that even they keytones are created using JavaScript)
    • Explaining Persona and how it allows you to simply verify users on the web without having to ask for a username and password
    • Showing off the Banabread demo and explaining how it was done by converting C++ code using Emscripten
    • Showing the Mozilla App store preview and how an HTML5 app can be installed natively and run from the Application folder and full-screen

    Your turn

    All in all I have to say this was thoroughly enjoyable and I got out of it with a sense of satisfaction of having narrowed the gap between the webdesign world and the world of corporate IT a bit more. Give it a go, too, I am sure you’ll enjoy it.

  5. Push the Web Further at Hackanooga

    If you enjoy pushing the limits of the open web platform, we want you to join us September 14-16 in The Gig City (Chattanooga, Tennessee) for a weekend of good food, good friends, and—most importantly—a unique opportunity to play on a citywide, 1 gigabit per second network.

    What happens when you hack with WebGL, WebRTC, Websockets and video—the coolest, newest open web technologies—on a network 200 times faster than the typical residential internet connection? What kinds of apps become possible?

    Travel grants

    If you’re already sold, head on over and apply. We’re awarding a number of grants for you to hang and hack in the American south. Your flight, meals, and accommodation will be paid for. And you’ll leave having made something cool—something only possible on a gigabit network.

    Just take 5 minutes to fill out this form, and we’ll get back to you by August 21st.

    If you need some convincing, read on.

    No more constraints

    If you’ve ever written software for mobile or web, you know all about constraints.

    Sometimes those constraints are plain as day. You can’t do heavy computation on a mobile device, because they’re relatively slow and you’ll quickly drain the battery. Apps written for mobile should be lean.

    Sometimes the constraints are more implicit. They’re just baked into your understanding of how development works.

    In a web app, you have a client and server. The connectivity between client and server is scarce, so you want to minimize the data traveling across the network. You don’t want your users sitting around waiting for an app to load, or for a video to buffer. Apps written for web should be frugal with data transfer.

    But if all of your users are on fast networks—think 100Mbps to 1Gbps—these sorts of constraints start to matter less.

    On a superfast network, it doesn’t really matter where the data lives in the network. It can travel so fast that it’s virtually instantaneous. It can travel faster than your computer can write the data to your hard drive.

    On a superfast network, it also doesn’t matter where the computation happens. It’s already the case with cloud computing that the very computation-heavy tasks and storage take place remotely. Your computer is just a thin client to the network. Think about what that would mean on a gigabit network—your entire operating system, identity and filesystem could be rapidly accessed from anywhere on the network.

    Real-time crunching of very heavy data could happen anywhere on the network. Anything, really—could happen anywhere, on the network.

    Hacking for public benefit

    OK, so what? New paradigms are fun to think about, but none of this matters until it has an impact on real people.

    That’s what US Ignite is all about—showing what kinds of apps are only possible on gigabit networks. Demonstrating that if the U.S. becomes more competitive in broadband & networks, people will be happier, healthier and more well informed.

    On the ideas front, we have a massive brainstorm underway around the question of “what’s possible with gigabit networks.”

    And on the coding front, we’ve already held the first Ignite hack days in San Francisco, with some interesting results. Hackanooga is already gearing up to be a blast.

    How it will work

    We have room for 80 participants. This is not a spectator sport—everyone who attends must contribute to coding, designing, and testing real prototype applications.

    Between now and the event, we’ll work together to form teams around specific app ideas. We’ll try to pick app ideas on which we can make substantial progress over the course of the weekend. If you want to work on a specific type of problem, or a specific technology, let us know.

    We’ll prepare your team as much as possible, rounding up resources, shoring up expertise, and connecting you with local institutions as appropriate.

    When you arrive, you’ll meet the whole Hackanooga class of 2012; eat, drink and be merry. Then, we’ll get out of your way so you can make.

    You’ll have access to wired, 1Gbps connectivity, local cloud infrastructure, and lots of coffee. We’ll show off all the results at the end.

    Work from this weekend can evolve to become submissions in the Mozilla Ignite apps challenge, with nearly $500k in awards for your prototype apps. It’s a great way to meet team members & partner institutions to get a head start on the challenge.

    Apply now!

    We’ll be flying around 10 participants from all over to attend Hackanooga. If you’re interested, apply here!

    Not only is Chattanooga an awesome place to visit, but you’ll be charting a far-out future for the web, pushing today’s technologies on tomorrow’s networks.

    If you have any questions, shoot us an email at ignite AT mozillafoundation DOT org, and make sure to follow @mozillaignite for the latest news.

  6. Dr.Seuss and Persona – Mozilla at Webvisions Barcelona

    Last week Webvisions, a 3 day conference covering everything UX and web lured a few hundred enthusiasts to the sunny Barcelona. Mozilla sent Crystal Beasley and Chris Heilmann to talk about logging into the web with Persona and the future of the web.

    Crystal gave a workshop on login systems and how to improve them and a talk on 13 signs your UX needs an exorcism.

    Having watched The Lorax on the flight over, and seeing that the audience consisted of a lot of parents we thought it a good idea to write the “Future of HTML5 and the web” talk in the style of Dr. Seuss so people can read to their kids and reflect on what we tried to convey at the same time. Many thanks also to Eric Shepherd for some rhyming help.

    Here are just the rhymes with all the links (also available on GitHub):

    1. There’s a big web out there, 
      it’s huge – I tell you, 
      it spans the whole world
      but it was boring and blue
    2. Then change came about, 
      in the shape of a fox
      it was cunning and open
      and it broke all the locks.
    3. Others showed up,
      and joined the good fight
      a singer, an adventurer
      and a shiny new knight.
    4. These all played together
      and spoke the same tongue
      which brought back old players,
      to join them in song. 
    5. A standard was set, 
      and it changed a few things,
      a richer web for apps
      was the promise it brings.
    6. Bah, standards! Who needs them?
      Some flashy ones said, 
      till a phone that was smart,
      kicked them out of its bed.
    7. We moved past one standard, 
      as web work is richer,
      so HTML5 and friends,
      paints a much better <picture>.
    8. Things that are fun
      should be shiny and cool,
      that’s why the new standards
      bring many a new tool.
    9. Watching and hearing,
      are what people like to do.
      Using <audio> and <video> is simple,
      and you can do it, too.
    10. Both of them are web-native,
      which is a reason to clap.
      They can interact with other content,
      and Mozilla Popcorn makes that a snap.
    11. If beats and frequencies are
      what you need to play,
      check the Web Audio API -
      it gives you just that – even today.
    12. To play nice with batteries,
      use requestAnimationFrame(),
      don’t let it stop you
      that it has such a long name.
    13. 3D graphics are thrilling,
      as gamers will tell,
      we now have that on the web
      and it is called WebGL.
    14. Water goes everywhere you pour it,
      just ask Chris about his Macbook Air :(
      MediaQueries allow you be as fluid
      and respond instead of despair.
    15. Natural movements are smooth,
      just open your eyes.
      With CSS animation, transforms and transition,
      you can mimic this – nice!
    16. “The web means you need to be online”,
      I hear smartypants gloat,
      well, we have offline storage,
      so there – take your coat.
    17. Got a cam and some friends,
      and do you want to chat?
      WebRTC is what you need,
      even to show off your cat.
    18. Rhymes sometimes don’t come easy,
      as you just became aware.
      So let’s just move ahead quickly,
      this was just too much to bear.
    19. An artist needs a <canvas>,
      and HTML5 gave us that.
      Read, write and convert pixels,
      All in the client, it’s mad!
    20. “We don’t have rich elements!”
      many people complain,
      Use Web Components with X-Tag
      and create them – easy to maintain.
    21. Passwords are tough, 
      it is easy to see, 
      so allow login with emails,
      using BrowserID.
    22. The web is a mess,
      with third party buttons abound.
      Web Intents make them pointless,
      let’s not have them around.
    23. By design HTML5 is forgiving,
      its parser is great.
      It didn’t want to break the web,
      so let’s not break it in its stead.
    24. Course you can write weird things,
      and they will work – there’s no doubt.
      But will they be readable by others?
      This is what it’s about.
    25. You don’t create for yourself,
      or your friends who are the same.
      You develop for the next guy,
      so make sure you’re not to blame.
    26. You don’t jump in a river,
      if you don’t know its depth.
      On the web using Modernizr,
      should be your first step.
    27. Give new stuff to new players,
      and use it to enhance.
      Don’t support when it’s not needed
      IE6 walks – it can’t dance!
    28. With a vendor prefix browsers tell you
      “this is not ready”.
      So by all means, give them a go,
      but don’t expect to go steady
    29. And those prefixes vanish,
      you mustn’t forget!
      End with a prefixless version,
      It’s your very best bet.
    30. So we ask you to help us,
      build a web that will last.
      Be future friendly and look forward,
      and stop building for the past.
    31. The web is on phones,
      tablets, computers, TVs.
      We have to move it forward.
      or else our existence will cease.
    32. Hardware that is locked up,
      is not what we are about,
      so check out Firefox OS,
      if you like the web – you will like it – no doubt.
    33. Last but not least,
      if you find something’s wrong
      please file a bug and tell us,
      this is how things get done.
    34. So there you have a lot to play with,
      check out and share.
      We really want you to do that,
      come on, show us you care.
    35. Unless someone like you
      cares a whole awful lot,
      nothing is going to get better.
      It’s not.
    36. So well done for reading and listening,
      and going great lengths,
      that’s all we got time for today,
      so good-bye and thanks!

    Encountering a lot of hardware problems we couldn’t do a recording of the talk so I made a screencast of the presentation available on YouTube.

    Alternatively, you can also have a video version with just the rhymes

    Other formats for you to download and use:

    The audience reaction was very positive and we found out that when you rhyme your talk it flows much faster. The 45 minute slot was 20 minutes of our talk and another 25 minutes explaining in detail what we covered in a Q&A.

    All in all Webvisions was a great event and watch out for videos of the other talks being available soon and other slides on the web.

  7. Report from Ancona: CONFSL 2012

    Last month I attended CONFSL, an interesting conference about Free Software that took place in Ancona, Italy. I had the opportunity to meet other Mozillians (Iacopo Benesperi and Francesco Lodolo) and to talk to some people working for Mozilla: Tristan Nitot, Marcia Knous, Marco Bonardo, Paolo Amadini. They are amazing people who make our lives better with evangelism, development, quality assurance, translations and so on.

    The most impressive thing for me was to see how they are passionate about Mozilla and its mission. They all work harder than a typical company employee! This is what Mozilla is about: a great community to be involved in and a great organization to work for. If you believe that what you do will improve users’ freedom, you will work a lot faster and better.

    CONFSL 2012 - Mozilla Group

    But let me talk about the conference itself: there were many people from all over Italy and there were many interesting talks. Tristan’s keynote was about the Mozilla mission and the new projects to accomplish it: Firefox Mobile, Web Apps and B2G. (His talk was the most followed, and he did also some interviews for the Italian press).

    It is really exciting to see something that you’ve worked on (Web Apps) demoed! Especially if people show a lot of interest in it. Some of the recurring questions I heard were:
    1) Can we develop using “low-level code” for b2g?
    2) Do the webapps need an internet connection?

    These are, in my opinion, the most important questions we need to answer and let developers and users know. Here are my answers:

    1) Actually with JS and a pinch of WebAPIs, you can use every feature of the underlying hardware. There’s no need to write “low-level code”.
    2) This is probably caused by the name of the project. A lot of people think that web apps will work exclusively with an Internet connection, but this isn’t true at all! Web Apps are apps written for a particularly simple and powerful framework: the browser. You can’t see any difference between “native” apps and Web Apps. To
    create a web app that works offline, you just need to use this API:
    https://developer.mozilla.org/en/Offline_resources_in_Firefox.

    Another interesting talk was led by Marco Bonardo and Marcia Knous. It was about QA and how Mozilla successfully ensures quality for its software, also with the help of users. It was really interesting also because I’m studying testing and quality assurance for an University exam. And I saw something I’ve started to use: MozTrap, a really powerful manual test case management system written by Mozilla.

    The last (but not the least) Mozilla talk was about B2G. There were two devices with B2G installed and people were really excited to try them. They were also interested in how to create applications for the device and how to ship them. There’s still a bit of confusion about these matters because the project is still so young and devices are scarce. Someone asked if development was happening behind closed doors.

    Obviously not! Like every other Mozilla project, this is free as in freedom and you can participate in the development simply. You can start with pulling the repo or visiting the wiki. Just remember that the project is still in its
    early stages and so it isn’t stable for everyday use.

    There were also other interesting talks about free software, for example a keynote by Stefano Zacchiroli (the Debian project leader) and many talks about how to spread free software in Italian schools and public administrations and how to make these PAs use open data formats. There was also an interesting talk about Mozilla Open Badges, not held by Mozilla.

    So thanks to Mozilla, Tristan, Marcia, Marco, Paolo, Iacopo and Francesco. “Ci vediamo presto!”

  8. Mozilla at SudWeb 2012, France

    SudWeb is a Web event located in the south of France. The second edition took place in Toulouse, “The Pink City” for two days of fun and Web on Friday, May 25th and Saturday, May 26th. SudWeb is unique in the French web landscape, it mainly focuses on professional best practices and sharing knowledge. It’s led by a few volunteers: These ten people were able to drive a kick-ass event that gathered more than 150 French web professionals (and a few foreign guests), from students to highly skilled web designers & developers.

    The audience is waiting

    Mozilla had a strong presence both as an official sponsor and by sending some notable French Mozillians.

    Mozilla at SudWeb

    For the official part, two big guys were sent: Anthony Ricaud and myself. For the unofficial part, we had the opportunity to meet up with: Thomas Bassetto, David Bruant and Théo Chevalier. Thanks to you guys, you rock :)

    Day 1: Conferences

    The first day was dedicated to a series of talks about the way web professionals can share and improve their skills about open Web technologies.

    Anthony gave the last talk of the day. He talked about the personal benefits of contributing to a FLOSS project whether as designers, developers or project manager. In my opinion, he ended the day with an awesome piece of engagement and inspiration.

    Anthony Speaking

    As for me, I was supposed to simply attend and represent Mozilla, but at the last moment a speaker canceled his talk and the staff asked me to replace him. I took this opportunity to talk about MDN and the documentation of the Open Web.

    That first day was full of very good talks: I noticed Thomas Bassetto, who spoke about using web technologies outside the browser on uncommon devices; Bruce Lawson, who spoke about the problem with technology monocultures on the Web (IE6 a decade ago, Webkit on mobile today); and Nicolas Perriault, who gave an inspiring lightning talk about the CasperJS library and the usefulness of the headless browser to automate functional unit testing.

    Day 2: Barcamp

    The second day was built as a Barcamp. David Bruant and I took the opportunity to run a small workshop about documenting the open web: We met a few people who want to know more about MDN and we ran a mini doc sprint to show what it is.

    A workshop about dev tools

    Anthony also ran a workshop with Karl Dubost from Opera Software. They launched an impressive discussion about the dev tools available in browsers. This was an opportunity to understand first hand what tool users were expecting, what tools were missing, what was cool with the existing tools and what was still needed.

    Anthony, David, Théo and I also spent time all day long answering questions about Mozilla, its mission, its products and its actions.

    The swag, the swag!

    Those two days were a big hit and all the attendees really look forward to the next edition of SudWeb.

  9. MDN hack day tomorrow in the #mozldn space in London, England

    We cleared the aftermath of yesterday’s epic Geek Quiz (photo proof here) but there is no rest for the wicked in the London Mozilla Space. Tomorrow (yes, that day after this one) we’ll run an MDN hack day here in 101 St. Martin’s Lane, London (5 minute footwalk from Leicester Square or 10 from Charing Cross).

    If you have no idea what hack day in MDN means, check out Tristan Nitot’s introductory post.

    MDN hack day

    There are still tickets available, so go to http://mdn-hackday-london.eventbrite.com/ and sign up if you haven’t yet.

    There’ll be food (well, Pizza, we thought Fondue would be too much of a mess) and drink (the non-fermented and fermented kind, we don’t discriminate), lots of experts from Mozilla to pester about your wishes for our products and to learn all about what we are doing in London, a few Boot to Gecko phones to play with and quite a few talks to give you inspiration to hack:

    Schedule (subject to change slightly but you get the idea of who is speaking):

    8:30 Registration & Light Breakfast
    9:00 Welcome Remarks Christian Heilmann
    9:15 Christian Heilmann – The New Web Challenge
    9:45 Rob Hawkes – B2G
    10:15 Chloe Varelidi – Catch Them Young – Meet the Web Arcade
    10:45 Brad Lassey – Fennec Goes Native
    11:15 Break
    11:30 Heather Arthur – Firefox DevTools
    12:00 Jean Yves Perrier – BrowserID
    12:30 Rob Hawkes – Games
    1:00 Paul Lewis – WebGL Live Demos
    1:30 Lunch (Lightening Talk/Discussion Group Sign Up)
    2:30 Hacking
    5:15 Presentations and Lightning Talks
    5:30 Refreshments

    The hashtag to use is #mdnhackday, the wireless is open, the Fox is out there, let’s do this!

  10. DOM MutationObserver – reacting to DOM changes without killing browser performance.

    DOM Mutation Events seemed like a great idea at the time – as web developers create a more dynamic web it seems natural that we would welcome the ability to listen for changes in the DOM and react to them. In practice however DOM Mutation Events were a major performance and stability issue and have been deprecated for over a year.

    The original idea behind DOM Mutation Events is still appealing, however, and so in September 2011 a group of Google and Mozilla engineers announced a new proposal that would offer similar functionality with improved performance: DOM MutationObserver. This new DOM Api is available in Firefox and Webkit nightly builds, as well as Chrome 18.

    At it’s simplest, a MutationObserver implementation looks like this:

    // select the target node
    var target = document.querySelector('#some-id');
     
    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            console.log(mutation.type);
        });    
    });
     
    // configuration of the observer:
    var config = { attributes: true, childList: true, characterData: true }
     
    // pass in the target node, as well as the observer options
    observer.observe(target, config);
     
    // later, you can stop observing
    observer.disconnect();

    The key advantage to this new specification over the deprecated DOM Mutation Events spec is one of efficiency. If you are observing a node for changes, your callback will not be fired until the DOM has finished changing. When the callback is triggered, it is supplied a list of the changes to the DOM, which you can then loop through and choose to react to.

    This also means that any code you write will need to process the observer results in order to react to the changes you are looking for. Here is a compact example of an observer that listens for changes in an editable ordered list:

    <!DOCTYPE html>
    <ol contenteditable oninput="">
      <li>Press enter</li>
    </ol>
    <script>
      var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
      var list = document.querySelector('ol');
     
      var observer = new MutationObserver(function(mutations) {  
        mutations.forEach(function(mutation) {
          if (mutation.type === 'childList') {
            var list_values = [].slice.call(list.children)
                .map( function(node) { return node.innerHTML; })
                .filter( function(s) {
                  if (s === '<br>') {
                    return false;
                  }
                  else {
                    return true;
                  }
            });
            console.log(list_values);
          }
        });
      });
     
      observer.observe(list, {
      	attributes: true, 
      	childList: true, 
      	characterData: true 
       });
    </script>

    If you want to see this code running, I’ve put it up on jsbin here:

    http://jsbin.com/ivamoh/53/edit

    If you play with the live example, you’ll notice some quirks in behaviour, in particular that the callback is triggered when you press enter in each li, in particular when the user action results in a node being added or removed from the DOM. This is an important distinction to be made from other techniques such as binding events to key presses or more common events like ‘click’. MutationObservers work differently from these techniques because they are triggered by changes in the DOM itself, not by events generated either via JS or user interaction.

    So what are these good for?

    I don’t expect most JS hackers are going to run out right now and start adding mutation observers to their code. Probably the biggest audience for this new api are the people that write JS frameworks, mainly to solve problems and create interactions they could not have done previously, or at least not with reasonable performance. Another use case would be situations where you are using frameworks that manipulate the DOM and need to react to these modifications efficiently ( and without setTimeout hacks! ).

    Another common use of the Dom Mutation Events api is in browser extensions, and in the next week or so I’m going to publish a follow-up post on how MutationObservers are particularly useful when interacting with web content in a Firefox Add-on.

    Resources