Addons Hack @ KCG Maker Space

Web Extension Activity Feedback:

Link to the proposal: https://docs.google.com/document/d/104gpmlpohoLVKjMUAN9SM_Bf90wAiLJg5lxPJ_HDMQQ/edit?ts=58adde4d#

Audience Background:

10 Engineering Students from CS/IT Streams

  • 30% – 2nd year
  • 10% – 3rd year
  • 60% – 4th year

Day 1

WhatsApp Image 2017-07-29 at 13.14.08

Meeting 1 & Meeting 2:

  • Introduction to Web Extension
  • Brainstorm ideas
  • paper prototyping the ideas

 

First, we started with what is firefox addons, Why web extension? And I talked about E10S, Multi process architecture. Then we introduced Web Extension and asked the students to try out different addons from addons.mozilla.org.

After this, Everyone was divided into a group of 2 and asked them to think of a brilliant idea for building addons and they were asked to follow the Open Innovation Toolkit guidelines. All their ideas were recorded as issues in the below link:

https://github.com/mozillacampusclubs/teach-how-to-build-addons/issues/

 

Feedback 1: Students really loved prototyping their ideas on paper. Drawing out their ideas on charts and brainstorming, reiterating and gathering feedback on their ideas really worked out well. Everyone enjoyed this session.

But the Only concern is the placement of this Session. We should first introduce them to few API’s and what it can do. Once they experience by developing simple addon using these basic API’s. They will get an idea what an addon could do and what it couldn’t.

 

Why?

Everyone came up with a lot of ideas. The problem lies in the fact that, the students think it as some mobile app and the ideas they share are either complex to solve through web extension or totally non-feasible with our existing API’s.

This is because the students are only given the basic introduction of addons and they have no clue on the capability of it.
Feedback 2: We already have a firefox-addons/ideas repo here: https://github.com/firefox-addons/ideas where the community post their add-on ideas that they are about work on.

Is this repo needed? Redundancy!

https://github.com/mozillacampusclubs/teach-how-to-build-addons/issues/new

Suggestion: Let’s use the firefox-addons repo for idea submission. We shall ask the campus students participating in our activity to add a label on GitHub to identify that the ideas are from CC students.

Day 2:

photo_2017-07-31_16-34-21

Meeting 3:

 

  • Build & test your Web Extension

 

As we were not able to proceed with building the add-on based on the proposed ideas. The students were taught with simple API’s like new tab API, Alarm API, notification API etc and asked them to build a small add-on using them.

Feedback 1: First 2 meetings went really well as it didn’t involve any code. But once the meeting 3 was started, people really had no idea where & how to start. No clarity on how to proceed with building the addon.

Feedback 2: One more thing I observed that Not all Engineering students are expert with HTML, CSS, and javascript. In fact, this is introduced to students while they are in 3rd and in the final year.
Out of the 10 participants, only 4 knew the basics of javascript. The only good thing is that these people can be trained well. But for this to happen, There needs to be a change in the Activity Flow.

Suggested Activity Flow:

Day 1) Introduction to Web Extension.

Day 2) Introduction to Adoons API: Introduce 3-4 API’s and ask them to do a simple Web Extension using these API.

Day 3) Similar to the previous week, Introduce them to another 3-4 API’s.

Day 4) Brainstorm ideas & gather feedback on the ideas. Finally paper prototype the idea.

Day 5) Build & test your Web Extension.

 

Addons School: This is Similar to web VR School, Addons School is a teaching kit which explains about at least 8-10 simple APIs and a sample add-ons developed using these API’s. Viswaprasath and I are already working on this course kit and we have started testing it out in the name of Weeks of Contribution program in Mozilla Tamilnadu Community. In this program, Every week we introduce the students to 3-4 new API’s and teach them to build a simple add-ons using them. By the end of these sessions, Students will know what are the API’s available and use these to build on their ideas.

I have shared an activity format for Web Extension which we are following in our community as a part of Weeks of contribution program:

All Credits to Viswaprasath for framing the agenda which is available in the below link: 

https://docs.google.com/spreadsheets/d/1k6EPcQC8Bc9snt3yuSH14BQwrKhtpkAdjLCtM9zXhB8/edit#gid=0

 

How will this help the rest of the people (6/10 in my Case Study) who doesn’t know the basics of HTML, CSS, JS?

This is, in fact, a challenging part. But, Introducing them to API’s and asking them to build simple add-on will help them to learn what actions each JS code does. So they can use it in their own ideas. This will motivate them to develop addon as well.

 

My First Talk in ILUGC Meetup

Feb 11, 2017(Sunday)

ILUGC( Indian Linux Users Group Chennai) is one of the oldest community in Tech Chennai and running for past 10 years actively. My intention to attend this meetup was to meet one of the amazing open source community contributor Shrinivasan who has always been a source of inspiration to many, To know more about his contribution. Please do check out his blog goinggnu.

IMG_9407.JPG

Indian Linux Users Group, Chennai community meets every month on second Saturday at Aerospace Engineering Block, IIT Madras.

Speaker 1:

Ajay started with Various open source licenses available and explored their pros and cons. Explained how the Open Core business model is helping many companies to do their business by open sourcing the core of their software and releasing the other components as proprietary software.

 

IMG_9393See the slides here

http://slides.com/danatic/licensing#/

Speaker 2:

Then, Viswaprasath, Mozilla Rep explained about Firefox’s new web extensions API. Now we can builcross-browserer extensions using simple HTML/JavaScript/CSS stack. No need to play around with XUL. He explained the architecture of a simple plugin he developed.

 

IMG_9420.JPG

Few links to explore on this

http://thehackernews.com/2015/08/mozilla-firefox-web-extensions.html

https://developer.mozilla.org/en-US/Add-ons/WebExtensions

https://wiki.mozilla.org/WebExtensions

https://hacks.mozilla.org/2015/09/lets_write_a_webextension/

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension

Speaker 3:

Then, I started off my talk on webVR- Virtual reality through browser. I explained about the WebVR API, Aframe Framework, how one can create 3d worlds that can be viewed on browser itself, Sample demo using Aframe. Entity component system. How to compose your own component and use it to your entity.

A-frame is a Javascript framework on top of threejs.

IMG_9423.JPG

IMG_9433

Few links

https://aframe.io/

https://aframe.io/docs/0.5.0/introduction/

https://aframe.io/aframe-presentation-kit/

Then, I explained how the mozilla Tamilnadu community is working to spread Free/Open Software in colleges and organizations.

Join the awesome community to learn and contribute for free software.

https://mozillatn.github.io/

https://www.facebook.com/MozillaTN

https://web.telegram.org/#/im?p=@mozillatnc

Speaker 4:

Finally, Srinivasan gave a lightning talk on few projects ideas that has to be worked out. A firefox plugin to help proofreading tamil wikisource, flipboard alternate in tamil, epub cleaning for FreeTamilEbooks.com, Download report for wikisource ebooks, web application for OCR4WikiSource, Translating city/street names in Tamil for building maps in Tamil.

Then in evening myself and Viswa had chance to talk with Sayaji -Club Lead of KCG, Chennai. He is planning for a 24 hour hackathon in his college. Then We went and met some of the contributors of WOC who contributed along with Survesh. It was an amazing day in Chennai after a very long time.

Want to know when next meet happens? Join the ILUGC mailing list at https://www.freelists.org/list/ilugc

Link to photo Album

https://goo.gl/photos/T3TSFw6vfcMFfwyN8

Mozilla Meet at SRM University-SRMKZilla

About SRMKzilla

SRMKzilla is one of the active clubs and has been hosting several events/workshops/sessions at their campus internally. Previously the Club was handled by Rohith. As they graduated, the club responsibilities are now taken over by their juniors. It is, in fact, a smooth transitioning, with all the club responsibilities handed over to their successors. Most of the members are actively participating in the club events, from my knowledge It is one of the well-organized club in Tamilnadu.

It was my first visit to the SRM University Mozilla Campus Club Event, though I had been previously mentoring the leads through online. Shikar Singh invited me and Viswaprasath for an informal meet and Onboarding Session for the New Club Members who had joined this year.

The session was expected to start at 2:00 PM. Due to a delay in travel, We started around 2:30 PM. Viswa started off by sharing about different pathways, students can contribute to Mozilla Community. Why one should contribute to Open source project and how it will help them in their career.

Some of the Suggested areas

  • MDN
  • Rust
  • WebVR
  • L10N
  • WebCompat
  • Add-ons

Why Should one contribute to community

  • Passion.
  • Gain exposure to Real world Problems.
  • Learn and Network with Amazing people.

After sharing his thoughts about open source communities for an hour, I started off with WebVR Session. I shared few demos using Aframe which attracted a lot of students and made them get involve so actively. Almost all were excited to try out Aframe framework. Many pinged me on telegram after the session with their queries and few showed me a demo they had made.

C5gNq6TUsAAMktL.jpg

I feel this is one of the best short session I had. Some of the students were really interested to contribute, they followed back in Telegram and through Email. Some are interested in Analytics projects and many wanted to get started with it. With proper guidance, We can assure that this club will make great contribution to Mozilla in the future.

After the session, We had a personal meet with the Club Office Bearers and discussed regarding the big event they are planning in the month of April.

Open Source Hack at KCG College of Technology

Last year, I had the privilege to inaugurate the Mozilla Campus Club at KCG College of Technology, Chennai. @Sayaji Shikar was the Club lead there. The club had hosted several internal workshops/sessions in their campus.

A month ago, I met @Sayaji Shikar during the ILUGC(Indian Linux Users Group, Chennai) Meet at IIT Madras where I had come to deliver a talk on WebVR. We discussed on hosting an inter-college 24hour hackathon at KCG college.

We decided to have 3 parallel sessions.

  1. WebVR- karthickeyan(me)
  2. WebExtension Development(Viswaprasath)
  3. Localization(khaleel Jageer)

Me and 2 reps from Chennai( Viswa and Khaleel) joined us for hosting a 24hour hackathon. Sayaji and his team took care of all arrangements, logistics etc. His college management was very supportive of this initiative.

This was the very first time in Chennai. A college is supporting a 24hour inter college hackathon within the campus. Everyone was excited about the event.

March 18th, Saturday:

I reached the college campus at around 10:00AM where I was welcomed by the club office bearers and the college management.After the formal speech by the principal, Vice-principal, HOD of CSE Department. I gave a welcome address. later, we split ourselves into respective breakout sessions.

  • WebVR Session had 40 Participants
  • WebExtension Session had 30 participants
  • Localization Session had 9 participants

WebVR Session:

The Audience were mostly from 2nd year and remaining were from 3rd year.

I started with my own way of story telling. My experience in FOSS projects. How I started to contribute to FOSS.

WhatsApp Image 2017-03-19 at 21.10.52

Event flow:

  • Introduction to FOSS Philosophy & Mozilla.
  • Various Contribution areas of Mozilla.
  • Lunch ( 1:00PM- 2:00PM )
  • Introduction to WebVR and Aframe
  • Why WebVR? Applications of WebVR
  • How to Develop a simple WebVR Scene using Aframe
  • Entity component System.
  • How to write your own component
  • Javascript Best Practices
  • Simple Demo Scene using interesting components
  • Introduction to Github (At the end of the hackathon, students will be uploading their makes on GitHub. and hence Github was introduced)

This went until 7:00 AM. We then dispersed for Dinner.

Around 8:00 PM we all set to work on our projects.

The participants were split into 3 in each team. We had a total of 13 teams.

The theme of the hackathon was Festivals of India. Each team was asked to pick one festival and create a webVR scene with at least 5 pages.

33436876221_35ec2132fd_o.jpgI was mentoring around the teams and providing feedback, ideas and technical support. I was able to mentor them until 3:00 PM, Later I took a nap. But, The participants were tirelessly working on their project all through the night.

March 19th, Sunday

I woke up at 6:00 AM and I could find everyone busy in working on their project. Few had interesting technical queries. I had to sit with them to find out solutions.

33565673255_fcbe04247b_o.jpgBy around 9:00 AM. HOD of CSE Dept has come over to see how well the hackathon is going on. We had a thoughtful talk on various issues students face in learning new technologies, programming languages. HOD of CSE Dept had assured us to provide us a maker space at Guindy to be utilized for any knowledge sharing sessions.

Later, We started to judge the team makes. We asked each team to demo their makes.Everyone tried out their best to put up a great trade show. One of the makes really fascinated me and that team was declared as the winner of the WebVR hackathon.

Similarly, WebExtension Localization Sessions had top performers as winners.

Signing the certificates:

WhatsApp Image 2017-03-19 at 21.10.57

Around 11:00 AM, The Entire participants, HOD of CSE dept, staff coordinators gathered up at the Auditorium. We distributed Prizes to the Winners and distributed consolation certificates to all the participants. At the end, I spoke about Mozilla Tamilnadu Community and how the contribution could be taken further.

 

33525055166_7cde9f4a9e_o.jpgAfter the Vote of thanks, we took a group pic and left for the day.

LINK TO THE PROJECTS 

LINK TO THE FLICKR PHOTO ALBUM

Campus Clubs Reports 2016

2016 had been a great year for Mozilla with a lot of new goals, transitioning of FSA into Campus Clubs, Lot of improvements in the Community.

mozilla.jpg

Campus Clubs transitioning was a challenging process for the FSA team. With the new goals in mind, Bringing the best out of the community, streamlined communication, proper recognition, focussing on Quality over quantity, devising a  protocol was a huge task.

Here are the list of Mozilla Campus clubs inaugurated in 2016

Amrita University, Coimbatore

IIIT D& M College, Chennai

Bannari Amman Institute of Technology, Sathyamangalam

SNS college of Technology, Coimbatore

Sri Krishna College of Technology, Coimbatore

KCG College of Technology, Chennai

Metrics for 2016:

  • Total Number of Online Events Conducted – 13
  • Total Number of Offline Events Conducted – 26
  • Number of Active Contributors – 12
  • Number of New Contributors joined in 2016- 68

 

 

Campus Club Inauguration and MozActivate Campaign at Bannari Amman Institute of Technology

Date: 15th October 2016

Location: Bannari Amman Institute of Technology, Sathyamangalam
Time: 1: 30 pm to  6 :30 Pm
Audience:
65 Students from 2nd & 3rd year of CSE Department
Event Flow:
  • Started with Campus Club Inauguration ceremony
  • Talk about the FOSS philosophy
  • Introduction to Mozilla
  • Areas of Contribution
  • What is Mozilla Campus Club? How to be a part of it? Structure of Campus Club & Recognition Opportunities.
  • Intro to Github, Participants signed up on Github and registered to Hacktoberfest.
  • Q & Session
  • Networking Lunch
  • Test Pilot Installation (On 65 Systems) and Feedbacks were given.
  • E10S Sprint With at least 3 Addons tested by each Student.
  • WebVR Introduction and a sample demo using Codepen.
  • Event Summary
  • Q& A Session
  • Vote of thanks
  • Private Meeting with the Club Members and Executives
Metrics:
65 test pilot installation, Feedbacks were given by all the students
200+ Addons tested for E10S Sprint
Mozilla Campus Club Officially Registered.
Few glimpse of the event:
bit-5
 bit-1bit-2bit-3
bit-4
bit-6
 photo_2016-10-25_19-02-54.jpg

Seminar on MLN at IIITDM techfest Samgatha 16

There are mozillans all around us who share great enthusiasm and love towards Mozilla programs and communities, one such person is @praneeth who was an volunteer at  maker fest at last year organized by @Shreyas.

He really got inspired and wanted to do something of that type at his ecosystem ( his college which is IIITDM )

Kudos @praneeth, thanks for having us and good hospitality.

After all the discussion on planning the logistics, event branding and planning agenda we came up with a solid event which included,

Everything about Mozilla Learning Network : web privacy, literacy, tools.
FSA program, connected devices and definitely the gyan (knowledge) about Mozilla community and contributions pathways.

So it was myself and @Vigneswer who were there to enlighten the bright minds at IIITDM.

Relevant links:

http://www.samgatha.org/sponsors.php

https://reps.mozilla.org/e/makers-fair-samgathan-2016/

We (Mozilla Tamil Nadu) was listed as official maker faire partner of their event.

photo_2016-03-26_19-59-49photo_2016-03-26_19-59-51

Just before few days of the event takebacktheweb campaign was out, we decided that it was an ideal place for us to go ahead and spread the word.

photo_2016-03-26_18-47-26.jpg

We have taken a great video mentioning the campaign name, this was suggested by students over there who understood this is an very potential area of contribution and involvement.

Many of them were interested in becoming FSA’s, campus leaders and take ahead the program.

photo_2016-04-16_12-18-10

The college was really good, they had a brilliant infrastructure and all facilities.

So I kick started the event  by briefly explaining about Mozilla , contribution path ways and FSA program, followed by Vignesh who showed demos of webmaker tools, web privacy terminologies, light beam demo , ppt of take back the web campaign (shared by @lucy) and few concepts and design thinking in connected devices domain.

photo_2016-03-30_22-06-48

photo_2016-04-16_12-23-24.jpg

We had around 50 + students attending the event.

We will soon be there back to inaugurate the club at their college.

Looking forward for the same.

Special mentions to @vishwaprasath and @shreyas for helping plan the event

Link to video on YouTube (will update them once I get it from the organizers)

Links to all the picture at Flickr (will update them once I get it from the organizers)

 

Read Vigneshwer’s Blogpost here: Click Me