JSFiddle

  • Iterate assoc array with Object.keys

    A trivial but pretty bit of code

    const arr = {
    	item1: 'Hello',
      item2: 'there!',
      item3: 'Trivial test...'
    }
    let text = '';
    Object.keys(arr).forEach((key) => {
    	text += arr[key] + ' ';
    });
    
    document ...
  • String replacer

    When we cannot use ES6 string template

    // Simple string replacer
    // Example:
    // replace('Hello {$name} {$surname}', {name: 'Boo', surname: 'Chan'});
    var replace = function (stringToReplace, JSON) {
    	return stringToReplace.replace ...
  • CSS animation of content of unknow height

    Animating padding, I did not like the animation result of ScaleY

    <h2>CSS animation of content of unknow height</h2>
    <div class="content">
    <a href="#">Hover me</a>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum ullam beatae ...</p></div>
  • Kanji drawing

    A quick prototype, animating kanji SVG in correct stroke order

    var animate = function (path, drawingSpeed, strokeNumber) {
    	var length = path.getTotalLength();
    	path.style.transition = path.style.WebkitTransition = 'none';
    	path.style.strokeDasharray ...
  • Playing with getBattery status

    Only works in Chrome

    let result;
    let resultElement = document.querySelectorAll('#result')[0];
    
    var log = function( content) {
    	resultElement.innerHTML += content + "\n";
    }
    
    if ( typeof navigator.getBattery ...
  • Playing with mouse tracking

    A copy of http://hej.ch effect.

    let box = $("#content .box");
    let letter = $("#content .letter");
    var height = letter.height();
    var ruby = letter.find('ruby');
    var width = ruby ...
  • Styling with contextual awareness of elements

    Very clever use of "Axiomatic CSS and Lobotomized Owls" CSS technique

    <h1>
    This demonstrates styling with contextual awareness of elements with the parent alement.
    </h1>
    <p>
    Added background colour to highlight the boundaries of ...</p>
  • ES6 classes and inheritance

    ES6 feature with ES7 with static values added

    let result;
    let resultElement = document.querySelectorAll('#result')[0];
    
    var log = function( content) {
    	resultElement.innerHTML += typeof content + ': ' + content + "\n";
    }
    
    class Pets ...
  • Block scoping - let and const

    A good practise for clearer scope definition

    let result;
    let resultElement = document.querySelectorAll('#result')[0];
    
    var log = function( content) {
    	resultElement.innerHTML += typeof content + ': ' + content + "\n";
    }
    
    const test ...
  • Destructuring values in ES6

    Cool new ES6 feature for easier handling of assoc and numeric arrays and cross mapping values to variables. Really useful for calling functions!

    var result;
    var resultElement = document.querySelectorAll('#result')[0];
    
    var log = function( content) {
    	resultElement.innerHTML += typeof content + ': ' + content + "\n";
    }
    
    var test ...