Skip to content

Instantly share code, notes, and snippets.

View varya's full-sized avatar
🏠
Working from home

Varya Stepanova varya

🏠
Working from home
313 followers · 5 following
View GitHub Profile
@varya
varya / index.html
Created March 24, 2015 18:18
BEM way to CSS
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="layout">
<div class="layout__sidebar">
<ul class="sidemenu">
<li class="sidemenu__item">
<a class="sidemenu__link" href="#">Link 1</a>
@varya
varya / index.html
Created March 24, 2015 17:54
Old school page
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="sidebar">
<ul id="mainMenu">
<li><a href="#">Link 1</a></li>
<li class="active"><a href="#">Link 2</a></li>
@varya
varya / config.js
Created February 18, 2015 10:18
gulp-express error
'use strict';
(function(module) {
var options = {
// Application options
appPath: './lib/app/app.js',
port: 8080,
livereloadPort: 35729,
@varya
varya / gist:98ea7e5a9192f5bdac78
Created December 10, 2014 16:24
-------------------------------------------------------
Yandex internet.yandex.ru
-------------------------------------------------------
10.12.2014 20:23
# Поздравляем, вы в интернете! #
ip: 217.30.179.246
ipv6: -
Это Хельсинки
@varya
varya / gist:84058c775f9725bbdb23
Last active August 29, 2015 14:09
Kss parser

Есть CSS/SASS/LESS код с KSS-комеентариями. KSS-комментарий — это блок комментариев, заканчивающийся строкой "Styleguide n", где n — номер параграфа (1, 2.5, 334.5.7.1). Блоком KSS разметки может быть как многострочный комментарий, так и группа инлайновых комментариев, идуших друг за другом. Блок KSS-разметки документирует код, следующий за ним. Все комментарии, которые не являются KSS-блоками, относятся к коду и должны быть включены в него. Может быть код без документации (в начале файла). И может быть документация без кода, если 2 блока KSS-разметки идут друг за другом, и между ними нет кода. Задача: распарсить документ на массив пар kss - код.

На данный момент есть 2 незаконченных решения.

  1. Жутко медленное на Ometa: https://github.com/varya/sc5-styleguide/blob/47ab9e1e0f9248304a704e7c20c8fb78837ae593/lib/modules/kss-blocks-parser.ometajs

  2. На регэкспах: https://github.com/varya/sc5-styleguide/blob/98079f4fe512eceb7ff537313536a2c1b0edc1e0/lib/modules/kss-splitter.js

@varya
varya / gist:9c868c9bc9eb7910a9c3
Created October 24, 2014 11:59
/*
html:
<sg:wrapper>
<div class="wrapper" style="background: red; padding: 0.5em;">
<sg-wrapper-content/>
</div>
</sg:wrapper>
*/
var re = /<sg\:wrapper>([\s\S]*?)<\/sg\:wrapper>/g,
@varya
varya / gist:915847e2ec7b16e42d9e
Created October 21, 2014 09:32
varyas-mbp:gonzales-try varya$ git diff _styleguide_variables.scss
diff --git a/_styleguide_variables.scss b/_styleguide_variables.scss
index 9645818..54a9e72 100644
--- a/_styleguide_variables.scss
+++ b/_styleguide_variables.scss
@@ -1,6 +1,11 @@
-$color-donatello: #841d85;
-$color-leonardo: #0000ff;
-$color-michelangelo: #FFA500;
-$color-raphael: #ff0000;
@varya
varya / gist:aada74acb9338ce67cf2
Last active August 29, 2015 14:06
Clickable web component
var myButton = Object.create(HTMLElement.prototype);
myButton.createdCallback = function () {
this.addEventListener('click', function(){
// do what you want
})
};
document.registerElement('my-button', { prototype: myButton });
@varya
varya / gist:63c42bc7d7e6a57e7d02
Created August 6, 2014 04:02 
code

``` code ```

@varya
varya / gist:faa8b3f6b3b8fe4c6088
Last active August 29, 2015 14:03
Перевод статьи Макса
Разработка интерфейсов уже не про отдельные фреймворки. Все инструменты доступны, и наша задача сводится только к выбору. А чтобы
сделать правильный выбор, нужно начать с общего подхода, с <strong>методологии</strong>. Но большинство методологий разработаны
большими компаниями. Так ли они применимы в маленьких или нужно переизобретать их, чтобы применять в нашей ситуации?
Скорее всего вы уже знаете об одной из таких методологий, разработанной <a href="http://yandex.ru">Яндексом</a>б это
<a href="http://bem.info">БЭМ</a>. БЭм утверждает, что трех сущностей — <strong>б</strong>локов, <strong>э</strong>лементов и
<strong>м</strong>одификаторов — хватает для того, чтобы написать HTML и CSS, задать коду структуру, использовать компонентный
подход и масштабировать проект до самого высокого уровня.
Я сам какое-то время назад работал в Яндексе и видел, как эта методология работает на больших проектах. В Яндексе БЭМ используют