Max Chuhryaev w3core

Как я пишу код

Краткость - сестра таланта. Поэтому думаем больше, чтобы написать меньше.
Пишем на ES6+ но не забываем, что это всё потом транспилируется в ES5. Некоторые конструкции после транспиляции становятся очень громоздкими. Возможно что-то лучше написать на ES5 более компактно.
Если вы в скопе делаете больше одного прямого обращения к свойству/методу объекта или массива, то есть смысл его перед использованием определить в локальную переменную т.к. свойства не минифицируются. Так же это относится и другим повторяющимся значениям (зачем одно и то же значение писать дважды, если его можно вынести в константу).

function wrong (object) {

	export const allCookie = (string = document.cookie) => Object.fromEntries(string.split('; ').map((v) => v.split(/=(.*)/s).map(decodeURIComponent)))

	export const setCookie = (key, value, duration) => {
	const expires = !duration ? '' : ` expires=${new Date(Date.now() + duration).toGMTString()};`;
	document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};${expires} path=/`;
	};

	export const getCookie = key => {
	const matches = document.cookie.match(new RegExp(
	`(?:^\|; )${encodeURIComponent(key).replace(/([.$?\|{}()[\]\\/+^])/g, '\\$1')}=([^;])`

	const makeColorPreset = (amount) => {
	const steps = [0, 180, 60, 240, 120, 300]
	const diameter = 360
	const lightness = 50
	const saturation = 100

	const size = diameter / amount
	let round = -1
	const colors = Array(amount).fill().map((value, count) => {
	const key = count % steps.length

	Video instruction [here](https://www.youtube.com/watch?v=4k3q8y-Khw4)

	https://nodejs.org/en/
	https://code.visualstudio.com/

	# Plugins
	https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
	https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
	https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

	(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.__NAME__ = factory());
	}(this, (function () {
	return function __NAME__ () {

	}
	})));

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type" />
	<title></title>
	<style type="text/css">
	html, body {margin:0; padding:0; height:100%}

	/**
	* on v.1.0.0
	* ==========
	* This tiny extension allows to process events from elements that are added to the document at a later time.
	* By picking an element that is guaranteed to be present at the time the delegated event handler is attached,
	* you can use delegated events to avoid the need to frequently attach and remove event handlers.
	* It's safe to attach events without waiting for the document to be ready.
	*
	* "selector".on (events, listener, closest)
	*

	/**
	* Swipe v.1.0.0
	* =============
	* Cross-browser implementation of swipe events for the any element
	* by using mouse and touch native events. It allows to handle events such
	* as "swipestart", "swipemove" and "swipeend".
	*
	* @license MIT
	* @author Max Chuhryaev
	*

	/**
	* Calculate brightness value by RGB or HEX color.
	* @param color (String) The color value in RGB or HEX (for example: #000000 \|\| #000 \|\| rgb(0,0,0) \|\| rgba(0,0,0,0))
	* @returns (Number) The brightness value (dark) 0 ... 255 (light)
	*/
	function brightnessByColor (color) {
	var color = "" + color, isHEX = color.indexOf("#") == 0, isRGB = color.indexOf("rgb") == 0;
	if (isHEX) {
	var m = color.substr(1).match(color.length == 7 ? /(\S{2})/g : /(\S{1})/g);
	if (m) var r = parseInt(m[0], 16), g = parseInt(m[1], 16), b = parseInt(m[2], 16);

	/**
	* Recursive Object observer for all existing or passed properties
	*
	* Notes:
	* 1. You can use `delete` operator for any of children properties but not for the top level watchable properties from `object`
	* 2. The watcher will be applied for all existing properties of `object`.
	* To apply watcher for one property please pass `name` of property as argument.
	*
	* @param handler {Function} handler(operation, key, val, old)
	* @param object {Object} Optional