Advent of Patterns: Text shortcuts


This article is the twelfth edition of the Advent of Patterns series. In this series, running from December 1st to December 24th 2024, I will document one design or programming pattern I have noticed recently. Read more about this series.

When I want to create a Google Document, I usually type docs.new into the address bar of Firefox. This redirects me to a blank Google Document that I can edit and share. I love the convenience of this feature. There are several .new domains with similar effects for different services, from gist.new to create a GitHub Gist to sheets.new to create a Google Sheet.

This is an example of a “text shortcut.” Text shortcuts let you type a short amount of text to invoke an action like creating a document or expanding short text into a longer form.

With the .new shortcut, I can create a document much faster than before. I don’t have to navigate to Google Drive to create a new document, although I still have that option if I want.

This got me thinking about other text shortcuts I use. Another example that came to mind is the “slash command” pattern that is used in many text inputs. “Slash commands” are strings of text that begin with a forward slash and invoke a specific command. For example, you can type /zoom into Slack to create a new Zoom link:

A shortcut that lets me create a Zoom link in Slack

Slack shows the possible commands available as you type, which gives the user information about and reassurance that what they are typing will invoke a particular command.

With /zoom, I don’t need to navigate to a separate application to create a Zoom link. Instead, I can do it from the same place I am having a conversation in Slack.

I also use the ! shortcut to help me create a HTML document outline quickly in Visual Studio Code, my code editor of choice. When you type ! and press the Enter key to confirm that you want to run the shortcut, a DOCTYPE tag, a html tag, and head and body tags are all added to the document. ! is an Emmet abbreviation which auto-expands the exclamation point into a specific template.

The inline pop up that an Emmet abbreviation trigger can run

This is an example of an “expansion” shortcut, which takes a short piece of text and expands it into something larger.

Here is the result from when I press enter to expand the Emmet abbreviation:

A basic HTML document with recommended meta tags

I know that Apple devices have a feature that can expand abbreviations like “omw” to “On my way!”. Except, interestingly, it’s hard to undo the abbreviation on macOS. This is not a problem for the .new and slash command patterns because those examples explicitly invoke a shortcut. But Apple’s text auto-expansion is automatic, which, for me, isn’t useful. I much prefer opt-in expansions like by using a forward slash to indicate something.

Another consideration when designing shortcuts is to consider the brevity of the shortcut. /zoom is a shortcut in that it allows me to create a Zoom room without navigating to a different application. But shortcuts like ! are harder to remember. I mainly use the same keyboard shortcuts that I know. Text shortcuts are no different. Just as with keyboard shortcuts, I learn a new text shortcut every now and again too. But, in all cases, it takes some learning and getting used to before I use the shortcut more.

What other examples of text shortcuts are there?



Source link

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top