According to the Atom flight-manual:
Snippets are an incredibly powerful way to quickly generate commonly needed code syntax from a shortcut. The idea is that you can type something like habtm and then press the Tab key and it will expand into has_and_belongs_to_many.
Apart from the slightly weird habtm example, it is clear something powerful is promised here. It strongly reminds me of Emmet and its abbreviations. The difference is that Emmet hides a huge amount of intelligence under the bonnet, of the Russian chess players' kind, who are often able to think 5 steps or more ahead and construct a strategy based on that insight. In contrast, the Atom snippets shine as solutions for one problem at the time. I must say I like that, as it allows me to not having to leave my hammock for something that could lead to a headache.
But we should not underestimate the Atom snippets, they are an integral part of the default 'language:html' package, which exists thanks to years of work of dozens of contributing developers! Ah the beauty of open source!
Rather than presenting the very long list here, I'll share a link to it. It would be hard to complain about incompleteness ;-) In fact with such an overwhelming amount of snippets, selecting the 10 to 20 most used ones would certainly be a priority for anyone thinking practically. Having a list of, say, the 20 most common tags, would be not only desirable , but completely necessary for productive writing work. Creating a second tab for the rest of the snippets would make it perfect.
My personal quick selection of the essentials would be, alphabetically:
Now it gets interesting. It wasn't after watching this video that I dared to consider building my own snippets. Before I watched it, I had been reading a bit about making your own snippets and I quickly concluded this is for developers only...Thanks to willjw3, who made the video, I now know my conclusion was premature.
Let's try:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog - Featherweb</title>
<link rel="shortcut icon" type="image/x-icon" href="img/feather.webp">
<link rel="stylesheet" href="../blogstyle-min.css">
</head>
<body>
<img src="../img/feather.webp" class="center" alt="feather">
<h2>Featherweb Blog</h2>
<a href="../blog.html" class="">Blog index</a>
<img src="$1" alt="$2" title="$3" class="round10" />
<br><br>
<h2><i>$4</i></h2>
<p>$5</p>
<a href="#" class="toTop" title="back to top">🔼</a>
</body>
</html>
This is the html skeleton I use to start a blog post. So I'll make a snippet that makes this html appear, just by typing 'post'. It is easy! In Atom click 'snippets' in the menu 'Edit' column. This opens a file called 'snippets.cson'. That's the place where your selfmade snippets are created and kept.
This image shows the BLOG_PAGE snippet in the snippets.cson:
The first time you open 'snippets.cson' it is empty. The easiest way to start making your first snippet is by typing 'snip', that is itself a snippet to make snippets ;-). That creates this:
The first line defines the language. In our case it should be changed to
'.text.html'
The second line is the snippet's name, your choice.
The third line is the prefix. That is also your choice: a short word or abbreviation that starts the snippet's action.
The last line is the body text , the result of the snippet's process. If you leave the single quotes (the ones around Hello World! in the picture), the body text, no matter how long, will be on one line.If you want to preserve the wrapping,empty lines, etc, you have to replace the single quotes with """ in front of the text and the same """ behind it. Like I did for the BLOG_PAGE snippet.
Once you have made your first snippet, you will be surprised hwo much time you can save just using a couple of snippets. And it liberates you from all that boring html writing! 🔼