A week back, I came across a piece of code by Siddharth (https://twitter.com/siddharthkp) on Twitter that you can paste on your console or import as a package on your site to visualize key presses.
While good, that solution was not scalable. What if I am teaching a tutorial and I want to show the keys I am pressing, especially when I need to show a keyboard shortcut.
Show Keys helps you easily toggle showing your keypresses, with zero post-production. If you are recording your next tutorial or video, this is your thing.
What does the extension offer?
➡️ Persistence. Across tabs and page reloads
➡️ Toggle on or off.
➡️ Key theme to match your System Preferences
And as @sal_iozzia pointed out, these would be helpful in conducting accessibility tests too. Especially if you want to research the usage of keyboard shortcuts.
Here is the link to tweet that kicked it all off - https://twitter.com/zehf/status/...
Hi I'm Sid. I made the javascript package under this, I was in turn inspired by Keystroke Pro, a mac app (https://www.ixeau.com/keystroke-pro). You can clearly see the similarity in styles :)
This is also great for user testing, and especially accessibility user testing, when your users are more experienced at keyboard shortcuts then you are, so you need to learn what strategies they use to overcome your inaccessible website.
Hey @sal_iozzia, thanks a ton for the feedback. This is a use case I had not thought about, and yup, would be super useful to test accessibility.
Now I wonder if there are other significant use cases too!
Product Hunt
CouponHub
CouponHub
Show Keys
CouponHub