Smooth J/K navigation when using keyboard

:warning: This theme component has been deprecated and reimplemented in core.

This theme component is on track to be implemented in core (PR).

I amends the behaviour of jk navigation within topics so the viewport scrolls as you hit the keys.

It handles 3 cases:

  1. Long posts will scroll to full view before going to next post
  2. When you navigate between posts the window will scroll so you have context
  3. It toggles to a fast navigation mode when long pressing a navigation key

This is installed on meta and can be used by selecting “Sam’s Simple Theme”

13 Likes

This is definitely getting there… however…

  • On Chrome it is pretty smooth
  • On Firefox it is slightly less smooth
  • On Safari it is least smooth

Can you have a look at: Smooth Scrolling | CSS-Tricks and use this trick, from what I can tell it is buttery smooth on Safari.

The scroll within long post is MAGICAL and amazing!

2 Likes

Another entirely minor issue we want to sort out… head to:

Then hit j a few times k stops working cause it is on first post.

2 Likes

Another one, (which I guess is proof I am using it :blush:)

If you hold J down or K down some stuff is not getting properly debounce, stuff backs up and gets weird (at least on Safari)

3 Likes

I don’t feel people who use keyboard nav are looking for videogame style transitions between posts… the whole point of using the keyboard efficiency, not meaningless (and slow) cosmetic animations.

I don’t want slow cosmetic changes, but something to make the transition less jarring on my eyes. I started using this feature recently and found the jumps to be disorienting especially if they were between long posts. I’d love to see a balance in the middle personally.

6 Likes

The component shows weird up and down moves if I hold on buttons. I have to click J and K buttons one by one for proper movement. Also that line on the left side of post should disappear after a few seconds and transtition between posts might be more slow, like floating.

First, I want to mention that this survived a Monday, which is awesome. :heart_eyes::star_struck: This is the First time I was able to do my full catch up using keyboard, I do still sometimes reach to my mouse to cut-and-paste and quote and so on.

The basic mechanics of catching up are very close, to summarize here are all the bugs (+ a new one) that we want sorted.

I do feel this may become a core feature, cause with this component J K turned from unusable for Sam to indispensable to Sam, which is a big jump in my hierarchy of needs.

Bugs to fix:

  • Up navigation with K does not resume at end of post, instead goes to top of post. Repro is to make a giant post, a small post, hit k on giant post.

  • K does not work on post #1.

  • Debounce bug is severe, if I hold K or J down stuff queues and gets super weird. (when you want to reach first post and there are only a few, then holding K seems easiest)

  • Transition effect can be done smoother and with less CPU / JS. To be honest, I notice almost no issue on Firefox on my monster dev machine, but on my old laptop with Safari I notice this big time.

Once you get :arrow_double_up: sorted can you enable the theme component on all themes on meta? Then @zogstrip and @eviltrout who also like using these keys cause Vim, can test it.

16 Likes

As a recent Vim convert, :laughing:

5 Likes

@udan11 fixed most of my list :heart: only open question is around making the nav a bit smoother, the downside of going native is that:

  1. Safari does not support “smooth” built-in animation so we have to polyfill anyway
  2. The “smooth” built-in nav is a lot slower than the 100ms transition we now have (about 400ms) so it would get in the way

Given (2) and that I am actually using this full-time now even on Safari and it is not getting in the way too much now that I am used to it. I think we are good for more extensive testing.

I enabled this on all themes on meta!

@zogstrip / @eviltrout can you try this for a few days and report back? Personally I think we should just ship this cause it works so much nicer than our previous implementation.

10 Likes

:+1: definitely support that

7 Likes

Not much but good things to say on this one for the time being - namely

I have to say that this was a huge painpoint with j/k keyboard shortcuts, and I think is a much better default. I do sometimes wish for a way to “go to next post”, when someone has a huge uninteresting walloftext and I just want to get to other responses, but it’s not as common as press j and --“hey I was reading that”.

I subscribe interest by way of emacs + evil ::ducks::

5 Likes

This upgrade to navigation is AWESOME!

Must say i really hated having j jump to the next post when i was reading a really large post and just wanted to scroll down. (and i had to press k then scroll down with my mouse).

6 Likes

This! I never realized how often I was hitting J just to hit K so I could use the down arrow to scroll through the entire post. Seeing this first hand was amazing.

6 Likes

I used it all morning and it works much better than before. I did hit an edge case I didn’t love, where the post scrolled down just to show me the footer actions. I don’t think that part of the post should be included in the height calculations.

Otherwise I support putting this into core. I haven’t reviewed the code but functionally it works great.

9 Likes

@udan11 this functionality should be merged into core and the component can be killed

If enough people complain (I doubt it) we can ship a component that reverts this

12 Likes