loilo

Find Free Port with PHP

This is a quick way to find a random free port on a system using PHP:

$port = find_free_port();

Benchmarked locally, where finding a port always took around 0.15ms.

loilo

Promise Wrapper for FileReader

This is a simple wrapper for the FileReader API. It allows converting a Blob (and therefore a File as well) to either a plain text string, a data URL or an ArrayBuffer with a nice and clean Promise API.

Signature

This is the TypeScript signature of the readBlob function:

/**
 * Read a blob or file and convert it to another data type

loilo

// This userscript redirects you to the English version of a website if it's denoted in the source code.
// Insert any URLs of websites below (after @match), for example https://developer.mozilla.org/* or https://www.php.net/*
// Use multiple @match clauses to enable the script on several domains.

// ==UserScript==
// @name         Redirect to English
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Redirect websites to their English version
// @author       Florian Reuschel <florian@loilo.de>

loilo

Keep pre-existing DOM alive in Vue

For my use cases, Vue has one critical pitfall: I frequently have/want to use Vue components with <slot>s as wrappers for content from a CMS which I don't have control over. That is, the content comes over the wire via HTML, and I have to activate Vue for some of it.

<interactive-element>
  <p>Slot content I don't have control over</p>
</interactive-element>

I need to activate the Vue component <interactive-element>.

loilo

function getLocalISOString(date) {
  const offset = date.getTimezoneOffset()
  const offsetAbs = Math.abs(offset)
  const isoString = new Date(date.getTime() - offset * 60 * 1000).toISOString()
  return `${isoString.slice(0, -1)}${offset > 0 ? '-' : '+'}${String(Math.floor(offsetAbs / 60)).padStart(2, '0')}:${String(offsetAbs % 60).padStart(2, '0')}`
}

loilo

Draftlog with Vue Reactivity

Draftlog is a great tool for creating rich terminal logging experiences. However, using it feels kind of imperative when coming from a data-driven frontend world (insofar as you have to decide on your own when to re-apply data and call the draft function again).

This little code snippet marries Draftlog with the @vue/reactivity (one of the earlier implementation of the signals pattern in the web development world).

You basically keep using console.draft() just as before, but you can pass it reactive data which will cause the draft to update automatically when that data changes.

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

<?php

function walk_dom(DOMNode $domNode, callable $callback): void
{
    foreach ($domNode->childNodes as $node) {
        $callback($node);

        if ($node->hasChildNodes()) {
            walk_dom($node, $callback);
        }

loilo

Make Vue events bubble

Vue events don't bubble the component tree on their own. However when writing wrapper components this can be the desired behaviour.

This code registers a global bubble directive which allows to re-emit all given events:

Let's say we want to bubble events start, accelerate and brake of our component Car.

Without any help, we'd roughly have to do this:

loilo

Node Path Resolver

Implementation of the Node module resolution algorithm (aka require.resolve()) in PHP.

Depends on league/flysystem and illuminate/support.

Basic Usage

use League\Flysystem\Filesystem;
use League\Flysystem\Adapter\Local;