Explaining my work on Network Monitor

Outreachy internship blog – part 3

For this internship with Mozilla I am a part of the Firefox team called DevTools (developer tools). Developer tools are different tools that help web developers in their process of building web pages and web applications. The tools are part of the browser although not visible to the regular user who is just searching the web. Developer can open the tools by right-clicking anywhere on the page and selecting Inspect Element . There are several different developer tools, like Inspector, Console, Debugger, etc. I work on the Network Monitor.

What is a Network Monitor?

The Network Monitor shows all the network requests Firefox makes (for example, when it loads a page), how long each request takes, and details of each request. Simply said, one can monitor all the internet traffic between the browser (client) and the web server. When the browser asks for some information – it is a Request. When the web server somewhere out there replies with information – it is a Response.

 

Image from here.

What is it good for?

I think web developers would give you many different answers. It can help to improve the speed (performance) of web pages, it can help to find out where the information on the webpage comes from, how much information the page receives, it can check for failures…

To keep it simple, here is one simply use case from (my) school boy. His school project was to create a video about something. He wanted to add some “machine” voice to his video so he decided to use google translate since it allows to listen to the translation text. With the help of Network Monitor, he was able to download a voice file, generated by the google translate page.

Here are the steps he took.

• Navigate to google translate and open DevTools.

• Click on Network Monitor.

• Press listen (the speaker symbol) and watch the network traffic. Then in the list of requests, select one with file type mpeg.

• Right click and select Open in New Tab

• When the new tab opens, right click and select Save Audio As

And he’s got his “machine” voice that he played in his school project. 🙂

And what is my humble task?

Many web developers would like to adjust the width of different columns that are part of the table in Network Monitor. This feature has been repeatedly asked for, so my internship project is “Implement support for resizeable columns for Network panel in Firefox Developer Tools“.

My internship work consists mostly of:

• reading a lot of code,
• writing code to implement resizing of columns in the table of requests
• testing for functionality
• testing for performance
• reading lots of documentation
• learning constantly

What am I learning?

I am constantly looking something up, refreshing some information or simply trying new things out. Here is a list of some things that I am learning:

• more of React JS and the way Firefox is built
• how to store and load different browser user preferences
• lot of CSS although I still feel like CSS hates me 🙂
• Mercurial version control system (this is a tough one)
• how to use Browser Debugger
• how to use automated tools for testing
• generating and using ssh keys for authentication
• encrypting information in email (for outreachy tax info)
• I am also learning how and when to ask for help.

So that’s it. Hope you now have a better understanding of what it is that I currently work on.

Advertisements

I struggle too

Outreachy internship blog – part 2

When I read this week’s blog topic (Everybody struggles) I knew that was about me. My first weeks of internship have really been kind of a struggle.

What was I struggling with?

Basically, I’ve been struggling while fixing one bug that I have started before the internship officially began. The bug’s description sounds pretty easy – Network Panel should use proper styling. It involves moving two buttons to another place in the panel, change one of the buttons into two toggle elements, change the wrapping of longer lines, etc.

It took me a while just to figure out where exactly in the code should those React changes go. That was needed even before any CSS changes. After I spent several days tweaking my React js code I made only a small progress. I was hesitant to ask for help because I thought that I was going the right direction and that only because I am not that skilled it takes me longer. I thought I simply have to press on.

I was also doing different CSS tweaks and honestly I sometimes felt like CSS hates me. 🙂

What happened when I reached out for help?

After I finally decided to consult my mentor, we scheduled a session where I asked him to explain some parts of the code in the component that I was working on. It turned out that I was actually changing one part of the code but there was a much more convenient place for my desired changes.

I spent next working hours coding the changes and before our next meeting the following morning I was able to show my mentor progress.

Consulting my mentor helped me also in another way. I was mostly logging things in the console when I was debugging my code. My mentor encouraged me to become friends with Debugger and helped me with it in a live session. So that was an improvement in my work.

Is the struggle over now?

Now I still have several CSS changes that I had to do on this bug before I can submit a patch. Sure it bothers me because it’s taking longer than expected and I am slowed down working on the internship project. I want to finish this one bug first. Then I will move on to the internship project and follow our plan.

Discouragged?

I am an optimist. Everything new is hard at first and generally speaking I like challenges. So I am prepared to invest all those extra hours now in the beginning, hoping for an improvement with the coming weeks. I look forward to what’s ahead. So even though there are struggles, I would say: “So far so good :-)”.

P.S. Only 2 days after publishing this post, my attention was caught by this excellent post that describes EXACTLY my feelings during these weeks. It is encouraging for all beginners feeling frustrated. Read on…

Ready Set Go

Outreachy internship blog – part 1

Here I am in Orlando, FL at Mozilla’s All-Hands meeting. It is my first week of Outreachy internship. I am an intern working for Mozilla and I am really excited about it.

What is Outreachy?

Outreachy is a program that organizes three-month paid internships with free and open-source software (FOSS) projects for people who are typically underrepresented in those projects.

Outreachy internship projects may include programming, user experience, documentation, illustration and graphical design, or data science. Internships are open to applicants around the world. Interns work remotely with mentors from FOSS communities.

I’m working for Mozilla on developer tools for Firefox. Specifically, I am working on implementing support for resizable columns for Network panel.

Why did I apply to Outreachy?

I first heard (read) about the program on Medium where I read an article from a previous intern. I am learning Web development and always want to learn more and move ahead. I have previously participated in Chingu cohort where I learnt React and now I wanted to extend my experience so I can eventually use it in the job market.

After reading about the program, I got really excited because it was not just for students like some other internships. I am a mommy and I stayed home to care for our kids. I was learning web development and now there was a chance for me to progress and work on real life projects. (As it turns out there are more mommies in the Outreachy program.)

How did I choose this particular project?

When the projects were announced on the Outreachy page I went over the list and selected those that had in requirements React. I like React and wanted to use it more.

Eventually I picked working on the developer tools (Network panel) because I thought I’d like to learn more about using the dev tools for my web dev future :-). (You know – learning by doing 🙂 It also seemed challenging enough and it appealed to me.

How was the application process for me?

After I chose the project I went through the process of installing and creating my own Firefox build. It wasn’t smooth. I had to deal with several problems caused by specific windows behavior. Eventually I managed to get it working and I was able to start.

Part of the application is a requirement to make at least 1 contribution to the project before submitting your final application. So I went to choose a ‘good first bug’ to work on. It turned out that wasn’t easy either. There were no more ‘free’ or ‘unassigned’ good first bugs so I had to look through bugs for devtools to try to pick something. Luckily together with my mentor we were able to find a bug that I could start working on.

And then the work began. For about a month I tried to spend every free time to work on contributions. Understand the code base (or to be humble – understand those few java-script files I was working on), make some sense of the CMS Mercurial (it is still NOT my best friend) and try to figure out what should I try to google/solve myself and what should I ask my mentor (Google IS my best friend :-).

My mentor was great at giving direction when I asked. Step by step he was giving me more and more responsibility so I was learning new things during the whole application process. At the end, I successfully managed to land 2 patches for 2 bug fixes in devtools and submit my final application. Also, I continued working on the contributions even after the application deadline.

When I found out I was selected I was really happy. The month of hard work has paid off and there are now 3 months of learning, building and coding in front of me. 🙂 Yeay!

Looking ahead

I am totally looking forward to this new experience. Learning is the primary reason why I’d encourage anyone eligible to apply for Outreachy. Working with so many smart people is invaluable. You learn software engineering skills that you’ll use in your day to day job as a developer.

Even this past week at Mozilla’s All-Hands has been quite eye opening. I see the mission of this great open source project (and of Mozilla organization) with new eyes. I am thankful that I can become a part of it while learning and building within devtools. I am thankful to my mentor for all the guidance he is providing and to other helpful people on the dev team. And finally, I am thankful to Outreachy and Mozilla for giving me this chance!