Contributing to Open Source Projects

Following my previous blog –Simple Whiteboard Application– we now look at other similar projects and contribute to them. We will be contributing one new feature and one bug fix. We will also review other’s people pull request on my own project.

Raising Issue

The project I raised an issue with is called note-down created by Jatin Arora. I raised issue#1 about how the textbox expands beyond the webpage if there are 7 or more lines of text in the textbox. This may cause problems in the future if more content was added below the textbox making this a bug. I propose a solution of adding a scrollbar to the textbox to solve this problem. I receive approval/assignment and fork the repository to start fixing the bug.

Fixing a bug

The only file we need to change is the main.css file. The solution for this bug is fairly simple, we need to add CSS property overflow: auto; which adds a scrollbar to the textbox. Looking at the original main.css file we find the section we have to edit:

#editor {
    background-color: whitesmoke;
    padding: 0.5rem;
    margin: .2rem .8rem .2rem .8rem;
    border: 4px solid grey;
    min-height: 200px;
    font-family: 'Roboto Slab', serif;
}

While I was testing I realize that overflow: auto; by itself does not fix the problem. After some testing and researching, I figure out that the CSS property height is needed. Looking at the original main.css file we see there is a CSS property min-height. After discussing this with the creator, we decide to remove the min-height property in place of the height property.


Here is the finished product (Code added are in bold):

#editor {
    background-color: whitesmoke;
    padding: 0.5rem;
    margin: .2rem .8rem .2rem .8rem;
    border: 4px solid grey;
    height: 200px;
    font-family: 'Roboto Slab', serif;
    overflow: auto;
}

Pull Request

Once we are happy with our code changes, we push our code to Git using the commands below:

git checkout -b "issue-1" //Note: Invoke before code changes
git add main.css //Note: Invoke after code changes
git commit -m "Fix #1: Adding scrollbar"
git push origin issue-1

I create the pull request on GitHub, and write more details about what I actually changed on the pull request. After creating the pull request I wait for the creator to respond, and merge my code into the master branch.


Adding new feature

The project I added a new feature to is called micro-note created by Thomas Luu. The feature I wanted to implement was the ability for users to download and save their note. I raised issue#1 about the reasons why this feature is a good thing:

  • Have a copy of their note
  • Save the note on their local machine
  • Read their note offline

I would implement this by using FileSaver.js and adding a new button. I receive approval/assignment and fork the repository to start fixing the bug.


There is two parts to the implementation of this feature. Starting with the easier part we first have to create a button. Looking into the index.html file I add the line (Code added in bold):

    <button onclick="save();">SAVE</button>
    <button onclick="saveNote()">SAVE AS</button>

This line of code creates the button needed. I also added an event listener onclick to the function saveNote() which I will develop to handle the file saving.


The second part is implementing the function saveNote(). FileSaver.js provides many examples in it’s wiki and README.MD file. Here is the implementation I used:

//Saving the note on your local machine
    function saveNote(){
        try{
            var blob = new Blob([document.getElementById('note').innerHTML], {type: "text/plain;charset=uft-8"});
            saveAs(blob, "note.txt")
        }catch(e){
            console.log(e);
        }
    }

In the saveNote() function I start off with a try and catch in case an exception happens. Inside the try catch I create a blob variable, which is set to a new blob object taking the parameters:

  • The text to be saved document.getElementById('note').innerHTML
  • type which is text/plain
  • charset which is uft-8

I call the saveAs() function from FileSaver.js passing in the parameters blob and a file name. The function is complete and works fine after testing.

Pull Requests

Once we are finish with the code changes just like the other project we push our code to Git using the commands below:

git checkout -b "issue-1" //Note: Invoke before code changes
git add index.html //Note: Invoke after code changes
git commit -m "Fix #1:New feature for downloading and saving note"

git push origin issue-1

The process is more or less the same as the previous project. I create the pull request on GitHub, and write more details about what I actually changed on the pull request . After creating the pull request I wait for the creator to respond, and merge my changes to the master branch.

Reviewing other’s Pull Request

Reviewing raised issues and pull requests on my application Simple Whiteboard Application.


Issue #1: Readability issues due to improper scaling of content in the app

Looking into the issue, contributor Jatin Arora says my whiteboard application does not have the proper scaling on small screen devices. This means that users who use my application need to zoom in every time they are on a small screen device which is a bug. I reply to contributor Jatin and assign the bug to him. I also add the label “bug” to the issue.


Once Jatin finishes the code changes, he creates a pull request. I review the code changes he implemented, there was only one additional line of code in the index.html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This code changes fixes the problem that was initially raised. Approving the pull request I merge the pull request into our master branch. I close the issue and link the pull request number to keep a record.


Issue #3: Add encryption and decryption functionality for string

Looking into the issue, contributor Thomas Luu wants to add an encryption and decryption functionality for my whiteboard application. There is not much information on the issue itself, this is because me and Thomas had a offline discussion about the implementation of the enhancement. I reply to contributor Thomas and assign the enhancement to him. I also add the label ” enhancement ” to the issue.


Thomas finishes the code changes and creates a pull request. I review the code changes he implemented, the changes are in the index.html file. There are four new functions, two text tags and a new library added to the index.htmlfile.


The new library used is called Crypto-js, which is used for encrypting and decrypting text:

https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js

The two new text tags, which notifies the user to press CTRL+e or CTRL+d to encrypt or decrypt the text on the whiteboard:

 <b>Press CTRL+e to encrypt.</b>
 <b>Press CTRL+d to decrypt.</b>

The first two functions are for encrypting and decrypting the text. Thomas uses the Crypto-js library to encryption and decryption. He uses the passphrase "PaulPass" and converts it back into a string using function toString():

//Encrypt and replace text
 function encrypt() {
 document.querySelector('#whiteboard').innerHTML = CryptoJS.AES.encrypt(document.querySelector('#whiteboard').innerHTML, "PaulPass").toString(); 
 }

 //Decrypt and replace text
 function decrypt() {
 document.querySelector('#whiteboard').innerHTML = CryptoJS.AES.decrypt(document.querySelector('#whiteboard').innerHTML, "PaulPass").toString((CryptoJS.enc.Utf8)); 
 }

The last two functions are setting up the hotkeys for the users to encrypt and decrypt. Using the Hotkey.js library to setup the hotkeys, Thomas calls the encrypt() and decrypt() functions:

 hotkeys('ctrl+e', function(event, handler){
 event.preventDefault();
 encrypt();
 });

 hotkeys('ctrl+d', function(event, handler){
 event.preventDefault();
 decrypt();
 });

Approving the pull request I merge the pull request into our master branch. I close the issue and link the pull request number to keep a record.


LINKS:

My simple white board application:
Note-down
Micro-note:
Other:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s