Eric's Fiddles - JSFiddle - Online JavaScript Editor - jQuery, Angular, Backbone, Underscore, Knockout, YUI

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 ...