JSFiddle

  • Vue 2.0 Hello World #1 is the latest revision

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

    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
  • Vue 2.0 Hello World

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

    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
  • html5 video

    FF and Rewind

    var video = document.getElementById('video');
    var log = document.getElementById('log');
    var intervalRewind;
    //var startSystemTime;
    //var startVideoTime;
    
    $(video).on('play',function ...
  • Debounce vs Throttle

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

    // debounce vs throttle
    const interval = 500;
    new Vue({
      el: '#app',
      data: {
        searchTerm : '',
        debouncedTerm : '',
        throttledTerm : ''
      },
      methods: {
        search() {
        	this.searchDebounce();
          this.searchThrottle ...
  • Polymer 1.0 test for nested templates

    jQuery (edge), HTML, CSS, JavaScript

    <link rel="import" 
          href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/paper-input/paper-input.html">
    <link rel="import" 
          href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/iron-ajax/iron-ajax.html">
        
    <dom-module id="data-binding">
        <template>
            <paper-input label="Input" id="input" value="{{q::input}}" autofocus>
            </paper-input>
            <p>Input: <b>{{q}}</b></p>
            <p>Echo: <b>{{echo}}</b></p>
            <iron-ajax auto url="http://dict.leo.org/dictQuery/m-query/conf/ende/query.conf/strlist.json" params="{'q': q}" handle-as="json" on-response="_handleResponse" debounce-duration="300"></iron-ajax>
        </template>
        <script>
            (function () {
          Polymer({
            is: 'data-binding',
    
            properties: {
                echo: {
                    type: String,
                    value: 'waiting ...',
                    reflectToAttribute: true
                }
            },
            
            _handleResponse: function(event, request ...</script></dom-module>
  • Rotating a circle of boxes #1 is the latest revision

    Forked from http://coding.smashingmagazine.com/2011/10/04/quick-look-math-animations-javascript/

    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame    ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function(/* function */ callback, /* DOMElement */ element){
                window ...
  • Rotating a circle of boxes

    Forked from http://coding.smashingmagazine.com/2011/10/04/quick-look-math-animations-javascript/

    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame    ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function(/* function */ callback, /* DOMElement */ element){
                window ...
  • RAF Heads Up Display

    Mootools 1.4.1, HTML, CSS, JavaScript

    var fps = 0;
    
    window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame   || 
        window.mozRequestAnimationFrame      || 
        window.oRequestAnimationFrame        || 
        window.msRequestAnimationFrame       || 
        function(callback, element ...
  • Flexbox grid

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

    <container>
    	<box>Item 1</box>
    	<box class="demoted">Item 2 - Demoted</box>
    	<box>Item 3</box>
    	<box>Item 4</box>
    	<box class="featured">Item 5 - Featured</box>
    	<box>Item 6</box>
    	<box>Item 7</box>
     	<box class="featured">Item 8 - Featured</box>
     	<box>Item ...</box></container>
  • CSS Flyout Menu #1 is the latest revision

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

    <div class="dropdown-menu ddm1">	
    	<input type="checkbox" name="toggle" id="toggle">
    	<label for="toggle">Button</label>
    	<ul>
    		<li><a href="#" title="Do something">Do something</a></li>
    		<li><a href="#" title="Do something else">Do something else</a></li>
    		<li><a href="#" title="Options">Options</a></li>
    	</ul>
    </div>