BROADCASTS.com

Published: Feb. 8, 2021, 2 p.m.

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\xa0prismic.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It\u2019s an exception tracker, a session re-player and a performance monitor. Get 14 days free at\xa0logrocket.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:\xa0https://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\u2019s Instagram
• LevelUpTutorials Instagram
• Wes\u2019 Instagram
• Wes\u2019 Twitter
• Wes\u2019 Facebook
• Scott\u2019s Twitter
• Make sure to include\xa0@SyntaxFM\xa0in your tweets