JSFiddle

  • 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 ...
  • Use cases for Array.map

    Some interesting way to use Array.map on strings and DOM

    var result;
    var resultElement = document.querySelectorAll('#result')[0];
    
    var log = function( content) {
    	resultElement.innerHTML += typeof content + ': ' + content + "\n";
    }
    
    // run Array ...
  • Loading public JSFiddles

    This example uses jQuery for convenience

    var url = 'https://jsfiddle.net/api/user/stanislavcmakal/demo/list.json?limit=10&callback=';
    var promise;
    
    
    var processData = function(data) {
    	var ...