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!


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


Now Host HTML Web Pages on Google Drive

Hi Friends, I am writing after quite some time now! I recently stumbled upon this news(have also tested it) and decided to blog about it! So here goes….

Now you can host your HTML web pages on Google Drive, yes you read it right! Google Drive that allowed storage and editing of documents and files now also supports hosting of HTML pages.

As a proof of concept, Google has itself hosted the instructions (to host HTML pages) in an HTML page on Google Drive itself. You can find it here:


I will not repeat those steps again here, as it will be unnecessarily redundant. You can visit the above link and follow the steps, but there is some thing that I would like to add and I am sure, you will like it!

The link of the hosted page looks a bit ugly with the large hash as the folder name, but there is a way to make it look a little aesthetic.

You can use this: http://gdriv.es/

Note: Unlike other link shorteners like Bit.ly or Goo.gl, GDrives masks the folder ID, so visitors always see your alias.

Here you have to enter the folder id (the ugly hash) and think of some unique but human readable name for the folder and you are done. This will not only make your link more human readable but also make it short.

Mind you, the link provided for making the URL look aesthetic (GDrives) is not related to Google, but its service is what matters to us.

So thats all folks, hope you enjoyed it. Thanks for reading! Have a great day ahead!

IndexedDB – Concept Simplified.

Greetings All! In my previous post I had blogged about Working with IndexedDB, but then I had only scratched the surface, so now lets dive in IndexedDB concept !

So first things first, IndexedDB as the name suggests uses indices to store and retrieve objects in a database. It is an API for storage of structured data at the the client side. IndexedDB provides separate API’s for Asynchronous access and Synchronous access.

The Synchronous API is intended for use only inside Web Workers. and has not yet been implemented by the major browsers. The Asynchronous API is the one that is normally used. You must also know that IIndexedDB is an alternative to WebSQL Database, which the W3C has deprecated. Continue reading

Working with IndexedDB

Hi Friends, I am currently working on a Mozilla Student Project titled as “An Open Web App to edit Rich Text Documents“. That was where I needed to use IndexedDB to store data at the client-side, so thought of blogging about it. I will not be explaining the concept here, but just a few pointers based on my experience on working with indexedDB.

IndexedDB is an API for storage of structured data in the client browser space. It is an API introduced by HTML5.

W3C Specification : http://www.w3.org/TR/IndexedDB/

Best Source to Understand the Concept :

Best Example I found on Internet to refer :

Notes :

1.Tried and tested successfully on Google Chrome Version 23.0.1271.64 m with a local copy of a HTML file as well as when hosted on a server.

2. Fails in Firefox 16 with local copy, works when the HTML file is hosted on a server.

Reason: Firefox 16 does not allow Webpages running locally to create IndexedDB.

3. Works in Firefox 17 – Aurora with both local copy as well as when hosted.

If you are interested in trying out the project I am working on, Here’s the demo : http://abhishekp91.github.com/richtextdoc_edit_OWA/
So that’s all, Thank You for reading. Have a good day ! 🙂