dandavis rndme

javascript developer

rndme / scroll-prng.css

Created April 17, 2026 06:34

	/* --rnd1k is set from 0 - 1023 seemingly randomly as page is scrolled */

	@property --scrpos {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
	}
	@property --rnd1k {
	syntax: "<number>";
	inherits: true;

rndme / json2css.js

Last active April 9, 2026 21:41

turns json object/array data into literal css variables

	function json2css(o, selector, blnMinify) {

	if(!Array.isArray(o)) {
	let sepItems = blnMinify ? "" : "\n\t",
	sepLines = blnMinify ? "}\n" : ";\n}",
	sepProp = blnMinify ? "" : " ";
	return(`${selector\|\|":root"}${sepProp}{${sepItems}` + Object.entries(o).map(([k, v], i) => {
	return `--${k.replace(/\s/g, "-")}:${sepProp}${JSON.stringify(v).replace(/\\n/g,"\\A")}`;
	}).join(`;${sepItems}`) + `${sepLines}`);
	} // end if !array

rndme / css mixins via attribs.css

Last active April 8, 2026 03:07

behaves like classes, but csv instead of spaces. otherwise pointless?

	[data-mixin] { /* lashes attribs to animation names to load mixins in CSV list */
	animation: 1ms paused --none;
	animation-name: attr(data-mixin type(<custom-ident>#));
	}


	/* mixins are defined here, can have many rules each */
	@keyframes red {from{
	color:red;
	}}

rndme / scroll-driven after content.css

Last active April 9, 2026 22:32

	/* chrome-only at time of writing, but fingers crossed... <style>/* */

	@keyframes cars {
	10% {
	--make: "GMC";
	--country: "USA";
	--kind: "Truck";
	--model: "Sierra";
	}
	20% {

rndme / animations as mixins.css

Created March 22, 2026 05:36

abuse keyframes as mixins, works on non-nested scaler properties


	@function --mix(--name type(<custom-ident>)) {
	result: 1ms paused var(--name);
	}




	@keyframes testMixin {from{
	color:red;

rndme / css-mixins.js

Last active March 21, 2026 06:55

add mixins to css



	function processMixins(sheet) {
	/*
	enables mixins in css. works on <style> tag content and cors-enabled css with link tags like
	<link crossorigin="anonymous" href="..." rel=stylesheet >

	css-based inclusions:

	\/ --uglyBorder {

rndme / esc.js

Last active March 20, 2026 05:59

handy escapes

rndme / elm.js

Created March 20, 2026 05:46

handy element creator

	function Elm(tag = "div", contents = "", attrs = {}) {
	var elm = tag instanceof Element ? tag : document.createElement(tag);
	Object.entries(attrs).forEach(([k, v]) => {
	if(typeof v === "function") return elm.addEventListener(k, v);
	if(k === "dataset") return Object.keys(v).forEach(x => elm.dataset[x] = v[x]);
	elm.setAttribute(k, v);
	});
	if(/</.test(contents)) { elm.innerHTML = contents; } else { elm.append(contents); }
	return elm;
	}//end Elm()

rndme / ael.js

Created March 20, 2026 05:05

handy addEventListener wrapper

	function ael(dest, type, fn, ops){
	let ret={ dest, type, fn, ops, elm: dest };

	if(typeof dest === "string"){
	ret.elm = document;
	ret.fn = function(e){ if(e.target.matches(dest)) return ret.fn.call(this, e, ret); };
	}

	ret.remove = x=>ret.elm.removeEventListener(ret.elm, type, ret.fn, ops);
	ret.add = ael.bind(this, dest);

rndme / cssformat.js

Created December 5, 2025 05:50

css parser formatter

	// dan's naive css formatter for editors
	// reliably parses and formats css using browser's CSS engine:
	// sorts properties in rules, removes property repeats (and fallbacks), removes vendor-specific syntax, and removes comments.

	// punctuationReplacements are executed while quoted strings are removed, making rule content predictable

	////////////////////
	// DOES NOT SUPPORT NESTED RULES - MAINLY TO FORMAT SNIPPETS IN A TEXT EDITOR - NOT PRODUCTION MACHINERY!!!!
	////////////////////