raglan-road

// jQuery support for CSS3's animationend, which fires when a keyframe animation completes.
// This covers all of the combinations of vendor prefixes for the event, so it will work cross-browser.
// transitionend would work the same way.
$('.some-el-that-you-are-animating').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
    // this => element that just animated
});

raglan-road

$('.some-els').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
        // Do something!
        $(this).removeClass('animation-class');
    })
    .addClass('animation-class');

// One works, too
$('.some-els').one('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
        // Do something once!
        console.log('this would show once');

raglan-road

// Why plugins? Think about using a plugin when you need a piece of reusable functionality that will be applied to 
// an element - and potentially many elements - in a given UI.

// Resource: http://docs.jquery.com/Plugins/Authoring

// The basic plugin boilerplate
;(function($){
	$.fn.plugin = function(){
		// If your plugin needs to be chainable, return this!
		return this;	// this -> reference to calling jQuery Object e.g. $('.foo').plugin() => $('.foo')

raglan-road

    // Poll until an element is "available" in the DOM, returning a promise that resolves when the element is in the DOM and scriptable.
    $.available = function (id) {
        var _poll = function(id, dfd) {
            if(document.getElementById(id)) {
                dfd.resolve(document.getElementById(id));
            }
            else {
                setTimeout(function() {
                    _poll(id, dfd);
                }, 100);

raglan-road

initMap = function(){
    var self = this;
    return $.Deferred(function(dfd){
        if(self.mapLoaded){
            // Map is loaded y'all.
            dfd.resolve();
        }
        else{
            $.ajax( // load your thing)
            .done(function(){

raglan-road

/* the css here */
@include keyframes(fadeIn) {
  from {
    height: 0;
    opacity: 0; }

  to {
    height: auto;  /* Not sure how well this will work */
    opacity: 1; } 
}

raglan-road

var jeremylew = window.jeremylew = (typeof window.jeremylew !== "undefined") ? window.jeremlew : {},
foo = jeremylew.foo = (typeof jeremylew.foo !== "undefined") ? jeremylew.foo : {},
bar = jeremylew.foo.bar = (typeof jeremylew.foo.bar !== "undefined") ? jeremylew.foo.bar : {};

(bar.baz = function(){ }());

raglan-road

var used = [];
var people = {
  tony: [],
  dan: [],
  adam: [],
  jamal: [],
  kevin: [],
  dave: []
}
var toassign = ['tony', 'dan', 'adam', 'jamal', 'kevin', 'dave'];

raglan-road

// Some file, like layout-constants.js
export default BASE_PADDING = '1';
export default BASE_UNIT = 'rem';

// Another file, like blahcomponent.jsx
import * as CSS from 'layout-constants';
const Componet = css(`
    margin: 1.5*${BASE_PADDING}${BASE_UNIT},
    padding: ${BASE_PADDING}${BASE_UNIT}
`);

raglan-road

Keybase proof

I hereby claim:

• I am raglan-road on github.
• I am ajm_jukebox (https://keybase.io/ajm_jukebox) on keybase.
• I have a public key ASBcFB3osOx0zyIq70sMWT32We1qGQ1B4Y2BIHnVjAdBowo

To claim this, I am signing this object: