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.
We managed our event using a github repo and its issues. Since both Guilherme and I work on the same building floor many topics ended up being decided 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 for 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.
We decided to run an all day event going from 10h00 until 18h00.
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.
The case for Add-on development
There is a case to be made about Add-on development. If we imagine Web Developers as restaurant chefs, then we are Chefs who usually works on other peoples restaurants and never cook at home. Most of the Web Developers we meet work on products they don't use, and use products they haven't made. It is quite strange that we developers seldon develop products for our own use.
Most people think that there are only two actions to be made on the Web, you can create a Web page or consume a Web page, most of the actions we take fall into one or the other, even if it is interactively consuming an Web page such as when you comment on stuff on social networks.
What people seldon realize is that there is third action that is possible which is interfeering with other people Web pages. Who among us haven't had that moment while browsing when we wonder "this page would be much better with X or Y feature or change.", this is a common thought pattern where the product that is being offered to us clashes with what we desire and lets be honest, those large companies will probably not implement your suggestion to "move all the buttons to the other side because I am left handed and please stop tracking me". By taking the problem into your own hands and developing Add-ons to alter the Web and the Browsers, you are in essence taking back control of your online experience. It is an act of rebellion, and a bold one, when you say to the developers "I will implement this myself" and proceed to imprint your desires upon some other property.
The act of developing Add-ons, is the act of imprinting your wishes upon the Web. Sharing Add-ons is sharing your vision on how third-party products can be made better. Both are overlooked actions and most of us seldon stop to ponder why prople create add-ons. In my personal vision, add-ons are as important as developing web apps and browsers, it is the third pillar of the Web, the one that sits between developing web apps and consuming them. To make one extra metaphor, Add-ons are like musical remixes, sometimes they open a whole new dimension to a musical piece.
After the talks, we gave 40 minutes for the attendees to brainstorm what project they would like to do for the rest of the day. After this 40 minutes, the attendees who had ideas were encouraged to share their plans with the rest of the group. Those who liked some idea were encouraged to form groups with the idea originator and then work on it for the rest of the event.
We knew from the start that telling people to come out with Add-on ideas out of the blue would not be an effective way to engage everybody. People have different ways to come up with ideas and some don't enjoy comming up with an idea on the spot like this. To help people out, we made a clothesline where we hanged add-on ideas up. Each idea had a description, suggested APIs to use and a difficulty/complexity rate. Attendees were encouraged to browse our handing ideas and take one to implement if they felt like it.
This was very popular and many attendees took their projects from this idea repository. The ideas pool was assembled using a github issue before the event.
After our ideation dynamics, people were ready to work in groups. We emphasised that the objective was not to have a completed add-on by the end of the event, but that people were there to experience add-on development and if by the end some people felt like publishing their creation that we'd would help them. This helped release the pressure to have a shippable product by the end of the event and people were free to explore, it was a hack day after all.
The atteendees grouped themselves and started working on our comunal tables. Those are the following projects that were worked on:
Add-on to remove hate and political speech from Facebook timeline.
- Github: https://github.com/luiguild/bullshide
- AMO: Yet to be published
Add-on for internal usage at GTX digital agency. Replaces new tab with relevant links to clients and dashboard areas. Since it is for internal usage and contains sensitive data, it was not shared on AMO or GH.
Adblock Blocker Unblocker
Many Brazilian news and media portals are blocking the user from reading articles if they use an Ad Blocker. This Add-on removes their Ad Blocker Blocker.
- Github: https://github.com/guilhermemarconi/adblock-blocker-unblock
- AMO: https://addons.mozilla.org/en-US/firefox/addon/adblock-blocker-unblock-abril/
This add-on blurs images received on Whatsapp Web and will reveal them only when the user hover the mouse over them.
- Github: https://github.com/higornevesmarques/wppsafe
- AMO: https://addons.mozilla.org/en-US/firefox/addon/wppsafe/
Force theater mode on YT
An add-on that removes the releated videos from YouTube and forces the video into theater mode.
- Github: https://github.com/GlauberGoncalves/webextensionsFirefox
- AMO: https://addons.mozilla.org/en-US/firefox/addon/youtube-teatro/?src=search
This add-on replaces the new tab screen with a dashboard with relevant information from the users github account. The developer still working on it.
A collection of little enhancements to Whatsapp Web such as changing the color of specific messages based on content, pinning messages and users to top, and more. It is yet to be published.
An add-on to help language learners by storing their previous interactions with Google Translate, to be used in conjunction with flash cards. This add-on is still being worked on, the saving part works but it is missing the UI to display it back.
- Github: https://github.com/amora-labs/webextensions-examples/tree/localization-portuguese/guarda-palavra
Add-on to change text case
An add-on that adds an UI to the browser allowing the user to change uppercase text into lowercase. The case for this add-on was exchanging messages on online forums which often feature annoying UPPERCASE text. This add-on is not yet published, the developer still working on it.
This add-on removes 9gag sidebar and replaces the sharing options with Telegram sharing. The developer is solving a bug before uploading to AMO (missing mutation observer, argh).
The event was really well received and the general consensus was that add-on development was easier than what they expected. At the end we did a little dynamic to gather feedback. We set three wall areas on our auditorium labeled: "what was cool", "what was bad", "what do you want to see more in the future?". We distributed sticky notes and sharpies to everyone and encouraged them to write their anonymous feedback and place it on our walls. I will not list every single sticky note we received but these were the general feedback:
What was cool
- Our teaching methods (participatory, practical, hands-on, mentorship based).
- The fact that the event was not based only on talk sessions but also had practical time programming.
- Our snacks and beer.
- Our infrastructure.
- How easy it was to build add-ons.
- Seeing the add-ons working.
- Our group dynamics
- Having more than one woman present.
What was bad
- Half of the people who signed up didn't appear.
- The internet connection
- The chairs
What do you want to learn more
- Game Development
- Bot Development
- Neural networks
- More beer
- Web programming
After we gathered our feedback and posed for the group photo, we had our social gathering. People were free to engage and network with each other sharing their experience while having drinks (soda, beer or juice) and snacks.
Even though the event officially ended at 18h00, I left the party at about 23h30 and the last one to leave did at half past one in the morning (that would be Guilherme, co-organizer).
In our collective opinion it was a very succesful event and a model to be replicated. We're planning to organize many more hack days in the future.
- Total number of attendees: ~22 people (some left before the end due to other commitments).
- Add-ons worked on: 10.
- Snacks: 1000 finger food items.
- Soda: 6L
- Juice: 3L
- Beer: 30L
- Happy people after the event: more than 22.
- Github for event planning: https://github.com/amora-labs/evento-addons-hackday-2017/issues
- Github for translated samples: https://github.com/amora-labs/webextensions-examples/tree/localization-portuguese
- Flickr album: https://www.flickr.com/photos/soapdog/albums/72157678638596793/with/33575976241/
- Total money spent: R$ 970 (USD 309) - rooftop lounge rental, food, drinks, props.