app

Understanding String.match

2012-10-28

"string".match() is often a misunderstood or neglected part of JavaScript. I want to bring some focus on this neat tool and talk about some of its usage. The most common use of this method is to check if a string follows a particular pattern, or includes some bit of text:

var myDomain = document.domain; // (on this site, this is www.natehunzaker.com)

if ( myDomain.match("natehunzaker.com") ) {
    console.log("We must be at the correct domain");
}

Dead simple, but this doesn’t do this method justice. In addition string comparision, .match() also can utilize regular expressions. When used without the global option (/reg/g) .match() can extract additional meaning out of a statement simply by wrapping a rule within parenthesis. These are known as capturing parenthesis:

var myString = "Hello, world! My name is Nate Hunzaker!";
var name = myString.match(/My name is (.*) (.*)!/);

console.log( name[1] ) //=> Nate
console.log( name[2] ) //=> Hunzaker
console.log( name )    //=> ['My Name is Nate Hunzaker!', 'Nate', 'Hunzaker']

Pretty neat. This is particularly useful for extracting patterns of data out of bodies of text. For instance, a while back I needed to map some attributes an object based upon a key/value system within a large body of text:

/*
Well assume the following content has been saved to the "story" variable:

TITLE: The War of the Worlds
AUTHOR: H.G. Wells
BODY: No one would have believed in the last years of the nineteenth century that this world was being watched keenly and closely by intelligences...

*/

var pattern = "(.*)\\:(.*)\n";
var lines = story.match( new RegExp(pattern, "g") );
var data = {};

lines.forEach(function(line) {
    var match = line.match( new RegExp(pattern) );

    if (match) {
        var key = match[1].toLowerCase();
        var val = match[2].trim();
        data[key] = val;
    }
});

console.log(data.title);  //=> "The War of the Worlds"
console.log(data.author); //=> "H.G. Wells
console.log(data.body);   //=> "No one would have believed..."

Unfortunately JavaScript lacks Ruby’s awesome String.scan() method, but we can make due by first finding all of the matches globally and then parsing each line individually. Generally speaking I have found this to read better and write much cleaner than cruder methods such as .split().

View the gist here

A Deeper Understanding of JavaScript Statements

2012-09-25

One of the unfortunate observations I have made about the JavaScript community is a very poor understanding of fundamentals of the language. I am no exception to this rule, and as a part of my quest to develop mastery of the language I plan to document my explorations in a number of short articles.

Let’s take a look at statements, one of the essential building blocks of JavaScript. Statements are executable commands that ultimately define what our program does.

// A declaration statement
var myStatement = "Wow, that was easy";

Nothing scary here. However you may not be familiar with the raw syntax for a multi-line statement:

// Yes, this is executable code, give it a spin
{
    var anotherStatement = "Wait.. what's going on here?";
    console.log("This looks like an object declaration!");
}

As you may have gathered, we aren’t declaring an object. Rather, we are using the syntax for a compound statement — which is strikingly similar. This pattern is core to JavaScript, and we see it in just about every other aspect of the language. One such example is the if statement:

if (condition) {
    console.log("We did something");
}

The code above reads “If condition is true, then run the contents of this statement”. Remember that the code we placed inside the curly braces acts the exact same way as the single declaration of myStatement earlier. For this same, reason, we can simplify this code (although some would argue this is bad form):

if (condition) console.log("We did something");

Same rules apply: if the condition is true, run this statement. This is nothing profound, however it provides an explanation for why curly braces are not required for if statements, loops, and other flow control. Effectively, they perform the same role. For this same reason, we can have some more fun:

// Remember, while (condition is true) [statement] ...
var a = 0;
var keepGoing = true;

while (keepGoing) if (a < 10) a++; else {
    console.log(a);
    keepGoing = false;
}

Obviously, this is insane, and it should never be used for anything other than experimental purposes. Having said that, I would encourage you to play around with examples such as this as they are excellent for solidifying these concepts.

By learning more about the specifics of statements and how they are executed writing flexible code becomes much easier. This is a major step towards separating oneself from dependency on libraries such as jQuery and it helps to build a greater appreciation for what these tools do. It exposes the expressiveness of JavaScript and turns it into an exceptionally powerful language.

Taking Advantage of JavaScript's Flexible Ternary Operator

2012-02-27

Let’s face it, there are some parts of Javascript that simply aren’t pretty to look at. At times I look at what my colleagues are doing in Ruby and it leaves me in complete envy. Yet there exists the potential to write beautiful Javascript if given proper attention.

One of the things I love in Ruby are the *.truthy? methods such as *.empty?. Let’s try to create something similar in Javascript. First let’s start off with a commonly implemented Javascript ternary:

var criminal = (suspects.length > 0) ? suspects[0] : "noone"

Nothing new, we’ve all seen this. But this is a little too heavy for my taste. What if we dropped the parentheses?

var criminal = suspects.length > 0 ? suspects[0] : "noone"

We’re getting there. Now let’s make things a little more concise

var criminal = suspects.length ? suspects[0] : "noone"

Remember that if suspects is empty, suspects.length will return 0. Further, since we have not specified ===, the ternary will use type coercion in the conditional. Naturally, suspects.length registers as falsy because 0 gets coerced.

Let’s take this a small step further by removing the whitespace after .length:

var criminal = suspects.length? suspects[0] : "noone";

Cool, I think the final example is significantly more straightforward and definitely less syntax heavy than where we started. It’s actually is pretty similar Ruby:

# Ruby
criminal = suspects.length ? suspects[0] : "noone"

// Javascript
var criminal = suspects.length? suspects[0] : "noone";

Note that the space after .length in the first example is required because ? is a valid symbol in Ruby. I also find this to be particularly useful when creating classy functions where plain english style logic can be a nice addition:

function Cat(claws) {
    this.claws = claws;
}

var kitty = new cat();

console.log( kitty.claws? "Ouch!" : "A-OK" );

No doubt, there are a handful of ways to write this. However I think the form deserves some more recognition. Further, understanding type coercion is important step in learning Javascript and this offers a great example of taking advantage of it to improve code readibility.

Fun with FIGlet

2012-02-19

FIGlet is an awesome tool for generating text-based ascii art. I discovered it a few months go when Scott Gonzalez showed me his wonderful FIGlet parser written in Javascript. It’s a perfect example of code which is usable both in the browser and server.

I love the results, but I will say that finding the right font can take time. Some text simply doesn’t render well with particular fonts, and constantly flipping back and forth between Emacs and the terminal (even the built in terminal) is a total killjoy.

Did I mention trial and error sucks?

Well I’m not one for one for blind repetition, so I’ve created a simple web service to both convert text into FIGlet art and browse all the available options. All one has to do is specify the text and font they’d like to use (?text=Foobar&font=standard), or browse a gallery of all fonts, which also takes similar query parameters.

More than just ascii art

Perhaps just as superficial, but FIGlet can be used to do some other cool stuff. What if you wanted to convert text into binary data, or morse code?

01100101 01110110 01100101 01101110 01100010 01101001 01101110 01100001 01110010 01111001 01100100 01100001 01110100 01100001

. ...- . -. -... .. -. .- .-. -.-- -.. .- - .-


                                __           __                   __            _    
                               /\ \__       /\ \                 /\ \         /'_`\  
      ___       __      __     \ \ ,_\      \ \ \___     __  __  \ \ \___    /\_\/\`\
    /' _ `\   /'__`\  /'__`\    \ \ \/       \ \  _ `\  /\ \/\ \  \ \  _ `\  \/_//'/'
    /\ \/\ \ /\  __/ /\ \L\.\_   \ \ \_  __   \ \ \ \ \ \ \ \_\ \  \ \ \ \ \    /\_\ 
    \ \_\ \_\\ \____\\ \__/.\_\   \ \__\/\ \   \ \_\ \_\ \ \____/   \ \_\ \_\   \/\_\
     \/_/\/_/ \/____/ \/__/\/_/    \/__/\ \/    \/_/\/_/  \/___/     \/_/\/_/    \/_/
                                         \/

Socket.io with Flatiron

2012-02-11

Flatiron is a framework maintained by the guys over at nodejitsu. It’s great, I’ve moved most of my pet node projects over to it. This has been mostly painless, however I will say that hit some discomfort with configuring socket.io.

In retrospect, it’s actually rather simple process. Let’s look at some code.

The confusion (in my case, anyway) occurs because the server property of flatiron.app is only available after the start function has been explicitly called. This means that socket.io can only listen to the flatiron server after you’ve told it to start (when the server property is actually created).

It’s okay if that sounds confusing, it tripped me up too. The solution is rather simple: set up socket.io after the server has started, like so:

I’ve submitted a related pull request with a good example of what the whole process looks like. Hopefully this will help eliminate further confusion.

Speakeasy, a natural language processor for node

2012-02-04

I’ve been working lately on nodebot, a helper robot written for node.js. It’s forced me to learn quite a few new skills, one of which being natural language processing.

This project has been in the works for quite a while now and it suffers from a bit of bloat. To battle this I have begun to pull elements of it into seperate modules. The first of which is SpeakEasy, a natural language processor.

The aim of the project isn’t to be the Natural Language Toolkit, there is a wonderful project with this goal. However it does perform some rather useful task such as calculate sentiment and draw basic meaning out of statements. Check out some sample code:

Pretty neat eh? I have to admit it’s a ton of fun to play with. Take a look at nodebot or the new twittermap for some nice examples of what’s posssible.

Also checkout the project on Github.

Learning Backbone.js Chapter 1: A Quick Overview

2011-11-02

I’ve found it difficult to find a guide for learning Backbone.js. They’re probably out there — but it isn’t easy. This is the first in a series of articles dedicated to giving a complete overview of Backbone.js through simple examples and concise code.

Something of a cookbook, you might say.

What you’ll need:

Underscore.js: A required library for Backbone, it also adds over 60 functions for making Javascript development easier.
Backbone.js: The meat of it. This is what we will use for all the magic.

What we’re making

Today we’ll make a map which displays tweets via the Google Maps API and twitter search results (For the sake of simplicity, we won’t go in to the Twitter API yet). We’ll focus on fundamental construction using the Model, Collection and View components of Backbone.

The twitter map shows tweets around the world.

Hopefully, by the end of this you will have a beautiful night sky lit up by tweets around North America. Let’s get started!

A brief introduction:

Backbone.js is used to “supply structure to Javascript-heavy applications”₁. It separates logic into Models, Views, Collections, and Routers.

The architecture of Backbone.js

A typical Backbone application will use models to keep track of information, assisted by collections (groups of data). Views help display this information, by binding themselves to changes in data. Routers help orchestrate all of this by providing the ability to navigate to various parts of an application seamlessly.

Backbone is Model Driven

At the core of all Backbone applications are models. Models, as you may have guessed, act as the base level of information. Since the purpose of our application is to display tweets, let’s create a model to define them here:

What just happened? First we created duplicate of the Backbone Model object. Next we instantiated it as a new Tweet within the myTweet variable.

Pretty simple. But let’s say we don’t want a carbon copy of the Backbone model? Perhaps we need to add custom methods to our model, or we want to define the same defaults for every instance of the Tweet model. Let’s create a new model which extends the base Backbone.Model object:

I threw in another function here, .toJSON(). For models, this will return a JSON representation of the model’s attributes. When used on collections, it will return an Array of JSON objects for each model it contains.

Working with Collections.

The Tweet model will work well for this application, however we’ll need to keep track of more than one of them. This is where collections come in to play. Collections are designed to create, delete, and manage groups of models. Let’s create one here:

Noticing a trend? Here we first create a Tweet model. Then we create the TweetsCollection collection which references this model. Finally, we use the add method of collections to create a new Tweet within with the collection.

Backbone objects have events

In addition to this, all backbone objects can respond to events. Say, for example, you wish to perform an action every time a new record is added to a collection. Consider the following:

Pretty simple huh? Backbone events are powerful, I would recommend doing some reading on what events are available to models and collections. There are some really neat things you can do with them.

Pulling it all Together

Now that we’ve established some form of a basic understanding, let’s get in to the application! First we need some initial construction:

Cool. Now in your js folder, add a file called “map.js”. We’ll add all of the backbone code into here. From this point on we’ll pick up quite a bit of speed, but I’ll be sure to comment on everything new along the way.

Let’s recycle some of the code made earlier, with some additions:

Overall not too bad, but there are some new elements here. url, fetch, parse, and initialize.

url: Backbone is designed enable easy access to information on a server. When we set the url property, we tell the collection where it can find information.
fetch: Once a url has been established, fetch can be used to retrieve new information. In this case, we will request a json object from the Twitter search service.
parse: A handy function. Whenever the fetch event is fired, parse enables you to preprocess data before it is stored in the collection. In example above, we use the underscore method _.filter() ₂ to prevent any tweets that do not have a specific geolocation from being stored.
initialize: A staple of Backbone. Initialize is a method of each backbone object which will always run upon instantiation (in this case, the collection). Here we tell it to fetch new information from the server at an interval of 2 seconds.

Using Views

In order to display these tweets, we’ll need to create a view for the map. As said earlier, views are the presentational element associated with Backbone; we’ll use them to display content from our collection. I think views are best taught through example, so let’s jump right in to it. Take a close look at the preceding code and add it right after your model and collection code

A lot going on there, right? Let’s take a look at everything going on.

Line 10: The el property is used to describe the html element associated with a view. In this case, we select the #map_canvas div tag.
Lines 14-31: Standard Google Maps API stuff. This is where the map gets generated. Note that we set the height of the map_canvas to the height of the window to make sure the map is the correct size.
Lines 36-51: Here we add an event to add a tweet to the map every time the collection associated with this view adds a new record.

UPDATE : Newer versions of Backbone will actively make a distinction between el and $el. Use el to access the raw HTML DOM object. Use $el to access the jQuery version, for example:

// Without jQuery:
this.el.text = "Hello world";

// Use jQuery:
this.$el.text("I'm using jQuery!");

Initialize!

Finally, we instantiate the tweets collection and map view, setting everything in motion:

Cool, a TwitterMap.

Pop open the browser and take a look at your freshly created TwitterMap! We could use the Twitter API to make the tweets appear at an exceptionally faster rate. However you really can’t beat the simplicity of the basic search.

Conclusion

I’m not the first person to write a tutorial on backbone to say “But we’ve only scratched the surface”, and I certainly won’t be the last. Future installments will delve into a more detailed overview of how models and collections work. We’ll go through events, syncing information, and other important concepts. I look forward to showing you what can be done within Backbone!

Initial Commit

2011-08-22

Just started my Toto blog. Wordpress is amazing, don’t get me wrong, but having the simplicity is super nice.