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.