Skip to content

Instantly share code, notes, and snippets.

View pgarciacamou's full-sized avatar
:octocat:

Pablo Garcia pgarciacamou

:octocat:
26 followers · 21 following
View GitHub Profile
@pgarciacamou
pgarciacamou / HEY-YOU.md
Last active August 29, 2015 14:06 — forked from cowboy/HEY-YOU.md
@pgarciacamou
pgarciacamou / elem.js
Created February 18, 2015 19:22
Mini jQuery esque selector.
function elem(selector){ return document.querySelectorAll(selector); }
Object.defineProperties(NodeList.prototype, {
'each': {
value: function(fn){
var self = this;
Array.prototype.slice.call(this, 0).forEach(function (){
fn.apply(arguments[0], arguments);
});
return self;
}
@pgarciacamou
pgarciacamou / transition.js
Last active August 29, 2015 14:15
Transition detector constructor. Detects when an element had a transition and executes a callback when it ends.
var Transition = (function (){
var transitionEvent = (function whichTransitionEvent(){
var t, el = document.createElement("fakeelement")
,transitions = {
"WebkitTransition": "webkitTransitionEnd",
"MozTransition": "transitionend",
"OTransition": "oTransitionEnd",
"transition": "transitionend"
};
@pgarciacamou
pgarciacamou / animation.js
Created February 18, 2015 19:26
Animation Detector. Watches for the end of and animation to execute a callback and on start you can add the proper classes to start the animation.
var Animation = (function (){
var animationEvent = (function whichAnimationEvent(){
var t, el = document.createElement("fakeelement")
,animation = null
,animations = {
"WebkitAnimation": "webkitAnimationEnd",
"MozAnimation": "animationend",
"OAnimation": "oAnimationEnd",
"animation": "animationend"
};
@pgarciacamou
pgarciacamou / keyframe.js
Created February 18, 2015 19:27
Allows to create a set of keyframes with javascript and inject it to a stylesheet.
var Keyframe = (function (){
var keyframePrefix = (function getKeyframePrefix(){
var t, el = document.createElement("fakeelement")
,animations = {
"animation": "",
"OAnimation": "-o-",
"msAnimation": "-ms-",
"MozAnimation": "-moz-",
"WebkitAnimation": "-webkit-"
};
@pgarciacamou
pgarciacamou / css.js
Created February 18, 2015 19:28
CSSRule is a constructor that allows to create classes on the run, it detects the prefix needed and you can use it by sending a callback function instead of a string to the add method.
var CSSRule = (function (){
var prefix = (function getPropertiesPrefix(){
var t, el = document.createElement("fakeelement")
,animations = {
"animation": "",
"OAnimation": "-o-",
"msAnimation": "-ms-",
"MozAnimation": "-moz-",
"WebkitAnimation": "-webkit-"
};
@pgarciacamou
pgarciacamou / on.js
Last active August 29, 2015 14:15
Adds events in a backwards compatible way (legacy versions of IE).
(function(){
Object.defineProperties(document, {
"on": {
value: function(evName, callback, useCapture){
return addEvent.call(this, evName, callback, useCapture);
}
}
});
Object.defineProperties(window, {
"on": {
@pgarciacamou
pgarciacamou / images.html
Created February 23, 2015 00:50
This piece of code will use the CSS3 column-count property to display images in a -Pinterest-esque way.
<!DOCTYPE html>
<html>
<head>
<style>
.images {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
.images img { width: 100%; }
@pgarciacamou
pgarciacamou / default.js
Created April 8, 2015 23:55
Default properties without using external libraries using prototype inheritance
function MyConstructor(options){
options = options || {};
// Default properties:
options.__proto__ = {
threshold: 3,
quality: 1
etc: "whatever"
};
// Use case:
@pgarciacamou
pgarciacamou / binary-search-recursive.js
Last active August 29, 2015 14:19
JavaScript Algorithms
// Recursive Binary Search
// Array must be sorted in ascending order
Array.prototype.binarySearch = function(num, from, to) {
to = to || this.length-1;
from = from || 0;
if(!num || from > to) return null;
var index = Math.floor((to-from) / 2) + from;
if(num < this[index]) return this.binarySearch(num, from, index-1);