schadeck

Algorithmic layouts

You are looking at the most important, and most abundant thing on the web. You can't see it, unfortunately, because it's very small… aaaaand it's invisible — so having a magnifying glass doesn't really help here. But still.

I'm talking, of course, about U+0020; not to be confused with the band U2, who are just as ubiquitous, but far less useful.

This unicode point, representing the humble space character, is between every word, in every run of text, on every page of the web. And it has a very special characteristic: it's not sticky like glue. If two words are neighbors but there's not enough room for both of them, the space will free the second word to wrap around and start a new line.

Before getting into flexible containers, viewport meta tags, and @media breakpoints this humble character is what makes the web fundamentally 'responsive'. That is: able to change the layout of its content to suit different devices, contexts, and settings. Browser text does this automa

🐻 valoo

just the bare necessities of state management.

Usage

Hotlink it from https://unpkg.com/valoo.

See Interactive Codepen Demo.

	/*
	Made by Elly Loel - https://ellyloel.com/
	With inspiration from:
	- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
	- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
	- Adam Argyle - https://unpkg.com/[email protected]/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

	Notes:
	- `:where()` is used to lower specificity for easy overriding.
	*/

	/*
	Copy this into the console of any web page that is interactive and doesn't
	do hard reloads. You will hear your DOM changes as different pitches of
	audio.

	I have found this interesting for debugging, but also fun to hear web pages
	render like UIs do in movies.
	*/

	const audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)()

	// create a bookmark and use this code as the URL, you can now toggle the css on/off
	// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
	javascript: (function() {
	var elements = document.body.getElementsByTagName('*');
	var items = [];
	for (var i = 0; i < elements.length; i++) {
	if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
	items.push(elements[i]);
	}
	}

	// Inspired by https://twitter.com/coderitual/status/1112297299307384833 and https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

	// Remove any duplicates from an array of primitives.
	const unique = [...new Set(arr)]

	// Sleep in async functions. Use: await sleep(2000).
	const sleep = (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
	// or
	const sleep = util.promisify(setTimeout);

	{
	"Console Log": {
	"prefix": "cl",
	"body": "console.log($1);",
	"description": "Console Log"
	},
	"Named Function": {
	"prefix": "nfn",
	"body": ["function ${1:functionName}($2) {", " $3", "}"],
	"description": "Named Function"

	(function (context, trackingId, options) {
	const history = context.history;
	const doc = document;
	const nav = navigator \|\| {};
	const storage = localStorage;
	const encode = encodeURIComponent;
	const pushState = history.pushState;
	const typeException = 'exception';
	const generateId = () => Math.random().toString(36);
	const getId = () => {

	/// Add Gap between the boxes
	///
	/// @author Sascha Fuchs
	///
	/// @group core - cssgrid
	///
	/// @param {list} $boxes - List with box sizes
	/// @param {string} $gap - Optional column gap
	@function box-gap($boxes, $gap) {
	$box: ();