/ Gists

Gists

On gists

Recursive SCSS mixins and functions

SCSS

example.scss #

// 1)

@mixin test($val) {
  width: $val;
  height: $val;
  @if $val > 0 {
    @include test($val - 1);
  }
}

.x
{
  @include test(5);
}

/*

.x {
  width: 5;
  height: 5;
  width: 4;
  height: 4;
  width: 3;
  height: 3;
  width: 2;
  height: 2;
  width: 1;
  height: 1;
  width: 0;
  height: 0;
}

*/


// 2)
// @example: https://codepen.io/_lacus/pen/xwZvvx

@mixin opacityStair($fade: 0.9, $step: 0.1) {
	// Recursive sass example
    
	& + * {
		opacity: $fade;
		@if $fade <= $step {
		    // exit
		} @else {
			@include opacityStair($fade - $step, $step)
		}
	}
}

div {
	@include opacityStair();
}


div div {
  width: 100%;
  height: 33px;
  background-color: green;
}

/*
  
  div + * {
  opacity: 0.9;
}

div + * + * {
  opacity: 0.8;
}

div + * + * + * {
  opacity: 0.7;
}

div + * + * + * + * {
  opacity: 0.6;
}

div + * + * + * + * + * {
  opacity: 0.5;
}

div + * + * + * + * + * + * {
  opacity: 0.4;
}

div + * + * + * + * + * + * + * {
  opacity: 0.3;
}

div + * + * + * + * + * + * + * + * {
  opacity: 0.2;
}

div + * + * + * + * + * + * + * + * + * {
  opacity: 0.1;
}

div div {
  width: 100%;
  height: 33px;
  background-color: green;
}

  
*/


// 3) 
// @link: https://codepen.io/mirisuzanne/pen/bBdEXm

// define your colors
$colors: (
  'pink': #E2127A,
  'brand-primary': 'pink',
  'site-background': 'brand-primary',
);

// color function
@function color($color) {
  // our conditional statement
  @if map-get($colors, $color) {
    // follow the path one step
    $new-color: map-get($colors, $color);

    // recursion!
    $color: color($new-color);
  }
  
  @return $color;
}

// use your new function!
body {
  background: color('x');
}

// other styles...
body {  
  font-size: 8vmin;
  font-family: monospace;
  text-align: center;
  padding: 40vmin 2em;

  &::after {
    content: "‘site-background’ == #{color('site-background')}";
  }
}

/*


@charset "UTF-8";
body {
  background: "x";
}

body {
  font-size: 8vmin;
  font-family: monospace;
  text-align: center;
  padding: 40vmin 2em;
}

body::after {
  content: "‘site-background’ == #E2127A";
}
*/
On gists

Ref hell (yml docker container)

•
AW

DefaultSettings.php #

<?php

namespace Andweb\Yml;
use Nette;

class DefaultSettings
{
	use Nette\SmartObject;

	protected $arr;

	public function getDefaultSettings()
	{
		
		$this->arr['version'] = '3.6';
		$this->arr['ports']['mode'] = 'host';


		$this->arr['labels']['name'] = 'aw-awesome-hosting';
		$this->arr['labels']['value'] = 'yes';


		$this->arr['deploy']['replicas'] = 1;
		$this->arr['deploy']['restart_policy']['delay'] = "10s";
		$this->arr['deploy']['restart_policy']['window'] = "30s";
		$this->arr['deploy']['update_config'] = [
			'parallelism' => 1,
			'delay' => '30s',
			'order' => 'stop-first',
		];

		
		$this->arr['deploy']['resources']['reservations'] = [
			'cpus' => '0.25',
			'memory' => '1G',
		];

		$this->arr['networks']['external'] = "true"; 

		return $this->arr;
	}


}
On gists

Neon - konfigurace přes službu a metody

Nette Nette-Neon Nette-Tricks

config.neon #

services:
    - Config
reCaptcha:
    siteKey: @Config::getSiteKey()
    secretKey: @Config::getSecretKey()
    methodName: 'addReCaptcha' # optional
On gists

Promises

jQuery

promises.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>
</head>
<body>
    
<table border=1>
    <tr>
        <td>Num</td>
        <td>State</td>
    </tr>
    <tr>
        <td><a href="">1</a></td><td></td>
    </tr>
    <tr>
        <td><a href="">2</a></td><td></td>
    </tr>
    <tr>
        <td><a href="">3</a></td><td></td>
    </tr>
</table>

<script>
var promises = [];
var $a = $('a');
$.each($a, function() {
    var $this = $(this);

    var promise = $.get('/rq.php?num=' + $this.text());
    promise.done(function() {
        $this.parent().next().text('done!');
    });
    promises.push(promise);
});



if (jQuery.when.all===undefined) {
    jQuery.when.all = function(deferreds) {
        var deferred = new jQuery.Deferred();
        $.when.apply(jQuery, deferreds).then(
            function() {
                deferred.resolve(Array.prototype.slice.call(arguments));
            },
            function() {
                deferred.fail(Array.prototype.slice.call(arguments));
            });

        return deferred;
    }
}


$.when.all(promises).then(function(schemas) {
     console.log("DONE", this, schemas); // 'schemas' is now an array
}, function(e) {
     console.log("My ajax failed");
});


// $.when.apply($, promises).then(function() {
//    console.log(arguments);
//    console.log('DONE');
   
   
// });
</script>

</body>
</html>
On gists

PHP Factory

PHP

factory.php #

<?php 
 

$arr = [
    'company' => 'AMI',
    'employeeCount' => 25,
    'years' => 12,
    'bankInfo' => [
        'account' => 'xxxx',
        'money' => '2 billions'
    ]
];


echo F::create()->getResource($arr)->formatToXml();

class F
{
    private $resource;

    public static function create()
    {
        return new self;
    }

    public function getResource($resource)
    {
        $this->resource = $resource;
        return $this;
    }

    public function formatToJson()
    {
        return json_encode($this->resource);
    }

    public function formatToArray()
    {
        return $this->resource;
    }

    public function formatToXml()
    {
        $xml = new SimpleXMLElement('<root/>');
        array_walk_recursive($this->resource, array ($xml, 'addChild'));
        return $xml->asXML();
    }


}
On gists

JS / jQuery: Caching selectors

JavaScript

caching.js #

function Selector_Cache() {
    var collection = {};
    function get_from_cache( selector ) {
        if ( undefined === collection[ selector ] ) {
            collection[ selector ] = $( selector );
        }
        return collection[ selector ];
    }
    return { get: get_from_cache };
}

var selectors = new Selector_Cache();

// Usage $( '#element' ) becomes
selectors.get( '#element' );
On gists

JS - round, floor, ceil obj - Decimal precision

JavaScript-OOP JavaScript

decimalperecision.js #

var DecimalPrecision = (function(){
	if (Number.EPSILON === undefined) {
		Number.EPSILON = Math.pow(2, -52);
	}
	this.round = function(n, p=2){
		let r = 0.5 * Number.EPSILON * n;
		let o = 1; while(p-- > 0) o *= 10;
		if(n < 0)
			o *= -1;
		return Math.round((n + r) * o) / o;
	}
	this.ceil = function(n, p=2){
		let r = 0.5 * Number.EPSILON * n;
		let o = 1; while(p-- > 0) o *= 10;
		if(n < 0)
			o *= -1;
		return Math.ceil((n + r) * o) / o;
	}
	this.floor = function(n, p=2){
		let r = 0.5 * Number.EPSILON * n;
		let o = 1; while(p-- > 0) o *= 10;
		if(n < 0)
			o *= -1;
		return Math.floor((n + r) * o) / o;
	}
	return this;
})();
On gists

Foreach vs array_reduce

•
PHP

gistfile1.aw #

<?php

$arr = array(
	array('a', '1'),
	array('b', '2'),
);


// klasicky
$out = array();
foreach ($arr as $v) {
	$out[$v[0]] = $v[1];
}

// funkcionalne
$out2 = array_reduce($arr, function($out2, $v) {
	$out2[$v[0]] = $v[1];
	return $out2;
});

echo ($out === $out2) . "\n";
print_r($out);
print_r($out2);

/* vystup:

1
Array
(
    [a] => 1
    [b] => 2
)
Array
(
    [a] => 1
    [b] => 2
)

*/
On gists

Insert A Random String from List in MySQL

MySql MySql tricks

gistfile1.txt #

UPDATE tablename 
SET columnname  = ELT(0.5 + RAND() * 6, 'value 1','value 2','value 3','value 4','value 5','value 6')
On gists

Change URL - pushstate

JavaScript

example.html #

<html>
<head>
<link rel="stylesheet" type="text/css" href="url_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function changeurl(url)
{
 var new_url="/Your URL/"+url;
 window.history.pushState("data","Title",new_url);
 document.title=url;
}
</script>
</head>
<body>
<div id="wrapper">

<div id="url_link">
 <p id="url_label">Click On Languages To Change URL</p>
 <li onclick="changeurl('PHP');">PHP</li>
 <li onclick="changeurl('HTML');">HTML</li>
 <li onclick="changeurl('CSS');">CSS</li>
 <li onclick="changeurl('JavaScript');">JavaScript</li>
 <li onclick="changeurl('jQuery');">jQuery</li>
</div>

</div>
</body>
</html>