Dan Couper DanCouper

The death of the utility belt

Some quick notes of my two weeks living by the unix philosophy.

Things like underscore, jquery, backbone, bal-util, etc are on the way out
They were awesome at their time, because until recently, packaging and distributing javascript code was hard
- pre-compile, pre-package, distribute as zip, manual install
These days, we have npm, component, bower which can automate all distribution, packaging, installation, and concatination of different projects regardless of size
Things like node's require (browserify for client side), make it finally easy for modules to include each other
- Before we had to battle with global variables and lengthy manual installs to get two libraries working together, don't forget version conflicts

API workthough

Open a browser

# start an instance of firefox with selenium-webdriver
driver = Selenium::WebDriver.for :firefox
# :chrome -> chrome
# :ie     -> iexplore

Go to a specified URL

Avoid jQuery When Possible

jQuery does good jobs when you're dealing with browser compatibility. But we're living in an age that fewer and fewer people use old-school browsers such as IE <= 7. With the growing of DOM APIs in modern browsers (including IE 8), most functions that jQuery provides are built-in natively.

When targeting only modern browsers, it is better to avoid using jQuery's backward-compatible features. Instead, use the native DOM API, which will make your web page run much faster than you might think (native C / C++ implementaion v.s. JavaScript).

If you're making a web page for iOS (e.g. UIWebView), you should use native DOM APIs because mobile Safari is not that old-school web browser; it supports lots of native DOM APIs.

If you're making a Chrome Extension, you should always use native APIs, not only because Chrome has almost the latest DOM APIs available, but this can also avoid performance issue and unnecessary memory occupation (each jQuery-driven extension needs a separate

	/*!
	*
	* Automatic Responsive screenshots creation with PhantomJS and CasperJS.
	* Adapted from the Responsive Design Workflow book by Stephen Hay (http://responsivedesignworkflow.com/).
	*
	* Usage instructions:
	- Install PhantomJS (http://phantomjs.org/) and CasperJS (http://casperjs.org/)
	- Save this script as `screenshots-multipages.js` in a folder somewhere in your filesystem
	- In the same folder, create a subfolder called `screenshots` (defined in `screenshotFolder` variable)
	- Define the URLs you want to process in `baseUrl` (string) and `links` (array) variables

	# A simple Makefile alternative to using Grunt for your static asset compilation
	#
	## Usage
	#
	# $ npm install
	#
	# And then you can run various commands:
	#
	# $ make # compile files that need compiling
	# $ make clean all # remove target files and recompile from scratch

	defmodule XmlNode do
	require Record
	Record.defrecord :xmlAttribute, Record.extract(:xmlAttribute, from_lib: "xmerl/include/xmerl.hrl")
	Record.defrecord :xmlText, Record.extract(:xmlText, from_lib: "xmerl/include/xmerl.hrl")

	def from_string(xml_string, options \\ [quiet: true]) do
	{doc, []} =
	xml_string
	\|> :binary.bin_to_list
	\|> :xmerl_scan.string(options)

	/**
	* Converts an RGB color value to HSL. Conversion formula
	* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
	* Assumes r, g, and b are contained in the set [0, 255] and
	* returns h, s, and l in the set [0, 1].
	*
	* @param Number r The red color value
	* @param Number g The green color value
	* @param Number b The blue color value
	* @return Array The HSL representation

	// OOP
	console.log( 'OHAI'.blink() );

	// Call invocation
	console.log( String.prototype.blink.call('OHAI') );

	// $ always makes things look awesome.
	var $ = Function.prototype.call;

	// Very explicit call invocation

	<!-- Prevent FOUC (flash of unstyled content) - http://johnpolacek.com/2012/10/03/help-prevent-fouc/ -->
	<style type="text/css">
	.no-fouc {display: none;}
	</style>

	<script type="text/javascript">
	document.documentElement.className = 'no-fouc';
	// add to document ready: $('.no-fouc').removeClass('no-fouc');
	</script>