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 |
 |
| Old OpenGraph Link |
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',
},
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.
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.
- 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