List of all the HTML/Javascript/CSS online app

  • http://jsfiddle.net/
  • http://jsbin.com/
  • http://jsdo.it/
  • http://plunker.no.de/
  • http://dabblet.com/
  • https://thimble.webmaker.org
  • http://fiddlesalad.com/
  • http://www.webdevout.net/
  • http://codepen.io/

I think that is it.

Javascript: A better alternative to setInterval

setInterval can be bad js because of its nature to continuously get called rather the methods inside is lagging or not.

setInterval(function() {
	doStuff..
}, 100)

A better approach is to use a self executing anonymous function.

(function() {
	
	doStuff..

	setTimeout(arguments.callee, 100)
})();

The only problem is that arguments.callee is deprecated so a work around is to name the anonymous function.

(function blah() {
	
	doStuff..

	setTimeout(blah, 100)
})();

Javascript: The most popular JS pattern

The most popular JS pattern actually comes from jQuery source.

(function(window, document, undefined) {
	doStuff..
})(window, document);

Auto refresh browser during web development

The more I am doing web development, one thing I do more then anything else is to update my html/css/javascript code, save, switch to a browser and refresh.

This become tiring so I started looking for the best app that watches a folder for changes and updates the browser automatically.

The Best solution out there currently is CodeKit, which not only solves my basic issue but also does a lot more. It’s main purpose is to support preprocessing. Very handy when you start using more advanced features like sass, less or jade.

The only draw back to code kit is that it requires Mac Lion OS. This is a problem since my work computer has snow leopard. If you are in this situation then there is a second recommendation

Live reload does pretty much everything Code Kit does but runs on snow leopard. From reading both features, CodeKit has better performance since it utilizes the new features only found in Lion.

CodeKit will run you $20 while Live reload cost $10.

Javascript: OOP in javascript using Objects and prototypes

HTML5 PoweredJavascript does not support real oop and classes but you can fake it and get the similar effects using Objects and prototypes.

First, to create a “Car” class with some properties, make a function Car and set internal properties using “this” reference:

function Car(s, w) {
  this.speed = s;
  this.weight = w;
}

To add methods to your Car class, use the prototype to that class and assign then anonymous functions:

Car.prototype.go() {
 console.log("car speed is : " + this.speed);
}

Car.prototype.stop() {
  console.log("car weight is : " + this.weight);
}

Here is an example of your Car class being used:

var car = new Car(65, 2000);
car.go();
car.stop();

If you are coming from actionscript or any other modern programming language, you are probably laughing, but this is how it goes and it is the future of the web.

Javascript: Best practice to linking external JS library

The best practice to link your html to popular Javascript libraries like jQuery, Dojo, mooTools is to use content delivery network.

Google CDN is a popular choice found at http://code.google.com/apis/libraries/devguide.html.  Just choose the Library you need and grab the link.

To add the library to your page replace what you normally do:

<script src="jquery-1.6.1.min.js"></script>

with:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

It would be better to leave out the “https:” so that your page will use either “https:” or “http” depending on the type of request the page is making.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

The benefits of using CDN over hosting your own is that the browser will download the file in parallel with other js files if they are hosted on a different url. Also the file will be cached if the user has downloaded that file from visiting a different website.

There are other CDNs available including microsoft, but with google, you can use

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

just 1.6 in the path version name and you will get the latest in the 1.6x series. Or better yet, just “1” and it will always grab the latest before “2.x.x”