Monday, October 28, 2019

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.

No comments:

Post a Comment