Hacktoberfest - 4 Pull Requests in 4 weeks

Hacktoberfest: Status as of Oct 31st

I started off strong with pacdiv and the regex.guide app, which I'm proud to say still includes my reset button. I plan to contribute more to pacdiv's app in the future as I really enjoyed the experience and I liked using Gatsby.

Emojipages continues to expand, however it seems like my pull request was left in the dust. It is well behind the current version. I thought the repo owner Brittany was taking her time to read and review the code, but it turns out she just ignored it completely. I plan to update it to the current version, and try to resubmit, but I'm afraid that I just don't have time to do it before Oct. 31st. So I plan to work on it in my own time next month, or possibly for Release 0.3.

PlexisJs has updated and not included my code, I am updating my pull request as I type this in the hopes that it is accepted soon. It may be too late for Hacktoberfest, but I really want this to go through as I really liked the community.

On a brighter note, my last pull request to OpenClimateFix was reviewed and merged by the maintainer FWirtz.

My Experience

This month was like a roller-coaster, and one of the most difficult I have ever had in school. I had a LOT to do this month, and Hacktoberfest was by far the nicest part of the month for me. I had a lot of assignments, midterms, tests, and pull requests to make this month, and I barely got it all done. My study week was spent researching, writing, and fixing code, and virtually nothing else. It was a terribly difficult month for me. The silver lining was Hacktoberfest in the end.

I got to see all of the amazing projects my peers worked on, and I even got to work on some of those projects myself. I searched through hundreds of interesting projects and communities, and found many projects I wanted to be a part of, but was too inexperienced in the material or lacked the time to get involved in. The projects that I ended up working on were all great projects with amazing goals like researching climate change using open source technology, teaching Javascript programming through a library that anyone has access to, and making regular expressions easier to make and more accessible to new programmers. I also participated in making a game, something I've always wanted to do, and even though it was a simple quiz game I learned a lot about Javascript while working on it.

Goals

I set four goals at the beginning of Hacktoberfest, two of which I now realize were a little too ambitious for different reasons, and two of which I achieved multiple times this month. The goals are:

1. To work on a product that I use frequently, and have my pull request confirmed and accepted to the project.
2. To learn more about databases in a project that I work on, as I am very interested in database design.
3. To contribute to a project that involves UI design, which I love to work on.
4. To ask for help from my community and the online community as well.

For my first goal, I failed because it turns out that the projects I had in mind (GIMP, Musescore, and StarUML) were all either not on Github anymore, never have been, or are almost dead entirely. I looked for others but it turns out I don't use that many open source programs, and I couldn't find issues in other projects that I had any notion of how to find or fix.

I failed my second goal because it was extremely difficult to find any projects that used databases on Github, in any language that I knew. I eventually found one but it was too large for me to finish this month, and is one of the possible issues I might work on for Release 0.3.

My last 2 goals I succeeded in many times. Almost all of my projects involved UI design, and it solidified my resolve to become a web developer, as I was unsure before of what field I was most interested in. The last one of my goals turned out to be the most important one of all, the thing I needed to learn most was to ask for help more often. Every time I asked for help, my big issues became small quirks that fixed themselves. I was nervous at first to ask for help, preferring to do things my own way, and now I am more eager to ask for help than ever before.

OpenClimateFix and OpenGraph

OpenClimateFix, OpenGraph, and the Issue That Saved Me

I have had an interesting time this month. I will detail my experiences with Hacktoberfest in a later blog post, but yet again, I've gotten ahead of myself. You know the drill...

OpenClimateFix is a non-profit research organization using open source to spearhead projects to help the environment. Their website displays their initiatives, goals, and sponsors, and it is imperative that they be shareable on social media. Which is why they need better OpenGraph representation.

Choosing the Issue

The issue I chose was to adjust the OpenGraph representation of the site. In order to do this, I had to research a few things. First of all, what is OpenGraph? OpenGraph is protocol for creating meta information on websites, in order to create previews of those sites when sharing the link. For example, if I were to share a youtube video, a preview of the video will load and a title, description, etc.

Example: Youtube Video

The issue was to add an image to the OpenGraph metadata, for both twitter and other sites. A sample of the old version is shown below:

Old OpenGraph Link

 Preparation to Update the OpenGraph Metadata

The project is compiled with yarn and run with Gatsby surprisingly. Gatsby was the bane of my first pull request, as I learned to use it. So at least I know that. The other thing that I had to learn was how meta data is generated and used, which I have not used before. I have worked on web development courses before, and yet I have never created metadata. Finally, I had to understand the OpenGraph protocol, which was surprisingly easy to learn. It is simple, and easy to grasp, I just had to read their website which I linked above.

The Solution and Pull Request

Simplest Solution of the Month

I had to compile and run the project in Gatsby in order to test my code. I edited one file: seo.jsx. This file contained the code to create all the meta information, and I had to add 2 new meta elements. Both of these elements look similar, and for both the image links to the github url of the website logo, as the image property cannot point to a file. The image must be available online.

Adds OpenGraph image link

{

property: 'og:image',

content: 'https://raw.githubusercontent.com/openclimatefix/website/master/src/

images/logo_dark_square%402x.png',

},

Adds OpenGraph twitter image link

{

property: 'twitter:image',

content: 'https://raw.githubusercontent.com/openclimatefix/website/master/src/

images/logo_dark_square%402x.png',

},

The new OpenGraph Link

Testing

In order to test my work, I couldn't simply copy the localhost link into twitter and see the OpenGraph representation. So instead, I got a chrome extension called Localhost Open Graph Checker that retrieved my metadata and created a URL for me to test my OpenGraph metadata on, which worked.

Pull Request Status

I have submitted a working pull request, to my knowledge.

Interaction with OpenClimateFix

To be honest, there has been no communication with them so far. I am confident I will receive a reply to my work eventually, but for now I have heard nothing. Other students in the class have worked on this project and have talked to the owner, in fact I found this project by reading blog posts. I have interacted more with my classmates that OpenClimateFix.

UPDATE OCT 30: I have received a message from the repository owner that they will review and merge my request before Hacktoberfest. I will provide an update tomorrow.

Aside from this, I also tried to contribute to one of the other issues on the site, a much more complicated issue involving moving an image of clouds in the background as you scroll on mobile. It would have been a bug fix, something I've been wanting to try for a while. The problem is that this issue is impossible to fix with the current architecture or requirements. The site uses jQuery to update the cloud image on desktop, but jQuery itself does not track scrolling on mobile. In fact, because iPhones freeze the DOM while you drag across the page, you cannot update the clouds as you scroll. The only solution is to animate the clouds to move, and that would require an new issue. I reported this to OpenClimateFix devs, and I am waiting for a reply.

UPDATE OCT 30: FWirtz responded and thanked me for researching the issue.

Problems I Encountered

This project was simple but interesting, and I didn't encounter too many problems, however:

• I had issues with the first issue I picked, as described above.
• I have had little to no contact with OpenClimateFix community
• I am unsure if the change is good or not, as I await some kind of response.

At least my Hacktoberfest experience is over, and although it has been fun, my next blog will detail what I learned and how my perspective has changed over the course of the month.

Plexis - An open source community project

Plexis and toSwap - Not Just a Function

So it's been a while... I didn't want to leave this for so long, but school got the better of me, and I fell behind. I've just come off a very restless study week, and now it's time for my third pull request of Hacktoberfest! It took me literally 2 days to find the issue I worked on, and my fourth and final issue is still in the works. But, as usual, I am getting ahead of myself...

Plexis is a string manipulation library, that is purely community driven. This is one of the main factors that drew me to plexis. I wanted to get involved with a community and I think plexis is something that I will work on again, and possibly join the community. The focus of plexis is to help newcomers to javascript get used to open source project development and maintenance. It is also in the form of a library, meaning that my function will be part of an npm library. I was so excited to get started!

Choosing the Issue

The issue I chose was to create a swapping function, called toSwap. toSwap accepts a string as input, and swaps each set of 2 letters in a string, until reaching the end of the string. For example:

toSwap('ab'); //returns 'ba'
toSwap('hello world!'); //returns 'ehll oowlr!d'

This function is by no means difficult to write, or challenging to implement, but the challenge turned out to be in testing and formatting. I chose this issue for the community aspect, which I will get into more later, and the fact that I've never worked on a library before, and I was interested in the pitfalls I might encounter.

Preparation to Create the toSwap function

First, I had to fork and clone the repo, a process I have mastered compared to my first pull request back in early September. I had to install yarn and lerna in order to get started, and learn-a how to use them (sorry for the bad pun but I had to!) Yarn is similar to npm, as it manages node_modules packages, and was fairly simple to understand and get familiar with. I have never encountered lerna before, and on researching it, I discovered that it is a tool used to manage javascript projects with many packages. In order to create a new package in plexis, I had to install lerna globally, and learned how to use it for the purposes of this project (I won't make the pun again).

The project also made use of npm in conjunction with yarn, and jest. Npm is a very common package manager, and Jest is a testing framework that is also being run by yarn.

The Solution and Pull Request

Creating the Package

I ran the command "lerna create @plexis/to-swap" to create a package named to-swap. This package had to be renamed and changed to follow the template required by the repository owner. There are four important parts to each package: src, test, package.json, and README.MD. 

Src

This is where the source code is stored for the function itself. Included within was simply the toSwap function, implemented by splitting the given string into an array, iterating through the array and swapping the necessary values, and then joining the array back into a string. A simple function, and the easiest part of this whole process. I have also included jsDoc information for the function at the top, denoting parameters, returns, and examples.

test

Test contains a file that stores all of the Jest test cases. These test cases are simply there to test my function, and see if anything breaks it in the future. I have test cases for small strings, longer strings, odd numbered strings, and empty strings. I also included cases with spaces and non-alpha-numeric characters.

package.json

I am not going to show the package.json file as it is boring, and very little is to be gained by looking at its code. Essentially, lerna uses a package.json file in every package in the plexis library. These package.json files are linked together in a lerna.json file. This makes additions to the library really easy to do and reduces the amount of work a maintainer has to do. The file contains the name, description, version, and locations of the source files for the plexis library.

README.MD

This is simply a description of what the toSwap function does, with examples and aliases. It is written in markdown and is commonly found on Github, but you know this...

Pull Request Status

I have submitted a working pull request that has passed all tests, and I am waiting for approval. 

Interaction with the Plexis Community

So far, I have only interacted with vorillaz, who looks to be the most active member and possibly the owner. He has been very pleasant and welcoming. We have had many conversations and I have asked for his help with multiple aspects of this project. Although it seems simple, and the code is VERY simple, actually getting it to submit and pass all tests was difficult. He helped me to understand all of the extensions that were being used, and I think that I learned a lot from him.

UPDATE OCT 28: I also interacted with Brandon Skinner, who informed me that I was missing the API documentation. I quickly added it and now I am waiting for approval again.

In the future, I plan to continue to interact with and contribute to this community, especially now that I know how to add packages and I am very familiar with the process. I think that their focus on community is strong, but still small. I don't think they even have a slack, or any means of communication aside from Github. 

Problems I Encountered

This project was a rollercoaster. I had so much to learn and adapt to and was equally infuriating and enlightening. Some of the problems I encountered and the things I learn-a-ed (I couldn't resist!).

• Finding the issue itself (took 2 days)
• How to install and use lerna (finding documentation was very difficult for some reason)
• Creating the package template (dead links lead me to 404 pages, had to ask for help)
• Asking for help (something I struggle with daily)
• I created all the tests and added everything, and nothing worked
• I couldn't figure out why, so I created a pull request anyway and researched
• I ended up figuring out that I had missed a file, and created it.
• It is essentially the same as the source file, and isn't even included in the repo.
• For some reason, it works now, and has passed all tests.
• Hopefully, that's it for now.

I am hopeful to complete my Hacktoberfest with a bang, as I look for my last issue with only 4 days left.

EmojiPages - The Challenges of User Interfaces

EmojiPages - A study in CSS and Javascript

EmojiPages is a website, created by brittanyrw that is essentially a game. It has a listing of books and plays represented by emojis that react when clicked to display the actual title. The main problem with the game is that the user has to play it themselves. They have to have the patience to guess what the emojis represent and handle the revealing moment that shows what it actually represents. My issue was to take care of this process for the user, by introducing a quiz game mode.

Choosing the Issue

This issue challenges me in 2 ways. Firstly, I have never created a basic javascript + html site before. I have no idea what the pitfalls and challenges will be. I have never created a reactive web page without using a framework or bootstrap. I will also need to use jQuery, which I have little to no experience with. Secondly, I have the opportunity to create my own UI, without guidelines except for functionality. The only requirements I have are the following:

• A button or link from the homepage to the page where the game is.
• A button or link back to the homepage from the page where the game is.
• The user should be guessing the song name.
• On game start, randomly sort the cards and display them to the user. Up to you if you will display one at at time or all at once. The user should type their guess into an input box. Up to you if it will check their guess after they click away from the input or they have to press a submit button.
• At the end of the game, show the user their score.

Preparation to Create the Quiz Mode

First, I needed to understand the kind of website I was working with. When I learned the site was essentially built from javascript and html files, I thought that this issue would be easy. However, what I would soon realize is that the project uses jQuery, something that I became familiar with as I worked. I also had to learn how the app populates the card display, as it is done programmatically through jQuery, and is a very complex html hierarchy.

The environment on the other hand was very simple to set up. All I had to do was clone my fork and use visual studio as my text editor. I would keep the html pages up in my browser to monitor the UI side of things.

The Solution and Pull Request

My Setup

I added a quiz.js file to handle quiz logic and jQuery functions, a quiz.html to display the new quiz page, and I added to the main.css file with the css styling for my buttons and UI. Aside from that, I made alterations to the index.html file, which handles the main page of the app, to add a navbar to navigate between the 2 pages.

Navigation

In the quiz.html and index.html, I added the code pictured below to add a navbar into the app. This navbar is responsive when the mouse hovers over it, indicates which page you are on (pink button), and fits with the pre-existing style of the app. It simply navigates between the two html files.

The Quiz UI - quiz.html

The quiz uses many jQuery commands to switch and change the display, according to the needs of the quiz. By default, there are 4 sections: the header, the card display, the filter, and the footer. The header is constant, and displays some information about the quiz, as well as the navbar and the contribute button.

The Header and The Filter

The filter is pictured above, labeled as Number of Books. This is a drop-down menu that filters the number of books to be quizzed on, from 5 to 50 at varying intervals, the code for which is shown below.

The Filter Code

The card display is just a div in the quiz.html file, it is filled programmatically by quiz.js.

The Card Display

The final part of the quiz.html page is the footer. The footer is changed programmatically through jQuery, however by default it shows the number of books selected and has a reactive button to submit your answers. Later it will be changed to display the score and give the user the option to tweet their score.

The Footer

The Quiz Logic - quiz.js

This is where the html document is edited heavily once the page is finished loading. There are many parts to this file, however I will summarize the functionality and show some examples of the code.

1. The first part I worked on was to programmatically generate the cards from the data.js file, shuffle them, and display them in the div labeled "books". This part is largely recycled from emojipages main page, with a few additions in the shuffle function. I also added an editable div that functions as the text bar to enter your answer into. I added a variable to store a shortened, shuffled array, in order to provide functionality to the Number of Books filter.

   

   
   

2. The second addition I made was the submission process. The user must type the title of the books based on the emojis into the editable divs in order to answer. They must then press submit and see their score. Green boxes indicate correct answers, and add to your score. Red boxes indicate incorrect answers, and will display the correct answer instead of yours.



Entered a few titles

3. Your score will be tallied and the footer will be changed using jQuery to show you your score, give you the chance to try again, and add a tweet button. The try again button simply reloads the quiz. 

The code for submission and footer

Indication of correct and incorrect answers, buttons change at the bottom

Interaction with brittanyrw

My interaction with Brittany was very different from pacdiv. I only talked to her once, and for the most part the only responses I've had are from bots. She has bots managing her three projects, and although she has many contributors on those projects, emojipages is her smallest with approx. 100 contributors as of writing. I'd imagine she's very busy and hasn't had time to take a look at my pull request, however I wish she would. At time of writing it's been 5 days. I'm going to try to get a hold of her again, as she still hasn't reviewed my pull request.

Problems that I had in this process

This project was an interesting experience and is still ongoing, however some of my issues so far have been:

• My pull request has been submitted for 5 days and has not been reviewed yet.
• Learning responsive css, jQuery, and html was a challenge, especially as I had to unlearn a few things first
• Balancing this project with my courses (I have a capstone project that is moving very slowly + midterms)
• Understanding where to draw the line on what files need to be touched. (ie creating new files instead of editing old ones, in order to avoid merge conflicts)

I continue to be optimistic about Hacktoberfest, as I look for my last 2 issues.

Gatsby and Regex - My First Pull Request

regex.guide - An Easy Regex Building Tool

For my first pull request, I decided that I would look for a User Interface problem that was simple to solve so I could get used to the pull request process, I was looking for something familiar and comfortable, and what I found was different than what I expected. I had it very easy in Release 0.1 as I was working with friends and classmates. The internet is a very different place. In the end, I worked on an open source project called regex,guide.

Regex.guide, created by pacdiv is a tool for creating regex, by translating the requirements of you regex from an English sentence to a regex expression. It is a web-based front-end app programmed using GatsbyJS. GatsbyJS is an open source website framework that is based on React and creates static files to ease hosting.

But I'm getting ahead of myself, let's get to the real issue. The Issue.

Choosing the Issue

I searched for about 5 hours before I found something to work on, over the course of about 3 days. Every project that I found was either dead or completely out of my league. It wasn't until October 1st that I found something, due to the influx of issues aimed at hacktoberfest. Interestingly enough, the issue I found was not labeled Hacktoberfest. It was labelled "good first issue", and the label was correct. The issue was called "Add a reset button".

The issuer was pacdiv, who needed a reset button added to his regex guide app, created using the Gatsby framework, and written in Javascript and CSS. The reset button needed to be a transparent button, labelled "Reset Conditions" and must delete all current regex conditions selected, as the current method was to delete one at a time. I have included images of this process below. All that was left was to ask pacdiv if I could work on this issue. He allowed me to work on it and I got started.

regex.guide with 1 condition

regex.guide with 2 conditions, menu open to delete the second condition

regex.guide after deleting the second condition, menu open to delete the first

Preparation to Add the Reset Button

First, I needed to learn what Gatsby was. I know how to write Javascript and CSS files, but I had never heard of Gatsby. I learned that it was based on React, which I have used before. I am not the biggest fan of React, but I decided to move forward. It would be good to learn a new framework. What I learned is that Gatsby is simple and fast, but doesn't hold your hand as much as React and Angular do. I learned how to create components, routing, and how to use CSS with Gatsby. Finally, I learned how to set up my environment.

So after I forked and cloned the repository, I had to run npm install to get all the dependencies required to run the site. However, I couldn't get the site to run. This is when I discovered that Gatsby, like Angular and React ,has it's own development environment. I installed Gatsby globally, and was able to run the website with no issues. I started to familiarize myself with the contents of the app. After some searching I found the main component for the app, playground.js. Most of my work was to be done in this file. However I also needed access to core.js, which contained functions I needed and DefaultButton.js to get the CSS code I needed for my button.

The Solution and Pull Request

Version 1

I made a pull request once I was satisfied with the functionality. My first solution was to add a button, which on click ran a function called onResetConditionsButtonClick(). This function would called this.core's deleteConditions() function to delete each condition one at a time, until there was nothing left to delete. However, this code was a bit sloppy, and pacdiv needed a better version.

onResetConditionsButtonClick() function - first version

Version 2

The problem was that this function reset the entire app back to its original state, which didn't follow his original plans. Aside from that, the actual deleting should be contained in the core.js file itself, as it was already handling add, update, and delete operations. I followed his instructions and my second version removed most of this function, as well as removed the while loop altogether. I simply emptied the array of conditions instead, and that simplified my solution greatly. I have included the updated functions below, and the final look of the button itself:

onResetConditionsButtonClick v2

New Function in core.js: deleteAllConditions()

Button Design, pulled from DefaultButton.js

Version 3

Pacdiv wanted me to change the method of deletion back to array = []. I figure this method must fit his code better, so I've changed it to his specs. I also deleted another array that I didn't know needed to be deleted.

deleteAllConditions() v2

Interaction with pacdiv

I had a great experience interacting with pacdiv. I have no idea who this person is, but I like them. They were extremely professional and helpful. I asked them multiple questions and we discussed what made sense for the app in both my issue and pull request. We talked a lot about this "simple" reset button. Aside from a couple of other issues, things generally went well with my additions, and he seemed to like all of them. Our conversations exist across the issue and pull request links listed above. I would highly recommend working with this person, and I think I will continue to contribute to this project, as I really like pacdiv's idea.

As of now, my pull request is pending approval, so I will update this page if need be...

Problems that I had in this process

I had a great time working on this project but there were definitely problems that I faced:

• I had difficulty finding an issue to work on
• I had trouble getting the Gatsby app running on my machine, as I've already described.
• pacdiv included prettier in his package.json file, which updated 53 files to different formatting. For some reason this only activated when I tried to push my version to Github, so for my pull request instead of changing 3 files, I changed 53 files. I didn't understand why until I asked pacdiv and he pointed me in the right direction
• Gatsby was a lot like React, which I am not strong in. Instead I treated it more like HTML and didn't bother making a separate component for the reset button. I adapted to the situation using a familiar method.

Although I had some difficulties along the way, I look forward to the next pull request with confidence.