Florian Reuschel loilo

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

Alpine.js `x-select` Directive

x-select is an Alpine.js directive which provides a styled enhancement over a native <select> element.

Its main goal is to be a progressive enhancement adding no actual features to a select dropdown apart from making it more visually appealing to use (especially for select fields with multiple).

Further goals include:

Accessibility: Appropriate ARIA roles are set, expected keyboard shortcuts can be used.
Easy stylability: Custom properties exist for the main features.

Draftlog with Vue Reactivity

Draftlog is a great tool for creating rich terminal logging experiences. However, using it feels kind of imperative when coming from a data-driven frontend world (insofar as you have to decide on your own when to re-apply data and call the draft function again).

This little code snippet marries Draftlog with the @vue/reactivity (one of the earlier implementation of the signals pattern in the web development world).

You basically keep using console.draft() just as before, but you can pass it reactive data which will cause the draft to update automatically when that data changes.

Simple .zip file generation with JavaScript using JSZip

The zipTree function exported from this module takes a file tree object and creates a zip object from it using JSZip (which you need to install first via npm install jszip):

// A tree is just a collection of file names mapped to their contents
let data = {
  // Use a string for text content
  'file.txt': '...file content...',

To the extent possible under law, Florian Reuschel

Vue useQuerySelector Composable

A Vue composable which finds the first element matched by a selector, using useMutationObserver (i.e. requires the @vueuse/core package).

While using template refs is the canonical way to access elements in Vue, there may be situations (e.g. when you wrap non-Vue code you have no control over) where using raw DOM access may be needed.

Example

import { watchEffect } from 'vue'

	import { createFilter } from '@rollup/pluginutils'
	import got from 'got'
	import MagicString from 'magic-string'
	import path from 'node:path'
	import revisionHash from 'rev-hash'

	function escapeRegex(string) {
	return string.replace(/[.*+?^${}()\|[\]\\]/g, '\\$&')
	}

	/**
	* Find nodes via XPath
	*
	* @param {string} query
	* @param {Node} root
	* @returns {Node[]}
	*/
	export function xpath(query, root = document) {
	let iterator = document.evaluate(query, document)

	// 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' }

	/**

	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) {