For my last Hacktoberfest PR, I decided to contribute to NodeJS project once more since it is a trending big project and I thought there is a lot of space for me to step on. I started searching through the project again and found that for some of their tests, they use assert.throws when they expect an error, and sometimes it is better to use one of their helper modules common.expectsError. First, I started by studying what these functions do and how they work. expectsError method is from the common helper module and takes three arguments: A function passed to assert.throws, settings that specify details of the error, and a number that represents how many times the function in the first argument is called. This method is usually used in cases where a certain error is expected providing more details than just using assert.throws. After studying through the functions, I took a while to search through the test files and find a perfect one to fix. Finally I found one and posted an issue as follows.

Work Process

assert.throws(CreateTooBigBigInt, {
  name: 'RangeError',
  message: 'Maximum BigInt size exceeded',
});

In the original code, it was using assert.throws to catch the ‘RangeError’. It creates a really big sized integer and checks if it’s throwing an error correctly. I decided to change it to use common.expectsError as explained above.

common.expectsError(CreateTooBigBigInt, {
  code: 'ERR_INVALID_RANGE',
  name: 'RangeError',
  message: 'Maximum BigInt size exceeded',
  type: RangeError
});

This is how I transferred the existing code to fit into the new method. It still passes the same function to assert.throws but provides more details about the error in the second argument. In this case, it provides the code, name, message, and type for the expected error. I finally submitted a PR with this change, but it actually failed one of the automated tests. One of the reviewers explained the way to run the test locally, and now I need to go back to my file to analyze what the problem is.

Overall

This PR is similar to PR#3 I made but is more advanced in that I actually had to change the frame. It didn’t take me a long time to actually make changes but took me longer to find the issue and study through the codes to understand how they work. I don’t think I’ll be able to complete the PR and make it perfect in a timely manner but I will keep working on it until I actually make it work.

Links

• Issue : https://github.com/nodejs/node/issues/30185
• PR : https://github.com/nodejs/node/pull/30186

This time, the process to find an issue was a little different from the previous ones. For the first and second PR, I used to go to the issue tab of the project to look for existing issues, but this time, I searched for the issue and posted the issue myself. The project is called NodeJS, which is a very popular and big project. Since it is big and little challenging for beginners to touch, they provided a website called ‘Node Todo‘ where it provides a list of commits made that all beginners can use as a guideline. By searching through these commits and reading through test guidelines, I found that they use JavaScript files for their tests and prefer to use arrow functions for callbacks to improve test efficiency. It actually took me longer than I thought to find a perfect test file to refactor because there are more than 3000 files inside the test folder, and a lot of them were already fixed. Finally I found an appropriate file called test.js and decided to fix it. Since I found the file to fix, I had to post an issue myself. This is the issue I posted.

Work Process

According to the provided test guideline, common.mustCall() is used to check that some callbacks or listeners are called. common is like a helper API containing various helper functions that can be used in tests, and mustCall() method is one of the helper functions. It is preferred to use arrow functions with that method, but the test file I found was using regular functions.

Promise.resolve(1).then(common.mustCall(function() {
    results.push(7);
}));

This is one of the examples how the original code looked like, and I changed it like this:

Promise.resolve(1).then(common.mustCall(() => {
    results.push(7);
}));

There were bunch of places this happened so I fixed all the places and submitted a PR for that. Soon after, the change was approved by six reviewers but didn’t pass one of the CI automated tests. One of the reviewers commented that it might be because I didn’t follow the guideline for making a commit message. I used the commit message with the ‘keyword’ as I learned in the class, but NodeJS had their own guideline for that. The commit message should start with a valid subsystem name, and in this case, it should start with 'test: ......' since I fixed a test file. Now I just need to fix the commit message and hope that it can be merged after that.

Overall

It was a good experience in that I was able to work with a really big project and that the work process was a little different. Especially this time, I was able to write and post the issue myself and I really enjoyed the process.

Links

• Issue : https://github.com/nodejs/node/issues/30068
• PR : https://github.com/nodejs/node/pull/30069

The second issue I worked on is for a project called CDNJS, a website hosting all kinds of popular libraries for JavaScript, CSS, SWF, images, and etc. There is a search feature on the main page that enables users to search any libraries they want. It returns matching libraries in a table view containing library names, descriptions, links, and other details. To go into the detailed library page, users have to click on the library name specifically from the table. An issue is raised here pointing that this is a tedious job, especially if the name is short because there are really short names too such as ‘d3’. The issue was requesting to make the library name and description a single button to make selection easier.

Working Process

As I mentioned in the previous post that I want to have more communications for the next issue, I was able to go through more communications this time. First I started by asking if I could work on the issue. One of the members kindly responded providing the relevant code. I read through the HTML and JavaScript files to investigate the code. The code was designed dynamically so that when the user starts typing in the search box, it passes the JavaScript code generating a table with all matching library information.

'<p>
    <a itemprop="name" href="proxy.php?url=/libraries/' + hit.name + '">' + 
     hit._highlightResult.name.value + '</a>
</p>' +
'<p class="text-muted">' + description + '</p>' +

This is how the original code looks like in the relevant part. Only the library name is passed as <a> link so that it’s clickable. The first method I came up with is surrounding both the library name and description in a <div>, and making it clickable using jQuery because the website was using a lot of jQuery methods.

// html
'<div class="clickable" style="cursor:pointer;">' +
    '<p>
        <a itemprop="name" href="proxy.php?url=/libraries/' + hit.name + '">' + 
         hit._highlightResult.name.value + '</a>
    </p>' +
    '<p class="text-muted">' + description + '</p>' +
'</div>' +

// jQuery
$(document).on('click', '.clickable', function() {
        window.location = $(this).find("a").attr("href");
})

Once the <div> area surrounding the name and description is clicked, the jQuery function is executed to set the current position of the page to the position pointed by the ‘href’ attribute of the <a> link. I made a PR with this change and it passed all the automated tests. But the reviewer didn’t like the change and wanted to make it simpler by just moving the <a> element instead of adding another jQuery function.

'<a style="text-decoration: none;" itemprop="name" href="proxy.php?url=/libraries/' + hit.name + '">' + 
  hit._highlightResult.name.value +
    '<p class="text-muted">' + description + '</p>' +
'</a>' +

This is the second solution I came up with. I removed the <div> element and the jQuery function and moved <a> element to surround the description part as well. But I noticed that this solution makes the whole description part underlined as well which looks a bit messy. So I added inline style to remove ‘text-decoration’. I pushed the new commit to the PR, and the reviewer left a few more points that need to be changed based on project standards.

Now I need to make more changes according to the review comments and hope that it can be merged after that.

Overall

Since I didn’t have any communication involved in my first PR, I enjoyed the experience having communication with the reviewer. As I received feedbacks, fixed the code according to the comments, and resubmitted the PR, I felt I was actually working at a company. I believe that all these processes will improve my programming and communication skills.

Links

• Issue: https://github.com/cdnjs/new-website/issues/277
• PR: https://github.com/cdnjs/new-website/pull/304

For my first PR, I was looking for something that is not too challenging but still includes some programming. I found this issue from ‘Up For Grabs‘ provided on the assignment page. The project is called ‘BlindChat‘ which is a Facebook messenger bot that enables people to chat with other random people. This issue was raised to point that the profile page doesn’t look pretty and the design should be improved. I thought this is the perfect issue for the first PR since it was including some programming work but only the front-end part that wasn’t too challenging.

Original Profile Page

This is how the original profile.html looked like which looks a bit clunky and old-fashioned. So I made these six main changes to make it look more modern:

1. Switched to use the latest Bootstrap version.

// Original code
<link rel="stylesheet" href="proxy.php?url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

// New code
<link rel="stylesheet" href="proxy.php?url=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

I noticed that Bootstrap version is out of date, so I changed the link to reference the latest version of Bootstrap.

2. Imported and used Ubuntu font.

<link href="proxy.php?url=https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">

style="font-family: 'Ubuntu', sans-serif;padding

I used one of the Google fonts called ‘Ubuntu’ font to make the page look more modern.

3. Used Bootstrap card as a frame.

<div class="shadow-lg rounded">
    <div class="card" style="background-color: #FAFAFA">
        // contents
    </div>
</div>

Card is a new feature provided by Bootstrap 4 and it works as a container. With a shadow effect I added to make it look 3D, it helped modernize the general look.

4. Changed ‘bio’ text input to textarea for better display.

// Original code
<input type="text" name="bio" class="form-control" value="{{ bio }}" style="height:100px;font-size:30pt" placeholder="Write your bio here"/>

// New code
<textarea class="form-control" name="bio" rows="5" style="font-size: 20pt" placeholder="Write your bio here">{{ bio }}</textarea>

I thought it might be more efficient to use <textarea> for biography because it won’t be readable with that one line of input text box if the biography gets longer. In <textarea>, I can specify rows, and if it goes over the specified rows, I can use the scrolling feature to read the contents.

5. Used Bootstrap classes to balance the page.

To control locations and margins of all elements, I added a bunch of different Bootstrap classes to most of the tags.

6. Adjusted font size and background colour to make it look more modern.

<body style="font-size:2em;background-color:#E1F0FD;background-image: linear-gradient( #64B7FF, #E2F2FF)">

The previous code was using a lot of inline styles, so I followed the way it was written and styled some tags using inline styles. For example, the above code is setting the font size used in <body> and giving background colour a gradient.

New Profile Page

This is the final version of profile.html. While I was fixing the code, I tried to make it look brighter, fresher and more modern without touching the base frame too much.

I think it was a good exercise and warm-up for the rest of the Hacktoberfest. One thing that I didn’t get a chance to practice for this PR is communication. The issue itself was a perfect one to begin with but it has been opened for a long time and nobody seemed to care about it anymore. Since I opened the first door of Hacktoberfest smoothly, I will try to make more communications for the next issue.

Links

• Issue : https://github.com/mayukh18/BlindChat/issues/7
• PR : https://github.com/mayukh18/BlindChat/pull/39

While I am getting ready for the coming Hacktoberfest 2019, I set two goals for myself. First, I want to improve my code analytical skills. This is actually my first time to be involved in this kind of event, and I will surely get chances to participate in bigger projects. To fix a bug or an issue, I will have to spend a lot of time reading through the codes since most projects are bigger than the ones I used to work on. It will take longer time and more effort in the beginning, but I hope I get much faster in analyzing codes by the end of this Hacktoberfest. My second goal is to improve my communication skills. This is a good opportunity since I will get to have many conversations through messages or comments. Also through all these communications, I will be able to learn how each task is handled in open source projects and apply this knowledge to any future projects.

Projects

1. Node.js

I have been interested in Node.js and I also built a project using Node.js. Using Node Todo as a starting point, I will look for what I want to work on and submit an issue.

2. Axios

Axios is a useful and easy-to-use HTTP client for the browser and node.js. I’ve been using this a lot to make HTTP requests and now I want to contribute to one of the project.

3. React

I’ve been using React a lot for my projects a lot and I found it really comfortable and useful. I always wanted to take a part in its development, and this is the perfect chance to do it.

Issue | Pull Request

function saveNote(content) {
                fs.writeFile("/note", content, function (err) {
                    if (err) throw err;
                    else console.log("Document saved: " + content);
                });
            }

I filed an issue indicating how the error is being handled in the above code. In case that there are any errors, the function was just throwing that error. With this code, the users wouldn’t be aware of what’s happening if there are any errors.

function saveNote(content) {
                fs.writeFile("/note", content, function (err) {
                    if (err) {
                        return alert("Unable to save the note: " + err);
                    }
                    else { 
                        console.log("Document saved: " + content);
                        alert("Note saved!");
                    }
                });
            }

The fix was not so complicated. As in the above code, I changed the code to return an alert message saying “Unable to save the note” with the actual error message. With this change, the users will be notified with the error message in case of any errors. This is a very small change, but I think it has a big impact on user convenience.

Lesson

Since this was the first pull request I made in Github, I made a small mistake when I was creating a pull request. When I was filing the issue, I wasn’t aware of all the closed issues and thought this issue was the first one. As a result, I ended up making a commit and creating a pull request with a wrong keyword ‘Fix #1’ when it should’ve been ‘Fix #5’. Fortunately the owner of the upstream repository noticed and addressed that mistake in the issue comment. Finally I created a new branch called ‘issue-5’, committed and made another pull request with the correct keyword pointing to the right issue. It was a useful lesson that I need to be aware of all other closed issues when I’m filing a new issue.

2. Adding a Clear Button / Hotkey Feature

Issue | Pull Request

By looking at the above note taking app, I noticed that the app looks really simple, there is a big space to take more features to improve the app. To me as a user, the first thing that caught my eye was that there is no feature to clear the whole content. When I write a note, I make a lot of mistakes and often erase everything I wrote and start over. Without this feature, I would have to manually erase the whole thing I wrote which is very inconvenient. I filed an issue indicating this, forked the repository, cloned to my working machine, created a new branch ‘issue-5’, and started working on it.

<button onclick="clearNote()" type="button">Clear Notes</button>

function clearNote() {
         document.querySelector('#notepad').innerHTML = 
                  "Welcome to my notepad! Please start typing here: ";
     }

To make the clear button work properly, I created a button “Clear Notes” and linked the button to call ‘clearNote()’ function once it is clicked. Inside the function, I set the innerHTML message as the welcome message so that everything else can be removed from the text box. I didn’t write it to the file because I thought overwriting should be done with the save button. So the clear button won’t save the clear state of the text box but just help the user get a fresh start.

<script src="proxy.php?url=https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>

hotkeys('ctrl+e', function() {
             document.querySelector('#notepad').innerHTML = 
                   "Welcome to my notepad! Please start typing here: ";
        });

I also added above hotkey feature to perform the same functionality. To accomplish that, I added a reference script to enable the use of code, and added a hotkey function that basically does the same thing as the clear button. Now the note can be cleared by clicking a button or pressing ‘Ctrl + e’.

3. Reviewing Pull Requests

• Review #1 – Add a default message

This review I did was for the pull request made to my repository trying to add a default message such as “Welcome to my notepad” if there is no content in the notepad. My note app was originally displaying nothing when there was no content. By reading the issue filed, it made sense to me to add some kind of message welcoming the users or giving some kind of instructions to type something in the text box.

When I received the pull request, I was satisfied with the simple change and that it actually improved my app. I pressed the ‘+’ sign on the left side of the code and left a comment to appreciate the good work and merged the change.

• Review #2 – Responsive bug

This pull request is not actually made to my repository, but I decided to review it because I liked that one line addition above. It is a simple addition but by adding that line, the users will have better experiences on their phones as well as other tablets.

I added a comment to compliment the work, and the pull request was merged soon after.

Overall Experience

I went through all the processes to contribute to other open source projects, and overall, it was a good experience. I learned how to file an issue, fork the repository, clone to my working machine, create a new branch to work on the issue, commit and create a pull request with a proper keyword, and review others’ pull request. More importantly I learned that it is the best to learn through trial and error. With all these knowledge and experience I acquired, I’ll keep searching and contributing to other open source projects, and I believe that it’ll improve my programming and communicating skills and help me create my own project later.

Main features include:

• A text box with a scrolling feature
• A button to save the written text
• A button to clear the text box
• Once saved, the content remains in the text box even after refreshed

Links:

• Github: https://github.com/mpark86/my-note
• Website: https://mpark86.github.io/my-note/

React Native is an open source cross-platform app framework created by Facebook. It basically enables us to develop native mobile apps in iOS or Android using React and standard Javascript syntax. It is very similar to React except that it uses real native components instead of web components. For example, React Native doesn’t use HTML tags such as <div> or <p>. Instead it uses <View> or <Text>. Other than that, it is very similar to React, so if you have experience with React, you will be able to easily adapt to this technology even if you’re new to this.

It is one of the top cross-platform app frameworks along with Flutter, Xamarin, and Ionic. Because the certain benefits that React Native has such as simplicity and a rapid development cycle, it is used by many apps or services such as Facebook, Instagram, Walmart, and etc.

I chose this open source project because I have experience with React, I am interested in developing mobile apps, and I found React Native to be the perfect solution. As a user, I would like to contribute to its development to make my experience with React Native even better. I think it is very useful, still an active open source project, and has a bright future.

More Information

• Documentation: https://facebook.github.io/react-native/docs/getting-started
• Github: https://github.com/facebook/react-native