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.

Agenda:-

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 (aframe.io), I requested attendees to have a view over A-Frame documentation but later explained it.

I 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.

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_version, name, 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 :).

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.