JSFiddle

  • Flexbox no2: justified content #2 is the latest revision

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

    <div class="flex-container">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
    </div>
  • Flex box no1: centering

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

    <div class="parent">
        
        <div class="child"></div>
    </div>
  • Proxy Array part3 #2 is the latest revision

    Attempts to fix

    var target = ['hello', 'world'];
    
    var handler = {
        set : function (target, property, value, receiver) {
                console.log("set", property, value);
                target[property] = value ...
  • Proxy arrays part2 #1 is the latest revision

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

    
    /*
        Simple objects appear to be well behaved, however I have encountered things which seem a bit weird
        when dealing with ...
  • Proxy Arrays #3 is the latest revision

    The Proxy object works in some strange ways with Arrays

    var data = ['hello', 'world'];
    var handler = {
        set : function () {
            console.log("set");
        }
    };
    var proxy = new Proxy(data, handler);
    
    var keys = Object ...
  • view model creator #2 is the latest revision

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

    var model = {
        name : "Rich",
        
        details : {
        
            town : "London"
        }
    };
    
    ro.createViewModel(model.details, {
        //  underscored methods will not be added to view model ...
  • 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 ...