…the main difference between writing JavaScript code like the average Joe (or Jill) and writing it like a JavaScript ninja is understanding JavaScript as a functional language. — John Resig, Secrets of the JavaScript Ninja

Learning the fundamentals of functional programming has many benefits — the code is more succinct and readable. It’s also adds an element of fun while thinking through a problem with the lens of “how can I implement this with higher-order functions”?

Below are cherry-picked explanations and examples from around the web that best describe how to implement higher-order functions. The reason I wrote this post is because having these examples is helpful to have in one place, and perhaps you will find it helpful as well. The explanations in this post are gleaned from the following sources:

Higher order functions

Generally speaking, higher-order functions are functions that accept other functions as arguments. Functions that can be passed as an argument is called a first class function. The first class function executes on each item in the array, not on the array as a whole.

Being able to write what we want to do instead of how we do it is the aim of using higher-order functions. The lower-abstracted details are performed behind the scenes.

forEach

array.forEach(callback[, thisArg])

forEach simply iterates over an array and invokes a function on each item in the array:

var nums = [1, 2, 3];
nums.forEach(function(num) {
  console.log(num * 2)  // 2, 4, 6
});

Note: using a return for the inner function does not work, due to how forEach is setup. forEach simply applies an action to an array item without returning the result.

Also important: the function context for forEach is global if no thisObject is passed. So:

var nums = [1, 2, 3];
nums.forEach(function(item) {
  console.log(this);  // Returns global window x 3
});

Passing a function context:

var nums = [1, 2, 3];
nums.forEach(function(item) {
  console.log(this);  // Returns `[1, 2, 3]` x 3
}, nums);

map

arr.map(callback[, thisArg])

map applies a function to each item in an array and returns a resulting array. This is just like forEach, but instead of discarding the values returned by the function, it builds a new array of the transformed values.

var nums = [2, 4, 6, 8];

var squareIt = function(num) {
  return num * num;
};

nums.map(squareIt);  // Returns `[4, 16, 36, 64]`

Another map example:

var words = ['foot', 'goose', 'moose', 'kangaroo'];

function fuzzyPlural(single) {
  var result = single.replace(/o/g, 'e');
  if (single === 'kangaroo') {
    result += 'se';
  }
  return result;
}

words.map(fuzzyPlural);  // Returns `['feet', 'geese', 'meese', 'kangareese']`

Or we can use it to return values without transforming them:

var sandwiches = [
  {name: "hamburger", "price": "$6"},
  {name: "BLT",   "price": "$4"},
  {name: "egg salad",  "price": "$4"}];

var prices = sandwiches.map(function(sandwich) { return sandwich.price; });

filter

arr.filter(callback[, thisObject])

Sometimes we only want to get entries that satisfy a certain condition.

Similar to map, filter takes in an array of values and returns a new array. The difference is filter invokes a function that returns a boolean result. If the function returns true, the value is added to the new array. Values that return a falsey result are filtered out.

var nums = [1, 2, 3, 4, 5, 6];

var isEven = function(num) {
  return num % 2 == 0;
}

nums.filter(isEven);  // Returns `[2, 4, 6]`

Another example:

var people = [
  {name:"John",  age: 40},
  {name:"Sue",   age: 30},
  {name:"Mary",  age: 55},
  {name:"Jack",  age: 20}];

people.filter(function(person) {
  return person.age == 40 || person.age == 30;
});

// returns `[John, Sue]` (an array of objects)

some

arr.some(callback[, thisObject])

Often we want to know whether some or all items in an array satisfy a specific condition.

some returns a boolean for the array. It returns true if some of the items satisfy the condition. The condition is determined by the first-class function, which should return a boolean result.

var nums = [5, 8, 2, 10];
var current = 7;

function higherThanCurrent(num) {
  return num > current;
}

if ( nums.some(higherThanCurrent) ) {
  console.log('Some nums are higher than current')
}

every

arr.every(callback[, thisObject])

We can also test if all values satisfy a specific condition with the every method.

var nums = [5, 8, 2, 10];
var current = 7;

function higherThanCurrent(num) {
  return num > current;
}

if ( nums.every(higherThanCurrent) ) {
  console.log('All nums are higher than current.');
} else {
  console.log('Some nums are lower than current.');
}

indexOf and lastIndexOf

arr.indexOf(searchElement[, fromIndex])

arr.lastindexOf(searchElement[, fromIndex])

indexOf is used to test whether an element is present in an array, which searches with a strict === operator.

The method returns an integer index of the searched element in the array. An element not found returns -1. indexOf also takes an optional fromIndex parameter to start a search from a specific position.

var data = ['two', 'four', 'five', 'six'];

data.indexOf('four');  // 1
// Start search from index position 1, return index position for 'five'
data.indexOf('five', 1);  // 2
data.indexOf('eight');  // -1

lastIndexOf starts a search from the end of an array. It takes the same parameters as indexOf, including the optional fromIndex parameter.

var data = ['two', 'four', 'five', 'six', 'four'];

data.lastIndexOf('five');  // 2
data.lastIndexOf('four', 3);  // 1

reduce and reduceRight

arr.reduce(callback,[initialValue])

arr.reduceRight(callback,[initialValue])

reduce and reduceRight allow us to flatten an array into a single value. The intialValue parameter is optional — if omitted it defaults to the first element of the array. Here’s a simple example of reduce:

var nums = [1, 2, 3, 4];

var sum = nums.reduce(function (previous, current) {
  return previous + current;
});

console.log(sum);  // Returns 10

What’s happening here? We are going through the array and getting:

  1. The previous value of every callback, which initially is the first element since it’s equal to intialValue
  2. The current value of every callback, which at first call is 2
  3. The last two arguments — index and array

Finally we return the sum of our previous and current values, which becomes the previous value of the next iteration, and the current value is set to the next element. It looks like:

// initial set
previous = initialValue = 1, current = 2

// first iteration
previous = (1 + 2) =  3, current = 3

// second iteration
previous = (3 + 3) =  6, current = 4

// third iteration
previous = (6 + 4) =  10, current = undefined (exit)

Generic nature of higher-order functions

What’s really cool about these higher-level functions is they can be applied to other object types as long they have a length property and numeric indices.

// Get the reference to the map method
var map = Array.prototype.map;

// Call it on a string, which will return an array
var helloArray = map.call('hello world', function (char) {
  return char + '*';
});

// Join the array items
console.log( hello.join('') ); // 'h*e*l*l*o* *w*o*r*l*d*'

We can also do the opposite. Such as applying a string method to an array:

var toUpperCase = String.prototype.toUpperCase;

var upper = toUpperCase.apply(['foo', 'bar']).split(',');

console.log(upper);  // ['FOO', 'BAR']

Notice how call and apply are used in these examples. This “generic nature” is the result of having the ability to pass in a different this to the native object methods, via call or apply. call is used when there is a set number of parameters to pass. apply is used to pass in an array.

For the past 3 months I have been working with Backbone.js. Specifically, refactoring my thesis project Notestream as a single page application. I’d like to share a couple insights. Note: I did not include Marionette with this project.

Refactoring this project gave me perspective on whether it’s worthwhile to use a clientside framework. Will you have to maintain the project in the future? Are there a lot of moving parts? Then yes, a framework will probably be useful. Regardless, I highly recommend building a static version of the web app first before incorporating a framework. This way you’ll know how to split out your views and organize your data structures.

The biggest positives for using Backbone with this project are:

  • Splitting DOM elements out from data through templating.
  • Not having to manually poll the server. Events trigger communication with the server now.
  • A single page application feels very snappy

RequireJS

To keep the my code as modularized as possible, I incorporated RequireJS. This way I was able to split out all my code and markup into seperate files, and use them when necessary. Organizing your application using Modules by Thomas Davis as well as Jeffrey Way’s video tuturial do a great job explaining how to use the two in tandem.

One thing to note that was not covered in the tutorials, is the ability to set up your modules a la nodeJS like so:

define(function(require) {
  var Backbone = require('lib/backbone'),
      nestedView = require('views/nestedView')
      demoTemplate = require('text!../../templates/demoView.html');

  // demo view code...
});

Instead of seperately definining your modules and declaring the function:

define(["lib/backbone", "views/nestedView" , "text!../../templates/demoView.html"],
  function(Backbone, nestedView, demoTemplate) {
    // demo view code ...
  }

You can imagine if you have multiple modules, for example many nested views, how the former setup is is better organized. Another potential headache with the latter is the function arguments have to match the order of the modules being defined. Again, that’s solved using variables.

Authentication

One area I had some difficulty with a how to implement authentication with a single page app. I have not seen a lot of detailed tutorials or example code on implementing authentication along with Backbone.js.

For now, I am using seperate routes for authentication with Passport.js, while the Notestream app itself is a single page app.

For the past five weeks I have been poring over Backbone.js tutorials. After building Notestream, it became apparent why using a clientside framework is necessary. By the time I had to present my thesis, I was in nested-callback hell. The code was becoming difficult to manage, and I could see how cumbersome a project can become without a framework to organize it.

So I picked up a couple resources to learn how to implement Backbone, and I am in the process of refactoring my thesis project now. I can’t see myself building a webapp without a framework again!

Here are the resources I found most useful:

Connected to the Backbone by Jeffrey Way

Jeffrey Way’s Connected to the Backbone does an excellent job walking the viewer step by step through the Backbone concepts using a tasks example and contact manager example. The lessons also focus on proper namespacing in Backbone, which has been helpful as well.

My suggestion is learn the code by heart, even if you’re not unsure about what all the parts are doing yet. You’ll see the patterns Backbone implements, and learn accordingly.

With that said, there are a few hang-ups with this tutorial.

First, there are a lot of example files missing from the project source. Most of the time I had to copy from the video instead of reviewing from a text file. More importantly, Jeffrey uses Laravel as his backend. These files were not included, and they were only quickly reviewed in the videos. Because of this, I ended up taking a break from the lessons. More on that later.

Secondly, coverage of routes was lacking. Particularly event handling for routes. Ultimately a lot of Googling, and searching Stackoverflow and Github got me what I needed. Still, this concept is pretty integral to Backbone, and would have been helpful to see it tied in with the examples used.

Lastly, a minor point: the tutorial is relatively dated. It was recorded in August of 2012, before Backbone 1.0 was released. While the changes are minor, coming into the framework complete new, I wasn’t sure when I was hitting an error due to my code, or a method that was deprecated from an older version. My suggestion: pay close attention to the viewer comments that go along with the videos.

Developing Backbone.js Applications by Addy Osmani

I can’t speak for the entirety of Developing Backbone.js Applications, but it gave me a thorough understanding on how to integrate nodeJS and MongoDB with Backbone. As explained, I took a breather from Connected to the Backbone in order to implement a nodeJS server with a proper RESTful API.

The book is still being updated, and you can download the latest version at the Github repo.

Today I moved my blog content from Squarespace to Octopress. Octopress touts itself as “a blogging framework for hackers”, and rightly so. After poking around the framework file hierarchy, administration compared to Squarespace is a lot easier for a number of reasons:

  1. Octopress is run from the command-line and a text editor. It’s a lot faster to post, edit, and tweak the styling and features compared Squarespace’s web interface.

  2. Version control through git. Squarespace does offer version control now as well, however if you use it you have to create your own templates from scratch—there’s no happy medium.

  3. Open source. There’s an active community behind Octopress pushing plugins and themes.

  4. Markdown files. Squarespace offers export functionality, however the single export option is Wordpress. I can’t export text files for personal use, so I am moving the content over by hand one post at a time. With Octopress I am simply pushing commits with the markdown files to my Github repo.

Don’t get me wrong, Squarespace is great if you need an “out of the box” website solution—not to mention, their customer support is first class. However, now I have complete control of my content and how it’s displayed, and it feels good!

These instructions were helpful in getting started with Octopress:

And I’m using the Greyshade theme from Shashank Mehta.

ITP

This week I graduated from ITP, and it’s bitter sweet. I hope to find a place with such a concentration of talented, creative, and intellectually curious people in my future days.

As for now, I will continue building on Notestream, and dive further into Backbone.js, and get a cursory understanding of the Go language. I also want to find some kind of mentor so I can write more efficient Javascript and learn better coding practices.

This is also a time for me to self-assess in terms of employment. What are my strengths and where am I mediocre? What type of organization do I want to work with? What are my goals for the next 18 months? Now that I have some time on my hands, I can figure out what I plan on doing post-ITP.

With that said, there are a couple “must-haves” going forward in terms of my career in design and software development:

  • Work with a team of people who love what they do.

  • Be challenged by what I am doing and proud of the work I am putting into the world.

I have a feeling the rest will fall into place.

My thesis project Notestream was built on top of nodeJS and Express. What has really sold me on nodeJS is the active community and the amount of modules available for use.

Here are a few modules I found useful during Notestream’s development.

Shred

Shred is an HTTP client library. I used the Shred module for AJAX posts when I wanted to append more meta data, but didn’t want to slow down the user from advancing to the next page.

For example, Notestream users save a Vimeo video to their video collection in order to mark it up with annotations. After a user submits the ‘save video’ form, Shred allows the server to gather additional meta-data from Vimeo after the AJAX post is made. It’s all happening in the background.

JSON2csv

Another useful module is JSON2csv, and title pretty much says it all. Notestream users can download their notes in csv format thanks to JSON2csv. The module pings the Notestream API when a user chooses to download their notes, and formats the JSON accordingly.

Tock

Tock is Javascript countdown clock and timer. Why use this when JS already offers interval and timeout functionality? Because they’re not very accurate. What’s awesome about Tock is it self-corrects the time based on the system clock, so it won’t lose track of the time.

I’ve been pretty slammed with end of the semester projects and work, but I at least wanted to mention my thesis Notestream. I plan on expanded on my process building Notestream in the coming weeks.

Summary

Notestream is a web-based annotation service geared towards collaborative mark-up of video.

My inspiration for Notestream is based on my love for watching online lectures. Naturally, there’s usually a lot of information to glean from a lecture that typically leads to questions about material covered. Because the material is prerecorded you can’t ask a question of the instructor on the spot, or start a conversion involving the class.

Notestream is built upon the idea that there is a community around a lecture. Students and instructors alike will want to append information that is touched on in a video. Perhaps an instructor left out some information in the video, or would like to give more resources for a topic touched on in the video.

That’s where Notestream comes in. Annotations are made according to timecode.

Inspiration

While building Notestream, I constantly questioned who this service is for. I knew I would personally find this service useful, but would other people? As there is more of shift from in class lectures to online lectures, people will naturally want to break from the solitude of learning on their own, and use available resources to discuss the material being taught.

While there are timecode-oriented annotation services in the wild, I wanted to assemble my own flavor. Why? One, as a challenge for myself, but two, from what I’ve seen of the services offered, there’s not a lot of emphasis on the comments themselves. They’re usually relegated to the bottom of the page, or they sit in a static position as an aside.

A concept I am very drawn to is the Soundcloud waveform interface. Having messages animate on based on timecode, and indicating where in the audio files these messages are located really struck me as a concept to explore in relation to video.

Unfortunately the interaction doesn’t work out so well for video. For instance, Youtube employs an optional annotation service inside the video itself. It feels cluttered. Also, given the nature of the annotations for lectures, which would typically be a longer note or sentence, the design doesn’t map well to online lectures.

Notestream has a ticker area for annotations to fade-in and stay for six seconds, then disappear. I experimented with different font sizes and animations, and the old addage “less is more” was best suited here. In fact, the design of Notestream is all very spartan – flat UI, lots of whitespace, and inconspicuous typefaces.

Building it

From the get-go I was very focused on building Notestream from the ground-up instead of top-down. Most of my attention was focused on mapping the database and server to how I envisioned Notestream to work, while the front-end would naturally materialize out of that back-end infrastructure. Notestream is built on NodeJS/Express and MongoDB.

You can demo Notestream here. If you have any questions or comments, feel free to message me.

The code is available on Github.

Small Is Beautiful is a 2-credit course geared towards building a citizen cyberscience project focused on nanotechnology. Citizen cyberscience refers to bringing the general public onboard a science project through the use of readily-available technology.

My partner, Robin Reid, and myself worked with Montclare Labs to conceptualize a project for crowd-sourcing data on proteins being assembled in their lab. Montclare Labs is researching proteins for cancerous cells.

Read on →

In the same vain as my poem generator, I have coded a haiku generator in Python. Initially I wanted to write a haiku generator before resorting to a poem generator, but I could not find a source for the number of syllables for a dictionary of words.

Well, that problem is solved — Carnagie Mellon offers a pronunciation dictionary, for their speech-to-text engine, Sphinx. The dictionary is open-source, so I am using it as a source for words and syllables for the haiku generator.

Haikus are traditionally three lines, with a 5-7-5 split, or five syllables for the first line, seven syllables for the second, and again five syllables for the final line. If your middle school days of English class are beyond your recollection, it looks something like this:

An old silent pond…

A frog jumps into the pond,

splash! Silence again.

The CMU dictionary is simply a text file with each word split into the following format:

AGENCY  EY1 JH AH0 N S IY0

The line starts with the word, then two whitespaces and the pronunciation with numbers indicating the syllable breaks.

I wrote a function to break these lines down into a word and a syllable count, which is then stored in a Python dictionary. The dictionary is set up with the syllable count as the key, and the list of words with associated syllable count as the values.

The final part the code then builds lines depending on the amount of syllables desired, which is then constructed in a final function in a haiku format. Here is a sample of outputs:

MUSTAFA WILSON’S

WONDERFULNESS JAWED BARBY

WORLDERS BAS-RELIEF


BATTERERS FOOTLIGHTS

STRIKE KONARSKI HARDYMON

CHOO STRANDS SOLIDLY


SPATH RASH SPIKE MUCUS

UNDERLINING SCREWDRIVERS

STOUT SEALED VOS HANZLIK


Check out the code here.

Our Reading and Writing Electronic Text Midterm projects consists of two steps:

  • Devise a new poetic form.
  • Create a computer program that generates texts that conform to new poetic form you devised.

Initially I wanted to create a haiku generator. Unfortunately there are not a lot of online resources dedicated to breaking english words down by syllable. Instead, I settled on a poem generator.

The python script scrapes a random word generator at Vocubula.com, where it gets the word and the word’s part of speech. From there I organize the words according to parts of speech inside a dictionary, where the part of speech is the key, and the values are lists filled with the words.

I also scraped a list of prepositions to insert into the poem structure.

The poem structure itself is four lines, and each line is a simple sentence structure.

The poem generator has created works such as:

cacography popple incunabulum through the exuviae nympholepsy versus ensorcell skeuomorph inhere subfusc triumphalism cosmography disabuse by means of gourmand

Or:

detritus perambulate bacronym against the caducity Weltschmerz in front of enucleate suborner notional soi-disant succedaneum zoophyte embay modulo gourmandise

And finally:

quatopygia straiten menology neath the anonym incubus left of transude quiddity perambulate chthonic juvenilia maenad ameliorate above zenana

The output reads like a Harry Potter spell. While it’s not very impressive, perhaps there are more variations in the line structure to investigate.

The code is available here: Github.