DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
dbelokon
dbelokon

Posted on

Hacktoberfest Contribution: One Line of Code

Second Cute PR for Hacktoberfest

For my second PR for #hacktoberfest challenge, I wanted to try fixing a bug, instead of working on a feature. I enjoy fixing front-end related bugs, so I decided to give this issue a try.

Challenge Accepted

The issue was about author info hiding behind the GitHub info when scrolling down the page in Telescope. At first, I thought that fixing that issue was a matter of removing one of the HTML elements and having both author info and GitHub info being wrapped around in one element. I was thinking that maybe when they are both in a single element, the bug will go away. However, after trying to apply this approach, I realized that it wasn't as easy as I thought. The more code I kept changing, the more issues that were not even related to that bug started coming up. That made me have an epiphany that I was most likely overcomplicating everything.

So I decided to stash my changes just in case and start over where I began. This time, I decided to change as less code as possible to fix the bug🐛. So I run the app and thought that using Developers Tools would be a good option. I clicked on element picker and selected the area of the website I was concerned about. Then, I was just playing around with the CSS it had, by turning each CSS element on and off one by one to see if maybe the issue will be fixed having one of them off. Eventually, I found out that the issue was with the sticky element and its container. Here is my PR for this issue.

Here is what I learned:

Basically, the container will delimit when the sticky element should be kept on the screen. In other words, sticky element will keep the position relative to the screen. Sticky basically means "staying within the screen". So when you put 10px as a value for the top attribute (top: 10px), you are telling the sticky element to start being sticky once the top of the screen gets closer than 10px from the element. There is a great demonstration of how this works with code snippets that I found on Stack Overflow. You can check it out here(P.S. check out the first comment with the code snippets).

Takeaways:

I learned that when it comes to CSS related bugs, it is better to start off with Developers' Tools when fixing them rather than changing too much code when it could be just a matter of adding one line of CSS. Next time, I will start debugging from there!😜

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠