# Let’s build a file encrypter with Python

Today we’re going to take a bit of a detour from web development and head more towards the realm of software development, while dunking our toes into the world of intrigue that is cryptography and information security. I used a lot of buzzwords there but do not be alarmed! I intend this tutorial to be accessible to all programming levels, however having prior knowledge of Python or another object oriented programming language, and knowing your way around the command line, will make it a lot easier to follow along. Even if this sounds all over your head, I encourage you to continue reading. There is no better way to learn than to tackle a hard problem, deconstruct it, and identify the what you know and what you don’t know. If my computer science degree taught me anything, it’s that Google is my best friend. With that being said, let’s get this started!

## Encryption

Let’s start by defining a key concept here: encryption. Encryption is the process of altering information or data into a form that is unrecognizable from its original state. It needs to be a reversible process (called decryption) and should make it hard for unauthorized parties to obtain the information you are encrypting. Encryption algorithms take an input, referred to as plaintext, which is the data you want to encrypt, and outputs ciphertext, which should look like a garbled up mess if everything was successful.

All algorithms use a key which is just a long string of bits (1’s and 0’s) to handle encryption and decryption. This key works similarly to a physical key in real life. Just like your house key locks and unlocks your door, an encryption key locks and unlocks data. There are many kinds of encryption algorithms out there that use different sized keys. Typically the larger the key size is, the harder the encryption is for someone to break or hack. Check out this video about encryption that does a way better job of explaining how it works, without going too in depth.

The encryption algorithm we’ll be using today is called AES. It stands for Advanced Encryption Standard and was adopted by the U. S. government in 2001 as the standard to encrypt electronic data. We’ll be encrypting with a 256-bit key derived with PBKDF2, which stands for Password-Based Key Derivation Function. There is a lot of jargon in that sentence, but simply put we will be using a commonly used encryption technique with a key we create with a password that we set.

## What you’ll need

In this tutorial we will be coding in Python 3 and using the Pycryptodome library. Pycryptodome is a Python package that implements a lot of different cryptographic functions. This is awesome because we get to play around with a bunch of different encryption algorithms and tools without having to code them from scratch.

You are going to need to have Python installed on your computer and any text editor you are comfortable using. If you are on Windows 10 and need help getting set up, follow this Guide that will take you through installing the Windows Subsystem for Linux (WSL) and get you up and running with python. Just complete up through the “Run a simple Python program” section. The Windows Subsystem for Linux (WSL) is a relatively new Windows 10 feature that allows you to run Linux programs natively in a Windows version of the Bash shell. When you install it you get an awesome Ubuntu-based command line terminal where you can do all your development. I recommend doing this tutorial with WSL since it’s what I developed this program in and because I believe it’s a really good way to start easing yourself into the Linux ecosystem, which is important to learn if you want to get into web or software development.

### Mac Users

macOS should come with python 2.7 out of the box. We can install python 3 using Homebrew, Mac’s package manager. If you don’t have Homebrew installed on your machine, open up your terminal and run:

``````/usr/bin/ruby -e "\$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
``````

That should get Homebrew installed. Now let’s use it to get Python 3. In the terminal run:

``````brew install python3
``````

This will tell Homebrew to grab the latest version of python and you should be good to go on with the rest of the tutorial.

Once you have your development environment ready to go, type the following into your command prompt and hit enter:

``````pip3 install pycryptodome
``````

This command invokes pip, the python package manager, and tells it to go search for and install pycryptodome and any dependencies so we can start coding some awesome encryption scripts. Once pip finishes installation we will be ready to start.

Now, with your text editor of choice, let’s create a new file. I named mine `crypto.py`.

## The encryption functions

Below, I’m going to start defining some functions for our encryption, then I’ll explain what they do line-by-line.

``````from Crypto.Cipher import AES
from Crypto import Random
from Crypto.Protocol.KDF import PBKDF2
import os

def encrypt(text, key):
pad = lambda s: s + b"\0" * (AES.block_size - len(s) % AES.block_size)
cipher = AES.new(key, AES.MODE_CBC, initialization)
return initialization + cipher.encrypt(text)
``````

In the first four lines we are importing all the external packages we will be using throughout the program. From the Pycryptodome package we are importing the `AES`, `PBKDF2`, and `Random` functions. We will also be importing the `os` package which should already come with your Python installation.

Next we define our main encryption function. The function takes two inputs: the text or data we want to encrypt and a key used for encryption. We handle key derivation a little later. In this function we need to handle a few important things. First we need to pad the text to ensure the size of the data is a multiple of the block size of the algorithm. The block size of AES is 16 bytes so our data must be padded so that it is a multiple of 16 bytes. You can pad your data with any character. In this example we are padding with null character, “\0”.

Second we create our initialization vector (IV). An IV is a string of random bits that is used to mix in with your data during encryption to make it harder to crack. Here we create a new variable called initialization and pass 16 random bytes into it.

Now we can create our AES encryption object. Here I name the object `cipher`, call the Pycryptodome `AES` function and pass it our yet-to-be-generated key, tell it we want CBC mode and finally pass it our IV. Don’t worry about understanding CBC mode for now. We are saying we want to use Cipher Block Chaining. CBC is a bit of an advanced topic to try to explain in brevity here, but I encourage you to research on your own if interested.

Our encryption object is now constructed! Next we finish this function off by returning the IV + the ciphertext which we get by running `cipher.encrypt` on our padded text.

## Encrypting files

OK, so we just wrote a function that encrypts strings, but now we want to encrypt files. How can we do this? We need to write a function that reads a file, saves its contents as a string and then run our encryption function on it. Then we write that encrypted string to a new file and, voila, file encryption! Lets define that function below:

``````def file_encrypt(file_name, key):
with open(file_name, 'rb') as input_file:
encrypted_text = encrypt(plaintext, key)
with open(file_name + ".enc", 'wb') as output_file:
output_file.write(encrypted_text)
os.remove(file_name)
``````

This function also takes two parameters: a string that will be the name of the file we wish to encrypt and, again, the key that we will generate shortly. First we open the file, read its contents, and run our previously defined encryption function on it. Then we create a new file and write the encrypted ciphertext to it. We save the file with the same file name as the original but with an added `.enc` extension to indicate to us that it is encrypted. Now all that is left to do is to delete the original unencrypted file from our directory using the `os.remove()` function.

## The decryption functions

We now have a mechanism to “lock” files, but what good is a lock that can not be unlocked? As I explained earlier, encryption needs to be a reversible process. Let’s build a pair of functions that will allow us to decrypt our files.

``````def decrypt(encrypted_text, key):
initialization = encrypted_text[:AES.block_size]
cipher = AES.new(key, AES.MODE_CBC, initialization)
plaintext = cipher.decrypt(encrypted_text[AES.block_size:])
return plaintext.rstrip(b"\0")
``````

Here we take two parameters: our encrypted text and the key we used for encryption. It is very important we pass in the same the key we previously used to encrypt or python will throw us an error when we run the code.

The first thing we need to do is identify our IV from our encrypted text. This is easy since we saved it at the front of the string. Since we know its size, we can perform a string slice only copying the first 16 bytes of the string (the AES block size).

Now that we have our IV we can create our AES object again and use it to decrypt the message omitting the first 16 bytes. The result is the plaintext padded with the null characters(“\0”). Finally we can return the original text by stripping off the null characters.

## Decrypting files

It turns out that decrypting files is just as straightforward as encrypting them. We perform the same basic steps. First we read the encrypted text, pass it to our decryption function and write the plaintext output to a new file.

``````def file_decrypt(file_name, key):
with open(file_name, 'rb') as input_file:
decrypted_text = decrypt(encrypted_text, key)
with open(file_name[:-4], 'wb') as output_file:
output_file.write(decrypted_text)
os.remove(file_name)
``````

## Generating keys

Finally the moment you’ve all been waiting for… key derivation! Thus far we’ve built a functioning lock but we have no key to lock it with. There are many key derivation functions we can use that offer various trade-offs between speed and security. If an algorithm generates a key too quickly, it could be easily cracked. By the same token, if you choose an algorithm that produces a very secure key, then it may be too resource-intensive to be used practically. For our purposes the `PBKDF2` algorithm offers a good speed-vs-security balance. This algorithm will give us a 32 byte (256 bit) key given a user-supplied password with salt. Yes, I said salt and, no, this didn’t turn into a recipe blog post. In cryptography, salt is a random string of bytes that is used by the algorithm that makes it more difficult for your password to be cracked. It also allows multiple users to enter the same password and generate unique keys. Ideally you should generate a unique salt for every user to increase password security. For our purposes, however, we are using a “fixed” or hard-coded salt. This means we will be using the same salt for every key generated. Again, this is not safe and should not be done for serious implementations. Do not use this program to encrypt files you actually need to keep 100% safe. This tutorial is for educational purposes only.

Now let’s write our key generator!

``````def generate_key(password):
salt = b'\x83\xdb\xb9\xd3\xdc"\x1e\x0ee"\x0c\xf0=5\xab_\x18\xd7\xd2\x98\x92Q.\xbd\x9cK\x96\x93-J\x08\xe0'
``````

This probably didn’t need its own user defined function but I wrote it this way to make what we’re doing a little more clear. Pycryptodome does all the heavy lifting for us here. All we have to do is supply the password in the form of a string and the salt. You can generate your own salt by opening your python console and typing the following commands:

``````from Crypto.Random import get_random_bytes
get_random_bytes(32)
``````

That command will generate a random byte string based on the length you specify, in this case, 32 bytes. Now all we do is feed this to Pycryptodome’s `PBKDF2` function and return the output which should be a 32 byte (256 bit) key!

## Finishing touches

If you have been following along this far go ahead and pat yourself on the back. We just made the inner workings of a pretty sweet encrypting tool! Now all we need to do is make a simple driver to test it all out.

Here is the completed code:

``````from Crypto.Cipher import AES
from Crypto import Random
from Crypto.Protocol.KDF import PBKDF2
import os

# *** Encryption Functions ***
def encrypt(text, key, key_size = 256):
pad = lambda s: s + b"\0" * (AES.block_size - len(s) % AES.block_size)
cipher = AES.new(key, AES.MODE_CBC, initialization)
return initialization + cipher.encrypt(text)

def file_encrypt(file_name, key):
with open(file_name, 'rb') as input_file:
encrypted_text = encrypt(plaintext, key)
with open(file_name + ".enc", 'wb') as output_file:
output_file.write(encrypted_text)
os.remove(file_name)

# *** Decryption Functions ***
def decrypt(encrypted_text, key):
initialization = encrypted_text[:AES.block_size]
cipher = AES.new(key, AES.MODE_CBC, initialization)
plaintext = cipher.decrypt(encrypted_text[AES.block_size:])
return plaintext.rstrip(b"\0")

def file_decrypt(file_name, key):
with open(file_name, 'rb') as input_file:
decrypted_text = decrypt(encrypted_text, key)
with open(file_name[:-4], 'wb') as output_file:
output_file.write(decrypted_text)
os.remove(file_name)

# This function takes an alphanumeric string as a password and passes it to pycryptodome's PBKDF2
# algorithm to generate an encryption key
salt = b'\x83\xdb\xb9\xd3\xdc"\x1e\x0ee"\x0c\xf0=5\xab_\x18\xd7\xd2\x98\x92Q.\xbd\x9cK\x96\x93-J\x08\xe0'

secretfile = "top_secret.txt"

option = int(input("Enter 1 to encrypt file.\nEnter 2 to decrypt file.\nSelection:"))
if option == 1:
file_encrypt(secretfile, key)
print("file encrypted!")

elif option == 2:
encrypted = secretfile + ".enc"
file_decrypt(encrypted, key)
print("file decrypted!")
``````

At the very end I included a simple test to see it all in action. The string `secretfile` contains the name of the file you want to encrypt.

To run the code from the command line make sure you are in the directory the file is located in and run the following command: `python crypto.py`.

If you have older versions of python installed, you may have to run `python3 crypto.py` to specify we want to use Python 3.

Feel free to modify the code in any way you want! Remember this code isn’t 100% safe, do not use it to secure sensitive documents or anything you do not want to possibly become corrupted!

Great job sticking with the tutorial and seeing it through to the end! I hope you learned a little bit about how encryption works and that I was able to pique your interest in cryptography and information security. It’s a really promising career path that is in high demand. I encourage you to do a little research and come up with ways to make our code more secure. Maybe look into password hashing and ways to validate that the user entered the correct password. Well that’s enough out of me. Thanks for reading and catch you next time!

Posted in: Python, Tutorial

# Styling your first webpage with CSS

If you’ve followed along, then you’ve created your very own webpage using HTML and put it on the web using Netlify. You probably noticed that it’s very plain-looking. That’s because we haven’t specified how anything should look. By default, the browser applies some basic styles—headings are big and bold, lists are indented, links are blue and underlined.

These default styles get the point across and make the site usable, but we could definitely make some improvements and use our own sense of style to add some personality. Design on the web is a big, wonderful world, with many resources to help yourself learn and improve. Here’s a great book on web design made for non-designers.

That said, for this article, we’re going to keep things simple and focus more on how to write CSS than how to create a great design. As you get better at HTML and CSS, you will be able to do more and you will need to follow design principles to keep your websites from becoming cluttered and chaotic. Fortunately, our site only has a little content.

As a reminder, here’s an example of the unstyled website we created in the last article.

If you want see what styles we’ll be adding to this page, check out the styled version of the website.

## The `<style>` tag

CSS, or Cascading Style Sheets, is the language that we use to describe the appearance of our webpages. Any CSS styles that we add get applied to our webpage in addition to the basic styling that the web browser has already supplied.

Where do we write CSS? Well, remember that our `index.html` document contains a `<head>` section that has information about the page that is invisible to the user.

``````<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>My awesome website</title>
<body>
<h1>My awesome website</h1>

<li><a href="index.html">Home</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>

<p>My name is Blake. I enjoy making websites and writing articles. I think everybody should have a personal homepage.</p>

<h2>Favorite board games</h2>

<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Monopoly</li>
</ul>

<h2>Favorite TV shows</h2>

<ul>
<li>Stranger Things</li>
<li>Cheers</li>
<li>Game of Thrones</li>
</ul>
</body>
</html>
``````

We can add a `<style>` tag inside the `<head>` tag that will contain all of our CSS code.

``````<head>
<meta charset="UTF-8">
<title>My awesome website</title>
<style>
...CSS code goes here...
</style>
``````

Great, let’s write our first CSS rule.

``````<style>
body {
font-family: "Gill Sans", sans-serif;
}
</style>
``````

This rule changes the font of everything inside the `<body>` tag to Gill Sans, if available on the user’s device. If not, it tells the browser to use a default sans-serif font. 1

Save the file and open it up in a web browser (File > Open File…).

## Anatomy of a CSS rule

Let’s look a little more closely at what we did in that example. Here’s the code again (from now on I’m omitting the `<style>` tag in these samples, but that is where the CSS code lives for now).

``````body {
font-family: "Gill Sans", sans-serif;
}
``````

That first bit, `body`, is called a selector. You might say it selects the parts of your page you wish to style.

The line inside the braces (`{}`) is a property and value. The property in this example is `font-family`, which controls what font you want to use. The value is `"Gill Sans", sans-serif`, which tells the browser, “I would like to use Gill Sans but if the user doesn’t have it, use any sans-serif you have.” Note that a `;` goes at the end of the property/value line.

You can add multiple properties to a rule. For example, let’s make the width of our page more narrow so that users with wide screens don’t have to follow the text all the way across the screen.

``````body {
max-width: 500px;
font-family: "Gill Sans", sans-serif;
}
``````

We just set the `max-width` property of the `body` to be `500px`. That means the width of our page will never exceed 500 pixels in width. Any text that would go beyond that width will instead be wrapped around to the next line.

It doesn’t really matter what order the properties go in, but I have my own preferences I tend to follow. The important thing is that, whatever ordering scheme you decide on, you be consistent.

As you can probably imagine, there are quite a few properties that you can use. In time, you will begin to remember the common ones offhand. But if you aren’t sure what property you need or you just want to see what’s available, check out the MDN CSS Reference (it’s a long list, but remember that you only need a handful for now—there’s no need to memorize this list.

## Adding more styles to the page

Let’s look at our styling progress up to now.

So far, so good. But we should probably make the page a bit more centered so that people with wide screens don’t have to stare off to the left side so much.

We’re going to use the `margin` property, which controls the space around an element. Specifically, we’re using `maring-left` and `margin-right`, like this:

``````body {
margin-left: auto;
margin-right: auto;
max-width: 500px;
font-family: "Gill Sans", sans-serif;
}
``````

We could have specified a pixel value here, but by using the `auto` keyword, we’re telling the browser that we want an even amount of margin to the left and right of the page. The result is that the page is centered in the browser window.

Okay, cool. Let’s try changing some colors.

``````body {
margin-left: auto;
margin-right: auto;
max-width: 500px;
font-family: "Gill Sans", sans-serif;
background-color: antiquewhite;
}
``````

That will give us:

Woo hoo, colors! We’re setting the `background-color` property, which defines the color of empty space, the background of the page. We’re also setting `color`, which controls the color of text on the page.

There are different ways to reference colors in CSS. We’re using color keywords for ease of use. You can see the whole list of available color keywords, as well as other ways to represent colors, on this MDN CSS color reference.

We’re not going to win any design awards for the color choices here, but it’s my webpage and I can do what I want. 2

By default, links are blue. But that isn’t sitting well with with the warm colors we chose. Let’s change it to something warmer.

``````a {
color: firebrick;
}
``````

We’re creating a new rule. We want to target all of the `<a>` elements on the page. We can do that by using `a` as the selector. Remember that `color` controls the text color. We’ll make it a reddish color.

For fun, let’s make it so that the color of the link changes when you hover the mouse over it. We’ll need a new rule for this, with a slightly different selector. We don’t want to target every link, only the one the mouse is being hovered over. CSS has a special syntax for selecting elements that are in a certain state, like being hovered over.

``````a:hover {
color: crimson;
}
``````

This selector says, if a link is in the hover state, apply this rule. In this example, we’re just changing the text color.

## Meaning vs. appearance

Let’s make our navigation links sit horizontally in a row rather than stacked in a bulleted list. Remember, our list of links looks like this:

``````<ul>
<li><a href="index.html">Home</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>
``````

You might think, “Well if I don’t want a bulleted list, I’ll just change the HTML.” But in this case, we aren’t changing the meaning of the menu—it is still a list of links. It’s just that we’re changing the way it looks by tweaking the layout and removing the bullets.

So we’ll keep the HTML the way it is. But we’ll add some CSS to change the appearance.

``````ul {
list-style: none;
}
``````

First, we’ll target the list as a whole. We’ll set `padding-left` to `0` to remove the indentation (padding is similar to margin, but we’ll discuss the difference later). You can use `list-style` to change the bullet type, but we’re setting it to `none` so that the bullets are removed altogether.

Next, we’ll target the individual list items, or `<li>` elements.

``````li {
display: inline-block;
margin-right: 15px;
}
``````

Setting the `display` property to `inline-block` will cause the list items to sit next to each other in a row. We’ll add a little `margin-right` to the list items so that they are spaced apart nicely.

But notice, there’s a problem:

By attempting to style our menu list, we inadvertently styled all of our lists. We don’t want that. But how do we target only the menu list? We can give it a name.

``````<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>
``````

We can give any element the `class` attribute to give it one or more names (separated by spaces) that we can use in our CSS. Let’s adjust our CSS to use the new name.

``````.menu {
list-style: none;
}
``````

We changed the `ul` selector to `.menu`. When using class names in CSS, we start them with a dot.

We can use this same name to target our list items.

``````.menu li {
display: inline-block;
margin-right: 15px;
}
``````

This selector is saying, “target all list items that are inside an element with the class name of menu.”

Now that both of our rules are specifically targeting the `menu` class name, our regular lists have reverted back to their original look.

Let’s do something fun with the site header. Hopefully you are starting to get the idea of how these CSS rules work—first you specify a selector, then a list of properties you want to change. This article is already getting long, so I’ll just drop in the code rather than describe each property. I encourage you to play around with the values to see how they work.

``````h1 {
margin-top: 0;
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
color: antiquewhite;
}
``````

This code produces the following look.

One thing I want to point out—this rule demonstrates the difference between padding and margin. I gave `<h1>` some padding to provide some space within its box, to give the text a little padding between it and the edge of the box. On the other hand, margin controls the space around the outside of the box.

I really want the `<h1>` to touch the top of the viewport, but, by default, there’s a little margin all around the `<body>`. We’ll go back and modify our body rule to get rid of the top margin.

`````` body {
margin-top: 0;
margin-left: auto;
margin-right: auto;
max-width: 500px;
font-family: "Gill Sans", sans-serif;
background-color: antiquewhite;
}
``````

There we go. Our homepage is looking good.

## Reusing CSS across different pages

We would like to apply all of the styles we wrote for the homepage to our journal page. One way to do that is to copy and paste our `<style>` tag and all its contents to `journal.html`. That would work, but what if we decide to make a change, such as choosing a different color for links? We would probably want to change the link color on both the homepage and the journal. That means editing two different files. Making changes would become more and more difficult for each additional page we add to our site.

Fortunately, there’s a better way. We’ll use an external style sheet. We’ll take all of our CSS out of `index.html` and put it into a separate file. Then we’ll make both the homepage and journal reference that file.

First create a separate file and name it `style.css` (you can name it whatever you like so long as it ends in `.css`). Then copy everything between the `<style>` and `</style>` tags (but not the tags themselves) and paste it into your new CSS file.

Next, edit `index.html` by adding a `<link>` tag to the `<head>`:

``````<head>
<meta charset="UTF-8">
<title>My awesome website</title>
``````

This bit of code links your HTML file with your CSS file. Now `index.html` knows that you have CSS rules that it should use in `style.css`.

Go ahead and make the same change to `journal.html`. Once you do, the journal page should be receiving all of your custom styles.

## Styling articles

Let’s spruce up our blog article by making it appear on a white card. Add this rule to `style.css`:

``````article {
background: #fff;
}
``````

That’s nice. But why is there so much space above the heading? It’s because the `<h2>` has top margin by default. But we can remove it.

``````article h2 {
margin-top: 0;
}
``````

This rule is targeting every `<h2>` that appears inside an `<article>` and removing its top margin.

That’s looking better.

Let’s update our journal by adding another article. It should automatically receive the correct styles so long as we use the same HTML structure.

Blog articles usually appear with the newest ones first, so let’s add another article right above the first one.

``````<article>
<h2>My second entry</h2>

<time datetime="2020-01-12">January 12, 2020</time>

<p>I added some CSS to my website. It’s very stylish.</p>
</article>
``````

It received the styles but something isn’t right—the cards are touching, causing them to appear like one giant card.

Not to worry, we can add some bottom margin to each article. Adjust the `article` rule like so:

``````article {
margin-bottom: 20px;
background: #fff;
}
``````

Which produces:

Much better. One last issue. Our menu appears to have lost its horizontal styling. That’s because we need to add the `menu` class name to our menu list. Make the following adjustment in `journal.html`.

``````<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>
``````

Looks great! You can check out the final journal page here.

Head back into your Netlify dashboard and go to the Deploys tab. At the bottom of the page you will see a box where you can drag and drop your website folder (just make sure you’ve saved all the files).

That’s it! Your website should have been updated to reflect the latest changes.

## Conclusion and bonus challenge

If you have followed all the way through, you deserve a cookie and a pat on the back! You not only created your own website from scratch using HTML, you also made it look stylish by using CSS.

If you are thirsty for more, here’s a challenge for you. Adjust your menu so that the current page is in bold and not linked (hint: you could use a special class name).

1. Most web browser’s default to Times New Roman, which is a serif font. There’s nothing wrong with Times New Roman, necessarily, but many webpage authors will change it just because it is the default font. If you want to go down the rabbit hole of the art and science of typography — which I totally recommend you do — check out Butterick’s Practical Typography
2. That said, if you want people to actually be able to read your webpage, you want to choose background and foreground colors that contrast well. You can use this color contrast checker to make sure your text is easy to see.

Posted in: Design, Tutorial, Web Dev

# Empower Through Web Development →

This is a guest post that I wrote for CSS-Tricks a while back. This is the story of why I fell in love with web development and why think it’s a great career, especially for people with disabilities.

Posted in: Assistive Technology, Web Dev

I plan to do a little of an introduction to CSS to follow up my post about making your first website. But until then this is a nice walkthrough of adding some visual styles to a webpage made with default HTML styling.

Posted in: Design, Tutorial, Web Dev

# When the keyboard and mouse are not enough

The QWERTY keyboard, the laptop trackpad, and the standard, two-button mouse immediately come to mind when thinking of how one interacts with a computer. But if you have difficulty using these peripherals, or even if you just want to be more efficient, it’s helpful to think about the alternatives.

And there are alternatives. A plethora of them. It wouldn’t be possible to cover them all in one article—and maybe not even in a whole website. But I want to point your attention to a few as a way to get you to thinking about alternative input methods and how they might benefit you. It shouldn’t be difficult to use your computer. It’s a computer—it should be working for you.

## Keyboard alternatives

For me, using a traditional hardware keyboard is impossible. I simply don’t have the strength to do it. Others might have trouble being precise enough to press the desired key. Whether it’s a physical impairment a mental health condition that makes using the keyboard difficult, there are alternatives that may help.

### Large and compact keyboards

Before you go down the rabbit hole of using a lot of alternative methods, consider whether you may just need a smaller, or bigger, keyboard. You can purchase external keyboards of varying sizes from handheld to ones with jumbo print keys.

When I was in college, I carried around a laptop-sized external keyboard that I could plug in to public computers on campus.1

### Ergonomic and one-handed keyboards

It’s also worth looking into ergonomic keyboards. Some are split in such a way that your hands can reach each side of the keyboard at a better angle. Many come with with wrist support and other padding which might be helpful for your typing posture.

There are also keyboards designed to be used with one hand only. These usually look like half of a keyboard—and only half of the keys you need are available to you at a time. The trick is that each key also represents another key, and holding down a special button will give you access to that key. So it’s a bit like switching between two modes while you are typing.

### Onscreen keyboard

Most systems come with a built-in onscreen keyboard.2 This is a keyboard that displays on the screen that allows you to use the mouse to type. If you can’t use a hardware keyboard at all, an onscreen keyboard is a great alternative. Windows has had a built-in onscreen keyboard for years and recent versions of macOS have a utility called Accessibility Keyboard.

If you use an onscreen keyboard for any amount of time, you may notice that typing is slow and tedious. You can mitigate this problem by using alternative keyboard layouts. Although you may need third party software on Windows, customizing your onscreen keyboard is fairly easy to do in macOS via a built-in keyboard panel editor. I recommend the Chubon layout, which is optimized for single digit entry (like using a mouse). I wrote about how I customized my onscreen keyboard.

### Braille and chorded keyboards

If you need braille, you might want keyboard overlays with braille on them. A more expensive solution is a chorded keyboard, which is specialized for typing braille. Non-braille users may also find that they can use chorded keyboards easier than traditional ones.

### Speech recognition

This isn’t a hardware peripheral, but rather a software solution to the problem. The most popular speech recognition software is Dragon NaturallySpeaking by Nuance. It’s only available for Windows (although you can still get older versions of Dragon Dictate for Mac). On macOS, there’s a built in speech recognition feature which you can find in the accessibility system preferences under “Dictation.”

If you are a coder, there are some other options for you. I’m a big fan of Talon, free (as in free beer) software for Mac that makes precise dictation—the kind developers need—possible. It’s scriptable in Python so that with a little knowledge, you can configure a command set that compliments your workflow. And there’s a thriving little community to help you should you need it.

I won’t go into anymore detail here, but I will be covering Talon a lot in articles to come.

### Mobile devices

When my strength was declining in the early twenty-tens and I couldn’t find a keyboard small enough to fit my needs I found utility in peculiar sub-genre of mobile apps—remotes. Remote apps enable you to provide keyboard and mouse input to your computer via your mobile device. HippoRemote (now defunct) and Rowmote Pro were go-to apps for me. I even used them to write my first novel manuscript.

While these apps are often intended for operating a computer during a presentation or a computer connected to a TV, they make great assistive tech tools.

Though this article is focused on computer input, it’s worth mentioning that there’s nothing wrong with using mobile devices for tasks one might normally use a computer for. I’ve heard of developers who manage to complete all their work on iPad so it’s definitely possible. Go with what works for you.

## Mouse alternatives

When it comes to mouse input, you’ve got some options. Much like keyboards, mice come in many shapes, sizes, and variations. But first…

### Relying on a keyboard-focused workflow

It doesn’t take long reading articles in programmer circles to realize that many of them despise being disrupted by needing to use a mouse. The details are outside the scope of this article but if you optimize your system for it, you can get a long way without needing to use the mouse at all. Classic terminal-based text editors like Vim let you navigate around your document and manipulate text with laser focus thanks to their keyboard-centric approach.

Many apps let you assign keyboard shortcuts for tasks that you once used the mouse for. And most OSes should let you assign global keyboard shortcuts for common tasks, although I’ll admit I’m really only familiar with macOS.

### Using the keyboard as your mouse

In macOS—and I imagine in most systems—you can set up the keyboard to be used as arrow keys that can move your mouse cursor around. In the case of macOS, the number pad can be used. This isn’t ideal in situations where you need broad, fluid mouse movements, but if you just need a little bit of basic movement to get by, this could be perfect. It’s complimented well by the keyboard-focused workflow described previously.

Anyone who has used a laptop is probably familiar with the trackpad. If you use a desktop but you prefer the mousing experience of a laptop, you can get an external trackpad. Apple even has an official one for use with desktop Macs. If you also like laptop-size keyboards, you can get an external keyboard with a trackpad built-in.

Then there are trackballs, which are sort of like the ball mice of yore flipped upside down. These can be helpful because they require a completely different type of gesture—instead of moving your hand around a surface area, you are rolling a ball around in a socket. You can also get trackballs in a variety of sizes, from marble-like to baseball-like.

### Compact and ergonomic mice

As with keyboards, mice come in many shapes, sizes, and variations. I personally use a compact Bluetooth mouse from Logitech. You can get small mice, large mice, ergonomically shaped mice, and everything in between. If you are almost able to use a mouse but the standard size isn’t working for you, take a look at what’s out there and see if you can find a better fit.

### Graphic/drawing tablets

Graphics tablets accept mouse input in the form of a stylus. Illustrators love these because they can draw similarly to the way they would draw using a regular pen or pencil. But these tablets can also serve as good assistive tech devices. For example, if you don’t have a lot of gross motor ability but have good fine motor ability, you may find the precision of a stylus useful and the types of movement required by them might be easier for you to accomplish.

If you have ever played a Nintendo Wii, then you will grasp the concept of this type of mouse input. It consists of mounting a sensor near your screen which can track your head or eye movement (or both in some cases) and move the mouse cursor around accordingly.

Talon, the software I mentioned earlier, also supports eye tracking with the appropriate hardware. It may be the affordable option versus some of the other options available in this area.

## Switches

Up until now, we’ve primarily talked about products that are for the general consumer. But there is a world of mouse and keyboard input devices that are designed for people with disabilities. And a lot of this world revolves around switches.

I was always confused by the term, switch, because it brought to mind a light switch, which typically rests in either and on or off position.

The type of switches I’m talking about though are more like buttons. You will need a switch interface—essentially an adapter that allows you to plug switches into your computer. Once you have that, you have the ability to plug a variety of different switches into it.

For example, I use a switch that is designed to be easy to press by people who are very weak—it has a very low activation force. But there are all kinds of switches. Some of them are large buttons made to be pressed with your feet. Some of them are made to be adhered to a surface for easy reach. Some of them respond to touch. Any kind of switch you can imagine—it’s probably out there.

I’ve purposely not linked to too many individual products as these things tend to change. But if you don’t know where to find switches, it can be difficult when you’re just starting out. I recommend you check out AbleNet. If you are considering switches, it might be a good idea to talk to an assistive technology specialist.

The basic idea here, though, is that you can configure the switches to either perform a mouse click or perform a keyboard press or kickoff a macro, or whatever else you need. Depending on your needs it may require you to buy some specialized software.

Pro tip: in the US, there are government programs that will fund this type of equipment for you if you have a disability and you require it.

## Sip and puff, and other head-mounted input

This is very commonly used among people who are paralyzed from the neck down. It allows you to activate mouse clicks or keyboard presses via signals from a device that you gently sip or blow into. This type of equipment is usually very costly and it’s definitely recommended to go through a government agency or nonprofit organization that will pay for it if at all possible.

In addition to sip and puff, there are also other head-mounted controls such as joysticks, which are intended to be used with your mouth. These can be used to move a mouse cursor around or even enable gaming for someone who doesn’t have the use of their hands.

## Conclusion

This hasn’t been an exhaustive article, but hopefully it’s got you thinking about all the alternative ways that you can provide keyboard and mouse input to your computer.

I believe figuring out the right setup is part science and part art. Assistive technology specialists can help you with many of these, but I also believe that it’s important to see for yourself what is out there and think about what might work for you.

At the end of the day, you are in the best position to decide what you need. I hope these alternatives help you or at least cause you to go looking for other alternatives that I failed to mention.

The bottom line is that just because you can’t use a keyboard or mouse easily doesn’t mean that you can’t use your computer easily or efficiently.

1. That worked very well for me for years, although it’s not an option for me anymore because my condition has progressed.
2. On Windows, look for the Ease of Use folder in Programs. On Mac, go to System Preferences > Accessibility > Keyboard. If you are on Linux, you want to look for Onboard (and I believe Ubuntu comes installed with its own keyboard based on it).

Posted in: Assistive Technology, Resources, Talon

# Getting Started with Voice Driven Development →

This is a little bit of an advanced read if you are just starting out. But I wanted to link to it to demonstrate that it’s possible to code even if you have extreme difficulty typing on a hardware keyboard—or even if you can’t type on a hardware keyboard at all.Talon is the software that I use to code by voice (I also use an onscreen keyboard, but that’s for another post). It’s Mac-only for now, but it’s coming to Windows and Linux very soon.

Posted in: Assistive Technology, Resources, Talon, Tutorial, Web Dev

# CSS-Tricks →

Don’t let the name fool you. CSS-Tricks is more than just CSS (the styling language of the web). It covers beginner-level to expert-level topics in web development. In my opinion, it shines in its ability to deliver practical, insightful intermediate-level topics.For anyone just starting out, you will undoubtedly become familiar with CSS-Tricks as it often holds the top spots on search results pages for common web dev searches. This is because CSS-Tricks offers an enormous amount of quality content, including in-depth guides, a library of helpful code snippets, and a full-blown CSS reference with explanation and examples.

Posted in: Resources, Web Dev

# Your first webpage with HTML and Netlify

Ok, you have decided it would be cool if you knew how to code a webpage. Now what? This article is going to take you from nothing to having your own website on the internet. Provided you have a computer and an internet connection, the following guide will get you online with your very first webpage—for free.

To get started, you need two things:

• A web browser
• A text editor

Fortunately, essentially every computer comes with both of these! Modern web browsers are pretty awesome so it doesn’t really matter which one you choose. If you’re looking for a recommendation, I use and enjoy Firefox.

Although your computer does come with a text editor (like Notepad on Windows or TextEdit on Mac), coding webpages is easier if you get a text editor that’s made for coding. There are a lot of options in this space, which I encourage you to explore when you’re ready. But I recommend you download and install the free editor from Microsoft, Visual Studio Code (I’ll refer to it as VS Code).

## The power to publish

The next thing to consider is what you want to say on your website. What do you want it to be about? We live in an amazing time when just about anyone can publish something and make it available to everyone. This is the number one reason I think everyone should have their own website.

Use whatever writing tool you’re comfortable with and literally write down some content for your website.

If you need some guidance, try this:

• Write a short paragraph about yourself.
• Make a list of your favorite interests or TV shows or music (or all of the above!).
• Write down one goal that you have.

Of course, feel free to write less or more. You can have several sections on the page if you would like, each with its own heading. You may even decide that you need multiple pages. That’s cool, too.

## A website is just files and folders

Most of the big websites that you use every day are more complicated than that. But at its simplest, a website is just a collection of files that are linked together.

So your first step needs to be to create a folder on your computer. Usually, you use your web browser to connect to websites over the internet. But you can actually just open a website from your computer if you want—and that’s what we want to do here. We’re going to work on our website on our own computer before uploading it to a server on the internet.

Create a folder somewhere on your computer. Name it, for example, `my-website`.

Now we are going to create a file for our homepage. Create a new file inside the folder you just created. By convention, the name of our homepage file should be `index.html`.

If you chose Visual Studio Code, go ahead and open it. Otherwise use whatever text editor you prefer. If you’re using a different editor, your steps may differ slightly from those in this guide.

Once you start VS Code, click the “Open Folder…” link. Open the `my-website` folder you created earlier. You should see your file in the sidebar. Click it to open it.

The first thing we’re going to write is:

``````Hello world
``````

Save it and open it in your browser. Congratulations, you made a webpage!

The browser displays this ordinary text because we haven’t told the browser anything about this text. We need to mark it up.

``````<h1>Hello world</h1>
``````

Make this change and refresh your browser. The text should now be styled bold and a good bit larger. That’s because we’ve used HTML to describe this piece of text as a heading—specifically, a heading level 1.

HTML uses tags to describe content. In this case, we’ve wrapped the text, “Hello world,” with the `<h1>` tag. Notice that to close the tag, it’s written the same way but with a `/` right before the tag name.

“Hello world,” was just a test. Obviously, we would like to use our own content. Copy and paste your content from your writing tool into your `index.html` file. Now you want to use tags to describe your content to the browser. There are over a hundred tags in HTML. But knowing just a handful of them is plenty enough to get you started.

For example, you can use the `<h1>` tag we used earlier for the main heading of your website.

If you wrote an intro paragraph, you can surround it with the `<p>` tag (“p” for “paragraph”). Don’t forget to put the `/` in the closing tag like so: `</p>`.

If you included a list of any kind, you can mark it up like this:

``````<ul>
<li>My first thing</li>
<li>Another thing</li>
<li>The last thing</li>
</ul>
``````

This is an example of nested tags. Each list item is marked up using the `<li>` tag. All three list items are wrapped by the `<ul>` tag, forming an unordered list, which is just HTML-speak for a bulleted list. If we wanted them to be numbered—that is, an ordered list—we could use the `<ol>` tag.

Here’s a very basic example:

``````<h1>My awesome website</h1>

<p>My name is Blake. I enjoy making websites and writing articles. I think everybody should have a personal homepage.</p>

<h2>Favorite board games</h2>

<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Monopoly</li>
</ul>

<h2>Favorite TV shows</h2>

<ul>
<li>Stranger Things</li>
<li>Cheers</li>
<li>Game of Thrones</li>
</ul>
``````

When rendered in the browser, it looks like this:

## The head and the body

Our HTML document isn’t technically correct. It’s missing some useful information about the document itself. For example, take a look at the title that is displayed in the browser tab. It’s pretty ugly and useless.

An HTML document actually consists of a few parts. First, every HTML file should start with the following line of code:

``````<!DOCTYPE html>
``````

This lets the browser know that this is an HTML file.

Following that, there’s the `<html>` tag, which contains two tags: `<head>` and `<body>`. The `<head>` tag is for information about the document that is invisible to the user. The `<body>` tag is for the page content.

Our document structure should look like this:

``````<!DOCTYPE html>
<html>

<body>
...page content...
</body>
</html>
``````

We can change that pesky tab title by adding one to our `<head>` tag like this:

``````<head>
<title>My awesome website</title>
``````

And as a good practice, we should tell the browser what character set we are using in the document (which, unless you are purposely doing something else, should be utf-8). We can do it like this:

``````<head>
<meta charset="utf-8">
<title>My awesome website</title>
``````

You’ve just met the `<meta>` tag, which is one of the tags in HTML that doesn’t need to be closed because it doesn’t contain content. That said, HTML tags can have attributes. The most famous one of those is probably the one that is required to make a clickable link, the `href` attribute on the anchor, or `<a>`, tag.

``````<a href="https://able-dev.com">This is a link to my website</a>
``````

For reference, your entire `index.html` should look something similar to this:

``````<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>My awesome website</title>
<body>
<h1>My awesome website</h1>

<p>My name is Blake. I enjoy making websites and writing articles. I think everybody should have a personal homepage.</p>

<h2>Favorite board games</h2>

<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Monopoly</li>
</ul>

<h2>Favorite TV shows</h2>

<ul>
<li>Stranger Things</li>
<li>Cheers</li>
<li>Game of Thrones</li>
</ul>
</body>
</html>
``````

It’s totally fine for your website to consist of only one page. But chances are that you will want more. Let’s create a journal page and set up navigation between them.

First, create a new file in your `my-website` folder called `journal.html`. Instead of typing the whole page structure out, let’s copy and paste our homepage code over to this file and empty out the `<body>` tag. It should look something like this:

``````<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>My awesome website</title>
<body>

</body>
</html>
``````

Let’s make a heading and our first entry:

``````<h1>Journal</h1>

<article>
<h2>My first entry</h2>

<time datetime="2019-09-25">September 25, 2019</time>

<p>I'm having a blast learning HTML and setting up my first website!</p>
</article>
``````

We are introducing some new tags. We have several tags that we’re saying makes up an `<article>`. We’re also using a tag to mark up the date of the article—the `<time>` tag. Inside the tag it contains the nice human readable date. But it also has a `datetime` attribute that contains a machine readable version.

Now that we have a journal page, we need to add a way to get to it from our homepage. We’ll add a navigation list. Let’s put it right underneath the `<h1>` in `index.html`:

``````<ul>
<li><a href="index.html">Home</a></li>
<li><a href="journal.html">Journal</a></li>
</ul>
``````

Okay cool, we’ve created a navigation list. We can just copy that in paste it right under the `<h1>` in `journal.html`. With this navigation list on both pages, visitors to your website will have a way to move back and forth.

Your website isn’t doing much good just sitting on your computer. It’s time to get that thing on the internet!

Hosting your website refers to putting your HTML files on a web server. There are a lot of options here, but for ease of use and cost, we’re going to use Netlify.

Go ahead and create an account at Netlify. Once you are logged in, make sure you are on the Sites tab. Toward the bottom of the page you should see an area where you can drag and drop your site folder. Go ahead and do that.

You will see that your website gets uploaded and assigned a randomized URL. Your site is now live! If you want, you can click the Site Settings button and change the Netlify address to something memorable. For example I changed mine to https://able-dev-example.netlify.com/.

You can also follow the instructions for adding a custom domain name.

## You did it!

Take a moment to appreciate what you’ve accomplished. You started with a blank slate. You wrote some content and marked it up with HTML. You made two pages and linked them together. Then you uploaded your site to a web host. Your website is now live for anyone to visit.

There’s a lot that this guide left out. For example, our website looks pretty plain. Wouldn’t it be cool if we added colors and other styles? That’s for another day (but if you’re feeling adventurous, do a web search for “CSS”). Feel free to continue to work on your site locally on your computer. When you’re ready to upload your new changes, go to your site’s dashboard page in Netlify and click on the Deploys tab. You can drag and drop your folder there to replace the existing site with your updated one.

Have fun with your new powers—and only use them for good!

1. On Mac, you can drag the file to your browser’s icon on the dock. On most systems you can also use the File menu.

Posted in: Tutorial, Web Dev

# Booting up

I (Blake) created Able Dev because I think web development is a great field for people with disabilities to get into. Having the skills required to make a website are helpful for a number of reasons: