Skip to content

Instantly share code, notes, and snippets.

Avatar

Florian Reuschel loilo

View GitHub Profile
@loilo
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
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 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
@loilo
loilo / readme.md
Last active Sep 26, 2020
Async Computed Values for Vue 3
View readme.md

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.

Usage

Basic Usage

@loilo
loilo / readme.md
Last active Jul 18, 2020
Sass Dark/Light Theme Mixin
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
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>
@loilo
loilo / manipulate_html.php
Last active Jul 18, 2020
Modify HTML Using PHP
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);
}
@loilo
loilo / buffer.php
Created Apr 11, 2020
Output Buffering Directive for Laravel Blade Templates
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(); ?>';
@loilo
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
loilo / readme.md
Last active Jun 9, 2020
Not That Tiny Reactive Store
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)
@loilo
loilo / readme.md
Last active Jun 9, 2020
Tiny Reactive Store
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`)
You can’t perform that action at this time.