oodavid... what a blog you have!

Deploying with Git(HUB)

The last post about deployment was good, but I ran into a few problems to do with submodules. I am developing 3 web-apps in parallel that all use common code, so in keeping with DRY methodology the apps simply link to submodules in order to share code. With the technique outlined in the previous post submodules were not automatically updated; making it all but useless for my needs.

So today I have quickly researched and utilised an alternative - using github features to trigger automatic deployment.

In keeping with trendy trends, here’s the GIST on GitHub - you can see that I have forked a very good gist and there’s a few references in the post.

I have a pretty nice announcement with-regard-to my worklife to make soon, but need to wait till everything is confirmed before I do. Happy times my friends :-)

Psuedocode - How to rapidly plan your work

At some point in my coding life I got into the habit of writing a sort of comment-soup-pseudocode as a way of planning the work ahead of me. Depending on the language and environment I often end up with a mix of basic programming structures (functions, objects etc) flooded with notes about the work I need to do.

For example I am (right now) writing a sites manager for a client, they need to be able to search for addresses on google, see what sites are nearby on their database and given that information they can then go on to use an existing site, or create a new one.

To plan the first part (finding sites) I wrote this psuedo-code:

NG.sites_manager = {};
NG.sites_manager.show = function(){
	// Check we have google
		// Activate the map
};
NG.sites_manager.geocode_address = function(address, site_id){
	// Geocode the address
		// If we have a site_id
			// NG.sites_manager.add_site(lat, lng, address, site_id, true)
		// Otherwise
			// NG.sites_manager.add_site(lat, lng, address)
};
NG.sites_manager.add_site = function(lat, lng, title, site_id, focal){
	// If it's focal
		// NG.sites_manager.clear_sites();
	// If we have a site_id
		// If the site exists in the nearby-sites list, exit the function
		// Add the link on the nearby-sites list
	// Add a marker to the map
	// Increment the counter
	// If it's focal
		// Centre the map
		// Request nearby sites
};
NG.sites_manager.clear_sites = function(){
	// Reset the counter
	// Empty the nearby-sites list
	// Remove the markers
};
NG.sites_manager.get_nearby_sites = function(lat, lng){
	// Request nearby sites
		// For each site
			// NG.sites_manager.add_site(lat, lng, title, site_id)
};

It serves many useful purposes

1. As you write your psuedocode you can visualise the work ahead of you, and the code will already be written in your head by the time you start proper.
2. Making changes at this stage is trivial.
   
3. It is NOT a waste of time, the comments remain in your code.
4. Something else that I’ve forgotten… err… damn brain.

Does anyone else work in a similar manner? I’d love to hear some tips and tricks in this area! Now to write my sites-manager…

CSS / jQuery how to toggle scrollbars for a lightbox

A few months back I was reverse engineering the Facebook photo overlay and noticed that they have employed a very neat trick with-regard-to scrolling; when the photo “popup” is active, the body underneath does not scroll.

It’s a very subtle UI feature but fixes a thoroughly annoying “bug” for many people. Normally when you view scrollable content in a “lightbox” you would scroll to the bottom of the lightbox and then the PAGE UNDERNEATH STARTS TO SCROLL too, what a buggerlug.

The trick is to simply prevent the body from scrolling; using a little CSS we can set the body overflow to be hidden (removes the scrollbars) and put a margin on the html to stop the page moving about (body would expand into the space the scrollbar was otherwise):

/* Don't scroll */
html.noscrollbar {margin-right: 15px;}
html.noscrollbar body {overflow: hidden;}

Or if (like me) you’d prefer to leave your CSS be and implement it with jQuery:

// Remove the scroll
$('html').css('margin-right', '');
$('body').css('overflow', '');

// Return the scroll to normal
$('html').css('margin-right', '15px');
$('body').css('overflow', 'hidden');

I use the jQuery method in a hush-hush project that I’ve been working on for the past few months (and for the foreseeable future*) here’s a not-too-revealing screenie

* a blog post in itself

node.js - a static file server

Previously: Hello world… of node.js

Serving up a plaintext “Hello world” for every file (see previous) isn’t exactly that useful, but it exposed the basic mechanisms we need to make a file server. Today we will update the code to serve any file requested, there’s no validation, it’s stupid like that.

Open up (or create) server.node.js and dump this into it:

/**
 * Static file server
 *   request a file, get a file
 */

// Required libraries
var http	= require('http');
var fs		= require('fs');

/***************** Simple file server *****************/

// Create the server
var server = http.createServer(function (request, response) {
	// Log the request
	console.log(new Date() + ' [' + request.method + '] ' + request.url);
	// Serve static files
	if (request.method === "GET"){
		// Manually translate "/" into "/index.html"
		var url = '.' + (request.url == '/' ? '/index.html' : request.url);
		// Read the file and return it
		fs.readFile(url, function(error, content) {
			if (error) {
				// Oh dear.
				console.log('error loading file ' + url + ': ', error);
				// Lets just say missing for now
				response.writeHead(404);
				response.end();
			} else {
				// Lookup the mimetype of the file
				var tmp		= url.lastIndexOf(".");
				var ext		= url.substring((tmp + 1));
				var mime	= mimes[ext] || 'text/plain';
				// Write the file
				response.writeHead(200, { 'Content-Type': mime });
				response.end(content, 'utf-8');
			}
		});
	}
});

// Listen on port 1337 and IP 127.0.0.1
server.listen(1337, "127.0.0.1");
console.log('Server running at 127.0.0.1:1337');

/********************* MIME TABLE *********************/

var mimes = {
	'css':	'text/css',
	'js':	'text/javascript',
	'htm':	'text/html',
	'html':	'text/html',
	'ico':	'image/vnd.microsoft.icon'
};

Once again, open up the terminal and run:

cd /path/to/folder/
node server.node.js

NOTE - we have changed to the directory of the script file as it would seem that (with my code above) the filesystem library (fs) reads relative to the node process rather than the server file. Which is an interesting learning.

So now you should create a few new files with your own content:

• /index.html
• /style.css
• /script.js
• /favicon.ico

Then navigate to the server URL, the terminal will output messages like so:

Server running at 127.0.0.1:1337
Tue Jan 03 2012 23:54:20 GMT+0000 (GMT) [GET] /
Tue Jan 03 2012 23:54:20 GMT+0000 (GMT) [GET] /script.js
Tue Jan 03 2012 23:54:20 GMT+0000 (GMT) [GET] /style.css
Tue Jan 03 2012 23:54:20 GMT+0000 (GMT) [GET] /favicon.ico

As you can see, index.html references script.js and style.css and my browser has requested favicon.ico on my behalf, they are all served normally. So now we can start making some basic websites with this little server script :-)

Hello world… of node.js

Previously: How to install node.js on Linux

Today we learn how to create a simple webserver with node, it’ll take you about 3 minutes :-)

Create a file called server.node.js and dump this into it:

/**
 * Hello world server
 *   every request to the ip gets the same response
 */

// Require the http library
var http = require('http');
// Create the server
var server = http.createServer(function (request, response) {
	// Every request outputs "hello world"
	response.writeHead(200, {'Content-Type': 'text/plain'});
	response.end('Hello World\n');
	// And also logs 
	console.log('Page requested at ' + new Date() + ', for ' + request.url);
});
// It listens on port 1337 and IP 127.0.0.1
server.listen(1337, "127.0.0.1");
// For the joy
console.log('Server running at http://127.0.0.1:1337/');

Open up the terminal and run:

node server.node.js

Then navigate to the server URL, you can watch the terminal output messages to the following effect:

Server running at http://127.0.0.1:1337/
Page requested at Sun Jan 01 2012 16:23:12 GMT+0000 (GMT) /
Page requested at Sun Jan 01 2012 16:23:12 GMT+0000 (GMT) /favicon.ico

Pretty simple stuff really, and you should be able to quickly see how node.js can become a useful tool to add to your arsenal.

Next up: node.js - a static file server

How to install node.js on Linux

How to install node.js on Debian-based Linux distros (Debian, Ubuntu, Mint etc)

1 - Install the dependencies (chances are you’ve already got most of these)

sudo apt-get install g++ curl libssl-dev apache2-utils

2 - Then install git (you may already have that too)

sudo apt-get install git-core

3 - Clone the node git repo…

git clone git://github.com/ry/node.git

4 - Then install

cd node
./configure
make
sudo make install

The terminal output will show whether everything went OK, but if you want to be sure

man node

Badabing

Next up: Hello world… of node.js

Right then, time to go to a New-Years-Eve party :-)