andineck/cheerio.js

## cheerio.js
var cheerio = require('cheerio');
var multiline = require('multiline');
var domify = require('domify');

var tmpl = multiline(function() {/*

<body>
    <header>
        <hgroup>
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
            <li><a href="#">Menu Option 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.  This is <mark>highlighted</mark>.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  These articles could be blog posts, etc.
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>
    </aside>
    <footer>Footer - Copyright 2011</footer>
</body>

*/});

var C = window.C = cheerio.load(tmpl);
var html = C('ul').toString();
document.body.appendChild(domify(html));

## matrix.js
// source code taken from: http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript

// require dependencies
var multiline = require('multiline');
var domify = require('domify');
var insertCss = require('insert-css');

// insert html
var tmpl = multiline(function() {/*
<canvas id="c"></canvas>
*/});
document.body.appendChild(domify(tmpl));

// insert css
var css = multiline(function() {/*
* {margin: 0; padding: 0;}
body {background: black;}
canvas {display: block;}
*/});
insertCss(css);


// javascript matrix magic
var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

//chinese characters - taken from the unicode charset
var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
//converting the string into an array of single characters
chinese = chinese.split("");

var font_size = 10;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
	drops[x] = 1;

//drawing the characters
function draw()
{
	//Black BG for the canvas
	//translucent BG to show trail
	ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
	ctx.fillRect(0, 0, c.width, c.height);

	ctx.fillStyle = "#0F0"; //green text
	ctx.font = font_size + "px arial";
	//looping over drops
	for(var i = 0; i < drops.length; i++)
	{
		//a random chinese character to print
		var text = chinese[Math.floor(Math.random()*chinese.length)];
		//x = i*font_size, y = value of drops[i]*font_size
		ctx.fillText(text, i*font_size, drops[i]*font_size);

		//sending the drop back to the top randomly after it has crossed the screen
		//adding a randomness to the reset to make the drops scattered on the Y axis
		if(drops[i]*font_size > c.height && Math.random() > 0.975)
			drops[i] = 0;

		//incrementing Y coordinate
		drops[i]++;
	}
}

setInterval(draw, 33);
	var cheerio = require('cheerio');
	var multiline = require('multiline');
	var domify = require('domify');

	var tmpl = multiline(function() {/*

	<body>
	<header>
	<hgroup>
	<h1>Header in h1</h1>
	<h2>Subheader in h2</h2>
	</hgroup>
	</header>
	<nav>
	<ul>
	<li><a href="#">Menu Option 1</a></li>
	<li><a href="#">Menu Option 2</a></li>
	<li><a href="#">Menu Option 3</a></li>
	</ul>
	</nav>
	<section>
	<article>
	<header>
	<h1>Article #1</h1>
	</header>
	<section>
	This is the first article. This is <mark>highlighted</mark>.
	</section>
	</article>
	<article>
	<header>
	<h1>Article #2</h1>
	</header>
	<section>
	This is the second article. These articles could be blog posts, etc.
	</section>
	</article>
	</section>
	<aside>
	<section>
	<h1>Links</h1>
	<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	</ul>
	</section>
	</aside>
	<footer>Footer - Copyright 2011</footer>
	</body>

	*/});

	var C = window.C = cheerio.load(tmpl);
	var html = C('ul').toString();
	document.body.appendChild(domify(html));
	// source code taken from: http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript

	// require dependencies
	var multiline = require('multiline');
	var domify = require('domify');
	var insertCss = require('insert-css');

	// insert html
	var tmpl = multiline(function() {/*
	<canvas id="c"></canvas>
	*/});
	document.body.appendChild(domify(tmpl));

	// insert css
	var css = multiline(function() {/*
	* {margin: 0; padding: 0;}
	body {background: black;}
	canvas {display: block;}
	*/});
	insertCss(css);



	// javascript matrix magic
	var c = document.getElementById("c");
	var ctx = c.getContext("2d");

	//making the canvas full screen
	c.height = window.innerHeight;
	c.width = window.innerWidth;

	//chinese characters - taken from the unicode charset
	var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
	//converting the string into an array of single characters
	chinese = chinese.split("");

	var font_size = 10;
	var columns = c.width/font_size; //number of columns for the rain
	//an array of drops - one per column
	var drops = [];
	//x below is the x coordinate
	//1 = y co-ordinate of the drop(same for every drop initially)
	for(var x = 0; x < columns; x++)
	drops[x] = 1;

	//drawing the characters
	function draw()
	{
	//Black BG for the canvas
	//translucent BG to show trail
	ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
	ctx.fillRect(0, 0, c.width, c.height);

	ctx.fillStyle = "#0F0"; //green text
	ctx.font = font_size + "px arial";
	//looping over drops
	for(var i = 0; i < drops.length; i++)
	{
	//a random chinese character to print
	var text = chinese[Math.floor(Math.random()*chinese.length)];
	//x = ifont_size, y = value of drops[i]font_size
	ctx.fillText(text, ifont_size, drops[i]font_size);

	//sending the drop back to the top randomly after it has crossed the screen
	//adding a randomness to the reset to make the drops scattered on the Y axis
	if(drops[i]*font_size > c.height && Math.random() > 0.975)
	drops[i] = 0;

	//incrementing Y coordinate
	drops[i]++;
	}
	}

	setInterval(draw, 33);