JSFiddle

  • Horizontal scrolling tabs via JS (with vertical scroll)

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

    document.querySelector('.tab-container').addEventListener('mousewheel', (e) => {
    	document.querySelector('.tab-container').scrollLeft = document.querySelector('.tab-container').scrollLeft + e.deltaY;
    });
    
  • Horizontal scrolling tabs via CSS (with vertical scroll)

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

    <div class="toolbar">
    	<div class="tab-container">
    		<div class="tab-container-inner">
    			<div class="tab">a</div>
    			<div class="tab">b</div>
    			<div class="tab">c</div>
    			<div class="tab">d</div>
    			<div class="tab">e</div>
    			<div class="tab">f</div>
    			<div class="tab">g</div>
    			<div class="tab">h</div>
    			<div class="tab">i</div>
    			<div class="tab">j</div>
    			<div class="tab">k</div>
    		</div>
    	</div>
    </div>
  • assembleFullIssuableReference

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

    
    function assembleFullIssuableReference(partialReference, namespacePath, projectPath) {
    	const [
    		,
    		fullNamespace = '',
    		resultantIssue,
    	] = partialReference.match(/^((?:[^\s/]+(?:\/(?!#))?)*)#(\d+)$/i);
    	const namespacePieces = fullNamespace.split('/');
    	const resultantNamespace = namespacePieces ...
  • 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>