JSFiddle

  • Emoji Unicode by Version

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

    <p>
    	Generated by <a href="https://gist.github.com/MadLittleMods/76abcd7c1f3591ef7012b6afce6ace3f">https://gist.github.com/MadLittleMods/76abcd7c1f3591ef7012b6afce6ace3f</a>
    </p>
    
    <section>
    	<h3>1.1</h3>
    	<div>
    		<span title="relaxed">
    				☺
    			</span> <span title="frowning2">
    				☹
    			</span> <span title="skull_crossbones">
    				☠
    			</span> <span title="point_up">
    				☝
    			</span> <span title="v">
    				✌
    			</span> <span title="writing_hand">
    				✍
    			</span> <span title="heart">
    				❤
    			</span> <span title="heart_exclamation">
    				❣
    			</span> <span title="hotsprings">
    				♨
    			</span> <span title="airplane">
    				✈
    			</span> <span title="hourglass">
    				⌛
    			</span> <span title="watch">
    				⌚
    			</span> <span title="sunny">
    				☀
    			</span> <span title="cloud">
    				☁
    			</span> <span title="umbrella2">
    				☂
    			</span> <span title="snowflake">
    				❄
    			</span> <span title="snowman2">
    				☃
    			</span> <span title="comet">
    				☄
    			</span> <span title="spades">
    				♠
    			</span> <span title="hearts">
    				♥
    			</span> <span title="diamonds">
    				♦
    			</span> <span title="clubs">
    				♣
    			</span> <span title="telephone">
    				☎
    			</span> <span title="keyboard">
    				⌨
    			</span> <span title="envelope">
    				✉
    			</span> <span title="pencil2">
    				✏
    			</span> <span title="black_nib">
    				✒
    			</span> <span title="scissors">
    				✂
    			</span> <span title="radioactive">
    				☢
    			</span> <span title="biohazard">
    				☣
    			</span> <span title="arrow_upper_right">
    				↗
    			</span> <span title="arrow_right">
    				➡
    			</span> <span title="arrow_lower_right">
    				↘
    			</span> <span title="arrow_lower_left">
    				↙
    			</span> <span title="arrow_upper_left">
    				↖
    			</span> <span title="arrow_up_down">
    				↕
    			</span> <span title="left_right_arrow">
    				↔
    			</span> <span title="leftwards_arrow_with_hook">
    				↩
    			</span> <span title="arrow_right_hook">
    				↪
    			</span> <span title="star_of_david">
    				✡
    			</span> <span title="wheel_of_dharma">
    				☸
    			</span> <span title="yin_yang">
    				☯
    			</span> <span title="cross">
    				✝
    			</span> <span title="orthodox_cross">
    				☦
    			</span> <span title="star_and_crescent">
    				☪
    			</span> <span title="peace">
    				☮
    			</span> <span title="aries">
    				♈
    			</span> <span title="taurus">
    				♉
    			</span> <span title="gemini">
    				♊
    			</span> <span title="cancer">
    				♋
    			</span> <span title="leo">
    				♌
    			</span> <span title="virgo">
    				♍
    			</span> <span title="libra">
    				♎
    			</span> <span title="scorpius">
    				♏
    			</span> <span title="sagittarius">
    				♐
    			</span> <span title="capricorn">
    				♑
    			</span> <span title="aquarius">
    				♒
    			</span> <span title="pisces">
    				♓
    			</span> <span title="arrow_forward">
    				▶
    			</span> <span title="arrow_backward">
    				◀
    			</span> <span title="ballot_box_with_check">
    				☑
    			</span> <span title="heavy_check_mark">
    				✔
    			</span> <span title="heavy_multiplication_x">
    				✖
    			</span> <span title="eight_spoked_asterisk">
    				✳
    			</span> <span title="eight_pointed_black_star">
    				✴
    			</span> <span title="sparkle">
    				❇
    			</span> <span title="bangbang">
    				‼
    			</span> <span title="wavy_dash">
    				〰
    			</span> <span title="copyright">
    				©
    			</span> <span title="registered">
    				®
    			</span> <span title="tm">
    				™
    			</span> <span title="m">
    				Ⓜ
    			</span> <span title="congratulations">
    				㊗
    			</span> <span title="secret">
    				㊙
    			</span> <span title="black_small_square">
    				▪
    			</span> <span title="white_small_square">
    				▫
    			</span>
    	</div>
    </section>
    
    <section>
    	<h3>3.0</h3>
    	<div>
    		<span title="interrobang">
    				⁉
    			</span> <span title="hash">
    				#⃣
    			</span> <span title="asterisk">
    				*⃣
    			</span> <span title="zero">
    				0⃣
    			</span> <span title="one">
    				1⃣
    			</span> <span title="two">
    				2⃣
    			</span> <span title="three">
    				3⃣
    			</span> <span title="four">
    				4⃣
    			</span> <span title="five">
    				5⃣
    			</span> <span title="six">
    				6⃣
    			</span> <span title="seven">
    				7 ...</span></div></section>
  • 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 #23 is the latest revision

    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>