loilo

// 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 = [];

loilo

/**
 * 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()

loilo

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':

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)

loilo

// 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()

loilo

<?php

$args = array_slice($argv, 1);

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

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

loilo

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`)

loilo

// 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)

loilo

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.

loilo

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.