Skip to content

Instantly share code, notes, and snippets.

Avatar

Florian Reuschel loilo

View GitHub Profile
@loilo
loilo / split-pull-requests.md
Last active Nov 23, 2020
Split a large pull request into two
View split-pull-requests.md
@loilo
loilo / get-local-iso-string.js
Last active Nov 19, 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')}`
}
@loilo
loilo / DomKeepAlive.md
Last active Nov 19, 2020
Keep pre-existing DOM nodes alive inside Vue components
View DomKeepAlive.md

Keep pre-existing DOM alive in Vue

For my use cases, Vue has one critical pitfall: I frequently have/want to use Vue components with <slot>s as wrappers for content from a CMS which I don't have control over. That is, the content comes over the wire via HTML, and I have to activate Vue for some of it.

<interactive-element>
  <p>Slot content I don't have control over</p>
</interactive-element>

I need to activate the Vue component <interactive-element>.

@loilo
loilo / typescript-assets.ts
Created Aug 22, 2019
Some types I found useful during some tricky TypeScript programming
View typescript-assets.ts
/*
* These are some types I found useful during some tricky TypeScript programming.
* Many of them are not too common or intuitive to come up with, this is why I'm writing them down here for future lookup.
*
* Note: Be careful when copy-pasting, some of these types depend on others.
*/
/**
* Various utilities for working with classes
@loilo
loilo / pass-slots.md
Last active Nov 18, 2020
Vue: Pass Slots through from Parent to Child Components
View pass-slots.md

Vue: Pass Slots through from Parent to Child Components

The Situation

  • We've got some components A, B and C which provide different slots.
    const A = {
      template: `<div><slot name="a">Default A Content</slot></div>`
    }
    
    const B = {
@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 / magic-methods.js
Last active Nov 13, 2020
PHP Magic Methods in JavaScript
View magic-methods.js
function magicMethods (clazz) {
// A toggle switch for the __isset method
// Needed to control "prop in instance" inside of getters
let issetEnabled = true
const classHandler = Object.create(null)
// Trap for class instantiation
classHandler.construct = (target, args, receiver) => {
// Wrapped class instance
@loilo
loilo / idb-backup-and-restore.md
Last active Nov 4, 2020
Back up and restore an IndexedDB database
View idb-backup-and-restore.md

Back up and restore an IndexedDB database

This gist is an ES module which provides functions to import and export data from an IndexedDB database as JSON. It's based on Justin Emery's indexeddb-export-import package, but applies some adjustments that reflect better on the current browser landscape (i.e. better developer ergonomics but no support for Internet Explorer).

Usage

For each of the provided functionalities, you need a connected IDBDatabase instance.

Export Data

import { idb } from 'some-database'
@loilo
loilo / portfinder.md
Last active Oct 22, 2020
Find Free Port with PHP
View portfinder.md

Find Free Port with PHP

This is a quick way to find a random free port on a system using PHP:

$port = find_free_port();

Benchmarked locally, where finding a port always took around 0.15ms.

@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

You can’t perform that action at this time.