Lab3

As a class we are preparing for Release 0.2 of the course. After the first year of my CPA program, I was looking forward to this class the most, because we would be working/contributing to open source projects with a professor who is experienced in working with open source.

Now that I'm here trying to find projects to contribute to as part of Hacktoberfest, it is really scary. As a student who is graduating soon, I want to work on projects that I can put on my resume or portfolio to convince employers to hire me. Two big issues exist, most people are thinking the same thing, trying to contribute to a big name project so they can have that under their belt. The other issue is... where the hell do I start? If anyone has taken a look at these code bases, they're huge. Where do I even begin? For example, this project I'm looking at is written in Javascript or Typescript, how come I only recognize a few lines when I've been doing this for 2 years?

As part of Hacktoberfest we are to contribute with 4 fixes or enhancements, an average of about 1.2 weeks per issue. Honestly, I don't even know if I can accomplish this as trying to understand the code or navigating around is difficult. I spent the better half of the day already looking at the repos of the companies I would be interested in working at or the repos of technologies I use a lot (Nodejs, Express), the issues available look like they're way in over my head.

I also think this is why open source is so scary, in class work there's always answers, profs are always there to help you and if you're stuck they'll have the answers ready. This is the total opposite of that, it's daunting yet at the same time exciting.

As part of my Hacktoberfest release I'll try to work on the following projects:

Offline QR Code
https://github.com/rugk/offline-qr-code/issues/84
Refactoring, kind of easy task, however there's lots of files to navigate through and also a styling guideline by the author.

Google Blockly
https://github.com/google/blockly/issues/2949
Functional issue, I have not taken a look at the code base yet, however... It is Google and I am extremely interested in working on projects introducing coding to others as that's how I started.

Facebook React
https://github.com/facebook/react/issues/16763
https://github.com/facebook/react/issues/16495
I used react a lot and it is the front end framework I'm most comfortable using, I think it is about time to contribute back to the project and find out how it works.

The projects I chose escalate in terms of difficulty and available help although they are all labeled 'beginner issues'. The first project is maintained by the owner and his replies are extremely frequent. With each successive project, the code becomes more complicated and less hand holding is offered. If I can contribute to each issue posted or to issues with code bases of similar scale, I think I'll have reached my goal for Hacktoberfest of dipping my feet into open-source.

Release 0.1

Release 0.1

This was a fun one, building upon our Lab2 we were to review other students' apps and make:

• 1 bug fix
• 1 enhancement

The release was great practice, because it provided us an idea of the process of contributing to an open source project.

1. Reviewing code to create issues/review issues
2. Fork the repo to your own repository
3. Clone repository to local machine
4. Create a working branch for the issue
5. Make enhancement/Fix bugs
6. Commit changes to branch
7. Push branch to repository and make a pull request to master branch of the original repository

I worked on the following:

1. https://github.com/evlnyng/CornellNote/issues/2

For this one I made an enhancement to include a package that would allow for hotkeys to be used while in the app to enable saving of all notes with ctrl+q. I previously had thought about creating a hotkey to close the window too, but it was redundant as users of windows/mac already have a key function for that. 

To allow this feature, I also had to allow create a save function as the existing save function in the code was written into one feature as part of the auto save. 

Furthermore, learning from my own mistake I made with my hotkey implementation on my own app, I decided to add message notifying the user, the current text has been saved.

In the future if I was to make a suggestion, I would suggest to rewrite the auto-save function to include my save function and make it more modular.

2. https://github.com/RyanWils/my-note/issues/7

This one was interesting, I learned a few things. Test, test, test do not assume. This was supposed to be a simple bug fix, the user had repeated the line document.querySelector('#note').innerHTML 5-6 times in their code. I thought great, let's suggest a variable to hold the whole thing to reduce the number of keystrokes in the future if the user decides to use the selector in the future. I stupidly assumed I could do the following:

  var noteHTMLSelector = document.querySelector('#note').innerHTML

and didn't follow up by testing to see if it broke or worked. Thankfully another contributor called Jacob caught the issue. I learned you can't assign the innerHTML part to a variable as strings are immutable in javascript (thank you stackoverflow).

In the end the following changes I made was:

  var noteSelector = document.querySelector('#note')

and users will have to use

  noteSelector.innerHTML

to access the text to make changes or to use for functions.

I received the following pull requests:

1. https://github.com/c3ho/whiteboard/pull/2

Again I learned a lesson from this one which I'll go into detail at the end. Review was a simple one, in my original code, anytime the app is saved: a message will be output to console that the note has been saved. However, unless you're a developer, most people don't check console on their browser, so they'll never see the message. This change allowed users to see explicitly see within the app, the note was saved. I also learned, potential enhancements/bug fixes can actually cause more bugs if they're not reviewed properly. Again, I should've paid more attention in reviewing the enhancement as it created an issue where by default a message showing the current note was saved even though nothing was typed, which paved the way for pull request #2

2. https://github.com/c3ho/whiteboard/pull/4

This removed the default save message displaying at the start. Simple fix, but made the app more clean.

On a side note, I had the biggest issue while making changes to repo 2 in the blog. I had set my upstream and everything to the remote branch, however things weren't updating... even with a git pull. When I pushed my changes and requested a pull from user, it wasn't being accepted because mine was out of date (or so I suspect). It took forever to figure out how to reset my local master to the version of remote master (I promised our prof I would only clone a repo once), after all that my master branch was behind my issue branch and it took more to figure out how to get the two to match up. I finally figured it out and that felt like an assignment in itself.

Whiteboard App

Lab2

Of the OSD600 class, we were tasked with writing a online notepad app with Javascript. The end result is the following.

It was a nice refresher to start off the school term. It was also pretty embarrassing as I wasn't able to get output on my screen even though I thought I had the code right... Asked the professor to come over to help me take a look and he mentioned a few lines in my code wasn't right because it was written like React instead of vanilla Javascript.

On top of using Javascript, I also included PaperCSS for the change in the font and to make it look more like a notepad app instead of a browser with editable text.

Lastly, Hotkeys.js was used to create a ctrl+s command that will save the text in the browser every time it is pressed, the default command was overridden/prevented to prevent the browser from attempting to save the current web page.

One technical thing I did learn from this assignment was never to use document.querySelector.write and instead use document.querySelector. I'd like to thank the professor for this.

First Post!

GraphQL

The repository I chose for my first blog post is called GraphQL, it is a query language API developed by Facebook and an alternative to REST APIs that is widely used in today's web architecture. One of the major differences between GraphQL and traditional query languages is the ability to define structures for data and also the data to be returned, this allows for users to be able to reduce the amount of data they receive back from the service.

For example USGS maintains a earthquake catalog of all earthquakes that have occurred ever since they could be tracked properly.

They have an API that returns the following data.

This data is great... for a geologist who wants to know all aspects of the incident. However as a person who is just curious about:

• the magnitude of the earthquake
• location of the earthquake
• link to the incident

I don't need the rest of the information, and that is an issue to itself. I don't imagine there being too many people wanting to know about earthquakes. But imagine there are millions of people like me who are just curious about three bits of information I listed above. Anytime they request for any earthquake, information in the form of that image will also be returned, meaning that is wasted bandwidth the server is sending, because none of us are interested in it. Unless there was another endpoint on the site that can send less data, any users requesting data on earthquakes will always receive information more than just the magnitude, location and link to the earthquake info.

Since it is newer technology, adoption, tools and integration are not as widely available, although it is improving. Another downside to GraphQL, is ironically its strength. It allows users to define structures for their data, however this freedom also presents a downside. If the user creates a query that's too open, like retrieving friends of friends of friends of friends and so forth, one could severely affect the server's performance or worse just take it down completely.

The reference implementation of GraphQL, GraphQL.js is licensed under the MIT license allowing users to almost freely use the downloaded source code.

Resources:
https://blog.apollographql.com/facebook-grants-full-patent-rights-to-all-graphql-users-2c41abc6df66#targetText=MIT%20license%20for%20GraphQL.js&targetText=Part%20of%20today's%20announcement%20is,Apollo%20GraphQL%20open%20source%20tools.

https://graphql.org/learn/

https://earthquake.usgs.gov/fdsnws/event/1/