Over the last three years, I've been adding to and maintaining a keyboard shortcuts website called Use The Keyboard. Over that time I've amassed some 5100 individual shortcuts spread out across 85 apps, programs, and websites. In this article, I'm going to break down a select few from a variety of programs and sites that I use on a regular basis as a web developer (and occasional designer).
Notion
A popular workspace app, Notion has its share of helpful keyboard shortcuts. Whenever I'm using it, I find myself constantly using one of these to make navigating through my blocks a lot easier.
- Ctrl + P - Opens a quick-finder bar to search for any page in your workspace
- Ctrl + Shift + Enter - Opens an active block as a separate page
- Ctrl + Shift + U - Goes to the parent page of the page you're currently on
Chrome DevTools
Chrome's DevTools window is open pretty much any time I'm working on a site. Despite it being a part of a larger software, it comes with its own set of shortcuts to make navigating through different panels and toggling features a bit easier.
- Ctrl + Shift + M - Toggles device mode, which emulates screens of different sizes for the current page
- Ctrl + ` - Focuses on the console, and Ctrl + L clears the console when you're active in it
- Ctrl + Shift + R - Hard reloads the page, clearing the cache before-hand
GitHub
GitHub has a surprising amount of keyboard shortcuts on its website, and once you've mastered a few of them you'll wonder how you lived without them.
There's shortcuts for navigating through respositories:
- G, then I takes you to the Issues tab
- G, then P takes you to the pull requests tab
- G, then C takes you to the code tab
And browsing through the source code of an app, there's a bunch of single-letter shortcuts that you can press on any page to activate certain features:
- T will bring up a prompt to search for a file across the whole repo
- W lets you switch to a different branch
- B opens up the blame view
Figma
Like most design programs, Figma relies heavily on the keyboard to improve speed and flow throughout the app. Here's a few lesser-known ones that I tend to reach for on a pretty regular basis.
- Ctrl + Shift + A selects the inverse of what you're currently selecting
- Ctrl + Shift + V while pasting text matches the style of what you copied
- Ctrl + Alt + C copies the properties of what's currently selected
Visual Studio Code
VSCode being a code editor (or even a full IDE depending on how you use it), definitely leans heavy on the keyboard. For this app alone I counted well over 100 individual shortcuts that you have available! I won't detail them all here, but I'll point out a few that I think are worth highlighting.
When it comes to searching for or replacing text, you have a few useful commands.
- Alt + Enter selects all occurances of a find match
- Ctrl + K, then Ctrl + D moves the last selection to the next find match
And when working on larger projects or more complicated codebases, I tend to reorganize my editor with one of these.
- *Ctrl + \* splits the editor
- Ctrl + K, then Ctrl + left/right switches the focus to the previous, or next editor group
Discord
Despite being a (relatively) simple and straightforward chat app, Discord comes with a decent amount of keyboard shortcuts that make using it just a little more exciting. Any chance I can get to not take my hands off my keyboard while working on something is a plus. Now, I'm pretty sure my most-used shortcuts for this revolve around navigating the app.
- Shift + PageUp jumps to the oldest unread message
- Alt + Up/Down navigates between channels, while Ctrl + Alt + Up/Down navigates between servers
- Ctrl + K finds or starts a private message
That's about it
Well, that's about all I can think of for now! If you have a keyboard shortcut that you'd like to see added to the site, feel free to open up a pull request on the repo.
If you have any questions about web development, or would like to see more shorter-form content from me, follow me on Twitter @aschmelyun!
Top comments (0)