Mozilla Web Development

Beer and Tell – July 2015

Jul 29 2015

Once a month, web developers from across the Mozilla Project get together to develop an encryption scheme that is resistant to bad actors yet able to be broken by legitimate government entities. While we toil away, we find time to talk about our side projects and drink, an occurrence we like to call “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.

Osmose: Moseamp

Osmose (that’s me!) was up first, and shared Moseamp, an audio player. It’s built using HTML, CSS, and JavaScript, but acts as a native app thanks to the Electron framework. Moseamp can play standard audio formats, and also can load plugins to add support for extra file formats, such as Moseamp-Audio-Overload for playing PSF files and Moseamp-GME for playing NSF and SPC files. The plugins rely on libraries written in C that are compiled via Emscripten.

Peterbe: Activity

Next was Peterbe with Activity, a small webapp that displays the events relevant to a project, such as pull requests, PR comments, bug comments, and more, and displays the events in a nice timeline along with the person related to the action. It currently pulls data from Bugzilla and Github.

The project was born from the need to help track a single individual’s activities related to a project, even if they have different usernames on different services. Activity can help a project maintainer see what contributors are doing and determine if there’s anything they can do to help the contributor.

New One: MXR to DXR

New One was up next with a Firefox add-on called MXR to DXR. The add-on rewrites all links to MXR viewed in Firefox to point to the equivalent page on DXR, the successor to MXR. The add-on also provides a hotkey for switching between MXR and DXR while browsing the sites.

bwalker: Liturgiclock

Last was bwalker who shared liturgiclock, which is a webpage showing a year-long view of what religious texts that Lutherans are supposed to read throughout the year based on the date. The site uses a Node.js library that provides the data on which text belongs to which date, and the visualization itself is powered by SVG and D3.js.

We don’t actually know how to go about designing an encryption scheme, but we’re hoping to run a Kickstarter to pay for the Udacity cryptography course. We’re confident that after being certified as cryptologists we can make real progress towards our dream of swimming in pools filled with government cash.

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!

Extravaganza – July 2015

Jul 13 2015

Michael Kelly

Once a month, web developers from across Mozilla get together to dumpster dive for hardware to add to our in-house cloud computing service. While we argue about the compute power of TI-83s, we find time to talk about the work we’ve shipped, share the libraries we’re working on, meet new folks, and talk about whatever else is on our minds. It’s the Webdev Extravaganza! The meeting is open to the public; you should stop by!

You can check out the wiki page we use to organize the meeting, or view a recording of the meeting in Air Mozilla. Or just read on for a summary!

Shipping Celebration

The shipping celebration is for anything we finished and deployed in the past month, whether it be a brand new site, an upgrade to an existing one, or even a release of a library.

DXR search package for Atom

First up was Osmose (that’s me!) with a package for Atom, a text editor made by Github. The package is called atom-dxr-search and lets you perform searches on DXR (Mozilla’s structured code search engine) from directly within your text editor. And, if you have the code tree you’re searching open as a directory in Atom, you can click on the results to open the matching file and jump directly to the line in question!

Socorro: Now on AWS!

Next was lonnen, who shared the great news that Socorro, the crash collector service that handles crash reports for Firefox and other products, has successfully migrated off of Mozilla infrastructure and on to AWS. This is the culmination of 2-3 quarters of work by the Socorro team, and will allow the team to scale and deploy much faster than before.

Along with the switch itself, the team set up several new tools to help deploy and monitor the service, including Atlas, which lets the team to audit and test infrastructure changes before they get deployed.

Air Mozilla /new page

Peterbe launched the New/Upload page on Air Mozilla, which lets users to upload existing videos or record a new video from their webcam. The page makes it much easier to submit content to Air Mozilla, and in the future the page will allow you to record screencasts as well.

DXR 2.0 Demo

ErikRose shared a link to his presentation on the new things coming in the DXR 2.0 update, as well as a link to the post-presentation discussion on what the future roadmap for DXR looks like.

Edwin, a tool for bug management

Mythmon has been working on Edwin, which is a small React app that lets you manage the list of bugs to work on for a project. It pulls data from both Bugzilla and GitHub, knows the current review status of a bug, and lets you to sort and prioritize work easily. SUMO and Input are currently using the tool to manage their work, and any projects interested in trying the tool out can contact mythmon to get their project added.

Pontoon on Heroku

I wrapped things up with the news that Pontoon, a localization service that supports in-page translation for websites, has migrated to Heroku. The jump is the result of work from both myself and mathjazz, the main developer of the site. The migration required upgrading Django from 1.4 to 1.8, replacing Git submodules with a peep-compatible requirements file, replacing jingo with django-jinja, and a slew of other changes generally around removing the last traces of playdoh from the site.

In addition, the Pontoon team is looking to help anyone interested in switching to Pontoon. If you’re not using Pontoon and want to be (and you should), let me know and I’ll be able to help start the process as well as possibly contribute patches to your site to enable in-page localization.

In the end we weren’t able to find enough computers, so we opted to install rootkits on all the company laptops that harvest unused CPU for our cloud.

If you’re interested in web development at Mozilla, or want to attend next month’s Extravaganza, subscribe to the dev-webdev@lists.mozilla.org mailing list to be notified of the next meeting, and maybe send a message introducing yourself. We’d love to meet you!

See you next month!

Beer and Tell – June 2015

Jun 29 2015

Michael Kelly

1 response

Once a month, web developers from across the Mozilla Project get together to try and transmute a fresh Stanford graduate into a 10x engineer. Meanwhile, we find time to talk about our side projects and drink, an occurrence we like to call “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.

Osmose: SpeedKills and Advanced Open File

First up was Osmose (that’s me!) presenting two packages for Atom, a text editor. SpeedKills is a playful package that plays a guitar solo and sets text on fire when the user types fast enough. Advanced Open File is a more useful package that adds a convenient dialog for browsing the file system and opening files by path rather than using the fuzzy finder. Both are available for install through the Atom package repository.

new_one: Tab Origin

Next was new_one, who shared Tab Origin, a Firefox add-on that lets you return to the webpage that launched the current tab, even if the parent tab has since been closed. It’s activated via a keyboard shortcut that can be customized.

Potch: WONTFIX and Presentation Mode

Continuing a fine tradition of batching projects, Potch stopped by to show off two Firefox add-ons. The first was WONTFIX, which adds a large red WONTFIX stamp to any Bugzilla bug that has been marked as WONTFIX. The second was Presentation Mode, which allows you to full-screen any content in a web page while hiding the browser chrome. This is especially useful when giving web-based presentations.

Peterbe: premailer.io

Peterbe shared premailer.io, which is a service wrapping premailer. Premailer takes a block of HTML with a style tag and applies the styles within as style attributes on each matching tag. This is mainly useful for HTML emails, which generally don’t support style tags that apply to the entire email.

ErikRose: Spam-fighting Tips

ErikRose learned a lot about the current state of spam-fighting while redoing his mail server:

Telling Postfix to be picky about RFCs is a good first pass. It eliminates some spam without having to do much computation.
spamassassin beats out dspam, which hasn’t seen an update since 2012.
Shared-digest detectors like Razor help a bit but aren’t sufficient on their own without also greylisting to give the DBs a chance to catch up.
DNS blocklists are a great aid: they reject 3 out of 4 spams without taking much CPU.
Bayes is still the most reliable (though the most CPU-intense) filtration method. Bayes poisoning is infeasible, because poisoners don’t know what your ham looks like, so don’t worry about hand-picking spam to train on. Train on an equal number of spams and hams: 400 of each works well. Once your bayes is performing well, crank up your BAYES_nn settings so spamassassin believes it.
Crank up spamc’s –max-size to 1024000, because spammers are now attaching images > 512K to mails to bypass spamc’s stock 512K threshold. This will cost extra CPU.

With this, he gets perhaps a spam a week, with over 400 attempts per day.

We were only able to get a 3x engineer this month, but at least they were able to get a decent job working on enterprise software.

See you next month!

Extravaganza – June 2015

Jun 10 2015

Michael Kelly

Once a month, web developers from across Mozilla get together to plot which C-level executive we’re going to take out next. Meanwhile, we find time to talk about the work that we’ve shipped, share the libraries we’re working on, meet new folks, and talk about whatever else is on our minds. It’s the Webdev Extravaganza! The meeting is open to the public; you should stop by!

You can check out the wiki page that we use to organize the meeting, or view a recording of the meeting in Air Mozilla. Or just read on for a summary!

Shipping Celebration

The shipping celebration is for anything we finished and deployed in the past month, whether it be a brand new site, an upgrade to an existing one, or even a release of a library.

Lazy-loading Fonts on MDN

First up was shobson with news about lazy-loading CSS fonts on MDN. The improvement allows users to see content immediately and avoids text flashing associated with displaying the fonts after they’ve loaded. The pull request is available for review for anyone interested in how it was achieved.

Lazy-loading Tabzilla on Air Mozilla

Next was peterbe, who told us about how Air Mozilla is now lazy-loading Tabzilla, the white Mozilla tab at the top of many of our websites. By not loading the extra code for the tab until the rest of the page has loaded, they were able to reduce the load time of the initial document by 0.7 seconds. Check out the bug for more info.

ContributeBot

pmac stopped by to show off ContributeBot, an Hubot script that reads contribute.json files and welcomes new visitors when the channel is quiet with information from the file. It gives new users info about where to find documentation, as well as pinging important people in the project to let them know that there’s someone new.

Open-source Citizenship

Here we talk about libraries we’re maintaining and what, if anything, we need help with for them.

pyelasticsearch 1.3

ErikRose wanted to let people know that pyelasticsearch 1.3 is out. It now has HTTPS support as well as new constructor arguments that help reduce the number of times you repeat yourself while using the library.

New Hires / Interns / Volunteers / Contributors

Here we introduce any newcomers to the Webdev group, including new employees, interns, volunteers, or any other form of contributor.

Name	Role	Work
Gloria Dwomoh	Outreachy Intern	Air Mozilla
Michael Nolan	Intern	Air Mozilla
Peter Elmers	Intern	DXR

This was a… productive month.

See you next month!

Beer and Tell – May 2015

May 21 2015

Michael Kelly

Once a month, web developers from across the Mozilla Project get together to organize our poltical lobbying group, Web Developers Against Reality. In between sessions with titles like “Three Dimensions: The Last Great Lie” and “You Aren’t Real, Start Acting Like It”, we find time to talk about our side projects and drink, an occurrence we like to call “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.

Groovecoder: WellHub

Groovecoder stopped by to share WellHub, a site for storing and visualizing log data from wells. The site was created for StartupWeekend Tulsa, and uses WebGL (via ThreeJS) + WebVR to allow for visualization of the wells based on their longitude/latitude and altitude using an Oculus Rift or similar virtual reality headset.

Osmose: Refract

Next up was Osmose (that’s me!), who shared some updates to Refract, a webpage previously shown in Beer and Tell that turns any webpage into an installable application. The main change this month was added support for generating Chrome Apps in addition to the Open Web Apps that it already supported.

This month’s session was a productive one, up until a pro-reality plant asked why we were having a real-life meetup for an anti-reality group, at which point most of the people in attendance began to scream uncontrollably.

See you next month!

Extravaganza – May 2015

May 11 2015

Michael Kelly

Once a month, web developers from across Mozilla get together to write fake Amazon reviews for cash on the side. While we sing the praises of shoddy products from questionable dealers, we find time to talk about the work that we’ve shipped, share the libraries we’re working on, meet new folks, and talk about whatever else is on our minds. It’s the Webdev Extravaganza! The meeting is open to the public; you should stop by!

You can check out the wiki page that we use to organize the meeting, or view a recording of the meeting in Air Mozilla. Or just read on for a summary!

Shipping Celebration

The shipping celebration is for anything we finished and deployed in the past month, whether it be a brand new site, an upgrade to an existing one, or even a release of a library.

DXR + Elasticsearch Staged

ErikRose himself was up first, and shared the news that the upcoming version of DXR, which switches the site to using Elasticsearch to power its code-searching abilities, has been successfully deployed on its staging environment. A year in the making, the new version brings faster searches, parallel indexing, and support for multiple programming languages, such as Python.

Bedrock Free from the Clutches of Playdoh

jgmize shared the news that Bedrock, the codebase for the main mozilla.org website, has been successfully divorced from Playdoh, including removing funfactory as a dependency and removing the reliance on git submodules for managing dependencies. Bedrock now uses peep to install dependencies on production.

Open-source Citizenship

Here we talk about libraries we’re maintaining and what, if anything, we need help with for them.

django-browserid 1.0 Released

Osmose (that’s me!) announced the 1.0 release of django-browserid, which mainly adds Django 1.8 support while removing support for older, unsupported versions of Django. Also, as the software is now 1.0, any backwards-incompatible changes will bump the version number as per the rules of Semantic Versioning.

pyelasticsearch 1.2.3 Released

Next up was ErikRose and his announcement of the release of pyelasticsearch 1.2.3, an API for interacting with elasticsearch. The release fixes a bug that caused doctype names to sometimes be treated as index names when _all was used.

Peep 2.3, 2.4, 2.4.1 Released

ErikRose also informed us about several peep releases. peep, which is a wrapper around pip that cryptographically verifies packages installed from a requirements file, is now compatible with pip 6.1.x, supports pip command-line flags in requirements files, and passes flake8.

django-tidings in the Mozilla Github Organization

The last bit of news ErikRose had to share was about django-tidings, a library for sending emails to users in response to events on your site. The project is now part of the Mozilla Github organization, and jezdez has been added as a maintainer.

Roundtable

The Roundtable is the home for discussions that don’t fit anywhere else.

Firefox Developer Edition 40

canuckistani stopped by to mention some of the exciting DevTools features coming to Firefox Developer Edition, including a new performance tool, breakpoints in unnamed eval scripts, recording networks requests before the Network Tab is opened, and more! Check out the etherpad for tracking new features as well as for finding links to what bugs could use some help!

If you are a fine purveyor of shoddy products and want to energize your marketing efforts with a grassroots campaign conveyed via customer reviews, give us a call! Our rates are very unreasonable!

See you next month!

Beer and Tell – April 2015

Apr 20 2015

Michael Kelly

Once a month, web developers across Mozilla get together to download MP3s off of Youtube videos of our favorite anime theme songs. While we download questionable add-ons for extracting music files, we find time to discuss the side project we’ve been working on lately. It’s the Webdev Beer and Tell!

You can check out the wiki page used to plan the event, but you’ll probably notice that there’s nothing on there. Turns out that no one had anything substantial to present this month, so we cancelled the recording and adjourned early.

See you next month!

Extravaganza – April 2015

Apr 13 2015

Michael Kelly

Once a month, web developers from across Mozilla get together to practice our competitive placation skills. While we aggressively refine our concessions, we find time to talk about the work that we’ve shipped, share the libraries we’re working on, meet new folks, and talk about whatever else is on our minds. It’s the Webdev Extravaganza! The meeting is open to the public; you should stop by!

You can check out the wiki page that we use to organize the meeting, or view a recording of the meeting in Air Mozilla. Or just read on for a summary!

Shipping Celebration

The shipping celebration is for anything we finished and deployed in the past month, whether it be a brand new site, an upgrade to an existing one, or even a release of a library.

Webdev Project Listing

I myself presented first, and shared mozilla.github.io/webdev, a list of Mozilla projects related to Web Development. The site pulls metadata from Github as well as contribute.json files when available, and is built and updated by Travis CI whenever a change lands on master. A small instance of daily-travis triggers a re-build once a day to keep the listing up-to-date.

Starring Events on Air Mozilla

Peterbe shared the news that you can now star events on Air Mozilla thanks to the work by OPW 2015 intern Lisa Hewus Fresh. Both signed-in and anonymous users can star videos; anonymous stars are saved to localstorage. Lisa also gave a brownbag on her intern experience and the process of developing and shipping the feature.

SocketPeer

Potch stopped by to let us know that SocketPeer, which was presented at last month’s Beer and Tell, has shipped and is ready for use. The library was also featured in a post on the Hacks blog.

New Hires / Interns / Volunteers / Contributors

Here we introduce any newcomers to the Webdev group, including new employees, interns, volunteers, or any other form of contributor.

Name	Role	Work
abompard	Volunteer	Submitted PRs to add Django 1.8 support to django-browserid!
jp	Employee Transfer	DevOps Jedi transferred to Web Engineering. Previously the DevOps wizard for the Mozilla Foundation!

Roundtable

The Roundtable is the home for discussions that don’t fit anywhere else.

Django-nose broken on Django 1.8

Peterbe wanted to share the news that django-nose is broken on Django 1.8. There’s an open issue and some pull requests with fixes, but no fix has been merged yet.

This week’s breakout star was willkg, with a stunning move to pay $200 a month in reparations to one of his Twitter followers in return for not following them back.

See you next month!

Beer and Tell – March 2015

Mar 25 2015

Michael Kelly

1 response

Once a month, web developers from across the Mozilla Project get together to design the most dangerous OSHA-compliant workstation possible. While searching for loopholes, we find time to talk about our side projects and drink, an occurrence we like to call “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.

Michael Kelly: dxr-cmd

A certain blog post author was first with dxr-cmd, a command-line client for making queries to DXR, Mozilla’s source code browser. The tool is installed via pip and supports any query you can make via the web interface. Output can be run through a pager utility such as less, and you can also control the syntax highlighting applied to the output.

Daniel Maher: AudioAddict plugin for Plex

Next up was phrawzty, who was not present but shared a link to AudioAddict.bundle, a Plex plugin that allows you to play music from AudioAddict-based services (such as radiotunes.com, di.fm, and more).

Peter Bengtsson: Redunter

peterbe shared Redunter, a web service that helps hunt down unused CSS on your website. By embedding a small snippet of JS into your page and browsing through your website, Redunter will analyze the HTML being rendered and compare it to the CSS being served. The end result is a list of CSS rules that did not match any HTML that was delivered to the user. Redunter even works with sites that modify the DOM by watching for mutation events and tracking the altered HTML.

Scott Michaud: GPU-Accelerated Audio

ScottMichaud returns with more fun stuff using the WebCL extension! Scott shared a demo of WebCL-powered audio where a virtual microphone was surrounded by individual raindrop sounds. By controlling the rate of raindrops, you can simulate a higher audio load and see the difference that pushing audio processing to the GPU can make.

Les Orchard: Parsec Patrol

Senior Space Cadet lorchard shared Parsec Patrol, a vector-based space game for the web. While there’s no full game made yet, there is a webpage with several demos showing collision detection, spaceship navigation, missiles, point-defense systems, and more!

Matthew Claypotch: a9r

Have you ever seen an abbreviation like l10n or i18n and had no idea what it meant? Have no fear, Uncle Potch is here with a9r, the answer to the abbreviation problem! Simply install the command and enter in an abbreviation to receive a list of all words in the SOWPODS word list that match. Got a word that you need to abbreviate? Not only can a9r decipher abbreviations, it can create them!

Matthew Claypotch: socketpeer

In a slightly-less-whimsical vein, potch also shared socketpeer, a simple JavaScript library for 1:1 messaging via WebRTC Data Channels and WebSockets. Extracted from the Tanx demo that Mozilla showed at GDC 2015, socketpeer contains both a server API for establishing peer connections between users and a client API to handle the client-side communication. Potch also shared a demo of a peer-to-peer chat application using socketpeer.

Chris Van Wiemeersch: PhantomHAR

Next up was cvan, who shared PhantomHAR, a PhantomJS and SlimerJS script that generates an HTTP Archive (or HAR) for a URL. A HAR is an archive of data about HTTP transactions that can be used to export detailed performance data for tools to consume and analyze, and PhantomHAR allows you to easily generate the HAR for use by these tools.

Chris Van Wiemeersch: fetch-manifest

Next, cvan shared fetch-manifest, a small library that takes a URL, locates the W3C web app manifest for the page, fixes any relative URLs in the manifest, and returns it. This is useful for things like app marketplaces that want to allow people to submit web apps by submitting a single URL to the app they want to submit.

Bill Walker: robot-threejs

Last up was bwalker, who shared robot-threejs, an experimental steampunk robot game powered by three.js and WebGL. The game currently allows you to fly around a 3D environment that has 3D positional audio emitting from an incredibly mysterious cube. CAN YOU SOLVE THE CUBE MYSTERY?

This month we think we’ve really got something special with our Seki Edge keyboard-and-mouse combo. Order now and get a free box of Band-aids at no additional cost!

See you next month!

The Desks of Mozilla WebDev

Mar 13 2015

kumar303

We WebDev contributors at Mozilla often meet face to face over video but we haven’t actually seen each others workspaces. Here is a small sampling of WebDev desks, inspired by those of 37 Signals.