JSFiddle

  • Proxy experiment

    No-Library (pure JS), HTML, CSS, JavaScript

    var target = {
        name : "Richard"
    };
    
    var target = {
    
    
    
    };
    
    var proxy = new Proxy(target, handler);
  • dom tree traversal with directives #9 is the latest revision

    A simple implementation of a declarative approach to data-binding somewhat in the style of Angular.js

    function traverseDOM(node, strategy, scope) {
        function fn(node, scope) {
            scope = strategy(node, scope);
            var children = node.children;
            for(var i ...
  • Moving dom elements around #13 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var filter = Array.prototype.filter;
    
    var foo = document.querySelector('#foo');
    
    var template = filter.call(foo.childNodes, function( child ){
        return child ...
  • knockout example with datastore

    Knockout.js 3.0.0, HTML, CSS, JavaScript

    /*
        What should be an observable? 
        I think a rule of thumb is to identify the 
        'unit of change'. At times ...
  • Promises promises #17 is the latest revision

    Just for fun, my own promises implementation.

    function Promise(init) {
        this.pending = true;
        this.fulfilled = false;
        this.rejected = false;
        this.value = null;
        this.reason = null;
        
        function fulfil ...
  • css naming conventions

    No-Library (pure JS), HTML, SCSS, JavaScript

    <div class="broken-module">
         <h1 class="header">broken module</h1>
        <p>
            This is broken because the header is italicised even though
            we do not declare it to be so ...</p></div>
  • File experiment

    No-Library (pure JS), HTML, CSS, JavaScript

    (function (window, undefined) {
    
        var fileInput = document.querySelector("#file-selector");
    
        function fileInputChange(event) {
    
            var files = event.target.files;
    
            for (var i = 0 ...
  • Revealing module pattern

    Underscore 1.4.4, HTML, CSS, JavaScript

    function NSI(name, obj) {
        window[name] = obj;
    }
    NSI("processText", function (text) {
        console.log("processing text: %s, thanks", text);
    });
    NSI("doAlert ...
  • calculate factors of a number #15 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    function getFactors(subject) {
        
        var factors = [];
        for(var i=1; i < subject;i++) {
        
            if(subject % i == 0) {
            
                factors.push(i);
            }
        }
        return ...
  • KnockoutVisitor #3 is the latest revision

    Knockout.js 3.0.0, HTML, CSS, JavaScript

    function createModel() {
        var self = {};
        
        self.foo = function () {
            console.log("this is foo");
        }
    
    }