fcalderan

/* 
 * Fabrizio Calderan, twitter @fcalderan, 2010.11.02
 * I had an idea: could Inception movie be explained by a few javascript closures 
 * and variable resolution scope (just for fun)?
 * 
 * Activate javascript console =)
 */

<script>
console.group("inception movie");

fcalderan

# Description: 	
# Typical Jamiroquai video explained by a context-free grammar (just for fun)

JV          ::= <epsilon> | <Someone> <Does> <Something> in a <Place> | <Exceptions> ;
Someone     ::= He | the invisible man ;
SomeoneElse ::= Him | another invisible man ;
Does        ::= (runs away with | follows | drives) a ;
Something   ::= (porsche | ferrari | moto | helicopter) followed by <SomeoneElse> <Consequence> ;
Consequence ::= wasting fuel | polluting environment | making roads insecure ;
Place       ::= dull desertic land | desert | bright floor;

fcalderan

/* with this snippet you can create a raw silhouette of an image, it works transforming 
non-white pixels (with a small tolerance) into black pixels */

<img id="canvassource" src="your-image-300x300.jpg" />
<canvas id="area" width="300" height="300"></canvas>

<script>
    window.onload = function() {
        var canvas = document.getElementById("area");
        var context = canvas.getContext("2d");

fcalderan

/**
 * For a current project I need to wait to execute a code until some images have been loaded.
 * Beside, I also need to execute a callback (in my specific code I want to show the image 
 * with a fade-in effect) every time a single image has been loaded.
 *
 * So basically I used two deferred objects: the nested one which is resolved for a single 
 * image successfull load event (or when image has been discarded) and the outside one, 
 * which is resolved when all deferred objects on single images have been resolved or rejected.
 *
 * This snippet also takes care all frequent issues when trying to load an image (excessive 

fcalderan

<ul class="ibw">
  <li>inline block</li>
  <li>inline block</li>
  <li>inline block</li>
</ul>

<section class="ibw">
   <article class="ib">...</article>
   <aside class="ib">...</aside>
</section>

fcalderan

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),

fcalderan

@mixin box-sizing ($box) {
    -webkit-box-sizing: $box;
       -moz-box-sizing: $box;
            box-sizing: $box;
}

@mixin border-radius ($val) {
	-webkit-border-radius: $val;
	   -moz-border-radius: $val;
	        border-radius: $val;

fcalderan

#!/bin/sh

CMD="$1"
RATE="$2"
DELAY="$3"

if [ "$RATE" = "" ] ; then
    RATE=500
fi
if [ "$DELAY" = "" ] ; then

fcalderan

# Tested on Ruby v.1.9.3 - Author: Fabrizio Calderan, 3.14.2013
#
# Install these gems with
#    $> sudo gem install fastimage nokogiri colorize
#
# Then copy this source into a file named “rakefile” and run with
#    $> rake
#
require "fastimage"
require "nokogiri"

fcalderan

Slideshow with CSS3 Animations

A simple proof-of-concept: a slideshow animation using CSS3 only

See the demo by Fabrizio Calderan.

License.