Recently, I had a hard time configuring my domain on appfog. There were two seperate problems along the way.
One was properly setting up the a record along with the cname and the other was redirecting naked urls to www urls.
This is how I did it.

Set up appfog

Setting up appfog is a piece of cake. Just dowload their ‘af’ gem and login into appfog. From there, push and update your app in the desired infrastructure.

Set up your domain

For this post, I will be using the www domain name. It doesn’t matter whether your domain starts with www or non-www(usually called a canonical domain) so just decide beforehand which type of domain do you prefer.


Unlike other hosting providers, appfog doesn’t provide a dns server. So you need to set up an A record and a CNAME record with your domain provider.

For the A record, add the domain in appfog’s console. Like this :

See the second domain? That’s mine. The third one is min too but I will explain it later on. You will be provided a default domain which is the first one in the screenshot. Add your domain and click on update.

Now see the two ip addresses next to the A record on the screenie? You need to add those as two different A records on your domain provider’s console(or whatever it is called)

Next, add the CNAME record. The C in CNAME stands for canonical btw. I bought my domain from bigrock which is pretty nifty. My settings page looks like this :

Remember to NOT add the www when adding the A record. Now when adding the CNAME record, add the url next to the CNAME record in the appfog console as your CNAME value and add the www version of your url in CNAME. One last thing. I added the third domain because I couldn’t redirect from my domain provider’s console. So I set up the non-www url and redirected all the non-www traffic to the www-domain from my app itself.

Done? Dns propogation for A and CNAME records usually take between 1-4 hours so go outside and chill out.

Now your www-yourdomain-com will be working. That’s fine but when you type yourdomain-com without the www, it won’t work. That’s because you need to add a 301(it means permanent) redirect from your .yourdomain-com to www-yourdomain-com There are a couple of ways to do this.

  • Your domain provider has a facility to redirect domains. Simply set the redirect from your domain provider’s console.

  • If you are using apache, checkout the online guides on how to add redirects in .htaccess

  • Or if you are like me and hack around in nodejs, add this snippet of code before all your other routes.


app.get('*', function(req, res, next) {
        if (req.headers.host.slice(0, 3) != 'www') {
            res.redirect('http://www.' + req.headers.host + req.url, 301);
        } else {
            next();
        }
    });

This code snippet is meant for expressjs but it can work on standard nodejs http as well. The best part about this snippet is that it will redirect all paths to the correct domain.

That’s all for now folks. Setting up domains on appfog can be a bit of a pain but I hope this post helps.

gulpjs is a new kind of taskrunner. It is like gruntjs but much better. The work of a taskrunner is to automate simple tasks like minifying files, compiling preprocessor css like less, etc.

This is how I started using gulpjs

gulpjs

As I said before, gulpjs is a taskrunner. It is based on streams the technicalities of which are beyond me but that means it is extremely fast.
But better than this, the api of gulpjs is straightforward meaning you can get up and started within minutes.

This is how my gulpfile looks like :


var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

gulp.task('compress', function() {
  gulp.src('assets/js/*.js')
    .pipe(uglify())
		.pipe(concat("all.js"))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['compress']);


Pretty simple huh? gulpjs is much easier to use and this was one of the main reasons I started using it instead of gruntjs

Getting started

First, you will need nodejs. Once installed, start npm via the command prompt and install gulpjs globally. This is because you can start calling it anywhere.


npm install -g gulp


Done? Now, add devDependencies in your package.json which should be in your project’s root. For this example, I am using gulp-uglify and gulp-concat. The required task is to minify and then concat all javascript files.
package.json :


{
	"name": "example",
	"version": "0.1.0",
	"author": "shash7",
	"devDependencies" : {
		"gulp-uglify": ">= 0.2.0",
		"gulp-concat": ">= 2.1.7"
	}
}


Now give the command ‘npm install’ inside the project root (where you package.json will be residing) After installing, make a file named gulpfile.js inside the project root.


// Dependencies
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

// The actual task. Note the pipe function
gulp.task('compress', function() {
  gulp.src('assets/js/*.js')
    .pipe(uglify())
		.pipe(concat("all.js"))
    .pipe(gulp.dest('dist'));
});

// The default task
gulp.task('default', ['compress']);


After adding the dependencies, you will need to create a task. I have named my task compress which is exactly what it does. gulpjs needs a task called default which will be executed when you run the file. Inside the default task, call your task inside an array. If you want, you can also bind a callback function.
When everything is done, simply call gulp in your project’s root


gulp


That’s it. gulpjs will now check for js files inside a folder called js and then will minify and concat them all and place them inside a folder called dist and will name the new file as all.js
That’s all for now. I hope you find gulpjs as awesome I did.

aim_solar is a counter-strike 1.6 map which is published by me after a long time. Initially, this map was supposed to be a weekend project by ended up getting delayed by two months.

For all you cs 1.6 players, check this map out. It is hosted on gamebanana.
It supports 24 players only considering how small it is and is make for small pub matches.

Modelled after popular maps like fy_poolday, solar takes the aim map type to another level by removing all the extra bits and pieces and tries to keeps the polygon level to a bare minimum.

I never knew anything about cowsay. Now check this out :

Yes, its a crazy comment generator for brackets.
Brackets.io Ftw!!!

In case you are wondering, cowsay is a brackets extension.

Quite some time ago, I made a small library which shows a progress bar showing how much length of an input field is left.
Here is the project page.

A few days ago, I released an open source js library for creating modals.
Check it out now on github.

Being a front-end dev, over time I have developed my own style of coding best practices. Here are some of them.

Javascript

Before I delve any further, let me tell you that I don’t strictly follow jslint’s guidelines. The reason is that writing perfect code(according to jslint) is useful only if I and douglas crockford were programming together.

Anyways, some sample code :


;(function() {
    var list = [];
    
    var module = {
        init : function() {
            console.log('initialized');
        }
    }
})();

Commenting sample code :


/*
 * 
 * app.js
 * 
 * dependencies :
 *     mvc.js
 * 	events.js
 * 
 * menu :
 *  defaults
 *  templates
 *  pages
 *  controller
 *  routes
 * 
 * Code conventions : 
 * 
 * Partially follow jslint
 * use double quotes for strings(only if required)
 * leave a space between () and {
 * leave 6 spaces between main sections
 * leave 3 spaces between minor sections
 * leave 1 space between two functions and misc statements
 * 
 * Lastly, emphasis on common sense rather than code conventions. Use jslint as a guide only.
 * 
 */

The last line is very important. I place common sense and code readability over conventions. Even if it means ignoring the linter.

Oh and I use jshint. Much better and less opinionted.

Css

My overall style of writing css and improved much over the years but I still have to settle down on one definitive style of writing css code.

Some sample code :


/* -------- $sidebar -------- */
.sidebar
{
    position:absolute;
	right:100%;
	top:0;
	width:96px;
	margin-right:12px;
}

.side-links
{
	display:block;
	padding:12px;
	
	text-align:center;
	font-family:'dosis';
	font-size:18px;
	line-height:24px;

	cursor:pointer;
}

.side-links:hover
{
	color:#EB4749;
}

Css commenting style :




/*
    Layout css
	
	Menu :
		$layout
		$sidebar
		$views
	
*/






/* -------- $layout -------- */
html, body
{
	width:100%;
	height:100%;
}

Note the generous amount of whitespace in the file.


Final words

Not everything is perfect.The idea of laying solid code conventions is to write better usable code which is still readable after a long time.


As time goes by, the foundation I have laid keeps getting stronger.

In case you don’t know, brackets is an open source code editor sponsored by adobe.
Its main agenda is that you can(eventually) code right in the browser but right now it works as a standalone desktop app.

I first heard of brackets a couple of months ago. It had a snappy and minimalistic feel to it which felt great. However, it wasn’t polished enough so that I could ditch dreamweaver.

Now, at the 31st version, it rocks.

Brackets wut?

So its a code editor after all, no big deal. Except it has a cool extension feature where you can download extensions for it directly in brackets. Also, did I mention it has a built in web server(brackets is actually build on nodejs-webkit project)

Here is how it looks all pimped out :

image

In case you are wondering what that thing in the side is, its that see-your-code-from-10,000-feet feature from sublime text(its an extension actually)

My extensions

These are some of the extensions I use :

brackets-bookmark

Press ctrl+f4 on a line of code to bookmark it. Press f4 to go to the next bookmark. Pretty awesome.

The only problem is that bookmarks are not persistent. Reload brackets and they are gone. Still, pretty useful for that 2000 line+ css file.

Show whitespace

Adds small dots to whitespace so you can check if any empty spaces are left around. 

WD minimap

Add an extra sidebar where you can see a zoomed out preview of your code. Great for coding big files. Sublime text users will have another reason to ditch their editors hehe.

All said, this code editor is gearing up to become an all in one solution for web programming. Granted, it won’t become the next eclipse or visual studio ide but what it does, it does with panache.