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.
View parse-filesize.php
| <?php | |
| /** | |
| * Parse a filesize to its number of bytes | |
| * | |
| * @param string|int|float $input | |
| * @param int $base | |
| * @return int | |
| * | |
| * @see https://github.com/patrickkettner/filesize-parser, the original JavaScript implementation of this function |
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) { |
View use-terminal-size.ts
| import { useEffect, useState } from 'react' | |
| /** | |
| * React hook which provides the size of the terminal, based on https://usehooks.com/useWindowSize/ | |
| * Great for usage with Ink (https://npmjs.com/package/ink) | |
| */ | |
| export function useTerminalSize() { | |
| const [terminalSize, setTerminalSize] = useState([ | |
| process.stdout.columns, | |
| process.stdout.rows |
View readme.md
View readme.md
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 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> |
View manipulate_html.php
| <?php | |
| function walk_dom(DOMNode $domNode, callable $callback): void | |
| { | |
| foreach ($domNode->childNodes as $node) { | |
| $callback($node); | |
| if ($node->hasChildNodes()) { | |
| walk_dom($node, $callback); | |
| } |
View buffer.php
| <?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(); ?>'; |
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 |
View readme.md
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)NewerOlder