JSFiddle

  • Gitter fetch rooms - authorization

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

    // Get your token from the persistent storage
    // This would be set if you visited here before and got some messages ...
  • chunk-string - split string at desired size being mindful to spaces

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

    var chunkString = function(str, size) {
      var chunks = [];
      var spacePieces = str.split(' ');
      return spacePieces.reduce(function(chunks, piece, index) {
        var isFirstPiece ...
  • Gitter: Paginate messages and check for duplicates

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

    // Get your token from the persistent storage
    // This would be set if you visited here before and got some messages ...
  • Safari Bug: Using animation and transition to drive transform styles gives incorrect hitbox (hit testing)

    jQuery 1.12.2, HTML, CSS, JavaScript

    $('.box').on('click', function() {
    	$('.box').toggleClass('is-active');
    	
    	// This is just to help you notice where the hitbox is
    	$('.hitbox-ghost-pointer').toggleClass ...
  • numberBoundWrap, arrayBoundWrap - index rollover/wrap (rotation, euler angle)

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

    
    // Bounds input to somewhere in [0, length] with wrapping/rollover
    // Could be used for array index bounding or euler angles ...
  • Hide from Accessibility Tree with `visibility: hidden` transition

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

    <input type="checkbox" class="show-foo-toggle" checked />
    <a href="#0" class="foo-link">Foo</a>
  • background-attachment: fixed; Demo

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

    <div class="wrapper">
      <div class="peak-box"></div>
      <div class="peak-box"></div>
    
      <div class="peak-box"></div>
      <div class="peak-box"></div>
    </div>
  • Pie chart segment animated - Circular progress

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

    <p>
    Inspired by <a href="http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/">this article</a> by <a href="http://lea.verou.me/">Lea Verou</a>
    </p>
    
    <div class="pie">
      <div class="pie-overlay">
        90%
      </div>
    </div>
  • Gitter Logo

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

    <div class="logo-small">
    	<svg
    		version="1.1" 
    		xmlns="http://www.w3.org/2000/svg"
    		xmlns:xlink="http://www.w3.org/1999/xlink"
    		viewBox="0 0 14 20"
    		fill="#000000"
    	>
    		<rect x="12" y="4"width="2" height="8"/>
    		<rect x="8" y="4" width="2" height="16"/>
    		<rect x="4" y="4"width="2" height="16"/>
    		<rect width="2" height="12"/>
    	</svg>
    </div>
    
    <div class="logo-18">
    	<svg
    		version="1.1" 
    		xmlns="http://www.w3.org/2000/svg"
    		xmlns:xlink="http://www.w3.org/1999/xlink"
    		viewBox="0 0 18 25"
    		fill="#000000"
    	>
    		<rect x="15" y="5" width="2" height="10"/>
    		<rect x="10" y="5" width="2" height="20"/>
    		<rect x="5" y="5" width="2" height="20"/>
    		<rect width="2" height="15"/>
    	</svg>
    </div>
    
    <div class="logo-all-around">
    	<svg
    		version="1.1"
    		xmlns="http://www.w3.org/2000/svg"
    		xmlns:xlink="http://www.w3.org/1999/xlink"
    		viewBox="0 0 51 75"
    	>
    		<rect width="6" height="48"/>
    		<rect x="15" y="13" width="6" height="62"/>
    		<rect x="30" y="13" width="6" height="62"/>
    		<rect x="45" y="13" width="6" height="34"/>
    	</svg>
    </div>
  • Skew Box

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

    <div class="skew-box">
        <div class="skew-box-top"></div>
        <div class="skew-box-body">
            <div class="skew-box-body-content">
                <p>
                    Sed ut perspiciatis unde omnis iste
                </p>
                <p>
                    Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus ...</p></div></div></div>