The Professional Steve

Tutorials, developer resources and inspiration.

Functional Reactive Programming in Elm Looks Rad

About 5 or 6 months ago I came across this video about the Elm programming language, and was blown away.

The idea behind Functional Reactive Programming (FRP), as I understand it, is that your entire application is one giant function. At the start, it takes some initial data as its input and then displays the application on the screen.

Then whenever a user does some kind of input, or the application gets new information from some other source, the application re-runs itself, this time including the new information as well as some part of the application’s previous output.

From the programmer’s perspective, the application just re-renders itself whenever something new happpens, but under the hood, only the part of it that needs to change is modified. Everything else is left as it is. This allows an FRP application to be just as fast as a standard application while being much simpler to understand.

If you’re interested, I encourage you to try programming Elm online, or installing it. Also check out Elm’s documentation.

Making Web Applications With JavaScript Part 2: HTML Explained

A cartoon spider is using a web line and pulley to build a brick wall. Some of the bricks show html markup.
I’ve created a github repo for this series here. If you’re not sure how to use git and github I talk about that here.

In the first post of this series I showed you how to make two html pages (those were the two files: index.html and another-page.html) and that you can see what they’d look like on the web by opening them in your favorite browser using file->open.

Now I’m going to talk about their structure in a little more detail. Let’s have another look at index.html:

        <title>This Is the Title Of My Page</title>
        <h1>This Is The Header Of My Page</h1>
        <p>This is a paragraph element</p>
        <p>Here's a link to another page: <a href='another-page.html'>linkaroo</a></p>

HTML is made up of nested tags. The top-level tag is html. Note that there is an opening html tag at the top of index.html and closing tag at the bottom. You can tell a tag is a closing tag because it’s got a forward slash before its name.

Inside the html tag are two other tags, head and body.

A head tag can have a few things in it but all we have right now is the title tag, which contains (you guessed it!) the title of the document. The title should show up on the tab this page is open in, in your browser.

By the way, a lot of tags work like title does. They have an open tag, some text, and then a closing tag. Depending on what the tag is, the text will be seen in different parts of your page or browser.

The body tag contains all the information about the initial state of the page. I say initial, because we’re interested in making dynamic pages right? We’ll change things up soon, don’t worry. :)

The h1 tag is a header; that’s why the This Is The Header Of My Page is so big when it’s rendered. By the way, header tags go from h1 to h6, where h1 is the largest tag and h6 is the smallest. I hope you can see how you can arrange a document into headings and sub-headings using header tags.

The p tag is a single paragraph. ‘Nuff said here.

The a tag is called an anchor tag, you pretty much only use these for links. Whatever is inside the anchor tag is the actual link you click on in a web page. This can be an image or text. We’ll get to images shortly.

The anchor tag is the first tag we’ve seen with attributes. It’s only got one, href, but tags can have any number of attributes.

The href attribute (used only in anchor tags) holds the url (or web address) of some other page, some other part of the same page, or some other resource.

Ok, onto images. Let’s put one in our index page. We do this by adding an img tag:

        <title>This Is the Title Of My Page</title>
        <img src='make_web_apps.png'>
        <h1>This Is The Header Of My Page</h1>
        <p>This is a paragraph element</p>
        <p>Here's a link to another page: <a href='another-page.html'>linkaroo</a></p>

This code assumes that the image file make_web_apps.png is in the same directory as index.html, which it is in the repo.

Check out how it looks:

Screen shot of our web page with an image of a spider in a web in top left corner


About that img tag:

It doesn’t have a closing tag! Yeah, there are a lot of exceptions to rules in web dev. Better get used to it now. :)

It’s kinda like the anchor tag. It’s got an attribute with a link to a resource. The difference being, it’s got to be some kinda image.

There are a lot of different images you can use: png, gif, jpg, and so on.

Well, I think that’s enough for this post. Next time we’ll add a little more meat to our page and introduce some new html tags. In the meantime you can learn more about html in depth by checking out the w3 schools tutorial on HTML.

(Nah, I’m not sponsored by them, I just like that site a lot. :) )

How to learn even more vim.

In my last post I talked about the modes I use in vim and how I get around in normal mode. Here’s a more complete reference on the same subject in the vim tips wiki. I encourage you to check out that site. I refer to it often.

Want more tips? Well, I already mentioned that you can go through a whole tutorial by typing vimtutor in your terminal.

There’s also Vimcasts, a great video podcast about how to use vim. The producer of this show has also written an excellent book about using vim that I can’t recommend enough.

And, of course, I plan to do at least a few more posts on vim here on this blog, so check back to this site or subscribe.

There you go. You’ve got no excuse now. Go learn vim and become a vim champion!!

Moar Vim Tips: Modes and Movement

An old computer with a black background and green text which says, "who needs a mouse?"

I’ve done a few posts on vim previously, but there are a few more tricks I can share.

I didn’t really come out and say it, but vim is an editor with modes. There’s normal mode, insert mode, command mode, replace mode and visual mode, just to name the ones I use.

In normal mode, the default mode you start with and the one you can get back to by pressing escape, you can move your cursor around (using the arrow keys or h, j, k, and l) but nothing you type is gonna get into the document.

Typing stuff into your document is what insert mode is for. Among other ways, you can type i to get to insert mode. Hit escape to get back to normal mode.

If you’re in normal mode and you type : you can get to command mode where you, um.., type commands. For example it’s insert mode that allows you to save and quit by typing wq. Hit escape to get back to normal mode.

You get into replace mode by typing R. From then on, anything you type will write over what’s in the document. Hit escape to (you guessed it!) get back to normal mode.

Visual mode allows you to select text and do stuff to just that selection. Type v to start selecting from the position your cursor’s in. Type V to select whole lines at once. (escape-arrooooooooo!)

Ok, now, let’s get to movement in normal mode. What follows are a series of tips I regularly or near-regularly use when in vim.

I recommend using h, j, k, and l to move left, down, up, and right respectively.

You can also type gg to get to the top of your document, and G to get to the bottom.

Control-B will get you one page down, Control-F will get you one page up. Control-D gets you a half page up, while Control-U gets you down a half page. Put numbers in front of these to increase the number of times you do the command. 3 Control-F will move you up 3 pages for example.

w gets you to the start of the next word, while b gets you to the start of the previous word. e gets you to the end of the next word and ge gets you to the start of the previous word. Same deal as above, 3w will get you 3 words ahead, 2b gets you two words behind, etc.

If your cursor is on an opening curly brace {, parenthesis (, or square bracket [ you can get to it’s closing curly brace or whatever with %.

f and whatever next character you type will get you the next instance of that character. For example, fw will get you to the next w character in the document. t will put your cursor one character behind where f would have gotten you. For example t4 will put your cursor in the position just behind the next 4 character. F and T are just like f and t but they go backwards.

Control-o will get you to the position you were just in. Shift-Control-i will move you back from where you got to when you hit Control-o.

And there you have it. I use most of these in any given hour I’m using vim. They’re how I get around in normal mode.

The Bash Commands I Use Most Often

I’m no bash expert, but following my post about getting started in bash I thought I’d share these.

I also usually have at least one terminal window open just to search for files.

If I’m looking for a file I know the name of but I don’t know the path for I’ll type find . -name name_of_file.some_extension. If I’m not in the directory I think the file is in I’ll use find path/to/where/I/think/it/is -name name_of_file.some_extension.

If I’m looking for a file that contains some string (like the name of a function or module for example) I’ll use grep “text I’m looking for” * -R | less. The up and down arrow keys, and the space bar will allow you to navigate the results. Hit q to exit.

control c will stop either of these if they take too long or something else goes wrong. :)

If you want to learn more about grep and find click on there documentation here:

Getting around in the the Termial and Bash

An old computer with a terminal interface which says "Kickin it old school...'
Ever since I started my journey into programming as a career I’ve lived in the terminal. If you’re working on a Mac or in most Linux distributions bash is the flavor of terminal you’re going to use.

There are others of course, but hey, this post is only going to be so long, and bash is the one most people will have to hand. :)

So let’s open up the terminal. Let me show you around.

Here’s what mine looks like:
a screen shot of my terminal

If you’ve got yours open, go ahead and type ls. That should give you a list of the files in the directory (or folder) you’re in.

What folder are you in? Type pwd to find that out.

I’m currently in /Users/stevensmith.

Let’s say you want to make a directory. All I need to do is just type mkdir newDirectory. If you type ls again, you’ll see the directory you just created.

Want to go in there? Type cd newDirectory and hit enter. Now enter ls. Nothing in there at the moment.

Let’s make another directory. Enter mkdir anotherDirectory and type cd anotherDirectory. If you enter pwd you should see that you’re in some/path/newDirectory/anotherDirectory.

You can enter cd .. to get out of anotherDirectory and cd .. again to get out of newDirectory. cd ../.. would have accomplished the same thing.

To get back to anotherDirectory you can type cd newDirectory/anotherDirectory.

If you’re in anotherDirectory you can get out of that directory, make yetAnotherDirectory and navigate to it by typing:

cd ..; mkdir yetAnotherDirectory; cd yetAnotherDirectory

The semi-colons let bash know that these are separate commands.

You can get back to anotherDirectory by entering:

cd ../anotherDirectory

You can make a text file a number of ways, for now let’s just create it without opening and editing it by typing touch file.txt. ls will show you that the file exists.

You can open file.txt in vim by typing vim file.txt. There’s nothing in it though. Go ahead and get out of vim by typing :wq and enter.

You can delete any file by using rm name-of-file. For example, you can delete file.txt by typing rm file.txt Be careful though, rm won’t take your file to the trash. rm will delete it forever and for all time.

You can delete directories using rm, but you need to give it the -rf option like so: rm -rf ../yetAnotherDirectory. Again, be careful, rm -rf deletes a directory and all it’s contents.

A few more tricks:

If you type part of the name of a file or directory and then hit the tab key, bash will auto-complete the name for you.

ls path/to/directory/* will show you the contents of directory.

rm path/to/directory/* will delete all files in that directory. rm -rf path/to/directory/* will delete the directories in directory as well. Be careful with this, rm is forever.

That should be enough to get you started. :)

Elixir Looks Pretty Sweet

A little while ago I got wind of some new language called Elixir. It’s a relatively new functional language. built on top of an older one, Erlang, with a Ruby-like syntax.

(Btw, if you don’t know what functional programming is yet. I highly recomend this great introduction by Jonathon Morgan.)

I had a little trouble installing elixir after using homebrew:

brew install elixir

It gave me this weird error (that I probably should have written down for this blog post :) ), but after doing:

brew update
brew upgrade elixir

I was able to get their command-line interface up and running by typing:


(just hit control-c and then a to exit out of there. :) )

There’s a great getting started page at the elixir site. What’s most interesting to me is their meta-programming feature as well as pattern-matching, something I’ve also seen in haskell.

Also, there are sigils? That’s some wizardly wizarding right there.

A Beginner’s Guide To Git And Github

Hand-drawn octo-cat with a git logo on it's forhead
This is just a quick intro to version control with git, the purpose of which is to allow you to save and keep a local and remote version history of your work that you can always get back to if the latest version of your code breaks.

First you’ll need to install git. For that just use their handy-dandy guide.

I use a Mac with homebrew installed so all I have to do is go to a terminal and type:

brew install git

Woot! Homebrew is the best. :)

Now let’s say I wanted to start some kinda project. Well, I’d go to github, create an account if I didn’t already have one, and click on the button marked “+ New Repository”. Be sure to check the “Initialize this repository with a README” option so you’ll have something in the project you can pull down to your computer.

You could also take some other project on github, click on the Fork link, and you’d have your own copy of that project (one you can modify to your heart’s content) to pull down to your computer.

Once the project has been created or forked, you should be taken to the project page. Copy the project url in the text-box labelled “HTTPS clone URL”. Now go to your terminal and navigate to some spot you want to keep your project in, and type (but don’t hit enter yet!):

git clone 

Then paste in the git url like so and hit enter:

git clone

Now you’ve got a local copy of the project!

As I build my projects, I tend to commit and push early and often. Committing creates a version of the project on your hard drive that you can always get back to. Pushing actually puts your commits onto github’s servers.

Once you make some change to your project do the following:

git add path/to/file/nameoffile.ext

Or, if you just want to add everything in the project directory, this will add everything for you:

git add .

git add adds files to your commit, but you haven’t committed yet. Here’s how you do that:

git commit -m "type some commit message here"

Now you’ve created a version of the code you can always get back to, but if something happens to your computer, that version is gone forever. Best to push it to github like so:

git push

Ok, so far so good, but what if you want to actually go back? Type the following:

git log

That should give you a log of all the commits to the project. (Just hit q to get out of the log btw) I’ll give you an example for my python game:

commit c8a0e41b800a609f63e9c31a2c6061b411ad8920
Author: Steven Smith <>
Date:   Sun Aug 30 16:56:30 2015 -0600

    started making an action map to be referred to in game data.

commit 42fa705c685d817bc86e4c823704314cd1ba0e2b
Author: Steven Smith <stevensmith@Stevens-MacBook-Air.local>
Date:   Sun Aug 23 15:16:22 2015 -0600


commit f94d942d118d321f954504950c5c984de2d274d8
Author: Steven Smith <>
Date:   Sat Jun 13 17:48:09 2015 -0600

    added simple templating

commit fb911523018e6811fe3552c9a13ff06a4a9ddfee
Author: Steven Smith <>
Date:   Sat Jun 13 11:32:52 2015 -0600

    added more game content

commit 624aad0031978c31fd7d5900ea0ba670f3cfe911
Author: Steven Smith <stevensmith@Stevens-MacBook-Air.local>
Date:   Mon May 4 18:51:43 2015 -0600

Btw, it’s really not a good idea to make one of your commit messages something like “blugh”. It’s not very descriptive. (Do what I say, not what I do. :P )

But let’s say I wanted to go back to one of these earlier commits. All I’d need to do would be to type the following:

git checkout 624aad0031978c31fd7d5900ea0ba670f3cfe911

Then I would be back to the point I was before. If just wanted to checkout a single file, all I’d have to type would be:

git checkout <big long number> <name of file>

One of the cool things about git is that it allows a team to work together on a project and more easily stay in sync. Let’s say you and a friend are working in the same git repository and you’ve both cloned from github. Whenever one of you pushes changes to the repo, all the other one needs to do to sync up is to type:

git pull

And you’re all set to make, commit, and push your own changes.

If you ever want to know what state your local copy is in (i.e. if your files have been committed or not, or if you’ve pushed all your commits) just type:

git status

There’s tons more to learn about git but this should get you started. I encourage you to have a look at the git documentation to learn more.

Book Recommendation — JavaScript: The Good Parts

I’m a big fan of the author of this book, Douglas Crockford. I’ve always loved JavaScript, but it wasn’t until I encountered Crockford that I realized that JavaScript is a fully-featured language with a lot of cool stuff in it.

Unfortunately there’s also a lot of bad stuff in it too, hence the need for a guidebook like JavaScript: The Good Parts.

There is a beginning section that gives a chart for how each language feature works, don’t worry if it’s hard to follow, you can skip that bit and still get the important bits: features of the language, what to avoid, and what’s possible.

I especially enjoyed learning what’s possible with functions and closures, which I’ll be talking about in my series on how to make web applications.

Making a Game In Python Part 7: Doing Stuff

A Penguin is told, "Penguin I wish to name you" to which it replies "Sure, whatever"
So, here’s a page with links to the 6 previous posts in this series as well as this game’s github repo.

Ok, so we’ve got this game where, so far, all we can do is look around and talk to a penguin who says there’s a monster outside.

I wanna name the penguin! I wanna pick up one of the golf clubs! I wanna go outside and attack that monster!

I think I want to write a set of functions that allow me to do these things. First I want to make an action that allows you to name stuff. I think all it needs is our saved_data structure, the thing it needs to name, and the name we’re going to give it.

Actually, now that I think about it, I’m probably gonna use a lot of these action functions, and it would probably be easier in the long run if they all acted in a similar way. I think I want an action function that simply takes an options parameter (which can be a dictionary, array, or whatever we want) and then modifies the saved_data structure in some way.

Ok, let me give this a try:

def name_entity(saved_data, options):
    saved_data[options['label']] = raw_input(options['prompt'] + " ")

That should work. I can imagine writing a lot of action functions that take saved_data, some options, do something with those, and then modify saved_data.

In fact, let me write another one just to show what I mean:

def add_to_inventory(saved_data, options):
    if options['item'] in saved_data['inventory']:
        saved_data['inventory'][options['item']] += 1
        saved_data['inventory'][options['item']] = 1

See what I’m writing about? It’s a function, with a different name, that takes the same parameters as the first function.

For now I’m just assuming that our inventory is the name of the item and quantity in your inventory.

I can already tell I’ll probably want to add something to this game to keep track of just how many golf clubs are in that bag. Otherwise you’ll be able to grab an infinite number of golf clubs out of it!

Ok, so now that I have a couple of functions, both of take the same kinds of parameters in the same order, I can get rid of this code:

player_name = raw_input("What's your name? ")

saved_data = {"player name" : player_name}

And replace it with this:

actions['name_entity'](saved_data, {"prompt" : "What's your name?", "label" : "player name"})

Here’s the whole modified code snippet:

saved_data = {}

def name_entity(saved_data, options):
    saved_data[options['label']] = raw_input(options['prompt'] + " ")

def add_to_inventory(saved_data, options):
    if options['item'] in saved_data['inventory']:
        saved_data['inventory'][options['item']] += 1
        saved_data['inventory'][options['item']] = 1

actions = {'name_entity' : name_entity, 'add_to_inventory' : add_to_inventory}

actions['name_entity'](saved_data, {"prompt" : "What's your name?", "label" : "player name"})

Yeah, I can see that this is gonna need another blog post to explain it. Then I’ll be able to tell you where I’m going with all this fanciness. :)


Get every new post delivered to your Inbox.

Join 201 other followers