Posted in 2017, diversity

The ‘first time’ story – Part 1

I don’t know where to begin, but I promised Zainab Bawa I would write-up about my experience in speaking at tech conferences and into the open source world. Sorry for the late post. Here is the speaking journey!

The ‘first’ proposal

My first tech talk proposal submission was for JsFoo in 2015. The talk was titled ‘JavaScript SDK for Perceptual Computing using Intel RealSense technology. The talk wasn’t accepted, I was disappointed, but there were some useful lessons learned. My submission was more focused on Intel’s technology and it appeared I was advertising for it. Conference submissions shouldn’t be focused on proprietary technologies or sales pitches, the audience will never like that. The conference reviewers were very kind to give me feedback and I accepted it with a positive note.

Screen Shot 2017-09-07 at 20.32.03

The ‘first’ talk

I worked on the feedback and I submitted my second talk proposal which was accepted and I gave my first tech talk at JSConfAsia Singapore in 2015.

Screen Shot 2017-09-08 at 11.14.11

 

The ‘first’ international conference

Prior to me submitting my first-ever talk proposal (for JSFoo), one fine morning I woke up to this fantastic email.

Screen Shot 2017-09-08 at 11.23.11

This email was the biggest game changer in my tech life. I had stumbled upon the diversity scholarship from JSConfEU and decided to take a bold step and apply. When I was applying, little did I know that I would bag the scholarship. My joy knew no bounds when I read this email. I can still recall that morning when I had the first dose of confidence++ 🙂

This was just the beginning…. Read More. Below are a couple of places where I have spoken till date:

  • JSConf Asia 2015, Singapore
  • Grace Hopper Conference 2015, India
  • JSConfBP 2016, Hungary
  • JSUnConf 2016, Germany
  • CSVConf 2016, Germany
  • Frontend Union Conf 2016, Lithuania
  • Web Summer Camp 2017, Croatia
  • MozFest 2017, London (Upcoming this year in October)
  • Women Who Code Bangalore
  • Women Who Code Berlin
  • Zalando Tech Meetups

PS: I have a long awaiting to-do to add all of the above links in one place in my website princiya.com (I hope to do it soon ^_^)

In short, this has been my wonderful journey (and counting) into the speaker’s world.

Success is when, preparation meets opportunity

Words of wisdom

I didn’t achieve all of this over-night. I have constantly persevered and toiled in lot of blood and sweat. The best thing is, I never gave up! And the most important thing – ‘One doesn’t need to be an expert to speak.’

Screen Shot 2017-09-08 at 11.49.12
Link to the tweet

Why should you consider speaking at conferences?

Speak – we need diversity!

  • Speak – you will definitely learn a lot
  • Speak – you will teach others what you have learned
  • Speak – to get a confidence boost
  • Speak – you know you are awesome
  • Speak – the community needs new people and new ideas
  • Speak – you have nothing to lose!
Advertisements
Posted in 2017, LearningItMyWay, Lightbeam, Outreachy, Random

Lightbeam updates

Here are two quick updates about Lightbeam because I can’t contain the excitement to myself.

Lightbeam goes responsive, yayyyyy!!!

lb.gif
Responsive Lightbeam

Responsive UI

I am extremely happy for achieving this today. Making the UI responsive was there in our to-dos, but this one got done today accidentally in an attempt to answer few of the comments on one of my PR. CSS grid is used and I must say the fr unit is so handy.

Mozfest proposal submission

Proposed a session for the Mozilla Festival 2017, London. Here is the proposal. The coolest part here is that the google-form submission automatically gets created as a GH issue.

Posted in 2017, Outreachy, Random

Am I a fraud?

Imposter Syndrome is described as a feeling of “phoniness in people who believe that they are not intelligent, capable or creative despite evidence of high achievement”. While these people “are highly motivated to achieve”, they also live in fear of being ‘found out’ or exposed as frauds. (Clance and Imes, 1978)

Recently, I had this wonderful opportunity to participate in the Mozilla All Hands, 2017. There was an Imposter Syndrome workshop for Outreachy participants and here are the session highlights. The workshop was led by Lizz Noonan from the Diversity and Inclusion team, and we learned techniques to identify and overcome the Imposter Syndrome.

We were aproximately 12 participants and Lizz started the session with an introduction to the Imposter Syndrome. We were then asked to introduce ourselves and also to state ‘one thing you didn’t know looking at me‘! In my case, “I turned 30” 😉

Imposter Syndrome is the belief or the feeling that you are a fraud! It often starts with ‘I can’t do this‘ or ‘Can I do this‘?! Lizz cited examples from noted women – Maria Klawe, President of Harvey Mudd College, Cherry Murray, former Dean of the Harvard School of Engineering and Applied Sciences, stating how they too have been bitten by this bug.

Imposter Syndrome disproportionally affects women, so it is something of which we should be especially aware. This wasn’t the first time that I was hearing about Imposter Syndrome; I have heard and read articles about this in the past. What I didn’t realise until this workshop is that I too have been silently affected by this bug.

After a brief explanation about this syndrome, we were asked to share our experiences. When it was my turn to share my Imposter Syndrome experience, I realised why I have always (and still I am) been reluctant to asking questions in public?! There have been numerous times when I have had framed a question in mind, and then wondered to myself that this could be the most stupid question to be asked, felt shy to pop it out of my head, and then hear someone else ask the exact (or similar) question and get applauded for asking the best question. Sigh! This still hasn’t boosted confidence in me to ask a question the next time. At a technical workshop, slack discussion, PR comments, I feel too naive to ask any question.

This workshop made me realise that this behaviour of mine is because of the fear in me of being exposed as a ‘fraud‘.

Why do we do this to ourselves?

  • You get the feeling of an impostor when your competence is questioned all the time – “Did you get into this program because you are a woman?
  • Often, you feel like an imposter because people treat you like one.
  • People act surprised when you are good.
  • There is this ‘prove -it-again‘ bias.
  • And ‘lower your ambitions‘ thing.

What is the result from the above?

  • We waste time over-preparing
    • In my case, instead of asking a question, I go and dig every possible source to help me find the answer myself.
  • We settle for less money (salary).

How do we prevent this?

  • Share your failures
  • Doc doc doc (doc = document, you don’t need to see a doctor :))
  • Tell your story (This is my story)

After sharing our experiences, our next exercise was to ‘Take a Compliment” and say “Thank You” for the compliment. We were divided into groups to exchange compliments and thank you notes. We often receive compliments but the imposter in us stops us from saying a thank you.

Lizz shared her own experience of making a log of all the thank you notes she receives and how it helps her when she is low.

Thank you Lizz for this great workshop! I have spoken to my Outreachy mentor Stephanie Ouillon about my reluctancy in asking questions and she has come up with a nice way to help me be confident in asking questions. So the plan is whenever I am not sure to ask a question during our weekly team meetings, I first shoot the question to her and get the boost to ask it to the whole team. We have our weekly meetings every Tuesday, today is Sunday, let’s hope for the best 😉

Posted in 2017, Lightbeam, Outreachy, Random

Lightbeam – Behind the scenes

It’s more than 2 weeks now. I haven’t had the time to write anything down. So here’s a quick post on what’s happening!

San Fransisco – Mozilla All Hands 2017

Before

The week of June 26 – 30 was Mozilla All Hands 2017 at San Fransisco. It was my first time into the United States and I was pretty excited about this trip. After a tiring 11 + 3 hour long haul flight, when I presented my Mozilla invitation letter at the immigration, the border security officer at the SFO airport was excited to find out that I too was attending the All Hands. It appeared to me that he already processed other fellow attendees and he knew about it. His cheerfulness made me forget my tiredness and I had a warm welcome into the city. With the kind of ongoing news and rules about US airport security, I was too paranoid. But everything went smooth, from gaining B1 visa, carrying laptop in hand baggage and the security clearance itself.

During

The All Hands itself was a great experience. I and Bianca came up with a timeline of the next tasks that we could work on for until the internship period. Our main focus is to improve the graph performance. The idea is to use canvas instead of SVG. Here is an article I have written why canvas is a better choice.

After

I did a bit of sight-seeing at SFO via the big-bus tour.

One week at SFO was great. I wish to go back and explore more of the city at some other time.

Berlin – Home, away from home

Store

store is an integral component of Lightbeam. We use asynchronous message passing for communications between the background and page scripts. Our mentor Jonathan helped us a lot with code improvements on this store.

Visualisations

28039210-b72434a8-65c1-11e7-932f-63a725a4438e
Lightbeam graph using D3 force layout
28042023-6cee9a36-6580-11e7-8de5-5089702ae68c
Node overlap/colliding bug

I have used D3 in the past, but D3’s force layout algorithm is new to me. We are able to draw the Lightbeam graph using this algorithm, but there are so many more things to learn. I am sure, over the coming weeks our graph would see significant improvements.

This week I am working on to fix the node overlap/colliding issue and to get a canvas prototype for D3’s force layout.

Quite exciting times with Lightbeam 🙂

Posted in 2017, Lightbeam, Outreachy

Lightbeam – ‘tale of 2 stores’

Thanks to Bianca, my fellow Outreachy-Lightbeam project partner for coining the above title in her blog and asking me questions to explain about the bug(PR) I recently fixed for Lightbeam. I  started explaining her last evening via quick diagrams and I already had an idea to make my next blog post colourful 😉

I have been inspired by Lin Clark’s code cartoons and Mariko Kosaka who always draw and make technical reading fun! Here is an attempt to write a post and explain Lightbeam’s store architecture via diagrams 🙂

To revamp Lightbeam into a web extension we decided to follow the following architecture:

20170623_125927

A web extension consists of a collection of files and we employed the following directory structure to achieve the above architecture:

20170623_125810

We were able to chalk out an MVP soon, everything behaved as expected, until we found this bug.

  • Open Lightbeam
  • Open console
  • Clear the storage manually through the console: browser.storage.local.remove('websites').then(()=>console.log('removed')).catch(err=>console.log(err))
  • Also set store._websites=null manually through the console
  • Refresh the page – graph disappears
  • Refresh the page again, graph appears with old values

Thanks to Jonathan for pointing out that there were two store instances created and thus began – ‘tale of 2 stores’.

Following was the code implementation to achieve the above architecture:

The problem with this approach was that store.js file was loaded from two different places and that’s how we ended up having two store instances.

In other words, this was the problem:

20170623_130426

Now to debug the above specified bug:

  • capture.js had one store instance because of store.js loaded via background script
  • lightbeam.js had another store instance because of store.js loaded via the script tag
  • index.html page was loaded and lightbeam.js got the required websites to display via getAll() from it’s store instance
  • Next, web extension storage was manually cleared via browser.storage.local.remove and store._websites was explicitly set to null
    • in the first page load, there was nothing to display because the getAll() returned nothing from it’s store instance (because of the above manual deletion)
    • on second page load, capture.js had done a setFirstParty() call to it’s store instance which in turn wrote to the browser.storage.local.set
      • capture.js is triggered when a tab (re)loads
      • capture.js‘s store instance had its copy of _websites already populated (when the manual store._websites=null was done, it was done on lightbeam’s store instance) and setFirstParty() used this already populated _websites value and wrote to the browser.storage.local.set
  • This is how the visualisations appeared back on the second page load

To fix this bug, we now have storeChild.js which acts as an interface, or is the only point to talk to the background store.js. With the child and parent architecture, the parent will always be in charge of when the write happens and so will serialise the writes which will behave like a locking database.

20170623_130453

The page script storeChild.js talks to the background script store.js via message passing.

Posted in 2017, Lightbeam, Outreachy

Lightbeam 2.0 – MVP

It’s been 4 weeks now, since we started working on Lightbeam 2.0. And we have an MVP!

Here are my earlier posts on Outreachy and Lightbeam:

The first milestone in this internship is this initial MVP. Every time, I and Bianca went astray from this milestone, we had our mentor Jonathan to guide and help us focus towards this direction.

Here is the summary of what’s been achieved so far:

Setup the basic web extension

lightbeam-setup-initial

The Backend

  • Setup the communication with the browser and capture the first & third party websites
  • Create the capture & viz objects and the store API
    • capture object stores into the store object
    • viz object draws to a canvas
    • The lightbeam page code reads from the store, draws with the viz to a canvas in index.html

The Frontend

  • UI
    • In this initial MVP, the goal was to replicate the old UI. CSS Grid layout is used in the new codebase
  • Visualisations
    • While visualisations will be a major part in the post-MVP, in this initial MVP we are drawing small circles using the Canvas API to show the first and the third party websites

Overall, the whole team is very happy with the work and the progress done so far.

Presenting, Lightbeam 2.0

Screen Shot 2017-06-18 at 18.46.11

 

Posted in 2017, Lightbeam, Outreachy

Lightbeam – why & what

Lightbeam is a key tool for Mozilla to educate the public about privacy.

In this blog post, you will know why I chose Lightbeam and what does it do.

As I was browsing through the Outreachy project list, Lightbeam caught my attention for the following reasons:

  • front-end web development (all things JavaScript)
  • visualisations (D3.js)
  • a project from Mozilla (healthy, open and accessible Internet for all people)

But I was not sure about the following:

  • web privacy
  • security engineering

JavaScript topped the list and I decided to give it a try. I must say, I am now very cautious about the online third party trackers and care for web privacy and security.

The key part of this project (internship) is to convert the existing Firefox add-on to a web extension and explore simpler ways to convey complex privacy and security concepts to all  Firefox users.

Web security & privacy are vast topics  and after playing around with a few keywords, I found these two interesting papers online:

A healthy internet is secure and private. While web tracking isn’t 100% evil (personal data can make your browsing more efficient; cookies can help your favourite websites stay in business), its workings remain poorly understood. Using interactive visualisations, Lightbeam’s main goal is to show web tracking, aka, show the first and third party sites you interact with on the Web.

Your personal information is valuable and it’s your right to know what data is being collected about you – your age, income, family’s ages and income, medical history, dietary habits, favourite web sites, your birthday…the list goes on. The trick is in taking this data and shacking up with third parties to help them come up with new ways to convince you to spend money, sign up for services, and give up more information.  It would be fine if you decided to give up this information for a tangible benefit, but you may never see a benefit aside from an ad, and no one’s including you in the decision.

One key area Lightbeam can help you in making the difference is in user control – deciding who can collect your data.

Lightbeam is your guide to help you surf the web while keeping your privacy intact.