5 ms·

Show HN: Web component – Keyboard shortcuts interface for websites

15 points by sergei_ws 5y ago

throwaway888abc 5y ago
Sweet and Delicious piece of code, Thank you!
- sergei_ws 5y ago
  Thanks!
purplecats 5y ago
runs slow and is cpu intensive it seems
- sergei_ws 5y ago
  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/ 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
  - purplecats 5y ago
    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.
    - sergei_ws 5y ago
      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!
agustif 5y ago
Paco Coursey's personal blog has a nice implementation for next https://paco.sh/ https://paco.sh/
- sergei_ws 5y ago
  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
gervwyk 5y ago
Well done! I love this idea! Really look forward to giving it a try in a react app.
- sergei_ws 5y ago
  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://ninja-keys-demo.vercel.app/ https://github.com/ssleptsov/ninja-keys-demo https://github.com/ssleptsov/ninja-keys-demo
dbjorge 5y ago
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 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).
- sergei_ws 5y ago
  Interesting, thank you point that out! I will definitely need to improve accessibility.
vort3 5y ago
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.
- sergei_ws 5y ago
  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

15 points by sergei_ws 5y ago

throwaway888abc 5y ago

Sweet and Delicious piece of code, Thank you!

sergei_ws 5y ago
Thanks!

purplecats 5y ago

runs slow and is cpu intensive it seems

sergei_ws 5y ago
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/ 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
- purplecats 5y ago
  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.
  - sergei_ws 5y ago
    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!

agustif 5y ago

Paco Coursey's personal blog has a nice implementation for next https://paco.sh/ https://paco.sh/

sergei_ws 5y ago
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

gervwyk 5y ago

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

sergei_ws 5y ago
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://ninja-keys-demo.vercel.app/ https://github.com/ssleptsov/ninja-keys-demo https://github.com/ssleptsov/ninja-keys-demo

dbjorge 5y ago

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

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

vort3 5y ago

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.

sergei_ws 5y ago
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