Issue #0: Contributing for the First Time

Before I start, I want to thank Firefox.

It is not often I get to be smug about my choice of browser. Usually, I have to go on the defensive about why I use Firefox, only for my reasons to fall on deaf ears and then jokingly be called a loser.

Not this time.

This week’s assignment is a continuation of last week’s. However, instead of working on our own notepad app, we had to work on our classmates’ work. It was an introduction to contributing on GitHub – issuing issues and pull requests, that sort of thing.

So why am I so thankful to Firefox?

Finding Bugs: Multi-Browser Testing

Making a simple notepad app does not require a lot of code. So when I was making mine and it refused to work while everyone around me had theirs working, I was confused. What was I doing wrong?

Turns out I was using Firefox.

Ok, the actual problem was with how Firefox treats the contentEditable attribute. When I deleted everything in the notepad, I could not type anything again, this was because Firefox does not set a minimum paragraph size; this meant that when the <div> was empty, the minimum paragraph size was 0, so I couldn’t type. Chrome doesn’t have that issue.

Code does not react the same way across all browsers. The bugs I found were because Firefox does not work the same way as Chrome. While my friends struggled to find bugs, I only had to load the application on my preferred browser and try to use it.

So again, thanks Firefox. You made this assignment significantly easier for me.

While in my case the application worked properly on one browser, I can’t say the same for the code I fixed. In Chrome, the code seemed like it worked, but in Firefox the feature was broken. It wasn’t until I tried to fix it for Firefox that I found out the feature was not properly working on Chrome either.

When creating web applications, try testing your code in different browsers. While you might not care about multi-browser compatibility, you might be able to notice something about your code that you were not aware of.

You can find what the bug was and how to fix it here.

Adding Features: Back again with Dark Mode

Links: Repository | Issue | Pull-Request | my-note

In my previous post, I mentioned my dislike of the lack of a dark mode option. So when the time came to add a feature, I decided that it would be fun to convince one of my classmates that it was a feature they needed.

It turns out it was a successful endeavor

While drwm-base had decided to use PaperCSS in his app, the process to add dark mode was not significantly different. I only needed to create a button to toggle the dark mode:

<div class="switch"> 
         Dark mode:
         <button class="inner-switch">OFF</span>
 </div>

Added the jquery library:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

And then the code needed to make it work.

 $(".inner-switch").on("click", function () {
                    if ($("body").hasClass("dark")) {
                        $("body").removeClass("dark");
                        $(".inner-switch").text("OFF");
                    } else {
                        $("body").addClass("dark");
                        $(".inner-switch").text("ON");
                    }

If you want a full step-by-step tutorial you can find it here.

The Other Side: Pull Request I received

Changing the save function to catch errors

Links: Contributor| Issue | Pull-Request

My original code would always alert the user that it saved. When I coded that, I assumed that the saving function would always work. But what if something went wrong and saving could not be completed? The user would still get notified that their text was saved.

What Neilon31 did, was add a case if an error occurs, so instead of:

function save() {
    fs.writeFile('/note', JSON.stringify(quill.getContents()));
}

function saveAlert(){
    save();
    alert("Saved!");
}

Which would never let the user know if something wrong happened, He changed it to this:

function saveFile() {
    fs.writeFile('/note', document.querySelector('#note').innerHTML, function(err) {
        if(err) {
            console.error('Error saving', err);
            return alert('Unable to Save!');
        }
        return alert('Saved!');
    });
}

A single function that handles errors.

Closing Thoughts

The more I work with GitHub and git, the more comfortable I feel working on open source projects. I found that it was rewarding helping my classmates make sure their code didn’t have bugs. One of my friends even joked that if a repository existed, I’d forked it – I found that if I found an issue, it was very likely someone else had the same one, so if I knew the fix, why not help out the other person too?

Receiving feedback and help from other users was great. I am far from an expert in JavaScript so having other people look over my code and find issues is a great resource.

2 thoughts on “Issue #0: Contributing for the First Time

  1. A very interesting blog post! Keep up your good work.
    I never paid attention to the difference in implementation of JavaScript standard among various browsers. Thank you for pointing them out.
    I also like your idea of adding a dark theme to the web application. As a to-be-developer, I usually consider any app does not allow me to switch to dark mode as “evil”. It is nice that using your code, we can technically add dark mode to any web app.

    Like

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