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 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 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 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)
View readme.md
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')}` | |
| } |
NewerOlder