HacktoberFest Entry No.2

So around last week I found a great github repo of a chrome extension that previews contents of a webpage when you hover over a link. I stumbled upon it after a suggestion from my professor about taking a look at chrome extensions for a possible repo to contribute to. I'm glad I did because this was a chrome extension that was interesting, seemed practical and had a maintainer who was keen on receiving contributions to better his program. The extension is called Survol

First I had to install it and test it out first, can't just contribute to a repo meaninglessly just to force a pr. I tested the extension and liked the functionality, it was useful and is well designed. Makes it all the more exciting for me to try and contribute to it. So I read the docs and learned how the extension worked. It uses a javascript file to inject html elements through the dom and uses mousemove event to detect anchor links to request information of a page, and positions and fills the div with content. So far it has a base template for all sites and specific js files for sites that have dedicated templates that have been coded for them.

And so I peeked at the issues and looked for one that seemed doable for myself. Speaking of the specific templates, it looks like the maintainer is looking for people to code templates for some websites he had in mind. I thought that would be a perfect fit for me to do. I attempted a few websites but ultimately worked on the github profile preview feature.

The base template for most websites fetches the href link of a hovered anchor and uses its metadata to preview the page. However with websites with dedicated templates, they tend to use apis/oembed requests as a better way to request information from a page. Some websites require you to have an authenticator for these apis and the maintainer wanted to avoid that. So I found that the github api has a authenticator-free api that has a more limited rate of requests than the authenticated version. Great, now the next part is figuring out the design of this github profile preview.

I searched the web for github profile embeds or templates and found a couple that looked great, so I used them as a base reference 😜😜 As Picasso once said, "Good artists copy, great artists steal" Though I did do a lot of edits, and added my own designs to it as well. Anyways, the whole process of writing the DOM code to design the github profile preview took me a day, tinkering with the stylings, writing the logic, etc. I can say for sure that my CSS skills have definitely gone up since doing this. Using chromes debugger and developer tools to test was also extremely useful. 

This was the first time I did anything of the sort and I can say it was a great experience, working on the feature the whole day was just sort of a spontaneous thing that I did, I think they call it the flow state, when you get a really good momentum working on something that it all just flows smoothly. And the end product just makes it all the more satisfying

I made a pull request and the maintainer said that it was a 'great pull request' which felt great! he requested a few design changes and I was happy to oblige. Now, all there is to do is to wait for the merge

Link to the repo below 

Survol [https://github.com/mdolr/survol]

Thanks for the read