Addons Hack Day

Posted Saturday, June 10th, 2017 

events

What was the event all about

Brazilian development communities are very organized with constant meetups and chatty online groups focused on specifics points of interest, regions or technologies. Most of these online groups are based on Telegram instant messaging app and basically, people talk all day long. It was in one of such small talk conversations that one group member mentioned an Add-on he created, some other members expressed interest in knowing more about Add-ons because they wanted to port some web development focused WebExtensions from Chrome to Firefox. Thats how we decided to run a hack day event focused on porting Add-ons, it all begun with a single instant message.

As the idea matured, we learned that Firefox is yet to add the WebExtensions DevTools API, so our Add-on porting day would pivot into an Add-on creation day.

Organizing an Addons Hack Day

I have an educational company here in Brazil called Amora Labs, we’re still under the radar as we get our courses ready but we’re already doing events and helping developers. Guilherme, another member of our Rio Developers telegram group works in a digital agency called GTX which is located at the same floor as my company. We decided together that our companies would sponsor the event and that it would happen at the beautiful rooftop lounge and auditorium of our building.

While we were busy organizing the event, Mozilla launched its WebExtension focused activate campaign which fitted perfectly with our efforts. Those activate campaigns are awesome because not only they help focus Mozilla community but because they also provide a framework for running such events. In our case, we ended up running the event a bit differently because of many reasons but specially because we started organizing everything before the campaign launched so by the time Mozilla had the event instructions running, we already had our own schedule and framework ready. Still they are quite similar and I believe that adapting any framework to your own local context is the key to a successful event, so please pick and remix any good idea from here.

Pre-event organization

We managed our event using a github repo and its issues, still since both Guilherme and I work on the same building floor, many topics ended up being decided upon with face to face talks at GTX or Amora Labs offices. Our main tasks before the event were:

• Get food and drinks for the attendees: We asked attendees on the signup process if they had any food related requirements and provided items that were agreeable to all our guests.
• Get some swag: We assembled a gift ecobag to each attendee with stickers from both our companies and Mozilla.
• Settle on a schedule: Our schedule was decided via github issue and talks.
• Gather all materials needed: Stuff such as power strips, tables, chairs.
• Localize materials: I have forked and translated the comments on the WebExtensions sample repository, thus making it easier for our atteendees to explore the collection of samples. I have also localized the Your First WebExtension MDN page thus giving a tutorial for our atteendees to follow if they wanted.

The event

We decided to run an all day event going from 10h00 until 18h00.

Quick talks

The event started with a collection of quick talks about WebExtensions, what they are, some examples of real work by people who were present at the event, and why should you care about them.

Our objective is that this part should last a maximum of one hour and a half. There were three speakers switching positions talking about WebExtensions, Guilherme, Luigui and I.

We presented a basic exposition of WebExtensions anatomy by livecoding the borderify Add-on.

Guilherme presented an Add-on for internal use inside GTX that replaces the new tab screen with a branded version with links to their own clients pages and admin areas. This was a great case to show Add-ons that are not for general distribution but useful inside a company.

Luigui gave us a very detailed explanation of his bulshide Add-on which hides political posts and hate speech from Facebook timeline. His Add-on uses Facebook CSS to replace and hide items on the timeline and is a great example of intermediate complexity Add-ons.

I showed a tiny 9gag tweak Add-on that alters the 9gag website to remove its sidebar and replace the sharing options with Telegram instead of Facebook and Whatsapp.