DEV Community

Cover image for Adding Twitter/VIM-inspired navigation to my React website

Adding Twitter/VIM-inspired navigation to my React website

Luke Berry on February 21, 2024

I recently started learning VIM and became enchanted by its navigation. I am also a twitter addict, which has excellent shortcuts. Inspired by the...
Collapse
 
lemoscaio profile image
Caio Lemos

Great article and great feature, man!

I would suggest also adding a debounce in case you decide to add more commands. This way, if the user presses "g" but then decides to send another command, it wouldn't trigger an unwanted command that may fit the sequence.

Adding a debounce would discard the pressed key if the user doesn't type anything else (or an invalid command sequence) in, like, 1s.

Collapse
 
lukeberrypi profile image
Luke Berry

Thank you for the feedback! That is a super important point, not only for avoiding unwanted keyboard combinations, but also long pauses between the g keystrokes.

Currently, I can press g, wait for 10 seconds, and press g again and the shortcut will work, which feels clunky at best. I will add the debounce, thanks!

Collapse
 
lixeletto profile image
Camilo Micheletto

Nice! Maybe using aria-keyshortcuts to enable it for accessibility would improve further the experience