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.