Skip to content

Instantly share code, notes, and snippets.


Florian Reuschel loilo

View GitHub Profile
loilo / dom-position.js
Last active Feb 2, 2020
Compares the position of two elements in a DOM tree and returns -1, 0 or 1
View dom-position.js
// Note: This code is obsolete. There's a cross-browser DOM method `compareDocumentPosition()` which does the same, but more detailed.
// See
function compareNodePosition( nodeA, nodeB, container ) {
if ( !( container instanceof HTMLElement ) ) {
container = document.body;
function getNodePositionArray( el, container ) {
var arr = [];
loilo / check-periodically.js
Last active Aug 28, 2019
Sometimes there is 3rd party code to wait for and you can't hack into it with callbacks or promises. This script runs a check function periodically until it returns true (in which case its returned promise is resolved) or until it times out (which means it's going to reject).
View check-periodically.js
function waitFor(check, interval, timeout = null) {
return new Promise((resolve, reject) => {
let timeoutID;
let intervalID = setInterval(() => {
if (check()) {
if (timeout) {
loilo / serialize-multipart-form.js
Last active Jan 9, 2019
Serializes a form's elements into a ready-to-send POST body string
View serialize-multipart-form.js
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 /
Last active Jan 9, 2019
Wozu Entwickler async/await brauchen

Besseres Scoping mit async/await


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

    .then(response => {
      //  ^ man beachte diese Variable
      return expensiveEvaluation(
loilo / break.js
Last active Jan 9, 2019
Breaks elements out of their container
View break.js
// 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:
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 / args.php
Last active Jan 9, 2019
Minimist-like PHP $argv parser
View args.php
$args = array_slice($argv, 1);
$unnamedArgs = [];
$namedArgs = [];
$currentArg = null;
foreach ($args as $arg) {
// Long name
loilo /
Last active Oct 14, 2019


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 <input type="range"> restrictions (min, max, step)
loilo / reset.js
Last active Nov 3, 2017
Reset a single form element
View reset.js
// 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')
loilo /
Last active Mar 15, 2020
Sass mixins for BEM


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 /
Last active Jun 9, 2018
Parses column-formatted UNIX output

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.
You can’t perform that action at this time.