DEV Community

sfrunza13
sfrunza13

Posted on • Updated on

Almost Hacktover

They say third time is the charm

A few days ago I finished my third PR on a new issue for a map of wild fires.

This map is cool, it is an amalgamation of folium, geemap, python and pure JS and CSS and that is where your friendly neighborhood hacktoberfester comes in.

In the issue the maintainer specified very clearly "...the legend is pure HTML/CSS/JS that can be injected in the main python source using Branca library." And I thought to myself, alright this is my ballpark, I got this.

I extracted the relevant HTML and CSS and used those 2 files alone to do what I had to.

The task at hand was to make the legend collapsible. At first I had made a button that would hide or display the legend if it was clicked to show the maintainer I was interested and sent him an MP4 of what I had done.

Looked like this:

He took a look at it and said he wanted it to fold in like an accordion, he just had trouble figuring it out for himself at the time. He also showed me that my button overlayed another UI element that would be there and that I should refer to the live site for the position of everything else. I told him I would like to work on it and he assigned me to it.

CSS components always answer my jQueries

It wasn't too long before I found an example online that showed me that accordion is actually a built in function of the jQuery that was already being used in the project. I inserted a new div to wrap the elements I wanted to collapse and selected them using jQuery and said that the element should behave as an accordion. Great... except for one thing, it didn't.

I sat there scratching my head for a moment and remembered one of our WEB lectures from last semester, the jQuery didn't just have to be within the script tag but it had to be underneath the greater $(function() {}); Document Ready Event. It was right there, all I had to do was copy and paste my code in the right place.

It looked ugly for a while cause my div was wrapping the wrong thing but with some trial and error I got it and created a PR.

So to this day I have gone from Markdown to CSS to now a bit of HTML, JS and jQuery in the latest. Certainly I am not making the great large contributions I had thought I would be but finding issues in the first place has proven a difficult task for me. I hope that I can continue to progress and make even more meaningful contributions in the future. For now I am glad I helped IndigoWizard out a bit here with his cool 🔥 map.

Final Product:

Issue:https://github.com/IndigoWizard/wildfire-burn-severity/issues/2
PR:https://github.com/IndigoWizard/wildfire-burn-severity/pull/3

Top comments (0)