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

class HashStateManager {
  constructor ({ global = window, prefix = '!' } = {}) {
    this.window = global
    this.prefix = prefix
    this.callbacks = new Set
    this.urlListenerEnabled = true
    this.boundUrlListener = this.urlListener.bind(this)

    this.internalState = this.parseState()
    this.publicState = this.createState()

loilo

// Store this as vue.config.js in your project root
// to enable object spread in templates.
// Note that you'll need to provide an Object.assign()
// polyfill for legacy browsers.

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')

loilo

<?php

require_once __DIR__ . "/vendor/erasys/dnode-php-sync-client/DnodeSyncClient.php";

class DNode
{
    protected $connection;

    public static function connect($host, $port)
    {

loilo

Structural Extraction of PHP Arrays

Extract structures from PHP arrays, kind of like an advanced pluck.

Signature

The provided xtract function takes a $source (usually an array) and a $target, which is the structure to transform the $source into:

mixed xtract( mixed $source, mixed $target )

Simple Examples

loilo

(An Approach to) Vue.js Template Variables

This has first been published as an article on dev.to.

The Problem

From time to time, I have the need to temporarily store the results of a method call in Vue templates. This is particularly common inside loops, where we cannot easily use computed properties.

Basically what we'd want to avoid is this:

<!-- List.vue -->

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

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

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