Skip to content

Instantly share code, notes, and snippets.

View ayozebarrera's full-sized avatar
⚛️
Reacting

Ayoze Barrera ayozebarrera

⚛️
Reacting
View GitHub Profile
@ayozebarrera
ayozebarrera / no-scrollup
Last active August 29, 2015 13:56
Avoid scroll-up when click in a link with href="#"
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui.js"></script>
<script>
YUI().use('node-base', 'node-event-delegate', function (Y) {
Y.one('body').delegate('click', function (e) {
e.preventDefault();
}, 'a[href="#"]');
});
</script>
@ayozebarrera
ayozebarrera / meteor-call-template
Created March 25, 2014 13:31
Call a template and returns HTML in Meteor
var templateName = 'name';
var fragment = Meteor.render( function() {
return Template[ templateName ]();
});
@ayozebarrera
ayozebarrera / meteor-blaze-call-template
Last active August 29, 2015 13:57
Call and insert a template with Meteor Blaze
var fragment = UI.render(Template.templateName);
UI.insert(fragment, $('element').get(0)); //$('element').get(0) returns raw DOM node
@ayozebarrera
ayozebarrera / Animationend
Last active August 29, 2015 13:58
Animation callback
//Callback when animation is done (transition instead animation for transitions)
$subnav.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
//Code to run after animation
//unbind event for the next time
$(this).off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');
});
@ayozebarrera
ayozebarrera / list.css
Created April 16, 2014 08:56
List vertical align
/*This works because two inline-block elements will vertically align with each other.
The :before rule creates an inline-block element that is the same height as its parent,
which the variable height <span> can vertically align with.*/
ul li span {
display: inline-block;
vertical-align: middle;
}
ul li:before{
@ayozebarrera
ayozebarrera / Gallery controller with translateX
Created July 9, 2014 15:46
Simple media gallery using transform translateX
@ayozebarrera
ayozebarrera / fitImages.css
Last active August 29, 2015 14:03
A function that fit images to his parent
body img{
width: 100%; /* default */
}
img.fitWidth{
height: 100% !important;
width: auto !important;
}
@ayozebarrera
ayozebarrera / css_resources.md
Created July 10, 2014 14:05 — forked from jookyboi/css_resources.md
CSS libraries and guides to bring some order to the chaos.

Libraries

  • 960 Grid System - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
  • Compass - Open source CSS Authoring Framework.
  • Bootstrap - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
  • Font Awesome - The iconic font designed for Bootstrap.
  • Zurb Foundation - Framework for writing responsive web sites.
  • SASS - CSS extension language which allows variables, mixins and rules nesting.
  • Skeleton - Boilerplate for responsive, mobile-friendly development.

Guides

@ayozebarrera
ayozebarrera / javascript_resources.md
Created July 10, 2014 14:05 — forked from jookyboi/javascript_resources.md
Here are a set of libraries, plugins and guides which may be useful to your Javascript coding.

Libraries

  • jQuery - The de-facto library for the modern age. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
  • Backbone - Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  • AngularJS - Conventions based MVC framework for HTML5 apps.
  • Underscore - Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
  • lawnchair - Key/value store adapter for indexdb, localStorage
@ayozebarrera
ayozebarrera / ios7.js
Created August 8, 2014 12:52
Phonegap iOS 7 issue
function onDeviceReady() {
if (parseFloat(window.device.version) === 7.0) {
document.body.style.marginTop = "20px";
}
}
document.addEventListener('deviceready', onDeviceReady, false);