Skip to content

Instantly share code, notes, and snippets.

Avatar

Florian Reuschel loilo

View GitHub Profile
@loilo
loilo / LICENSE.md
Created Aug 16, 2022
This license applies to all of loilo's public GitHub Gists (unless otherwise specified or not eligible for copyright)
View LICENSE.md
@loilo
loilo / use-element-breakpoints.ts
Created Apr 28, 2022
useElementBreakpoints – Vue Composable for Element breakpoints
View use-element-breakpoints.ts
// useElementBreakpoints is a Vue 3 composable that matches an element's width (or height) against a set of predefined breakpoints
// It needs @vueuse/core to be installed and uses an equivalent breakpoints input as well as an equivalent returned API
import { computed, Ref } from 'vue'
import { useElementSize, MaybeElementRef } from '@vueuse/core'
export type Breakpoints<K extends string = string> = Record<K, number>
export type ElementBreakpointsOptions = { dimension: 'width' | 'height' }
/**
@loilo
loilo / use-query-selector.js
Last active Feb 28, 2022
Vue useQuerySelector composable
View use-query-selector.js
import { readonly, ref, watch } from 'vue'
import { useMutationObserver } from '@vueuse/core'
export function useQuerySelector(selector, { root = document } = {}) {
selector = ref(selector)
root = ref(root)
const result = ref(null)
// Find first matching element inside a root element
@loilo
loilo / serialize-console-log.js
Last active Jul 29, 2021
Serialize console.log() arguments into a string
View serialize-console-log.js
function serializeConsoleLog(...args) {
let result = []
// Format if first argument is a string
if (typeof args[0] === 'string') {
let formattedMessage = args.shift().replace(/%[csdifoO]/g, (match) => {
// Keep raw token if no substitution args left
if (args.length === 0) return match
switch (match) {
@loilo
loilo / shorten-path.ps1
Created Jul 15, 2021
Shorten a path in PowerShell Core 7+
View shorten-path.ps1
# Shorten a path in PowerShell by omitting segments from the beginning.
# Parameter defaults are designed to be used in a prompt.
# Requires at least PowerShell Core 7.
function shorten-path {
<#
.SYNOPSIS
Shortens a path from the end.
.DESCRIPTION
@loilo
loilo / contenteditable-caret-position.js
Last active Sep 8, 2022
JavaScript Contenteditable Caret Position Utilities
View contenteditable-caret-position.js
// Some utilities for detecting the caret position inside a contenteditable element
/**
* Get the number of characters in an element
*
* @param {Element} element
* @return {number}
*/
function getTextLength(element) {
let range = element.ownerDocument.createRange()
@loilo
loilo / parse-filesize.php
Created Feb 13, 2021
PHP Filesize Parser
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
@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