Skip to content

Instantly share code, notes, and snippets.

View hakimel's full-sized avatar

Hakim El Hattab hakimel

12.3k followers · 28 following
View GitHub Profile
@hakimel
hakimel / minimal-reveal-js-example.html
Created May 6, 2014 18:45
Minimal reveal.js example
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
</head>
<body>
@hakimel
hakimel / gist:9e233239b35cf5247a4e
Created May 6, 2014 18:41
reveal.js contained in a header
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
</head>
<body>
@hakimel
hakimel / gist:9804003
Created March 27, 2014 09:50
Semi-transparent background for headers
// This is semi-transparent black
h1, h2, h3 {
background: rgba( 0, 0, 0, 0.4 );
padding: 0.1em;
}
// This is semi-transparent white
h1, h2, h3 {
background: rgba( 255, 255, 255, 0.4 );
padding: 0.1em;
@hakimel
hakimel / gist:7534649
Created November 18, 2013 20:22
Simple script authored in the console to normalize linear path data. Makes it so that the path begins at 0,0 and expands to 100x100.
var d = '350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161'.split(' ')
for( var i = 0; i < d.length; i++ ) {
d[i] = d[i].split(',')
}
for( var i = 0; i < d.length; i++ ) {
d[i][0] = parseInt(d[i][0])
d[i][1] = parseInt(d[i][1])
}
@hakimel
hakimel / reverse-events.js
Last active December 27, 2015 06:39
Sometimes I wish events worked like this. Normal event listeners: "when X happens do Y" Reversed events listeners: "do Y when X happens".
Function.prototype.on = function( scope, eventName, useCapture ) {
scope.addEventListener( eventName, this, useCapture );
};
Function.prototype.off = function( scope, eventName, useCapture ) {
scope.removeEventListener( eventName, this, useCapture );
};
// Sample listener
function doSomething() { console.log( 'Doing it.' ); }
@hakimel
hakimel / gist:6800908
Created October 2, 2013 21:39
Hacky way of zooming out iframes in reveal.js presentations.
.reveal .slides section {
padding: 10px;
}
.reveal .slides section iframe {
-webkit-transform: scale(0.5) translate(-50%, -50%);
-moz-transform: scale(0.5) translate(-50%, -50%);
transform: scale(0.5) translate(-50%, -50%);
min-width: 200%;
min-height: 200%;
@hakimel
hakimel / gist:6164200
Created August 6, 2013 12:52
Slid.es font include font via CSS editor
@font-face {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 700;
src: url('cabinsketch-regular.eot');
src: url('cabinsketch-regular.eot?#iefix') format('embedded-opentype'),
url('cabinsketch-regular.woff') format('woff'),
url('cabinsketch-regular.ttf') format('truetype');
}