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

<?php
// In your AppServiceProvider's boot() method, put this:

Blade::directive('buffer', function () {
    return '<?php ob_start(); ?>';
});

Blade::directive('endbuffer', function (string $name) {
    if ($name === '') {
        return '<?php ob_end_clean(); ?>';

loilo

export default function on(target, event, listener) {
  let targetObject, boundListener

  return {
    mounted() {
      // Allow functions for client-only targets
      targetObject = typeof target === 'function' ? target() : target

      if (typeof listener === 'string') {
        // If a string is passed as a listener, use a method with that name

loilo

Not That Tiny Reactive Store

Not as tiny as the Tiny Reactive Store anyway.

This pretty small script (900b/700b minzipped with/without decorators) is a reactive store implementation with dependency tracking instead of explicit dependency declaration.

import { value, computed } from 'store.ts'

const bytes = value(4300)

loilo

Tiny Reactive Store

This is a tiny (≈250b minzipped) implementation of a reactive store. It's heavily inspired by Svelte's store, but it's even leaner than that (no write-protected store, no asynchronous derived data):

import { value, computed } from 'store.mjs'

const bytes = value(4300)
const kbNum = computed(bytes, bytes => bytes / 1024)
const kbStr = computed(kbNum, kbNum => `${kbNum.toFixed(2)} KB`)

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

/**
 * Fixates JavaScript's Date
 * This is useful for snapshot testing data which refers to the current time
 *
 * Losely based on https://github.com/facebook/jest/issues/2234#issuecomment-324868057
 */

/**
 * Keep a reference to the original date
 */

loilo

Regular Expression Template Tag in TypeScript

I liked this gist enough that I made it a full-blown npm package. Check it out here.

After having used regular expression escape functions for years, it just crossed my mind that this might be way easier to achieve with a tagged template literal.

This is how to use this gist:

import rx from 'https://unpkg.com/@loilo/rx/dist/rx.mjs'

loilo

Vue Global Keyboard Shortcut Mixin

This is a Vue.js mixin (or rather, a mixin factory) for simple keyboard shortcuts.

Features:

• Tiny (<0.5 KB minified & gzipped)
• Super easy to use
• Proper restrictions (does not trigger when modifier keys don't match exactly or when an element has focus)

Note that this mixin targets modern browsers. If you need legacy browser support, you need to use a transpiler like Babel with the according polyfills.

loilo

/**
 * Convert between Uint8Array and Base64 strings
 * Allows for any encoded JS string to be converted (as opposed to atob()/btoa() which only supports latin1)
 *
 * Original implementation by madmurphy on MDN
 * @see https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Solution_1_–_JavaScript%27s_UTF-16_%3E_base64
 */

function b64ToUint6(nChr) {
  return nChr > 64 && nChr < 91