JSFiddle

  • Ko Updating an Array #1 is the latest revision

    Knockout.js 2.3.0, HTML, CSS, JavaScript

    
    self = {};
    
    self.names = ko.observableArray([
        { name : "Richard"},
        { name : "Bob" },
        { name : "Alice" }
    ]);
    
    self.update = function () {
    
        self.names([
            { name : "Dave" },
            { name : "Amy ...
  • CSS Best Practises 1: modules #5 is the latest revision

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

    <div data-test-module="">
         <h2 class="beta-header">This is a test</h2>
    
        <p>lorem ipsum blh sjsjs jskls</p>
        <p>jdkfjd jkdjd jkdj jdkdl </p>
    </div>
    
    <p>A modul
  • float and clear #2 is the latest revision

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

    <div class="alpha"></div>
    <div class="beta"></div>
    <div class="gamma"></div>
  • filter effects #2 is the latest revision

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

    <img class="foo1" src="http://www.nme.com/images/gallery/0932_145951_fionaapple_PA.jpg"/>
    
    <img class="foo2" src="http://www.nme.com/images/gallery/0932_145951_fionaapple_PA.jpg"/>
    
    <img class="foo3" src="http://www.nme.com/images/gallery/0932_145951_fionaapple_PA.jpg"/>
    
    <img class="foo4" src="http://www.nme.com/images/gallery/0932_145951_fionaapple_PA.jpg"/>
  • Removing white space between inline-block elements #1 is the latest revision

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

    <div class="container">
     <span class="nav-item">hello</span>
     <span class="nav-item">world</span>
     <span class="nav-item">of</span>
     <span class="nav-item">love</span>
    
    </div>
  • content #4 is the latest revision

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

    <h1>Content</h1>
    
    <div class="quote">It's the end of the world as we know it.</div>
  • column-count #3 is the latest revision

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

    <div id="foo">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ...</div>
  • knockout: moving elements around #3 is the latest revision

    jQuery Compat (edge), HTML, CSS, JavaScript

    
    var populate = document.querySelector("#populate");
    var depopulate = document.querySelector("#depopulate");
    
    populate.addEventListener("click", populateSlider.bind(null, "#foo"), false);
    depopulate.addEventListener ...
  • custom bindings knockout #3 is the latest revision

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

    <h1>Knockout custom bindings</h1>
  • show hide blocks #4 is the latest revision

    Animation to show and hide a list of blocks.

     var listItems = $('[data-container] li');
    
     $('[data-show]').click(function () {
         
         var list = new Iterator(listItems, true);
    
         function showListItem(li) {
             $(li).css({
                 visibility: "visible ...