Anatolii HZ-labs

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

Create new instance of ImageEnhancer
Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
- We set the width & height HTML attributes of the image to the required size
- We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
- We then set a class of image-replace onto each newly created transparent image
We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe

Backend Development

node.js
- Installation paths: use one of these techniques to install node and npm without having to sudo.
- Node.js HOWTO: Install Node+NPM as user (not root) under Unix OSes
- Felix's Node.js Guide
- Creating a REST API using Node.js, Express, and MongoDB
- Node Cellar Sample Application with Backbone.js, Twitter Bootstrap, Node.js, Express, and MongoDB
- JavaScript Event Loop
Node.js for PHP programmers

	/// Stripe builder
	/// @author Hugo Giraudel
	/// @param {Direction} $direction - Gradient direction
	/// @param {List} $colors - List of colors
	/// @output `background-image` if several colors, `background-color` if only one
	@mixin stripes($direction, $colors) {
	$length: length($colors);

	@if $length > 1 {
	$stripes: ();

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	html {
	background:#FFF;
	}

	/* Pounding heart animation */

	@keyframes pound {
	to { transform: scale(1.4); }
	}

	.heart {
	display: inline-block;
	font-size: 150px;
	color: #e00;

	/**
	* The first commented line is your dabblet’s title
	*/


	.t1 {
	width:100px;
	height:100px;
	background: #444;
	color: #fff;

	/* Pounding heart animation */

	@keyframes pound {
	to { transform: rotateY(180deg); }
	}

	.heart {
	display: inline-block;
	font-size: 150px;
	color: #e00;

	/*
	Ratings Stars
	(with as little code as possible)
	*/
	.rating {
	unicode-bidi: bidi-override;
	direction: rtl;
	text-align: center;
	font-size: 45px;
	}

	console.log($LINE$);
	// LINE = lineNumber()