Hasty Treat - Keyboard Events Are Surprisingly Interesting

Welcome to Syntax. In this Monday hasty treat, we're gonna be talking about keyboard events.

Now this is something that is surprisingly interesting and one of those topics that you don't really get into until you have to write some sort of a keyboard event, and then You gotta Google everything and figure out what's going on there. So we're gonna give you a little bit of a a heads up or a look into the wide world of keyboard events And some of the more fascinating and interesting things about that, my name is Scott Talinski. I'm a developer from Denver, Colorado. And with me as always is the keyboard master, Wes Bos. Hey.

What's up? What's up, Wes? This episode is sponsored by 2 of our favorite sponsors here at Syntax, and that's Prismic and LogRocket.

Now LogRocket is the perfect place for you to see all of your errors and exceptions happen in real time in a scribble video replay.

Even gives you a network request tab in your Redux store and your error logs and anything you'd like to see when you are scrubbing through a video.

You know, a lot of these new tools use video and headless browsers as a way to really understand how people are using the site, and LogRocket is one of those tools that is just Really, really stepping up the game here and allowing you to solve bugs. So if you wanna try LogRocket, have it on to logrocket.comforward/

syntax. So that thing you'll get 14 days for free. Also sponsored by Prismic. Prismic is a headless CMS that makes it easy to build websites, with a set of components. It's kinda interesting. I talked about their slices feature couple episodes again. I wanna talk about it a little bit more because, the more I I was, like, I, like, did that ad read and and, I played with it myself before the ad read, and then I just sort of, like, been thinking about it over the last, couple weeks and been like, actually is a really smart way to do it. And What slices are is that you can create your components whether that's React or Vue or whatever framework you're using, and then you can create slices that associate with those Components. Like, this component needs these inputs in this data, and you can create a corresponding slice. And in that way, when you want to go and build a page, you can just Grab all of your slices together, and you've also already created components that are associated with that hunk of data. Now it's a Pretty interesting way to go about it, and I think they've really nailed their slices API. So check it out. Prismic.ioforward/syntax.

Hilarious landing pages, so definitely make sure you go to that landing page when you sign up. Thanks so much to Prismic for sponsoring.

Alright. Talking about slices, I could go for a slice right now. It's almost lunchtime. Oh, it's breakfast time, and I could go for a slice.

Slice is good at any time of the day. Yep. Anyways, let's talk about keyboard events. So I have a little little website key code dot info.

And basically, it started up as just a little website for me to hit a key and tell me the associated Code with that key. And I've been working on updating it recently, and, it sort of evolved over time. And I've Was just like thinking about it. I was like, man, there's a lot to know about keyboard events. Let's talk about it on syntax. So we'll start off with the events, and then we'll go into what data you get when a keyboard event happens, and then we'll go into the 3rd thing, which is Media keys, which is being able to access the pause, play, and next back keys on your, f. Keyboard. Yeah. So first one, events.

There are a number of different events that can fire keyboard events, And they sorta go in order like this. They start at key down. So when you press a key, the 1st event that is fired is is Key down. This is very similar to mouse events or pointer events where there's multiple events depending on the state of of what you want. So there's key down. That obviously is just when you physically press the key. The next one is an event I actually never had heard of this before I I dove into the docs. It's before input. You ever heard of this? Before input. So what it fires

when the key is pressed, but before the input is registered in the, like, input field?

Yeah. Yeah. And I I was like, Like, what what use is that? Because, like, we also have the input event, and that fires when somebody types into a a text box, or input box, or contentedible.

Right? So it seems to me like this could be used for, like, augmenting what's going into an input in a non

React kind of world. Right? Yeah. That's what I was wondering. I was like, we kinda do that in, like, the React world. Right? Yeah. With where you, like, you catch the on key up Event, and then you you set the state. And I was like, is that that's kinda interesting. And one thing I found in the docs is that the event on before input will tell you Whether the that person is inserting text, replacing text, or inserting a line break or things like that. So I would imagine if you're working on, like, an editor for in the browser, you need much more fine grain control over. Is this person Typing something, or are they, like have they selected some text, and they're pasting in values over top of that. Right? And I was like, oh, that's interesting because There's a a lot more to that than just somebody type something. Right? Yeah. Yeah. It is funny because it is something that we

We think of it as, like, normal in the React world. But before React, I don't think I messed with what the users were typing into inputs that that much. Yeah. Other than just, like, Key up or key down Right. When when you need to. We also have, like, a a change input

that's not totally associated with the keyboard because it can also happen Programmatically or it can happen when somebody's using their mouse on, like, a drop down or something like that. But the change event on a input will only fire when you focus away from it. One of my courses I did change event and key up event just to make sure that it happens as you're typing, and then I was an idiot. I should've just used the input event. The input event will fire Every single time that value change, and the change event will only fire. You type something and then you tab away and you it's called blurring an input, Then it will actually go ahead and fire. So And if you only have it listening on the blur,

that's going to be a a bad experience. I'm just going to say that For your users, you don't want something to change the moment you blur off of it. What I've used that for in the past is if you need to format

the value inside the input With, like, dollar signs or or commas and things like that, it's a real pain in the butt to format it while the user is typing because it You have to associate where's the user's cursor, and, it's a little bit jarring for the user. So what a lot of inputs will do, you type your number, like, $5,000, and then you tab away, and then it formats it with the dollar sign and the comma in it. And I thought, oh, okay. That's that's a that's a good use case for change, I guess. On blur also, I've used blur

for submitting to the database without a, like, a submit button. Let's say you have, like, a form that you wanted to automatically save when you Move off of a field, that's when you would use the blur. Yeah. That's a really good point. Like, you know those sometimes you're on a website, and you, like, change a setting, And then you, like, go and look for the save button and there is none,

that's probably using blur or some sort of, like, time out after a certain amount of time.

What else do we have here? Key press is an event, but that is deprecated. You should either be using key up or key down or before input. And then finally, we have the key up event, which that fires when you let go of the key that you have. So I'd say most cases, you either want key down or key up depending on on what there is. Probably key up is the the one that you're looking for because of modifiers. We'll talk about that in just a second.

So that's the different events.

Now when you fire an event, you you can listen on the window for global events. Like, the escape key is really popular to listen to on the window because somebody Doesn't need necessarily need to be focusing on an element, or you can focus in on a specific element that has keyboard focus or a text box or input box. Now inside of that event so window dot add event listener key up, you get a whole bunch of metadata on that event. You can prevent default, which, will stop the default from happening. Like, a popular one is, like, how many times they've been on a website and you hit command s or control s to, like, Save it because you feel like you're in, like, a a text editor, and then it does the, like, file save as in your browser. You're like, no. No. No. I don't wanna save this page as HTML.

I just wanna save the app. Right? Like like, you're editing a CodePen. They override the the default save shortcut because you wanna Can you imagine if they wouldn't have done that? And, like, that would be the most frustrating thing ever to be inside of a a online tech editor and hit command save because your your muscle memory is just so set up to do command save on just rapid fire all the time. So many websites don't do that for whatever reason, but you can you can also,

override literally anything like, what other ones are there that are popular? Like, close AB, or things like that, like OS wide keyboard shortcuts. You can override those, which is really annoying. It's so annoying. Okay. Let me tell you about a situation where it is very annoying, and and you might Have used this.

Is it Discourse? Is that the forum Yeah. Forum software? I don't know if it's by default or whatever, but every time I'm on the Discourse Forum and I do command f, it pops open their own little, like, dialogue to search. It's like, I'm not looking to search right now. I'm looking to find on the page.

And the search is like not searching on the page. It's searching

in the database for whatever I'm looking for. So I think Stripe's Docs do that as well. And I'm just like, no. No. No. No. Like, you can turn it off, obviously. Yeah. But I don't like that default at all. Please be careful when you're overriding some of These ones that you might expect.

Just keep in mind, like, what your users are going to have ingrained into them because you don't wanna be creating a frustrating

experience by overriding something like that. And you're potentially creating an accessible experience as well. If you take people's keyboard shortcuts away from them, You could potentially trap somebody in a window. I do believe Firefox doesn't allow you to overwrite absolutely everything Because I was working on my Key Code website, and I wanted to show if somebody was holding it. Here's here's the next part of this is there are Four metadata keys on your keyboard. There's alt, control, meta, which is going to be command, or I believe on Windows, the meta key is the just the Windows key. I have no idea about the Windows keyboard. So there's there's 4 keys, And we talked about this on our last episode about better touch tool. Those 4 are are your meta keys across your entire system. I believe function is also another meta key that you can use on on a OS level, but those are the 4 that you get in the browser. And you can tell if somebody was holding it at The time of pressing down, that'll give you true or false.

Next, you have a bunch of information about which key the user has actually hit. There is event dot keycode, and there's event dot witch, and those 2 are deprecated.

Key code is still very widely used, but you should be using we'll talk about the other ones, what you should be using in just a second. But, older browsers, some of them did event dot witch, And then some of them did event I key code, and they give you a number that is associated with what key you hit. So 27 is your escape key, 13 is your enter key, Like, w is 87. So if you need to know if somebody hit a specific key, most likely, it's gonna be, like, Space key or escape key or delete key or something like that.

Then you can listen for the event and then check if the key code is a specific number.

There's no way to listen for specific key codes, so you can't say, like, window dot add event listener enter. You have to listen for them all and then filter out The ones that you want, that's probably a good use case for, like, a switch statement or something like that. Then the more modern versions are there are event dot key and event dot code.

So we had key code, which gave you a number, but now we have event dot key and event dot code. So event dot key He will give you the value of the key pressed, and that's important because if I hit my w key, I get lowercase w. If I hit was it shift w? I get a capital w, and, that's important because if I hold down my option key and hit w, I get the Greek symbol for, I'm not sure what that is. Yeah. I don't know. Some sort of fraternity.

And and so that gives you, like, actually what the user types. So a lot of, especially keyboards that are, Like, people who use keyboards for English as well as another language, they need to be able to access, like, and things like that. So if you hit, No. Actually, there's no ex ex something goo on c. What's the little thing underneath the c? The little the little tail that goes underneath See? I have no idea. C letter with a tail. Let's find it. We're probably offended. This is not something that Americans are that privy on.

CSF. Okay. We have that in French. I don't know how many Americans would know the word, off the top of their heads.

So it it gives you the actual value of what the key is on, not not what's written on the key, but what actually the OS will give you when you hit that Combination of keys. And then we have event dot code, which gives you the physical key that the person hit. So if I hit w, it gives me the value key w. And and no matter if I'm holding out any combination of modifier keys and the w, it will always give me key w. So that's Physical key versus the value of the key, and those are the 2 that you should be using when you're working with keyboard shortcuts because they are very widely supported now. It's a couple years ago. People are still using key code, but shouldn't be anymore. Mhmm. What else do we have here? We have key dot location, which will give you where on the keyboard, did the user hit the key? And the different locations are, like your standard key keyboard. I've got the accountant keyboard with the number pad on the side, so it'll tell me that It was in the number pad. You have multiple shifts and controls on your keyboard, so those will tell you which one they actually hit, Which is helpful if you want to, for whatever reason, if you wanna bind different things to the the left command c and the right command c. Which Which command do you use, Scott? I use almost always exclusively the left. Yeah. Me too. I don't I don't think I've ever used the shift control option command.

Now that you say that, I'm thinking, you know, like, we're talking about hyperkey.

You could probably do the other ones into their own combos.

Yeah. And map them to other keys. Although there's no more there's no more modifier keys.

Like, we we didn't make up caps lock. We just mapped all 4 of them to Hyper. Right? Yeah. But what if you just did, like, you know, shift and option? That's true. So if you held The one that would just be 2 of them, shift and option or something? In better touch tool, you can specify

keyboard shortcuts that only happen on the right side versus the left side.

Oh, man. In fact, on my on my latest keyboard, the the command option controls, those buttons are all smaller on the right side even. So I'm even, like, less likely l. We need to use them right now. Interesting.

Because they're smaller, you could, like, get a feel for them being smaller and, like, map them to their own thing. I don't know. I haven't run out of keyboard shortcuts yet with my hyper yet, but When the day comes When the day comes.

What else do we have here? So we have location, Then we also have 2, which is locale. Tell you the locale of the user's keyboard, which is kinda interesting. And you also have repeat. That's a Boolean. And I will tell you if this Key I guess this key event that is is being repeated if you're holding it down, and and that's helpful to know if If you need to do something different when somebody holds something down or not or like in my case, every time someone hits a key, I'm using Next. Js to change the URL So that every single Keiko gets its own URL, and you use push date to change the URL. One thing I ran into is that if I held the key down, It would give me, like, you you use location APIs too frequently in the browser, and the browser stops you from doing that because Mhmm. I guess there's some bad actors that have have overridden that. So you could check if this is a repeat key. And if if it's so, then you could say, I don't change the page. They're obviously Holding down the key.

So that's all the metadata that lives on a key. Pretty interesting. The last one which is not Part of that is media keys. So a couple maybe about a year ago, Chrome, Firefox, I think the rest of the browsers rolled out The ability to use media keys. So if you wanna use the play, pause, forward, back buttons on your keyboard to pause a YouTube video or whatever, You can. You can hook into what those by default, they will just work for the media media element on the page. So if you have an audio element or whatever, it will work. It works pretty good. I turned it off because the what the song and dance I would get into is I would play a YouTube video, And I'd have Spotify going, and I would hit my pause button on my keyboard. Yeah. And then it would pause the YouTube video, and then I would have to go there's no way to pause Spotify then. So I would have to go to Spotify, click it, and then pause it and then go back.

Such a pain in the butt. So I turned off media keys entirely In the browser, I just don't think they're that useful. Mhmm.

But what do you think? No. It's funny because I I think about this all the time when I I don't know what it is. My Bluetooth headphones have some media key connected to part of them.

And every single time I accidentally, like, brush up against something, it triggers it, And then it opens iTunes or Apple Music or whatever it's called nowadays, and I want I wonder if they're on my computer out the window because it's so Oh, I've got a solution for you. Oh, good. I'm happy for that. It's a little app called Overkill.

I built a little node script one time that would watch for iTunes to Start, and it would immediately send the kill command. And then somebody's like, there's an app that does this, and it's called Overkill. And you just install it on your computer, and anytime iTunes accidentally opens,

it will immediately just kill it. Oh, man. I love this. Thank you. I'll link it up in the show notes. Thank you. Cool. Well, okay. I thought that it would be it'd be helpful at the end to maybe, like, talk about some situations where you might actually want to use keyboard shortcuts in your apps Just in, like, from a broad perspective. Yeah. One of which is is the space bar will pause a video on your page. Right? But only if the, video component is selected. Now some sites do a really nice job of listening for that space bar In a a more Windows sense rather than just on the element itself, and we'll pause the video that way. I for that. If it's me, I don't think we have that implemented

yet, but I honestly I I prefer that to just having it be when the video is selected, but that's just me. Yeah. Me too. I have that in my own app because that's, like, one of the first things people ask for is, like, I wanna be able to just hit space bar literally anywhere on the page Right. Except if I'm in a text Element, which I don't even I don't even think that exists on my player page. So you just listen for space bar or you listen for, key down or key up Site wide on the window. And then when that happens, you check if the key is equal to space. In our case, you would not listen for the key. You would listen for the Code and check if the code is space. And if it is, then you just go ahead and play or pause. One interesting thing, though, is Don't use these keyboard shortcuts to update UI on your app. Like, when somebody presses space bar, then show the pause button, You should always listen for the play and pause events on your video element. Mhmm. And these keyboard shortcuts should only be telling the video element to play or pause or Or or speed up or whatever. Otherwise, they get out of sync really quickly, and your media element should be your your source of truth as to where the where it is in its current state. I've had to deal with that before, and it's not fun words like No. I mean, you might actually use these too if you're building some sort of interactive game. Maybe you want a character to move, jump, that kind of thing. You might also use keyboard shortcuts to just make an app a web app feel more like an app app. Like, if I head into Notion and I do command n,

It opens a new little, like, Notion window to create a new note for me. It doesn't do anything else. It doesn't create a new tab or something like that because Notion even though it is a a electron app or something like that, here it is built on web tech. So you'll need to implement those kind of shortcuts to make your app feel more like an app app, Especially if that's what you're going for. Like, do websites need to do this? No. Probably not. But for things that really need to feel a little bit more comfortable, Like, how your users might use them, it could be a win for all sorts of things, usability, accessibility, as long as you're doing it, in a thoughtful manner, I think, is the key.

Yeah. Yeah. Absolutely.

It's really key to it's really key to listen to for those those specific events, In my opinion and, like, I I was just thinking, like, also, if a user uses a keyboard shortcut in your web app, then bravo, you've done a good job at building a web app that Feels like a desktop app because the user just there something in their brain told them to hit a keyboard shortcut to make make a new item or something like that. Yeah. Sick. Alright.

That is it. Thank you so much for tuning in. I told you that was gonna be interesting.

A lot more to keyboard shortcuts than I thought there would be. You're the man for the job, so make sure you throw a link to your site in this show notes as well just so people can check it out. Kiko.info

is the website. There's not I I haven't pushed the, by the time you're listening to this, I'll probably have pushed the the new changes to it. You'll push it. Alright. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop A review if you like this show.