Caleb Madrigal

Programming, Hacking, Math, and Art

  

Simple D3 demos

I've been playing with d3 recently, and it awesome! I'm especially amazed by the ease of animating transitions with it.

There are plenty of amazing d3 demos out there, but I wanted to write some simpler ones to help me understand the basics of d3. You can find them here:

http://calebmadrigal.github.io/d3-demos/

For example, here's how to draw a circle with d3:

Code:

  var width = 200;
  var height = 200;

  var x = width/2;
  var y = height/2;
  var ...

Why I changed my mind about Node.js

Intro

I first heard of Node.js about 4 years ago. I thought it was a ridiculous idea: using JavaScript as your server-side language! JavaScript always felt to me like an inferior language. Why would you use it unless you absolutely had to!? Now of course, you have to do JavaScript if you are writing code which runs in the browser, but on the server, you can use any language you choose. So why choose JavaScript?

I did choose to use JavaScript/Node.js on my current project. I have now been using it for the last several months, and I am quite impressed! Let me tell you what made me change my mind about Node.js.

Adoption by the Enterprise world

First, Node.js has been adopted ...

Sessions in Node.js and Express.js

In the process of trying to explain to a friend how sessions work, I decided to write a barebones example to demonstrate how to do sessions in Node.js with Express.js.

Here's a live demo: http://expressjs-session-example.herokuapp.com/

And Here's what it looks like:

Before you enter your name:

After you enter your name:

And here is the code:

var express = require('express');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require('cookie-session');

///////////////////////////////////////////////////////////////////////////////////////// MIDDLEWARE

var app = express();

// Needed to handle JSON posts
app.use(bodyParser.json());

// Cookie parsing needed for sessions
app.use(cookieParser('notsosecretkey'));

// Session framework
app.use(session({secret: 'notsosecretkey123'}));

// Consider all URLs under /public/ as static files, and return them raw.
app.use(express.static(__dirname + '/public'));

/////////////////////////////////////////////////////////////////////////////////////////// HANDLERS

function ...

NodeJS on Heroku

I've recently tried both Heroku and Node.js for the first time. Both are very simple, and work very nicely together. This is a quick guide to deploying a Node.js app to Heroku. To make it simple, I'll walk through deploying a Node.js sample project I created. It is a very simple message board.

Here are the steps to getting this simple app up and running on Heroku...

Get Heroku account

  • Go to Heroku, and click Sign Up
  • Download and install the Heroku Toolbeld for your operating system (which gives you the heroku command in your terminal)
  • Open your terminal and run heroku login, and enter your heroku credentials and the prompts

Deploy your app to heroku

In your terminal, do the ...

JSONP for cross-origin AJAX

I was recently wanting to enable a webpage to utilize some server-side functionality which was on a different server than the one serving the original page. Traditionally, this has been problematic due to browsers' Same origin policy. JSONP is a solution to this problem. Here is how to do it with jQuery...

This webpage can be saved locally to any machine, opened in a browser, and can then load data from my web server:

<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $.ajax({
            url:"http://test.calebmadrigal.com/javascript/jsonp_test.json",
            dataType:'jsonp',
            jsonpCallback: "jsonp_load",
            success:function(result){
                $("#outputdiv").html(result);
            }
        });
    });
});
</script>
</head><body>
    <button ...