Florian Reuschel loilo

Besseres Scoping mit async/await

Problem

Wie greife ich auf frühere Ergebnisse in der Promise-Chain zurück?

ajaxCall()
    .then(response => {
      //  ^ man beachte diese Variable
 return expensiveEvaluation(response.data)

Rangeslider

This is a small, production-ready Rangeslider library.

Try it out in this CodePen!

I created this because no existing library met all my criteria:

no heavy-weight third-party dependencies (i.e. no jQuery)
respect HTML5 `` restrictions (min, `max`, `step`)

ATTENTION!

I keep this Gist for archival reasons, however I strongly recommend against using it. As I discovered after several weeks in production usage, these BEM mixins cause unexpected, unfixable and hard-to-debug selectors in some cases (especially when nested in some ways).

Sass mixins for BEM

This is a utility with three simple Sass mixins for writing BEM as DRY as possible, heavily inspired by Hugo Giraudel's article on CSS Tricks.

It exposes three Sass mixins: block, element and modifier.

PHP Column Parser

This PHP class takes a block of column-styled UNIX output (e. g. from composer show) and dissects it into lines and columns.

Take this excerpt from running the mentioned command in a Symfony project:

doctrine/cache               v1.7.1 Caching library offering an object-oriented API for many cache backends
doctrine/inflector           v1.2.0 Common String Manipulations with regard to casing and singular/plural rules.
illuminate/contracts         v5.5.2 The Illuminate Contracts package.
illuminate/support v5.5.2 The Illuminate Support package.

	// Note: This code is obsolete. There's a cross-browser DOM method `compareDocumentPosition()` which does the same, but more detailed.
	// See https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition

	function compareNodePosition( nodeA, nodeB, container ) {
	if ( !( container instanceof HTMLElement ) ) {
	container = document.body;
	}

	function getNodePositionArray( el, container ) {
	var arr = [];

	/**
	* Resolve a promise when a condition matches
	*
	* @param condition The callback to run for checking
	* @param interval How frequent to check the condition (interval in milliseconds)
	* @param timeout After how many milliseconds to reject the promise
	*/
	async function poll(condition: () => boolean, interval: number, timeout?: number): Promise<void> {
	const startTime = Date.now()

	const serializeMultipart = async form => {
	const data = {}

	const formdata = Array.from(form.querySelectorAll('input, select, textarea, button')).map(input => {
	if (input.disabled) return false

	switch (input.nodeName) {
	case 'INPUT':
	switch (input.type.toLowerCase()) {
	case 'checkbox':

	// This was originally designed for creating virtual print sheet layouts in HTML/CSS,
	// breaking contents too long for one page to the next one.
	// You can play around with it here: https://jsfiddle.net/Loilo/L3w8zjuf/3/

	function internalBreak (breakItem, outmostContainer, breakDirection, childIsBroken = false) {
	const container = breakItem.parentElement
	const containerItems = Array.from(container.children)

	// Move all items after `breakItem` to a new container
	const nextContainer = container.cloneNode()

	<?php

	$args = array_slice($argv, 1);

	$unnamedArgs = [];
	$namedArgs = [];
	$currentArg = null;

	foreach ($args as $arg) {
	// Long name

	// Resets a given form element

	function resetInput (input) {
	// 1. Remember the <input> position by grabbing sibling and parent
	const next = input.nextSibling
	const parent = input.parentNode

	// 2. Create a temporary <form> element, put the <input> there and reset that form
	const tmpForm = document.createElement('form')
	tmpForm.appendChild(input)