Tag: Mozpacers

MozAMU: Mozilla Addons Development at AMU

I am writing after a long time, have pending a lot of blogs, too 😦 Initially, I would like to tell you how the planning of this event took place. In Pycon India 2017, where Sanyam meets Rahul and his friends during Dev Sprints where Sanyam was sharing his journey and experience of FOSS. Rahul was asked to host Sanyam for a session on Open Source Contribution.

About one week after all this, Sanyam asked me to join him for this event, and give talk on Add-on Development in AMU. I said yes, but I was tensed as how to pitch and stage fear too 😦 . Even though I joined Shashank and Sanyam for it. My college exams were going on too so I get one of the bestest reason to ditch exams 😉 for Mozilla :P. So let’s talk about event.

Why you should contribute to FOSS?

Sanyam started the event with the concept of FOSS. He then further  explained the basics knowledge one needs and etiquette to contribute to FOSS. Moreover, he also focused on the problems faced by individuals in building community. The session was very much interactive in which we have two way talk.

Mozilla Rep Sanyam Khurana

Shashank on Mozilla Web Extension

After a small break,Shashank started his session about Mozilla Web Extension. He started with explaining Extension SDK and cross browser extension.Then he discussed manifest.json and it’s importance. Then we made  a simple addon — borderify, which displays a border across Mozilla pages. I helped students while they were developing this and got to learn about some new bugs and error we can face during development of Web Extension. The two way talks helped students as well as us in keeping the session interesting and grabbed new experience, too.

How do I start contributing to Open Source?

After the addons session , Sanyam explained  about how can a new bie start contributing to Open Source. He talked about how to find bugs on different projects through Bugzilla & Bugsahoy of Mozilla. At last, he introduced himself and discussed about his contribution to various Open Source projects.

During the session, we meet lot of buddies who themselves created addon and got huge responses. Even the beginners stood stunning and leave no stone unturned to prove them. A lot of them modified their previously created borderify addon to do more stuff and advanced it.

So its already 5 PM , we move to a nearby restaurent for Lunch with organising team.

moz-addons-amu-10.jpg

Before leaving Aligarh, we clicked a photograph 🙂

moz-addons-amu-6.jpg

Thanks to organising team for inviting us . All arrangements were awesome .

Hope to meet soon 🙂

 

Advertisements

Web extensions, Womoz and Privacy @IGDTUW

Hey guys!

So this time we were in Indira Gandhi Delhi Technical University for Women(IGDTUW) for Web Extensions, Womoz and Privacy awareness sessions.

Trishul started with a Web Extensions session by explaining what web extensions are and why they are useful. He showed some web extensions built by the community. All the participants were then asked to build, run and debug their own extension called borderify (A demo extension for participants new to Web extensions).

igdtu-trishul

Faye taking a session on women in mozilla, talking about improving women’s visibility and involvement in Free/Open Source and Mozilla, and to increase the number of women contributors.

faye-igdtu

Following it, Sanyam and Shashikanth talked about open source in general and importance of privacy respectively.

Here is a mandatory group photo:

igdtu-group

Thanks a lot to Tanya Vedi for such excellent arrangements.

Thanks for reading.

Cheers!

 

Moz Add-Ons Day

So this was the event for i was working for around 2 weeks before the date of event. As a organiser it was my second event , other was Mozilla NIEC Activate. This time i was making this free workshop more bigger and useful. We were making arrangements for around 100+ attendees so there was a lot of stuff had to manage like refreshments for all, event poster , and main work was to make announcements in every class in our college especially in first year students classrooms so that to involve more students from freshman years. So there was all set and on D-Day 19th of August , I landed in Delhi around 6 AM on 19th , i was so tired. After came to Delhi i went home and grabbed the standy of Mozilla , and then went to college for all setup.As there was a huge response from interested students, we have more than 270 registration, but in last i sent 130 invitations based on their Javascript Expertise and also the strength of Auditorium is for 130 peoples only 😦 . So i reached college around 9.30 AM, Pushpita , the mentor of this event was waiting on main gate of college 😦 .

So the attendees started to come to college and so till 10:30 AM we have 60+ attendees in the auditorium so we started the event with what is Mozilla and then we had a little session on Javascript till 12 AM, till now almost 100 students in Auditorium then Trishul ( Mozilla Add-Ons Developer ) introduced all of us about “Mozilla Add-Ons” and how to develop those. Then around 1 PM we had a little break for snacks which i ordered already and reached college on time :P. After that the core development of Add-ons started. So Trishul started event with a simple add-on which will just adds a color border to any pages loaded from “mozilla.org” or any of its subdomains. So i am trying here to explain how we can make this extension I hope all of you will understand it :).

So first there is a simple manifest.json file under any new directory you make ,lets for example borderify.

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}

 

Here the first three keys: manifest_versionname, and version, are mandatory and contain basic metadata for the extension.description is optional, but recommended: it’s displayed in the Add-ons Manager.icons is optional, but recommended: it allows you to specify an icon for the extension, that will be shown in the Add-ons Manager. The most interesting key here is content_scripts, which tells Firefox to load a script into Web pages whose URL matches a specific pattern. In this case, we’re asking Firefox to load a script called “borderify.js” into all HTTP or HTTPS pages served from “mozilla.org” or any of its subdomains.

If you do need to specify an add-on ID, include the  applications key in manifest.json and set its id property.

"applications": {
  "gecko": {
    "id": "borderify@example.com"
  }
}

 

Create the “icons” directory directly under the “borderify” directory. Save an icon there named “border-48.png”. As our manifest.json promised that we would have an icon at “icons/border-48.png”.

Finally, create a file called “borderify.js” directly under the “borderify” directory. Give it this content:

document.body.style.border = "5px solid red";

So finally we finished our code then we have to add this add-ons to our Firefox Browser. You can do that simply by watching this video :).

I hope you understood this code. Here some of the images of the event :).

WhatsApp Image 2017-08-25 at 11.50.37 PM

 

And the image after the event. You can find me easily sat down most left with weedy eyes as did not sleep from 3 days and travelled more than 800 kms in last 3 days.

image.JPG

Thanks for reading. Cheers 🙂