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.


Before leaving Aligarh, we clicked a photograph 🙂


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

Hope to meet soon 🙂



Moz Hack Day

Hello Everyone ,

This post is about a hackathon “ Moz Hack Day ” which was held in USIT for every student who was interested in A-Frame on 16 December 2017.


  • Talking About VR, WebVR & A-Frame.
  • Demo of basic A-Frame scenes.
  • Basic concepts of A-Frame.
  • Addons Concepts & implementation.
  • Hands-On Addons development.

The event was started by the introduction speech, following with introduction of A-Frame and speaker also gave a look-up to attendees upon previously created ideas with A-Frame.

I, first of all, introduced myself and interacted with students by sharing my experience.I then started the event by introducing some basic stuff about WebVR like Mozilla and it’s mission of better and safe web,  Mozilla’s initiative on making web more approachable, later also told them about MozActivate initiative and then, explained virtual reality, hardware compatible headsets and their technology, friction of  VR ecosystem.

I also explained what is WebVR, and how amazing it’s development process and results could be by showing them some cool a-scenes stuff I developed before then, Explained A-Frame documentation and gave it’s website source which is (, I requested attendees to have a view over A-Frame documentation but later explained it.

then explained and showed them the basic example “ Hello World ” of A-Frame, which helped them to understand the basics of A-Frame development. Some Students raised there questions and it was good to see their doubts and curiosity to know better and understand deeply the concepts and those doubts were cleared.

I then explained about languages we need with A-Frame.I explained then about entity component system, about a-painter, then about registry, and at last about community.Then, we had our first refreshment break which included Tea, cold-drinks and wafers (according to attendees), then we started our development process.

After Tea break now, attendees started coding and creating their ideas and imaginations. Few of the students were good with A-Frame development and were creating really good stuff, which includes 360 image and 360 video scenes which were great. Now it was the time for Lunch break.

Now after lunch attendees again started coding what they were left before lunch and developers and students who were creating some good stuff were coding faster for completing their project, and it was good to see students collaborating which feels like a hackathon or an informative session.

As the session was just getting finished and there were just 30 minutes left, most of the developers had finished their development process and they were getting ready for submitting what they had created.

Now session concluded and I thanked all the attendees and developers who were coding and created great stuff.

Thanks for reading 😀 .



IRC and IRC Bouncer

I wanna write about IRC and bouncer from a long time. In summer vacation of college I started using IRC for the dgplug summer training about which i got to know from Sanyam’s blog 🙂 .I tried to connect to IRC from a long time before dgplug training too but failed to do so due to some interruptions.

What is IRC?

[Internet Relay Chat] – IRC is a protocol that provides a way to communicate in real time with people from all over the world,was invented before the World Wide Web.  It is very similar to text messaging, but designed around communicating with large groups of users instead of one on one. It consists of various separate networks (or “nets”) of IRC servers, machines that allow users to connect to IRC.

What is IRC Clients?

An IRC client is the vehicle that connects you to the global network of IRC servers. A variety of applications are available, like WeeChat , HexChat , XChat, Chatzilla etc. Personally i am using HexChat. Its awesome and easy to use. We will use HexChat here in this blog for EliteBNC setup. You can download it from here .

So if you have used IRC before, you must know that unlike other chat systems, IRC doesn’t keep when you’re offline. In order to be notified of relevant communications you can either look at the channel logs or setup an IRC bouncer.

What is a IRC bouncer or BNC?

An IRC bouncer is a middleman between you and an IRC network. It connects to a network like a normal client and instead of connecting directly to an IRC network we can connect to it.

How to setup IRC Bouncer?

Either you can install it on your own server or get a free BNC from some BNC provider.

A list of bouncer software.

  • JBouncer for IRC, written in Java. Supports logging.
  • psyBNC is said to be the oldest and most well-known IRC bouncer.It is easy to use, runs on Linux and became popular on FreeBSD, supports IPv4, IPv6, SSL, logging, multiple users and networks etc.
  • bnc is the original IRC bouncer.
  • ZNC  is easy to use, supports SSL connections, IPv6 and logging and offers a web interface. It is extendible by modules and scripts in C++, Python, Perl and Tcl.
  • Matrix and Riot  has a bouncer included, simple solution is to get an account on as they have client for Android too.
  • EliteBNC is the one which we will setup in this blog. Its awesome and easy to use . I am using it. Its well maintained. Thanks to Robby 🙂

How to get Bouncer from EliteBNC?

In HexChat you can setup the EliteBNC by following steps. 🙂

  1. Open HexChat and Join #elitebnc channel on Freenode. Command to join any channel on IRC , just type /join # .
  2. type !list it will show all available commands.
  3. There are three ways or commands to request BNC, !request !easyreq and  !emailreq
  4. To get BNC for Freenode, send !easyreq <email>

Now wait for some time to get approval of request. *DO NOT* make multiple request else Robby will kick you from EliteBNC 😛 . Once your request gets approved you will receive an email, go ahead and login to your account. The link would be like

where xxxx is server name, which will be mentioned in the mail sent by EliteBNC eg. Sigma, Theta.

WhatsApp Image 2017-11-22 at 11.41.43 PM

Go to ‘Your settings’ and edit the Freenode network, enable the nickserv module so that Freenode will identify you.

You can edit other details in ‘Your settings’

You can use to join the channel if you don’t have any IRC client.

How to connect HexChat to EliteBNC?

Add new network in HexChat and follow the screenshots.

To do that go to HexChat->Network List or press Ctrl + S .Add new network and Edit it.


We will be using port 1338, as it is port for SSL (secured) connection.


Finally you have setup an IRC bouncer. Enjoy 🙂

I learned all this from my friend Bhavin’s blog .

If some one needs any help feel free to ask 🙂













Moz WebD SIG 30 Sep

Dussehra, Saturday, Sept 30th, while many students were enjoying the festival week at their places, Moz-NIEC conducted the class, it commenced at 11 am, sharp, as the team came before the scheduled time and hence, were ready to teach the basics of JS.

I, frankly, thought that, conducting class on Dussehra wasn’t a good idea, as many students have already made plans with their family and would not prefer the class over their famliy. But to my surprise, around 55 students came, despite saying ‘no’ in the WhatsApp group.

Each team member told about their personal experience, working with JavaScript, and how it is useful in the modern day browser. Some students haven’t even studied C/C++, so we started with basics of every programming language, If, else. First, team wrote the code and showed it to the class, by using the projector, then, explained each and every word of the code, and, for some reason, someone is not able to understand the code, the team members, spread out in the class, go to their desks and, if the doubt is something important that the member, who was teaching, hadn’t emphasized a lot on. The doubt is then, cleared on the projector for everyone to see. This repo has been updated as promised.

Students, who were attending the class for the first time, were given links to read through, and each team member were assigned the new students to help them understand whatever was taught in the previous classes and were added in the group so that, they may discuss their doubts.

We gave them some tasks as homework. At the very end, We told them that Mozilla-NIEC is conducting a hackathon Moz-Hack on Oct 14 2017, and invites all developers and hackathon enthusiasts to participate in the hackathon. The next class is scheduled to be on next weekend. We intend to continue javascript in that session.

This time we also have some swags from Mozilla Community for all 🙂


Thanks for reading. Cheers. Be Mozillian 🙂

Moz WebD SIG 24 Sep

Sunday, Sept 24th, a day after our first term exams got over, we thought that the turnout of the students would be less, but, to our surprise, almost 50 students came.
We had set the projectors, laptops,extensions cords, etc quicker than the last time, and also before time as moz niec team came early.
Moz-NIEC team taught different styling and, customising the look and feel of the website, and sending all the code into an external file i.e. CSS file. And gave a hint about the next class on JS.
Many new students came, so, the team members went to their desk and personally made them understand all that was being taught in the class. Presently, many students ask their doubts in the WhatsApp group, and from the team, whoever is free, solves their doubts. This repo has been updated as promised.


Moz WebD SIG 9 Sep

This is when the journey begins. It wasn’t the easiest of task to make announcements in every single class at the top of our voices, but it turned out unexpectedly overwhelming.

The response was just fantastic.  More than 40 students showed up even before we did (we were punctual).  And then adding up to near about 65 by the commencement of the class.

The plan was crystal clear, this was the first time coding experience for many of the first year students,  and we wanted it to be as basic as we wanted it to be interesting.

We started off with who we are,  how we are what we are and most importantly WHY we (and the students) are here. Being straightforward open source enthusiasts, it wasn’t as difficult for us ‘Mozillians’ to make our students fall in love with open source as it once might have seemed.

The response was not only overwhelming when it came to attendance but also equally amazing when it came to respone of the students towards what is being taught.

By the end of the 4 hour long workshop,  where everyone seemed interested throughout, we as ‘teachers’ were delighted to conduct a successful workshop on  HTML and more importantly why is it important to be a programmer, a creator.

The students, we feel, felt amazing. And we expect an even more audience the next time.

Some photos of the class 🙂 . You can find me. I am the guy with Hike T-shirt 😛

WhatsApp Image 2017-09-10 at 4.53.52 PM(3)



Thanks for reading. Cheers . Be Mozillian 🙂

Software Freedom Day Chandigarh 2017

So about this event Pushpita told me at the home of Ajay Sir that Mozilla team is going there for 2 sessions, one is of VR and another one on Mozilla Extensions. So after the last event on Mozilla Extension on 19 August , i started learning about how to make Mozilla Extensions and got idea about how to make simple Mozilla Extensions. So Pushpita asked me to join her and Tushar on the trip and i said yes in few seconds 😛 . So in this way this trip was planned. So after came back to home i booked the tickets of round trip in hurry :D. We boarded the train to Chandigarh on 15th September at 7 PM and reached Hotel around 11 PM.

<h1> Day 1 </h1>

So next day we went to Panjab University. Tanish was here who invited Mozilla to Chandigarh. There is such a nice arrangement , and more than 250 students were in Auditorium. So the session on VR is from 11 AM. Tushar started session with introducing Mozilla and then a hour talk about how can we develop VR project and showed audience some cool projects on VR.1

After that Pushpita introduced all to Woman in Mozilla  in 15 20 minutes lightning talk.


And the crowd at the Auditorium 😀



So after that we have a good time to see the beauty of Chandigarh as we got free around 1 PM from there. So we booked Cab and roam in Chandigarh. We visited Elante Mall and Sukhna Lake. We also did boating, it was my first experience of boating. The beauty of Sukhna Lake is unbelievable .5.jpg

After that we moved to Iskcon Temple. So in this way our Day 1 ended.

<h1> Day 2  </h1>

On second there was only a hands on session of Mozilla on Mozilla Extensions at 2 PM. So we planned to move to Rock Garden before Session. 12.jpg

After that we move to College and the session started and audience was quite interested in Mozilla Extensions and more than 80% of attendees developed there first Mozilla Extension in less than a hour called as “Borderify”


So after this talk We discussed with Team of Event about Mozilla Campus club at Panjab University. So now it was the time to get back to home :'(. We moved to Railway Station of Chandigarh and reached here Delhi at 11 PM

It was a nice experience and a awesome trip. I wish for a next trip to Chandigarh. Its a beautiful city , No traffic , awesome weather and the best part is the helping nature of the people of Chandigarh.

Writing this blog after bunking the class in college 😛

Thanks for Reading. Be Mozillian 🙂

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 “” 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",

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

  "content_scripts": [
      "matches": ["*://**"],
      "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 “” 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": ""


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: = "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.


Thanks for reading. Cheers 🙂

MozCoffee V11: Time to wakeup Community

There is a long time from Mozilla Delhi went on a hibernate so its time to wake up the community. To rejuvenate the community some members took initiative. Thus Pushpita and Bhuvnesh  planned to organize Mozcoffee V11 on July 15 at Qutub Spring House, Delhi.

I had two events on same day , one is Hackathon Random Hacks of India in Gurgaon at 9 AM where my team members wait for me and  another was MozCoffee at 11 AM, i preferred first to go to MozCoffee as it was necessary to wake up the Community.The main agenda of this MozCoffee was to discuss about the current projects of Activate Mozilla Campaign.

So I reached by 10.30 AM at the venue. Pushpita and me reached at the same time 😀 . Bhuvnesh Sir was already at the venue. More attendees began to join us from 10.45 onwards. I was so happy to some newbies join us as they were interested in Open Source Contribution. So I and Sanyam Bhaiya introduce them to open Source and tell them about how to contribute to Mozilla Projects and Mozilla Campus Club. This was first time I introduce some one to Open Source though it was not official talk 😛 .

After that Sanyam Bhaiya told about various Mozilla Projects after that Pushpita explained about the Activate Mozilla Campaign. She also highlighted other projects for non- tech peoples.


Finally, it was time to bid goodbye to all the Mozactivities 🙂 .


Thanks for reading. Sorry for such bad english. Be Mozillian :).


Tabs v/s Spaces: Analysis on why tabs better

Tabs vs Spaces : Silicon Valley

Tabs v/s Spaces. I am sure you have encountered this dilemma in your coding career time and again. I prefer tabs. There are some people who prefer spaces instead. Today I would like to discuss why tabs are better than spaces. I am only going to use rational points here. Please spend 5 minutes on this article and then make a decision.

First, I would like to point out the major argument why people prefer Spaces over Tabs.

They say, spaces make indentation look more consistent across different setups. This is not totally correct. Tabs can be configured to consume any number of columns in the editor. So if you hate high indentation, you can set tab width as 2. But, spaces do have a real advantage and it comes when you are trying to do non-uniform indentation like of function parameters in a function declaration.

int mainFunction(int a, char b, bool c, short d, long e){
               return 0; } 
int mainFunction(int a, char b, bool c, short d, long e){
               return 0; }

The first function in this code uses spaces whereas the next one uses tabs. If you try to see the difference here, you will notice that double f is slightly misaligned in the second function. For me, this is not bothersome and I would gladly accept this over the benefits of tabs. Let’s look into these in detail.

1. Tabs are meant for Indentation

Why were ‘Tabs’ created when we already had spaces? For indentation right, what other could be the reason. Now tabs were introduced for indentation because indenting using space required lots of keystrokes (though it’s not the case with modern editors now). So you might still argue “I would use spaces because my editor automatically takes care of indentations for me”. Well have a look at the next points then.

2. Tab-based indentation is uniform, like spaces

As I already told at the start of this article, tab width can easily be changed in the editor to make indentation look consistent across different setups. As a bonus, tab width can be changed unlike spaces and this allows a developer who hates, say wide indentation to visualize a narrower indentation while coding.

This is the main point why people thought spaces are better. In my opinion, it’s just the opposite. Indentation using tabs is flexible in its own way.

I hope at this point of the article, I have cleared the air around tabs and why people feel that spaces are superior to tabs. At this point, we can say that spaces are pretty much equal to tabs if you don’t consider that indentation example earlier. Now let’s see, why tabs are better than spaces.

PS – It may feel like I am being picky here but hey, tabs = spaces has been established so every pro for Tabs matters.

3. Tabs work better with Notepad

You might be saying, who uses “Notepad”? Well, Notepad here symbolizes the most basic of the text editors. These editors don’t convert a tab press to 4 spaces. Now, there might be a need where you have to quickly edit a code file. If the code has been indented by spaces and you are trying to add a few lines in the code, you will have to use 4 times spaces for each level of indentation.

If the code had been indented through tabs, well .. things could have been much faster and less frustrating.

I know this happens in a very rare case but let’s face it, we all have faced these situations many times in our career.

4. Code size with tabs indentation is lesser

Suppose you are using a 4-space indentation, then the total size of the file added by your indent chars will be 4 times more than using tab indents. Now, in a complex program indents can easily go up to 5 levels. Suppose average indent in a program is 3 levels and average code length (without indents) in a line is 50 chars and total lines is 100, then the file size we have with space indentation is 100 * (50 + 3*4) = 6200. With tab indentation, total file size is 100 * (50 + 3) = 5300. This is a saving of 17%.

Yes, obviously the real numbers for the industry would be different than this. But how much less can it be, 15%, 12%, 10%? Even if we are getting a saving on 10% in the code size, don’t you think it’s beneficial. And this comes at absolutely no cost.

5. Spaces Indentation takes more time to fix

Again, this is a very rare situation but because tabs = spaces has been established after point 2, this adds weight to the tabs category.

Let’s take a situation where you accidentally deleted some spaces (n s.t. n % 4 != 0) in the indentation. To fix this, you will have to add some tab spaces for the indentation blocks (n / 4) + (n % 4) spaces for the extra. This won’t be the case with tabs as you will only have to add the tabs that were deleted.

6. Spaces promote super-ugly & inefficient code style

class MyClass: 
    def myDescriptiveNameMethod(param_a # description for param_a 
                                param_b, # description for param_b
                                param_c): # description for param_c 

Yes, I have seen code examples like this in the wild. I know that you want to give comments to parameters and that’s why you are putting one parameter at a line but why this high degree of indentation. A better example using tabs would be –

class MyClass:
	def myDescriptiveNameMethod(
		param_a, # description for param_a
		param_b, # description for param_b
		param_c  # description for param_c

Yes, keeping param_a in a separate line could have been done using spaces as well but the point here is that because people use spaces for indentation, they are following a horrific code style like the first example.

So these are my pro-Tabs reasons. You might think some of them as BS but they are rational and you can’t disagree with that. The only pro-Space argument I see is the very first code example in this article. But for me, that doesn’t win against the stronger reasons we have for using tabs.

I hope this article will get programmers aware of why they should use tabs or spaces, whatever they feel like. I have tried to put together all points I have on tabs v/s spacesand I came to the decision that tabs are clearly better. This might not be the case with everyone. If this article triggered a change in your coding habit, do let me know in the comments. Also if you have a feedback about the article or would like to add to it, just throw in a comment.

That’s all for now. Thanks for taking time reading this blabbering 😀