JSFiddle

  • Unicode Emoji ZWJ Sequence rendered as two separate characters when width constrained

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

    <p>
    	In Chrome 60+(does not occur in Chrome 59.0.3071.15), certain
    	<a href="https://emojipedia.org/emoji-zwj-sequences/">ZWJ skin tone unicode emojis</a>
    	with a ...</p>
  • SVG with xlink filter not rendered in popover

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

    // Copy the template content into the actual popover
    $('.popover .content').html($('.content').html());
  • SVG with xlink filter not rendering

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

    
    <h3>
    	Why isn't the SVG rendered?
    </h3>
    <p>
    	SVG filter defs can't be inside a `display: none;` parent. Otherwise when xlinked ...</p>
  • Get YouYube playlist total play time

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

    
    const result = Array.prototype.reduce.call(document.querySelectorAll('.ytd-thumbnail-overlay-time-status-renderer'), (totalTime, el) => {
    	const timeString = el.textContent.trim();
    	const matches = timeString.match ...
  • 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 ...