Audun Meek Olsen audunolsen

Create HTML DOM Element Objects With Ease

A helper function which lets you create HTML DOM Element Objects where tagtype, ID and classes are set through basic CSS selector syntax. Pass an object with any arbitrary key value pairs as a second argument and this will set the element's other attributes. If a tagtype isn't defined a div is created.

createElement = (selectorName, attributes) ->

    identifiers = selectorName.match /(?=^[a-z|A-Z]|\.|#).+?(?=\.|#|$)/g
    identifiers =
        tag     : if (ref = identifiers[0]).charAt(0) not in [".", "#"] then ref else "div"
        id      : if (ref = identifiers.filter((str) => str.charAt(0) is "#")[0]) then ref.substring 1

c( 'cls' i === 3 && 'third', e.size === 'xl' ? 'x-large' : 'small', { variableName } )

	oneline = (strings, ...values) => {

	let interpolated = "", raw = strings.raw, ref;
	for (let [i, string] of raw.entries())
	interpolated += ((ref = values[i-1]) ? ref : "") + string;

	return interpolated
	.split("\n")
	.map((line, i, lines) =>
	/\\$/.test((ref = line.trim())) ? ref.slice(0, -1) :

	/* Check if any part of element is visible inside viewport – vertical only, one-liner.
	*
	* Inspired by @StokeMasterJack's reply to a gist thread about element visibility inside the browser:
	* https://gist.github.com/davidtheclark/5515733#gistcomment-2113205
	*
	* I needed a vertical only one and wanted to rewrite it to be as short as possible w/
	* ES6's destructuring, optional parameters and arrow function implicit returns
	*
	* @global
	* @param1 {HTMLElement} - The element to check if visibile in viewport.

	/*

	I've got the following file structure and want a quick way to set all my local Roboto fonts.

	../assets/fonts/Roboto
	Roboto-Black.woff
	Roboto-Black-Italic.woff
	Roboto-Bold.woff
	Roboto-Bold-Italic.woff
	Roboto-Light.woff

	module.exports = {

	plugins: [
	"stylelint-order",
	]

	rules: {

	/* Rules from https://stylelint.io/user-guide/rules/list
	Fetched 25.03.2020 */

	/*

	SCRIPT WHICH LOGS MISC MESSAGES

	Parameters:

	--success \|\|
	--error \|\|
	--warning \|\|
	--info boolean Type of log entry, picks first argument found

	const random = ({array: a, min, max, decimal = false, decimalPrecision = 2}) => {

	if (Array.isArray(a)) return a[Math.floor(Math.random() * a.length)];

	else if ([min, max].every(n => typeof n === "number")) {

	min = Math.ceil(min),
	max = Math.floor(max);

	let num = Math.floor(Math.random() * (max - min + 1)) + min;

	/*

	the npm module "classnames" has 5,549,574 weekly downloads
	as of 06.11.2020. It has an unpacked size of 16.3 kB.
	Why TF is such a trivial package so popular given its size?

	Here's a 0.048 kB alternative:

	*/

	/* eslint-disable */

	/*

	type Directions {
	top: boolean;
	left: boolean;
	bottom: boolean;
	right: boolean;
	horizontal: boolean;