My t-shirt is on its way
I got the confirmation email yesterday from Hactoberfest that I had successfully participated in their month long celebration of hacking. I took no time in telling them my address.
If you’ve been following my blogs, the last Pull Request I submitted was to a project called bandersnatch in
pypa . Following the same strategy of starting my project search through my fellows work on the wiki, I found Open Climate Fix. This is a non-profit initiative to fight climate change through the open source community. Their focus is to use Artificial Intelligence to improve/create systems that can help in reducing emissions.
I helped in their website, which is made with React using the Gatsby framework. This was my first time working with Gatsby and the concept is a little bit different than I’ve seen before.
The first issue I picked up was to add a YouTube video on the respective page. I thought it would be as easy as adding an
iframe element. The main developer asked me to make the video responsive. That introduced me to tailwindcss, yet another css library. Here is my pull request, which is still a work in progress. They wanted a certain dimension for the embed. After having tried so many ways and feeling sleepy on a weekday night, I gave up and asked help from the dev.
Can we make it a little higher so that it’s more like 16:9 dimensions?
It feels a little squashed in there imo.
I don’t quite know how to. Can you please guide me how to do it? Just to confirm are you talking about the video div itself, or the blackspace inside the video?
And yesterday, they gave me their suggestions, based off of which I made a new commit to this supposedly easy fix.
Lines changed +19 -0
Second issue from this project helped me brush up my JSX a bit and also let me dip my toe in the world of GraphQL. This allows you to write queries for your API, an SQLish way to fetch your data. For all blogs on the website, they wanted me to add a previous and next button at the bottom of each page.
I began editing the
gatsby-node.js file, which is where all data is fetched using a GraphQL query and fed to all newly created pages.
To render this, I added a new file
PostNavigation.jsxwith a flex box that contains the required links. This is also a work in progress. The dev had some suggestions to remove code duplication and improve the presentation logic.
You can follow the pull request and see all our conversation here.
It was a good October.