A simple proof-of-concept: a slideshow animation using CSS3 only
See the demo by Fabrizio Calderan.
section { | |
width: 35%; | |
} | |
section div { | |
/* Aspect ratio: 16:9 */ | |
height: 0; | |
width: 100%; | |
position: relative; | |
padding-bottom: 56.25%; | |
} |
# Build ffmpeg on MacOs | |
# https://trac.ffmpeg.org/wiki/CompilationGuide/MacOSX | |
> brew install ffmpeg --with-fdk-aac --with-ffplay --with-freetype --with-libass --with-libquvi --with-libvorbis --with-libvpx --with-opus --with-x265 | |
# Conversion to WEBM format: | |
# http://trac.ffmpeg.org/wiki/Encode/VP8 | |
> ffmpeg -i input-file.mp4 -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis output-file.webm | |
/* JSHint validated - copy into a javascript console and look at the output */ | |
(function(title) { | |
"use strict"; | |
var lyrics = title.toUpperCase() + "\n---\n"; | |
var even, verse; | |
var sayAnimal = function(i) { | |
even = !even |
# A Liquid tag for random number generation | |
# Usage: {% random min:max %} where min and max are integers and min < max | |
module Jekyll | |
class Random < Liquid::Tag | |
def initialize(tag_name, range, tokens) | |
super | |
limits = range.split(":") | |
@min = limits[0].to_i |
<?php | |
function roundNum($n) { return round(10 * $n)/10; } | |
// Insert your keys/tokens | |
$consumerKey = '<your-key>'; | |
$consumerSecret = '<your-key>'; | |
$oAuthToken = '<your-key>'; | |
$oAuthSecret = '<your-key>'; |
A simple proof-of-concept: a slideshow animation using CSS3 only
See the demo by Fabrizio Calderan.
# 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" |
#!/bin/sh | |
CMD="$1" | |
RATE="$2" | |
DELAY="$3" | |
if [ "$RATE" = "" ] ; then | |
RATE=500 | |
fi | |
if [ "$DELAY" = "" ] ; then |
@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; |
@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), |