/ Gists

Gists

On gists

Inline horizontal rule

CSS CSS trick

liner.scss #

// https://codepen.io/kcko/pen/qBrpVjO

.liner {
  display: flex;
  align-items: flex-start;
  text-align: center;

    &:before {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: #D66853;
    min-width: 20px;
    margin: auto;
  }
  
  
  &:after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: #D66853;
    min-width: 20px;
    margin: auto;
  }

  &:after {
    margin-left: 20px;
  }
    &:before {
    margin-right: 20px;
  }
}
On gists

Objects

JS oneliners

demo.js #

// https://blog.bitsrc.io/common-js-development-skills-5053f0a74ced

// Clone object
const _obj = { a: 0, b: 1, c: 2 };
const obj = { ..._obj };
const obj = JSON.parse(JSON.stringify(_obj));
// obj => { a: 0, b: 1, c: 2 }


// Merge objects
const obj1 = { a: 0, b: 1, c: 2 };
const obj2 = { c: 3, d: 4, e: 5 };
const obj = { ...obj1, ...obj2 };
// obj => { a: 0, b: 1, c: 3, d: 4, e: 5 }
On gists

Arrays

JS oneliners

demo.js #

// Clone array
const _arr = [0, 1, 2];
const arr = [..._arr];
// arr => [0, 1, 2]


// Merge array
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2];
// arr => [0, 1, 2, 3, 4, 5];


// Deduplicated array
const arr = [...new Set([0, 1, 1, null, null])];
// arr => [0, 1, null]


// Obfuscated / randomize array
const arr = [0, 1, 2, 3, 4, 5].slice().sort(() => Math.random() - .5);
// arr => [3, 4, 0, 5, 1, 2]


// Empty array
const arr = [0, 1, 2];
arr.length = 0;
// arr => []


// Insert member at the beginning of the array
let arr = [1, 2];
arr.unshift(0);
arr = [0].concat(arr);
arr = [0, ...arr];
// arr => [0, 1, 2]


// Insert members at the end of the array
let arr = [0, 1]; 
arr.push(2);
arr.concat(2);
arr[arr.length] = 2;
arr = [...arr, 2];
// arr => [0, 1, 2]


// Count number of array members
const arr = [0, 1, 1, 2, 2, 2];
const count = arr.reduce((t, v) => {
 t[v] = t[v] ? ++t[v] : 1;
 return t;
}, {});
// count => { 0: 1, 1: 2, 2: 3 }


// Get random array member
const arr = [0, 1, 2, 3, 4, 5];
const randomItem = arr[Math.floor(Math.random() * arr.length)];
// randomItem => 1


// Create an array of specified length
const arr = [...new Array(3).keys()];
// arr => [0, 1, 2]

const arr = new Array(3).fill(0);
// arr => [0, 0, 0]
On gists

Generate range random numbers

JS oneliners

demo.js #

const RandomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
const num = RandomNum(1, 10); // 5
On gists

URL query parameters

JS oneliners

demo.js #

const params = new URLSearchParams(location.search.replace(/\?/ig, "")); // location.search = "?name=test&sex=man"
params.has("test"); // true
params.get("sex"); // "man"
On gists

Generate random ID

JS oneliners

demo.js #

const RandomId = len => Math.random().toString(36).substr(3, len);
const id = RandomId(10);
// id => "xdeguewg1f"
On gists

Flex / Grid with border-bottom on each row

CSS CSS trick

example.html #

<!-- 

https://jsbin.com/rekekomexa/1/edit?html,css,output

-->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <h3>GRID</h3>
  <section class="grid">
    <div>AAA</div><div>AAA</div>
	<div class="line"></div>
    <div>BBB</div><div>BBB</div>
	 <div class="line"></div>
    <div>CCC</div><div>DDD</div>
	 <div class="line"></div>
  </section>
  
  
  <h3>FLEX</h3>
  <section class="flex">
    <div>AAA</div><div>AAA</div>
	<div class="line"></div>
    <div>BBB</div><div>BBB</div>
	<div class="line"></div>
    <div>CCC</div><div>DDD</div>
	<div class="line"></div>
  </section>

</body>
</html>
On gists

Add and Remove Rules Directly to Stylesheets

JavaScript

usage.js #

function addCSSRule(sheet, selector, rules, index) {
	if(sheet.insertRule) {
		sheet.insertRule(selector + "{" + rules + "}", index);
	}
	else {
		sheet.addRule(selector, rules, index);
	}
}

// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");
On gists

CSS variables (get/set + javascript)

•
Popular ⭐ JavaScript CSS CSS trick

usage.js #

// Getting a CSS Variable's Value
getComputedStyle(document.documentElement) // or specific element
    .getPropertyValue('--my-variable-name'); // #999999
    
  
// Setting a CSS Variable's Value
document.documentElement.style // or specific element
    .setProperty('--my-variable-name', 'pink');
    
    
// OR
var root = document.querySelector(':root'); // = document.documentElement
On gists

Vlastní validační pravidlo na prvek

Nette Nette-Forms

rule.php #

<?php

$form->addEmail('iEmail')
	->addRule(function($control) {
		return $this->user->checkEmail($control->value)
});