Max Chuhryaev w3core

## cookie.js
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')}=([^;]*)`

## makeColorPreset.js
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

## from-my-experience.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                w3core
                / from-my-experience.md
            
            
              Last active
              May 6, 2020 08:27
            
              
                Как я пишу код
              
          
    Как я пишу код


Краткость - сестра таланта. Поэтому думаем больше, чтобы написать меньше.


Пишем на ES6+ но не забываем, что это всё потом транспилируется в ES5. Некоторые конструкции после транспиляции становятся очень громоздкими. Возможно что-то лучше написать на ES5 более компактно.


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


function wrong (object) {

  
## steps.txt
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

## wrapper.js
(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__ () {

  }
})));

## index.html
<!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.js
/**
 * 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.js
/**
 * 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
 *

## brightnessByColor.js
/**
 * 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);

## watch.js
/**
 * 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
	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