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!
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.
Next was hoosteeno, who shared viewsourceconf.org, the website for the 2016 edition of View Source, a conference for the web that Mozilla runs. The site is statically generated by Metalsmith and takes advantage of several plugins include the model plugin and the template plugin for Swig templates.
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.
- Case-sensitivity is now inferred based on whether the search text is mixed case or not.
- Support for XPIDL
- 20% lower memory use
- Improved C++ analysis, including template support.
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.
For more details, pmac wrote a blog post describing the switch.
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.
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.
|Benton Case||Intern – Web Developer||Add-on Recommendation|
If you’re interested in web development at Mozilla, or want to attend next month’s Extravaganza, subscribe to the firstname.lastname@example.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!