Webmaking with Mozilla at XIE, Mumbai

‘Webmaking with Mozilla’ – a Webmaker Workshop was conducted by me at Xavier’s Institute of Engineering, a prominent educational institute in Southern Mumbai, on Saturday, August 8, 2015.

Me with the Participants

The workshop saw a whooping participation of around 80 students, in spite of Saturday being a holiday for the institute. Most of the students were freshmen and were keen on learning about Open Source and the Web. The participants began filling in around 9:30am, and by 10:00am, we had a full house.

My Presentation during the Workshop

I started the workshop with a presentation introducing the concept of Free and Open Source Software to the students. I talked about the history of FOSS and the inception of Mozilla. Having briefed the students about Mozilla and its mission, I also touched upon the various Mozilla projects. Further I introduced the students to the Webmaker project and its tools –  Thimble, X-Ray Goggles, Popcorn Maker and Appmaker.

A Group working with Thimble

The presentation was followed by the hands-on session starting with Thimble, followed by other Webmaker tools. Due to a limited number of laptops being available, groups of 10-12 students were formed, with each group working on a laptop.

Students during the Workshop

Giving the students ample amount of time to explore each tool, I introduced all the 4 tools, one after another. The students, enthusiastically explored the tools and came up with some really cool makes by the end of the workshop.

Me with a group of students

I maintained a etherpad page for the event to keep track of all the makes, during the workshop.

The following are the makes that the students came up with, during the workshop:

Thimble Makes:

  1. https://jadhavdevendra7.makes.org/thimble/OTk3NTg5NTA0/meme-maker
  2. https://shreedhar14.makes.org/thimble/MTA2NDY5ODM2OA==/tdkr
  3. https://sabihmomin.makes.org/thimble/MTA0NzkyMTE1Mg==/sabih-momin
  4. https://chinmay7.makes.org/thimble/MTA5ODI1MjgwMA==/maker-party-event-reporter
  5. https://grw007.makes.org/thimble/MTIxNTY5MzMxMg==/para-para-animation-teaching-kit
  6. https://venom69.makes.org/thimble/MTExNTAzMDAxNg==/venom69
  7. https://dj44.makes.org/thimble/LTE3NzA2NTExMzY=/uttarakhand-himalayan-tragedy

X-Ray Goggles Makes:

  1. http://akki-0202.makes.org/goggles/akki0202s-remix-of-google
  2. http://venom69.makes.org/goggles/venom69s-remix-of-tushar-adivarekar
  3. http://akki-0202.makes.org/goggles/akki0202s-remix-of-google-2
  4. http://sabihmomin.makes.org/goggles/sabihmomins-remix-of-google
  5. http://chinmay7.makes.org/goggles/chinmay7s-remix-of-home
  6. http://hacksmasher.makes.org/goggles/hacksmashers-remix-of-apple-iphone-6-plus-128gb-summary-of-13-expert-reviews-from-across-the-web-alternatives-phonecurry-india
  7. http://hacksmasher.makes.org/goggles/hacksmashers-remix-of-meizu-m2-note-16gb-summary-of-2-expert-reviews-from-across-the-web-alternatives-phonecurry-india

Popcorn Maker Makes:

  1. https://chinmay7.makes.org/popcorn/36mp

Appmaker App Makes:

  1. https://stimulating-yam-642.webmak.es/app
  2. https://scarce-wax-532.webmak.es/app
  3. https://adaptable-lunch-877.webmak.es/app

Students during the Workshop

I held pop quizzes throughout the workshop, awarding the participants with Mozilla buttons, lanyards and wristbands. After having worked with all the tools, I took a quick poll from the students on the tool they found most interesting. The popular opinion was X-Ray Goggles. At the end of the workshop, we had a group picture as a remembrance of this wonderful event.

Students enjoying Webmaking

I would like to thank Krishna Rohila, the Chairperson of Computer Society of India Student Chapter – XIE branch and his entire team, for helping me, during the course of the workshop. It was a great experience for me teaching webmaking to the students. Hoping to conduct more such events in the future!

Advertisements

MozCoffee Mumbai

This report on MozCoffee Mumbai has been long overdue. Apologies for the delay in posting it, I have been super busy lately and have finally managed to find some time to jot down this report.

MozCoffee

MozCoffee Mumbai, March 1, 2015, CCD Powai

MozCoffee Mumbai was held on Sunday, March 1, 2015 at CCD Powai. The attendees were:

  1. Abhishek Potnis
  2. Akshat Kedia
  3. Amod Narvekar
  4. Brajesh Ajawani
  5. Dinesh Patil
  6. Manish Goregaonkar

Brajesh and Dinesh were the newly inducted Mozillians who were keenly interested in knowing and discussing the ongoings in the Mozilla Mumbai Community.

The MozCoffee started around 10:30am, we started by introducing ourselves and the areas in which we have been contributing to Mozilla, to the new comers – Brajesh and Dinesh. Brajesh and Dinesh are my classmates at IIT Bombay and were interested in knowing about Mozilla, its mission and the ways in which one can contribute to Mozilla.

We discussed about the different ways to start contributing to Mozilla – Coding, Testing, Writing, Teaching, Helping and Localizing.  After acquainting the newcomers to Mozilla, we started by discussing about the future Mozilla events that we could have in Mumbai. Since GSoC was round the corner then, we discussed on having a GSoC Awareness Event. Manish mentioned that he would be having such an event for the students of IITB, and would be speaking about his experience doing a GSoC with Mozilla, last summer. We discussed on having FxOS App Days and BootCamps, since the response to the last Mozilla Codebase Bootcamp at Directi, organized by Amod, had been overwhelming. Amod mentioned that many attendees of the Mozilla Codebase Bootcamp, had continued fixing bugs for Mozilla, even after the event.

Discussing on code contributions to Mozilla from Mumbai, it was noted that code contributing to Testing lacked representation from Mumbai. There was also a discussion on ways to promote Contributing to MDN. Since contributors to MDN, have to be developers(to author/correct tech-articles), there was a discussion on mentioning Contributing to MDN, at BootCamps. It was also noted that FSA’s from Mumbai were inactive, and under represented, and the need to have a strong healthy FSA ecosystem was felt.

In conclusion, we decided to concentrate on having more events to promote the FSA Program, WoMoz, Testing and Localization, besides having Code-Base BootCamps. We also discussed and decided to have a MozCoffee, at least once every month, to ensure a healthier interaction amongst the Mozillians in Mumbai. It was also decided to have more number of interested people for the upcoming MozCoffees, to acquaint them to Mozilla and its mission of keeping the web open and in the hands of the people. A Mozilla event is incomplete without some cool and awesome swag, we distributed Firefox stickers to all the attendees at the MozCoffee.

I would like to thank all the attendees for attending the MozCoffee, keeping forth their views and contributing to the discussions, thus making the MozCoffee productive.

MozCoffee Mumbai

MozCoffee Mumbai was held on July 6, 2014 at 11:00am at the Cafe Coffee Day, Powai. The meetup primarily focused on planning introductory Mozilla events in  Colleges and promoting Firefox OS in Mumbai, keeping in view its forthcoming launch in India.

Introduction and Helping New Contributors

The MozCoffee started with everyone introducing themselves. I was happy to see that there were 3 new faces – new aspiring contributors. We started with helping them understand about Mozilla’s mission and how they could contribute to Mozilla, keeping in mind their skill-set.

Modularized Event Format

We discussed and put together an Event Format consisting of modules, which could later be compiled depending on the requirement and target-audience at the event.

Introductory Event: 
1. Introductory Talk on Mozilla [30 mins]
2. Introductory Talk on FirefoxOS [20 mins]
3. Introductory Talk on various Mozilla Projects [20 mins]
    a. Rust
    b. Webmaker
    c. Lightbeam
    d. Firefox
    e. HTML5 Game Dev
4. Introductory Talk on getting involved with Open Source. [30 mins]
Webmaker / Appmaker Party:
1. Introductions and Favorite App [15 mins]
2. Spectrogram [30 mins] 
3. User Centered Design (Paper Prototyping) [45 mins]
4. Appmaker Introduction and Tinkering [45 mins]
5. Webmaker Introduction and Tinkering [45 mins]
6. Teach Each Other [20 mins]
Events at Schools:
1. Scratch Days
2. Introduction to Computers and Internet
3. Webmaker/Appmaker
*Special Thanks to Akshat Kedia for typing in the Event Format at the MozCoffee.

 

On-boarder –  On-boardee Model for On-boarding New Contributors

I had this idea at MozCamp India, about having the mentor-mentee model in our local community, for on-boarding new contributors. We discussed on it and decided on having a GDocs Form for new contributors in Mumbai. We would review the responses and assign one person from the Mozilla Mumbai Community(according to the functional area required)as a Mentor for each new contributor registered through the GDocs Form.

Google Group for Mozilla Mumbai Community

We decided on having a Google Group for the Mozilla Mumbai Community. It would help new contributors to reach out to us. That way, we would be able to keep track of them and also answer their queries effectively. It would also help in having a transparent, stream-lined and well-documented way of formally discussing Mozilla Mumbai activities.

Google Group: https://groups.google.com/forum/#!aboutgroup/mozillamumbai

Challenges faced by new Code Contributors

We discussed on the various challenges that a new code contributor faces while contributing to Mozilla and how they can be dealt with. Having the Google Group, would help the new code contributors to have their queries resolved. Also having a on-boarder/mentor for each new code contributor would ensure that the contributor does not lose interest due to the problems(for eg. in setting up the dev-env.) faced by him/her.

WoMoz and Targeting Non-Engineering Colleges

We discussed on the possible reasons for the low number of female students in Contributing to Mozilla in Mumbai. We came to the conclusion, that instead of heavily targeting engineering colleges which generally has less number of girl students, also target non-engineering colleges like Fashion, Design, Journalism and also women’s colleges in Mumbai.

Firefox Student Ambassador Program

We discussed on possible reasons of the low awareness of the FSA Program, among the students in Mumbai. For this, we agreed on having more introductory Mozilla events in colleges and educating the students about the FSA program.

Introductory Mozilla Events in Colleges in Mumbai

We discussed and decided to distribute the task of collecting contact details of the Principal’s of different colleges, among ourselves. We have decided Thursday, July 11, 2014 as the deadline for this task. By Friday, July 12, 2014, the Mozilla Reps in the Mumbai Community would be e-mailing the principals, expressing interest to conduct an introductory Mozilla event at their respective colleges by July end or August first week.

We wrapped up the MozCoffee around 2:15pm. It was indeed a productive meetup, having discussed the above mentioned points. Looking forward to having more of such MozCoffees in Mumbai !

Firefox OS Hackathon @ IIT Bombay

The Firefox OS Hackathon at IIT Bombay was my first Hackathon as a Mozilla Rep and it turned out to be a great one !  Despite the fact that the Hackathon was planned only about 20 days in advance, it was very well thought through and organized. Hats off to the Organizing Team headed by Santosh Shingare, overseen by Mr. Rahul Deshmukh of the CDEEP Dept. at IIT Bombay ! A great job indeed !

Frédéric Harper, Sr. Technical Evangelist at Mozilla had extended his stay in India, to deliver the Keynote at this Hackathon. This came as a happy surprise, both for the participants as well as the Mozilla India Community.

Firefox OS Stand-in

Firefox OS Stand-in [Pic. Courtesy: Sumantro Mukherjee]

The many stand-ins’ donning Firefox OS’s Logo along with the orange and blue balloons created the necessary ambiance for a Mozilla event and made Mozilla’s presence felt at the venue. The interns, who were students from different engineering colleges in India, were the participants at the Hackathon. They were a super-charged lot indeed, full of enthusiasm for the Hackathon.

Frédéric introducing Firefox OS

Frédéric introducing Firefox OS [Pic. Courtesy: Sumantro Mukherkjee]

The Hackathon started with Frédéric giving a talk on Firefox OS followed by a brief overview of Open Web Apps, Web API’s and Web Activities. This was followed by a talk on using the newly landed Web IDE by Kaustav Das Modak. Soumya Deb talked about using the Firefox Developer Tools for app development. Jai Pradeesh ended the talks session with his talk on using PhoneGap and Cordava Frameworks to develop apps for Firefox OS.

After the talks, the participants were grouped into teams and alloted tables to work on. The Hackathon was planned to be held over the 2 days – 25 June 2014 from 2pm – 9pm and 26 June 2014 from 8:30am – 4:30pm. But the Day 1 of the Hackathon saw many participants hang out even after the official closing time of 9pm. A few participants stayed behind till as late as 12am. Such was the enthusiasm and dedication of the participants towards the Hackathon.

Participants busy working on their apps

Participants busy working on their apps [Pic. Courtesy: Sumantro Mukherjee]

The Day 2 of the Hackathon started in the morning, with the participants busy working on their apps. The Mozilla India Team had set up a Scrollback.io channel for the hackathon, so that the participants could easily post their queries with their table number, and some one from the Mozilla India Team could help them out personally. I strolled around from table to table interacting with the participants, talking about their app ideas, and I must say, the participants had really worked hard to get their ideas implemented irrespective of the hurdles they faced, within the stipulated time window.

Some of the apps, that I was very impressed with were Wireless Touch Pad – which used the Firefox OS Phone as the touchpad to control the cursor on the Desktop, WikiSpeak – which used a Text to Speech API to read out information of the keyword queried and Mumbai Indicator – which displayed the Mumbai Railway Trains information in a simplified user-friendly manner.

Me and Amod working on an app

Me and Amod working on an app [Pic. Courtesy: Sumantro Mukherjee]

Some of the app ideas that I found interesting were Keystroke based authentication app –  which not only authenticated based on the key-codes of the keys pressed but also on the basis of the time a particular key is pressed and also the time interval between key presses; and the Notification Aggregator – an app that aggregated all notifications at one place including the social networking websites and even e-mails.

On the second day of the Hackathon, post lunch, Jai Pradeesh, who himself is a Marketplace App Reviewer, gave a session on CSP Validation of Apps and Submitting Apps to the Mozilla Marketplace. This was followed by the demonstration of apps by the participants. The top two teams were awarded prizes. Then there was the Q&A session for the participants to ask their queries to the Mozilla India Team. This was followed by the Vote of Thanks by Santosh, which officially marked the end of the Hackathon.

Then there was the group photo of all the participants, the organizers and the Mozilla India Team across the Firefox OS Stand-in. There was also a Sign Board – where all attendees were asked to sign as a reminder of this Firefox OS Hackathon.

The Hackathon was fruitful indeed with all the participants coming up with some really innovative and cool apps. The Hackathon, thus successfully helped promote Mozilla’s mission and create awareness and interest about Firefox OS among these students, from different parts of India. This eventually would lead to spreading of the Mozilla’s mission to a much larger audience in India.

I, personally got a lot to learn and experience during the Hackathon. Organizing an event by compartmentalizing the responsibilities among the team, speaking effectively at such a developer focused event and participating with commitment and dedication (as shown by the participants) were my key takeaways from this event !

Lastly, I would like to thank the Organizing Team from IIT Bombay and my friends from the Mozilla India Community, whose efforts made this event a grand success!

Experience The Change with Mozilla Firefox 29

Project Australis – A redesign of the Firefox User Interface has finally found itself being shipped with the latest stable release of Mozilla Firefox. Yes, you read it right ! Mozilla Firefox 29, now sports a brand new look, with some cool UI changes. The smoothly curved aerodynamic tabs and the minimalist customizable menu promise a mesmerizing user experience.

Australis UI Overview

Australis UI Overview

Existing Firefox users can simply update their Firefox to version 29, to experience this brand new look.  Update your Firefox by following these simple steps:

  1. Press Alt, you will the see Menu Bar at the top.
  2. Click on Help
  3. Click on About Firefox
  4. Click on Update to update your Firefox

If you do not already have Firefox installed and wish to be a part of this new experience, then you may download the latest version of Mozilla Firefox from here.

An interactive tour is displayed on the first start to users who upgrade to Firefox 29 which aims to highlight the major changes of the new interface to users, to make adaption easier.

So Whats New in the User Interface?

Firefox Tour

Take the Firefox Tour

The Smooth and Curvy Aerodynamic Tabs

New curvy tab shape. Background tab in cursor-hover state.

New curvy tab shape. Background tab in cursor-hover state.

The smooth and curvy tabs are not very to easy to miss, if you have been a Firefox user. The currently selected foreground tab and other background tabs have been visually distinguished by de-emphasizing the background tabs. This makes it quick and easy to see which tab is currently selected. Hovering over a background tab, brings it into focus, so you can clearly see where you’re heading.

The Streamlined, Simplified and Intelligent Default Toolbar

Left to right: forward button, download progress indication, bookmarks list.

Left to right: forward button, download progress indication, bookmarks list.

The tabs sit higher in the titlebar, streamlined, thus saving screen space for web pages. The default toolbar has been designed intelligently, keeping simplicity as well as aesthetics in perspective.  The forward button only appears when there’s somewhere to go forward to, and the download button shows progress when that’s relevant and hides otherwise.  This is a lot better than having to see the disabled forward and back button. Another button that will surely catch the eye is the one-click bookmarking button paired with a button to get at those bookmarks. Clicking on the bookmark star makes it jump and bounce into the bookmark list button. Cool ! isn’t it?

 The Handy  Menu

New Menu in Firefox

New Menu in Firefox

Convenient placement of features like Zoom, Cut, Copy, Paste and Print in the menu and their iconic representation makes them easy to recognize and click on. The bigger icons with more generous spacing also make this menu more touch-friendly for touchscreen laptops.

Easy to Use Customization

The New Customization Page

The New Customization Page

The new intuitive customization page allows users to prioritize functions in the menu, toolbar, and tab bar by simply dragging them to the desired position. There are some constraints to customization of the interface, so that users can’t accidentally remove the address bar or the menu button and make Firefox unusable. The customization interface also allows adding and moving add-ons between toolbar and the new menu, which gives users the ability to have exactly the right set of features, built-in or added-on, in the same places in the interface, thus making Firefox, the most customizable web browser so far !

For the Impatient

Can’t wait to get you your hands on this new look of Firefox? Good News ! There’s an interactive mock-up of the User Interface. Click Here and Enjoy !

So What else is new other than the cool User Interface?

General User Changes:

  • The Ability to set up Firefox Sync by creating a Firefox account
  • Malay [ma] Locale added

Developer Changes:

  • Gamepad API finalized and enabled
  • navigator.plugins is no longer enumerable, for user privacy. This means that it is no longer possible to enumerate the nagivator.plugins array and compare it with plugin names to get a full listing of all installed plugins.
  • The add-on bar has been removed. It can no longer be a target for extension icons.
  • Clicking on a W3C Web Notification will switch to the originating tab.
  • Australis Toolbar changes
  • Australis CustomizableUI
  • SharedWorker enabled by default (JavaScript Shared Web Workers in HTML5)
  • Promises enabled by default.
  • <input type=”number”> implemented and enabled.
  • <input type=”color”> implemented and enabled.
  • ‘box-sizing’ (dropping the -moz- prefix) implemented.
  • Enabled ECMAScript Internationalization API
  • Console object available in Web Workers
  • Web console improvements such as arrays shown inline now.
  • Network Monitor shows pie chart performance statistics.
  • CSS source map now supported by Style Editor.
  • Auto-completion of CSS properties and styles in Style Editor.

Additional information / sources

 References

Bug Squashing for Mozilla Firefox

“Bug Squashing for Mozilla Firefox @ VCET” was conducted on April 3, 2014 at Vidyavardhini’s College of Engineering and Technology. I had given a talk on “Introduction to FOSS and Mozilla” the earlier day, at the same venue. Once again, I would like to thank the CSI Student Chapter of the college for helping me conduct the event !

Unfortunately, the time of the event coincided with the Prize Distribution Ceremony of the Cultural Festival of the College, due to which the number of students attending the event was not huge. But still, a few interested students turned up. I gave the talk on “Contributing to Mozilla Code Base”. I started with discussing with the students about the advantages of contributing to an Open Source Project like Mozilla. I talked about Setting Up the Environment for Firefox Development. I explained to the students, the process of development by submitting code-patches on Bugzilla. For making the students understand the process easily, I explained them a bug that I had fixed, by showing them the comments and the patch attachments on Bugzilla. I also introduced to them Bugs Ahoy developed by Josh Matthews to find mentored bugs and get started on Bug Fixing. I also talked about obtaining the Level 1 Commit Access to the Mozilla Try Server.

At the beginning of my talk, the students noticed the User Interface of the Firefox Beta (which I was using), with the curved tabs and inquired about it, I explained to them about Australis, and they were very much impressed with the new UI changes.

ImageAfter my talk, students and I had a informal discussion about starting a Firefox Club in the college, many seemed interested. One of the students, Fasih Khatib had already registered for the Firefox Student Ambassador Program, but was unaware on how to proceed, I advised him on asking a few more interested students to join the FSA Program, to start a Firefox Club and to conduct in-campus Mozilla events. All in all, it was a fruitful event and the attendees enjoyed a lot !

The slides of my talk can be found here.

Introduction to Mozilla @ VCET

Image

“Introduction to Mozilla @ VCET” was conducted on April 2, 2014 at Vidyavardhini’s College of Engineering and Technology, Vasai. It was my first event as an organizer and I am glad that the event went smoothly without any glitches !

ImageThe CSI Student Chapter of the College helped me conduct the event, and I am very grateful to the Team ! The students turned up in large numbers for the event, and listened to my talk patiently, with great interest !

ImageI talked about FOSS and Mozilla, introducing the students to the world and Free and Open Source Software. I talked about Mozilla’s Mission to keep the open web safe and in the hands of the people, using it. I also talked about Mozilla’s efforts on encouraging Openness, Innovation and Opportunity on the web. I made the audience aware about the different projects, Mozilla has been working on. The students were curious and enthusiastic, particularly about Mozilla’s Research Projects. I also introduced to the students, the Firefox Student Ambassador Program, many students seemed interested in join the Program.

For me, the happiest moment was when some students waited (after my talk) to talk to me, about getting involved with Mozilla. I gladly advised them on the same. After my talk, the Awesome Mozilla Swag was distributed among the students. They were very happy to receive the cool Firefox Round Stickers and Buttons !

A couple of days before this event, I was asked by the H.O.D of the Information Technology Dept. of the College to also deliver a talk on “Contributing to Mozilla Codebase”, I gladly agreed and decided to schedule the talk, the next day, after this event.

I would like to thank Faisal Aziz, who lent me the Mozilla Firefox Vertical Banner, which was really helpful in making the Mozilla Presence felt in the College.

The slides for my talk can be found here.