Ben Halpern

Posted on Sep 13, 2018

Changelog: Sticky Post Actions UI Change

#changelog #meta

Buttons are now fixed to the bottom of the window on posts instead of being under the article. This means they are always visible.

You no longer have to scroll to the bottom of posts to bookmark or otherwise react to a post. There is also a "jump to discussion" button and a tweet button. All things folks have asked for a lot.

This was inspired by this post, where @entrptaher proposes the change:

Hacking a bit of dev.to with CSS

Md Abu Taher ・ Jun 7 '18

#html #css #productivity

Even though the post is from June, we thought hard about whether this was the right idea. Ultimately we felt it would improve the overall usability of the site, and leaves us open to some nice future additions.

If you're not a fan of this adjustment, you may consider reverting it via a user script.

Anyway, we will pay attention to how the UI adjustment plays out and determine whether additional changes are needed.

Happy coding!

Top comments (16)

ItsASine (Kayla) • Sep 13 '18

Why is there a Twitter button in the main bar and also a Share to Twitter on the kabab?

I'd rather see all sharing in one place, but if people like tweeting, I guess I can see the prioritization of it.

Ben Halpern • Sep 13 '18

This might have been overthinking it, but I thought the menu should have a fuller list, but also that Twitter is definitely the special one. Twitter is a congregating area for a lot of devs, and makes sense as a quick shareable place.

But I dunno

ItsASine (Kayla) • Sep 13 '18

Maybe I just don't understand Twitter enough ;)

I'm 26, so firmly millennial. Maybe I should make a Twitter/Instagram/Snapchat to be hip and cool again.

Ben Halpern • Sep 14 '18

Don’t do it. I made dev.to because Twitter was lame.

People use it, but you’re better off without the distraction if you can help it.

ItsASine (Kayla) • Sep 14 '18

I have one that follows Guild Wars 2 data mining, but that's more because I don't want to follow the noise of /r/guildwars2 to figure out what was snuck into the latest game patches. I never considered it a hip and happening developer space.

Zack Dunn • Sep 14 '18 • Edited

Could you add a setting for this? Chrome for Android doesn't support extensions and I really don't want screen space taken up by a persistent toolbar.

An easy way to make it a setting would be to use a CSS variable for the position:

::root {
    --interaction-bar-position: fixed;
}

.container .article-actions.relative {
    --interaction-bar-position: relative;
}

.container .article-actions {
    ...
    position: var(--interaction-bar-position);
}

And then a checkbox in settings that would allow the user to change the setting.

Nicolas Cuervo • Sep 13 '18

I do like it a lot! I normally scroll the site while the short breaks at work, read briefly and then create my reading list by bookmarking the stuff I like for the time I come home. This makes that routine easier.

Thanks!

Ahmed Musallam • Sep 14 '18 • Edited

I like this a lot! There seems to be a bug however.

Device: iPhone 6s running latest chrome browser. (Bug does not affect safari)

Bug:

Swipe up, then swipe down in one motion. The bottom bar slides down as you swipe down and as soon as the bar is almost off screen it springs back up.

I can do a screen recording if neccessary.

Md Abu Taher • Sep 14 '18

I have tested this feature out and figured lots of bugs, but didn't report all. Right now I have few ideas in mind and trying to find some free time so I can turn this small reaction area into something worthwhile.

Meanwhile, I commented on this PR to keep everything together regarding this feature. github.com/thepracticaldev/dev.to/...

Ahmed Musallam • Sep 14 '18

I’ll probably debug it in the morning.. unless you know of it and working to fix it :)

Ben Halpern • Sep 13 '18

Thank you to @entrptaher for making this happen!

Md Abu Taher • Sep 13 '18

You are welcome!

I honestly did not expect a PR just because of that post (I did expect a bit). I even specifically mentioned it in the post. Nonetheless, it encourages me to spend more time on dev.to and provide value. I'm still learning and making mistakes, but I look forward to a better future.

Kasey Speakman • Sep 13 '18 • Edited

This seems like the right call for UX. I don't like that it takes up vertical space that could be content. But on scrollable content with controls, I often end up with this exact kind of affordance. In fact, I noticed recently that on this site I was doing a lot of scrolling to find reaction buttons. And sometimes I would forget to react because the buttons were not handy. This helps me to remember to react.

Robin Kretzschmar • Sep 14 '18

I installed a chrome extension implement the css hack from Tahy's post in June and I am really impressed you took it so seriously to discuss it and finally implement it!

Bye-bye chrome extension - welcome wonderful pure dev.to again :-)

Thanks for implementing it!