Kitten

Index › 2. Tools of the trade

Developing with class

In the first lesson, you created your very first web page using nothing but the Terminal app that comes on your system and Kitten.

However, this is not how we usually work.

You can imagine how difficult programming would be if we had to use echo commands and pipe our HTML source code to files every time we wanted to make a change.

Instead, we write code using code editors and we use other tools like version control to help us manage the development process.

So if this is your first time programming, you will need to install some basic tools first and set up your development environment so you can have a good developer experience.

In fact, you’ve already met one of these tools, the terminal app.

Terminal

Especially if you’re on a Mac, your entire experience of computing could be confined to safe and visual environment of graphical interfaces with familiar concepts like windows, tabs, and documents and controls like menus, links, and buttons that you manipulate using your mouse or trackpad.

Well, fledgling developer, prepare to meet a different way of interacting with your computer that eschews all that for a chat-like textual interface. Unlike the natural language chat interfaces you might be used to, however, where the computer adapts to the language you already know, when using a terminal application, you must learn and use certain commands that the computer understands.

(Don’t worry, it’s not hard. And once you learn to use a terminal, you can decide when it makes sense to use a graphical interface and when the terminal might be faster/easier.)

Our biggest worry right now is which terminal application should you use.

Every modern operating system comes with a default terminal app. On macOS, this is the Terminal app. On Linux distributions, the default terminal app will differ based on particular flavour of Linux.

While the default terminal app is entirely passable, developers all have a favourite terminal app or two that works best for them.

The terminal app we’re going to use in this course is a cross-platform app available on both macOS and Linux called WezTerm.

And while there are many ways to install WezTerm and the terminal-based tools we will be using in this course, we are going to use a cross-platform terminal-based package manager called Brew to install our terminal and other terminal-based tools.

If this sounds a bit chicken and egg, well, it is.

So, to start with, fire up the default terminal app on your system (for macOS, this is the Terminal app) and let’s, first things first, install Brew itself.

Package manager

A package manager helps you find, install, update, and remove terminal-based (sometimes refered to as command-line) applications.

Unlike graphical applications (which, for example, you can install using the Apple App Store) and which comprise Windows and tabs and other uhum graphical elements, command-line applications are text-only and run inside a terminal.

For this course, we are going got use a cross-platform package manager called Brew that is easy to use and has a wide range of applications.

To install Brew:

1. Open the default terminal app for your system (for macOS, this is the Terminal app). You will see a prompt. This is the terminal app waiting for you to enter a command.

2. Navigate to the Brew web site and copy the installation command you see there.

   Only copy and paste commands into your terminal from a web site that you trust.

   The command should look like this:

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   

You should now have Brew installed.

Next, let’s use our newly-installed package manager to install a new terminal app.

Terminal, revisted

In your default terminal app, run the following command:

  brew install wezterm

This should download and install WezTerm. Which, as a Terminal app, is itself actually a graphical app (it appears in its own graphical window).

Now exit your default terminal app and launch WezTerm.

Version control

When building Small Web sites and apps, you will be working in a text editor to create what is called source code – the instructions that will tell the computer (in this case Kitten and your web browser) what to do and when.

While working on projects, you will make lots of changes to your source code. Each change you make creates a new version of your code that acts a little bit differently. A version control system (sometimes call source control or revision management system) helps you keep track of those changes and, if you break something, to undo it. It also makes it easier for teams to work together and for you to experiment with different versions of your site or app without worrying too much about breaking things.

There are lots of different version control systems but a very popular one – and the one we will be using in this course – is called git.

To install Git, let’s just use Brew like we did before:

brew install git

Code editor

You write the source code for your Small Web sites and apps using a special type of text editor called a code editor.

There are lots of code editors – both graphical and command-line ones.

The editor we’re going to use is a modal editor (an editor that has different modes: e.g., text insertion vs. code navigation) called Helix Editor.

And, predictably, we can use Brew to install it:

brew install helix

Helix Editor, as mentioned earlier, is a modal editor. This will likely be different to other non-modal (like Sublime Text Or VSCodium) and/or WYSIWYG (What You See Is What You Get, like Apple’s Pages, for example) that you have used before. It is a good idea, therefore, to run the built-in tutorial and learn the basics of text and code editing with Helix Editor:

  hx --tutor

(The --tutor is known as a command-line flag. It changes the behaviour of the tool. In this case, instead of starting up normally with the file picker, you are instructing Helix Editor to run its tutorial.)

Next lesson: Hello, Kitten, revisited