emceeaich: Gopher Tessel

First up was emceeaich, who shared Gopher Tessel, a project for running a Gopher server (an Internet protocol that was popular before the World Wide Web) on a Tessel. Tessel is small circuit board that runs Node.js projects; Gopher Tessel reads sensors (such as the temperature sensor) connected to the board, and exposes their values via Gopher. It also can control lights connected to the board.

bensternthal: Home Monitoring & Weather Tracking

bensternthal was up next, and he shared his work building a dashboard with weather and temperature information from his house. Ben built several Node.js-based applications that collect data from his home weather station, from his Nest thermostat, and from Weather Underground and send all the data to an InfluxDB store. The dashboard itself uses Grafana to plot the data, and all of these servers are run using Docker.

The repositories for the Node.js applications and the Docker configuration are available on GitHub:

craigcook: ByeHolly

Next was craigcook, who shared a virtual yearbook page that he made as a farewell tribute to former-teammate Holly Habstritt-Gaal, who recently took a job at another company. The page shows several photos that are clipped at the edges to look curved like an old television screen. This is done in CSS using clip-path with an SVG-based path for clipping. The SVG used is also defined using proportional units, which allows it to warp and distort correctly for different image sizes, as seen by the variety of images it is used on in the page.

peterbe: react-buggy

peterbe told us about react-buggy, a client for viewing Github issues implemented in React. It is a rewrite of buggy, a similar client peterbe wrote for Bugzilla bugs. Issues are persisted in Lovefield (a wrapper for IndexedDB) so that the app can function offline. The client also uses elasticlunr.js to provide full-text search on issue titles and comments.

shobson: tic-tac-toe

Last up was shobson, who shared a small Tic-Tac-Toe game on the viewsourceconf.org offline page that is shown when the site is in offline mode and you attempt to view a page that is not available offline.

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!

Once a month, web developers from across Mozilla get together 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!

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.

Survey Gizmo Integration with Google Analytics

First up was shobson, who talked about a survey feature on MDN that prompts users to leave feedback about how MDN helped them complete a task. The survey is hosted by SurveyGizmo, and custom JavaScript included on the survey reports the user’s answers back to Google Analytics. This allows us to filter on the feedback from users to answer questions like, “What sections of the site are not helping users complete their tasks?”.

View Source Offline Mode

shobson also mentioned the View Source website, which is now offline-capable thanks to Service Workers. The pages are now cached if you’ve ever visited them, and the images on the site have offline fallbacks if you attempt to view them with no internet connection.

SHIELD Content Signing

Next up was mythmon, who shared the news that Normandy, the backend service for SHIELD, now signs the data that it sends to Firefox using the Autograph service. The signature is included with responses via the Content-Signature header. This signing will allow Firefox to only execute SHIELD recipes that have been approved by Mozilla.

Open-source Citizenship

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

Neo

Eli was up next, and he shared Neo, a tool for setting up new React-based projects with zero configuration. It installs and configures many useful dependencies, including Webpack, Babel, Redux, ESLint, Bootstrap, and more! Neo is installed as a command used to initialize new projects or a dependency to be added to existing projects, and acts as a single dependency that pulls in all the different libraries you’ll need.

Roundtable

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

Standu.ps Reboot

Last up was pmac, who shared a note about how he and willkg are re-writing the standu.ps service using Django, and are switching the rewrite to use Github authentication instead of Persona. They have a staging server setup and expect to have news next month about the availability of the new service.

Standu.ps is a service used by several teams at Mozilla for posting status updates as they work, and includes an IRC bot for quick posting of updates.

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!

Osmose: PyJEXL

First up was Osmose (that’s me!), who shared PyJEXL, an implementation of JEXL in Python. JEXL is an expression language based on JavaScript that computes the value of an expression when applied to a given context. For example, the statement 2 + foo, when applied to a context where foo is 7, evaluates to 9. JEXL also allows for defining custom functions and operators to be used in expressions.

JEXL is implemented as a JavaScript library; PyJEXL allows you to parse and evaluate JEXL expressions in Python, as well as analyze and validate expressions.

pmac: rtoot.org

Next up was pmac, who shared rtoot.org, the website for “The Really Terrible Orchestra of the Triangle”. It’s a static site for pmac’s local orchestra built using lektor, an easy-to-use static site generator. One of the more interesting features pmac highlighted was lektor’s data model. He showed a lektor plugin he wrote that added support for CSV fields as part of the data model, and used it to describe the orchestra’s rehearsal schedule.

The site is deployed as a Docker container on a Dokku instance. Dokku replicates the Heroku style of deployments by accepting Git pushes to trigger deploys. Dokku also has a great Let’s Encrypt plugin for setting up and renewing HTTPS certificates for your apps.

groovecoder: Scary/Tracky JS

Next was groovecoder, who previewed a lightning talk he’s been working on called “Scary JavaScript (and other Tech) that Tracks You Online”. The talk gives an overview of various methods that sites can use to track what sites you’ve visited without your consent. Some examples given include:

Reading the color of a link to a site to see if it is the “visited link” color (this has been fixed in most browsers).

Using requestAnimationFrame to time how long it took the browser to draw a link; visited links will take longer as the browser has to change their color and then remove it to avoid the previous vulnerability.

Embed a resource from another website as a video, and time how long it takes for the browser to attempt and fail to parse the video; a low time indicates the resource was served from the cache and you’ve seen it before.

groovecoder plans to give the talk at a few local conferences, leading up to the Hawaii All Hands where he will give the talk to Mozilla.

rdalal: Therapist

rdalal was next with Therapist, a tool to help create robust, easily-configurable pre-commit hooks for Git. It is configured via a YAML file at your project root, and can run any command you want to run before committing code, such as code linting or build commands. Therapist is also able to detect which files were changed by the commit and only run commands on those to help save time.

gregtatum: River – Paths Over Time

Last up was gregtatum, who shared River – Paths Over Time. Inspired by the sight of rivers from above during the flight back from the London All Hands, Rivers is a simulation of rivers flowing and changing over time. The animation is drawn on a 2d canvas using rectangles that are drawn and then slowly faded over time; this slow fade creates the illusion of “drips” seeping into the ground as rivers shift position.

The source code for the simulation is available on Github, and is configured with several parameters that can be tweaked to change the behavior of the rivers.

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!

Once a month, web developers from across Mozilla get together 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!

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.

Normandy Control Interface Release

First up was mythmon, who mentioned the new release of Normandy, the backend server for the SHIELD system that powers surveys and feature studies in Firefox. This release includes a new admin interface built using React and Redux, as well as a switch to client-side targeting that is powered by JEXL expressions.

Google Sign-In on Socorro

Next was peterbe, who mentioned that Socorro, the crash-report service for Firefox, has added Google-based sign-in ahead of the planned shut-down of Persona. It’s planned to land in production sometime within the next week, and involves some extra work around triggering automatic sign-out of users who have been signed in for a certain amount of time.

DXR: The Ballad of Peter Elmers

ErikRose was next, and shared yet another list of new features developed by DXR intern new_one:

Description column in file listings

Better handling of whitespace in paths

Modification dates are pulled from the VCS instead of the filesystem

Per-line blame links

Badges in the filter dropdown showing what languages support each filter

Open-source Citizenship

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

django-jinja-markdown

Next was pmac in absentia, who wanted to share django-jinja-markdown, a fork of jingo-markdown. It adds support for rendering Markdown strings to HTML in templates rendered with django-jinja via a markdown filter, as well as a similarly-named template function. It also includes a block-level template tag that can be enabled by adding the library as a Jinja extension.

json-schema-reducer

Back to peterbe, who shared json-schema-reducer. The Python-based library takes in a JSON Schema and a JSON object or dict, and returns the JSON object with only fields that are specified in the schema. The main use case for the library is taking Socorro crash reports, and whitelisting data that is appropriate to be sent to Mozilla’s Telemetry platform for analysis, removing sensitive data that isn’t meant to leave the crash report system.

Roundtable

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

GTD

Last up was ErikRose, who brought up the Getting Things Done methodology and how he recently has adopted it to help deal with his personal and professional time management. The video recording contains an extended discussion of time management strategies, but useful tools highlighted during the discussion include Things (OSX only), Org-Mode, and good old-fashioned sticky notes.

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!

Moby von Briesen: Jam Circle

This week’s only presenter was mobyvb, who shared Jam Circle, a webapp that lets users play music together. Users who connect join a shared room and see each other as circles connected to a central node. Using the keyboard (or, in browsers that support it, any MIDI-capable device), users can play notes that all other users in the channel hear and see as colored lines on each circle’s connection to the center.

The webapp also includes the beginnings of an editor that will allow users to write chord progressions and play them alongside live playback.

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!

Once a month, web developers from across Mozilla get together 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!

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.

Basket switch to Salesforce

First up was pmac, who shared the news that Basket, email newsletter subscription service, has switched to using Salesforce as the backend for storing newsletter subscriptions. In addition, the service now has a nifty public DataDog metrics dashboard showing off statistics about how the service is performing.

Engagement Engineering Status Board

Next was giorgos, who shared status.mozmar.org, a status page listing the current status of all the services that Engagement Engineering maintains. The status board pulls monitoring information from Dead Man’s Snitch as well as New Relic‘s application and Synthetics monitoring. The app runs a worker using AWS Lambda that pulls the information and writes it to a YAML file in the repo‘s gh-pages branch, and the status page itself reads the YAML file via JavaScript to build the display.

DXR

ErikRose stopped by to share more cool things that shipped in DXR this month:

Indexing for XBL and JavaScript.

Indexing 32+ new projects

Added a 3rd build server

Several performance optimizations that cut down build times by roughly 25%.

C++ macro definitions, method overrides, pure virtuals, substructs, and more are all now indexed. In addition, you can now easily jump between header files and their implementations.

UI improvements, including contrast improvements, a new filename filter, and jumping directly to files that are the only result of a query.

Special thanks to intern new_one and contributors twointofive and abbeyj. Also special thanks to MXR for being shut down due to security bugs and allowing DXR to flourish in its wake.

Fathom 1.0 and 1.1

Erik also brought up Fathom, an experimental framework for extracting meaning from webpages. Fathom allows you to write declarative rules that score and classify DOM nodes, and then extract those nodes from a DOM that it analyzes.

This month we shipped the 1.0 version of Fathom, as well as a 1.1 release with a bug fix for Firefox support as well as an optimization fix. It’s available as an NPM module for use as a library.

Roundtable

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

Last up was pmac again, who wanted to mention that the Mozilla Engagement Engineering team is hiring a Senior Web Developer and a Site Reliability Engineer. If you’re interested in working at Mozilla, click those links to apply on our careers site!

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!

At Mozilla we share a lot of open source libraries. When you’re using someone else’s library, you might find that an upgrade breaks something in your application — but why? Glancing at the library’s changelog can help. However, manually maintaining a changelog when building features for a library can be a challenge.

We’ve been experimenting with auto-generating a changelog from commit history itself and so far it makes changelogs easy and painless. Here’s how to set it up. These tools require NodeJS so it’s best suited for JavaScript libraries.

First, you need to write commit messages in a way that allows you to extract metadata for a changelog. We use the Angular conventions which specify simple prefixes like feat: for new features and fix: for bug fixes. Here’s an example of a commit message that adds a new feature:

feat: Added a `--timeout` option to the `run` command

Here’s an example of a bug fix:

fix: Fixed `TypeError: runner is undefined` in the `run` command

The nice thing about this convention is that tools such as Greenkeeper, which sends pull requests for dependency updates, already support it.

The first problem with this is a social one; all your contributors need to follow the convention. We chose to solve this with automation by making the tests fail if they don’t follow the conventions 🙂 It’s also documented in our CONTRIBUTING.md file. We use the conventional-changelog-lint command as part of our continuous integration to trigger a test failure:

conventional-changelog-lint --from master

There was one gotcha in that TravisCI only does a shallow clone which doesn’t create a master branch. This will probably be fixed in the linter soon but until then we had to add this to our .travis.yml:

Alright, everybody is writing semantic commits now! We can generate a changelog before each release using the conventional-changelog tool. Since we adopted the Angular conventions, we run it like this before tagging to get the unreleased changes:

As you can see, we also make sure to write commit messages in past tense so that it reads more naturally as a historic changelog. You can always edit the auto-generated changelog to make it more readable though.

The conventional-changelog tool can update a README.md file but, for us, we just paste the Markdown into our github releases so that it shows up next to each release tag.

That’s it! There are a lot of options in the tools to customize linting commits or changelog generation.

Once a month, web developers from across Mozilla get together 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!

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.

Okta SSO Fix Add-on

First up was shobson, who shared MoCo SSO Tweaks, a Firefox add-on that makes the Okta SSO flow better. Among other things, it auto-focuses the verification code field, makes Enter submit the verification code form, and optionally automatically checks the “Remember Device” checkbox.

shobson worked on the frontend for the site. It intentionally avoids using jQuery and uses SVGs for small image filesizes and easy Retina support. In the future the site will be using Service Workers to enable offline access for the site, and particularly the schedule.

Air Mozilla Timenails

peterbe stopped by to talk about the timenail support he added to Air Mozilla. A timenail is a single screenshot from a video at a specific timestamp; a series of timenails is generated by the transcoding process and made available in the chapter editing interface for each video to help aid in finding good transition points for marking chapters in the video.

The site also calculates the difference between timenails and lets users filter the timenail list to only show thumbnails that have a difference between the previous timenail above a given threshold.

DXR

Next up was ErikRose, sharing a bunch of new changes that landed in DXR:

Case-sensitivity is now inferred based on whether the search text is mixed case or not.

Peep 3.1.2

Fathom

Erik’s last mention was Fathom, which is an experimental framework for extracting meaning from webpages. You provide it declarative rules that score and classify DOM nodes, and in return it will parse a webpage and rank DOM nodes in the page based on the given rules. You can then extract nodes from this ranking in various ways, such as finding the highest-ranked nodes for a specific attribute, or finding clusters of similarly-classified nodes that are close to each other.

Readable Bug Statuses in Bugzilla

emceeaich and dylan wanted to share (in absentia) the news that the Readable Bug Status package that emceeaich has been working on has been deployed on bugzilla.mozilla.org for bugs in the Firefox, Core, Toolkit, and BMO products. Readable Bug Status helps summarize the status of a bug using information from several fields.

Bedrock + Gulp

Next was pmac who shared the news that Bedrock has switched to using gulp to help manage their frontend build and development process. The site previously relied on django-pipeline completely to manage its static assets, but ran into issues with slow builds during development, as django-pipeline doesn’t watch for which files have changed and simply triggers a full build on each pageview. Switching to gulp allows the site to only rebuild frontend files that have changed, and it builds them as soon as they change instead of building them on-demand.

Open-source Citizenship

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

Google Analytics Pageviews on Non-Web Requests

peterbe shared a blog post he wrote describing how to use Raven to send pageview data to Google Analytics. This is useful for tracking usage of endpoints that don’t return webpages but are still considered part of your site’s public API.

Domainswitcher

peterbe also shared Domainswitcher, and add-on that lets you easily switch between domains while preserving the current path. The add-on is useful for web developers working on sites that want to switch between prod, staging, development, and locally-hosted instances of the site.

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.

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!

Bedrock, the code behind www.mozilla.org, is a very large Django project. It is mostly large due to the volume and diversity of independent pages it serves. These pages come with a surprising amount of static media (css, js, images, fonts, etc.). So, any system that we use to deal with said media should be efficient in order to keep our development servers fast.

We like django-pipeline for managing our static media in production. It does a great job of bundling, minifying, and compressing our css and js. When using it in a development environment however, it does not scale well. The issue is that it does not watch for changes to your files, so all it can do is copy them all from their source to the static directory on every page load. For a reasonable number of files this is probably fine, but as I said ours is not that. This is exasperated in slow I/O environments like Docker on a non-linux system (like OSX). We’ve not been able to setup an acceptable Docker-based local dev environment yet because it can literally take several minutes to render the home page.

Due to all of the issues noted above we’ve been looking for other ways of handling static media. We’ve considered a few times to move to a completely nodejs based system that would be completely independent of the Django side, and may still do that some day, but the problem has always been scope and impact. Again because the project is so large, making sweeping changes that affect workflow and all static files can both take a lot of time and be very disruptive when they land. So for a long time we figured we were stuck. But recently a conversation started in IRC about being able to just disable django-pipeline’s copying of files. If we could do that we could use gulp-watch to much more quickly and efficiently manage these files while being edited and still get the benefits of django-pipline for production. It turned out that someone else already had this idea and mostly we just needed to upgrade django-pipeline.

But it was still a bit odd now having to have two shells open, one for the gulp task and another for the Django dev server. So we did a little more gulp magic and now have a single command to start up both the file watching and the Django server that combines the output of both in a single terminal.

Once a month, web developers from across Mozilla get together 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!

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.

Normandy, the Recipe Server

First up was Osmose (that’s me!), sharing the news that Normandy has shipped! Normandy is a service that will eventually power several Firefox features that involve interacting with users and testing changes to Firefox quickly and safely, such as recommending features that may be useful to users or offering opportunities to try out changes. Right now the service is powering Heartbeat surveys being sent to release users.

Big thanks to the User Advocacy and Web Engineering teams for working on the project!

MDN Save Draft Feature

Next was shobson who talked about MDN‘s Safe Draft feature. When editing an MDN article, the site autosaves your edits to localStorage (if it’s available). Then, when you revisit the editing interface later, the site offers to let you restore or discard the draft, disabling autosave until a decision is made. Future improvements may include previewing drafts and notifying users when an article has changed since their draft was saved.

Air Mozilla Thumbnails

peterbe stopped by to talk about Air Mozilla‘s chapters feature, which allows users to mark and link to segments in a video. The site now auto-generates thumbnails for chapters to help preview what the chapter is about.

Roundtable

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

Docker Development Environments

Last up was jgmize, who asked about use of Docker for easy development environments. The general consensus was that most of the developers present had tried using Dockerized development environments, but tended towards using it only for deployed services or not at all.

Some of the interesting projects brought up for using Docker for development or deployment were:

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!