Skip to content

Instantly share code, notes, and snippets.

View Realetive's full-sized avatar

Realetive Realetive

37 followers · 7 following
View GitHub Profile
@Realetive
Realetive / README.md
Created October 5, 2016 13:01 — forked from addyosmani/README.md
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@Realetive
Realetive / index.html
Created August 20, 2016 10:28
<html lang="ru">
<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="mozgoboj-map.js"></script>
<style>
#google-map {
height: 500px;
@Realetive
Realetive / CSS Modules Pitches.md
Created July 14, 2016 19:08 — forked from dimitrikochnev/CSS Modules Pitches.md

Twin Components

Я также спросил это на GitHub. Предположим, есть компоненты Signin и Signup. Они близнецы:

Signup:

<main>
  <h1 className={styles.h1}>Sign Up</h1>
@Realetive
Realetive / stringParser.php
Last active June 29, 2016 10:31
Фильтр MODX, парсит строку и выводит по шаблону: [[+placeholder:stringParser=`{ "delimiter" : ", ", "tpl" : "@inline [[+item]]" }`]]
<?php
/**
* MODX output filter
* Parse string from [[+placeholder]] and wrap every item with tpl.
* Parameters as JSON keys, tpl can be set as chunk name :
* [[+placeholder:stringParser=`{ "delimiter" : ", ", "tpl" : "my_chunk`]]
* or with @INLINE:
* [[+placeholder:stringParser=`{ "delimiter" : ", ", "tpl" : "@INLINE [[+item]]" }`]]
* Requrements: pdoTools.
*/
@Realetive
Realetive / pdoJSON.modx
Created June 22, 2016 00:55
Use pdoMenu for generate JSON tree of resources.
[[pdoMenu:striptags:htmlentities:strip?
&lastClass=`last`
&firstClass=``
&hereClass=``
&parentClass=``
&rowClass=``
&outerClass=``
&innerClass=``
&levelClass=``
&selfClass=``
@Realetive
Realetive / autoMediaSource.php
Created June 12, 2016 18:21
Auto set up Media Source for MS2Gallery by template
<?php
if ( $modx->event->name == 'OnDocFormSave' && $mode == modSystemEvent::MODE_NEW ) {
switch ( $resource->get( 'template' ) ) {
case 1:
$properties = $modx->fromJSON( $resource->get( 'properties' ) );
$properties[ 'ms2gallery' ] = array( 'media_source' => 2 );
break;
default:
break;
@Realetive
Realetive / autoTemplate.php
Created June 12, 2016 03:46
Plugin for setup template by parent resource
<?php
if ( $modx->event->name == 'OnDocFormRender' && $mode == modSystemEvent::MODE_NEW ) {
$template = $modx->runSnippet( 'pdoField', array(
"id" => $_REQUEST['parent']
, "field" => "template"
, "top" => 0
) );
switch ( $template ) {
case 1:
$template = 2;
@Realetive
Realetive / .gitify.yaml
Created May 10, 2016 03:35
Example of .gitify file
data_directory: ../_data/
backup_directory: ../_backup/
data:
contexts:
class: modContext
primary: key
context_settings:
class: modContextSetting
primary:
- context_key
@Realetive
Realetive / vertical-rhytm__checker.css
Last active April 5, 2016 04:52
Fast way to check vertical rhythm (for 24px line-height)
/**
* By Zell Liew
* from http://zellwk.com/blog/web-typography-broken/
*/
.vertical-rhytm__checker {
background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 23px, red 23px, red 24px);
background-position: 0 -6px; /* Moves baseline grid */
}
@Realetive
Realetive / highlight.css
Created January 27, 2016 11:13
JS Output highlight
pre { outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }