The Professional Steve

Tutorials, developer resources and inspiration.

Podcast Recommendation: JavaScript Jabber

I am a HUGE fan of JavaScript Jabber, a round-table style podcasts about JavaScript development made by JavaScript developers. Each episode is on a particular topic, usually with a guest who is an expert on that topic. They’ve had the developers of React, Elm, GraphQL, Backbone, and many other major Javascript Libraries/frameworks/tools as guests.

It’s hard to pick a favorite episode, maybe it’s the one with Jafar Husain, a Netflix developer and member of TC39 (the people who are shaping the future of JavaScript) who talked about Functional Reactive Programming and future versions of JavaScript (among other things) in detail.

Or maybe it’s the recent episode about GraphQL, which is probably the thing (unless it’s Falcor) that will replace REST as the preferred method of talking to the server.

There is so much good stuff here.

JavaScript: What The Heck Is All This Crap?

When I first started learning more about the wide world of JavaScript frameworks and tools (a journey that is by no means complete) I had a hard time figuring it all out.

Here’s what I know (or what I think I know :) ) so far:

Front-end development (just in case you are complete newbie, which is just fine by the way) is writing code that runs in the browser (Firefox, Chrome, Internet Explorer, etc). Browsers only run JavaScript code, but it’s possible to use transpilers to write non-JavaScript code and then translate it to JavaScript. (The transpiler Babel, is the one I see most commonly used for this purpose). Some examples of code that gets transpiled are ES2015 and ES2016 (future versions of Javascript you can use today), CoffeeScript (JavaScript with a more Ruby-like syntax and some nice extra features), ClojureScript (Clojure for the browser), and TypeScript (a strongly-typed version of JavaScript.)

Back-end development is code meant to run on a web server. A web server is the computer on the other side of the internet sending you your web page and other information your page needs. You can use any language you want on the back-end, but if you want to write back-end JavaScript Node is the way to go.

Gulp and Grunt are task runners. That means they can do lots of different stuff for you: minify/uglify/beatify your code, run a transpiler, run tests, and lots of other stuff. There are many many gulp and grunt tasks already out there and you can always write your own.

npm and bower are package managers (I’ve heard people quibble that they’re not, but what I and everyone else I’ve talked to use them for is package management). I’ve not had much experience with bower but it’s meant to be used exclusively for the front-end. Npm, on the other hand, can be used on the front and back ends. I’ve also found that npm handles dependencies very nicely.

JQuery is a front-end JavaScript library that’s been used for quite some time. It adds a lot of stuff that really ought to be there natively in the browser and it also standardizes things that are different in different browsers. My impression is that JQuery, or at least using just JQuery and little else on the front-end, is on its way out.

Backbone is a library meant to help you keep your front-end code more organized. Front-end code is getting more complicated and just writing a bunch of JQuery isn’t cutting it any more. (I’ve seen and worked with plenty of JQuery spaghetti.) Backbone helps you keep your front-end data in models and collections of models, which have built in stuff for syncing with the server, as well as Views. Backbone Views allow you to break up your user interface (UI) into distinct, re-usable, and more manageable pieces. There’s also a healthy eco-system of add-ons. I’ve found Backgrid and Backbone-Paginator to be especially useful.

Angular (created by Google) is the 300 lb gorilla of front-end frameworks. I have no experience with it but my impression is that it takes an old-school object-oriented approach to front-end code that is familiar and comfortable to developers not used to the JavaScript world. Although I hear that Angular 2 (the next version of Angular that Google is developing) is taking a more functional approach.

React (created by Facebook) is my current favorite. It is a view-only framework that takes a much more functional approach. Whereas libraries like Backbone get very complicated very fast, React keeps updating simple. Every time a change happens (for example, if more stuff comes from the server or there’s new user input) the whole page gets re-rendered again, but under the hood React optimizes things to make that re-render super quick. Along with Facebooks’s Relay, GraphQL, and Flux, as well as some really cool non-Facebook stuff like React Router and Redux, this eco-system has a lot to offer and a new way to develop for the web. (Not to mention that React Native allows you to write React apps for both iOS and Android phones).

Of course I’d be remiss if I didn’t mention the ClojureScript’s interface to React, Om.

Also there’s Elm, a library I’ve mentioned before and one I’m really really excited about, which takes this functional-reactive-programming approach many React developers take and really runs with it.

Making A Game In Python Part 9: Conditionals

So here’s a link to a page that has the code for the game so far as well as all the previous posts about this game.

Now Let’s get to conditionals. The goal was for the game to be able to display text and choices conditionally, depending on what’s happened in the game.

I’ve got the first part working. We can show different text depending on some condition. Here’s what it looks like in a description:

“Your name is {{player name}}. You’re in a darkly lit one-room house. Its raining outside. You can hear the drops hit the ceiling and can see rain hit the window when lightning strikes in the distance, which it often does. The window is above a sink full of dirty dishes. On the oven beside the sink there is a pot full of boiling water. To your left there is a couch facing a television. It’s turned to a channel that only gets static. ((the penguin ? {{the penguin}} is watching the TV showing every sign of enjoyment. | Amazingly there’s a penguin sitting on the couch. The penguin turns to face you when you look at it.)) Behind you is a pile of smelly blankets and and old set of golf clubs.”

And this is the bit that’s conditional:
((the penguin ? {{the penguin}} is watching the TV showing every sign of enjoyment. | Amazingly there’s a penguin sitting on the couch. The penguin turns to face you when you look at it.))

Surrounding something in double parentheses tells the game we’ve got a conditional going on. A conditional consists of some condition, the string we’re going to show if it’s true, and the string we’re going to show if it’s false.

Right now the condition is just a possible key in saved_data, in this case the penguin’s default name. (I’ll add stuff like ==, <, >, and such later.) This is followed by a question mark, after which are our two strings separated by a pipe character.

The function that actually applies this conditional is right here:

def apply_conditions(saved_data, string):
    conditional_statement = "\(\((.*?) \? (.*?) \| (.*?)\)\)"
    matches =, string)

        conditional_test =
        if_true_string =
        if_false_string =

        replacement_substring = ''
        if conditional_test in saved_data:
            replacement_substring = if_true_string
            replacement_substring = if_false_string

        return apply_conditions(
            re.sub(conditional_statement, replacement_substring, string))
        return string

It looks a lot like add_saved_data but it’s a bit more complicated.

conditional_statement is just the regex for a conditional statement.

If there are matches then we grab the parts of the conditional, do a test (i.e.conditional_test in saved_data) and then replace accordingly in this return statement:

        return apply_conditions(
            re.sub(conditional_statement, replacement_substring, string))

Which is a recursive call.

Funnily enough I couldn’t do the re.sub call exactly like I did in add_saved_data (i.e. use It just didn’t work, and I’m not sure why.

Making A Game In Python Part 8: Actually Being Able To Name The Penguin

You can look at this page to see previous posts in this series as well as the github page for this game.

So there’s two things I’ve added. First is the ability to read a game file:

with open('') as game_file:
    game_data = json.load(game_file)

The file is the same game data structure we’ve been working with, but in a separate JSON file. (I talk about reading JSON files in this post.)

Next is this bit of code in the main game loop:

for choice in current_room["choices"]:
    if player_input == choice["input"]:
        if "action" in choice and choice["action"]["name"] in actions:
            actions[choice["action"]["name"]](saved_data, choice["action"]["options"])
        current_room = game_data[choice["destination"]]
        valid_choice = True

This for loop runs through each possible choices the player could make, and then determines if the player has made one of these choices.

The new bit is this part:

if "action" in choice and choice["action"]["name"] in actions:
    actions[choice["action"]["name"]](saved_data, choice["action"]["options"])]

If the choice data contains an action, and the action listed in the choice is in our list of action functions, we call that function.

Remember, out action functions are just in a dictionary near the top of the file:

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

The functions name_entity and add_to_inventory are defined a little higher up.

And here’s what the ‘name the penguin’ part of our game looks like:

"ask penguin for name":
            "You say, \"What's your name?\"\n\nThe penguin says, \"You remember it's...\"",
                    "input" : "n",
                    "description" : "name {{the penguin}}",
                    "destination" : "one-room house",
                            "name": "name_entity",
                                    "prompt": "What's the penguin's name?",
                                    "label": "the penguin"

The options are handed off to the action function as its second parameter.

Finally here’s how the game actually plays:

You say, “What’s your name?”

The penguin says, “You remember it’s…”

n) name the penguin
q) quit game

What will you do? n
What’s the penguin’s name? Super Penguin

Your name is Snoopy. You’re in a darkly lit one-room house. Its raining outside. You can hear the drops hit the ceiling and can see rain hit the window when lightning strikes in the distance, which it often does. The window is above a sink full of dirty dishes. On the oven beside the sink there is a pot full of boiling water. To your left there is a couch facing a television. It’s turned to a channel that only gets static. Amazingly there’s a penguin sitting on the couch. The penguin turns to face you when you look at it. Behind you is a pile of smelly blankets and an old set of golf clubs.

t) Talk to Super Penguin
l) Look around the room again
q) quit game

What will you do?

So that’s great and all, but maybe I don’t want the player to see the option to name the penguin after he’s been named once. I need to find a way to show and hide choices depending on some condition or another.

I’d also like to be able to save my game…

Another Schedule change.

Just a quick announcement. I’ve decided that two posts a week is a bit much. I’ll be posting once a week for the foreseeable future.

On hiatus this week

I just wanted to let y’all know that this week I’ll be taking a break from blogging. Never fear; new posts will start back up on the 27th.

Learn JavaScript With

So I’m starting a new series about how to make web applications on JavaScript. But there are A LOT of great resources out there for learning web development and JavaScript.

One of the cooler ones I’ve come across recently is It’s a resource meant to be used by meetups of people learning JavaScript, and I encourage you to find one in your area, or start one of your own. But if you’re a recluse or just don’t have the time. The tutorials are there for you to install and go through on your own and in your own time..

You’ll need to install Node before you get started, but that’s pretty easy. Here are some instructions for Node installation for Mac, Linux, and Windows.

First Class Functions In Python

The lower-case letter f in a top-hat and monicle
If you’ve not heard the term first class functions, or seen the functional style of programming before, this might seem a little weird. But, hopefully, also a little cool.

In Python you can of course, create a function and call it:

def robot_ify(thing):
    return "robo-" + thing

print robot_ify("duck")

(The above code, of course, gives us the output of “robo-duck”).

But what if I told you you could make a function that makes other functions?

def make_thing_ifier(thing):
    def thing_ifier(other_thing):
        return thing + "-" + other_thing
    return thing_ifier

robot_ify = make_thing_ifier("robo")
super_ify = make_thing_ifier("super")
mega_ify = make_thing_ifier("mega")

print mega_ify(super_ify(robot_ify("duck")))

How about that eh? Our output is now mega-super-robo-duck!

Not only can you return a function from a function, you can also take a function as a parameter.

I’ll show you an example. Let’s start by making a function that mega-super-robotifies as well as a few others:

robot_ify = make_thing_ifier("robo")
super_ify = make_thing_ifier("super")
mega_ify = make_thing_ifier("mega")
ultra_ify = make_thing_ifier("ultra")
chocolate_ify = make_thing_ifier("chocolate")

def mega_super_robot_ify(thing):
    return mega_ify(super_ify(robot_ify(thing)))

def super_mega_ultra_ify(thing):
    return super_ify(mega_ify(ultra_ify(thing)))

def ultra_chocolate_ify(thing):
    return ultra_ify(chocolate_ify(thing))

print mega_super_robot_ify("duck")
print super_mega_ultra_ify("potato")
print ultra_chocolate_ify("moose")

Our output is now:

Now let’s make a function that takes a function and a list as arguments:.

def apply_functions_to_elements_in_list(function, list):
    new_list = []
    for element in list:
    return new_list

ultra_chocolate_list = \
    apply_functions_to_elements_in_list(ultra_chocolate_ify, ['rabbit', 'banana', 'moose', 'potato'])

for element in ultra_chocolate_list:
    print element

Output is now:

Still with me? We can make functions that return functions and we can also make functions that take functions as arguments, that’s what the term ‘first class functions’ means.

The function apply_functions_to_elements_in_list just takes a function and a list, it then applies that function to each element of that list, and puts the output of each function call into another list, which it returns.

In truth, we didn’t have to write this function. It already existed. It’s called map:

ultra_chocolate_list = map(ultra_chocolate_ify, ['rabbit', 'banana', 'moose', 'potato'])

This does the same thing.

So, if functions can be passed and returned, can I put them in variables? Yes Virginia, you can :)

def say_tomato():
    print 'tomato'

def say_potato():
    print 'potato'

say_something = say_tomato
say_something = say_potato

Output is:

Can I put functions in a list? Why yes I can!

compound_thing_ifiers = [mega_super_robot_ify, super_mega_ultra_ify, ultra_chocolate_ify]

for compound_thing_ifier in compound_thing_ifiers:
    for element in map(compound_thing_ifier, ['rabbit', 'banana', 'moose', 'potato']):
        print element

Output is now:

You can even put functions in a dictionary. Let me give you an example which shows why you might want to do that.

First let’s make the functions:

import sys

def fire_lasers():
    print "pew pew!"

def launch_torpedos():
    print "shhhhhooooooouuuummmm!!!"

def taunt_enemy():
    print "nyah nyah!"

def quit():
    print "Bye!"

Then we put them in a dictionary:

commands = {

Next we use that dictionary to make a little “game”:

while True:
    for key in commands.keys():
        print key
    user_command = raw_input('command: ')
    if user_command in commands:
        print "command not recognized"

And that’s first-class functions in Python. Enjoy!

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


Get every new post delivered to your Inbox.

Join 208 other followers