Beware when evaluating KeyboardEvent.key, as it doesn’t play nice with non-QWERTY keyboard layouts.
Tag Archives: keyboard
Floating Focus
A clear, beautiful and easy to implement focus-state solution that improves accessibility and usability. This reminds me of the app-wide Focus Ring the folks over at Discord implemented, but with an animated ring that moves across the screen. Floating Focus → Via CSS-Tricks
Easily see the JavaScript Keyboard Event KeyCodes with keycode.info
Handy helper tool by Wes Bos: simply press any key and see the results for KeyboardEvent.which, KeyboardEvent.key,KeyboardEvent.code, etc. As a user with an AZERTY keyboard layout I often have a broken experience on sites that respond to first row of keys, e.g. QWERTY. As those sites respond to KeyboardEvent.key — which differs from layout to …
Continue reading “Easily see the JavaScript Keyboard Event KeyCodes with keycode.info”
:focus-visible Is Here
With Chromium 86 and now recently Firefox 85 supporting :focus-visible, it’s a good time to refer to this post by Matthias Ott: The :focus-visible pseudo-class lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator. You use :focus-visible …
How Discord Implemented App-Wide Keyboard Navigation
When working on creating a complete keyboard navigation experience for Discord, using styling with :focus and outline, the folks at Discord ran into issues where the outline would not match the shape of actual element being rendered. Thinks like border-radius, overflow: hidden; on the container, padding got in the way. So they set out to …
Continue reading “How Discord Implemented App-Wide Keyboard Navigation”
tinykeys – A tiny and modern library for keybindings
Small and lightweight, I like: import tinykeys from "tinykeys" tinykeys(window, { "Shift+D": () => { alert("The 'Shift' and 'd' keys were pressed at the same time") }, "y e e t": () => { alert("The keys 'y', 'e', 'e', and 't' were pressed in order") }, "$mod+KeyD": () => { alert("Either 'Control+d' or 'Meta+d' were …
Continue reading “tinykeys – A tiny and modern library for keybindings”
Prevent Apple’s “double key press” on the butterfly keyboard with Unshaky
If you’re having this “double key press” issue, Unshaky is a software solution that will help you get by. Unshaky tries to address an issue on the butterfly keyboard (Macbook, Macbook Air 2018 & MacBook Pro 2016 and later): Double Key Press. Unshaky might save your keyboard by dismissing such “second key hits” (any key …
Continue reading “Prevent Apple’s “double key press” on the butterfly keyboard with Unshaky”
NYSKeyboardHelper – A helper for all your iOS keyboard needs
Matthias Nys, a former student of mine, has released his first pod NYSKeyboardHelper, a helper which resizes a scrollview so that it doesn’t go under the keyboard. Add a constraint to your project’s Storyboard and set NYSKeyboardHelper as the custom class, or add it programmatically: let keyboardConstraint = NYSKeyboardHelper(item: self.view, attribute: .bottom, relatedBy: .equal, toItem: …
Continue reading “NYSKeyboardHelper – A helper for all your iOS keyboard needs”
Keystroke Recognition Using WiFi Signals
We’re all doomed: In this paper, we propose a WiFi signal based keystroke recognition system called WiKey. WiKey consists of two Commercial Off-The-Shelf (COTS) WiFi devices, a sender (such as a router) and a receiver (such as a laptop). The sender continuously emits signals and the receiver continuously receives signals. When a human subject types …
Gboard
Searching and sending stuff on your phone shouldn’t be that difficult. Gboard makes it easier: Search. GIFs. Emojis & more. Right from your keyboard. Gboard (App Store) →