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>