Speaking at WeAreDevelopers Conference-2017

I’m just back from an amazing conference in Vienna, Austria and can’t wait to share my experience with you all. I was really glad that my talk proposal on “Building your own Pokemon world in web based vitual reality” got selected for the conference and was really excited as this is going to my first talk at a European conference.

The conference turned out to be really Huge than expected with 3800+ Audience and 400+ specifically for my talk. I was really glad to meet a number of VR experts at the VR booths from many companies working on Innovative VR projects. I even tried out Holo-lens at the Microsoft booth ❤ and made a number of friends in the VR community. I never knew that the VR community is so huge in Europe. I loved the discussions on How the future of VR would be, especially about the negative/evil side, backdrops for VR Technology. I was really surprised when other speakers were using A-frame in their VR demos in the open hall discussions.

I had my talk on Day-1 and it was titled “Building your own Pokemon world in web based Virtual Reality” with a goal to make the audience understand that you don’t need to be a geeky developer to build your own VR experiences. Here goes my presentation link. (Video recording will be updated soon)

wad.jpg

Questions I was asked after my talk:

  • What type of 3D assets can we use in our A-frame Scene
  • Is there any drag and drop toolkit to create VR experiences using A-frame.

Suggestions for the conference

  • All though I was provided with travel instructions to reach the venue, It would have been really helpful if speakers are provided with travel-tips like what travel passes to buy, what are food options available, Weather in Vienna during conference.
  • Providing enough plug points at the Speaker Hub.
  • Creating a group chat or slack channel for speakers which would have helped me to find like minded speakers and prepare for interesting discussions.
  • Decent updates and followups to the speakers( I never received an email of the schedule of my talk or insights/followup after the conference)

It was great to be a part of the conference, Talking and meeting VR enthusiasts, making a lot of like-minded new friends and Having lot of fun with tons of swag.

Glad to be a part of We are developers Conference and Thank you WAD for the invitation, Looking forward to see you next year.

Simple HTTP server for rapid prototyping

Sometimes you want to serve your web project over a simple server, You might want to test your responsiveness of your webapp on your mobile phone, you want to serve a little json content using http that needs you to run your webapp on a server or rapidly test your webVR project on your mobile device. This blogpost shows you two ways to include a simple http server into your web application.

First: Using devserver budo

Budo is a easy to use development server with live reloading and a lot more highlevel features useful for rapid prototyping. More information about budo can be found here.

  • Setup your project using npm: Create your project folder,say ‘server-blogpost’ and navigate to that directory using command prompt on windows or terminal on MacOS or LinuxOS.
$mkdir server-blogpost
$cd server-blogpost
  •  Now run ‘npm init’ (PS: you should have npm installed in your system) and give all the details of your webapp and complete the setup.
$npm init

Here goes my terminal log. If you don’t want to change any default option provided by npm in the circle brackets ‘()’ then just press enter.

photo1

  • Now that you have your project setup done, install the npm package ‘budo’ in your project.
$npm install budo --save
  • after the package is installed open your ‘package.json’ and you will find the budo package listed under dependencies.
  • under scripts remove the default ‘test’ script(if you have one) and add “start”: “budo –live –verbose –port 3210 –open”  and your final package.json looks like
{
 "name": "server-blogpost",
 "version": "1.0.0",
 "description": "test app to run on server",
 "main": "index.html",
 "scripts": {
 "start": "budo --live --verbose --port 3210 --open"
 },
 "keywords": [
 "server",
 "budo"
 ],
 "author": "santosh viswanatham",
 "license": "ISC",
 "dependencies": {
 "budo": "^10.0.3"
 }
}
  • Create a html file say ‘index.html’ in the same project folder. This will be the entry point of your webapp.
  • Now run ‘npm start’ on your command prompt to run your http server. This should automatically open your webapp hosted on a local http server on your default browser. If both your machine and mobile device are connected to the same wifi then you can view your webapp using the same url that is running on your machine. http://192.xxx.x.x:3210/ in my case.

Next: Using Python HTTP Server

  • Navigate to your project folder and run the following command ‘python -m SimpleHTTPServer 3210’ (PS: You should have python installed on your machine)
$cd server-blogpost
$python -m SimpleHTTPServer 3210

This initializes a simple HTTP server using python. You can view the output on your machine using the url http://0.0.0.0:3210’ or http://yourip:3210’ (can be used on both your mobile device and the machine) where yourip is the IP address of your machine.

Now your server is up and running in two different ways.

Speaking at Fossasia-2017

Last weekend I got an opportunity to speak about Web based virtual reality at Fossasia-2017, one of the asia’s largest open source conference. My first talk at a conference outside India was also at Fossasia-2015 where I spoke about Webmaker tools and How individuals can become web makers from being just web users.

Fossasia-17 was organized at science center, Singapore and it was one of the amazing conference with diversified participants from different countries, backgrounds, domains, age groups etc.

I spoke about “Creating your Pokemon world in Web based Virtual Reality”. You can find the recording here. This is my first talk about WebVR and it was pretty exciting for me that my first talk about WebVR is at an International Conference. You can find my talk slides here.

We had a busy booth with 100’s of diversified people visiting us everyday and sharing their thoughts about what they loved about WebVR and how could they use this technology in their domain and make things happen. When someone asks me about what they could do with WebVR then I would say ‘Sky is the limit’. A chemistry professor visited our booth and gave us a usecase of how he could use WebVR to teach his students about 3D projection of chemical compounds, which I never thought of.

Science center was similar to Science museum in Hyderabad except with advanced equipment and a lot more interesting projects. I loved being their and experiencing most of them especially the VR experience room where you could fly over a city and ride a 4D roller coaster with VR headsets.

I’m so happy that I got an opportunity to met Incredible people, Vanessa and Chris from the AR/VR community in Singapore.

IMG_20170324_234206

and Yeah this is our team of Mozilla Tech Speakers who participated in Fossasia.

IMG_20170323_213317

and This is whole of Fossasia volunteers, speakers, workshop wranglers.

fossasia-group

What I learnt?

  • Carry as many name cards as you can when you go for a conference
  • Make a QR code board which redirects the participants to the link of the demo you are showing at the booth ( WebVR in this case )
  • Prepare a lot more content than you are actually supposed to deliver. You never know when your 25min talk will change to a 1 hr workshop.
  • Talk to Dietrich whenever you find him, You will learn a lot
  • Check the hotel Checkin/Checkout timings and book accordingly

IMG_20170323_213018

And Yeah! It was a lot of fun being at Fossasia. B-)

Thanks for reading.

 

Using simple flat-icons in your webapps

You might have started working on web pages, web apps etc and might felt the need to use brand icons, accessibility icons, different domain related icons in your project. I found an amazing set of icons Font Awesome Icons with a collection of 600+ icons at free of charge and the website comes with a search bar which you could use to find the best suitable icon as per your need.

Font awesome icons are

  1. Easy to install and use
  2. Easy to customize
  3. Easy to search for the required icon

fa-icons

How to use?

  • Get your cdn from here or customize with the steps given here and include it in your html page.
  • You can use the icon using inline tags <i> or <span> with a class name “fa fa-iconname”.
eg: <i class="fa fa-facebook"></i> or <span class="fa fa-facebook"></span>

you can add another class “fa-2x”, “fa-3x”, “fa-4x” and “fa-5x” to increase the size of the icon.

eg: <span class="fa fa-facebook fa-4x"></span>

icon-x

Want to have an icon inside your button? try this

<button> <span class="fa fa-facebook"></span> Test Button</button>

Customizing your icon

Want a circle around your icon? Try “fa-stack”

<span class="fa-stack fa-lg">
 <i class="fa fa-circle fa-stack-2x"></i>
 <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
 </span>

But if you want a white circle around a black icon then you will have to hack few css. I wrote a basic style but I’m sure you could do better than this.

i.fa, span.fa
 {
 padding: 5px 10px;
 display: inline-block;
 border-radius: 50%;
 border: 1px solid black;
 }

Hope this helps in using better/affordable/amazing icons for your projects.

pageActions vs browserActions

I have been working with WebExtensions for a while now and came across two action handlers for a browser add-on namely browserActions and pageActions. So I thought to clear out few dev-doubts in using these action handlers.

browserActions are the events that are performed when we click our add-on button from the add-on toolbar. when you click on the button in the toolbar a browserAction event is triggered. If a popup is defined in the manifest.json file then it is opened else you can listen to the event using ‘browserAction.onClicked’.(will discuss more on this)

browser-action

Similarly pageActions are similar to browserActions but the only difference is they appear inside the url input box. basically you can define page actions on whatever tab you would like the button to be shown.

page

Firstly, If you are building an add-on and the action is applicable across all tabs on the browser( Eg: adblock ) then you should use browser actions but if your add-on works only on a particular website then you should use pageAction instead of a browserAction.

Using browserActions:

You have to do two things to include a browserAction in your add-on

  • Include the required info about browser actions in the manifest.json file.
"browser_action": {
  "browser_style": true,
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html"
}

browser_style is used if you want to include a css style for the browser action popup. You will have default_icon which gets displayed in the browser toolbar. default_title is the tooltip you will see when you hover over the icon in the toolbar and finally default_popup is the html of the popup that is displayed when the icon is cliked from the toolbar.

  • write the javascript code in your background.js file. more info about the API is here.

If you are not using any popup just like I did in my previous blogpost then you can listen to click event using ‘onClicked’ listener.

browser.browserAction.onClicked.addListener(callback);

Using pageActions:

The declaration in manifest and listener is almost same for both page action and browser action except that you need to enable pageaction for a particular tab using  pageAction.show().

  • Add this to your manifest
"page_action": {
  "browser_style": true,
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html"
}
  • write the js code in your background.js file. more info on API is here.

first you need to show pageAction to a particular tab

browser.pageAction.show(tab.id);

and then add an event listener to pageaction

browser.pageAction.onClicked.addListener(callback);

I created my first add-on using browserAction here and pageAction here. You can have a look at it for reference/difference.

Happy Coding!

Publishing your browser add-on to Firefox Add-on Marketplace

You might have probably developed your first add-on and searched for ‘Publishing your add-on to Firefox marketplace’ and finally landed up here. In this post I will be discussing about How to publish your Browser add-on to Firefox Add-on Marketplace.

Firefox Add-on Marketplace (https://addons.mozilla.org) known as AMO is a home for thousands of add-ons. If you have developed a Firefox browser add-on and want to make it available to global audience then AMO is the right place to publish your add-on.

Step 1:

Open AMO’s website ( https://addons.mozilla.org ). If you already have a Firefox account created(which you generally do to sync up your browser preferences) then you can directly Log in to the website. Else register yourself and create your account.

step1

Step 2:

Under tools, click on ‘Submit a New Add-on’ to submit your new Add-on for publishing in AMO. You can update your developer profile by clicking on your username and selecting appropriate option from the dropdown.

step2

Step 3:

Once you click on ‘Submit a New Add-on’ in Step 2, you will be proceeded to the below screen. I want my add-on to be available for Global Audience, Hence I choose the first option. If you want your add-on to be available on your own website like Makkhichoose then you can choose 2nd option and click on ‘Continue’.

step3

Step 4:

You will get  the below screen after ‘Step 3’ where you have to upload the add-on zip file. If you get the below error then that means your ‘manifest.json’ is not found in the root of the zip file. To fix this, create a zip file with all the contents in the root folder instead of creating the folder into a zip file. This means if you double click your ‘zip’ file then you should be able to see the ‘manifest.json’ along with other contents of your add-on.

step4

Step 5:

When you click on ‘Continue’ in ‘Step 4’, the page is redirected to the below page. Simple metadata like the name of your add-on, description of your add-on is already extracted from your manifest.json file. However you can still edit it in this page before submitting for review. Also select the category best suited for your add-on on Firefox Desktop and Firefox for android in this screen.

step5

You can also mention the support email-id and a support website but these are not mandatory. Choose the best licence that suits for your add-on. If you are accessing any of the user’s data or sending it to your servers then you might have to click the checkbox related to Privacy policy(Click on the little question mark for more info).

If you have any notes to the reviewer( eg: test account details required to test your add-on )  you can mention it in the space provided below. Finally click on ‘Submit Version for Review’.

step6

Step 6:

Finally you submitted your add-on for review. The Add-on will be published once it is reviewed. You might already got a mail regarding your subscription once you get the below screen.

step7

Step 7:

Lets add the icons and few screenshots for our add-on. click on ‘Manage Listing’ and select your add-on. You can either add a new logo or choose from existing logos and then upload the screenshots, provide little description for your screenshot. Screenshots are the best way to advertise how useful your add-on is to the user before he installs your add-on. Finally click on ‘Save Changes’ for the changes to get saved.

step8

Step 8:

Now you can find your add-on listed along with the status when you click on ‘ Add-on Developer Hub’ on left top corner after ‘Step 7’.

step9

 

Hope this gives you a clear clarity on publishing your add-on to the Add-ons Marketplace.

Building your first browser addon for Firefox using WebExtension

Firefox Browser has been an incredible browser with thousands of add-ons in its marketplace. Performance of the browser has been greatly improved with e10s. With WebExtensions support from the recent releases it was made possible to develop cross platform add-ons and run across Firefox, Chrome, IE etc. with just a few tweaks.

I joined as a AMO’s ( addons.mozilla.org ) Feature Board member in November-2016 where I would help the Add-ons’ team in selecting the best add-ons to feature every month on the AMO website ( https://addons.mozilla.org/en-US/firefox/ ). I then came to know about WebExtensions. WebExtensions enable you to develop Cross-browser supporting add-ons which works on most of the latest browsers including Firefox, Chrome, IE etc. I thought to explore around a bit about WebExtensions and in the process I developed my first Browser add-on. \o/ You can find my extension here.

I love inShorts. It helps you to with the news around the world and puts it in 60 words. But it doesn’t have a dark theme and I don’t want the light to flash on my face every night. Add-ons are meant to improve your browsing experience and change how a particular website should work for you. Hence I thought to build an add-on which adds a dark theme to the inShorts website. I spent a weekend and finished my add-on. It is very easy to develop a WebExtension and you fill find a lot of amazing resources to learn. You can find it here.

I thought to share my experience of building my first Browser addon in this post.

{
 "manifest_version": 2,
 "name": "inShorts in dark",
 "version": "2.0.0",
 "homepage_url": "https://github.com/viswanathamsantosh/inshorts",
 "description": "Read your favourite news on inShorts by dimming the light right away on your browser.",

 "icons": {
 "48": "icons/icon-48.png",
 "96": "icons/icon-96.png"
 },
 "permissions": [
 "activeTab",
 "tabs"
 ],
 "browser_action": {
 "browser_style": true,
 "default_icon": {
 "19": "icons/icon-19.png",
 "38": "icons/icon-38.png"
 },
 "default_title": "Turn on or off"
 },
 "background": {
 "scripts": ["background.js"]
 }
}

Most of the contents in the manifest file are optional. depending on the usage you should include them in your manifest. For example, I need an icon on the browser toolbar for my addon, Hence I included the ‘browser_action’ in my manifest file. If you don’t need it then you can remove the section. More info on manifest.json is here.

Here I included a name, description, url of the github repo I’m using for the addon, browser action, default icons and a background script in this manifest.json file.

  • Next I have to write my javascript code. Depending on the usage you can either choose between content script or backgroup script. Since I m using browser actions in my addon, I use background scripts. Create a file named ‘background.js’ in the same folder as manifest.json file and included it in my manifest.json.
  • I studied the DOM structure of inShorts and wrote the required CSS to enable night mode where I would change the color of the background from white to black, change the text color of news from grey to white and the ‘Load More’ button color from white to Red.
var CSS='body{background-color: black;}span[itemprop="headline"]{color:white;}div[itemprop="articleBody"]{color:white;} #load-more-btn{background-color:red;color:white;}'

If I have to  include this style in the beginning and make no changes later on then I can use content script to make it possible. However  I will display an icon on the toolbar to enable and disable the night mode on the website.

  • I wrote my jscode to insert and remove the CSS in the present tab selected.
//method to enable nightmode
function enableNightMode() {
 browser.tabs.insertCSS({code: CSS});
}

//method to disable nightmode
function disableNightMode(){
 browser.tabs.removeCSS({code: CSS});
}
  • Then a toggle function and browser action to toggle the dark theme when you click on the button in the toolbar.

toolbar

//method to toggle mode
function toggleNightMode(tab){
 if(tab.url.indexOf("www.inshorts.com/en/read")!=-1){
 if(enable){
 enableNightMode();
 }else{
 disableNightMode();
 }
 }
}

//event handler when you click the button in the toolbar
browser.browserAction.onClicked.addListener(toggleNightMode);
  • And finally another event handler to reset the mode when the tab is refreshed.
//when the browser tab is refreshed
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
 if(tab.url.indexOf("www.inshorts.com/en/read")!=-1){
 disableNightMode();
 }
});
  • Finally this is how my ‘background.js’ looks like after adding few flags

https://github.com/viswanathamsantosh/inshorts/blob/2.0.1/background.js

  • At last add the icons required for your addon and browser action button and mention the related paths in the ‘manifest.json’ file.
  • You can find information about Installing and debugging your addon here.

Hope this helps in getting started with the development of your first add-on! Happy Coding.