Skip to content

Instantly share code, notes, and snippets.

View loilo's full-sized avatar

Florian Reuschel loilo

93 followers · 0 following
View GitHub Profile
@loilo
loilo / base64.js
Last active July 2, 2026 23:40
URL-Safe LZMA Compression
/**
* Convert between Uint8Array and Base64 strings
* Allows for any encoded JS string to be converted (as opposed to atob()/btoa() which only supports latin1)
*
* Original implementation by madmurphy on MDN
* @see https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Solution_1_–_JavaScript%27s_UTF-16_%3E_base64
*/
function b64ToUint6(nChr) {
return nChr > 64 && nChr < 91
@loilo
loilo / compare-files.js
Last active June 25, 2026 09:22
Compare File Lists in Node.js
import revHash from 'rev-hash'
import { readFileSync, statSync } from 'fs'
import { resolve } from 'path'
/**
* Calculate the rev hash for a file
*
* @param {string} file The path to the file to hash
* @returns {string}
*/
@loilo
loilo / media-query.md
Last active June 17, 2026 08:34
Assemble CSS Media Queries in PHP

PHP Media Query Builder

Fluent, immutable interface for creating CSS Media Queries in PHP.

use function Loilo\MediaQuery\mq;

$query = mq('a: true')
	->or(mq('b: true')->and('c: true'))
	-&gt;and('d: true');
@loilo
loilo / redirect-to-english.js
Last active April 22, 2026 10:32
Userscript: Redirect Website to its English Version
// 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 / pass-slots.md
Last active April 16, 2026 16:08
Vue: Pass Slots through from Parent to Child Components

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 / readme.md
Last active March 28, 2026 12:25
Sass Dark/Light Theme Mixin

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 / split-pull-requests.md
Last active March 12, 2026 09:37
Split a large pull request into two
@loilo
loilo / idb-backup-and-restore.js
Last active January 15, 2026 05:29
/**
* Export all data from an IndexedDB database
*
* @param {IDBDatabase} idbDatabase The database to export from
* @return {Promise<string>}
*/
export function exportToJson(idbDatabase) {
return new Promise((resolve, reject) => {
const exportObject = {}
if (idbDatabase.objectStoreNames.length === 0) {
@loilo
loilo / -responsive.md
Last active November 30, 2025 23:10
Sass Responsive Utilities

Sass Responsive Utilities

Tip

These are some Sass mixins and functions for handling responsiveness which I'm using in virtually every project.

Configurataion

At the start of the responsive.scss you can find configuration variables for you to adjust.

Setup

@loilo
loilo / magic-methods.js
Last active November 20, 2025 15:59
export 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