Skip to content

Instantly share code, notes, and snippets.


Florian Reuschel loilo

View GitHub Profile
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 Sep 26, 2020
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 Jul 18, 2020
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 Jul 29, 2020
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)
loilo /
Last active Jun 9, 2020
Tiny Reactive Store

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 / get-local-iso-string.js
Last active Jan 7, 2020
ISO 8601 date string – like Date.prototype.toISOString(), but with local timezone offset
View get-local-iso-string.js
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')}`
You can’t perform that action at this time.