Skip to content

Instantly share code, notes, and snippets.


Florian Reuschel loilo

View GitHub Profile
loilo / parse-filesize.php
Created Feb 13, 2021
PHP Filesize Parser
View parse-filesize.php
* Parse a filesize to its number of bytes
* @param string|int|float $input
* @param int $base
* @return int
* @see, the original JavaScript implementation of this function
loilo / bitmask-to-array.mjs
Created Nov 15, 2020
Create Array From Bitmask
View bitmask-to-array.mjs
* Convert a bitmask to an array of its individual bits
* @param {number} bitmask The bitmask to dissect
* @return {number[]}
* @example
* assert.equal(bitmaskToArray(0b101), [0b100, 0b001])
export function bitmaskToArray(bitmask) {
loilo / use-terminal-size.ts
Last active Sep 25, 2020
useTerminalSize() React Hook
View use-terminal-size.ts
import { useEffect, useState } from 'react'
* React hook which provides the size of the terminal, based on
* Great for usage with Ink (
export function useTerminalSize() {
const [terminalSize, setTerminalSize] = useState([
loilo /
Last active Mar 4, 2021
Async Computed Values for Vue 3

Async Computed Values for Vue 3

This gist provides a useAsyncComputed function which allows to create asynchronous dependencies on reactive values (using Vue 3's Composition API).

Requires at least Vue 3.0 and TypeScript 4.0.


Basic Usage

loilo /
Last active Feb 6, 2021
Sass Dark/Light Theme Mixin

Sass Dark/Light Theme Mixin

This is a Sass mixin to handle a 3-way dark mode. It relies on a data-theme attribute on your <html> element with a value of light or dark. If data-theme is absent (i.e. it's neither light nor dark), the system's preferred mode is used.

body {
  // matches data-theme="light" or data-theme="auto" with system instructing light mode
  @include light {
    background: white;
    color: black;
loilo / redirect-to-english.js
Last active Jan 28, 2021
Userscript: Redirect Website to its English Version
View redirect-to-english.js
// 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* or*
// Use multiple @match clauses to enable the script on several domains.
// ==UserScript==
// @name Redirect to English
// @namespace
// @version 1.0
// @description Redirect websites to their English version
// @author Florian Reuschel <>
loilo / manipulate_html.php
Last active Jul 18, 2020
Modify HTML Using PHP
View manipulate_html.php
function walk_dom(DOMNode $domNode, callable $callback): void
foreach ($domNode->childNodes as $node) {
if ($node->hasChildNodes()) {
walk_dom($node, $callback);
loilo / buffer.php
Created Apr 11, 2020
Output Buffering Directive for Laravel Blade Templates
View buffer.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 / events.mjs
Created Feb 20, 2020
Vue Page-Wide Events
View events.mjs
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 /
Last active Jun 9, 2020
Not That Tiny Reactive Store

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)