In this Hasty Treat, Scott and Wes talk about keyboard events and some of the fascinating things you can do with them!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:04 - The Events
http://keycode.info/
keydown
beforeInput
Keypress - deprecated
inputType tells you whether the event is inserting text, replacing text, inserting a line break, etc.
keyup
change event - only fires when you focus out
https://github.com/w3c/uievents/issues/220
08:02 - Event meta data
"key": "c", "keyCode": 67, "which": 67, "code": "KeyC", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": true, "shiftKey": false Others: .locale
.repeat
16:46 - Media keys
https://developers.google.com/web/updates/2019/02/chrome-73-media-updates
play, pause, ect
Overkill app: https://krausefx.com/blog/introducing-overkill-dont-let-itunes-interrupt-your-workflow
18:32 - When might you use key codes?
Space bar to stop a video on a page
Building a game
Making a web app feel more like an app
Links Better Touch Tool
Syntax 315: Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets