JSFiddle

  • React + Bodymovin #1 is the latest revision

    React 0.14.3, HTML, CSS, Babel + JSX

    const svgContainer = document.getElementById('svgContainer')
    
    bodymovin.loadAnimation({
      container: svgContainer,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: JSON.parse(animationData)
    })
  • Faster requests

    Waiting for 200 is faster than waiting for load.

    function timer () {
      const start = Date.now()
      
      return function () {
        return Date.now() - start
      }
    }
    
    const t = timer()
    const req = new XMLHttpRequest()
    req ...
  • How `this` works #1 is the latest revision

    No-Library (pure JS), HTML, CSS, Babel + JSX

    const names = ['Ollie', 'James', 'Giles', 'David', 'Ernie']
    
    // Using .call(a, b, c, ...) will execute the function and set `this` to ...
  • For comprehension #12 is the latest revision

    No-Library (pure JS), HTML, CSS, Babel + JSX

    /**
     * A for comprehension kind of like Clojure's.
     * https://clojuredocs.org/clojure.core/for
     */
    function forc (exprs, fn, args = {}) {
      if ...
  • Sliced text effect #2 is the latest revision

    For my post. http://oli.me.uk/2012/02/27/sliced-text-effect/

    <div class='slice'>
        <div class='line'>
            <div class='left'>
                <p>Laceration</p>
            </div>
        </div>
    
        <div class='right'>
            <p>Laceration</p>
        </div>
    </div>
  • EventEmitter bubbling

    For @thanpolas

    (function () {
        // This method involves manually wiring events together.
        function NoisyEventEmitter() {}
        
        NoisyEventEmitter.prototype = Object.create(EventEmitter.prototype);
        
        NoisyEventEmitter.prototype.emitEvent = function ...
  • Angular playground #685 is the latest revision

    Me learning about angular

    angular.module('test', [])
        .controller('thing', function () {
        })
        .directive('textBox', function () {
            return {
                template: '<input type="text" ng-model="">
            }
        })
        .directive('searchBox', function () {
            return {
                template: '<div text-box="search"></div>'
            };
        });
  • Focus fun

    Just checking how focus works natively

    var foo = document.querySelector('.foo');
    var bar = document.querySelector('.bar');
    
    document.addEventListener('keydown', function (e) {
        if (e.keyCode === 38) {
            foo ...
  • Accessing the DOM

    With renaming of IDs dynamically. For yet another post.

    function hyphensToCamelCase(hyphenated) {
    	return hyphenated.replace(/-(\w)/ig, function (match, hump) {
    		return hump.toUpperCase();
    	});
    }
    
    function getElements(ids) {
    	var i;
    	var ...
  • Refining classless JavaScript

    A full example.

    var base = {
    	create: function (self) {
    		return self || {};
    	},
    	destroy: function (self) {
    		var key;
    
    		for (key in self) {
    			if (self.hasOwnProperty(key ...