Ascend Project

Mentorship and barrier-removing accelerator program designed to explicitly invite, include, and support adult learners in making a first technical contribution to Open Source software.

Contact Us!

Tina's Blog

Blog posts by


    End of Ascend

    By Tina

    16 Oct 2014 »

    The end of this week brings about the ending of the Ascend Project. I can’t say I’m excited that it’s over, but I am glad looking back at what I’ve done. I patched in imgur upload functionality to firefox’s screenshot command. I made some improvements to our own Ascender’s Blog. I found a complicated bug in firefox’s newtab page (sorry David!). I reported a bug and submitted a patch it into gnome-music all in the same day. I added a keyboard shortcut into gnome-music as my contribution in order to apply for OPW. I applied for the Outreach Program for Women to work on gnome-music.

    I learned the importance of setting up a quality development environment. I learned how to manipulate VMs… and how disposable they are. I learned how much I dislike trying to parse python’s version of Object Oriented Programming. I learned that Arch Linux is far and away the best distribution of Linux out there right now. I learned that I have what it takes to learn more and make it in this field!

    Of course this is all what I can remember right now. If I had done a better job keeping notes on the things that I’ve learned, then that list would be three times as big! That’s a lot of knowledge and accomplishments to come out of 6 weeks! For me: Ascend was a huge success!

    I’m so grateful to have had this opportunity. It wouldn’t have been possible without Lukas and Kronda being there everyday to help out everyone who needed it. Thank you to every Mozillian who went to bat and supported the Ascend project’s inception. Thank you to every speaker and mentor that showed up to work to help us believe we could contribute, and helped us actually contribute! Thank you to you! By reading this blog post you’ve takin the time to show the world that Ascend matters.

    Because of Ascend, there now exist 18 new Mozilla contributors. I now feel competent enough to contribute to open source prjects. While before I felt like I could contribute, Ascend gave me the understanding of the process that I needed. Ascend is the reason I can look at bugzilla bugs, find code source, set up my dev environment, and dive into the code to make a change. Ascend is the reason I can say to the world, I am a Mozillian.


    Fixing my first Bug

    By Tina

    30 Sep 2014 »

    The first bug I chose was actually more of a feature request. It involved adding an ‘–imgur’ flag to firefox’s ‘screenshot’ command in order to instead upload the image to imgur.com. At least the concept to me was simple: Make it upload to imgur’s API. I had no idea about the code, but being able to understand the concept can be tricky when looking for your first bug. But with the concept in hand, I dove right in.

    One of the comments on the bug mentioned a specific ‘screenshot.js’ file that needed to be changed. So I opened it up and immediately felt that first stomach drop as I didn’t understand a lick of what was there. But with some resilience, and the gcli (Graphical Command Line Interface) documentation, I started to understand the different chunks of code and where I would need to edit them. After looking at that code and needing some code to plug into it, I began to examine the imgurAPI.

    API is really just a fancy term for “text exchange” from what I’ve gathered so far. You send a request to a server using some data-object full of request information, and the server then returns a data-object with more/different information in it. It’s just constructed text communicating with other more-different constructed text. Perhaps that could actually be said about the entirety of IT but I had a bit of an ‘Aha!’ moment in my research.

    To start testing the imgur API, I decided to make a small webapp that can pull a file off your computer and then upload it to imgur. Turns out the first part can be handled using an input tag with type=”file”. It’s the uploading part that had me running in circles. There were a lot of examples that people had using jquery to make an http request and send that off. But, with the intention to put the code into firefox’s jquery-less source I didn’t want to pull in jquery for this one small feature. There had to be another way.

    The secret was the FormData() and XMLHttpRequest() objects that are native to the web. It was perfect! I found them through some example code that I then adapted for my particular webapp. My resulting upload() function is:

      function upload(file) {
    
          if (!file || !file.type.match(/image.*/)) return;
    
          var fd = new FormData();
          fd.append("image", file);
    
          var xhr = new XMLHttpRequest();
          xhr.open("POST", "https://api.imgur.com/3/image");
          xhr.onload = function() {
              var myParagraph = document.getElementById("theReturn");
              var myImage = document.getElementById("theImage");
              var theResponse = xhr.response;
              myParagraph.innerHTML = JSON.stringify(theResponse);
              myImage.src = theResponse.data.link;
          }
    
          xhr.setRequestHeader('Authorization', 'Client-ID '+ myIDKey);
    
          xhr.send(fd);
          xhr.responseType = "json";
    
      }
    

    This function, coupled with a couple helper functions and the proper html ID’s, uploads an image to imgur, and on response displays the response as text and displays the image. One important part is fd.append(“image”, file), as that is what is adding an ‘image’ property with a value of the actual png. You can check the imgurAPI documentation for more properties you could append. Another important thing is the xhr.onload = function(). This function is what is executed when there is a response from the server. What the function is doing is taking the response and associating parts of it with parts of the html document. Here is the full html doc:

        <html>
          <head>
            <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
            <script type="text/javascript">
    
              var myIDKey = "Register with imgur to get your own auth key.";
    
    
              window.onload = function() {
                var myButton = document.getElementById("theButton");
                myButton.addEventListener("click", uploadFile, false);
    
              };
    
              function uploadFile() {
                var selected_file = document.getElementById('theFile').files[0];
                upload(selected_file);
              }
    
              function upload(file) {
    
                  if (!file || !file.type.match(/image.*/)) return;
    
                  var fd = new FormData();
                  fd.append("image", file);
                  var xhr = new XMLHttpRequest();
                  xhr.open("POST", "https://api.imgur.com/3/image");
                  xhr.onload = function() {
                      var myParagraph = document.getElementById("theReturn");
                      myParagraph.innerHTML = JSON.stringify(xhr.response);
                      var myImage = document.getElementById("theImage");
                      var theResponse = xhr.response;
                      myImage.src = theResponse.data.link;
                  }
    
                  xhr.setRequestHeader('Authorization', 'Client-ID '+ myIDKey);
    
                  xhr.send(fd);
                  xhr.responseType = "json";
    
              }
            </script>
          </head>
          <body>
            <input type="file" id="theFile">
            <button id="theButton">The button</button>
            <p id="theReturn"></p>
            <img id="theImage"></img>
          </body>
        </html>
    

    With the webapp finished, I tried to slap the code into firefox’s screenshot command. That’s when I hit another brick wall. Firefox told me that “FormData is not defined.” What this meant is that FormData objects and XMLHttpRequest were not going to work inside of gcli’s code, and I didn’t know how to make it work. What I ended up doing is googling “gcli xmlhttprequest” and I ended up finding “Cc[“@mozilla.org/xmlextras/xmlhttprequest;1”].createInstance(Ci.nsIXMLHttpRequest).” I’m going to be honest: I don’t know what this means. My limited understanding is that the ‘Cc’ is acting as something like an ‘include’ from other c-based languages. With that found, I was pretty estatic! Now the only thing that I needed was where in the code the actual image was.

    This was now the third brick wall that I had to overcome. In ‘screenshot.js’ there was a particularly interesting line:

        let data = canvas.toDataURL("image/png", "");
    

    To me it sounds like ‘data’ contains the data of the actual .png file of the screenshot. But it wasn’t working! Setting fd.append(‘image’, data) didn’t return any image from imgur. I didn’t know what to do. So again I googled. I researched .toDataURL and found that I was in fact correct: this was the data of the image, but it’s being parsed as a dataURI… which is confusing. I don’t really understand dataURIs just yet, something about embedding data into html. So again I googled. A search for “imgur upload dataURI” resulted in some example code of someone uploading using these dataURIs. Instead of trying to just use ‘data,’ I guess you need to use data.split(‘,’)[1]. I guess ‘data’ is a string with the image data + some other metadata involved. So the .split(‘,’)[1] is splitting up ‘data’ and then only grabbing the second part of it. Luckily this made some sense after reading more about dataURIs.

    With that last piece found I was pretty much done! I could use ‘screenshot –imgur’ to upload a file and have imgur return the uploaded link. But I wanted my function to do more. I wanted it to open up the link in a new tab. After some research, if you use ‘window.open(link)’ in normal JS then a new tab will try and open. I say “try” because firefox’s preferences can stop pages from opening new tabs. It was cool being able to do this in my trial webapp, but alas(!), it again didn’t work in the gcli code.

    For those counting at home that’s brickwall number 4. I wanted to just use ‘window.open()’ but window was already defined in the code to be something other than the window I knew of. So I googled one more time. Searching for “gcli open window” I found a link that I had already seen. But this time it turns out to be useful! Gcli commands are given a set of arguments, and a context for the command. I’m not sure what the context is, but MDN says that ‘context’ has an ‘.environment’ method(? that might be ruby-speak) from which I can call document.chromeWindow() and gain access to the browser. Unfortunately for my work, the function grabScreen() that my imgur upload code sits in, is outside the scope of the screenshot function’s arguments and context. To say: the screenshot gcli command, runs with arguments and context, and then passes in those arguments to a separate grabScreen() function.

    What I ended up doing is adding in the screenshot context as an argument to pass to grabScreen(). I don’t know if that’s within any mozilla coding guidelines, but now that I’ve submitted a patch to bugzilla with those changes, all I can do is wait and see.


    Dive Into Bugs!

    By Tina

    24 Sep 2014 »

    So we’re looking at bugs listed on bugzilla as “good first bugs.” I’ve found a few that I think seem interesting to work on.

    • 1015647 - This bug involves making some console output text copyable. I don’t know exactly where to start, but I think I’d look at console return perameters and try to make the output text be some hypertext link. This may involve looking at how firefox interprets text as a link and then doing that to the console output.

    • 941477 - This bug is more of a request for a mozmill test to be written. I would start by reading up on mozmill test documentation and then jump right into getting the test written.

    • 875773 - Right now when a test to check if an addon is compatible with firefox will only return true or false. To fix it that return should be true or an error with some description of why there is an error. So I’d have to read up on the different ways that an addon could fail compatibility tests.

    • 992386 - This bug is more of a feature request. It involves adding an –imgur flag to firefox’s screenshot console command that automatically uploads the screenshot to imgur. This would involve reading about said screenshot command, and the imgur API to integrate the two.

    • 1072371 - I’m not too certain what this one is about. I guess right now RemoteAddonsParent.jsm is outputting errors, and they need to be resolved. To start this bug, I would email the mentor and ask for some direction on where the file is, how to get the error, and some steps to start fixing it.

    • 1068354 - This one is my bug! It might be above my head, but I’d start by finding where the code for about:newtab is located. Then I’d try and find how a mouse click release event could be used to move the image to the correct location. If I’m excited to fix any of these bugs it’s this one (cause it’s mine!), but I also don’t want to get too deep too soon.

    As it stands now, the imgur request, remoteAddonsParent.jsm, and my bug are at the top of the list. We’ll see which one sounds best to Lukas and Kronda. Stay tuned!


    Second Week Roundup

    By Tina

    19 Sep 2014 »

    OMGWTFBBQ

    So this second week was an adventure. I don’t really remember everything we did, I just know that I’m exhausted from it. I finished up a tutorial on running multiple Firefoxes on the same machine. You can find that post here-ish. If you follow the tutorial, make sure you grab the badge associated with it here.

    It may have not been this week, but I did file my first ever bug with mozilla! The bug is even in release firefox! Check it out at bugzilla.

    Recently, I ran my first mozmill tests. I’m not sure exactly what it says, but you can check it out here. I think it’s saying that all the tests passed, so shoutout to the Firefox dev team for being on point.


    Using Multiple Types of Firefox

    By Tina

    18 Sep 2014 »

    Overview

    To run different versions of Firefox at the same time takes some prior setup. I am going to assume first that you have the release version of firefox installed. To mean: you have (or should first) installed the version of firefox from getfirefox.com.

    Opening Firefox Profile Manager

    With firefox installed, yet not running, open up your terminal application.

    For MacOSX:

    /Applications/Firefox.app/Contents/MacOS/firefox --profile-manager
    

    For Windows/*nix systems:

    firefox --profile-manager
    

    In the profile manager: make 3 additional profiles and name them

    "aurora", "beta", and "nightly"
    

    Uncheck the box that says

    "Use the selected profile without asking at startup"
    

    Hopefully your profile manager window looks something like this.

    profile manager screenshot

    Downloading Other Firefoxes

    First let’s proceed to mozilla.org/beta. From here you want to download and then install the Aurora and Beta versions of Firefox.

    downloading aurora

    downloading beta

    Now go to nightly.mozilla.org and download and install the nightly version of Firefox.

    downloading nightly

    Running all Firefoxes

    If you correctly unchecked the ‘use selected profile at startup’ box in your Firefox profile manager, then when you run any version of Firefox the profile manager should pop up. If not, then see the section “Opening Firefox Profile Manager.” Now you want to select the appropriate profile for the version of Firefox you’re running.

    Conclusion

    And that’s it! You can now open all 4 versions of Firefox at the same time! Feel free to claim your badge here!


    Ascend Project First Week

    By Tina

    12 Sep 2014 »

    This first week of ascend has been a whole lot of config management. To say: we’ve all spent a lot of time getting situated and setting up our potential development environments. Getting a new computer to play around on has been quite fun. I’m all about computer configs and settings. But it hasn’t all been about configuring our computers. We’ve taken a sizable chunk of time making sure our space is as we want it, in a societal sense. I think it’s pretty cool that a program like this would take the time to make sure that each participant can feel comfortable and safe in the program’s environment.

    So far the hardest part has been these creative endeavors. Namely this blog post, the previous blog post, and this intro page I remixed using webmaker.org. I struggle when instructions aren’t clear or I have to choose a creative direction and stick with it. Sorry.

    Never-the-less, I’m still excited about the next 5 weeks of Ascend! I can’t wait until we build firefox from source, change things and see them built into the browser, or fix bugs and watch those fixes make their way to release. I’m really interested in learning how to contribute to FLOSS (Free-Libre Open-Source Software) on a technical level. Hopefully we get into something like that.


    Ascend Project First Day

    By Tina

    11 Sep 2014 »

    Getting right into it, the first day of Ascend was a bit of a blur. After some introductions we all got roped into attending Mozilla’s weekly Monday meeting. The meeting was super casual with a bunch of Mozilla offices from around the globe all streaming to each other. I really liked how they incorporated a wiki for the meeting minutes.

    After the meeting we each got to open a new macbook air. I’m not big on Apple as a company nor their products, but I also have no reason to lament a gift horse! It’s a solid piece of hardware, as most Apple products are, but there are some UI quirks that I’m not a fan of. “Natural” scrolling comes to mind. On a positive note: I really enjoy the fullscreen features combined with quick desktop switching. I can see that being super helpful for workflow.

    Once we all opened our laptops and got them up and running, we were had to do a strength finder exercise. It consisted of 117 (da chief) questions of the “Strongly agree - Neutral” scale. After analysis it came up that I’m strong at: Harmony, Ideation, Restorative, Analytical, and Responsibility. There’s a part of me upset by them using different parts of speech, but I digress. Hopefully my strengths will help me succeed at this program.