Florian Reuschel loilo

## portfinder.md

      
              2 files
            
          
              1 fork
            
          
              2 comments
            
          
              11 stars
            
          
                loilo
                / portfinder.md
            
            
              Last active
              May 3, 2024 06:41
            
              
                Find Free Port with PHP
              
          
    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.

  
## idb-backup-and-restore.md

      
              2 files
            
          
              15 forks
            
          
              25 comments
            
          
              71 stars
            
          
                loilo
                / idb-backup-and-restore.md
            
            
              Last active
              April 29, 2024 06:40
            
              
                Back up and restore an IndexedDB database
              
          
    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'

  
## base64.mjs
/**
 * 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

## 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

## readme.md

      
              2 files
            
          
              1 fork
            
          
              21 comments
            
          
              29 stars
            
          
                loilo
                / readme.md
            
            
              Last active
              April 9, 2024 20:01
            
              
                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;

  
## split-pull-requests.md

      
              1 file
            
          
              12 forks
            
          
              6 comments
            
          
              89 stars
            
          
                loilo
                / split-pull-requests.md
            
            
              Last active
              April 3, 2024 07:24
            
              
                Split a large pull request into two
              
          
This is about how to split a GitHub pull request, following a real in-the-wild example.

So it happened that I once wanted to fix a bug (#832) on the shelljs repository.
I forked the repository, cloned it and created a new branch called ln-directory-dest. I fixed the bug, created a pull request, and implemented initial review feedback.
At this point, I had added the commits A, B, C, D, E and [F](https://github.com/Loilo/shelljs/commit/946ab48bf5cf9c8aac03407

  
## pass-slots.md

      
              1 file
            
          
              24 forks
            
          
              68 comments
            
          
              273 stars
            
          
                loilo
                / pass-slots.md
            
            
              Last active
              March 27, 2024 20:58
            
              
                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 = {

  
## 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

## bem.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              4 stars
            
          
                loilo
                / bem.md
            
            
              Last active
              March 7, 2024 09:14
            
              
                Sass mixins for BEM
              
          
ATTENTION!
I keep this Gist for archival reasons, however I strongly recommend against using it. As I discovered after several weeks in production usage, these BEM mixins cause unexpected, unfixable and hard-to-debug selectors in some cases (especially when nested in some ways).

Sass mixins for BEM

This is a utility with three simple Sass mixins for writing BEM as DRY as possible, heavily inspired by Hugo Giraudel's article on CSS Tricks.
It exposes three Sass mixins: block, element and modifier.

  
## 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(); ?>';
	/**
	* 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
	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
	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
	<?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(); ?>';