Why Shortcuts are Key
They say “good food takes time”, because there are very few shortcuts you can take when cooking that will give you the same result than if you took the required time. In development and coding, thankfully that is not the case and in fact, a good (or dare I say, great) developer will always be looking at ways to become quicker, more efficient, and find ways to not repeat themselves yet still end up with the same quality output (i.e., a shortcut).
DRY is a core principle for best practices in coding, but we can, and should, extend that philosophy to our common tasks that we’re doing throughout each day. If you find yourself repeating a certain task, writing a certain line of code or performing a series of of manual actions over and over each day, that is a prime opportunity to look to automate it, and keyboard navigation and shortcuts are the key to that process. It’s a well established fact in the development community that keyboard navigation is infinitely faster than the mouse.
Having a deep and evolving relationship with shortcuts and the keyboard, across the operating system and your programs, creates a world of opportunity to work faster with the same high quality results. And while speed isn’t the goal necessarily, the fact is, when you can condense 5 steps into 1, the end result is you’ll have more time on your hands than before…this is just cause and effect at work. When reviewing and setting these up, it might seem like some of them don’t save a lot of time, perhaps a keystroke here and there…but they add up to some big savings in the long run. And efficiency, as well as proficiency, is one of the the marks of a great developer. Let’s look at some of the different layers to keyboard navigation and shortcuts.
While your operating system comes with a number of built in keyboard shortcuts (which you are hopefully already using) for switching between tasks and generally navigating the OS, they will only take you so far before you need to find some for your own specific needs. AutoHotKey for Windows and Automator for Mac are phenomenal applications that will allow you to customize just about any kind of keystroke for just about any purpose. Advanced users can write their own scripts to even run certain tasks within programs themselves, but we largely use them to handle fairly basic tasks that normally would required a series of clicks and keystrokes, and combine them into a single keystroke or keystroke combo. Some examples I personally use:
- Open Windows Hosts file in Sublime Text (WIN + H)
- Open an Incognito Mode instance of Chrome with a specific URL (CTRL + ALT + B)
- Open the Calculator (WIN + C)
- Start XAMP (WIN + W)
While it doesn’t seem like a huge savings, opening the Hosts file, for example, used to take a series of steps: navigating somehow to the Hosts directory in Windows (often copied and pasted from somewhere), right click the Hosts file and then “Open with Sublime Text”. I now have it mapped to a simple two key combo that I press one time. This is is a very rudimentary example and barely scratches the surface of the really advanced stuff you can put together using these programs. I highly encourage everybody to look into automating even what seem to be the simplest tasks, because it will continue to hone your efficiency of using the operating system as a whole.
This one is likely an obvious suggestion for any developer that’s been in – or getting into – the industry right now, but it still deserves a significant mention, since it’s been one of the most impactful for us, and has improved our efficiency ten-fold. Explained simply, Emmet implements shorthand syntax for quickly outputting HTML/CSS, and it can handle even the most complex scenarios. Here’s a fairly simple and common example, of creating a series of nested elements along with a set of list items and nested links that open in a new window. You type the string and then “Tab” it out:
In addition to the fantastic shorthand syntax it brings to writing HTML/CSS, it also has a number of available actions that are helpful when navigating just about any language:
Between the shorthand and syntax and the fantastic actions like Wrap with Tag and Go to Matching Pair, traversing our files becomes fluid and intuitive, all made possible via the plethora of keyboard shortcuts Emmet has available. And while we’re huge Sublime Text fans, Emmet is available for just about every code editor out there.
These are possibly our favorite part when it comes to discussing Shortcuts. We could dedicate an entire post on the magical quality that Code Snippets provide to the development workflow (and maybe we will). Along the same lines as Emmet, Snippets allow you to create simple “triggers” that will “expand” into their full counterpart. Combined with Placeholder Values, Fields and Tab Stops, you can quickly create complex code snippets you use on a regular basis, which you used to copy and paste or compile manually. On top of keeping your code incredibly consistent, you also mitigate any potential mistakes and errors that come from manually writing these code blocks out. Doesn’t get more efficient than that! Here’s an example of how we can create a custom WordPress Query loop using a snippet we called “wploop”:
Using Tab Stops, you can also set up “autocomplete points” where you can tab through the snippet, further completing it via a keyboard shortcut. Here’s one that we use alongside our Element First Media Queries, where we can quickly set up a responsive media breakpoint rule with arguments and attributes:
There is literally no limit to how you can configure these and what they can contain. To date, I have around 100 snippets I’ve created and yes, I do use the majority of those on every project I work on. And what makes them so unique is they can be configured to your needs and tasks that you require on a regular basis. We aren’t going to go in-depth on how to configure these snippets or write your own in this post, but there are a number of great guides out there and one of the best places to start with snippets is reading the official docs for Sublime or Atom. Combine Snippets with Emmet, and you will be well on your way to being incredibly efficient and DRY in your daily coding. And the cherry on top: when you don’t need to constantly remember or look up these commonly used code blocks, the mental space it creates is liberating (read: you’ll have more mental energy for learning new things).
Granted, this one is more for Sublime Text users specifically, I imagine this can be applied to other editors like Atom. If you are a Sublime Text user, you are able to Save Projects and then switch between them using a handy keyboard shortcut of CTRL/CMD + ALT + P. I worked with a dev who did not utilize this shortcut and it was painful to watch as they would use their mouse to access the menu bar, search for the name of the project each time and then finally click the project of their choice (sometimes even using the File Explorer if it wasn’t in the Recent Projects list), rather than using the shortcut and just typing in some characters to narrow the search, like so:
As time goes by and you keep doing great work for great clients, you’ll need to support that work and you’ll find that the need to switch between projects quickly is essential to making sure you get all your daily tasks completed. Other times, you might want to quickly grab a code block you recently wrote (which you will then turn into a snippet…right?) and can jump to that project, grab what you need and jump back with minimal interruption to your workflow. So we recommend that you always save your projects (to a single folder, ideally), even if they are small. You’ll be surprised how handy this shortcut is when you need to jump between them at some point.
Bonus Tip: Multiple Desktops
It’s very easy to get distracted when working on the web, so organization is one of the best ways to keep yourself focused. If you’re on Windows or Mac, using Multiple Desktops is a fantastic way to keep your apps organized. I personally tend to have only two to three desktops: work apps, background tasks (background processes I need to leave open like a file transfer, or an idle communication like a live support chat on a website) and “other apps”, usually in the form of a music app. Switching between them can be done with the mouse and a few easy, clicks, or I can simply hold CTRL + WIN + LEFT/RIGHT ARROW and move seamlessly between them (e.g. check on the state of a file transfer or what the chat agent has said and switch back again within a 1/2 second). WIN + TAB gives me a higher up view so I can quickly choose a desktop with a single mouse click.
Multiple Desktops allow you to stay focused and organized, but the added level of integrating keyboard shortcuts enables you to quickly traverse the different workspaces with minimal effort and disruption.
Integrating Shortcuts Into Your Workflow
When beginning to look at the vast array of shortcuts that are available, from keyboard to snippets, it can be easy to feel overwhelmed and intimidated. How are you going to remember all of them? Obviously you can do things like print a cheat sheet or read through them often, but its making them second nature that is really the key to unlocking their potential. I’ve found a great process that works well in ensuring I keep committing them (pun intended) to my memory: if you find yourself repeating a task that you are aware of a shortcut for, stop the task wherever you are in the process and use the shortcut instead (or in some cases…create the shortcut!). This will mean you do the task twice (once the manual way, the second time with the shortcut). Then, do it a couple more times only using the shortcut. Repeat this each instance you find yourself using the manual route. This seems simple, but I’ve found that when I’m trying to memorize a shortcut, it’s easy to say “Oh yeah, there’s a shortcut for that! I’ll make sure to do it next time.” But next time never comes and you’ll keep doing it manually until you force yourself to break the muscle memory and re-establish a new one for the task. Along with this, it’s always helpful to get a refresher on the shortcut documentation (like Emmet’s cheatsheet) or review your snippets to see what you’re not using or a new one you can create, at least once or twice a month.
Learning keyboard navigation – shortcuts being the cornerstone – is a gradual process that with attention will continue to improve over the years of development, and the long term benefits are astronomical. You’ll be faster, yet your quality will remain the same. You’ll have more time, so you can either get more done in a day or spend that extra time learning something new. You’ll become a “poweruser”, you’ll feel like Hackerman and once you really get into the habit, you’ll never be the same. And to your peers who don’t do it and your clients who don’t know about it, you’ll be a magician who constantly defies the realities of time by being so fast, yet so good.
I can’t find another way to say it: learning to navigate through using shortcuts (and the keyboard), is the single most transformative thing I’ve done as a developer. If you’re not doing it and you’re ready to level up, it’s time to dive in.
Next up: Automation and Scheduling
Shortcuts are a huge important component to becoming a leveled up user of your PC in general, especially in relation to development. But they are only half the battle in winning the war against inefficiency. To really maximize your productivity, you will need to bring in automation (which will also tie in time management). In the next part, we’ll dive into practical applications of these related to development.