Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toroloco, Tolinski.

Welcome to Syntax in this January Monday hasty treat. Happy New Year. Yes. Happy New Year to you. We are going to be talking all about keyboard shortcuts and window management, and this is one of those things that I cannot stop talking about, Which it seems crazy to say, but that's honestly how I feel. My name is Scott Volinsky. I'm a full stack developer from Denver, Colorado, and with me as always is the Wes Bos. Hey.

Hey. And with us today as well is 2 of our favorite sponsors.

Who am I kidding? All of our sponsors are our favorite sponsors, but 2 of our favorite sponsors of FreshBooks, and Sentry. I'm gonna kick it off with Sentry, but Sentry at, Sentry dot io is the error and exception handling tool that allows you to see more than just errors happening in your project. No. They allow you to really discover a ton about your application. For instance, one of my favorite things that Century has is their performance Now the performance tab allows you to monitor web traffic through your site and actually see graphs and charts about Just about everything you could possibly imagine.

Okay. So here, we even get our failure rate of each route. So you get the time to load, you get the AppDeck's score. You get how many users and how long it took them to hit these pages. And then based off of things like the Fill your rate or the time to load, it assigns all of your routes a user misery score, which is like a little chart to just show you, Okay. If we check it out and we can see, okay, one of these pages here has a fairly high user misery score, But a low amount of people have hit this, and maybe if one of them had an error for some reason, maybe their ad blocker was turned on, well, maybe that's not something we need to be concerned about. And I see another route that is the exact same page in my site, just a different route for that React component. And I can see that this route Has a very fast loading time and an extremely low user misery score with or with a ton of traffic. So therefore, I know it's not actually something I need to worry about. But This allows me to see, at a glance, which of my routes are the most painful for our users to hit, and it's very, very cool. I'm a perf head. That's one of my big things. I love Perf. Love it. Love it. Love it. So, getting performance tools inside of Sentry is one of the coolest things in the world, and I've been using this Since it was in beta, let me tell you, I, use it at just about every week. So check it out at century.i0.

Use the coupon code Treat all lowercase, all one word, and you will get 2 months for free.

Now let's move it on to West to talk a little bit about FreshBooks.

FreshBooks is the cloud accounting solution for your small business. So if You, 2021.

This is the year. I'm talking to you listening to this podcast right now. You are you've been trying to start a business.

New year, new you, new FreshBooks account. You are going to start a business this year, and you're gonna log your expenses in FreshBooks. You're gonna Send out all those invoices and expenses. You're going to remind your client who forgot to pay their invoice in FreshBooks. So check it out And sign up at FreshBooks .comforward/ syntax for a 30 day unrestricted free trial. Make sure you use syntax in the how did you hear about Section. Thanks so much to FreshBooks for sponsoring.

Sick. Okay. So keyboard shortcuts, window management. I know we both use Simultaneously, the same tools and different tools. So I'm excited to hear about some of your setups. We can share setups a little bit. I think we could start with 1 that I knew we're both Pretty high on. I'm not talking about Colorado Air. I'm talking about Caribbeanerelements, which we both love and use this app. Caribbean elements. It's for the Mac. Now, unfortunately, Windows people, I don't have an analogous software for this, but what this is doing is allows you To basically override keyboard functionality.

And one time this came in handy was when I had water damage on my keyboard, and my shift key Just kept on pressing itself. So because of that, I could just head into carabiner elements and turn off that shift key. So it gives you a lot of, like, neat little things like that. But I think the reason we both use it is for productivity specifically and the creation of a hyper key. Yeah. The hyper key being The combination of command, control, option, and shift.

And so what we have both done, I did so at the behest of Wes, which was assign my caps Lock key to b command, control, option, shift. Because, really, how often do you use cap lock? Never. I need to use cat slots, and if I do, it's an accident, and I'm mad at myself.

For me, what it's done is it's opened up this whole world Where I have a blank slate of keyboard shortcuts that I just know if I hit the command lock key and something else, it's going to be a keyboard shortcut. I don't have to worry about overriding other things. Like, I use these heavily in my DaVinci resolve for video editing. I do Caps lock's a. It normalizes my audio. I do caps lock's n. It creates a new timeline with my current video clip. You know, just things like that. I just start setting keyboard shortcuts willy nilly in Versus Code. Caps lock l for me deletes the line. Why? Just because I want it to be that way.

Yeah. That's all I use carabiner elements for is the ability to remap your caps lock key. In, like, macOS settings, there are The ability to mess with the modifier keys, but you cannot remap your caps lock key to be a new modifier key. So that is what you kinda have To do, to set it up. And then from there, once you have a hyperkey, then you can use your hyperkey plus Literally any other key on your keyboard Yeah. In order to set up we'll talk about this, window management and Keyboard shortcuts and stuff like that. So one app that I absolutely love and I can't stop talking about is and I've I've been using it for years is BetterTouchTool.

So BetterTouchTool is this massive application that has tons and tons of different features built into it. And it allows you to specify custom keyboard shortcuts, custom trackpad shortcuts, drawing mouse gestures, touch bar, custom stuff. You can use the Siri remote.

You can hook up a MIDI to it. You know, like those, like, MIDI things that you can hook up to your computer? Hold on. Hold on. Let me actually ask you this. This is gonna be a fun little thought.

MIDI, can you tell me without googling it, what is MIDI, Wes?

Music instrument digital

something? Digital interface? Interface? I think it's I actually don't know what the acronym stands for, But my uncle who, got me my 1st job in the magazine, he actually was, like, an early adopter of MIDI, and he had, like, written for Some, like, electronic music magazine, back in the eighties, I believe. And, he was, like, super into MIDI really early. You could think of MIDI as information about music or information where you could say, alright. This is like an a five. So it's the a the 5th a on the keyboard. It was hit at this time and with this velocity. So it tracks, like, how hard something was hit, When it was hit and what node it was hit. And so people can do MIDI to do you know, play on a keyboard that has no sounds within it and then take that MIDI blueprint and run it through a computer, and it's playing it back with sounds assigned to that. One of the things that I'm looking at getting right now is a MIDI drum kit because, You know, I have a drum kit. I'm playing to my drums my whole life, but I haven't gotten to play for the past, like, 7 years, and so I wanna get an electric drum kit That will have a MIDI out, which is its own cable, MIDI out into my thing, and I can play the drums and have it go through my computer. And, if I want it to be cow sounds when I hit the snare drum, the nugget cow sounds when I hit the snare drum. And you could hook up the midi to better touch tool. Yes. And then when you slam the high hat, You could do, like, a cowbell Yeah. Midi that when you hit it, it deploys your your website or something like that because it it hooks up. You could do a beat to deploy some code.

Code.

So what I use better touch tool for is, First of all, all the keyboard shortcuts. So once you have this hyper key, you can set up keyboard shortcuts to Like, I've got hyper h opens my terminal, or hyper f opens my ScreenFlow app. Or What I I really use it for is window management. So I've used dozens of these window management apps, and they all come down to Either you have to configure them by writing this very obtuse fig file that's too hard for me, Or they're very simple, and they don't do all of the things that I want. And better touch tool is the like, the both of those where you can get Super nitty gritty into window management. Like, I have hyper arrow keys will snap my windows to the left Or to the right or to the top or the bottom. I've, hyper page down. We'll move it to the left monitor and just cycle through all of my monitors.

But then it also has these snap areas that you can define. So for me, when I record, I only record a portion of my screen.

And that because the monitor is too big for creating video like that. And I have defined these snap areas in my Layout. I have an extended Apple keyboard, so I have all these extra f keys, and I have the home and page down, page up buttons.

So hyper plus all those buttons. Oh, I do too. Oh, there you go. You and, like, I never use those keys for anything, do you? There was, like, a a hot minute where I was like, oh, yeah. Page up, page down. I'm loving this. And then, like, no. I I don't use it. I'd use delete. Yeah.

But even if you do, hyper plus those keys are probably not assigned to anything. Right? I can imagine. Yeah. Yeah. It's like a whole another because I always have my fingers on the arrow keys. So So I just move my hand up and I feel like I have 4 more arrow keys without having to look down or feel.

And then I have those set to maximize my windows to the different snap areas, and they're within the portion of my screen that I'm To have to resize my windows to fit inside, and now I just hit this keyboard shortcut and it snaps them all into place. And my mind was blown. I was like, this is perfect. This is amazing.

And just like the window management, it's just a small part of better touch tool, And it's, like, worth the $20 for a lifetime license for for a better touch tool alone. You know what? I gotta I gotta make this Change. I've been using

Divvy, spelled d I v v y, for a long time, so much so you can tell just by the aesthetic of this website when I bought this. And and I challenge anybody to look at this web. This is very 2 point web 2 point o timing, when this thing came out. And Divi, by all means, is fantastic. And just like you, I have the same setup with my hyper key where I can hit option or I could hit hyper to the right. I even have them set up specifically for my ultra wide because I know my ultra wide, if I make the window 1 third of the width or whatever, that's still more than enough width for me. Yeah. Or I have an option to do half and half.

I also have hyper r, puts all of my windows to the correct Aspect ratio of my screen recording software and moves it into that recording spot Yeah. Which is something that most people don't think about. When you record your screen, your screen is in by 9, which is the standard aspect ratio. If you're smart, you're screen recording 16 by 9, so that way you're dealing with standard, you know, aspect ratio formats and stuff. But Better touch tool. It how much control does it give you? Because the neat thing about Divi is that Divi sort of works like CSS Grid, Where you can choose how many grid items you want, and then you can choose the gap between them so you can even, like, adjust the gap.

Yeah. So I tried that with mine, and I tried, like, figuring out where it was, but it never was exactly the size I needed it to be. It was always off by, like, 10 pixels.

And so better touch tool, it literally says action trigger snap area x 319 p x. Why? 714.

Width and height, 19 like, for some reason, 1920 is not wide enough For me, so 1923 pixels is the is the width I need and the height. And it's like super fine grain control. You can hook them up to keyboard shortcuts. It also gives you, Like visual snap areas. I have it set up where if I'm dragging a window and I hold down hyper, it'll visually give me all the snap areas.

I can drag the window into that snap area, and it will automatically expand to that size.

And then it it also gives you the Windows. Like, if you slam a window up into the top left or right of your screen, it will expand to that. Oh, baby. Give me that Windows Phone number. It around. Yeah.

And, like, I can't stop talking about it, and I was like, how How much did I pay for this tool? Oh. I was like, $20, like, 7 years ago, and I was like, we gotta do a show on this. And you can also do keyboard shortcuts Specific by an app. I just have global shortcuts, and then I go into each app. But if you wanna, like, say, like, if I'm in Google Chrome And then I press this keyboard shortcut,

it can do something different than when I'm in Versus Code or something like that. Do you wanna hear what I'm gonna use this for? Yes. I am going to use this because, you know how ScreenFlow, you can pinch and zoom in the timeline. Yeah. Well, it turns out you can pinch and zoom in the timeline of Final Cut Pro 2, And I'm still used to that workflow, but DaVinci Resolve is command option to increase. If you do pinch in in DaVinci Resolve, it like zooms in on the video or whatever. So I am going to use better touch tool here to set up pinch and zoom to remap to option plus and option minus.

Oh, because because they have a whole trackpad thing, and you can set up custom gestures that do things. Yeah. That's sick. Yeah. Because most apps will have the ability to set a keyboard shortcut for things like zooming in. Mhmm. But they won't have the ability to set a gesture. Sure. Right. Right? That's like a OS level thing, and that's what this gives you full access to. So

it is super slick with that. Buy lifetime access? Yes, please. I can't even wait till the end of the show to get my credit card out. It's very good. I'm, like, almost annoyed that this was only $20 because, like,

The app does so, so much. Like, if you have one of those, like, 5 year old or a 10 year old, remotes. Remember you could get a remote for your Mac? I think I got one. Yeah. Yeah. Yeah. I remember that. They don't work anymore. It doesn't come with the IR thing, but, like, you could use that with it. And, like, There's just so many little hidden features inside of it. And just for the window management alone, it's the best window manager I've I've used. But then you can also put all your keyboard shortcuts in it, And you can also, like, script things. And then I also found out you can do web overlays with better touch tools. So one thing I do is I use this app called Uberlayer, and I have just a PNG that's the size of my monitor, and it overlays on top of my screen. And then I can see where I'm supposed to be recording within which the box.

Doesn't screen flow screen flow doesn't do that for you? I show you does. It allows you to specify a certain part of the screen. But at least when I was looking at it, you had to drag and Drag and resize it and manually enter the numbers. You couldn't set like a thing. And then it also grays out the outside of it, which Sometimes I wanna show the menu bar of other thing, and I'm happy that it recorded that part of the screen because I wanna be able to zoom into it. Or if I wanna zoom into the dock Can show like, oh, there's a new notification here. Let's see what you're saying. So I just record the whole screen. I just don't record that part of my screen. Oh, yeah. Maybe I should look at it again. But The web overlay thing is really cool because you can just write HTML and CSS and make this overlay on top of your website. And I was thinking, like, oh, if you were, like, a Streamer. Oh, yeah. You could code your own, like, overlay in JavaScript and, like, pull data in from an API. What's it called? What what's what's called? Uber screening? No. This was called Uberlayer. Uberlayer. But I just found out that better touch tool lets you embed a web view Over top of your screen. So it seems like better touch tools should just become my daddy or something. Right? They should call it everything tool. Everything tool. Yeah. I'm I'm interested in this. You know, it's so funny because I was coming into this episode being like, oh, yeah. I got so many things to share. I'm gonna, like, go nuts on this, and then, like, this is just me gushing over Better touch tool than the fact that I don't use it.

It's so good. I'm a big big all about improving your own efficiency. For some reason, there's, like, some shortcuts in Versus Code that just don't register in my brain. Right? Like, I know you heavily invest in things like Creating shortcuts and Yeah. Snippets and stuff like that that will help you. And for me, like, I've always found that, like, one of my biggest boosters The productivity is when what's in my brain lines up directly with what that shortcut is. There was some shortcut whatever the the shortcut Delete a line. I think it's, like, command k or something by default. Yeah. And to me, that never felt right because I never learned it as command k. I'm sure those of you who have learned it as command k, You know, it feels right. But for me, in my head, it's delete line, line, line. Yeah. So I put hyper to hyper l, deletes the line. And I have so many shortcuts that are just like that. Like, you don't have to accept Versus Code's snippets. Like, Versus Code is shoving a plate Of stinky cheese in front of you? I don't know. Stinky cheese can be good. I'm trying to think of something that's not good. You know, it could be setting some disgusting food in front of you, and you'd be like, no. Wait. I want cheesecake. Okay? And you can have cheesecake. You don't have to take what it gives you. One thing I did was in Versus code, I set hyper h

Up to show code hinting. So, like, you know, when you write a method, like, set time out, and it it's like Yeah. The first argument is the function. And then you have to delete the one word to get it to pop back up? Yeah. You're like, ah, give come back. I I need you. I just set that to hyper age, And it just shows them. Right? It's it's super, super simple. What what is that? Let me let me find out what it's called for you. Trigger parameter, and that's it.

Other things, since I got the Mac extended keyboard with the number pad on it because I'm an accountant, do you ever use your f keys? Yes.

I I never use my f keys.

I do.

This keyboard, the Key Tron k one actually does a really good job of the f keys, so I do use them. Yeah. Oh. And I specifically use Function f eleven.

What does that do? It brings the Windows apart, allows you to view your desktop. Oh, yeah. Yeah. Yeah. Okay. Cool. So I I never use my f keys. And because I have the extended keyboard, I have f sixteen through f nineteen. And those are almost never hooked up to anything because Most Macs do not have that unless you explicitly go and find that keyboard. So I hooked up my f nineteen, which is the top Right hand corner to record and to stop the recording because sometimes in my recordings, you'll see me put my mouse in the top right hand corner and click stop recording, and And I was like, that kind of sucks. So I I set that up, and then I set up so ScreenFlow, command shift 2 stops the recording. Just a FYI, command shift 2.

Well, I did that, but I always forgot it.

And I was thinking, I need one of those either a MIDI or I need, like, one of those Elgato decks. Oh, yeah. I want one of those so bad. I was like, I just need a button to press Yeah. That's not a crazy keyboard shortcut. Because like you said, like, sometimes I just Can't remember what the keyboard shortcut is, so I just hooked it up to that button. And then also, another thing is a drop of marker. When you screw up, I drop a marker.

And I was like, I just need a big old button on my desk that's drop marker. So I hooked that up to f 17. So what are you saying you don't Walk into the microphone. Yeah.

I usually just go or clap or something like that so I can visually see it. Yeah. But the marker Is a little easier on the voice.

What else? Do you you have anything else? I got one more thing, but I don't wanna

stomp all over here. No. You're blowing my mind because So many of my things are just based around that hyper key and then adding keyboard shortcuts galore. So for me, that's, It's, like, really, really the big, big one. Most of the way. Get 3 most of the way. And then, like I said, Divi, but I'm kicking Divi to the curb. Another one I like to use, I use Rocket, an app called Rocket Yes. To do my emojis, and you can set up Rocket.

So you do colon and then you can start typing, and it's sort of like the way Slack Gives you emojis everywhere, which is really how emojis should work in the OS. And the coolest thing about Rocket is you can tell rocket to buzz off in Versus Code and buzz off in Slack, and BuzzOff, and Discord where those functionalities are there. But if I'm popping open Twitter and I wanna throw a little emoji in the tweet, oh, yeah. It's right there for me. So, yeah, I use Rocket for that. Last thing I have here, this is not entirely keyboard, but it's just TextExpander.

I use TextExpander like crazy to Have little snippets for little things like people ask me what my business number is all the time or phone number or email address or A little like, people say, how do I merge my accounts? And I just type colon merge or colon phone or colon email, and it would just expand that. And then another thing I do all the time, I guess it's not really keyboard shortcut related, but whenever I'm typing things, like if I type JavaScript Really quickly, I always do capital j a v a s c r I p t because I hold down the shift key and I type it really quickly.

And sometimes you'll see that. Like, it's really annoying to me. So I set up a text expander where if you ever type something with 2 capitals Right next to each other, it will automatically downify, lowercase the second one because that was probably an accident. And I thought it might get in the way, but it is super, super handy. Do you pay the subscription TextExpander? No. I bought it, like, years ago before they moved to the subscription, And I just have not upgraded because it's I'll say I love TextExpander, but I don't wanna spend how how much is it?

It's 333 when billed annually or 416 when billed monthly. Yeah.

I don't want it. I don't want the email every month. I don't want the the invoice. Just let me pay my $40 or whatever and give me the software.

And then never Or take a version update or something. Yeah. I really preferred paying on major version release. I preferred paying for major version releases of software Me too. Especially stuff like that. I actually do have 1. I I said I didn't, but Clippy, which is the fork of oh, man. I forget what this thing was originally called, But I used to use it back when it wasn't Clippy, and, thankfully, somebody picked it up at clippy hyphen app dot com, And it's also the open source, so you can check out the source on GitHub. But this application is a clipboard manager with lots of features And includes snippets. So we have, like, all of our, you know, canned email responses in here are snippets. All of the Working credit card for Stripe kind of things in here along with, like, special URLs that I use, like a the Discord invite URL or even Terminal commands. Oh, you can store stuff in it? Yeah. You can store, like, global snippets. Oh. And then instead of pasting things with command v, you do command shift v and it pops open a little window. You can navigate it all by keyboard if you want. The cool thing here is that you can choose whether or not to paste in plain text or not, So you can paste formatted or in plain text, and I have mine set up to have 100 of my past clipboard copies.

So the last 100 things I've copied into my clipboard exists in this drop down. I never lose anything In my clipboard, I will tell you that. There's never been a time where I've been like, oh, man. I copied that thing. No. It's like, oh, the thing I copied from last week? Still in there.

So I'm a big fan of Clippy here. It's a really great app. I've been using it for a really long time. I think you might have talked about this on, like, one of the very 1st episodes of Syntax, and I've used it since then. It is the best. It's the bee's knees. Yeah. Yeah. Big fan. So I I think that's it. That I that's I love these kinds of shows because it's This little little handy things. I think I'm gonna do a little YouTube video showing some of the more visual pieces of better touch tool because

If you're not using hyper key, you are missing out. Let me tell you. Yeah. And I just right now as we're talking, I just set up my keyboard shortcut for Clippy to go directly into clipboard history rather than the snippet or keyboard history section, I wanted to go right in the keyboard history section by doing hyper v. There we go. Hyper V, baby. Good idea.

Good idea.

You only have so many keys available, but with hyper, you get a whole, Well, 40, 50? Get a lot of keys. How many keys are on a keyboard?

I don't know, but it's looking a lot bigger right now. I bet mechanical keyboard heads know that because they're all about those key caps.

A 104 keys

is common in the US. So you probably have Probably 70 or 80 of them you're you're able to set up to hyper hyper something. I guess 72. And if you have one of those keyboards with The thumb buttons and clickers, oh, man. You got a lot of keys.

So that is it for now for hyper productivity with keyboard shortcuts and window management. Window management part of the side of things, Windows users are probably, same with Linux users, to be honest. I found that it'd be pretty nice on Linux as well. But us Mac users, Yeah. They just won't give it to us, so we gotta use things. And BetterTouchTool plus carabiner plus Clippy plus all of the apps you know and love, it it's It's all just a winning connection for me. So really excited to hear if anybody else has any of these killer productivity apps for Windows PC, Mac, whatever. Please share Share it with us on Twitter. Hit you on with those retweets, and, especially if it's Windows or Linux, considering Wes and I are not necessarily in that territory too much.

Alright. Thanks for tuning in. Catch you on Wednesday. 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.