Smooth J/K navigation when using keyboard

(Dan Ungureanu) #1

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”

Hotkey for next suggested topic
iPad with external keyboard connected can't see post when replying
Discourse 2.3.0.beta3 Release Notes
(Sam Saffron) #2

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!

(Sam Saffron) #3

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.

(Sam Saffron) #4

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)

(Jeff Atwood) #5

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.

(Justin DiRose) #6

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.


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.

(Sam Saffron) #8

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.

(Justin DiRose) #9

As a recent Vim convert, :laughing:

(Sam Saffron) #10

@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.

(Jeff Atwood) #11

:+1: definitely support that

(Jeff Wong) #12

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::


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).

(cpradio) #14

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.

(Robin Ward) #15

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.

(Sam Saffron) #16

@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