Skip to content

Instantly share code, notes, and snippets.

Evgeni Dmitriev thybzi

Block or report user

Report or block thybzi

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@thybzi
thybzi / types.styl
Last active Apr 28, 2016
Stylus detected types — for use with `typeof()` and `is a`: http://codepen.io/thybzi/pen/MKMGoK
View types.styl
/*! bool, null */
typeof() // -> "null"
typeof(null) // -> "null"
typeof(undefined) // -> "ident"
typeof(false) // -> "boolean"
typeof(no) // -> "ident"
/*! color */
typeof(#ff0000) // -> "rgba"
typeof(#f00) // -> "rgba"
View combinate.styl
//**
//* Put CSS combinator between current selector and subj -- in direct and reversed order
//* Apply CSS rules block to resulting selector
//* Example output: .parent .curr + .subj, .parent .subj + .curr { color: red; }
//* Limitation: current selector must have a separent level in selector tree (e.g. & > .curr)
//* @param {string} subj Another selector to combinate with
//* @param {string='+'} comb CSS combinator (can be: '+', '~', '>' or ' ')
//*/
combinate(subj, comb='+')
scurr = selectors()[-1]
@thybzi
thybzi / ostap.styl
Last active Feb 23, 2016
Ostap Bender: The Great Combinator (of Stylus): http://codepen.io/thybzi/pen/PZMPob
View ostap.styl
// Get both inverse and forward combinated subject and current selector
// Example: .parent > .curr + .subj, .parent > .subj + .curr
// If subj is omitted, get current selector combinated with itself
// Example: .parent > .curr + .curr
// Limitation: Fails if parent selector level contains more that one combinator
// Limitation: Nesting calls cause exception
combinate(comb, subj='^[-1..-1]')
parts = ('&' + pad-combinator(comb) + subj)
if subj != '^[-1..-1]'
push(parts, combinate-inv(comb, subj))
@thybzi
thybzi / less2styl.html
Last active Mar 7, 2016
less2styl (ivi style)
View less2styl.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script>
function fade2rbga(match, color, percentage) {
return 'rgba(' + color + ', ' + (parseFloat(percentage) / 100) + ')';
}
function less2styl() {
View position.styl
/**
* Set `position` property, as well as `top`, `right`, `bottom`, `left` properties
* After the first argument, accepts 1 to 4 additional args, ordered and working "as for padding"
* To skip any of values, set it to `null`
* @mixin
* @example position(absolute, 5px, 10px, 0, auto)
* @example position(absolute, 5px, null, 0, auto)
* @example position(fixed, 5px, 10px)
* @example position(fixed, 0)
*/
View position.less
/**
* Apply position value, and 0 to 4 offset values
* Offsets (length or `auto`) are treated similar to `padding` value
* Any of offsets may be `null`, in that case it is counted but not used
* @example .position(absolute, 5px, 2px) // position: absolute, 5px for top and bottom, 2px for left and right
* @example .position(relative, 5px, 2px, 3px) // position: relative, top: 5px, bottom: 3px, 2px for left and right
* @example .position(fixed, 5px, 2px, null) // position: fixed, top: 5px, nothing for bottom, 2px for left and right
* @example .position(static) // applies just `position: static` (without any offsets)
*/
View createStyle.js
function createStyle(data, useImportant, w) {
var styleElement, styleContent, selector, property, value;
w = w || window;
styleContent = '';
for (selector in data) {
if (!data.hasOwnProperty(selector)) continue;
styleContent += '\n' + selector + ' {\n';
for (property in data[selector]) {
if (!data[selector].hasOwnProperty(property)) continue;
@thybzi
thybzi / resize-svg-path.js
Created Oct 27, 2016
Resize SVG path to 512px height (e.g. for better usage with grunt-webfont)
View resize-svg-path.js
#! /usr/bin/env node
// Usage: node resize-svg-path <currentHeight> <currentPath>
// E.g.: node resize-svg-path 32 "m0,16c0,-8.83656 7.16345,-16 16,-16c8.83655,0 16,7.16344 16,16c0,8.83656 -7.16345,16 -16,16c-8.83655,0 -16,-7.16344 -16,-16zm30,0c0,-7.73198 -6.26801,-14 -14,-14c-7.73199,0 -14,6.26802 -14,14c0,7.73198 6.26801,14 14,14c7.73199,0 14,-6.26802 14,-14zm-14,-1.41422l-3.53552,-3.53554l-1.41425,1.41422l3.53558,3.53554l-3.53558,3.53554l1.41425,1.41422l3.53552,-3.53554l3.53552,3.53554l1.41425,-1.41422l-3.53558,-3.53554l3.53558,-3.53554l-1.41425,-1.41422l-3.53552,3.53554z"
(function () {
'use strict';
// Read command line arguments
var args = process.argv.slice(2);
var parse = require('parse-svg-path');
var scale = require('scale-svg-path');
@thybzi
thybzi / tpl.js
Last active Apr 1, 2019
The lightest JS template engine ever! (And the most unsafe one)
View tpl.js
/**
* The lightest JS template engine ever! (And the most unsafe one)
* Only replaces variables inside {{ }} (without any escaping)
* @param {string} template
* @param {object} data
* @example
* tpl(
* '<div class="{{ classname }}">{{item.title}}</div>',
* { classname: 'ololo', item: { ad: 'zzz', title: 'afffa!!bazinga' } }
* );
@thybzi
thybzi / tpl2.js
Last active Apr 1, 2019
The second lightest JS template engine! (And still so unsafe one)
View tpl2.js
/**
* The second lightest JS template engine! (And still so unsafe one)
* Only replaces variables inside {{ }} (HTML-escaped) and {{{ }}} (unescaped)
* Second lightest after the original https://gist.github.com/thybzi/1e46eb8b23c11d55752ae4ac89a1cd13
* @param {string} template
* @param {object} data
* @returns {string}
* @example
* tpl2(
* '<div class="{{ classname }}">{{{ item.content }}}</div>',
You can’t perform that action at this time.