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:

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

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:

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.

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

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:

• Outreachy – suspense unfolds
• Lightbeam – why & what
• Lightbeam – Q & A

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

• Load a manifest.json file
• Click the Lightbeam icon from the browseraction
• Launch an index.html

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

 

Lightbeam – Q & A

The Mozilla Learning Network rallies and connects leaders who want to advance the promise of the Internet for learning in a networked world. This is done by fuelling new approaches to digital learning through Mozilla Hives, Clubs and Gigabit cities.

As part of the Internet Health Basics learning activity, there is a module on Privacy and Security and there is a chapter on tracking cookies using Lightbeam.

The objective of this course is to:

• Understand and explain cookies and how they track users’ Web browsing.
• Understand and use online tools such as Lightbeam to monitor online tracking.
• Reflect on distinguishing between appropriate and invasive uses of tracking.

My mentor at Outreachy – Lightbeam, Luke Crouch, conducts web literacy classes at the Tulsa Library. Recently, he conducted a session on Lightbeam and below is the summary of the answers from the questionnaire filled by the attendees.

Q: Have you ever used a tool like Lightbeam before?

• Turned off the cookies button
• OpenDNS which shows domains contacted

Q: If you had to summarise what Lightbeam does, what would you say?

• Adds to the awareness of how little privacy we have
• Informs users of tracking activity and who is tracking
• Easy to view a centralised map of all cookie connections encountered during a browsing session
• Visual display of Internet locations contacted
• Lists your cookies in a graph
• Visualisation tool for showing links between cookies and sites

Q: Was there anything that you found especially valuable? 

• Graph was valuable along with link identification by colour.
• Visual of the volume of the connection activity was interesting
• Good to see logos
• An eye opener

Q: Was there anything that you found especially confusing?

• I would prefer the ability to set the graph size
• Coloured lines were bit confusing

Q: Would you use Lightbeam again?

• Yes
• No
• Maybe

Q: What habits can you develop – and what strategies and tools can you use – to prevent yourself from being followed online?

• Use private browsing with tracking protection
• Delete cookies
• Clear the history
• Incognito mode

Q: How might you learn more about online privacy? What would you search for?

• Wouldn’t try to learn online because I don’t trust a lot of what’s out there. I learned from reading a book ‘I know who you are and know what you did‘
• Search for privacy and legislative actions. Browse computer science and technology online reports and magazines.
• Search for online privacy best practices
• Go to the Tulsa library class 🙂

The above Q & A sheds light on how users find Lightbeam to be an eye opener in the web privacy space. This survey is also useful for us to improve the current UI/UX issues.

The existing Firefox addon will be revamped using web extensions during the course of my Outreachy internship. If you haven’t tried Lightbeam yet, you can instal this Firefox addon and leave us your feedback.

It’s time to make the Internet healthy 🙂

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:

• Detecting and defending against third party tracking on the web
• Security and privacy from untrusted applications in modern and emerging client platforms

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.

 

 

 

princiya.com

Yesterday, I launched my website! Yayyy… after months of purchasing the domain name, here it is.. princiya.com♥

It is a Hugo powered website and hosted on Github. I started with Jekyll, but ended up using Hugo. Thanks to my Groovy on Grails knowledge, it helped me with setting up and understanding Hugo.

For those of you wondering what’s Jekyll or Hugo, here is an interesting article. In short, both Jekyll & Hugo are static website generators.

To start with, I am using the Kube theme for my website. I would continue to use this space (wordpress) for blogging. For now, I intend to use princiya.com to document my ‘Today I Learned’ series of articles.

Following are the (must) to-dos for my website:

• SEO
• Pagination for blog posts with next and previous links
• Sort blog posts based on date
• List all categories, tags etc for the posts
• Logo, favicon
• Google Analytics
• Page to showcase my talks/presentations

I guess, I would figure out remaining things as I go. ‘Better late than never’, I now have my personal website 🙂

Happy Monday!

Biannual updates

I like to set my goals at the beginning of every year and reflect on them about what’s being achieved and what isn’t. Here is what I have written in the past:

• A thank you note!
• Zello
• 2016’s Hello World

For 2017, this is what I had set.

2017 goals

Having achieved most of them already, I thought of a biannual update for this year. And today being 31.05.2017, it is a good time of the year to share these updates.

• Open source was the top priority for this year and I am extremely happy for getting into it this year.
  • My first PRs
  • Outreachy
• Talks
  • Mommy’s first PR at the Women Who Code Meetup
  • Web of things – Peer to peer web
• Testing
  • Test environment setup from scratch here using Karma, Mocha & Chai

Although Outreachy commenced officially yesterday, me and Bianca have already started our Lightbeam project and we are two weeks through. It’s been fun two weeks getting to learn lot of things, interacting with mentors and working remotely with people from different time-zones.

My next blog post will be on the test environment setup for the Lightbeam web extension. I am super happy for being able to set this up from scratch and I can blabber about this on & on 😉

My personal website is a work in progress and I intend to launch it soon. It features the TIL series.

Ending this post with words of wisdom to stay focused to be able to achieve your goals:

• PRIORITISE things
• Have PATIENCE
• CHALLENGE yourself

See you 🙂

Outreachy – suspense unfolds

I am happy to announce that I am one of the 39 participants selected into this year’s summer Outreachy internship.

Results were announced on 04.05.2017 at 4:00 pm UTC and my joy new no bounds.

I have been accepted into Mozilla’s Lightbeam project.

Initially, the results were scheduled to be announced on 28.04.2017. Anticipating a rejection, I had jotted down a Plan B for myself on 26.04.2017. But now, ditch the Plan B 😉

26.04.2017, Berlin

With two more days left for the announcement of Outreachy results, I have decided to go with Plan B. I think I am being too paranoid about the results this time, I am not able to concentrate on anything else. While I am being 90% optimistic, I want to have a Plan B to console the 10% pessimistic me. Even though I was a tad late to apply this year, I feel I have done a decent job with my application.

Here is my application.

And here is my contribution.

Best case, I will get the internship and the money. Worst case, I have the following Plan B.

I am an optimistic individual and it is very difficult to have me demotivated. While not securing the internship won’t be the end of the world to me, there will be a few obvious regrets; not getting the money to be one of them 😉

First let me make it clear to myself what this internship means to me:

---

I want to make the best use of my leave for this year. I have always wanted to be an active opensource contributor and this year I have the time to make this impact.

 

With this firm resolution in mind for this year, I was pretty happy when I found the debugger.html project in January and was able to make a PR.

I was keen on picking up a project from Mozilla because Mozilla has always been participating with Outreachy and it would fit with my forte of work. When the Outreachy’s participating organisation list was announced this year, Mozilla wasn’t listed and I was disappointed. I reached out to one of the programme’s coordinator via Twitter and she confirmed that Mozilla was participating and their project list would be up within a week’s time. The hope came back 🙂 When the project list was up, Lightbeam caught my immediate attention and I worked towards my contribution. I must say, web privacy is an interesting topic. There is so much scope to learn here.

I like to encourage women into technology. With this internship, I would be setting a real life example between managing work and home.

 

Plan B:

---

• I can still contribute to Lightbeam because it is an opensource project and try to learn and understand about web privacy to the maximum. There is a lot of scope in this area!

• I will get back to debugger.html and try to get some more PRs merged.

• I want to do three courses from Coursera:

  • Algorithms (I HAVE to be very good at this)

  • Machine Learning

  • Data Scientist’s toolbox

  I have been aiming to take up these courses from a very very long time (from past 3-4 years). This year I have no excuse.

• Ideas for fun projects:

  • Build a StackOverflow like platform for all the discussions happening at ExpatBabies Facebook group and Jutta’s idea of online midwife.
  • Build visualisations for some day to day life problems.
  • Cook, bake and blog

    The foodie in me is very excited about this one 🙂

• I need to get better at the following and blog my learnings:

  • ES6
  • Web performance
  • D3.js, SVG, WebGL
  • WebVR
  • CSS layouts

As I conclude this post, let’s hope for the best 🙂