Skip to content

Instantly share code, notes, and snippets.

Avatar

Florian Reuschel loilo

View GitHub Profile
@loilo
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 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
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) {
clearTimeout(timeoutID);
}
clearInterval(intervalID);
@loilo
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
loilo / async-await-vorteil.md
Last active Jan 9, 2019
Wozu Entwickler async/await brauchen
View async-await-vorteil.md

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
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: 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
loilo / args.php
Last active Jan 9, 2019
Minimist-like PHP $argv parser
View args.php
<?php
$args = array_slice($argv, 1);
$unnamedArgs = [];
$namedArgs = [];
$currentArg = null;
foreach ($args as $arg) {
// Long name
@loilo
loilo / rangeslider.md
Last active Oct 14, 2019
Rangeslider
View rangeslider.md

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 <input type="range"> restrictions (min, max, step)
@loilo
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')
tmpForm.appendChild(input)
@loilo
loilo / bem.md
Last active Mar 15, 2020
Sass mixins for BEM
View bem.md

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

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.