Friday, November 15, 2019

Release 0.3 - Third time's the charm?

OpenClimateFix - A New Issue

Here we are again. I have bounced from issue to issue, hitting roadblocks as I go. I know that the issue I have picked here is not as complex as tania-core, but I believe it is a little more complex than WritingSwarm and is in a system I am familiar with. I am devoting all of my available time to completing this issue, and I intend to have a pull request up by tomorrow night. In order to do that, I will have to work hard in order to get this done, and I am committed to doing that.

The Issue

The issue I have chosen is to create a contributors showcase component, for a new Get Involved page on the openclimatefix website. I have worked on openclimatefix before, as my last pull request for Release 0.2. In order to populate the contributors showcase, I must read a json file containing each contributor and display their name, profile url and github avatar.

Setting up the Environment

I already had the environment set up as I have worked on this project before. It uses yarn to install dependencies, Gatsby as a framework for development, and a host of dependencies to run tests and ensure consistent formatting. I updated my fork of the repo and created a new branch to work in. 

In terms of research, although I have used Gatsby before, I have never created a new component. I had to figure out the conventions used in the openclimatefix site and copy those conventions. I also had to figure out how to read a static json file in Gatsby. Turns out you need an extra plugin, called gatsby-transformer-json in order to read in json files using graphql. graphql comes with Gatsby and is used to manage static and dynamic data in a website. I also had to learn what a StaticQuery is in Gatsby, in order to display the results of the graphql query. 

The Solution and Pull Request

The Component Code

Component Display Code
This function returns the Contributors header with each contributor displayed below it. The StaticQuery has 2 properties; query and render. query uses graphql to query the json file named contributors.json and get the contributors attribute's contents, in order to create a javascript object containing each contributor's name, profile (url), and avatar (image url). The render property will run a function to render the data generated using the function getContributors().

getContributors()

getContributors() receives the object generated by the graphql query
getContributors() receives the data from the json file and for each contributor makes a <div> element to contain the contributors profile image, and their name, which is also a link to their profile. In order for the render to work, a key must be chosen, so I used the name property for this key. For each contributor in the contributors array, a div with their information will be appended to the cont array, and return to the component code. This will populate that code with each grid item, ready to be displayed.

CSS

Basic CSS to set up the grid

Css works a little differently in Gatsby than it does in regular HTML5 development. It is called like an object, with each class represented and called to as an attribute of that object. Whenever you see "styles.something" in the className properties above, they link to a class in the CSS document.

Final Result


Interactions with Flo (FWirtz)

Flo is the maintainer of the repository, and is very helpful and communicative. She and I have not talked much during this process, but she did assign me to the issue. We have talked before on my previous 2 issues in openclimatefix,  and I expect to hear from her about this pull request, although I don't think she has reviewed it yet.

Release 0.3 - Overall Experience

I felt very rushed in this release. We only had 2 weeks really, considering Release 0.2 was due Oct. 31st and I needed to work on it until then. I had other commitments, and as hectic as October was, November has been worse so far. There are only about 4 weeks left in the semester, and in that time I have to complete Release 0.4. Although Release 0.3 was difficult for me, and I'm not sure how well it went, I know that I'm much wiser and more aware of my abilities. For one thing, I am going to avoid databases for Release 0.3. Secondly, I am going to find a good issue early on, and get started on it right away. 

1 comment: