Can Small Code Snippets Be Big Time Savers?

A code snippet is a shortcut that can reproduce lines of code for you that could take you minutes to remember or find an example elsewhere. But those immediate benefits can often take a long time to get right.

Often, the fear that more time can be spent building than the time that would've been saved, aiming for the perfect all-use snippet, puts people off writing their own. Or we write the line of code so often we know it like the back of our hand, so would those few seconds we shave off each time give much benefit?

The Maths

Is 5 seconds worth saving? When that 5 seconds is something you do 50 times a day, you will have saved almost a whole day over a year!

To save you from the maths, below is a table from xkcd illustrating how much time you could save over 5 years by using, for this article's example, something like a code snippet shortcut.

Where to Start?

The first place to start is the file where your snippets will be stored. Most IDE's or terminals have files where snippets or aliases can be added. For the following examples, I'll show ruby code snippets stored in VSCode (Settings → Configure User Snippets). Still, even if these don't match the syntax of your development language or editor, there's no reason they can't spark a few ideas for snippets to build yourself.

Common Ruby on Rails Snippets

1️⃣ Table and Column Migrations

There's more to database changes than just adding tables or columns. You can rename them, remove them, add indexes, or change defaults. It goes on and on, so a collection of snippets for each action can help remind you of what's possible while you implement or architect changes.

"DB Column Add": {
    "prefix": "add_column",
    "body": ["add_column :tables, :column, :type, null: value, default: value"],
    "description": "Add a DB Column"
},
"DB Column Rename": {
    "prefix": "rename_column",
    "body": ["rename_column :tables, :old_column_name, :new_column_name"],
    "description": "Rename a DB Column"
},
"DB Column Remove": {
    "prefix": "remove_column",
    "body": ["remove_column :tables, :column, :type, null: value, default: value"],
    "description": "Remove a DB Column"
},

// and even more

2️⃣ Model Validations

There are so many model validations, and each has so many options it can be hard to remember them all. Snippets can easily include these obscure options to save you from having to Google or look them up in the docs.

"Validate Presence": {
    "prefix": "validates_presence_of",
    "body": ["validates_presence_of :field, if: :a, unless: :b, on: :action, message: \"can't be blank\""],
    "description": "Validate the presence of a field"
},
"Validate Absence": {
    "prefix": "validates_absence_of",
    "body": ["validates_absence_of :field, if: :a, unless: :b, on: :action, message: 'must be blank'"],
    "description": "Validate the absence of a field"
},

// and even more

3️⃣ Save and Open Screenshot

When I first started debugging specs, it would take me 30 seconds to remember the syntax for viewing my page's content via Capybara. Now I have these snippets at my fingertips, I actively choose to debug via screenshots, more often, speeding up my entire workflow, and it's helped me learn the method in case I ever need to write it out.

"Save and Open Screenshot": {
    "prefix": "saos",
    "body": ["save_and_open_screenshot"],
    "description": "Save and open screenshot for JS spec"
},
"Save and Open Page": {
    "prefix": "saop",
    "body": ["save_and_open_page"],
    "description": "Save and open page for JS spec"
}

4️⃣ RSpec Expects

Testing can be repetitive, meaning the code used is very repetitive. Whilst you may know precisely how that code looks, it gets a bit boring having to write it all out every single time when you could let a snippet do all the work for you.

"Expect Page Content": {
    "prefix": "expect(page).to_have_content",
    "body": ["expect(page).to have_content content"],
    "description": "Check the content on the page"
},
"Expect Link Content": {
    "prefix": "expect(page).to_have_link",
    "body": ["expect(page).to have_link 'link_text', href: link_url"],
    "description": "Check the link on the page"
},
"Expect CSS Content": {
    "prefix": "expect(page).to_have_css",
    "body": ["expect(page).to have_css '.class.class'"],
    "description": "Check the CSS on the page"
},

// and even more

5️⃣ RSpec Within Blocks

Snippets don't just have to reproduce single lines. They can help you write multiple lines simultaneously, which is very helpful when writing an entire code block. Leaving in placeholders or fill-in lines keeps your snippets flexible while reminding you where to make minor adjustments.

"Within CSS Class": {
    "prefix": "withinclass",
    "body": ["within('.class') do", "", "end"],
    "description": "Check within a CSS class on the page"
},
"Within CSS ID": {
    "prefix": "withinid",
    "body": ["within('#id') do", "", "end"],
    "description": "Check within an ID on the page"
},
"Within First CSS": {
    "prefix": "withinfirst",
    "body": ["within(first('css'))do", "", "end"],
    "description": "Check within the first element on the page"
},
"Within XPath CSS": {
    "prefix": "withinxpath",
    "body": ["within(:xpath, '//div[@class=\"class\"]') do", "", "end"],
    "description": "Check within a XPath element on the page"
},

// and even more