Air MozillaBay Area Rust Meetup August 2014

Bay Area Rust Meetup August 2014 Topics about Rust.

Air MozillaIntern Presentations

Intern Presentations Andrew McDonough, "I will describe and demonstrate a new Platform Decoder Module I wrote that uses native Android APIs to decode H264 video and AAC audio. This brings HTML5 video to Android, and allows truly fragmented playback of MP4s" Marcell Vazquez-Chanlatte, "JS support, moving to Elastic Search, and searching using types."

Mozilla Web DevelopmentBeer and Tell – August 2014

Once a month, web developers from across the Mozilla Project get together to upvote stories on Hacker News from each of our blogs. While we’re together, we usually end up sharing a bit about our side projects over beers, which is why we call this meetup “Beer and Tell”.

There’s a wiki page available with a list of the presenters, as well as links to their presentation materials. There’s also a recording available courtesy of Air Mozilla.

Frederik Braun: Room Availability in the Berlin Office

freddyb shared (via a ghost presentation by yours truly) a small webapp he made that shows the current availability of meeting rooms in the Mozilla Berlin office. The app reads room availability from Zimbra, which Mozilla uses for calendaring and booking meeting rooms. It also uses moment.js for rendering relative dates to let you know when a room will be free.

The discussion following the presentation brought up a few similar apps that other Mozilla offices had made to show off their availability, such as the Vancouver office’s yvr-conf-free and the Toronto office’s yyz-conf-free.

Nigel Babu: hgstats

nigelb shared (via another ghost presentation, this time split between myself and laura) hgstats, which shows publicly-available graphs of the general health of Mozilla’s mercurial servers. This includes CPU usage, load, swap, and more. The main magic of the app is to load images from graphite, which are publicly visible, while graphite itself isn’t.

nigelb has offered a bounty of beer for anyone who reviews the app code for him.

Pomax: Inkcyclopedia

Pomax shared an early preview of Inkcyclopedia, an online encyclopedia of ink colors. Essentially, Pomax bought roughly 170 different kinds of ink, wrote down samples with all of them, photographed them, and then collected those images along with the kind of ink used for each. Once finished, the site will be able to accept user-submitted samples and analyze them to attempt to identify the color and associate it with the ink used. Unsurprisingly, the site is able to do this using the RGBAnalyse library that Pomax shared during the last Beer and Tell, in tandem with RgbQuant.js.

Sathya Gunasekaran: screen-share

gsathya shared a screencast showing off a project that has one browser window running a WebGL game and sharing its screen with another browser window via WebRTC. The demo currently uses Chrome’s desktopCapture API for recording the screen before sending it to the listener over WebRTC.


Alas, we were unable to beat Hacker News’s voting ring detection. But at least we had fun!

If you’re interested in attending the next Beer and Tell, sign up for the dev-webdev@lists.mozilla.org mailing list. An email is sent out a week beforehand with connection details. You could even add yourself to the wiki and show off your side-project!

See you next month!

Open Policy & AdvocacyTrust should be the currency

At Mozilla, we champion a Web  that empowers people to reach their full potential and be in control of their online lives. In my role at Mozilla this means advocating for products, policies and practices that respect our users and create trusted online environments and experiences.  We believe trust is the most important currency on the Web – and when that trust is violated, the system fails.

I have been spending a lot of time with our Content Services team as they work on their new initiatives.  Their first challenge is tackling the online advertising ecosystem.  This is hard work but extremely important.  Our core values of trust, transparency and control are just as applicable to the advertising industry as to any other, but they aren’t widely adopted there.

Today, online advertising is rife with mistrust.  It is opaque for most users because the value exchange is not transparent.  While it should be trust, the prevailing Web currency is user data – much of the content is free because publishers and websites generate revenue through advertising.  At its core, this model is not new or unique, it is common in the media industry (e.g., broadcast television commercials and newspapers that are ad supported).  To improve monetization, online ads are now targeted based on a user’s browsing habits and intentions.  This isn’t a bad thing when done openly or done with consent.  The problem is that this “personalization” is not always transparent, leaving users in the dark about what they have traded for their content.  This breaks the system.

Our users and our community have told us – through surveys, comments and emails – that transparency and control matter most to them when it comes to online advertising.  They want to know what is happening with their data; they want to control what data is shared, understand how their data is used and what they get for that exchange.  They are willing to engage in the value exchange and allow their data to be used if they understand what happens next.  Our users want trust (and not their data) to be the prevailing currency.  We believe that without this shift in focus, users will limit access to their data and will block ads.

We want our users to not only trust us but to be able to trust the Web. We want to empower their choices and help them control their online experience. This is why we pioneered the Do Not Track (DNT) initiative.  DNT relies on advertisers, publishers and websites to respect a user’s preference. Unfortunately, many participants in the online advertising ecosystem do not modify their behavior in response to the DNT signal.  In this instance, user choice is not being respected.  So, we must do more for the user and continue to innovate.

We are doing this by working within the ecosystem to create change.  We are testing our new tiles feature in Firefox and working to ensure that it provides personalization with respect and transparency built in. We are building DNT and other user controls into the tiles experiments and working to establish these foundational elements with our partners.  We are providing users with more information about their Web presence through Lightbeam, and will be testing new privacy initiatives that give users more control over the flow of their data.  We want to bring relevant and personalized content to our users while empowering control that inspires trust.

We need to see a renewed focus of trust, transparency and control on the Web as a whole.  We can all do better.  We want to see more products and services (and not just in online advertising) developed with those ideals in mind.  For our part, we will continue to do more to innovate and create change so that we deserve your trust.

 

Air MozillaCommunity Building Forum

Community Building Forum The Grow Mozilla Community Building Forum

WebmakerMozFest 2014: session proposal deadline extended!

We’re very excited about this year’s Mozilla Festival (24-26 October, London). It really is true that you can arrive with an idea and leave with a community! You can get an flavour of some of what will be going on through the 11 tracks:

  • Build and Teach the Web – Keep the web wild through hands-on making with innovative tools and teaching the web as a community.
  • Open Web With Things – Escape the limitations of your computer and build the web using sensors, circuits and good old paper and scissors.
  • Web in Your Pocket – Explore opportunities in the booming world of the open web  on mobile. How can  we experiment & tinker to customize our own  experience on our phones?
  • Source Code for Journalism – Design next-generation web solutions to solve critical  issues facing news organizations and help journalism thrive on the open  web.
  • Open Science and the Web – Examine the potential of the open web to re-define how we experiment, analyze and share scientific knowledge.
  • Art and Culture of the Web – An exploration of the programs, practices and inspirations of open and networked digital art forms.
  • Open Badges Lab – Challenge  the conventional system of recognizing skills  and learning. Celebrate achievements from Open Badge creators and  issuers.
  • Hive Learning Networks - Join this lab for people working on building local city  learning networks (Hives) and how they can better globally connect to  share learning  experiences for youth and digital media.
  • Musicians and Music Creators on the Open Web – Play a role and explore what it takes to make music on the open web.
  • Policy & Advocacy – Privacy, Security, and Building the Movement to protect the free and open web.
  • Open Data – Uncover the data on the web and in our world that will help us better inform and organize our communities

If any of those sound like the kind of thing you’d like to run a practical, hands-on session about, we want to hear from you! For your proposal to be the best it can be, it’s worth bearing in mind that we’ll need to hear how you’re going to make your session inclusive, inspiring and inviting. We’ll need real examples as well as some detail on how you plan to structure your session.


Propose a MozFest 2014 session: http://2014.mozillafestival.org/propose


In order to get give people coming back from vacation time to submit session proposals, we’ve decided to extend the submission deadline to Friday 29th August. Those who have their proposals accepted will be notified soon afterwards.

Questions? Problems? Email: festival@mozilla.org

Software CarpentryThe Fifth ANGUS Course

Titus Brown recently blogged a summary of the fifth run of the Analyzing Next Generation Sequencing (ANGUS) course at Michigan State. It includes some interesting observations on what's working and what needs to be improved, and some thoughts on assessment—he'd welcome feedback.

Mozilla Add-ons BlogAdd-ons Update – Week of 2014/08/20

I post these updates every 3 weeks to inform add-on developers about the status of the review queues, add-on compatibility, and other happenings in the add-ons world.

The Review Queues

  • Most nominations for full review are taking less than 6 weeks to review.
  • 114 nominations in the queue awaiting review.
  • Most updates are being reviewed within 3 weeks.
  • 79 updates in the queue awaiting review.
  • Most preliminary reviews are being reviewed within 3 weeks.
  • 113 preliminary review submissions in the queue awaiting review.

If you’re an add-on developer and would like to see add-ons reviewed faster, please consider joining us. Add-on reviewers get invited to Mozilla events and earn cool gear with their work. Visit our wiki page for more information.

Firefox 32 Compatibility

The Firefox 32 compatibility blog post is up. The automatic compatibility validation will be run soon.

As always, we recommend that you test your add-ons on Beta and Aurora to make sure that they continue to work correctly. End users can install the Add-on Compatibility Reporter to identify and report any add-ons that aren’t working anymore.

Electrolysis

Electrolysis, also known as e10s, is the next major compatibility change coming to Firefox. In a nutshell, Firefox will run on multiple processes now, running each content tab in a different one. This should improve responsiveness and overall stability, but it also means many add-ons will need to be updated to support this.

We will be talking more about these changes in this blog in the near future. We will also begin contacting developers about add-ons malfunctioning with e10s very soon.

Air MozillaAsynchronous transformation for Emscripten

Asynchronous transformation for Emscripten Theo Chevalier, "I will give you an overview of why localization matters, what we can do to grow the community with localization, what YOU can do to help, and how we can ensure we ship high quality localization."

Air MozillaGrowing the Community with First-Class Citizen Localization

Growing the Community with First-Class Citizen Localization Theo Chevalier, "I will give you an overview of why localization matters, what we can do to grow the community with localization, what YOU can do to help, and how we can ensure we ship high quality localization."

Air MozillaThe curious case of TLS revocation checks

The curious case of TLS revocation checks 1:00- Harsh Pathak, "The curious case of TLS revocation checks"

Air MozillaProduct Coordination Meeting

Product Coordination Meeting Weekly coordination meeting for Firefox Desktop & Android product planning between Marketing/PR, Engineering, Release Scheduling, and Support.

Mozilla Securitymozilla::pkix ships in Firefox!

In April, we announced an upcoming certificate verification library designed from the ground up to be fast and secure. A few weeks ago, this new library – known as “mozilla::pkix” – shipped with Firefox and is enabled by default. Please see the original announcement for more details.
Along with using more verifiably secure coding practices, we took the opportunity to closely adhere to the X.509 certificate verification specifications for the Internet. For example, we prevent certificates from being misused in ways that legacy libraries often do not. This protects user data and promotes an overall more secure Web.
However, this sometimes comes at a compatibility cost. Some certificates issued by certificate authorities not in Mozilla’s Root CA program may no longer work in the same way. We are currently evaluating how we can best balance security with usability with regard to these certificates.
If you encounter compatibility issues, please read the Certificate Primer which contains information for creating a compatible certificate hierarchy.

hacks.mozilla.orgLaunching Open Web Apps feedback channels – help us make the web better!

About three months ago we launched a feedback channel for the Firefox Developer Tools, and since it was a great success, we’re happy announce a new one for Open Web Apps!

For Developer Tools, we have, and keep on getting, excellent suggestions at http://mzl.la/devtools, which has lead to features coming from ideas there being implemented in both Firefox 32 & 33 – the first ideas shipped in Firefox only 6 weeks after we launched the feedback channels!

Your feedback as developers is crucial to building better products and a better web, so we want to take this one step further.

A channel for Open Web Apps

We have now just opened another feedback channel on UserVoice about Open Web Apps, available at http://mzl.la/openwebapps

It is a place for constructive feedback around Open Web Apps with ideas and feature suggestions for how to make them more powerful and a first-class citizen on all platforms; desktop, mobile and more.

What we cover in the feedback channel is collecting all your ideas and also updating you on the different areas we are working on. In many cases these features are non-standard, yet: we are striving to standardize Apps, APIs, and features through the W3C/WHATWG – so expect these features to change as they are transitioned to become part of the Web platform.

If you want to learn more about the current state, there’s lots of documentation for Open Web Apps and WebAPIs on MDN.

Contributing is very easy!

If you have an idea for how you believe Open Web Apps should work, simply just go to the feedback channel, enter a name and an e-mail address (no need to create an account!) and you’re good to go!

In addition to that, you have 10 votes assigned which you can use to vote for other existing ideas there.

Just make sure that you have an idea that is constructive and with a limited scope, so it’s actionable; i.e. if you have a list of 10 things you are missing, enter them as a separate ideas so we can follow up on them individually.

We don’t want to hear “the web sucks” – we want you to let us know how you believe it should be to be amazing.

What do you want the web to be like?

With all the discussions about web vs. native, developers choosing iOS, Android or the web as their main target, PhoneGap as the enabler and much more:

Let us, and other companies building for the web, know what the web needs to be your primary developer choice. We want the web to be accessible and fantastic on all platforms, by all providers.

Share your ideas and help us shape the future of the web!

about:communityGrow Mozilla discussion this Thursday

If you’re interested in helping new people get involved with Mozilla, join us Thursday for an open community building forum.

WebmakerSlovenia, Tokyo, New York: A Maker Party Roundup (Week 5)

Maker Party By The Numbers:
Total events during Maker Party: 1,830+
Individuals attending Maker Party events:  77,550+
Number of cities hosting Maker Party events: 365+

All over the world we are seeing the awesome effect of people teaching the web with Maker Party. We want to recognize the hard-work of everyone who has been involved teaching web literacy skills, online or offline, so if you have been sharing your skills make sure you claim your Skill Sharing Badge . Let’s take a look at the Maker Party events that inspired us last week:

Pic from Maker Party in Tokyo

Web and Satellite workshop in Tokyo

Here’s what happened last week:

Brooklyn College Community Partnership Teen Makerspace Open House – August 4-14th, New York
This two week long event was the first drop-in teen makerspace in Brooklyn. It brought together 12 high school students, along with Brooklyn College students, BCCP staff, makers and others. Read all about the packed final day of making here or watch the 63 second video below.

India Day of Independence- August 15th, Global
On August 15th individuals everywhere celebrated India’s Day of Independence by participating in an online maker party to make, learn, teach and share the Indian culture, history, and diversity. Find out how it went here.

Web and Satellite Workshop  – August 15th, Tokyo
At this cool party attendees designed characters and stories for the Cansat satellite which was launched on August 15th by the Tokai University Satellite Project. The stories were based on sensor data from the satellite and the actual flight data from the satellite. Get more information here.

Maker Party – August 16th, Slovenia
A small and enthusiastic group gathered at the Center Si.mobil Ljubljana wanting to learn and develop new skills by using the many Webmaker tools. You can see some of what was made here.

Maker Party: Simple HTML for Nonprofits – August 14th, San Francisco
This Maker Party by included hands-on training by Aspiration Tech targeted at nonprofit staff and volunteers that are interested in a better understanding of how to craft effective HTML for Email Newsletters and familiarize themselves with how HTML works. Find out more information.

Makes

Resources

In the News

Get Involved 

about:communityQuality and Impact and the Future of the Grow Program

As you know, the Grow program was initially designed to to align with the “Enable Communities that have Impact” goal. The events were intended to mentor and train core contributors to help us bring our products to market and bolster our efforts to recruit new contributors in region.

Since then, we’ve received a lot of extremely helpful and direct feedback from participants, community members who did not attend and from a number of leaders within the Project. The sentiment, echoed on the Project call yesterday, was that the new focus was too much about increasing the size of our community, and not enough about the quality and impact of contribution.

Based on input from our community, and a lot of discussion last week during the community building team’s work week, we’ve made the very difficult decision to cancel all upcoming Grow events this year, including Tunisia, which was scheduled for this September. The decision was made so that the team can focus on launching a redesigned program aimed at providing more interesting and meaningful opportunities to contribute and innovate. This is very late notice, particularly for Mozillians who have spent time and energy completing applications for Tunisia, creating content, and helping with logistics and planning for the event. Know that we would never have made such a decision if we did not feel in our hearts it was the right one.

What’s next – refocus on quality and impact

We are really looking forward to seeing what opportunities we will have to come together as Mozillians in the near future. We know doing that (bringing communities together) is essential for individual, community and Project growth so planning around this isn’t going to stop – it just may look a little different. We’ve been thinking about things like smaller group meet-ups, either organized by Mozilla or as part of other, larger events like an upcoming open-source conference, where communities work together to provide solutions to very specific problems.

Now that we’ve made the tough decision about Grow, we can shift our focus towards a new program — one that focuses on the quality and impact of contributions and our community has a real, strategic, concerted impact on our goals this year.

We have some ideas already are we’re guessing you have some too so let’s start brainstorming! Here is the challenge we leave you with…

How might we design a program that results in contributions that are more fulfilling to our contributors and have a meaningful impact on our goals this year.

Please share your ideas here: https://etherpad.mozilla.org/grow14

- The Community Building Team

Meeting NotesSeaMonkey: 2014-08-19

Agenda

  • Who’s taking minutes? -> IanN

  • Nominees for Friends of the Fish Tank:
    • Adrian Kalla

Action Items

(who needs to do what that hasn’t been recorded in a bug)
We should assign people to the open items.

NEW

OPEN

  • http://weblogs.mozillazine.org/seamonkey/ has not been updated since November 2012, the last version listed is 2.14 (bug 956561); move blog to blog.mozilla.org if possible Assigned: mcsmurf.

    • blog account has been created in bug 973886

    • Callek has imported old blogs from mozillazine
    • some sprucing / branding needs to happen next
  • bug 998807 Sync account creation or device pairing fails with exception in BrowserIDManager
    • mcsmurf will look into this

CLOSED

Status of the SeaMonkey Buildbot Master and Tree

  • Buildmaster is up and running.

    • Due to the master having some mysql issues, Callek has put a halt on the mysql updates, which affects the tbpl. So nothing is showing in tbpl atm.
  • comm-* will be building out of mozilla-* (bug 648979 etc.). Jcrammer has completed the coding. The decision to merge c-c into m-c has been kicked down the road into the next quarter or two.
  • [19th August 2014 update]

    • All available linux64 machines are up and running buildbot (CentOS 6.5)

    • Current round of changes have been reviewed and landed.
    • One final round about to be reviewed.
      • The following are ‘old’ info being kept as a reference:

        • Migrating our Linux builders to CentOS 6 bug 795354. Puppetmaster has been updated. Ewong is able to login to these hosts and buildbot is installed. We still need to get everything setup for parity and do some slight tweaks to the puppet config, but we’re pretty close to useable.

        • In Progress: 2.28 beta and final will depend on build system working again for Gecko 31.0
        • bug 983536 libpango version >= 1.22.0 required on Linux.(should be fixed when bug 795354 is fixed).
        • bug 977676 SeaMonkey’s puppet broken due to requirement of ffxbld ldap password.
        • bug 943740 is tracking the progress (or lack of one) in building trunk and aurora on Linux & Mac from the downloading user’s POV.
        • bug 840426 tracks the buildbot-config and buildbotcustom code changes to support Mock on our linux* slaves.
        • bug 853720 tracks the builders not recognizing mozcrash. (Not exactly sure if it’s relevant still, since our builders have been so perma-red for some time; but putting this here just in case.)
    • We are perma-orange on comm-central, comm-aurora and comm-beta due to problems with tests
      • Windows en-US builds are being successfully compiled but tests are not working due to a dependency on python 2.7.3.
  • pymake has been discontinued. We need to install the latest Mozilla-build and tooltool on our windows builders (tracked by bug 1023644 )
  • No langpacks since 29th August 2013 on trunk. Needs investigating.
    • Windows and Mac trunk langpacks directories have been removed on the FTP server, maybe for lack of recent XPIs (later than 2.20a1). Latest Linux langpacks are dated 29 August. Callek told Tonymec on IRC he has a hunch about why but more pressing things to do first.

    • In Bug 902876 Comment 12 Mcsmurf is waiting for feedback from the build team on how to proceed.

Release Train

  • The plan will to concentrate on delivering 2.29 and potentially a security release for 2.26.

    • Beta based on Gecko 32 will hopefully be tagged tonight.

    • Since this is the first test of the new build code, the process for beta releasing might be a bit rocky to start with.
    • There will be at least two beta releases.
    • The final release will be about a week after the Firefox one, to ensure any major issues have been shaken out.
    • Callek / ewong will post / blog about it soon.
  • Useful Firefox Release Schedule link: Releases Scheduling

Extensions and Plugins Compatibility Tracking

  • Firefox & Thunderbird Add-on Converter for SeaMonkey

  • This tool goes a little further beyond simply modifying install.rdf – it also identifies a few more other things in the code that are Firefox or Thunderbird specific and attempts to change them. Of course, not all extensions can be ported so easily to SeaMonkey since there’s only so much an automated tool like that can do.

    Add-on Converter for SeaMonkey: http://addonconverter.fotokraina.com/

    • There is a long list of Firefox and Thunderbird extensions that have been successfully converted in the Mozillazine thread[1]. Can someone go through the thread and add the list of successful conversions to SeaMonkey/AddonCompat.
  • InvisibleSmiley has been working with the author of Nostalgy to make it work with recent TB/SM versions. The latest, fully compatible version is only available from his homepage though.
  • See Basics page. Please only list current changes here.
  • Addon Compatibility Listings
  • Ratty filed bug 957149 to push an updated version of DOMi to addons.mozilla.org to pick up the latest fixes. Depends on:
  • Our build team needs to automate DOMI branch selection rather than having to tweak the client.py every 6 weeks. bug 763506

2.x (Last, Current, Next)

  • [From a previous meeting:] There is a problem with the metrics server, so no current data is available

  • See Basics page for the usual reminders.
2.26

open tracking (0)
tracking requests (1)
targeted (0)
fixed (30)

2.28

open tracking (0)
tracking requests (1)
targeted (0)
fixed (16)

2.Next
  • Stalled. Needs a kick.

    • bug 937809 Add DuckDuckGo to the default search engines list.

    • bug 815954 Click-to-Play: Port bug 812562 (click-to-play blocklisted plugins: reshow urlbar notification as with normal click-to-play).
    • bug 476108 GetShortPathNameW fails under some NTFS junctions [patchlove].
  • Current breakages:
    • bug 998807 Sync account creation or device pairing fails with exception in BrowserIDManager needs an owner

    • bug 995737 adapt seamonkey for the ab remote content policy change; use permission manager instead of address book property.
  • Mozilla-central bugs that affect us:
    • Our front end Sync UI needs to be updated as the old backend is going away in Gecko/Firefox 31. See: New Firefox Sync has landed in Firefox Nightly. Tracked in:

      • bug 998807 Sync account creation or device pairing fails with exception in BrowserIDManager.

      • bug 1003434 Add support for about:sync-progress.
    • A lot of these bugs are due to mozilla-central switching from synchronous APIs to Asynchronous APIs.
    • bug 566746 (asyncFormHistory) Form history should use asynchronous storage API. Tracked in:
      • bug 912031 Use Asynchronous FormHistory.jsm in place of nsIFormHistory2 in Suite.
    • bug 769764 move proxy resolution to separate thread and remove sync api. Tracked in:
      • MailNews bug 791645 Rewrite calls to synchronous nsIProtocolProxyService::DeprecatedBlockingResolve with Async code before DeprecatedBlockingResolve disappears as well.
    • bug 793634 Force builds to be compatible with gtk 2.18/glib 2.22. Tracked in:
      • bug 795354 Migrate SeaMonkey Linux builders to CentOS 6.
    • bug 846635 Use asynchronous getCharsetForURI in getShortcutOrURI. bug 834543 Add asynchronous version of setCharsetForURI and getCharsetForURI. Tracked in:
      • bug 896947 Use asynchronous version of setCharsetForURI and getCharsetForURI in getShortcutOrURI and other places.
    • bug 825588 Asynchronous JavaScript API for downloads and bug 851471 Decommission nsIDownloadManager. Tracked in:
      • bug 888915 Move SeaMonkey to the new JavaScript API for downloads when nsIDownloadManager is decommissioned.

Feature List, Planning

Bug statistics for the last two (full) weeks: 25 new, 8 fixed, 6 triaged.

  • Low triaging effort.

Open reviews/flags:
30 review
6 super-review
1 ui-review
5 feedback

  • See Feature List page for major wanted/needed features.

  • TODO: We will need to update our Sync UI code due to the new Sync API. Also we need to check if we are allowed to create FX accounts from our UI Since the new Sync accounts are FX accounts.[IanN] I’m sure I saw a question about FX accounts and branding.

Roundtable – Personal Status Updates

Status Updates from developers – what are you working on, what’s the progress, any other comments? (feel free to add yourself to the list if your name is missing and you have interesting status).

IanN
  • Usual testing, reviewing and commenting.

  • Fixed for c-c:
  • Fixed for m-c:
    • bug 1047924 When building with ac_add_options –enable-extensions extensions are put expanded into the wrong location in dist/bin

    • bug 1053439 MOZ_APP_COMPONENT_MODULES and MOZ_APP_EXTRA_LIBS are no longer required
  • Fixed for m-i:
  • Pending check in:
  • Checked in pending review:
  • Waiting for feedback/review:
    • bug 882968 Clean up and move DEFINES and friends to moz.build in comm-central

    • bug 1049800 Package extensions into xpis
    • bug 1051642 Allow for flat chrome format when packaging extensions
    • bug 1052943 Move additions to C*FLAGS into moz.build and do not link against the static RTL
    • bug 1053444 Remove MOZ_APP_COMPONENT_MODULES from comm-central
    • bug 1054526 Move LDFLAGS / WIN32_EXE_LDFLAGS out of Makefiles for c-c
    • bug 1054536 Port *FLAG and related changes to config.mk
    • bug 1054727 TEST-UNEXPECTED-FAIL | check-sync-dirs.py | build file copies are not in sync, port mozconfig.cache and client.mk changes from m-c to c-c
  • Fixing review comments before checkin:
    • bug 757230 When using add button for permissions in Data Manager set a displayHost

    • bug 798147 Switch to correct pref pane if pref window already open
  • Working on:
    • bug 1047981 Port |bug 1047924 – When building with ac_add_options –enable-extensions extensions are put expanded into the wrong location in dist/bin| to comm-central

    • bug 943335 [TB] Update icons used in searchplugins (Yahoo, eBay, Wikipedia, Amazon, Bing, Twitter)
    • Various SM Council documents.
    • bug 606683 Allow customization of toolbar in Composer and MailNews Composition
    • bug 639690 [META] Re-arrange code between editor and editorOverlay
    • bug 773979 [META] Switch to new drag and drop api in SeaMonkey
    • bug 657234 Move pasteQuote and pasteNoFormatting into contentAreaContextOverlay
    • File/Folder selection in windows.
  • To Do:
    • bug 639395 Get cmd_fontSize to reflect current state of selected content / content at caret.

    • Prefs-in-a-tab.
    • Create FAQ for Friends of the Fish Tank.
    • Help get composer standalone builds working with –enable-tests.
Neil

Needs checkin (waiting for greener tree):

Needs checkin and aurora approval (waiting for greener tree):

Needs beta checkin:

  • bug 934492 Adjust the preference panes for the removal of the charset data source.

Needs beta backout (bug 933462 was backed out on Gecko 30):

Needs mozilla checkin:

  • bug 1053420 Improve new nsTArray rvalue reference methods.

Waiting for review:

  • bug 1051852 Web pages can’t add search engines.

  • bug 1048979 Search engine icons should be limited to 16px.

Waiting for review on fixed patch:

  • bug 1054289 Page does not scroll to anchor set by script.

Still waiting for review:

Any other business?

Discuss:

  • [Ratty] KaiRo reminded us that we need to grow our contributor community. Perhaps we can get some Engagement experts from Mozilla to give us some suggestions?

    • [IanN] might have a chat with some people and see if they can point me in the right direction.

SeaMonkey Meeting Details

Meeting NotesMozilla Platform: 2014-08-19

Need To Know

(Release and system issues that may impact engineering this week.)

Notices/Schedule (lmandel)

Next Merge: September 1, 2014 Next Release: September 2, 2014
Trains
Central: 34 Aurora: 33 Beta: 32 Release: 31
  • desktop beta8 ships today

  • mobile beta8 ships tomorrow
  • LAST BETA9 goes to build this Thu, Aug 21
  • MERGE DATE CHANGE: Next merge date will be TUE, SEP 2, 2014

Build Changes (gps)

(Build changes of which engineers should be aware.)

RelEng (catlee)

(Repo, test, and other information for engineers from the release engineering team.)

Upcoming Outages/Upgrades

(System outages/upgrades and tree closures that impact engineering.)

Quality Programs

(An opportunity to hear about status with the various quality programs that do not have a formal team structure.)

OrangeFactor (ryanvm)

<Read Only>

  • Past week’s OrangeFactor: N/A. Progress is being made on bug 1046162, things will hopefully be back to normal for next week’s meeting).

  • 25 intermittent failures fixed in the last week – List – Thanks!.
    • Thanks to Peter Moore for fixing a long-running pip install timeout that affected tests on all platforms.

    • Lots of crash and leak fixes this week!

MemShrink (njn)

  • Jon Coppeard landed the first parts of support for compacting GC. It only works for the JS shell, and it’s currently hidden behind the --enable-gccompacting configure flag. Still, progress! The bug for enabling it in the browser is here.

  • Peter Van der Beken fixed a bad leak affecting users who have the “keep until” setting for cookies set to “ask me every time”.

Stability (kairo/bsmedberg)

<Read Only>

Team Stand-ups

(In <2 mins, what did your team accomplish last week, on what is your team working on this week, and on what, if anything, is your team blocked? No questions during the stand-ups. All questions should be asked during the roundtable.)

A*Team (jgriffin)

App Tools (prouget)

<Read Only>

  • WebIDE preffed on, with memory monitor enabled

  • B2G main-process (chrome) is now debuggable
  • Profiler now works with FxOS 2.0, 2.1, and disabled in older version
  • $0 in WebConsole works

Electrolysis (e10s) (blassey)

  • Working on M2 milestone: https://wiki.mozilla.org/Electrolysis/Roadmap#M2.1_Milestone

    • bug 1030451 – Update spellchecker context menu suggestions for multiprocess

    • bug 1034212 – Enable devtools/webaudioeditor tests for e10s
    • and many other fixes
  • If you’d like to test e10s in Nightly, flip the “browser.tabs.remote.autostart” pref to true and restart Nightly.
    • Warning: e10s is a little rough this week due to some page loading bugs (like HTTP redirect bug 1050869).

Firefox Desktop (gavin)

Summary of Work In Progress
  • You can see the status of the current iteration (34.3) in progress here
Summary of Recent Landings
  • Team landed 62 bugs over the last week, to close out the 34.2 iteration.

  • Details of landings from the past week can be seen here

Firefox Mobile (snorp/blassey/mfinkle)

<Read Only>

Work In Progress

You can find more on upcoming feature plans in the[roadmap]

Landings from the past week
Nightly (34)
  • Large text on door-hanger for mixed content blocking on high DPI devices ( Bug 917970 )

  • Autophone – s1s2 – Regression in local “time to throbber stop” on 2014-05-11 ( Bug 1018463 )
  • Remove Cache directory from Android profiles ( Bug 1045886 )
  • testVideoDiscovery.js is going to start perma-failing when Aurora 33 is merged to Beta ( Bug 1046493 )
  • Zoom level changes on some mobile sites on pressing the back button ( Bug 1046631 )
  • Disable downloads and extension installs in guest mode ( Bug 1046941 )
  • Download cancel dialog shows undefinedYes and undefinedNo aa button values ( Bug 1048000 )
  • Search activity displays private browsing searches from browser ( Bug 1048444 )
  • Unable to use gesture typing in search activity ( Bug 1049282 )
  • Long pages have missing tiles and generally messed-up rendering ( Bug 1051592 )
  • Regression: tab counter is empty ( Bug 1052345 )

Firefox OS Connectivity (vchang)

<Read Only>

  1. https://wiki.mozilla.org/TPE_CONNECTIVITY_GROUP/2014-08-19

GFX (milan)

  • Lots of vacations.

  • Siggraph last week. Nice summary from :nical on dev-tech-gfx. Extremely short summary: VR/AR, next gen GL, other.
  • Firefox OS:
    • Some last minute blockers. The biggest recent graphics bug turned out to be an intermittent, low level network/ipc issue, usually only showing up during multi-day partner testing. Currently looking at a couple of canvas issues, related to the updated version of Skia (back in March.)
  • Desktop:
    • Will try to get to final stage/land desktop tiling the week of September 22nd – probably behind a pref until APZ on desktop is available, to avoid performance issues. The aim is to have it (the tiling) stick in 35, but we may need to test with that pref enabled, to avoid regressions while APZ work is being done.

    • Back on the Skia content work, we were derailed by the Firefox OS blocking bugs.

JS (naveed)

<Read Only>

  • Compiler (JIT)

    • bug 1041781: Landed native to bytecode mapping

    • bug 1054340: Landed post-native-to-bytecode-mapping fix to remove MPcOffset instructions
  • Garbage Collection

    • bug 650161: Landed first cut of compacting GC implementation (build with –enable-gccompacting to try it out)

    • bug 995284: Made GC behvaiour deterministic in shell builds
  • Front End and Other

    • bug 1052248: Tweak the goodAllocated heuristics for JS arrays

    • bug 1041688: acquired properties analysis working but has some regressions

Layout (jet/dbaron)

<Read Only>

  • caret cleanup landed (bug 1048752)

  • CSS transitions now work for style changes that trigger reframes (bug 625289)
  • initial CSS Ruby reflow code landed, but still more work to do on ruby

Media (mreavy)

<Read Only>

  • Continue to prep OpenH264 and Screensharing for Fx33.

    • Major UI redesign slated for Fx35

    • Window list rescan uplifted to 33
    • Talky.io is experimenting with ScreenSharing in their beta pages
  • Working a 2.0 blocker with QC
  • Firefox Desktop has been giving the Loop team a hand on front-end issues
  • GMP plugin sandboxing has landed

Necko (dougt/jduell)

<Read Only>

  • landed bug 820391: we’re finally getting DNS time-to-live (TTL) accurately (Windows-only for now).

  • HTTP cache v2: some last bugs before we release: mostly tests but also a few real bugs (bug 1042192, bug 1054425, bug 660749)
  • minor fixups for HTTP2: we’re close to being able to pref it on.

Performance (vladan)

  • bug 1045108: Please review your Telemetry probes and make sure they’re still useful. Also please set the expiry dates for your probes (e.g. “expires_in_version”: “never”, or “35″ for Firefox 35) — we’ll be automatically marking unclaimed probes for expiry in Firefox 40.

    • bug 1037494: Also provide email addresses for automatic regression notifications in the “alert_emails” field.

Shumway (tschneidereit)

Roundtable

(Comments and questions that arise during the course of the meeting or otherwise do not have a section.)

<Read only beyond this point>

Mailing List Threads

(Threads that are likely to be of interest to engineering from various mailing lists.)

Good Reads

(Links to blog posts, books, videos, etc. that you think will be of interest to others.)

irc #planning Log From This Meeting


Engineering Meeting Details

  • Tuesday 2014-08-1911:00 am Pacific Standard Time

  • Dial-in: conference# 98411
    • US/California/Mountain View: +1 650 903 0800, x92 Conf# 98411

    • US/California/San Francisco: +1 415 762 5700, x92 Conf# 98411
    • US/Oregon/Portland: +1 971 544 8000, x92 Conf# 98411
    • CA/Vancouver: +1 778 785 1540, x92 Conf# 98411
    • CA/Toronto: +1 416 848 3114, x92 Conf# 98411
    • UK/London: +44 (0)207 855 3000, x92 Conf# 98411
    • FR/Paris: +33 1 44 79 34 80, x92 Conf# 98411
    • US/Toll-free: +1 800 707 2533, (pin 369) Conf# 98411
  • Engineering Vidyo Room / Air Mozilla / MTV Alien Nation / TOR Finch / SFO Warfield / PDX Hair of the Dog
  • join irc.mozilla.org #planning for back channel

Mozilla Add-ons BlogAnnouncing Add-on SDK 1.17

I’m pleased to announce the immediate availability of Add-on SDK 1.17! You can download the SDK directly in either zip or tarball format. This is a maintenance release of the cfx tools to more easily support new apis added to Firefox in the future ( see bug 1032275 for more information ). The AMO validator tool has been updated to support extensions created with SDK 1.17 as of August 13th.

This will almost certainly be the last release of this tool; developers using the SDK are encouraged to try out the new JPM tool instead. JPM has some key advantages:

  • developers can create and use npm modules as dependencies in their add-ons.
  • installation via npm is much simpler: `npm install -g jpm`, particularly for developers already used to node.js.
  • cfx was a complex tool built for a time when sdk dependencies were packaged with each add-on. JPM removes a lot of this complexity and just does a few things well: running, packaging and running tests.

For more on migrating to JPM, please see Erik’s excellent post.

As always, we’d love to hear from you about your experiences with this release. You can contact us in a variety of ways:

post to our discussion group
chat with us on irc.mozilla.org #jetpack
report a bug
check out the source and contribute bug fixes, enhancements, or documentation

For more information on the Jetpack Project check out our wiki.

Air MozillaWarfare in the GELAM trenches

Warfare in the GELAM trenches Intern Alex Wissmann presents "Warfare in the GELAM trenches"

Air MozillaIt's All Rainbows and Unicorns

It's All Rainbows and Unicorns Intern Eli Kariv presents "It's All Rainbows and Unicorns"

Air MozillaDo we really want Clippy in Firefox?

Do we really want Clippy in Firefox? Kamyar Ardekani presents "Do we really want Clippy in Firefox?"

WebmakerCommunity Literacies #4: Happy dances, kitten rescuers and ed jams

Editor’s Note: Community Literacies is a series about Webmaker’s finest learning resources around the world, and the stories that bring them to life. Have something to share? Get in touch with Kat.

Three new educational creations from Maker Party

For a bit of inspiring reading over a cold smoothie by the pool, we bring you another round of amazing creations from learners and teachers! In the next two installments, we will explore some of the most inspiring teaching materials built for Maker Parties around the world.

This time, we start our adventure with Emma in South Africa by discussing a new remixable lesson plan made for girls at Code for Capetown. We’ll fly to London and meet Dee and Joe to learn about a game that teaches web design through saving kittens in a fantasy world. And we’ll finish our time together by traveling to the heart of Texas to speak to Julia and Karen and hear about their crazy open education party in San Antonio. Let’s get started!

Teaching girls how to hack happy dances in South Africa

Image thanks to Code4CT
teaching kit by Code4CT

In South Africa, the Code For Capetown project aims to help young girls consider careers in tech as exciting and viable options. The program runs over 3 weeks in the summer holidays, and introduces grade 10 and 11 girls in the region to the big world of web development for social impact. And this summer, the Code4CT girls have been learning how to become webmakers together for inspiring results.

“Code4CT girls had been having so much fun discovering how the web works, and actively participating in building web content,” says Director of New Initiatives Emma Dicks, “that we decided to share this with our friends by hosting our own Maker Party! We told each girl she could invite one friend, who she then helped teach basic HTML to using Codecademy, Made with Code and Webmaker resources.”

At the event, friends immediately set to work making memes and learning about HTML tags, and even learned the steps to Pharrell William’s dance Happy for the Hack the Happy Dance activity, followed by an activity by Creative Commons for Kids. “This lead to a great discussion on hacking,” adds Emma. “We asked the girls to talk about when they are allowed to take and change images, and when it is illegal because of copyright.”

What’s next for the Code4CT girls? “After putting together a teaching kit to share what we did at our Maker Party, we also built a full lesson plan to introduce human centered design to a group of young learners,” says Emma. “Both have worked excellently, and we would love to see others use these plans and remix them!” For feedback, makers are invited to share their experience and remixes with Emma on Twitter.

The Human Centered Design teaching kit will soon be available on Webmaker’s Design and Accessibility Literacy page.

Saving all the kittens with code and creativity in London

Image thanks to Erase All Kittens
teaching kit by Erase All Kittens

E.A.K. (Erase All Kittens) is an open source game that teaches kids to code and create on the web by saving kittens with HTML and CSS. Inspired by a teaching activity for the game put together by its creators Joe Dytrych, Dee Saigal and Leonie Van Der Linde at DrumrollHQ in the UK, we got in touch to find out more about all the kitten-saving happening in London.

“We created the activity so that kids can be taught basic coding skills by playing E.A.K. in code clubs, classrooms and at home,” explains Dee. “The pilot version of Erase All Kittens is free online and gives players an introduction to HTML and CSS skills, so we wanted to know more about what the Webmaker community thought of E.A.K, regardless of whether or not they’re already familiar with coding. We’re big fans of Mozilla, so it’s been really great to help out with Maker Party.”

We asked Dee about her experience working with the Thimble tool to create the teaching activity, and Dee told us she found it to be fairly simple. “I’d used similar methods to create a Cargo Collective website for my own portfolio,” she explains, “so while I didn’t understand some of the code, I was still able to make the teaching kit without experiencing too many problems!”

Because Erase All Kittens is open source, Dee and Joe are looking for others to get involved in the game’s code, too, by helping develop, translate and animate it together. “We are especially looking for help translating the game,” adds Dee, “so as many people as possible can play it! And we’re creating tools to help players build their own levels, which we’ll show off at this year’s Mozfest.” Dee and Joe encourage anyone interested in getting involved to get in touch and start saving those kittens.

The Erase All Kittens teaching activity is now available on Webmaker’s Coding and Scripting Literacy page.

Holding open education jams with Makey Makeys in Texas


teaching kit by Julia Vallera and Karen Smith

While a lot of great webmaking happens online (with kittens!), other great moments happen in-person with a group who has come together to make things for the first time. This summer in San Antonio, Texas, experienced webmakers Karen Smith and Julia Vallera hosted an interactive workshop for the software track at OpenEdJam.

From the beginning, the process was all about openness and sharing. “To prepare for the event, Karen created the kit and asked for collaboration from Mozilla’s #teachtheweb team,” explains Julia. “She also sent it to OpenEdJam as the proposal itself, which was brilliant. The kit is a working example of what participants can do with Webmaker tools, and how the remix function can create a truly open process.”

On the day of the Maker Party, all kinds of making were facilitated. Makey Makeys were brought out, memes were built (and tweeted!) and digital creations of all kinds were shared. When we asked Karen and Julia about their limitations for the event, the main issue was not having enough time to make everything.

“Kits can take a lot of time,” says Julia. “They have a lot of content, and are very well thought-out. 2-3 hours might not be enough to finish one.” Julia suggests creating teaching activities instead, or starting with a basic Thimble starter resource like Meme-Maker or Book Cover, and running with it. “The response to kits was great in San Antonio,” she adds. “Educators loved the Webmaker tools, and they were very excited to learn how easy they are to use.”

How can others get involved with this work? “We would love to see people remix the kit and make changes to it!” says Julia. Makers of all kinds are encouraged to get in touch with Julia and Karen on Twitter to share their own open educational jams.

A big thanks to our featured makers

We end this issue with many e-hugs and skydiving cat gifs for webmakers Emma, Dee, Joe, Karen and Julia for sharing their great educational creations with a Maker Party flavor. We hope this issue has left you feeling inspired to remix, reflect and create your own! Have a great piece of content you want us to feature? Get in touch. And stay tuned for Part 2 of Community Literacies: Maker Party edition to learn about three more Maker Party teaching activities, this time from India. We already look forward to the making yet to come…

Get involved!

Air MozillaEngineering Meeting

Engineering Meeting The weekly Mozilla engineering meeting.

hacks.mozilla.orgBrowserify and Gulp with React

The JS world moves quickly, and nowadays, there’re some new kids around the block. Today, we’ll explore Browserify, Gulp, and React and see whether they’d sound suitable for our projects. You might have heard of them but not have had the time to check them out. So we’ll look at the advantages and disadvantages of using Browserify, using Gulp, using React. Because it certainly doesn’t hurt to know our options.

Browserify: Bundling Node Modules for the Browser

Browserify is a development tool lets us write Node-style modules in the browser or include actual Node modules from npm. Modules are written in separate files, things can be exported, and modules pull in other modules through require. Browserify can then parse our main JS module, building a dependency tree, to bundle everything together.

One great thing is that the tens of thousands of modules on NPM are now available for our projects. Dependencies are defined in package.json, and if our project requires them, Browserify will bundle these dependencies with our JS. Take this package.json for example:

/* package.json */
{
  "name": "hipApp",
  "description": "Showing off hip stuff",
  "dependencies": {
    "browserify": "~3.44.x",
    "react": "0.11.x",
    "underscore": "*",
  }
}

Once we run npm install, we’ll have modules like React and Underscore available to use in our project. Now we just require them in our project:

/* app.js */
var React = require('react');
var myModule = require('./myModule');
// ...

Then we invoke Browserify:

browserify --debug app.js > bundle.js

And Browserify will include React from npm for us. Notice that it will even figure out which local modules to include. We included ./myModule which is another module in the same folder as app.js.

Let’s compare this style of dependency loading with technologies such as AMD ,which is prominently implemented by RequireJS. They are both JS module definition APIs but with different implementations. Browserify falls in line with CommonJS which is suited for the server, and RequireJS falls in line with AMD which is suited for the browser. However, either can be used in either environment.

What’s awesome about Browserify is that all NPM modules are available for our project, 86K and counting. Its modules also do not need to be wrapped in a define call.

Though Browserify requires all the modules up front, which means needing a build step. AMD is asynchronous so modules can be lazily-loaded, and all that is needed is a page refresh. Though we can automate the Browserify build step with Gulp.

Gulp: The Streaming Build System

Gulp is a JS build system, like Grunt, that makes use of “streams”, or pipelining, and focuses on code-over-configuration. Build systems are usually set up to watch for changes to projects, and then automatically handling common build steps such as bundling, pre-compilation, or minification. Both Gulp and Grunt have tons of plugins to help with these things. Browserify is one such plugin.

Let’s take a look at an example Gulpfile. It includes some facilities for React JSX files which we haven’t looked at yet, but it’ll come in handy later. Read the comments in the Gulpfile to follow along:

/* gulpfile.js */
 
// Load some modules which are installed through NPM.
var gulp = require('gulp');
var browserify = require('browserify');  // Bundles JS.
var del = require('del');  // Deletes files.
var reactify = require('reactify');  // Transforms React JSX to JS.
var source = require('vinyl-source-stream');
var stylus = require('gulp-stylus');  // To compile Stylus CSS.
 
// Define some paths.
var paths = {
  css: ['src/css/**/*.styl'],
  app_js: ['./src/js/app.jsx'],
  js: ['src/js/*.js'],
};
 
// An example of a dependency task, it will be run before the css/js tasks.
// Dependency tasks should call the callback to tell the parent task that
// they're done.
gulp.task('clean', function(done) {
  del(['build'], done);
});
 
// Our CSS task. It finds all our Stylus files and compiles them.
gulp.task('css', ['clean'], function() {
  return gulp.src(paths.css)
    .pipe(stylus())
    .pipe(gulp.dest('./src/css'));
});
 
// Our JS task. It will Browserify our code and compile React JSX files.
gulp.task('js', ['clean'], function() {
  // Browserify/bundle the JS.
  browserify(paths.app_js)
    .transform(reactify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./src/'));
});
 
// Rerun tasks whenever a file changes.
gulp.task('watch', function() {
  gulp.watch(paths.css, ['css']);
  gulp.watch(paths.js, ['js']);
});
 
// The default task (called when we run `gulp` from cli)
gulp.task('default', ['watch', 'css', 'js']);

Just install the NPM dependencies, run ./node_modules/.bin/gulp, and it handles everything for us in the background. Our files are watched with gulp.watch, tasks are automatically run, and things are cleanly accomplished in streams and pipelines. Whenever we modify any JS/CSS, we can can refresh in the browser just as if we were using AMD.

Whether to use Grunt or Gulp is a matter of preference. Both have tons of modules available, though Gulp is a bit newer. Grunt is done more through configuration whereas Gulp is done more through code and streams. Though Gulp can be a bit faster as it does not require intermediary files to accomplish its tasks. So with our build system in place, let’s head to the big show: React.

React: Declarative and Reactive Components

React is a JS library from Facebook for building reusuable web components. It’s not a full MVC framework like AngularJS; React focuses on view rendering of components making no assumptions about framework, and it can plug in to most projects smoothly.

Facebook says React was made to build large applications with data that changes over time. Facebook wanted something that didn’t take over the whole application. They could mix in components that could be integrated with legacy components. If you’d like some convincing, Pete Hunt, one of the authors of React, wrote some arguments for React on Quora.

Rather than imperative one-way data binding as in traditional applications or two-way data binding as in Angular, React implements a one-way reactive data flow. Rather than manually registering listeners and handlers to update the DOM, or having to set up linking functions and data bindings, React’s components are declaratively defined and automatically re-render when its data changes. Like a function, data goes in, components come out.

For convenience, let’s take a look at an example based off of React’s homepage, which simply displays a name:

/** @jsx React.DOM */
var React = require('react');  // Browserify!
 
var HelloMessage = React.createClass({  // Create a component, HelloMessage.
  render: function() {
    return <div>Hello {this.props.name}</div>;  // Display a property.
  }
});
React.renderComponent(  // Render HelloMessage component at #name.
  <HelloMessage name="John" />,
  document.getElementById('name'));

You may have noticed, there’s some mark-up in our Javascript. React features syntatical sugar called JSX. It needs to be compiled into JS, which’ll automatically be done with our Gulpfile from earlier through the Reactify plugin. Though React also has a JSX compiler if we wanted it. Note that JSX is not required; React has normal JS APIs, but where’s the fun in that?

Components are created with createClass. Like functions, components can take in arguments during rendering in the form of props. In the above example name="John" is passed into the component and is then referenced by {this.props.name}. Note that components can be made up of only one Node. If we wish to have multiple DOM nodes, they must all be wrapped under a single root node.

Along with taking input data through props, a component can have an internal and mutable state as accessed through this.state. Here’s another example, this time of a timer, based off of React’s homepage:

/** @jsx React.DOM */
var React = require('react');
 
var Timer = React.createClass({
  getInitialState: function() {  // Like an initial constructor.
    return {
        seconds: 0
    };
  },
  incrementTimer: function() {  // A helper method for our Timer.
    this.setState({  // Use setState to modify state.
        seconds: this.state.seconds + 1  // Never modify state directly!
    });
  },
  componentDidMount: function() {  // A method run on initial rendering.
    setInterval(this.incrementTimer, 1000);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.seconds}</div>
    );
  }
});
 
React.renderComponent(<Timer />, document.getElementById('timer'));

We have a setInterval modifying our component’s state which triggers a refresh every 1000ms. Though in more practical applications, the state more likely be modified through user input or through data coming in via XHR rather than through a simple interval.

And those are some of the basics of React. If reusuable declarative components and reactive rendering hits you as something that would sound perfect in your project, you can head to Getting Started with React. Best of luck to your development. Whether you decide to use these tools or not, it is always advantageous to know your options.

Rumbling Edge - Thunderbird2014-08-18 Calendar builds

Common (excluding Website bugs)-specific: (17)

  • Fixed: 344561 – Day/Week view: Header boxes are misaligned if scrollbars are shown
  • Fixed: 680203 – Make Lightning tests work with packaged-tests
  • Fixed: 682109 – Today pane: Today’s date not automatically updated
  • Fixed: 998281 – Default status new event is available, should be busy
  • Fixed: 1000535 – Lightning frequently prompts for access to Google Calendar
  • Fixed: 1002024 – Sending separate invitations to attendees onlys send email for first invited person
  • Fixed: 1007040 – Autocomplete for event invitations: Use uppercase and lowercase of name like in addressbook card
  • Fixed: 1018120 – GMT Timezone with timezone information is assumed to be UTC / events move forward by 1 hour
  • Fixed: 1022113 – Today-pane: too many calls to the function “setCurrentEvent” when updating the attribute “current”
  • Fixed: 1022129 – In the calendar views the day marked as Today doesn’t update at midnight
  • Fixed: 1026623 – Set em:strictCompatibility to ensure the right Lightning version is used.
  • Fixed: 1031715 – Converting email to event shouldn’t fail when Thunderbird Conversations is installed
  • Fixed: 1041566 – Lightning 3.5 broken with 2014-07-21 update
  • Fixed: 1042125 – Make the CalDAV provider async safe
  • Fixed: 1042741 – No buttons on invitations or response to invitations [incompatibility between Thunderbird Conversations and Lightning]
  • Fixed: 1042849 – Remove Serbian [sr] from /calendar/locales/shipped-locales
  • Fixed: 1049201 – Nighly builds broken due to incorrect manifest paths

Sunbird will no longer be actively developed by the Calendar team.

Windows builds Official Windows

Linux builds Official Linux (i686), Official Linux (x86_64)

Mac builds No binaries since July 23, 2014.

Rumbling Edge - Thunderbird2014-08-18 Thunderbird comm-central builds

Thunderbird-specific: (30)

  • Fixed: 273884 – Enclosing double quotes are shown in recipient column, messes up sorting of name/address
  • Fixed: 934875 – Thunderbird: No status bar accessible
  • Fixed: 964377 – Intermittent test-attachment-reminder.js | test-attachment-reminder.js::test_manual_automatic_attachment_reminder_interaction
  • Fixed: 967583 – Tooltip for ‘Get Mail for’ button says ‘nobody’ for Local Folders, Feed and News accounts, sometimes ends with comma
  • Fixed: 985641 – random orange: test-session-store.js | test-session-store.js::test_restore_single_3pane_persistence + test-session-store.js::test_restore_single_3pane_persistence_again + test-session-store.js::test_message_pane_height_persistence + test-session-store.j
  • Fixed: 1009469 – For recipient autocomplete matches other than {Name beginsWith}, [tab] no longer confirms suggested recipient (“foo >> somefoo <mail@asdf.com>” is retained as recipient). Suggestion becomes stale/unresponsive when TB loses focus.
  • Fixed: 1018241 – Customize option in Search Messages continues to be wonky
  • Fixed: 1018960 – Severe bug with empty junk can cause deletion of inbox (If selected folder at Folder Pane is changed while folder context menu of Junk is shown, “Empty Junk” clears wrong folder)
  • Fixed: 1020339 – Add UI for disabling and clearing Visited Link/Browsing History
  • Fixed: 1021684 – Update box.com Filelink implementation to new APIs
  • Fixed: 1024017 – Add ability to choose info shown in the desktop chat notifications
  • Fixed: 1024130 – Address book sorting not sticky
  • Fixed: 1024600 – Enable test-attachment-reminder.js mozmill tests on Windows again
  • Fixed: 1026608 – Delete button on main toolbar doesn’t always change to “Undelete” when toggled from keyboard or header pane
  • Fixed: 1034732 – comm-central build for win64 is not updated after 2014-06-13
  • Fixed: 1034818 – No gap between on toolbarbuttons icon and text in Icons beside Text mode
  • Fixed: 1035650 – Remove public destructors of NS_*_INLINE_* refcounted classes, Remove NS_HIDDEN, Fix dangerous public destructors. in mail/ and mailnews/
  • Fixed: 1037751 – Use white graphics for the phishing icon
  • Fixed: 1037795 – Port Bug 1034360 to TB – remove OCSP preference UI (or at least remove the unnecessary dialog window)
  • Fixed: 1038029 – Undefined symbols during |making ./libprldap60.dylib|
  • Fixed: 1038323 – Clear Recent History menuitem doesn’t have a keyboard shortcut
  • Fixed: 1038588 – DebuggerServer’s closeListener has been changed to closeAllListeners()
  • Fixed: 1038647 – perma orange: TEST-UNEXPECTED-FAIL | mozmill/utils/test-iteratorUtils.js | test-iteratorUtils.js::test_toArray_custom_content_iterator
  • Fixed: 1038745 – No builds for latest nightly localization of Thunderbird for win32
  • Fixed: 1038909 – Disable what’s new page for now
  • Fixed: 1039798 – perma-orange: test-message-header.js::test_address_book_switch_disabled_on_contact_in_mailing_list
  • Fixed: 1040831 – Daily 33.0a1 gives “Couldn’t load XPCOM” error and startup fails since updating this morning
  • Fixed: 1041475 – TEST-UNEXPECTED-FAIL | mozmill/content-tabs/test-install-xpi.js | test-install-xpi.js::test_install_corrupt_xpi + test-install-xpi.js::test_install_xpi_offer + test-install-xpi.js::test_xpinstall_disabled + test-install-xpi.js::test_xpinstall_actually_i
  • Fixed: 1045026 – Cannot use “thunderbird” as PROGRAM name, because it is already used in mail/components/search/mdimporter
  • Fixed: 1050363 – Thunderbird fails to compile nsldif32v60.dll: LINK : fatal error LNK1104: cannot open file ‘mozcrt.lib’

MailNews Core-specific: (34)

  • Fixed: 367011 – “Remove All Tags” does not do so for custom tags
  • Fixed: 553757 – SMTP server pref dialog: “Password, transmitted insecurely” doesn’t fit after switching from SSL to non-SSL
  • Fixed: 662907 – web site from RSS feed not rendered correctly (due to noscript tags)
  • Fixed: 960854 – Port |Bug 920353 – pymake native commands can’t easily use e.g. mozbuild modules| to c-c
  • Fixed: 966053 – Recipient area mishandles display names with commas in them (e.g. “LastName, FirstName”), during autocomplete creates dysfunctional extra “LastName” recipients without email address
  • Fixed: 992879 – Folders created with a colon (:) or star (*) in Tb24 on linux are duplicated with hash names on startup with Tb trunk or earlier, such local folders/feeds do no longer work
  • Fixed: 1013123 – Increase width of ‘Enter a tag prefix’ textbox for prefix of autotagged category names of feed articles
  • Fixed: 1015774 – errUtils.js::logException shows the same exception to Error console twice
  • Fixed: 1024053 – Modify test_quarantineFilterMove.js to use Promises
  • Fixed: 1024908 – If the focus is returned to filter action list and the previously focused item is no longer there, an exception is shown
  • Fixed: 1025548 – Preliminary perf/code org tweaks for Bug 257037
  • Fixed: 1033963 – Add mailnews.message_warning_size to prefs.
  • Fixed: 1034231 – Modify test_offlineCopy.js to use Promises.
  • Fixed: 1036619 – Implement 1035394 – Add dangerous public destructor detection to _INHERITED refcounting macros in comm-central
  • Fixed: 1037479 – Move LOCAL_INCLUDES to moz.build in c-c
  • Fixed: 1037482 – Move TESTING_JS_MODULES to moz.build in c-c
  • Fixed: 1037775 – Port |bug 1036864 – Remove EXPORT_LIBRARY| to MailNews
  • Fixed: 1037947 – Fix test_movemailDownload.js to work with maildir
  • Fixed: 1042294 – crash NS_ProxyRelease(nsIEventTarget*, nsISupports*, bool), typically during import
  • Fixed: 1043019 – Port |Bug 1036894 – Move in-tree library linkage information to moz.build| and |Bug 1041936 – Allow static library definitions to depend on shared libraries| to comm-central
  • Fixed: 1043040 – Port |Bug 1036694 – merge nsIMarkupDocumentViewer into nsIContentViewer| to comm-central
  • Fixed: 1044460 – Port relevant changes from Bug 1043344 for moving libraries and programs build to the compile tier
  • Fixed: 1044999 – No L10n builds for Thunderbird for aurora/central due to client.py not allowing –skip-venkman
  • Fixed: 1046638 – Port |Bug 1044162 – make install locations for EXTRA_{PP_,}JS_MODULES better| to comm-central
  • Fixed: 1046826 – Use m-c’s config/makefiles/debugmake.mk in c-c’s rules.mk
  • Fixed: 1048042 – Port |Bug 780159 – Remove obsolete REGCHROME| and |Bug 935387 – Remove non recursed install targets| to comm-central
  • Fixed: 1048561 – Fix up after landing of Bug 1043041 – Replace use of NSPR’s PRTime with a safer type in mozilla::pkix
  • Fixed: 1049935 – Port |Bug 1045783 – move OS_LIBS += $(call EXPAND_LIBNAME,…) calls to moz.build| to comm-central
  • Fixed: 1049936 – Port |Bug 1046784 – move -DNOMINMAX definitions to moz.build| to comm-central
  • Fixed: 1050086 – C-c needs a “port” of bug 1047267
  • Fixed: 1050708 – buildid no longer being set on Thunderbird comm-central builds (make upload and graph server posts fail)
  • Fixed: 1051619 – Port |Bug 914274 – Remove MODULE_NAME| to comm-central
  • Fixed: 1052602 – Fix various xpcshell issues in gloda land and others
  • Fixed: 1052985 – Fix windows manifest build issues

Windows builds Official Windows, Official Windows installer

Linux builds Official Linux (i686), Official Linux (x86_64)

Mac builds No binaries since July 23, 2014.

Meeting NotesMozilla Project: 2014-08-18

All-hands Status Meeting Agenda

Items in this section will be shared during the live all-hand status meeting.

Friends of Mozilla

Upcoming Events

Monday, 18 August
  • If you have any time-bound contribution activities for the Mozilla community, please email Jennie at jhalperin@mozilla.com. Your opportunities will be featured in the next issue of about:Mozilla!
Tuesday, 19 August
  • CBT meetup this week in MV
Wednesday, 20 August
Thursday, 21 August
  • 10:00 AM Pacific / 17:00 UTC: Grow Mozilla discussion — a forum for discussing community building at Mozilla

Project Status Updates (voice updates)

Firefox

Speaker Location: Toronto (johnath)

  • Go watch last week’s town hall if you missed it

  • Growth team comin’ atcha
Firefox for Android

Speaker Location: remote (mfinkle)

Firefox OS
  • Li Gong in Mountain View
Content Services
  • Darren Herman in New York

  • TILES
    • Town Hall!
  • UP
  • Subscribe to Web
Webmaker

Speaker Location:Brett Gaylor – Remote

  • Maker Party continues to roll out — going well

  • Big step forward with Mobile Appmaker last week
    • One of our goals with Webmaker this year is to add a focus on apps

    • As part of this, released Appmaker for Desktop in beta for Maker party
    • Over the last few weeks we’ve made progress on the next step: app made on a mobile device
    • At a workweek in Portland last week, the team settled on a product strategy for the next couple months
    • They are now sprinting towards the first prototype to be shown in Dhaka, Bangladesh next week
    • Note: brief presentation on this later in the meeting
Mozilla Communities

Speaker Location: Mark Surman Remote

  • Headline: we’re looking for new ways community can contribute to top line goals

    • This year, Mozilla has a goal to ‘enable communities that have impact’

    • https://wiki.mozilla.org/2014#Enable_Communities_that_have_Impact
      • Much of the focus so far has been on growth, and we’re making some progress
    • We need to shift our focus towards quality and impact that contributors can have
    • Over the coming weeks: community building teams are actively looking for new ways community can have an impact on top line goals
    • E.g. are there creative ways that community can help get Firefox on a growth trajectory?
    • Mark (MoFo), Mary Ellen (Engagement), Mitchell (chair) are helping the community teams with this
    • If you have ideas, reach out to David Boswell or one of the exec team working this
    • Expect more reports in coming weeks

Speakers

Presenter Title Topic Location Share? Media More Details
Who Are You? What Do You Do? What are you going to talk about? Where are you presenting from? (Moz Space, your house, space) Will you be sharing your screen? (yes/no, other info) Links to slides or images you want displayed on screen Link to where audience can find out more information
Andrew Sliwinski and Simon Wex WebMaker Mobile Appmaker work week Portland/Remote Yes Slides Import / Export API for Apps [1] // App for Import/Export of Apps via SD Card [2] // Device-to-Device App Transfer via NFC [3]
Andrea Wood Digital Fundraising & Advocacy (mofo) Community Indiegogo Campaigns // Maker Party Snippet My house (Oakland CA) No na Find Indiegogo campaign info here // Click here to preview and try out the Interactive Snippet – and you can read a blog post by the lead designer
Fred Wenzel Apps Engineering a set of framework+tools for writing awesome Firefox OS apps. remote no https://hacks.mozilla.org/2014/08/time-to-get-hacking-introducing-rec-room/ no. 1 on HN this morning: [4]. Recroom github repo for readme, issues, etc.
Robyn Chau Events Team BrazilJS 2014 remote yes http://bit.ly/1ldAfds BrazilJS Landing Page Wiki

Roundtable

Do you have a question about a Mozilla Project or initiative? Let us know by Friday- we’ll do our best to get you an answer.

Please note that we may not always be able to get to every item on this list, but we will try!

Who are you? Area of question Question
What’s your name? What do you work on? Is your question about policy, a product, a Foundation initiative, etc. What would you like to know?

Welcome!

Let’s say hello to some new Mozillians! If you are not able to join the meeting live, you can add a link to a short video introducing yourself.

Introducing New Volunteers

New Volunteer(s) Introduced by Speaker location New Volunteer location Will be working on
Who is the new volunteer(s)? Who will be introducing that person? Where is the introducer? Where is the new person based? What will the new person be doing?

Introducing New Hires

New Hire Introduced by Speaker location New Hire location Will be working on
Justin Terry Darren Herman New York Office New York Office Content Partnerships, Partner Success & Content Platform Operations

<meta>

Notes and non-voice status updates that aren’t part of the live meeting go here.

Status Updates By Team (*non-voice* updates)

DevEngage

You might know that we are using UserVoice to allow people to easily report ideas for the developer tools at http://ffdevtools.uservoice.com. We are now extending this to HTML5 Apps as a whole. This will go live soon, and it would be splendid if anyone of you who found things missing in the “web as the platform” to submit them there in order to pre-seed the channel before we announce it live: https://openwebapps.uservoice.com/forums/258478-open-web-apps

Automation & Tools
bugzilla.mozilla.org

Notable changes to bugzilla.mozilla.org during the last week:

  • bug 1041964 Added an indication that a comment is required when setting some tracking flag values

All changes.

Engagement
Apps & Marketplace
Mobile Partner Site
  • The Mobile Partner site (https://mobilepartners.mozilla.org/) is part of Mozilla’s initiative to scale the delivery of Firefox OS devices. The site is specifically targeted to provide self-serve support to the retail/open Market distribution channels and lower volume operators. The intent is to make everything the partner needs to create a Branded Powered by Firefox OS or Firefox OS Inside device available in a curated, guided site with complete and up to date information regarding our product. In order to distribute a Mozilla branded device, Partners must register on the site, accept the click through Prototype agreement, complete and pass Mozilla’s certification process and sign Branding Terms.

  • With the help of the Mozilla Beijing team we are in the process of translating the site to Chinese. We expect to have Chinese (in addition to English) available online by Sept 1.
  • If you are interested in understanding all the steps that a partner needs to undertake in order to bring a Firefox OS device to market, we invite you to visit the site. Its perfectly ok for you to register on the site and accept the prototype branding agreement so that you can have full access to the site – we just request that you use your Mozilla.com email address if you are on Mozilla staff or clearly identify yourself as a contributor so that our Bus Dev team can determine ‘real’ potential partners. We welcome your input and contribution to making it the best site possible!
  • Also we are planning a brown bag on Sept 4, so please plan to join Adam Rogers, Ben Sternthal and Karen Ward on Airmozilla on that date!

  • Dial-in: conference# 8600

    • US/California/Mountain View: +1 650 903 0800, x92 Conf# 8600

    • US/California/San Francisco: +1 415 762 5700, x92 Conf# 8600
    • US/Oregon/Portland: +1 971 544 8000, x92 Conf# 8600
    • CA/Vancouver: +1 778 785 1540, x92 Conf# 8600
    • CA/Toronto: +1 416 848 3114, x92 Conf# 8600
    • UK/London: +44 (0)207 855 3000, x92 Conf# 8600
    • FR/Paris: +33 1 44 79 34 80, x92 Conf# 8600
    • US/Toll-free: +1 800 707 2533, (pin 369) Conf# 8600

Air MozillaMozilla Weekly Project Meeting

Mozilla Weekly Project Meeting The Monday Project Meeting

Firefox AppsSocial Media Marketing for App Developers

No matter where you are in your app development journey – from ideation to having an existing app in the marketplace – you can immediately benefit from real-time social media interactions. In a perfect world, social media marketing (as with building your app website & most other elements of a strong marketing plan) is best leveraged when you first start concepting your app. This seeds fan followings and enables you to gather and implement feedback early on in the process. For instance, Clear sold 350,000 copies of its app within nine days of its launch, thanks to marketing tactics fired well in advance. But don’t worry if you’re much further along on your roadmap – by thinking about marketing at all, you’re already ahead of most app developers.

Naturally, if you’re not already on Facebook and Twitter, you need to start here. Your personal accounts aren’t enough – create unique accounts for your app! Depending on the nature of your app, you might also consider niche social strategies using platforms like Reddit, Vine, and Instagram.

Build a following. If you already have large followings on your personal accounts, absolutely use them to promote your new app pages. Otherwise, find friends and people in your network with large followings and kindly request a shout out – or post directly to their page if you have to. Follow/like people and brands you share a target audience with, and comment in discussions where you can offer an perspective. More importantly, be sure to interact with your own followers!

Use hashtags – thoughtfully: Post content with appropriate hashtags so relevant people can discover you. As a general rule, hashtags should be general enough for people to search for them, but not so general that you’re buried under a thousand posts a minute. #dog is too general, #grumpyonetoothedbulldog is too narrow, and #spotteddog is just right.

Slingshot uses its Facebook page to excite users about new updates. User comments offer valuable information about user sentiment, plus the opportunity to directly respond in real time.

Slingshot uses its Facebook page to excite users about new updates. User comments offer valuable information about user sentiment, plus the opportunity to directly respond in real time.

Have a content strategy: Create a regular content cadence and tell your followers how often you post – daily, weekly, etc – and stick to it. Your posts should include interesting, relevant updates – not sales messages. Don’t post the same content on each channel. Some overlap is okay, but give users unique reasons to follow you on different platforms.  When you don’t have updates of your own, offer an insightful comment or link related to something else related to your industry that is relevant and valuable to your users. Consider services like Outbrain to accelerate your content distribution strategy. Startup Moon also offers a great content marketing guide for startups.

Get feedback: The most important thing to remember about social media is that it’s a two-way channel – not a podium where you do all the talking. Your social media marketing should be a source of intelligence to you. So stimulate relevant discussions. Ask questions, test and validate ideas. Learn who your influencers are. Early on, this can be a great form of market research. Once your social followings have achieved scale, research analytics tools (more on this in a future post) to help test content strategies, identify trends, and fine tune what works.

 

Note: This post is part of the Developer App Marketing Series, specifically designed to offer marketing tips and best practices for new app developers. The series is intended to begin by covering the basis before moving into more targeted app marketing tactics. Developers – is this content helpful, and if not, how can it be? Your feedback is as valued as it is welcome. Please share your thoughts in the comments section!

Mozilla IndiaGrand Maker Party, Pune

Maker Party 2014 was kick-started by President Obama at White House Maker Faire this June. From June 15 – Sept 15, Mozilla Foundation is hosting a Global Maker Party, with small to large Webmaking events happening everywhere. Mozilla India will be hosting/ be part of the flagship Maker Party World Tour.

Grand Maker Party, Pune is being held on the 6th of September 2014. The executive director of Mozilla Foundation, Mark Surman, is going to be personally present for this event. This event is an attempt to map and empower a community of educators and creative people who share a passion to innovate, evolve and change the learning landscape.

The event has a simple format called ‘Hive Pop-up’, it’s like a science fair, where facilitators are sharing cutting edge technologies, teach something new in a engaging way. This event is a platform to connect diverse organizations with learners and encourage connected learning.

We are asking organizations to host a learning station, i.e. a simple table-top activity,  based on their programs/ background, by planning hands-on activity that is easily understandable by any age group/ skill level.

The audience age group would be *13+ and above*, the attempt to target tweens, teens and adults is, we think it is the right time to tap their interest and get the ‘Maker‘ thinking right from the young age than being a ‘consumer’. i.e. Encourage the youth to change from ‘technology/web consumers’ to ‘technology/web makers‘.

If you would like to be a part of this event, please register using the form below:

Loading…

[ps: This is a free event. No registration fee will be required for this event. But if you are travelling from outside Pune, you will need to take care of your own travel and accomodation.]

hacks.mozilla.orgTime to get hacking – Introducing Rec Room

It’s no secret that the best frameworks and tools are extracted, not created out of thin air. Since launching Firefox OS, Mozilla has been approached by countless app developers and web developers with a simple question: “How do I make apps for Firefox OS?” The answer: “It’s the web; use existing web technologies.” was—and still is—a good answer.

But if you don’t already have an existing toolchain as a web developer, I’ve been working on extracting something out of the way I’ve been creating web apps at Mozilla that you can use to write your next web app. From project creation to templating to deployment, Mozilla’s Rec Room will help you create awesome web apps in less time with more ease.

Rec Room is a Node.js utility belt you can wear to build client side web apps. It includes:

  • Brick to add components like appbars and buttons to your UI.
  • Ember for your app’s controllers, models, and views.
  • Handlebars to write your app’s templates.
  • Grunt to run the tasks for your app, including building for production.
  • I18n.js to localize your app.
  • Mocha to test your app.
  • Stylus to write your CSS.
  • Yeoman to scaffold new code for your app’s models and templates.

In this post I’ll walk through how to create a simple world clock web app with Rec Room, how to deploy it, and how you can try out Rec Room for yourself.

Where Does Rec Room Come From?

Much of Rec Room came from a recent rewrite of the HTML5 podcast app. I started working on this app well over a year ago, but its original version wasn’t as easy to work on; it had a lot of global state and a lot of by-hand data-binding. I liked the look of Ember for app development, but back when I started it didn’t quite feel mature enough. These days it’s much better, and I’ve tweaked it in Rec Room to work perfectly without a server.

I tried to take the best from that system and extract it into a set of tools and documentation that anyone can use.

Create your own Rec Room app

Rec Room has just recently been extracted from my experiences with Podcasts; it hasn’t been tested by more than a handful of developers. That said: we’d love your help trying to build your own app for Firefox OS using these tools. They integrate well with tools you probably already know and use–like Node.js and Firefox’s own Web IDE.

To get started, install Rec Room using Node.js:

npm install -g recroom

Clock App

We’ll create a simple clock app with (minimal) time zone support for our example. The app will let you have a clock and compare it with a few time zones.

The recroom binary is your entry point to all of the cool things Rec Room can do for you. First, create your app using recroom new world-clock. This creates the basic app structure. To see the basic app skeleton that Rec Room creates we can now enter that directory and run our app: cd world-clock and then type recroom run. The app will open in your default browser.

First, we’ll add the current time to the main tab. Rec Room supports Ember’s MVC app structure, but also offers simple “pages” for a controller without a 1:1 relationship to a model. We’ll generate a new page that will show our actual clock:

recroom generate page Clock

We can edit its template by opening app/templates/clock.hbs. Let’s change clock.hbs to include the variable that will output our local time:

<h2>Local Time: {{localTime}}</h2>

That won’t do much yet, so let’s add that variable to our ClockController, in app/scripts/controllers/clock_controller.js:

WorldClock.ClockController = Ember.ObjectController.extend({
    localTime: new Date().toLocaleTimeString()
});

You can see that any property inside the controller is accessible inside that controller’s template. We define the 1ocalTime property and it gets carried into our template context.

Now our clock app will show the current local time when we navigate to http://localhost:9000/#clock. Of course, it just shows the time it was when the controller was initialized; there is no live updating of the time. We should update the time every second inside the controller:

WorldClock.ClockController = Ember.ObjectController.extend({
    init: function() {
        // Update the time.
        this.updateTime();
 
    // Run other controller setup.
        this._super();
    },
 
    updateTime: function() {
        var _this = this;
 
        // Update the time every second.
        Ember.run.later(function() {
            _this.set('localTime', new Date().toLocaleTimeString());
            _this.updateTime();
        }, 1000);
    },
 
    localTime: new Date().toLocaleTimeString()
});

Now we can go to our clock URL and see our clock automatically updates every second. This is thanks to Ember’s data-binding between controllers and templates; if we change a value in a controller, model, or view that’s wired up to a template, the template will automatically change that data for us.

Adding Timezones

Next, we want to add a few timezones that the user can add to their own collection of timezones to compare against local time. This will help them schedule their meetings with friends in San Francisco, Buenos Aires, and London.

We can create a timezone model (and accompanying controllers/routes/templates) with the same generate command, but this time we’ll generate a model:

recroom generate model Timezone

We want each timezone we’re to include in our app to have a name and an offset value, so we should add them as model attributes. We use Ember Data for this, inside app/scripts/models/timezone_model.js:

WorldClock.Timezone = DS.Model.extend({
    name: DS.attr('string'),
    offset: DS.attr('number')
});

Next we’ll want a list of all timezones to offer the user. For this we’ll grab a copy of Moment Timezone. It’s an awesome JavaScript library for dealing with dates and times in JavaScript. We’ll install it with bower:

bower install moment-timezone --save

And then add it to our app inside app/index.html:

<!-- build:js(app) scripts/components.js -->
<!-- [Other script tags] -->
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/moment-timezone/builds/moment-timezone-with-data-2010-2020.js"></script>
<!-- endbuild -->

Adding that tag will automatically add moment-timezone-with-data-2010-2020.js to our built app. We’ll add a tab to the page that lets us edit our timezones, on a different screen than the clocks. To add a tab, we just need to open app/templates/application.hbs and add a tab. While we’re there, we’ll change the main tab from the useless {{#linkTo 'index'}} and point it to {{#linkTo 'clock'}}. The new application.hbs should look like this:

<x-layout>
  <header>
    <x-appbar>
      <h1>{{t app.title}}</h1>
    </x-appbar>
  </header>
  <section>
    {{outlet}}
  </section>
  <footer>
    <x-tabbar>
      <x-tabbar-tab>
        {{#link-to 'clock'}}Clock{{/link-to}}
      </x-tabbar-tab>
      <x-tabbar-tab>
        {{#link-to 'timezones'}}Timezones{{/link-to}}
      </x-tabbar-tab>
    </x-tabbar>
  </footer>
</x-layout>

Side note: notice the root URL points to a useless welcome page? We probably want the default route to be our ClockController, so we can set the index route to redirect to it. Let’s do that now, in app/scripts/routes/application_route.js:

WorldClock.ApplicationRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('clock');
    }
});

Interacting with Timezone models

We’ll keep things simple for our example and allow users to select a timezone from a <select> tag and add it with a button. It will show up in their list of timezones, and they can delete it if they want from there. The clock tab will show all times. First, we’ll add our timezone data from Moment.js into our TimezonesController in app/scripts/controllers/timezones_controller.js. We’re also going to implement two actions: “add” and “remove”. These will be used in our template:

WorldClock.TimezonesController = Ember.ObjectController.extend({
    init: function() {
        var timezones = [];
 
        for (var i in moment.tz._zones) {
          timezones.push({
              name: moment.tz._zones[i].name,
              offset: moment.tz._zones[i].offset[0]
          });
      }
 
      this.set('timezones', timezones);
 
      this._super();
  },
 
  selectedTimezone: null,
 
  actions: {
      add: function() {
          var timezone = this.store.createRecord('timezone', {
              name: this.get('selectedTimezone').name,
              offset: this.get('selectedTimezone').offset
          });
 
          timezone.save();
      },
 
      remove: function(timezone) {
          timezone.destroyRecord();
      }
  }
});

So we create a list of all available timezones with offsets. Then we add methods that allow us to add or remove timezones from our offline data store. Next we modify the timezones template in app/templates/timezones.hbs to use the actions and variables we created. All we need to utilize these variables is the Ember SelectView and the {{action}} helper to call our add and remove methods:

<h2>Add Timezone</h2>
 
<p>{{view Ember.Select content=timezones selection=selectedTimezone
       optionValuePath='content.offset' optionLabelPath='content.name'}}</p>
 
<p><button {{action add}}>Add Timezone</button></p>
 
<h2>My Timezones</h2>
 
<ul>
  {{#each model}}
    <li>{{name}} <button {{action remove this}}>Delete</button></li>
  {{/each}}
</ul>

Now we have a Timezones tab that allows us to add and remove Timezones we want to track. This data persists between app refreshes. The last thing we need to do is show these times relative to our local time in our clock tab. To do this we need to load all the Timezone models in the ClockRoute. They’re automatically loaded in the TimezonesRoute, but it’s easy to add them in the ClockRoute (in app/scripts/routes/clock_route.js):

WorldClock.ClockRoute = Ember.Route.extend({
    model: function() {
        return this.get('store').find('timezone');
    }
});

Because of the way our Ember app is wired up, we load all our models in the route and they are sent to the controller once the data store has asynchonously loaded all of the models. The request to find('timezone') actually returns a Promise object, but Ember’s router handles the Promise resolving for us automatically so we don’t have to manage callbacks or Promises ourselves.

Now we have access to all the user’s Timezones in the ClockController, so we can make times in each timezone the user has requested and show them in a list. First we’ll add each Timezone’s current time to our ClockController in app/scripts/controllers/clock_controller.js using Moment.js:

WorldClock.ClockController = Ember.ObjectController.extend({
    updateTime: function() {
        var _this = this;
 
        // Update the time every second.
        Ember.run.later(function() {
            _this.set('localTime', moment().format('h:mm:ss a'));
 
            _this.get('model').forEach(function(model) {
                model.set('time',
                          moment().tz(model.get('name')).format('h:mm:ss a'));
            });
 
            _this.updateTime();
        }, 1000);
    }.on('init'),
 
    localTime: moment().format('h:mm:ss a')
});

Our final app/templates/clock.hbs should look like this:

<h2>Local Time: {{localTime}}</h2>
 
<p>
  {{#each model}}
    <h3>{{name}}: {{time}}</h3>
  {{/each}}
</p>

And that’s it! Now we have an offline app that shows us time zones in various places, saves the data offline, and updates every second without us having to do much work!

Command Line Tools

The old Podcasts app used a (rather awful) Makefile. It wasn’t very useful, and I don’t think it ran on Windows without some serious effort. The new build system uses Node so it runs comfortably on Windows, Mac, and Linux. Commands are proxied via the recroom binary, also written in Node, so you don’t have to worry about the underlying system if you don’t need to modify build steps. recroom new my-app creates a new app; recroom serve serves up your new app, and recroom generate model Podcast creates a new model for you.

To build your app, you just need to run recroom build and a version with minified CSS, JS, and even HTML will be created for you in the dist/ folder. This version is ready to be packaged into a packaged app or uploaded to a server as a hosted app. You can even run recroom deploy to deploy directory to your git repository’s GitHub pages branch, if applicable.

See the app in action!

This entire sample app is available at worldclock.tofumatt.com and the source code is available on GitHub.

Try Using Rec Room for Your Next Web App

You can try out Rec Room on Github. Right now some docs and tools are still being abstracted and built, but you can start building apps today using it and filing bugs for missing features. We’d really love it if you could give it a try and let us know what’s missing. Together we can build a cohesive and polished solution to the all-too-common question: “How do I build a web app?”

Software CarpentryConversations About Teaching

Over the last few days, there have been four related discussion threads on the Software Carpentry mailing lists about what we use, what we teach, and how we teach it. Together, they highlight what we're doing well and where we need to do better.

Stuart Rossiter did a great job of summarizing the first two of those (with some later follow-up):

There was discussion on:

  1. IDE vs. IPython Notebook vs. command-line/text editor for Python teaching
  2. IPython Notebook vs. Markdown for lecture notes (specifically for Python teaching but by implication could extend to teaching other topics)
  3. Tools themselves causing disruptive cognitive loads, related to whether how they work hides (or merges) too many "fundamental" concepts/levels, and the ever-present issue of how this relates to learner backgrounds (and how/whether you can tailor things for an audience, including how one could assess this empirically)

Notice that 1 is really a specific example of 3, i.e., what tool gets the best balance of power/familiarity/understanding fundamentals? However, it's interesting that all the responses (I think) to 1 were actually about what IDE worked best, and not about the types of tool.

2 is in many ways a flavour of 3, but where the learners/users are the SWC contributors. As such, people's backgrounds and the use cases for the tools obviously mean that things like diff handling become important (but, interestingly, most of the discussion was really about familiarity because that's the main barrier-to-entry).

1 and 2 also implicitly bring up the discussion as to whether we teach one consistent toolset. Here, there is a tension between SWC students getting mastery of a well defined tool and concept-set versus them understanding the landscape of tools and concepts.

This highlights three related tensions in many kinds of teaching (not just Software Carpentry):

  1. Fundamentals vs. authentic tasks. On the one hand, people need fundamental concepts in order to know how to use specific tools and practices properly. On the other hand, people come to classes like ours because they want to be able to actually do things, and the sooner they're able to accomplish authentic tasks, the more likely they are to learn and to continue learning.
  2. Foxes vs. hedgehogs. As the saying goes, "The fox knows how to do many things; the hedgehog knows how to do one thing well." If we concentrate on a handful of tasks with lots of reinforcement (as Bennet Fauber stressed), learners will leave knowing how to do a few things well—but only a few. A broad overview of the full landscape of tools and techniques may give them a better understanding of how things fit together, but may also just confuse them, and in either case they will leave having actually mastered fewer things.
  3. Necessary losses. Our teaching is necessarily less than perfect for any particular learner because we don't have the resources to customize each lesson individually, and even if we did, we can't know in advance what "perfect" would actually be. As David Martin said, there is no globally right tool for teaching: what's best depends on the students and the intended learning outcomes, and whatever we pick cannot be the best choice for people who have different backgrounds and want different outcomes.

Our lessons try to strike a balance between the practical and the conceptual by advertising the first and smuggling in the second. For example, our introduction to the Unix shell only covers 15 commands in three hours. Along the way, though, it shows people how a filesystem is organized, how to get the computer to repeat things so that they don't have to, and (hopefully) why lots of small single-purpose tools that work well together are better than one large tool that tries to do everything. Similarly, the real goal of our introduction to Python isn't really to teach people the syntax of Python: it's to convince them that they ought to write short, readable, testable, reusable functions, and that those are actually all the same thing.

Stuart goes on to ask whether the Software Carpentry brand consists of "just" our topics and teaching style, or is tied to the specific tools we use. I want to say it's the former, but in practice, you can't teach programming without picking a language and an editor. Since we don't have the resources to build and maintain lessons covering all combinations of all possibilities, we have to make choices, which effectively means we're advocating some things over others.

Meawhile, Tim McNamara re-raises the perennial question of assessment:

There seems to be be many statements that follow this format: "in my experience, X is better for learners". The problem is that for each X, not-X is also strongly supported. The key points for me is that we're making inferences about outcomes (e.g., learner growth/satisfaction) on the basis of anecdotal evidence (personal experience).

It strikes me that Software Carpentry is in a unique position to actually test and validate which tools work best. We run many bootcamps, have people who know experimental design and have increasingly strong tooling to support to enable experiments.

I couldn't agree more, but as Titus Brown said in reply:

we have had a hard time getting the necessary funding to do good assessments for Software Carpentry. I think we need to support someone trained, focused, and willing to engage long term (~2+ years) with this as their primary project.

We've learned the hard way that assessing the impact of the various things we're doing is neither easy nor cheap. We don't know how to measure the productivity of programmers, or the productivity of scientists, and the unknowns don't cancel out when you put the two together. Jory Schossau has done valuable service by analyzing survey data and interviewing bootcamp participants (see this pre-print for results to date), but if we want to get the right answer, we're going to have to find a backer.

As this discussion was going on, Ethan White tweeted:

Next time you think about getting involved in a debate about programming languages or text editors, go build something cool instead.

I think this thread shows that there's a useful third path. In it, a dozen instructors who have been teaching R compare notes about what they're doing and how it's working. I really enjoyed the exchange of specifics, and I think that more discussions like this will do a lot to strengthen our instructor community.

To wrap up, here are my take-aways from this past week:

  1. I need to do a much better job in the instructor training course of introducing people to our existing material, the tools we use, and the "why" behind both. This probably means adding at least one more two-week cycle to the training; I hope that's a cost potential instructors will be willing to bear.
  2. I need to foster more discussions like the one about how we teach R, and turn those discussions into training material so we don't have to repeat them every twelve months. To get started on that, I'm going to prod people who've taught this year to complete our post-bootcamp instructor survey, and try to get discussions going on the discussion list about how we all actually teach the shell, Python, and Git.
  3. We need to find resources to do assessment properly.
  4. I need to do a better job of monitoring the mailing list (and get someone else to keep an eye on it when I'm not available). Some of the discussion was less respectful than our code of conduct requires, and the onus is on us to make sure that everyone always feels welcome.

We've come a long way since our first workshop at Los Alamos sixteen years ago—if all goes well, we'll reach our ten thousandth learner some time in the next twelve months—but we've still got a lot to learn. We'd welcome your suggestions about what to try next.

Air MozillaWebdev Beer and Tell: August 2014

Webdev Beer and Tell: August 2014 Web developers across the Mozilla community get together (in person and virtually) to share what side projects or cool stuff we've been working on.

Air MozillaWebmaker Demos August 15

Webmaker Demos August 15 Webmaker Demos August 15

Mozilla Web DevelopmentAnimating the Firefox Desktop Pages

As you may have noticed, Firefox for desktop computers (Windows, Mac, and Linux) got a redesigned interface with the release of Firefox 29.0. This redesigned browser called for redesigned web pages to showcase the new interface (the tabs, icons, menus, etc., collectively called “browser chrome”) and new features (especially the new customization menu)

Naturally, the main audience for these pages are people using browsers that aren’t Firefox, so we wanted to illustrate the new Firefox design in a fun and compelling way that gives them a real sense of what it looks like, hopefully encouraging folks to download it and see it first hand. Another big target audience are Firefox users who haven’t yet updated, so we needed to give them an overview of what’s new.

This also gave us a chance to create some snazzy animations to show off some of the advances in CSS and SVG supported by the current generation of browsers, both on desktop computers and mobile devices. Here’s how we made it.

Browser Chrome Animations

In order to demonstrate features of Firefox, we needed to simulate the way interface elements respond to user actions; opening and closing tabs, rearranging icons, adding a bookmark, and so on. This called for fairly complicated animation sequences that had to be quick and buttery smooth. The complex interplay of multiple elements moving both sequentially and in tandem really drove home the need for a CSS animation editor (vote it up!).

Approach & structure

Each animation illustrating the browser chrome (One, Two, Three) is wrapped in a div element with a common class applied (animation-wrapper), along with an id we can use to target the specific element with JavaScript.

The first element inside the animation wrapper is a composite fallback image for browsers that don’t support CSS animations. This image has a common classname (fallback) for easy CSS targeting. We can conditionally hide this image by leveraging the cssanimations class Modernizr applies to the body. By first assuming that animation is not supported, we ensure a functional degradation for even the oldest and least capable browsers, and we can progressively enhance the page for more advanced browsers that support the more advanced features.

The next element inside the wrapper div is the stage for the entire animation – <div class="stage">, really just an invisible box in which other elements can move around. Using the same cssanimations class from Modernizr, we’ll display the stage for browsers that can handle the animation.

/* for legacy browsers */
.fallback {
    display: block;
}
 
.stage {
    display: none;
}
 
/* for modern browsers */
.cssanimations {
    .fallback {
        display: none;
    }
 
    .stage {
        display: block;
    }
}

(We use Less to preprocess our CSS, so those nested rules are converted into separate rules with descendant selectors.)

The final task is to trigger the animations only when they come into view, as there’s no sense running an animation while it’s off screen. We used jQuery Waypoints to monitor the page’s scroll position, adding an animate class to each wrapper div when it comes into view. The addition of that class sets off the CSS animation sequence.

.animating-element {
    position: absolute;
    top: 10px;
    right: 40px;
}
 
/* animate class added via JavaScript/Waypoints based on scroll position */
.animate {
    .animating-element {
        animation: moveAround 0.7s ease 0s 1 normal forwards;
    }
}

This approach worked well and helped us keep each animation block self-contained and modular. It provided a common and easily customizable HTML & CSS structure for each animation, and less capable browsers still have access to all the content in a well styled page. Within that stage box we can add any other content or elements we need.

Timing is everything

The browser chrome animations have multiple elements with multiple animations applied, so getting the timing just right became rather tedious. Because separate animations are completely independent in CSS, there’s no simple way to tell a browser to “start animationY 2.1 seconds after animationX completes.” Instead, you need to do the calculations yourself and hard code them into each animation declared in the CSS, liberally using animation-duration and animation-delay to fire off each step of the scene in sequence. The mental gymnastics go something like this:

Step 1 has a 0.7 second delay and runs for 1.5 seconds. Then Step 2 should start 1.4 seconds after Step 1 completes, so it should have a delay of… 3.6 seconds. Step 2 runs for 2 seconds, and Step 3 needs to begin a quarter of a second before Step 2 completes, so Step 3 needs a delay of 5.35 seconds…

As you can imagine, the more elements you animate and the more steps you have in the sequence, the harder the math becomes. Adjusting the timing of one step in the chain can mean adjusting all the subsequent steps to compensate.

Designer Ty Flanagan created video mockups in Adobe After Effects to serve as a guide for the CSS animation, which was an enormous help. There was still a fair amount of fine tuning to be done by hand, constantly refreshing the page and tweaking a few milliseconds until it just “felt right,” but that process could have taken much longer without the videos for reference.

Another way to do all of this would have been controlling the chained animations in JavaScript, relying on the animationend event to fire off the next step in the sequence. However, a bunch of event listeners and setTimeout calls in a script probably wouldn’t have been a faster or better approach.

Animations in a Circle

Some of our favorite animations are the customize icons, mostly because the circular mask effect is so neat in its simplicity.

The key to achieving the circular mask is a bit of absolute positioning and the incredibly versatile border-radius. The markup isn’t too complex – a stage to contain everything, a div for the circular mask, and whatever elements need to be animated.

<div class="stage">
  <div class="circle-mask"></div>
  <div class="animated" id="animated-block1"></div>
  <div class="animated" id="animated-block2"></div>
</div>

If you’d like to see an example and play around with the code before reading about the methodology, here’s a little demo on CodePen.

The stage

The stage has a set height and width with a hidden overflow and relative positioning. The background color of the stage fills the circular mask.

.stage {
    position: relative;
    width: 300px;
    height: 180px;
    overflow: hidden;
    background: #fff;
}

The circular mask

The circular mask is absolutely positioned at the center of the stage, calculated by (stage width - (mask width + mask border width))/2 (this equation could be simpler with box-sizing: border-box). The mask has a wide enough border to reach just past the furthest boundary of the stage. The border bumping up against the page background is what completes the illusion of the mask, so the mask’s border color matches that of the section’s background color (sadly, this means the technique only works with a solid colored background).

To make sure the mask covers the animated elements, it has a z-index at least one higher than the front-most animated element.

.circular-mask {
    position: absolute;
    width: 164px;
    height: 164px;
    border: 100px solid #ccc;
    border-radius: 50%;
    top: -100px;
    left: -32px;
    z-index: 2;
}
 
/* animated elements share absolute positioning and 
   a z-index lower than .circular-mask */
.animated {
    position: absolute;
    z-index: 1;
}

The animated elements

The only requirement for the animated elements is that they reside inside the stage and have a z-index lower than the mask. Otherwise, anything goes.

Though purely flair (as opposed to the feature demonstrations provided by the browser chrome animations), these circular animations were fun to build and we’re very pleased with the result.

Drawing Firefox in the browser

When we first watched a video mockup of the proposed intro animation for the new Firefox for Desktop landing page, we wondered if this was actually possible to pull off in a web browser. The animation involves a series of moving lines which fill in as the outlines fade onto the web page, creating an illustrated image of the Firefox browser. Definitely not a typical animation you see on the web every day!

The first step on the path of discovery was to choose an appropriate image format. SVG seemed like the most obvious choice, given that the images needed to scale. Nobody on the team had any prior experience with SVG animation but it seemed like a fun challenge! Ty came up with a rough demo showing how we might use SVG path strokes for the moving lines, which seemed like a perfect starting point. We could have chosen to use an SVG animation library such Raphael or SnapSVG, but we wanted to try to keep our dependencies as light as possible (we had plenty already; no reason to add any more if we can avoid it). The timing and intricacies of the animation made a strong case for trying to use CSS keyframe animations, and this would also be a good opportunity to show off their potential. It was then we recalled this really clever technique that could pull off the same line-drawn effect using CSS.

Animating SVG line paths using CSS

The trick to the line drawing effect is to animate the stroke-dashoffset of an SVG image path. The stroke-dasharray property allows you to apply a dashed border effect to the outline of an SVG image. The clever part is that if you set the length of the dash equal to the total length of the image path, you can then animate stroke-dashoffset to make it appear as if the line is being drawn one segment at a time. Magic!

Here’s an example of an SVG path:

<path class="circle" stroke="#5d7489" stroke-width="2" stroke-opacity="1" 
fill="#5d7489" fill-opacity="0" 
d="M33.665530413296274,58.589001490321166C43.94406883919239,58.59306994020939,52.274,66.92651000976564,52.274,77.205C52.274,87.486,43.939,95.821,33.658,95.821C23.377000000000002,95.821,15.042000000000002,87.48599999999999,15.042000000000002,77.205C15.041,66.923,23.376,58.589,33.658,58.589">
</path>

And some CSS to animate it:

.circle {
    stroke-dasharray: 117;
    stroke-dashoffset: 117;
    animation: draw-circle 5s linear forwards;
}
 
@keyframes draw-circle {
    100% {
        stroke-dashoffset: 0;
    }
}

You can find the required length of a path pretty easily using a bit of JavaScript:

var circle = document.querySelector('.circle');
var length = circle.getTotalLength();

The animation on the finished page is quite a bit more complicated than this example, but hopefully you can get the idea. We also animated fill-opacity and stroke-opacity to color in the browser panels and fade out the lines at the end of the animation, leaving a scalable vector drawing of the new Firefox.

Scaling SVG using CSS transforms

As well as animating the line drawing, we also needed to scale the image as it zooms onto the page. From there, the icons also zoom into their appropriate places. This was all done using regular CSS transforms via translate and scale.

There are some notable cross-browser inconsistencies here when it comes to scaling SVG using this method. Both Chrome and Safari render a bitmap of an SVG prior to performing a CSS transform. This is presumably for performance reasons, but it does lead to blurry images when you blow them up. Firefox seems to weigh up performance and image quality a little differently, and renders sharper images when they scale. To get around the resizing issues, the best solution was to render icons at their largest size initially and then scale them down, as opposed to the other way around. It seems browsers still have some work to do in this area in order to improve SVG rendering under these circumstances.

Putting it all together

Combining all the separate CSS keyframe animations together was probably the most time consuming task. We can also look forward to the day when we no longer need vendor prefixes for CSS keyframe animations, as the duplication of code required is still a bit undesirable. Aside from this, getting the timing right was once again the trickiest part. For a less-than-5-second animation, having to reload and run through the whole sequence over and over made the process pretty time consuming (here’s another vote for that CSS animation editor).

The final result of all this work is a set of pages that beautifully show off what the new desktop Firefox looks like while also showing off what it can do with open web technologies. If you haven’t yet, please do check it out. It’s all responsive, mobile-friendly, progressively enhanced, retina-ready, and still pretty light weight all things considered. And without a single byte of Flash.

The team

  • Jon Petto – Developer
  • Alex Gibson – Developer
  • Holly Habstritt Gaal – UX Designer
  • Ty Flanagan – Graphic Designer
  • Matej Novak – Copywriter
  • Jennifer Bertsch – mozilla.org Product Manager
  • Mike Alexis – Program Manager

This article was co-written by Jon Petto and Alex Gibson, with editorial assistance from Craig Cook.

Mozilla IndiaCelebrating Independence Day with Firefox OS

Hi all,

Firefox OS [the only mobile Operating System built with open Web Technologies] powered mobile phones are ready to hit the Indian market in a few days.

To spread the word about the launch and celebrate India’s 68th Independence Day, We have created some nice graphics.

Facebook Cover Picture Independence Day 2014

Facebook Cover Picture – Independence Day, 2014

The graphics are a perfect combination with our culture, spirit of freedom and Firefox OS.

You can access the entire graphics assets from here.

Please use the images to change Your Profile Pictures and Cover Pictures of Your Facebook and Twitter to show the love to the Firefox OS and Mozilla’s mission to protect the Internet, and celebrate India’s Independence Day.

Happy Independence Day From the Mozilla India Team.

 

 

 

Air MozillaFirefox OS launch in El Salvador

Firefox OS launch in El Salvador Li Gong welcomes Movistar El Salvador to the Firefox OS family.

Mozilla Add-ons BlogAdd-on Compatibility for Firefox 32

Firefox 32 will be released on September 2nd. Here’s the list of changes that went into this version that can affect add-on compatibility. There is more information available in Firefox 32 for Developers, so you should read that too.

General

Content scripts

Implement Xrays to Object objects, Implement Xrays to Array objects. This extends an important security barrier between privileged and unprivileged code, called Xray Vision. In a nutshell, it protects privileged scripts from running unexpected code when calling familiar functions in content code, like window.alert, which can be replaced by page scripts. It ensures that you always call the original function.

For better separation between privileged and unprivileged code, we recommend that you start looking into the Message Manager. We will be writing more about it soon, because using the Message Manager will be necessary when Firefox moves to a multi-process architecture (known as Electrolysis or e10s for short). The sooner you start using it in your add-on, the better.

XPCOM

New!

  • Provide add-ons a standard directory to store data, settings. Most add-on devs know that they should store their data somewhere in the profile directory (preferences should only store small configuration values), but we don’t have a clear standard for this, or a good storage API. This first step establishes a standard directory: [profile]/extension-data/[add-on ID]. The follow-up bug will implement an API to make it easier to store data in that folder. For now, you should consider migrating your data to the new location. Kudos to Alex Vincent for the great work!

Please let me know in the comments if there’s anything missing or incorrect on these lists. If your add-on breaks on Firefox 32, I’d like to know.

The automatic compatibility validation and upgrade for add-ons on AMO will happen soon, so keep an eye on your email if you have an add-on listed on our site with its compatibility set to Firefox 31.

Air MozillaSathyanarayanan Gunasekaran, "Games, games and more games"

Sathyanarayanan Gunasekaran, Intern presentations from Guptha Rajagopal, Jeremy Poulin, Basar Koc, and Sathya Gunasekaran. Sathyanarayanan Gunasekaran - "Talk about porting SDL2 to Javascript using emscripten and WebRTC integration in the new Mozilla game catalog/store."

Air MozillaJeremy Poulin, "Predictor: Because Witches Are Scary"

Jeremy Poulin, Intern presentations from Guptha Rajagopal, Jeremy Poulin, Basar Koc, and Sathya Gunasekaran. Jeremy Poulin - "In the world of the web, there are many dark mysteries - ancient wonders and relics of yore. The Firefox has long shined its flaming tail and enlightened the wonders hidden in the shadows - but in doing so has exposed many of the creatures lurking in the depths. This is a tale of a young hero who fought to save the fox from the tendrils of sluggishness that seek to bind it with every page load. A hero who locked swords with the great cache and refused to yield. Oh, and everything is broken and it's all my fault."

Air MozillaIntern Presentations

Intern Presentations Intern presentations from Guptha Rajagopal, Jeremy Poulin, Basar Koc, and Sathya Gunasekaran. Sathyanarayanan Gunasekaran - "Talk about porting SDL2 to Javascript using emscripten and WebRTC integration in the new Mozilla game catalog/store." Guptha Rajagopal -" Adding new JavaScript language features to SpiderMonkey." Jeremy Poulin - "In the world of the web, there are many dark mysteries - ancient wonders and relics of yore. The Firefox has long shined its flaming tail and enlightened the wonders hidden in the shadows - but in doing so has exposed many of the creatures lurking in the depths. This is a tale of a young hero who fought to save the fox from the tendrils of sluggishness that seek to bind it with every page load. A hero who locked swords with the great cache and refused to yield. Oh, and everything is broken and it's all my fault."

Air MozillaGuptha Rajagopal, "SpiderMonkey - More Strings, More Class"

Guptha Rajagopal, Guptha Rajagopal -" Adding new JavaScript language features to SpiderMonkey."

hacks.mozilla.orgVideos: getting started with your Flame device

Flame reference deviceThe Flame Developer reference phone is currently on its way to developers who either are Mozillians, bought them or have created apps for it.

You can buy the flame device online at everbuying, for $170 including postage and packing and world-wide delivery. There is no contract and not obligation to a mobile provider. This is a developer phone to be used with any SIM you have at hand.

Today we’re going to show you in four short videos what the Flame device is, how to set up your Flame device as a developer phone once you have it, how to flash a new Firefox OS image onto the device and how to throttle the RAM to simulate slower devices.

For all of this you need a few things:

  • A USB cable to connect the Flame device
  • You need ADB and Fastboot installed. You can get this by installing the full Android developer suite or using these small and simple installer for Windows or Linux and OSX

Say “hello” to the Flame device

In this video we quickly introduce you to the Flame Developer reference phone, explaining its features and specifications.

Setting up your Flame device

In this video you will learn how to set up your Flame device as a developer device. This includes enabling the developer menu and getting detailed information about the running apps using the Developer HUD. This tool tells you not only the detailed memory consumption of your apps, but also the frames per second they run on and where you memory went. All of which directly on the device itself.

Changing the RAM of your Flame device

Out of the box the Flame device comes with 1GB of RAM which is a good number for a daily use phone, but much more than a lot of the commercially available Firefox OS devices have. That’s why we made it easy for developers to simulate less powerful devices by throttling the RAM using ADB and Fastboot.

Flashing a new Firefox OS image to your Flame device

In most cases, the over the air OS upgrades of Firefox OS should be enough for developers to stay up to date. If you want to live closer to the edge though, you can easily flash images provided by Mozilla to your device. All it needs is rebooting your device from the command line and running a shell script.

That’s it for now – stay up-to-date on the Wiki

We hope these videos have shown you how much insight into your apps and Firefox OS you get on a Flame device. All the information is also available on the Flame Device wiki page and will get updates as new information is available.

WebmakerCheck out these kindred online learning communities

We started running online learning modules in response to the growing need for people to learn how both the technical and social structures of the web work. Open, online learning can activate and inspire people, and we’ve been trying to make Webmaker’s #TeachTheWeb program a sustainable engine of learning and support for our community. We’re pleased to partner with other open communities as we explore online learning and connectivism.

Meet Educator Innovator

Educator Innovator is an online meet up, blog and community centered on the principles of Connected Learning and run by a group of inspiring educators who are eager to help us understand how we can use re-imagine learning. Sponsored by the NWP and MacArthur Foundation, Educator Innovator recently ran the second annual #CLMOOC, a six week online learning experience designed to connect educators and encourage people to make and reflect. Learn more about Educator Innovator here.

Meet P2PU

Peer to Peer University is a collection of bright minds and inspiring open sourcers who are exploring open learning at every turn. They helped us build Webmaker Training and generally serve as inspiration by publishing research on open learning, organizing learning experiences and otherwise openly building an ecosystem of online learning communities. P2PU offers a variety of massive open online courses (MOOCs) as well as independent modules to help people level up in…well just about any skill you can think of! Head over to P2PU and explore their community!

Meet School of Open

Partnering with P2PU, Creative Commons offers online courses and in person workshops designed to help you learn about a variety of open practices. The School of Open spans the globe with innovative courses around open licensing, copyright, collaboration and more. In September, this global community of volunteers will be launching School of Open Africa, a continental launch of open courses and workshops organized by the African community. Explore the School of Open and find an open course that interests you.

Meet ConnectedCourses

Starting September 15th, a group of inspired connected educators will be talking about openness and blended learning in a 12 week course that aims to help people run their own connected courses. The coursework will help you understand how we work in the digital space by demystifying the tools and trade of openness. Connected Courses is a way to explore why you might run a Connectivist learning experience, how to get started, how to connect online and offline participants, and how to MAKE things that support this kind of learning. You can join in the fun here.

Special Thanks

All of these initiatives have individuals who have actively encouraged and supported Mozilla Webmaker and our various programs. We’re so happy to be teaching and learning with you!

QMOFirefox 33 Aurora Testday, August 22nd

Greetings fellow mozillians,

We are happy to announce that Friday, August 22nd, we’re going to hold the Firefox 33.0 Aurora Testday. We will be testing the latest Aurora build, with focus on the most recent changes and fixes. Detailed instructions on how to get involved can be found in this etherpad.

No previous testing experience is required so feel free to join via #testday IRC channel and our moderators will offer you guidance and answer your questions as you go along.

Join us next Friday and let’s make Firefox better together!

When: August 22, 2014.

Mozilla IndiaCelebrate Independence Day with Firefox OS

Hi all,

Firefox OS -the only mobile Operating System built with open Web Technologies- powered mobile phones are ready to hit the Indian market. The launch will happen within just a few Days.

To spread the word about the launch and celebrate India’s 68th Independence Day, We have created some nice graphics.

The graphics are a perfect combination with our culture, spirit of freedom and Firefox OS.

 You can access the entire graphics assets from here.

Inside the drive folder, We have shared finely crafted graphics for changing Your Social Media Avatars of both Facebook and Twitter.

Please use the images to change Your Profile Pictures and Cover Pictures of Your Facebook and Twitter, and show the love to the Firefox OS and Mozilla’s mission to protect the Internet, and celebrate India’s Independence Day.

How awesome it is :)

If You have any feedbacks, please let us know…

Happy Independence Day again.

Firebug BlogFirebug 2.0.3

The Firebug team released Firebug 2.0.3. This is a maintenance release fixing reported issues as well as updating couple of locales.

 

Firebug 2.0.3b1 has also been released to update users on AMO beta channel. This version is exactly the same as 2.0.3

 

Firebug 2.0.3 is compatible with Firefox 30 – 32

Firebug 2.0.3 fixes 15 issues.

 

Please post feedback in the newsgroup, thanks.

Jan ‘Honza’ Odvarko

 

Software CarpentryA MOOC on Practical Numerical Methods with Python

As announced at SciPy'14 last month Prof. Lorena Barba will be teaching a MOOC titled Practical Numerical Methods with Python this fall, and the course site is now open for registration. Having worked through her excellent 12 Steps to Navier Stokes notebooks, I think this will be a great course, and I urge everyone interested in the subject to check it out.

Air MozillaWebGL in Web Workers

WebGL in Web Workers Jonathan Morton - "With the integration of WebGL into Web Workers, Firefox can support web applications that perform all of their graphics rendering work in parallel. This can improve the browser's performance and responsiveness for apps running GPU intensive tasks."

Air MozillaIPC, supervisor and FirefoxOS

IPC, supervisor and FirefoxOS Julian Hector - "IPC, supervisor and FirefoxOS"

Air MozillaIntern Presentations

Intern Presentations Susanna Bowen - "Ruby characters are used in several languages as phonetic guides for the main text. I'll be talking about how we can recognize and render these in Firefox." James Hobin - "The not-so-secret ingredients behind making frontends for systems on the Systems Front End team." Julian Hector - "IPC, supervisor and FirefoxOS" Jonathan Morton - "With the integration of WebGL into Web Workers, Firefox can support web applications that perform all of their graphics rendering work in parallel. This can improve the browser's performance and responsiveness for apps running GPU intensive tasks."

Air MozillaAdding Support for CSS Ruby

Adding Support for CSS Ruby Susanna Bowen - "Ruby characters are used in several languages as phonetic guides for the main text. I'll be talking about how we can recognize and render these in Firefox."

Air MozillaA Cake Filled With Rainbows, Smiles, and JavaScript

A Cake Filled With Rainbows, Smiles, and JavaScript James Hobin - "The not-so-secret ingredients behind making frontends for systems on the Systems Front End team."

WebmakerBerlin, Mexico, Mali: A Maker Party Roundup (Week 4)

Maker Party By The Numbers:
Total events during Maker Party: 1,220+
Individuals attending Maker Party events:  63,000+
Number of cities hosting Maker Party events: 260+

It’s been almost four weeks since the start of Maker Party which means we are at the halfway point of our global party! Through the hard work and participation of thousand we are changing the world, empowering people and starting a movement. Learn more about the wonderful ways people have been contributing to the Maker Party campaign this past week:

Maker Party @ Gangadevipally in India

Here’s what happened last week:

Maker Party – August 8th, Berlin
This month-long Maker Party welcomed makers from around the world to participate in building a makers lab in a shipping container. The kick-off celebration on August 8th involved workshops on everything from soldering, live graffiti, machine knitting and more. Learn about the event here.

Webmaker training and Maker Party – August 5th, Mali
This event was an introduction to web education to equip individuals in the African education system with the tools they need to succeed. The program for the event included teaching the basics of the web including HTML5, JavaScript and CSS technologies using the Webmaker tools. Get more information here.

Maker Party @ Gangadevipally – August 7-9th, India
Being hosted in the village Gangadevipally, this events purpose was to bring the awareness of the open web to rural people while also teaching the web to hundreds of families living in the village. Read the blog post.

3D Factory

3D Factory

Maker Party at Coworking Monterrey – August 4th, Mexico
A 3D printing Maker Party where youth learned how to make their own Maker Party 3D logo’s!  Attendees even got to see how you could 3D print individuals, crowns and more. See pictures from the event here.

Makes

Resources

  • Watch this live tutorial on how to build an app without knowing any code on Appmaker.
  • Planning a Net Neutrality Maker Party? Find tips, tricks and support here.

In the News

Get Involved 

Air MozillaMentoring in SF - How you can change a life.

Mentoring in SF - How you can change a life. A short presentation and Q&A by Spark Mentors, a company in San Francisco that matches at-risk middle school students with professionals to allow them to explore careers and get excited staying in school to get to those careers.

Air MozillaMozilla Festival MozPub (Aug 13th, 2014)

Mozilla Festival MozPub (Aug 13th, 2014) Spike (Chris Foote) talks about the Mozilla Festival 2014 at the Mozilla London Space, and how you can get involved with volunteering for the event.

Air MozillaProduct Coordination Meeting

Product Coordination Meeting Weekly coordination meeting for Firefox Desktop & Android product planning between Marketing/PR, Engineering, Release Scheduling, and Support.

Mozilla IndiaCommunity Ideas for Firefox OS Apps

With Firefox OS poised to coming to India very soon, we have a lot of new opportunities for developers from all around the nation to develop Mobile applications for Firefox OS.

With the Indian launch nearing reality, many Mozillians are contributing to the project in terms of Hackathons, teaching app development, getting involved with maker parties, teaching Appmaker and lot of other things.

To help application developers in developing open web apps, we would like to create a consolidated pool of app ideas in the Google form shared below, the replies to these are also open and can be found at the link shared below.

If you or any of your Friends and family members want to have an app do something that you believe can be of great use to you or others, please do share your app ideas here.

Link to Google form to share.
Link for the responses

hacks.mozilla.orgProgramming games in the browser

A programming game is a computer game where two or more programs compete with each other. What are the basic requirements for programming games and can they be realized in browsers? With JavaScript?

4 basic claims

There are 4 basic claims. Competing programs:

  • must run isolated from the main program.
  • must communicate with the main program in a defined way.
  • should run parallel. Parallel to the main program and parallel to each other.
  • should be injected in the playing environment in an easy way.

The good old JavaScript is running synchronously and there is no way to isolate subprograms. But times are changing and modern JavaScript has a lot more features. What about Web Workers? They were designed to make JavaScript faster, running expensive calculations in the browser without blocking the user interface. But Web Workers can do more. They meet our claims about programming games! They run isolated from the main program, communicate with the main programs by events, run parallel and thanks to the new File API they can be injected locally.

WEB WORKER CONTEST

That’s all. It’s really easy creating programming games with Web Workers. To show this idea working in May 2014 I launched a simple programming game based on Web Workers, the WEB WORKER CONTEST. The actual game is a simple mathematical challenge: How to conquer a square of 100×100 fields. Starting from a random point the player must conquer a playing area of 100×100 fields with simple moves (up, down, right, left).

A new field can be occupied only if it was not previously occupied by the opponent’s program. The players do not have any information about the playing area. The only information they receive is whether their chosen move is possible or not. So, the Web Worker use postMessage() to send their new move. And with the onmessage() event they receive whether their move was possible or not (a simple true or false). The main program do it vice versa. It receives the move with onmessage(), execute the move on the playing area and send the success with postMessage().

In the end your code looks like this:

// - worker1.js -
// makeMove() calulates the next move
 
onmessage = function (event) {
  var success = event.data.success;
  var direction = makeMove(success);
  postMessage({
    direction: direction
  });
};
 
// - main program -
// makeMoveWorker1() executes the move
 
var worker1 = new Worker('worker1.js');
worker1.onmessage = function(event) {
  var direction = event.data.direction;
  var success = makeMoveWorker1(direction);
  worker1.postMessage({
    success: success
  });
};

Now, just start the game with

// analogously for a second worker
 
woker1.postMessage({ 
  success: true
});

and it's in full swing.

The complete code is available on GitHub.

The main challenge: equal distribution of machine time

The main challenge for programming games with Web Workers is the equal distribution of machine time to both Web Workers. There are 2 separate time problems. One in the loading phase, the other in the playing phase.

Before starting the game, both Web Workers must be loaded (remote or local). So, before starting the game you must wait until both Web Workers are loaded. Unfortunately there is no onload event for Web Workers. Of course we can do something about this: In the beginning the main program sends an 'are-you-ready' post to the player and starts the game after both workers confirm this post.

The equal machine time during the playing phase is in general not under the control of the main program. It can happen that one player can do lots of moves before the other player can move. To get equal conditions for both players is a challenge for both the browser engine and the operating system. But it is possible that one player try to block the other by permanent firing (with a postMessage loop). To prevent this the main program send, together with the success information, a random ID. The player must resend this ID with his next move (otherwise he will be disqualified). With this restriction the machine time is sufficiently equally distributed.

More videos are available on YouTube.

The contest and programming games

The WEB WORKER CONTEST was very agile. During 4 weeks over 200 programmers with over 700 programs tinkered on the best strategy to conquer the field.

Programming games in the browser works. With the Web Worker technology we have the instrument to realize them. And programming games in the browser are very handy for the participants. No need for installing a playing environment. Just go to the web site, write your code, test and upload it.

WebmakerIntroducing three new Webmaker contribution badges!

Teaching Kit Remixer badge  Web Literacy Skill Sharer badge  Event Host badge

As Maker Party continues, we’re continuing to listen to feedback from the Webmaker community. Based on comments from people like you, we’ve launched three additional badges to join the existing 18 Webmaker badges:

These badges recognise a lower (but still significant) level of participation and contribution by community members.

The Teaching Kit Remixer badge is issued to those who have remixed a Teaching Kit or Activity, while the Web Literacy Skill Sharer badge is issued to those who have shared elements of web literacy. Organizing an event to teach the web earns you the Event Host badge – so, as you can see, hosting a Maker Party could earn you all three!

Community members have already started to earn these badges. As ever, we’re looking forward to your feedback.


We’re still tweaking our badge offerings, working on contribution pathways, and designing a user-facing landing page for all of these badges. While we do so, you can access the other 18 badges via the following links:


Are you an existing Webmaker Mentor or Super Mentor? You should be able to follow the existing guidance to issue these badges!

WebmakerNet Neutrality Tweet Chat this Thursday from #TeamInternet

Interested in Net Neutrality? So is Mozilla. We’re hosting a net neutrality tweet chat this Thursday, August, 14 from 7 PM EDT (4 PM PDT). Join us on the hashtag #TeamInternet for an hour-long discussion about net neutrality—what it is and how you can help your friends and family understand it.

Net neutrality is a pivotal issue because it is all about preserving the web as a resource for everyone, regardless of how rich or powerful they are. We believe understanding net neutrality is an essential part of web literacy and being web literate is the key to surviving and thriving in the digital age. That is why we are currently hosting a Net Neutrality training (running through this Friday). And if you want to host your own Net Neutrality Teach-In, here is everything you need to make it happen.

So join us for an in-depth discussion about net neutrality this Thursday. It will be hosted by @Mozilla and we will be using the #TeamInternet hashtag. We will have a few folks from Mozilla leading the discussion:

  • Chris Riley, Senior Policy Engineer at Mozilla, @MChrisRiley
  • David Steer, Director of Advocacy at Mozilla, @davesteer

And many more net neutrality experts are expected to join in, too.

You’ll definitely want to be there.

Meeting NotesMozilla Platform: 2014-08-12

Need To Know

(Release and system issues that may impact engineering this week.)

Notices/Schedule (lsblakk/sylvestre)

Next Merge: September 1, 2014 Next Release: September 2, 2014
Trains
Central: 34 Aurora: 33 Beta: 32 Release: 31

Build Changes (gps)

(Build changes of which engineers should be aware.)

RelEng (bhearsum)

(Repo, test, and other information for engineers from the release engineering team.)

Upcoming Outages/Upgrades

(System outages/upgrades and tree closures that impact engineering.)

Quality Programs

(An opportunity to hear about status with the various quality programs that do not have a formal team structure.)

OrangeFactor (ryanvm)

<Read Only>

  • Past week’s OrangeFactor: N/A (still investigating bug 1046162) (Previous Week: N/A).

  • 21 intermittent failures fixed in the last week – List – Thanks!.
    • Thanks to Martijn Wargers for fixing up many longstanding test issues that came to light with recent logging changes.

MemShrink (njn)

  • Kyle Huey got leak detection of B2G mochitests turned on, after fixing numerous leaks that it detected along the way.

  • Thanks to Pin and Jocelyn for jumping on some of the reported leaks.
  • This is not exactly MemShrink, but Eric Rahm improved the deadlock detector so it runs much faster and uses vastly less memory, which makes debug builds less painful to use.

Stability (kairo/bsmedberg)

  • Beta crash rate is high due to an adware-related crash that got worsened by trying to fix it (see bug 1038243). Cause seems to be a forgotten bump of IIDs which will be done in bug 1051858.

Team Stand-ups

(In <2 mins, what did your team accomplish last week, on what is your team working on this week, and on what, if anything, is your team blocked? No questions during the stand-ups. All questions should be asked during the roundtable.)

Firefox Desktop (gavin)

Summary of Work In Progress
  • You can find the most recently completed iteration performance report here

  • You can see the status of the current iteration in progress here
Summary of Recent Landings
  • Team landed 26 bugs over the last week, for the first half of the 34.2 iteration.

  • Details of landings from the past week can be seen here

Firefox Mobile (snorp/blassey/mfinkle)

Work In Progress
  • Search activity: Enabled in Nightly! Try it out. See blog post for some details.

  • Tablet refresh: Continuing progress on the tab strip implementation (screenshot).
    • bug 1046200 – Create BrowserApp.isNewTablet()

    • bug 1047561 – Create settings UI for enabling the new tablet UI
    • bug 1048575 – Disable dynamic toolbar when in new tablet UI
  • Janus https://wiki.mozilla.org/Mobile/Janus
    • Janus Proxy – Cache improvements

    • UI improvements/fixes to addon

You can find more on upcoming feature plans in the[roadmap]

Nightly (34)
  • Allow users to “try again” more than once on new error pages. ( Bug 910893 )

  • YouTube HTML5 player does not offer full-screen toggle for embedded YouTube video for Firefox for Android ( Bug 947841 )
  • When backspacing the last character of the current page in Firefox for Android’s URL bar, it frequently reappears (highlighted, due to autosuggest) and needs to be backspaced again ( Bug 984057 )
  • Pasting into url bar does not bring up search screen ( Bug 1039766 )
  • Up scaled and low resolution icons on bookmarks panel, history panel and recent tabs panel ( Bug 1046579 )
  • crash in java.lang.IllegalArgumentException: Property does not exist at org.mozilla.gecko.util.NativeJSObject.getString(Native Method) ( Bug 1046880 )
  • Add ability to stop mirroring a tab ( Bug 1046971 )
  • Take advantage of nsIURIFixup improvements for faster location bar searches ( Bug 1047607 )
  • Only reset search activity when launched from new intent ( Bug 1048022 )
  • Make all empty view images 90x90dp ( Bug 1048941 )
  • Searching for something in search activity it will open a new about:blank page in stead of search results ( Bug 1049650 )

Firefox OS Devices/Porting (ericchou)

<Read Only>

  • Gonk team (led by Thomas Tsai)

    • On-site support: Kai-Zen Li @ India (7/28 ~ 8/8)

    • Tarako: Solving gating issues which were reported by Spice/Intex
    • Dolphin: SPRD PTR2 and perf issues
    • Woodduck: github code sync and function ready lists
    • Flame: KK + v1.4/v2.0 porting
  • Bluetooth (members: Shawn Huang, Ben Tian, Jamin Liu, Jocelyn Liu)

  • Media Playback (members: Bruce Sun, Blake Wu, Star Cheng)

    • bug 941302 – PlatformDecoderModule for Firefox OS – landed (2.1 feat+)

    • bug 1009410 – Expose graphic buffer to MediaCodec – waiting for CAF’s response (2.1 feat+)
    • bug 1033902 – Integrate AudioOffloadPlayer with MediaCodecReader and MediaCodecDecoder – reviewing (2.1 feat+)
    • bug 1033337 – [dolphin] It took about 1.8-2.2s for music to start play (It was 1.4+, now 1.4-)
    • bug 1049325 – Last frame is dropped with PlatformDecoderModule enabled – WIP (2.1 feat+)
  • Device Storage & Stability (members: Alphan Chen)

    • bug 1043264 – [MTP] Find out the needed MTP API (2.1 feat+)

    • bug 1050720 – “storage-state-change” event will be triggered twice (should be 2.1 feat+)

Firefox OS Media (slee)

<Read Only>

  • ImageCaputre API implementation

    • WIP
  • Support recording media stream from OfflineAudioContext
    • WIP
  • Intermittent media test cases fixing
    • in progress
  • [blocker]Video playback doesn’t start and buffering icon is seen forever
    • analyzing
  • async codec threading part
    • reviewing

Firefox OS RIL (htsai)

<Read Only>

  1. https://wiki.mozilla.org/TPE_RIL_team/2014-08-12

JS (naveed)

<Read Only>

  • Intern Work Completed

    • Implemented ES6 template strings – bug 1021368, bug 1024748, bug 1031397, bug 1034314, bug 1038259, bug 1038498

    • Implemented ES6 String.raw and ToLength (self-hosted) – bug 1039774 and bug 1040196
    • Implemented ES6 computed property names – bug 924688
  • Garbage Collection

    • bug 650161: Compacting GC

      • currently it supports moving JSObjects only

      • most tests pass now but there are still some bugs to iron out
      • posted initial set of patches for review
    • bug 1035395: Fixed all b2g rooting hazards, updated expected count to zero
  • Front End and Other

    • SharedArrayBuffer: cleaned up lock/futex POC code and spec somewhat

    • bug 1047220: Shrink the static atoms table

Layout (jet/dbaron)

<Read Only>
Some bugs of note:

  • bug 996796 Lots of style infrastructure for better animations and transitions

  • bug 1018278 Blacklist some Intel graphics drivers
  • bug 927892 Working on HTML5 Canvas filters

Media (mreavy)

<Read Only>

  • Windowsharing now refreshes the window list on each request – bug 1041369 – thanks to new contributor Roman Skalish

    • On windows, it offers to share some uninteresting windows at times, like the sharing indicator or the Windows menu
  • GMP OpenH264 Mode 0 supported – bug 1051566 – thanks to new contributor Mo Zanaty for providing fixes for the underlying webrtc.org code
  • Windows OpenH264 IPC crash resolved (bug 1044245)
  • Aurora/33 updated with all important Screensharing and OpenH264 fixes

Necko (dougt/jduell)

<Read Only>

  • HTTP/2 on nightly wouldn’t work with Twitter for a little while–mostly their fault.

  • bug 1007020 – XHR Progress Events need a way to read how many compressed bytes have been downloaded
  • Getting closer to landing Resource Timing API
    • bug 1047848 – PerformanceResourceTiming objects can’t be JSON.stringify’d
  • Making progress on captive portal detection.

Seceng (keeler)

bug 1036546 landed: soft-disable proprietary window.crypto functions/properties before removing them entirely (things like window.crypto.generateCRMFRequest now don’t exist unless the pref “dom.unsafe_legacy_crypto.enabled” is true). See also bug 1030963.

Roundtable

(Comments and questions that arise during the course of the meeting or otherwise do not have a section.)

<Read only beyond this point>

Mailing List Threads

(Threads that are likely to be of interest to engineering from various mailing lists.)

Good Reads

(Links to blog posts, books, videos, etc. that you think will be of interest to others.)

irc #planning Log From This Meeting

14:00 lmandel: https://wiki.mozilla.org/Platform/2014-08-12
14:02 davidb: i notice accessibility is missing from the team standups (is that to make me feel less guilty?)
14:03 lmandel: davidb: You'd have to check history to see who you should thank for that.
14:07 davidb emails culprit

Engineering Meeting Details

  • Tuesday 2014-08-1211:00 am Pacific Standard Time

  • Dial-in: conference# 98411
    • US/California/Mountain View: +1 650 903 0800, x92 Conf# 98411

    • US/California/San Francisco: +1 415 762 5700, x92 Conf# 98411
    • US/Oregon/Portland: +1 971 544 8000, x92 Conf# 98411
    • CA/Vancouver: +1 778 785 1540, x92 Conf# 98411
    • CA/Toronto: +1 416 848 3114, x92 Conf# 98411
    • UK/London: +44 (0)207 855 3000, x92 Conf# 98411
    • FR/Paris: +33 1 44 79 34 80, x92 Conf# 98411
    • US/Toll-free: +1 800 707 2533, (pin 369) Conf# 98411
  • Engineering Vidyo Room / Air Mozilla / MTV Alien Nation / TOR Finch / SFO Warfield / PDX Hair of the Dog
  • join irc.mozilla.org #planning for back channel

Software CarpentryNews from Australia

Damien Irving summed up Software Carpentry activities in Australia in a short talk at PyCon Australia last week, and talked a bit as well about lessons learned. Next stops: Perth and Darwin!

Software CarpentryThree Bootcamps for Librarians

Over the past month and a half I have been fortunate to (co-)lead three bootcamps targeted at librarians, a relatively new audience for software carpentry. These bootcamps have been located in Edmonton, Toronto, and New York, and in the same way that the term "librarian" is very broad encompassing many different disciplines and skill sets, the three bootcamps had their share of similarities and important differences. I'll start with similarities and then discuss each bootcamp's differences.

Similarities

The Edmonton and New York bootcamps were hosted by specific libraries, the Edmonton Public Library (EPL) and New York Public Library (NYPL) but open to librarians both within and outside those organizations. The Toronto bootcamp was hosted by the Mozilla Corporation and advertised to librarians in the Greater Toronto Area.

Two important similarities were 1) attendance was voluntary and 2) the bootcamps filled very quickly. Edmonton was limited to 25 attendees. An email was sent in the early afternoon and all spots were filled by the next morning. Toronto had 40 spots with about 30 or so actually attending. NYPL was open to 80 attendees, 40 within NYPL and 40 from the outer librarian community. The 40 NYPL spots filled within 5 hours of the invitation email. I'm unsure about the other 40, but I believe they filled just as quickly.

The EPL bootcamp was the first of the three bootcamps, held in early July. The bootcamp was advertised through out the Edmonton library community via email. I was the only instructor for the bootcamp and so I tried to get as much input as I could from previous librarian bootcamps. In particular, a librarian-oriented bootcamp was held at PyCon in Montreal in April, 2014. Dhavide Aruliah wrote a post-mortem and I took all advice it suggested. The primary suggestion was to be prepared to go slowly. Dhavide wrote "We asked for feedback at the end of the first day. There was an overwhelming consensus that we needed to slow down and to allocate more time for hands on stuff". The instructors in Montreal thought on their feet and Jess Hamrick came up with a lesson based on processing a circulation card that formed the basis of their second day.

Based on the above and some direct feedback from other coding librarians (Andromeda) we modified the bootcamp schedule to focus just on Python and library data and forego other SWC staples such as git and SQL. Version control and databases are essentials for people who program, but for people who have not programmed their importance is not yet clear.

In terms of material, we focused on creating three library-specific tasks. The first was Jess's circulation card example, the second was processing of a spreadsheet of library hold data and the third was processing overdue fine payments. The latter two of these lessons used real data given to us by the EPL. These lessons were more than enough content for the two day bootcamps.

In Edmonton, we started with shell and python basics. We focused on answering the question, "How many holds are there for the title Ender's Game"? We used shell programs to get the answer. This lesson introduced the concepts of files, working directories, the command-line and Unix pipeline model. The hold data we had contained over 30000 hold records, so the need for automating it was clear to the attendees.

I used this above lesson as the starting point in all three bootcamps. We followed it with a slightly harder question "What is the most popular hold?" (spoiler: it was Frozen) and introducing the new tools necessary to answer it.

After the shell, we moved onto Python. We started from the very basics, literally "Hello World". To help reinforce concepts of accessing and parsing data, we introduce Python by building solutions to the same questions above - holds on a particular title, then counting holds for all titles. This lesson usually spilled over to the second day, but by the end of the first day, students had seen variables, math operators, opening and looping over lines of a file, and splitting column data in CSV files.

The first day was very similar in all three bootcamps. Our day 1 feedback across all bootcamps was that is was generally well-paced. A handful said it was too fast, a few said too slow which with the group sizes we had is the best we can hope for. From this point the topics in the bootcamps diverged on Day 2.

Edmonton Day 2

The pre-bootcamp survey in Edmonton told us that 90% of the attendees had never programmed before. For this reason we decided to stick with Python and work with librarian data on Day 2. We used our second pre-prepared lesson of merging catalogue data. The lesson was originally created and also taught by Vicky Varga of the EPL. We concluded the second day by bringing together Python and the shell in running Python programs on the command-line. We then left about an hour for attendees to play around and ask questions.

Toronto Day 2

In Toronto, we had a larger portion of experienced attendees that wanted to move beyond Python (more than Edmonton for sure). Sensing this, at the end of day 1 we took a vote as to what students wanted to do on the second day. The choices were 1) more python with library data 2) git or 3) sql. "More Python" and SQL won out. So, the morning of the second day, we finished our Python program to count each title in the hold data. This task requires dictionaries, so it took a good chunk of the morning. We then finished the morning with about 1 hour of regular expressions.

BUT, in the aforementioned vote on topics, we had a handful of students who in addition to voting for git wrote something to the tune of "Please, please teach git, this is why I came to this". So we actually created a choice for the Day 2 afternoon. The main group learned SQL using a library-based example created by Thomas Guignard and Abby Cabunoc in the afternoon, but we had one instructor branch off (inside joke) to another room and teach git to the 6 or so students that really wanted to learn it.

Finally, at the end of the second day, we left about 1/2 hour of free time for attendees to work. This is where we learned that a few had hoped to learn about Python modules, something we didn't get to. But, I showed a few of them an example of using the XLRD module to read Excel files directly.

New York Day 2

At NYPL, we had 80 attendees so we split into two rooms due to capacity limits. We had initially planned to have a "beginner" room and an "advanced" room, but in the pre-bootcamp survey, over 40 of 52 replies indicated "I have not programmed before". So, we decided to start both rooms with the basics we had used in Edmonton and Toronto. Day 1 was similar in the two rooms working with the shell and an intro to Python from the very basics.

On the second day, we decided to offer a choice since we had two rooms. We decided to split on the two topics used on the second day in Toronto. So, before lunch on day 2, attendees were asked to indicate which topic they wanted to attend in the afternoon - "More Python" or SQL. We were considering offering a third option of git, but no one at the bootcamp had indicated a strong interest in git, we so decided not to. Most students wanted SQL, but enough wanted more python to allow us to have one room of Python and one of SQL (If everyone wanted SQL we would have done it in both rooms).

One point that I'll return to later is the importance of using library-specific examples. For Day 2 at NYPL the "More Python" lesson was based on a problem one of our attendees discussed with us. We hacked up a lesson in the late morning on Day 2 after she sent us some data files. Moreover, we also got into processing MARC records from Python using a lesson that one of helpers Jared (a librarian coder himself) created on that day.

A final point of clarification: while regular expressions and SQL were taught in both Toronto and NYPL, we did not get to using them from within Python (i.e., using the re and sqlite modules). They were taught as separate concepts which I believe the audience still found value in.

Lessons Learned

It was great to teach librarians. They were an excellent audience - interested, adventurous and at ease with each other because a good number knew each other already. These qualities led to an interactive environment that is always more fun. So what lessons did we learn? Here are the suggestions I would recommend to anyone teaching software carpentry to librarians:

  1. Librarians like Software Carpentry. All three bootcamps filled quickly. Many comments at the end mentioned an interest in a "Part 2" bootcamp to learn more. Both EPL and NYPL (as well as librarians from other organizations who attended) have expressed interest in hosting another bootcamp in the future.
  2. Do a pre-bootcamp survey. This is probably true with any bootcamp, but librarians carry a higher number of beginners and knowing how many is essential.
  3. Use Library-specific examples - audience-specific data is important. "Data is just data" does not work. Software Carpentry examples tend to be scientific in nature. Using existing library examples mentioned above or creating examples from real data is important to capture the audience. There is no single example that all librarians will find relevant, but as long as they can recognize the concepts, they'll be more interested to follow along. One caveat: very narrow library-specific topics like processing MARC records was not of much interested in any bootcamp.
  4. Librarians liked to learn Regular Expressions and SQL. A good portion of librarians wanted to see them in Toronto and NYPL (and probably Edmonton too if I'd asked.) Most librarians probably saw SQL and regular expressions during their degree, but level of coverage can vary greatly. When preparing a bootcamp, I would suggest making time for these topics on the second day, even with a mostly beginner group. And as mentioned, making the examples library specific helps and it's OK if you do not get to integrating regexes and SQL with Python, they're still valuable.
  5. Librarians are interactive. Be ready to think on your feet. In both Montreal and NYPL, lessons were created during the bootcamp to fit the audience. So ask for examples from your audience and try to work them in where appropriate. Also, be aware if your librarian audience gets too quiet. It may mean you're losing them (true of any audience, really).
  6. We need more feedback on problems librarians would like to solve with programming - Following on the points above, Software Carpentry needs to build up a good set of of library-based examples. Like anyone seeing a new tool for the first time, it's tough for librarians to know where software carpentry lessons might apply in their day-to-day tasks. Ask for feedback during and after bootcamps and please share it.

Air MozillaDOM bindings

DOM bindings DOM bindings by Boris Zbarsky

Air MozillaEngineering Meeting

Engineering Meeting The weekly Mozilla engineering meeting.

Air MozillaAn overview of Gecko's graphics stack

An overview of Gecko's graphics stack Gecko graphics overview by Benoit Jacob

WebmakerShare Your Maker Party Events with the Event Reporter

We know a lot of time is put into organizing, planning and running a Maker Party event. Which is why we want to make sure that once your event is completed it is documented and sharable so we can celebrate your success with you!

There are many different ways to give the community a deeper look at your event, and one of the best ways to share with the world what you did is the recently launched Event Reporter template. MakerPartyEventReportThanks to super-maker Kat Braybrooke you can now share videos, summaries, pictures, slides and your agenda all in one place with one link! Simply open the Event Reporter, hit the “remix” button at the top right-hand corner and fill in your  event information. We’ve also included a helpful tutorial that is accessible within the report so you can have a bit of help getting started. Customize it however you want and then use the link to share it with the world!

Get inspired with these completed Event Reports from recent Maker Party events:

The Event Report is now also available in Spanish:  Informe Del Evento Maker Party .

In addition to the Event Reporter you can also share what happened at your event on the events platform within your event page! You can now add links to your pictures and makes after your event.

Screen Shot 2014-07-29 at 10.43.55 AM However you choose to share your story with the community we want to hear about it! So don’t forget to use the hashtag #MakerParty and to share your creations with us on Facebook and Twitter.  For even more ways to share after your event check-out the post-event resources on the Maker Party resource page. We can’t wait to hear (and see) what you do at your events!

hacks.mozilla.orgHow can we write better software? – Interview series, part 2 with Brian Warner

This is part 2 of a new Interview series here at Mozilla Hacks.

“How can we, as developers, write more superb software?”

A simple question without a simple answer. Writing good code is hard, even for developers with years of experience. Luckily, the Mozilla community is made up of some of the best development, QA and security folks in the industry.

This is part two in a series of interviews where I take on the role of an apprentice to learn from some of Mozilla’s finest.

Introducing Brian Warner

When my manager and I first discussed this project, Brian is the first person I wanted to interview. Brian probably doesn’t realize it, but he has been one of my unofficial mentors since I started at Mozilla. He is an exceptional teacher, and has the unique ability to make security approachable.

At Mozilla, Brian designed the pairing protocol for the “old” Firefox Sync, designed the protocol for the “new” Firefox Sync, and was instrumental in keeping Persona secure. Outside of Mozilla, Brian co-founded the Tahoe-LAFS project, and created Buildbot.

What do you do at Mozilla?

My title is a staff security engineer in the Cloud Services group. I analyse and develop protocols for securely managing passwords and account data and I implement those protocols in different fashions. I also review other’s code, I look at external projects to figure out whether it’s appropriate to incorporate them, and I try to stay on top of security failures like 0-days and problems in the wild that might affect us and also tools and algorithms that we might be able to use.

UX vs Security: Is it a false dichotomy? Some people have the impression that for security to be good, it must be difficult to use.

There are times when I think that it’s a three-way tradeoff. Instead of being x-axis, y-axis, and a diagonal line that doesn’t touch zero, sometimes I think it’s a three-way thing where the other axis is how much work you want to put into it or how clever you are or how much user research and experimentation you are willing to do. Stuff that engineers are typically not focused on, but that UX and psychologists are. I believe, maybe it’s more of a hope than a belief, that if you put enough effort into that, then you can actually find something that is secure and usable at the same time, but you have to do a lot more work.

The trick is to figure out what people want to do and find a way of expressing whatever security decisions they have to make into a normal part of their work flow. It’s like when you lend your house key to a neighbour so they can water your plants when you are away on vacation, you’ve got a pretty good idea of what power you are handing over.

There are some social constructs surrounding that like, “I don’t think you’re going to make a copy of that key and so when I get it back from you, you no longer have that power that I granted to you.” There are patterns in normal life with normal non-computer behaviours and objects that we developed some social practices around, I think part of the trick is to use that and assume that people are going to expect something that works like that and then find a way to make the computer stuff more like that.

Part of the problem is that we end up asking people to do very unnatural things because it is hard to imagine or hard to build something that’s better. Take passwords. Passwords are a lousy authentication technology for a lot of different reasons. One of them being that in most cases, to exercise the power, you have to give that power to whoever it is you are trying to prove to. It’s like, “let me prove to you I know a secret”…”ok, tell me the secret.” That introduces all these issues like knowing how to correctly identify who you are talking to, and making sure nobody else is listening.

In addition to that, the best passwords are going to be randomly generated by a computer and they are relatively long. It’s totally possible to memorize things like that but it takes a certain amount of exercise and practice and that is way more work than any one program deserves.

But, if you only have one such password and the only thing you use it on is your phone, then your phone is now your intermediary that manages all this stuff for you, and then it probably would be fair (to ask users to spend more energy managing that password). And it’s clear that your phone is sort of this extension of you, better at remembering things, and that the one password you need in this whole system is the bootstrap.

So some stuff like that, and other stuff like escalating effort in rare circumstances. There are a lot of cases where what you do on an everyday basis can be really easy and lightweight, and it’s only when you lose the phone that you have to go back to a more complicated thing. Just like you only carry so much cash in your wallet, and every once in a while you have to go to a bank and get more.

It’s stuff like that I think it’s totally possible to do, but it’s been really easy to fall into bad patterns like blaming the user or pushing a lot of decisions onto the user when they don’t really have enough information to make a good choice, and a lot of the choices you are giving them aren’t very meaningful.

Do you think many users don’t understand the decisions and tradeoffs they are being asked to make?

I think that’s very true, and I think most of the time it’s an inappropriate question to ask. It’s kind of unfair. Walking up to somebody and putting them in this uncomfortable situation – do you like X or do you like Y – is a little bit cruel.

Another thing that comes to mind is permission dialogs, especially on Windows boxes. They show up all the time, even just to do really basic operations. It’s not like you’re trying to do something exotic or crazy. These dialogs purport to ask the user for permission, but they don’t explain the context or reasons or consequences enough to make it a real question. They’re more like a demand or an ultimatum. If you say “no” then you can’t get your work done, but if you say “yes” then the system is telling you that bad things will happen and it’s all going to be your fault.

It’s intended to give the user an informed choice, but it is this kind of blame the user, blame the victim pattern, where it’s like “something bad happened, but you clicked on the OK button, you’ve taken responsibility for that.” The user didn’t have enough information to do something and the system wasn’t well enough designed that they could do what they wanted to do without becoming vulnerable.

Months before “new” Sync ever saw the light of day, the protocol was hashed out in extremely vocal and public forum. It was the exact opposite of security through obscurity. What did you hope to accomplish?

There were a couple of different things that I was hoping from that discussion. I pushed all that stuff to be described and discussed publicly because it’s the right thing to do, it’s the way we develop software, you know, it’s the open source way. And so I can’t really imagine doing it any other way.

The specific hopes that I had for publishing that stuff was to try to solicit feedback and get people to look for basic design flaws. I wanted to get people comfortable with the security properties, especially because new Sync changes some of them. We are switching away from pairing to something based on passwords. I wanted people to have time to feel they understood what those changes were and why we were making them. We put the design criteria and the constraints out there so people could see we kind of have to switch to a password to meet all of the other goals, and what’s the best we can do given security based on passwords.

Then the other part is that having that kind of public discussion and getting as many experienced people involved as possible is the only way that I know of to develop confidence that we’re building something that’s correct and not broken.

So it is really just more eyeballs…

Before a protocol or API designer ever sits down and writes a spec or line of code, what should they be thinking about?

I’d say think about what your users need. Boil down what they are trying to accomplish into something minimal and pretty basic. Figure out the smallest amount of code, the smallest amount of power, that you can provide that will meet those needs.

This is like the agile version of developing a protocol.

Yeah. Minimalism is definitely useful. Once you have the basic API that enables you to do what needs to be done, then think about all of the bad things that could be done with that API. Try and work out how to prevent them, or make them too expensive to be worthwhile.

A big problem with security is sometimes you ask “what are the chances that problem X would happen.” If you design something and there is a 1/1000 chance that something will happen, that the particular set of inputs will cause this one particular problem to happen. If it really is random, then 1/1000 may be ok, 1/1M may be ok, but if it is in this situation where an attacker gets to control the inputs, then it’s no longer 1/1000, it’s 1 in however many times the attacker chooses to make it 1.

It’s a game of who is cleverer and who is more thorough. It’s frustrating to have to do this case analysis to figure out every possible thing that could happen, every state it could get into, but if somebody else out there is determined to find a hole, that’s the kind of analysis they are going to do. And if they are more thorough than you are, then they’ll find a problem that you failed to cover.

Is this what is meant by threat modelling?

Yeah, different people use the term in different ways, I think of when you are laying out the system, you are setting up the ground rules. You are saying there is going to be this game. In this game, Alice is going to choose a password and Bob is trying to guess her password, and whatever.

You are defining what the ground rules are. So sometimes the rules say things like … the attacker doesn’t get to run on the defending system, their only access is through this one API call, and that’s the API call that you provide for all of the good players as well, but you can’t tell the difference between the good guy and the bad guy, so they’re going to use that same API.

So then you figure out the security properties if the only thing the bad guy can do is make API calls, so maybe that means they are guessing passwords, or it means they are trying to overflow a buffer by giving you some input you didn’t expect.

Then you step back and say “OK, what assumptions are you making here, are those really valid assumptions?” You store passwords in the database with the assumption that the attacker won’t ever be able to see the database, and then some other part of the system fails, and whoops, now they can see the database. OK, roll back that assumption, now you assume that most attackers can’t see the database, but sometimes they can, how can you protect the stuff that’s in the database as best as possible?

Other stuff like, “what are all the different sorts of threats you are intending to defend against?” Sometimes you draw a line in the sand and say “we are willing to try and defend against everything up to this level, but beyond that you’re hosed.” Sometimes it’s a very practical distinction like “we could try to defend against that but it would cost us 5x as much.”

Sometimes what people do is try and estimate the value to the attacker versus the cost to the user, it’s kind of like insurance modelling with expected value. It will cost the attacker X to do something and they’ve got an expected gain of Y based on the risk they might get caught.

Sometimes the system can be rearranged so that incentives encourage them to do the good thing instead of the bad thing. Bitcoin was very carefully thought through in this space where there are these clear points where a bad guy, where somebody could try and do a double spend, try and do something that is counter to the system, but it is very clear for everybody including the attacker that their effort would be better spent doing the mainstream good thing. They will clearly make more money doing the good thing than the bad thing. So, any rational attacker will not be an attacker anymore, they will be a good participant.

How can a system designer maximise their chances of developing a reasonably secure system?

I’d say the biggest guideline is the Principle of Least Authority. POLA is sometimes how that is expressed. Any component should have as little power as necessary to do the specific job that it needs to do. That has a bunch of implications and one of them is that your system should be built out of separate components, and those components should actually be isolated so that if one of them goes crazy or gets compromised or just misbehaves, has a bug, then at least the damage it can do is limited.

The example I like to use is a decompression routine. Something like gzip, where you’ve got bytes coming in over the wire, and you are trying to expand them before you try and do other processing. As a software component, it should be this isolated little bundle of 2 wires. One side should have a wire coming in with compressed bytes and the other side should have decompressed data coming out. It’s gotta allocate memory and do all kinds of format processing and lookup tables and whatnot, but, nothing that box can do, no matter how weird the input, or how malicious the box, can do anything other than spit bytes out the other side.

It’s a little bit like Unix process isolation, except that a process can do syscalls that can trash your entire disk, and do network traffic and do all kinds of stuff. This is just one pipe in and one pipe out, nothing else. It’s not always easy to write your code that way, but it’s usually better. It’s a really good engineering practice because it means when you are trying to figure out what could possibly be influencing a bit of code you only have to look at that one bit of code. It’s the reason we discourage the use of global variables, it’s the reason we like object-oriented design in which class instances can protect their internal state or at least there is a strong convention that you don’t go around poking at the internal state of other objects. The ability to have private state is like the ability to have private property where it means that you can plan what you are doing without potential interference from things you can’t predict. And so the tractability of analysing your software goes way up if things are isolated. It also implies that you need a memory safe language…

Big, monolithic programs in a non memory safe language are really hard to develop confidence in. That’s why I go for higher level languages that have memory safety to them, even if that means they are not as fast. Most of the time you don’t really need that speed. If you do, it’s usually possible to isolate the thing that you need, into a single process.

What common problems do you see out on the web that violate these principles?

Well in particular, the web is an interesting space. We tend to use memory safe languages for the receiver.

You mean like Python and JavaScript.

Yeah, and we tend to use more object-oriented stuff, more isolation. The big problems that I tend to see on the web are failure to validate and sanitize your inputs. Or, failing to escape things like injection attacks.

You have a lot of experience reviewing already written implementations, Persona is one example. What common problems do you see on each of the front and back ends?

It tends to be escaping things, or making assumptions about where data comes from, and how much an attacker gets control over if that turns out to be faulty.

Is this why you advocated making it easy to trace how the data flows through the system?

Yeah, definitely, it’d be nice if you could kind of zoom out of the code and see a bunch of little connected components with little lines running between them, and to say, “OK, how did this module come up with this name string? Oh, well it came from this one. Where did it come from there? Then trace it back to the point where, HERE that name string actually comes from a user submitted parameter. This is coming from the browser, and the browser is generating it as the sending domain of the postMessage. OK, how much control does the attacker have over one of those? What could they do that would be surprising to us? And then, work out at any given point what the type is, see where the transition is from one type to another, and notice if there are any points where you are failing to do that, that transformation or you are getting the type confused. Definitely, simplicity and visibility and tractable analysis are the keys.

What can people do to make data flow auditing simpler?

I think, minimising interactions between different pieces of code is a really big thing. Isolate behaviour to specific small areas. Try and break up the overall functionality into pieces that make sense.

What is defence in depth and how can developers use it in a system?

“Belt and suspenders” is the classic phrase. If one thing goes wrong, the other thing will protect you. You look silly if you are wearing both a belt and suspenders because they are two independent tools that help you keep your pants on, but sometimes belts break, and sometimes suspenders break. Together they protect you from the embarrassment of having your pants fall off. So defence in depth usually means don’t depend upon perimeter security.

Does this mean you should be checking data throughout the system?

There is always a judgement call about performance cost, or, the complexity cost. If your code is filled with sanity checking, then that can distract the person who is reading your code from seeing what real functionality is taking place. That limits their ability to understand your code, which is important to be able to use it correctly and satisfy its needs. So, it’s always this kind of judgement call and tension between being too verbose and not being verbose enough, or having too much checking.

The notion of perimeter security, it’s really easy to fall into this trap of drawing this dotted line around the outside of your program and saying “the bad guys are out there, and everyone inside is good” and then implementing whatever defences you are going to do at that boundary and nothing further inside. I was talking with some folks and their opinion was that there are evolutionary biology and sociology reasons for this. Humans developed in these tribes where basically you are related to everyone else in the tribe and there are maybe 100 people, and you live far away from the next tribe. The rule was basically if you are related to somebody then you trust them, and if you aren’t related, you kill them on sight.

That worked for a while, but you can’t build any social structure larger than 100 people. We still think that way when it comes to computers. We think that there are “bad guys” and “good guys”, and I only have to defend against the bad guys. But, we can’t distinguish between the two of them on the internet, and the good guys make mistakes too. So, the principal of least authority and the idea of having separate software components that are all very independent and have very limited access to each other means that, if a component breaks because somebody compromised it, or somebody tricked it into behaving differently than you expected, or it’s just buggy, then the damage that it can do is limited because the next component is not going to be willing to do that much for it.

Do you have a snippet of code, from you or anybody else, that you think is particularly elegant that others could learn from?

I guess one thing to show off would be the core share-downloading loop I wrote for Tahoe-LAFS.

In Tahoe, files are uploaded into lots of partially-redundant “shares”, which are distributed to multiple servers. Later, when you want to download the file, you only need to get a subset of the shares, so you can tolerate some number of server failures.

The shares include a lot of integrity-protecting Merkle hash trees which help verify the data you’re downloading. The locations of these hashes aren’t always known ahead of time (we didn’t specify the layout precisely, so alternate implementations might arrange them differently). But we want a fast download with minimal round-trips, so we guess their location and fetch them speculatively: if it turns out we were wrong, we have to make a second pass and fetch more data.

This code tries very hard to fetch the bare minimum. It uses a set of compressed bitmaps that record which bytes we want to fetch (in the hopes that they’ll be the right ones), which ones we really need, and which ones we’ve already retrieved, and sends requests for just the right ones.

The thing that makes me giggle about this overly clever module is that the entire algorithm is designed around Rolling Stone lyrics. I think I started with “You can’t always get what you want, but sometimes … you get what you need”, and worked backwards from there.

The other educational thing about this algorithm is that it’s too clever: after we shipped it, we found out it was actually slower than the less-sophisticated code it had replaced. Turns out it’s faster to read a few large blocks (even if you fetch more data than you need) than a huge number of small chunks (with network and disk-IO overhead). I had to run a big set of performance tests to characterize the problem, and decided that next time, I’d find ways to measure the speed of a new algorithm before choosing which song lyrics to design it around. :).

What open source projects would you like to encourage people to get involved with?

Personally, I’m really interested in secure communication tools, so I’d encourage folks (especially designers and UI/UX people) to look into tools like Pond, TextSecure, and my own Petmail. I’m also excited about the variety of run-your-own-server-at-home systems like the GNU FreedomBox.

How can people keep up with what you are doing?

Following my commits on https://github.com/warner is probably a good approach, since most everything I publish winds up there.

Thank you Brian.

Transcript

Brian and I covered far more material than I could include in a single post. The full transcript, available on GitHub, also covers memory safe languages, implicit type conversion when working with HTML, and the Python tools that Brian commonly uses.

Next up!

Both Yvan Boiley and Peter deHaan are presented in the next article. Yvan leads the Cloud Services Security Assurance team and continues with the security theme by discussing his team’s approach to security audits and which tools developers can use to self-audit their site for common problems.

Peter, one of Mozilla’s incredible Quality Assurance engineers, is responsible for ensuring that Firefox Accounts doesn’t fall over. Peter talks about the warning signs, processes and tools he uses to assess a project, and how to give the smack down while making people laugh.

SUMO BlogWelcome Michał Dziewoński, L10N community manager!

MichalI’m thrilled to welcome Michał Dziewoński (vesper) to Mozilla and the SUMO team! Michał is taking over Rosana’s role as our new L10N Community Manager (no pressure!) and will work closely with our incredible community to grow and strengthen our localization efforts across the globe.

Michał is originally from Poland but has decided to look for warmer pastures and is currently based in Manresa, Spain. He has previously worked at Google as a support and community specialist and has a background in localization, translation and interpreting as well as in… radio DJ-ing.

He’s also an avid board and video gamer, so reach out if you’d like to add him to your Steam/Battle.net friends list.

If you want to get in touch with Michał, you can do so by checking out his SUMO profile, Twitter account or pinging him on IRC (vesper).

Welcome, Michał!

Meeting NotesMozilla Project: 2014-08-11

All-hands Status Meeting Agenda

Items in this section will be shared during the live all-hand status meeting.

Friends of Mozilla

  • Luis Antonio Sánchez Romero from Mexico has been helping us test Payments in Mexico by acquiring local SIMs and running tests for us. Payments team thanks him for all his efforts!

Upcoming Events

Monday, 11 August
  • The latest edition of DevPulse is up – have a read and see how you can get involved with Mozillians supporting developers worldwide!
  • Join us at 2pm Pacific for the bi-weekly Marketplace community meeting. This week, we’ll talk about the new proposed format for Marketplace contributions, and a new community curation program for the feed feature.
Wednesday, 13 August

Mozillians Town Hall – Get Firefox on a Growth Trajectory

MDN Community Meeting

Intern Presentations

  • 1:00- Susanna Bowen, “Improving Support for CSS Ruby” SF

  • 1:30- Jonathan Morton, “WebGL in Web Workers” SF
  • 2:00- Julian Hector, “IPC, supervisor and FirefoxOS” SF
  • 2:30- James Hobin, “A Cake Filled With Rainbows, Smiles, and JavaScript” SF

js13kGames 2014 Competition

  • JavaScript coding competition for HTML5 game developers that takes place online Aug 13 through Sept 13

  • Run by Mozillian Andrzej “Captain Rogers” Mazur, Mozillian Jason Weathersby is a competition judge
  • Competition homepage
Thursday, 14 August

Intern Presentations

  • 1:00- Guptha Rajagopal, “SpiderMonkey – More Strings, More Class” MV

  • 1:30- Jeremy Poulin, “Predictor: Because Witches Are Scary” MV
  • 2:00- Sathyanarayanan Gunasekaran, “Games, games and more games” MV
  • 2:30- Basar Koc, “Ringing Artifacts in Data Compression” MV
Friday, 15 August
  • Webdev Beer and Tell – 2PM Pacific in the Webdev vidyo room

    • Web developers across the project show off their side projects. Open to the public! (Airmo link will be on the wiki page)
Saturday, 16 August
Next Week
  • Mozillians Town Hall – Disrupting the Advertising Industry

    • More information coming soon

Project Status Updates (voice updates)

Firefox
  • Johnathan Nightingale – Toronto
Firefox OS
  • Li Gong from London (Vidyo)
Content Services
  • Darren Herman / Sean Bohan – NYC Office

  • Tiles – We are NOT doing a Brown Bag this week, but we have scheduled a Town Hall discussion next Monday Aug 18
  • Subscribe2Web – updating the wiki this week and scheduling a Brown Bag session for the week of August 25
  • UP – The User Personalization team is working on introducing personalization to Firefox users, starting with data transparency. We are planning on surfacing this through the Personal Interest Dashboard (working name). This will be initially released as an add-on with the objective of providing the user the ability to 1) analyze their categorized interests based on their history and 2) discover new content that’s related to their interests
Webmaker

Speaker Location: Brett Gaylor, remote

  • We’re just about half way through with Maker Party and we have over 1200 events in 261 cities, with an estimated 62,000 attendees!

  • We passed a significant milestone – 5000 contributors to Mozilla Foundation activities!

(Nonverbal)

  • We’re extending our free Net Neutrality training into this week. Sign up here: ow.ly/A7h3B

  • Please submit session proposals to MozFest!
    • And help us spread the word! Sample tweet: Less than 2 weeks to the #Mozfest session proposal submission deadline! Get yours in now. mzl.la/Propose
Knight-Mozilla OpenNews

Speaker Location: Dan Sinker, remote

Marketplace
  • Non verbal.

  • We are trying out a new development environment for the Marketplace using Docker. If you’d like to try it out instructions are here.
  • We are also looking for app developers who’d like to try out the new hosted in-app payment system and give us feedback.

Speakers

Presenter Title Topic Location Share? Media More Details
Who Are You? What Do You Do? What are you going to talk about? Where are you presenting from? (Moz Space, your house, space) Will you be sharing your screen? (yes/no, other info) Links to slides or images you want displayed on screen Link to where audience can find out more information
Tyler Downer Project Manager, User Advocacy Team Firefox Updates Hotfix Home Office Vidyo No (https://docs.google.com/a/mozilla.com/presentation/d/15ehWmUsyzzMWcOnuvwr0N5KXKBw36HEXCLWgNlhLD54/edit?usp=sharing) https://blog.mozilla.org/useradvocacy/2014/07/30/helping-our-users-experience-the-modern-web/
Mary Ellen Muckerman Brand (Engagement) Two new initiatives (Voices + Mozilla identity) San Francisco No No
Anthony Duignan-Cabrera Editor in Chief, Mozilla Voices Mozilla Voices NYC Office No No https://wiki.mozilla.org/Mozilla_Voices
Sean Martell Art Director Mozilla identity Toronto home office No No https://blog.mozilla.org/creative/2014/08/11/building-a-new-brand-identity-system-for-mozilla/
Karen Ward Senior Project Manager, Operator Launch Team FxOS Launch Roadmap (Operators and Retail/Open Market devices) Home Office Vidyo No https://mana.mozilla.org/wiki/display/PM/Firefox+OS+Wave+Launch+Cross+Functional+View https://mana.mozilla.org/wiki/display/PM/Firefox+OS+Wave+Launch+Cross+Functional+View
Jorge Villalobos Add-ons Developer Relations Lead Add-on Compatibility Home Office Vidyo No Slides Add-ons Blog
Brett Gaylor VP, Webmaker Webmaker – the party is getting out of control Victoria BC Yes https://dl.dropboxusercontent.com/u/7968133/Webmaker%20-%20aug%2011%20maker%20party%20update.pdf https://dl.dropboxusercontent.com/u/7968133/Webmaker%20-%20aug%2011%20maker%20party%20update.pdf
Dino Anderson, Payam Keshtbod, Tre Kirkman People Team Diversity and Inclusion Strategy workshops San Francisco Yes D&I Strategy D&I Initiatives

Roundtable

Do you have a question about a Mozilla Project or initiative? Let us know by Friday- we’ll do our best to get you an answer.

Please note that we may not always be able to get to every item on this list, but we will try!

Who are you? Area of question Question
What’s your name? What do you work on? Is your question about policy, a product, a Foundation initiative, etc. What would you like to know?

Welcome!

Let’s say hello to some new Mozillians! If you are not able to join the meeting live, you can add a link to a short video introducing yourself.

Introducing New Volunteers

New Volunteer(s) Introduced by Speaker location New Volunteer location Will be working on
Who is the new volunteer(s)? Who will be introducing that person? Where is the introducer? Where is the new person based? What will the new person be doing?

Introducing New Interns

New Intern Introduced by Speaker location New Hire location Will be working on
Mihai Tabără Rail Aliiev Mountain View San Francisco Release Engineering
Tomasz Kołodziejski Drew Willcoxon Mountain View Mountain View FFX Engineering

<meta>

Notes and non-voice status updates that aren’t part of the live meeting go here.

Status Updates By Team (*non-voice* updates)

Automation & Tools
bugzilla.mozilla.org

Notable changes to bugzilla.mozilla.org during the last week:

  • bug 938272 The “User Story” field is now visible on all products

All changes.

Engagement

  • Dial-in: conference# 8600

    • US/California/Mountain View: +1 650 903 0800, x92 Conf# 8600

    • US/California/San Francisco: +1 415 762 5700, x92 Conf# 8600
    • US/Oregon/Portland: +1 971 544 8000, x92 Conf# 8600
    • CA/Vancouver: +1 778 785 1540, x92 Conf# 8600
    • CA/Toronto: +1 416 848 3114, x92 Conf# 8600
    • UK/London: +44 (0)207 855 3000, x92 Conf# 8600
    • FR/Paris: +33 1 44 79 34 80, x92 Conf# 8600
    • US/Toll-free: +1 800 707 2533, (pin 369) Conf# 8600

WebmakerQ&A with Pursuitery

One of the best things about the Maker Party partners program is the opportunity to connect with people and organizations that are as passionate about making and teaching the web as we are. One of our partners that we’ve been geeking out with on the web is Pursuitery. Pursuitery is a place where individuals from all over the world come together online to explore their interests, build their skills, and share their experiences about the things they are most interested in. It’s an awesome place to explore and make on the web. I had the chance to sit down with Community Manager, Evan Jones, to learn more about Pursuitery and what they’re doing for the Maker Party campaign this year:

Evan Jones at Coding With Scratch program at the Echo Park library in LA.

Evan Jones at Coding With Scratch program at the Echo Park library in LA

What is Pursuitery and what do you do?

Pursuitery is an online community. We provide a friendly and supportive space where people can connect with and learn from one another. I function as the community manager (I call myself a “web wrangler” because, really, who would NOT want that title?) and work to address the needs of our members. I listen to our users, talk with them, and keep them up to date on the site and what we’re doing with it. Intriguing stuff!

What is the event you will be hosting or running during Maker Party?

We’ll be hosting three challenges through Pursuitery – Make A Meme & Hack The Web W/ X-Ray Goggles, Turn Gifs Into A Music Video (yes, we are still figuring out how to pronounce “GIF.” Please feel free to tweet us @Pursuitery with your take on the argument!),  and Build An App With AppMaker. The last challenge, Build An App with Appmaker, just ran on Pursuitery.   I should note that we hold Geekouts – interactive video chats – on Pursuitery.com as well. We’re doing one for each challenge, so there’s been one every Monday for the last couple of weeks. You should definitely check them out if you’re into Maker Party goodness and fun banter!

Pursuitery Appmaker Geekout.

Pursuitery Appmaker Geekout

Why did you choose to get involved with Maker Party?

We were informed that there was no party like a Maker Party due to the fact that a Maker Party apparently does not stop. I am happy to say that we were informed correctly. But seriously: We love the web. We love learning about the web, and we love helping others learn about the web. It’s an exciting place and sharing that excitement is a big part of what we do. Maker Party is therefore a natural fit for us.

Tell us what you’re most excited for at the event/events?

Well I had a blast making memes and remixing websites, but I am also 100 percent sure that I will have the time of my life making my own App. I used to perform absurdist pranks when I was a student; goofy things like running a fundraiser to buy our class an island and whatnot. Now I can finally take my love of situationist humor and make an app with it!

Why do you think is it important for youth and adults to make things with technology?

The creative rush is like nothing else. When you build something, you feel a sense of achievement, a sense of completion, that no person or force can take away from you. It’s fun. It’s exciting. Who didn’t make a box fort or something like that when they were a kid? Who didn’t like making up their own characters and stories, or even just playing with the characters that others came up with for hours on end? I view making things with technology as an extension of that. Yes it can be serious, but the play element is important as well.   It’s ultimately a chance to translate your ideas into a new form and find a new way to express yourself. Technology and the Internet occupy a vast space in our lives, and so putting your stamp on them is a good way to not just feel like you’re sitting there lost in this torrent of data and images. So learning how to make things with technology is just another way to interact with the world at large; it’s a chance to not only learn a skill but also a chance to learn about yourself. And that’s pretty important.

What is the feedback you usually get from people who attend or teach at your events?

We get the best compliments. To have somebody offer up time to talk with us and then be told “Hey, I had a lot of fun doing this!” is very gratifying. It’s even more gratifying to know that people are having that kind of fun all over the world when they visit Pursuitery and join our Challenges and Geekouts.

Why is it important for people and organizations to get involved in Maker Party?

It’s cool to connect. Technology lets us connect on a variety of different levels, even if we’re not in the same place, but there’s nothing quite like walking up to some people you’re friendly with and saying “Hey, check THIS out!” and then showing off your new favorite comic, record, app, or whatever. It’s even more exciting when it’s something YOU made. Maker Party amplifies that feeling by letting large amounts of people enjoy that kind of creative spark together. It’s a lot of fun, and it’s exciting to be a part of that surge.   Actually let me put it this way: It’s far better than just taking another coffee break. And I say that as a coffee lover!

How can people get in touch with your organization?

You can find us online at Pursuitery.com and Tweet at us @Pursuitery. We do a lot of cool stuff and we’d love to see you all on the site sometime. Let’s keep the Maker Party going!

Air MozillaMozilla Weekly Project Meeting

Mozilla Weekly Project Meeting The Monday Project Meeting