Kitten: Course

Set up your development environment and creating your first web page.

Topics covered

Setting up your development environment
Picking a package manager (default: brew)
Picking a terminal (default: WezTerm)
Picking a source control system (default: git)
Picking an editor (default: Helix Editor)
Installing Kitten

First steps

So you want to learn Small Web development… but where do you start?

If you’ve never programmed a computer before, you will need to install some basic tools first.

Technically speaking, you don’t necessarily need all of the tools listed here before you can start but having them will make your life easier in the long run and make you a better developer.

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.

If you’re running on a Mac that has an operating system older than macOS Sonoma (14), Brew will not work for you and you will have to use MacPorts instead.

To install Brew:

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

So, little white lie earlier, Brew can also install graphical apps and keep them up-to-date. So that’s nice.

Now exit your default terminal app and launch WezTerm.

WezTerm should work well out of the box. However, if you want to customise it further, you can do so using a configuration file.

WezTerm’s configuration is file is kept in the ~/.config/wezterm/wezterm.lua file. Take a look at Aral’s WezTerm configuration. If you like it, just copy and paste it in its entirety or just take the bits you want from it to add to your configuration.

Other good terminal apps include Ghostty, which is cross-platform also, and iTerm2, which is macOS only.

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

Some operating systems might come with git pre-installed but it might not be the latest version. So even if your system comes with git, install it using Brew so that you can easily keep it updated using the brew upgrade command.

You can also use graphical tools to help you use git. One that is very useful is Sublime Merge. If you keep it open you can see a real-time view of your changes as your make them. It also makes it easier to selectively commit smaller bits of changes (hunks or even individual lines) and, as its name indicates, has tools to make making changes easier when there are conflicts. Don’t worry too much about the ins and outs of git at the moment. You will get hands-on experience with it starting in the next lesson.

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

How do we know that the package name for Helix Editor is helix? Well, one way is to look on the web site. Most tools tell you what the package name is and how to install it using Brew. The other way is to search for it using Brew itself: e.g., brew search helix will find packages that have helix in the name.

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

Also see the Learn Helix section on the Helix web site.

Installing Kitten

Finally, in order to make Small Web apps using Kitten, you have to install Kitten itself.

You can find the installation command you have to copy and paste into your terminal on Kitten’s home page.

Once Kitten is installed to you can check that it is working by asking it to print its version:

kitten version

Hello, world!

Right, now we have all our tools, it’s time to create our very first web site.

It’s customary in programming circles for your first app to be a “Hello, world!” app that prints that very string on the screen.

But, hey, since we’re using Kitten, we will make ours display a Kitten emoji on a web page instead.

To start, let’s switch your home directory and create a folder to hold all our lesson examples.

Switch your home folder:
```
cd ~
```
Create a new folder to hold the course lessons as you work through them:
```
mkdir small-web-dev
```
Change your working direct to the newly-created folder using the change directory (cd) command:
```
cd small-web-dev
```
Make a folder for the Hello, Kitten project and switch into it:
```
mkdir hello-kitten
cd hello-kitten
```
Make a file to hold the index page of our web site:
```
  touch index.html
```
Fire up Helix Editor:
```
hx .
```
Pick the index.html file from Helix Editor’s file picker.
In the empty file, add the following code:
```
<h1>Kitten</h1>
<p>🐱️</p>
```

What you see about is called Hypertext Markup Language or HTML for short. It is how you mark up regular text to give it meaning that a browser can understand.

In the code above, you do this using the h1 and p tags.

The h1 tag stands for Heading Level 1 (the topmost heading in a page’s heading hierarchy) and the p tag stands for paragraph text.

So our page will have a heading of Kitten and a paragraph that just contains a single kitten emoji.

Open a new pane to the right in WezTerm using ctrl shift r and run Kitten in it:

kitten

Once Kitten is running, open your favourite web browser and navigate to https://localhost, and you should see your new site.

Congratulations, you just made your first web site! :)

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

Index › 1. Setting up

Topics covered

First steps

Terminal

Package manager

Terminal, revisted

Version control

Code editor

Installing Kitten

Hello, world!

Like this? Fund us!