The problem: No sticky save for lazy developers

When you are browsing this website, you get the titles like this, sometimes there are description, images and tags.

So you have two options here, either open to read it, or save it for later. Sometimes the titles are tricky as this post you are reading right now. Maybe you thought it was something very interesting, but it was actually a trap to get views/likes etc. Let's open the post to see what's inside.

Great! It's a great article to read with lots of valuable information. But wait, you got to hurry up with your train so you have decided to save the post.

The save button is either on the previous page or at the bottom of current post, no save button on the side of the post where you could easily just save it for later. Maybe you can use bookmarks with ctrl + d, but that'd be so boring.

We can either wait for the team to build one for us or we can build one ourselves. Won't it be great to fiddle with some little stuff sometimes?

The Solution: Fiddling with CSS

Okay, let's extract the selector first. I'll right click, select "Inspect Element" and it will be highlighted like this.

Now we know what to break. Let's make some css code for the selector,

#article-reaction-actions {
    position: fixed; /* This will make it floating around */
    z-index: 1000000; /* Just to make sure it's on top of everything */
    bottom: 0; /* So it stays sticky to bottom of my screen */
    background: white; /* Well it's transparent otherwise */
    width: 880px; /* The size of the parent container */
}

I am not going to discuss what each letter of the above snippet does. I'm too lazy to do that right now.

To apply the style, I'll use Stylish, which is a chrome extension. There are firefox and safari version too.

Let's create a new style. when I am reading this post, I will install the chrome extension, come back to this post, and then click the icon.

Then I'll use the above snippets code, enter a nice name and save it.

Great, now when I refresh the page, I'll see this,

Nice, isn't it? I can use this to read first few lines and decide to save or heart it without scrolling to end.

PS:

• This was just to relieve my boredom, but I use Stylish for many different websites. I also use Tampermonkey to fiddle with the JS if needed.
• Please don't make a change on website or create a chrome extension just for this post. This is no big deal.
• Sorry for using posts on images without permission :D, it's dev.to, so I guess it won't hurt.