Show HN: Web component – Keyboard shortcuts interface for websites | Hacker News Reader

Show HN: Web component – Keyboard shortcuts interface for websites

github.com

15 pointssergei_ws14 comments

This is a neat concept!

One not-so-obvious accessibility issue with keyboard shortcuts on websites is that if they're too simple (especially single-character), it's easy for them to conflict with assistive technologies like screen readers.

Maybe consider including a pointer to https://www.w3.org/TR/WCAG21/#character-key-shortcuts in the docs (and/or as some sort of warning message if a user tries to configure a custom single character shortcut).

Interesting, thank you point that out! I will definitely need to improve accessibility.

Hey Sergei, are you Keyboard Ninja?

This will be off topic, but can you list your software that you use to make everything keyboard friendly?

I personally use Keypirinha as my launcher, Total Commander as my file manager, and Firefox with Vimium-C extension as browser.

Hey,

Using I can't describe myself as a Keyboard Ninja. But really wish to become him :)

For me personally, I 90% of the time in VSCode(here I'm using the keyboard a lot) or in Chrome, and here in the browser, I miss keyboard for some cases, like going to a specific tab on netlify dashboard, or some internal admin panels and etc.

Total Commander - oooh, how I loved to use it on windows, that really keyboards heaven. Right now on a mac I not using so much files operations, so probably that's why not using it.

Vimium-C - wow, interesting, installed for chrome will try to stick with it. Thanks for sharing it.

I was also thinking about a browser extension based on this component, where users can add custom shortcuts/macros where it's missing, but Vimium-C looks pretty good for that too

Paco Coursey's personal blog has a nice implementation for next

https://paco.sh/

Yea, thanks for sharing it.

The animation looks better, more Vercel style.

Few things that missing in that implementation and mine have:

- root search, for example when on the root menu you can open and just type "dark" and get "Change to dark theme" action without navigation to theme

- no step back, if you got to the theme menu or posts :) you need to select something or close.

- breadcrumbs, can be useful for a multilevel menu

Well done! I love this idea! Really look forward to giving it a try in a react app.

as a quick demo, created a react/nextjs demo here. I don't using react, so maybe something is wrong or anti-pattern there. But demo works fine for me

https://ninja-keys-demo.vercel.app/ https://github.com/ssleptsov/ninja-keys-demo

Sweet and Delicious piece of code, Thank you!

Thanks!

runs slow and is cpu intensive it seems

Hey, I will be really glad to know some details. Can you please provide some info about where did you test it? Thanks in advance.

Because a few people asked me for nextjs demo, so I have created a small one and it's showing 100 Performance on the lighthouse. https://ninja-keys-demo.vercel.app/

Also, it's using backdrop filter for blur effect, that maybe slow, but it's easy to change in css variables

i think it was the link from your github sidebar. it might have been the css. each keystroke takes a while to process though.

i use something like this that i built which is not nearly as pretty, but it's really fast so must just be your styling as i can't imagine your algorithms are that computationally intensive.

got it, really thank you for feedback! yea, there are no much algorithms, it's only flattern on start (if it's tree structure data) and then just a regex for search. But I will check and improve performance later, as it's my first try with web components, so maybe I can skip some re-renders. Thanks again!

Reply on news.ycombinator.com