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).

images/figures/word_italics
Figure 1: Setting text to italics in a word processor.

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).

images/figures/this_post
Figure 2: The plain-text source for this post.

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.

images/figures/sidebar_index
Figure 3: Opening index.html in the sidebar.
Listing 1: The result of running the HTML tab trigger in Atom.
<!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.

images/figures/default_skeleton
Figure 4: The default HTML skeleton in the Atom editor.

The result is the simple HTML skeleton shown in Listing 2 and Figure 5.

Listing 2: A simple HTML skeleton. ~/website/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>
images/figures/simple_skeleton
Figure 5: A simple HTML skeleton in Atom.

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.)

Listing 3: The final sample website HTML. ~/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>
images/figures/completed_website_html
Figure 6: The final form of the minimalist sample website 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.

images/figures/completed_website
Figure 7: The completed sample website in a browser.

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.

1. Opening the whole directory like this isn’t technically necessary, especially since it currently has only one file, but this technique of using touch to create a file and atom . to open the full directory scales up nicely to bigger projects.
2. Answers: The "en" value refers to English, while the "ltr" value indicates that the text runs from left to right.
MORE ARTICLES LIKE THIS:
learnenough-news , tutorials , text-editor