Kitten

Index › 3. Hello Kitten, revisited

Cha-cha-cha changes…!

Now that we have our shiny new tools, let’s change (“edit”) our Hello, Kitten example:

1. Switch to the directory of our project, in case we’re not there already:

   cd ~/small-web-course/hello-kitten
   

2. Fire up Helix Editor:

   hx .
   

3. Pick the index.html file from Helix Editor’s file picker.

   We’re going to alter the code so it reads:

   <h1>Four kittens</h1>
   <p>🐱️🐱️🐱️🐱️</p>
   

   Helix is a modal editor where you first select the thing you want to change and then issue a command to change it.

4. Press the left arrow and right arrow keys and you should see your cursor move left and right as you would expect from any other graphical editor.

   However, if you press h and l, you will see it do the exact same thing, unlike what you’d expect in a graphical editor, where you would expect “h” and “l” to be inserted in the text.

   The reason h and l move the cursor instead of entering “h” and “l” is because you start out in Normal mode, which is for navigating around and selecting bits of your code to manipulate.

   Also try the w and b keys to move forward and back one word of a time. Notice that the word is selected as you navigate this way.

5. Use the navigation commands you just learned to move your cursor to the k in Kitten and press the i key to issue the insert command and enter Insert mode with the insertion point right before where your cursor was.

6. Type Four and press the Esc key to return to Normal mode.

7. Next, let’s make that “Kitten” into “kittens”:

   Your cursor should be on the K in Kitten now and we want that K to be a lowercase k instead. We have several ways we can achieve this:

   Press r for the replace command, and then type a lowercase k.

   OK, that worked, but let’s also learn a few other ways that will come in handy later.

   First, undo what you just did by pressing the u key to issue the undo command.

   The K should be capitalised now and your cursor should still be on it.

   Issue the switch_to_lowercase command by typing in a backtick (`). If you want to make it uppercase again, you can issue the swich_to_uppercase command by typing in Alt `

   Pretty cool, huh?

   And you’re not limited to changing just a single character at a time either.

   Press the w key to select the whole word (kitten) and try issuing the switch_to_lowercase and switch_to_uppercase commands again. You should see the whole word change in response.

   This is the power of the select-then-manipulate model that Helix Editor uses.

   Now, with the whole word selected (or with your cursor on the n in kitten), issue the append_mode command by pressing the a key and type an s to make the word kittens.

   Press Esc to return to Normal mode.

8. Right, we’re getting there. But it would be nicer if our two HTML tags (h1 and p) were on different lines so our code is easier to read. So let’s enter a line break in between the closing </h1> tag and the opening <p> tag:

   Issue the find_next_char command by pressing the f shortcut and then press > to find and jump to the > sign at the end of the closing </h1> tag.

   Press a to enter append mode.

   Press Enter to enter a line break.

   Press Esc to return to Normal mode.

9. Ok, the only remaining change we need to make is to replace one kitten with four.

   Navigate your cursor so it is on top of the kitten emoji using the commands you learned earlier.

   Press the y shortcut to fire the yank command. This places whatever is selected in your source code on Helix Editor’s internal clipboard.

   Press the p shortcut three times to fire the paste_after command so you end up with four kittens.

10. Finally, we just need to save our file.

    To do that, you have to call up the Helix command-line (think of it as a little terminal built into Helix Editor itself) using the : key and enter either write or, the shortcut, w and press Enter

    Similarly, to quit Helix Editor, issue the :quit or :q command.

Run kitten again and hit https://localhost in your browser (or refresh the browser window) to see it render your updated source code.

Next lesson: On HTML, CSS, and JavaScript (to be written)