The Professional Steve

Tutorials, developer resources and inspiration.

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

Post Schedule Change

Just a heads up. Since (according to WordPress) a lot of y’all seem to be reading this blog on Tuesday, I’m gonna move my post schedule to Tuesdays. Expect a real blog post tomorrow.

I’m also going to try to post a recommendation form some cool thing every Thursday. I make no promises about keeping this up but I’m gonna give it a good, hard, try. :)

Making Web Applications With JavaScript Part 1: Introduction

A spider in it's web holding a coffee mug with one leg, a quill in another, and a scroll in a third.
And now for something completely different!

Well, it’s not completely different I’m still gonna be talking about programming after all.

I really should have made that Monty Python joke when I was writing about Python….

Hrm… I seem to have gotten off topic.

Web applications and JavaScript! The two great tastes that taste great together!

Why Web Applications? Because that’s where the users are! (Yeah, they’re on phones too, but we’ll get to that in another blog series :P ) A web application is more than just a web page. A web application is just like any application you would install on your computer or your phone, its just that much of it lives inside your browser (i.e. Chrome, Firefox or Safari). How much of an app lives inside a browser and where do its other parts live? We’ll get to that.

Why JavaScript? Because it’s the programming language that runs in your browser. All you need to start programming in JavaScript is a text editor and a browser. There’s nothing to install. It’s also a really awesome language with some really cool features. Though it does have a few gotchas as we will see.

But, before we get to programming JavaScript I need to introduce you to the basic building material of any web page, HTML. HTML stands for Hypertext Markup Language. A markup language is just a way of describing the structure and presentation of a document. Hypertext is just a fancy word for links in a webpage. HTML is a markup language that describes how a hypertext document (a web page) is structured and presented.

Hypertext! It sounds kinda futuristic. :)

Let me show you what we’re talking about. Open up your favorite text editor. It could be notepad, Notepad++, TextWrangler, GVim, vim, whatever you like. Just make sure it’s plain text though. Microsoft Word is not going to help us here. (If you use OSX’s TextEdit, you’ll have to select Format->Make Plain Text.)

For example, if you type the following in your text editor and save the file as 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>This is another paragraph element</p>

Then go to your favorite browser and open that file (in Chrome, FireFox, and Safari it’s file->Open File…) you should see something like this:

screen shot of our web page.

screen shot of our web page.

Ok, let’s do one more thing before this blog post is done. Please modify index.html like so and save:

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

And, if you would, create a new file called another-page.html with the following contents:

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

Now, if you refresh your browser, you’ll see a link that you can click on:

modified page with link

modified page with link

And if you click on that link you should get to this page:

another page with a link to index.html

another page with a link to index.html

Congratulations, you are now a web developer. :)

I’ll go more into depth with HTML in the next post of this series.


Get every new post delivered to your Inbox.

Join 203 other followers