Graeme Nelson

ruby, javascript, html5apps & startups 

Handle POST With Fabjs

Handle POST Method in Fab Javascript Framework (Fabjs)

Introduction

Fabjs is a modular async web framework for node.js. Fab is basically a framework that glues together functions. Based on the arity of the function. It definitely took a couple of days to wrap my head around the basics. Check out Chris Strom Getting Started Articles, they definitely help me understand things a little better.

NOTE I am leaving out the fab boilerplate for the examples in this article.

Simple Unary Call

If I just want to respond to a request such as /hello, then I would create a function like so:

(/^\/hello/ )
  (function() {
    this({body: "Hello World!"})()
  })

Handling POST Method

However, what if I wanted to only allow POST requests. I see that the Fab library has a fab.method.POST function, but how do we use this function. There's some simple documentation that states that fab.method.POST is a "Arity 3" or "Ternary" function. So, we need to provide two functions, one for success and one for failure (or in Fabjs terms hit or miss). Let's write that function:

(/^\/onlypost/)
  (fab.method.POST)
    (function() { this({body: "success"})() })
    (function() { this({body: "failure"})() })

When you hit the url /onlypost with a GET request, you will receive a document with a body of "failure". If you hit the url with a POST request, you will receive a document with a body of "success".

According to the Fabjs maintainers, you will not need to manually close the functions in upcoming releases. So the above would become:

(/^\/onlypost/)
 (fab.method.POST)
   (function() { this({body: "success"}) })
   (function() { this({body: "failure"}) })

And if you want to keep the connection open, you would use this.call(fn, body).

It took me about a day to figure this out, but I did start to feel more comfortable with the Fab framework.

Filed under  //   fabjs   javascript  

Comments [0]

Where Is JSpec Part II

Where is JSpec Part II

Okay, I had a grand plan to show off JSpec with a simple javascript twitter widget. So what happened?

Javascript Happened

There are so many interesting javascript projects going on, that I got distracted. There are three testing libraries that I am interested in learning more about:

There is this nifty javascript/css animation framework created by Thomas Fuchs, called emile.

Along with my love for javascript these days, I've started daydreaming about html5 apps. Check out Alex Gibson's MiniApps site for some examples of html5apps.

In my research for html5apps development I stumbled upon xuijs, a simple javascript framework for building mobile web applications.

This is only a small portion of what's going in the javascript world. I suggest you check it out.

Be back after I've had some time to digest.

Filed under  //   emile   html5apps   javascript   jspec   shouldajs   vows   xuijs  

Comments [0]

Using Markdown With Posterous

Using Markdown With Posterous

There are several complaints that Posterous doesn't handle writing posts in Markdown. However, one can post to Posterous via their API like so:

curl -d "title=MyTitle" --data-urlencode body@mypost.html 
     -u "username:password" http://posterous.com/api/newpost

This will post an html document called mypost.html with a title of MyTitle to your Posterous account (you will need to fill in your posterous credentials).

NOTE: these curl requests are not running on SSL, so you might not want to run on a public network.

Posterous Bundle For TextMate

Since I use TextMate for most of my development projects, I decided to create a TextMate bundle that will post Markdown documents to my Posterous account.

http://github.com/graemenelson/posterous_tmbundle

NOTE: This is a very new and not all of the kinks have been worked out. I hope to cleanup some of the issues in the coming days, see Gotchas in the Readme.md file.

NOTE: This post was created in TextMate and pushed using the Posterous TextMate bundle.

Filed under  //   bundle   markdown   posterous   textmate  

Comments [2]

JSpec Basics

JSpec Basics

[NOTE] This post is based on JSpec v4.1.0 running on Mac OS X (10.6.3).

JSpec is a BDD framework for Javascript. If you have experience with RSpec then JSpec will look familiar. JSpec can be used with or without the built-in DSL grammar. The DSL grammar is very RSpec-like, and it’s the JSpec style I will use in the following examples.

JSpec Installation

If you come from a Ruby background and have RubyGems installed, installing JSpec is as easy as:

gem install jspec

[NOTE] you may need to sudo this command. If you are tired of using sudo to install gems then I suggest looking at installing RVM (and Homebrew while you are at it).

You can also install via make, checkout the main JSpec page for instructions on how.

JSpec Getting Started

If you are starting a javascript library from scratch, then you can run:

jspec init myproject

This will create a new JSpec project template in the folder called myproject.

If you already have a project in the works, you can run the following within the project directory:

jspec init

This will create the JSpec template within the current directory.

There are a few other options, checkout the main JSpec page to learn more.

Our Little Twitter Widget

Let’s create our initial JSpec template for our twitter widget. So, in a directory near you type:

jspec init twitter && cd twitter

Let’s see that everything was setup properly, run:

jspec run

If your default browser is FireFox or Safari, this should have worked out fine for you. However, if you have Chrome as your default browser (like I do) you will only see JSpec header with no passes/failures. If you look at the Javascript console for Chrome, you will see the following error: Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101

I was unable to find a solution for this, so I decided to force JSpec to use Safari:

jspec run --browser Safari

You should see that our first test/spec has passed. What? we didn’t create a spec — right you are. JSpec creates a simple test case for us in spec/unit/spec.js, which looks something like:

describe 'YourLib'
  describe '.someMethod()'
    it 'should do something'
      true.should.be true
    end
  end
end

There are basically three files that you should care about at this point:

lib/yourlib.js This is your javascript library

spec/unit/spec.js This contains the specs/tests that you will be writing to test your new library

spec/dom.html This is the setup file for running tests/specs in the browser

Let’s go head and change lib/yourlib.js to lib/twitter.js. Once we do that we need to update the JSpec framework to use our new library. So open up spec/dom.html, and change the following line:

<script src="../lib/yourlib.js"></script>

to:

<script src="../lib/twitter.js"></script>

Okay, we are ready to start on implementing our new twitter widget. Which we will start on next time.

Filed under  //   javascript   jspec  

Comments [2]

Some Javascript Love

Sites:

Daily JS
http://dailyjs.com/

Javascript, Javascript
http://javascriptweblog.wordpress.com/

How To Node
http://howtonode.org/

NodeJS
http://nodejs.org/

JSpec (of course you need to test)
http://visionmedia.github.com/jspec/

GitHub Repositories:

ExpressJS (Sinatra like framework on the server side)
http://github.com/visionmedia/express

Sammy (Sinatra like framework on the client side)
http://github.com/quirkey/sammy

Online Book:

Advanced Javascript ($4 CAD)
http://www.dev-mag.com/2010/02/18/advanced-javascript/

Filed under  //   javascript  

Comments [0]