Text Editor: The Missing Application
Aug 13, 2019 • posted by Michael Hartl
Learning to code? Learn Enough is based on the idea that you don’t have to learn everything about tech to get started—you just have to learn enough to be dangerous. This is the second in a series of posts introducing the main Learn Enough tutorials. You can also read the first one and the next one. You might also enjoy the Learn Enough Text Editor free sample chapters and free sample videos.
Learn Enough Text Editor
If the command line is the application that most clearly divides “technical” from “non-technical” people, the text editor is a close second. Indeed, given its ubiquity, a good case can be made that the text editor is #1. This despite many people not even knowing what a text editor is, which is why I sometimes call it the “missing application”.
To end the suspense for anyone not in the know: a text editor is a general tool for editing a data format known as “plain text”—roughly speaking, text that consists only of characters, without any additional formatting.
For example, in a word processor like Microsoft Word, you might emphasize a word using italics by double-clicking on it and selecting the “I” icon (Figure 1).
In contrast, in HTML edited with a text editor, you’d do this instead:
you’d do <em>this</em> instead
Here the <em> formatting (known as a “tag”) indicates emphasis, but the tag and the word “this” itself are just plain text.
It’s really hard to express how important plain text is. It’s the format of choice for:
- Formatting and markup languages (HTML, CSS, Markdown, LATEX, etc.)
- Source code (C/C++, JavaScript, Python, Ruby, etc.)
- Configuration files (.bashrc, .bash_profile, .gemrc, config.yml, etc.)
- And so on…
Indeed, every post on this blog (including this one) was written using a text editor (Figure 2).
The power of text editors
Because of its central importance, this important class of application is the subject of the second Learn Enough tutorial: Learn Enough Text Editor to Be Dangerous.
Like all the Learn Enough tutorials, Learn Enough Text Editor to Be Dangerous comes as a book (150 pages), as videos (1½ hours), and as a self-paced online course (including all the book and video content, plus 74 exercises and several other features).
To show off the power of text editors, I made a short video of a web page being created using the Atom text editor, one of the editors covered in Learn Enough Text Editor to Be Dangerous:
The plain-text file in the video is HyperText Markup Language, or HTML, the language of the World Wide Web. Let’s take a quick look at the steps needed to create it.
We start by applying the lessons of Learn Enough Command Line to Be Dangerous to make a directory for the website using mkdir, change into it using cd, and create an empty index.html file using touch:
$ mkdir website
$ cd website/
$ touch index.html
(This is a good example of how the Learn Enough tutorials complement and build on each other.)
Next, we open up the current directory . (“dot”) using Atom:1
$ atom .
After selecting index.html in the sidebar to open it (Figure 3), we then use a so-called tab trigger to create an HTML skeleton by typing the letters html and then the tab key, sometimes written using the symbol ⇥. In Atom, typing html⇥ gives the result shown in Listing 1.
index.html in the sidebar.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
The highlighted line in Listing 1 shows the lang (“language”) and dir (“direction”) attributes. These elements and their values are optional—can you figure out what the values mean?2—so for simplicity we’ll delete them. This involves highlighting the text (using either arrow keys or the mouse), as shown in Figure 4, and then pressing the “delete” key.
The result is the simple HTML skeleton shown in Listing 2 and Figure 5.
~/website/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
The video shows how to use other tab triggers and additional features of Atom to flesh out this skeleton with the HTML code shown in Listing 3 and Figure 6. (This is an excellent example of the power of video to illustrate things that are difficult to communicate in text, which is one reason why the Learn Enough courses include video content.)
~/website/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<img src="https://secure.gravatar.com/avatar/ffda7d145b83c4b118f982401f962ca6?s=200"
alt="Michael Hartl">
</body>
</html>
The result is a simple yet real website (consisting of a single page), as shown in Figure 7—all created in less than one minute using a text editor.
Now, it’s possible to spend years learning all the ins and outs of your text editor of choice—and you might even change editors a time or two—but the good news is that you don’t have to learn everything to get started: you just have to learn enough to be dangerous.
- Learn Enough Text Editor to Be Dangerous: Learn the basics of text editors (including Vim and Atom) while learning Markdown and even a little HTML.
- All Access Subscription: Get full access to Learn Enough Command Line, Learn Enough Text Editor, and all the Learn Enough courses for one monthly price.
touch to create a file and atom . to open the full directory scales up nicely to bigger projects."en" value refers to English, while the "ltr" value indicates that the text runs from left to right.