Skip to content

D
developer-guide
Commit e052fe4f authored by Тест Карнаухов's avatar Тест Карнаухов
Browse files
Options

fix(links): transfer repo from 111 to zk

parent 73168367
Hide whitespace changes
Inline Side-by-side
Showing with 329 additions and 329 deletions
1-standards/1.1.1-html.md
View file @ e052fe4f
......@@ -95,7 +95,7 @@
</span>
```
- После закрывающихся тегов не должно быть лишних пробелов и/или табов. Для автоудаления можно настроить свой редактор кода. Для Sublime Text можно посмотреть в репе [sputnik](https://github.com/ZK/sputnik/wiki/Софт).
- После закрывающихся тегов не должно быть лишних пробелов и/или табов. Для автоудаления можно настроить свой редактор кода. Для Sublime Text можно посмотреть в репе [sputnik](//github.com/ZK/sputnik/wiki/Софт).
```html
<!-- Плохо -->
......@@ -198,9 +198,9 @@
</html>
```
Подробнее познакомиться с атрибутом `lang` можно в [спецификации](http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element).
Подробнее познакомиться с атрибутом `lang` можно в [спецификации](//www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element).
Список кодов различных языков на [Sitepoint](http://reference.sitepoint.com/html/lang-codes).
Список кодов различных языков на [Sitepoint](//reference.sitepoint.com/html/lang-codes).
### <a name="html-ie-compatibility-mode">Режим совместимости Internet Explorer</a>
......@@ -212,11 +212,11 @@ IE поддерживает использование специального
Если сайт будет находиться на собственном хостинге, то следует убрать этот `meta`-тег и настроить хостинг для определения IE и добавления специальных заголовков.
Для получения дополнительной информации можно ознакомиться с обсуждением на [Stack Overflow](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e).
Для получения дополнительной информации можно ознакомиться с обсуждением на [Stack Overflow](//stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e).
### <a name="html-encoding">Кодировка символов</a>
Явно объявив кодировку символов, вы быстро и легко обеспечите правильное отображение вашего контента. При этом, вы сможете избежать использования [символьных сущностей](http://www.w3schools.com/html/html_entities.asp) в вашем HTML-коде, при условии, что их кодировка совпадает с кодировкой документа (как правило, utf-8).
Явно объявив кодировку символов, вы быстро и легко обеспечите правильное отображение вашего контента. При этом, вы сможете избежать использования [символьных сущностей](//www.w3schools.com/html/html_entities.asp) в вашем HTML-коде, при условии, что их кодировка совпадает с кодировкой документа (как правило, utf-8).
```html
<head>
......@@ -249,9 +249,9 @@ IE поддерживает использование специального
```
Ссылки на спецификацию HTML5:
* [Использование тега `link`](http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element)
* [Использование тега `style`](http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element)
* [Использование тега `script`](http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element)
* [Использование тега `link`](//www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element)
* [Использование тега `style`](//www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element)
* [Использование тега `script`](//www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element)
### <a name="html-absolute-and-relative-paths">Абсолютные и относительные пути к ресурсам</a>
......@@ -261,7 +261,7 @@ IE поддерживает использование специального
- Для страниц сайта, находящихся в поддиректории (обычно на хостинге ZK или заказчика).
- В JavaScript, например, для указания изображения метки на Яндекс.Картах или Google Maps.
Подробнее можно почитать на [htmlbook.ru](http://htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki).
Подробнее можно почитать на [htmlbook.ru](//htmlbook.ru/samhtml/ssylki/absolyutnye-i-otnositelnye-ssylki).
### <a name="html-file-name">Название файлов</a>
......@@ -313,7 +313,7 @@ contacts.html
Логические атрибуты одни из тех, которые не требуют объявленного значения. XHTML требует от вас задать значение, но в HTML5 нет такого требования.
За подробной информацией обратимся к разделу [о логических атрибутах на WhatWG](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes):
За подробной информацией обратимся к разделу [о логических атрибутах на WhatWG](//www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes):
> Наличие логического атрибута у элемента говорит об истинном его значении, а отсутствие атрибута — о ложном.
......@@ -416,10 +416,10 @@ contacts.html
```
<!-- Плохо -->
Мы пользуемся поисковой системой <a href="http://yandex.ru/">Яндекс</a>.
Мы пользуемся поисковой системой <a href="//yandex.ru/">Яндекс</a>.
<!-- Хорошо -->
Мы пользуемся поисковой системой <a href="http://yandex.ru/" target="_blank" rel="nofollow">Яндекс</a>.
Мы пользуемся поисковой системой <a href="//yandex.ru/" target="_blank" rel="nofollow">Яндекс</a>.
```
- Телефоны, email-адреса и Skype-контакт должны быть ссылками:
......@@ -487,7 +487,7 @@ contacts.html
- Если JavaScript изменяет вид страницы, обязательно делать это при помощи смены CSS-классов, а не путём правки атрибута `style` элемента.
- Если в форме элемент удаляется (скрывается), он должен удаляться и из [DOM](http://ru.wikipedia.org/wiki/Document_Object_Model).
- Если в форме элемент удаляется (скрывается), он должен удаляться и из [DOM](//ru.wikipedia.org/wiki/Document_Object_Model).
### <a name="html-comments">Комментирование кода</a>
......@@ -496,4 +496,4 @@ contacts.html
----------------
[Далее: Pug](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.1.2-pug.md)
[Далее: Pug](./1-standards/1.1.2-pug.md)
1-standards/1.1.2-pug.md
View file @ e052fe4f
......@@ -2,15 +2,15 @@
**Статус:** черновик.
На проекте используется шаблонизатор [Pug](http://pugjs.com/) (бывш. [Jade](http://jade-lang.com/)) для компиляции в HTML.
На проекте используется шаблонизатор [Pug](//pugjs.com/) (бывш. [Jade](//jade-lang.com/)) для компиляции в HTML.
Полезные ссылки для ознакомления:
* [pugjs.com](http://pugjs.com/) - документация Pug.
* [jade-lang.com](http://jade-lang.com/) - документация Jade.
* [naltatis.github.io/jade-syntax-docs](http://naltatis.github.io/jade-syntax-docs/) - ещё одна документация Jade.
* [jsman.ru/jade/](http://jsman.ru/jade/) - ещё одна документация Jade.
* [html2jade.org](http://html2jade.org/) - конвертация HTML в Jade и Jade в HTML.
* [html2jade.aaron-powell.com](http://html2jade.aaron-powell.com/) - и еще один инструмент для конвертации HTML → Jade.
* [pugjs.com](//pugjs.com/) - документация Pug.
* [jade-lang.com](//jade-lang.com/) - документация Jade.
* [naltatis.github.io/jade-syntax-docs](//naltatis.github.io/jade-syntax-docs/) - ещё одна документация Jade.
* [jsman.ru/jade/](//jsman.ru/jade/) - ещё одна документация Jade.
* [html2jade.org](//html2jade.org/) - конвертация HTML в Jade и Jade в HTML.
* [html2jade.aaron-powell.com](//html2jade.aaron-powell.com/) - и еще один инструмент для конвертации HTML → Jade.
## 1. Назначение папок
......@@ -138,7 +138,7 @@ input.input-text(
## 5. Переносы строк
- Добавляйте перенос строки для однотипных блоков с множественным вложением элементов. В лучшем случае используйте [примесь (mixin)](http://jade-lang.com/reference/#mixins).
- Добавляйте перенос строки для однотипных блоков с множественным вложением элементов. В лучшем случае используйте [примесь (mixin)](//jade-lang.com/reference/#mixins).
```pug
//- Плохо
......@@ -211,7 +211,7 @@ meta(name='msthemecompatible' content='no')
## 7. Пиши меньше, делай больше или используйте примеси!
Для однотипных и повторяющихся строк кода имеет смысл использовать [примеси (mixins)](http://jade-lang.com/reference/#mixins) и указать только данные.
Для однотипных и повторяющихся строк кода имеет смысл использовать [примеси (mixins)](//jade-lang.com/reference/#mixins) и указать только данные.
```pug
mixin tools(list)
......@@ -242,5 +242,5 @@ mixin tools(list)
----------------
[Пред .: HTML](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.1.1-html.md)
[Далее: CSS](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.1-css.md)
[Пред .: HTML](./1-standards/1.1.1-html.md)
[Далее: CSS](./1-standards/1.2.1-css.md)
1-standards/1.2.1-css.md
View file @ e052fe4f
......@@ -280,7 +280,7 @@ input[type="text"] {
- Склеивайте CSS-файлы в один файл и минифицируйте.
- Компилируйте CSS-код в один файл с помощью препроцессоров, например, Stylus, Sass или Less.
Для получения дополнительной информации следует ознакомиться со [статьей Стива Соудерса](http://www.stevesouders.com/blog/2009/04/09/dont-use-import/).
Для получения дополнительной информации следует ознакомиться со [статьей Стива Соудерса](//www.stevesouders.com/blog/2009/04/09/dont-use-import/).
```html
<!-- Используйте тег link -->
......@@ -294,7 +294,7 @@ input[type="text"] {
## <a name='#css-media-queries'>Место для media query</a>
Помещайте медиавыражения настолько близко к соответствующим наборам правил, насколько это возможно. Не объединяйте их в отдельную таблицу стилей. Не помещайте их в конце файла, для этого можно использовать специальный сборщик в [Grunt](https://www.npmjs.org/package/grunt-combine-media-queries) или [Gulp](https://www.npmjs.org/package/gulp-combine-media-queries). В противном случае это приведет к тому, что медиавыражения будут не замечены в будущем.
Помещайте медиавыражения настолько близко к соответствующим наборам правил, насколько это возможно. Не объединяйте их в отдельную таблицу стилей. Не помещайте их в конце файла, для этого можно использовать специальный сборщик в [Grunt](//www.npmjs.org/package/grunt-combine-media-queries) или [Gulp](//www.npmjs.org/package/gulp-combine-media-queries). В противном случае это приведет к тому, что медиавыражения будут не замечены в будущем.
Вот типичная структура:
......@@ -364,7 +364,7 @@ input[type="text"] {
Часто нам не нужно устанавливать все значения сокращенной записи свойства. Например, HTML заголовки устанавливают только отступы сверху и снизу, таким образом, в случае необходимости нужно переопределить только эти два значения. Чрезмерное использование сокращенной записи свойств часто приводит к грязному коду с ненужными переопределения и непреднамеренными побочными эффектами.
На сайте Mozilla Developer Network есть отличная статья о [сокращенной записи свойств](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) для тех кто не знаком с такой формой записи.
На сайте Mozilla Developer Network есть отличная статья о [сокращенной записи свойств](//developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) для тех кто не знаком с такой формой записи.
```css
/* Плохо */
......@@ -401,8 +401,8 @@ input[type="text"] {
- Вложенность селекторов допускается **только** в случае необходимости, например, когда нужно изменить свойства при наведении (`:hover`) или другом подобного псевдоселекторе, и при использовании специальных глобальных классов.
Дополнительно к прочтению:
- [Scope CSS classes with prefixes](http://markdotto.com/2012/02/16/scope-css-classes-with-prefixes/).
- [Stop the cascade](http://markdotto.com/2012/03/02/stop-the-cascade/).
- [Scope CSS classes with prefixes](//markdotto.com/2012/02/16/scope-css-classes-with-prefixes/).
- [Stop the cascade](//markdotto.com/2012/03/02/stop-the-cascade/).
```css
/* Плохо */
......@@ -443,7 +443,7 @@ a.link { /* ... */ }
> Методология БЭМ создана в Яндексе для разработки сайтов, которые надо делать быстро, а поддерживать долгие годы. Она позволяет создавать расширяемые и повторно используемые компоненты интерфейса.
Чтобы понять что к чему, необходимо подробнее ознакомиться с [методологией БЭМ](https://ru.bem.info/methodology/quick-start/)
Чтобы понять что к чему, необходимо подробнее ознакомиться с [методологией БЭМ](//ru.bem.info/methodology/quick-start/)
Именование классов
......@@ -456,5 +456,5 @@ a.link { /* ... */ }
----------------
[Пред .: Pug](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.1.2-pug.md)
[Далее: Less](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.2-less.md)
[Пред .: Pug](./1-standards/1.1.2-pug.md)
[Далее: Less](./1-standards/1.2.2-less.md)
1-standards/1.2.2-less.md
View file @ e052fe4f
# Less
## Синтаксис в Less
- Используйте вложенность с `&` ([амперсанд](https://ru.wikipedia.org/wiki/Амперсанд)), так будет видна зависимость и иерархическое дерево классов.
- Используйте вложенность с `&` ([амперсанд](//ru.wikipedia.org/wiki/Амперсанд)), так будет видна зависимость и иерархическое дерево классов.
```stylus
// Плохо
......@@ -153,7 +153,7 @@
```
- [Rupture](https://github.com/jenius/rupture)-примеси содержат в себе только блок свойств, селекторов внутри быть не должно.
- [Rupture](//github.com/jenius/rupture)-примеси содержат в себе только блок свойств, селекторов внутри быть не должно.
```stylus
// Плохо
......@@ -254,8 +254,8 @@
Полезные ссылки:
- [Документация Stylus](http://stylus-lang.com/).
- [CSS2Stylus](http://css2stylus.com/) - онлайн препроцессор CSS в Stylus. Для табов в options выбрать Indentation - tab.
- [Документация Stylus](//stylus-lang.com/).
- [CSS2Stylus](//css2stylus.com/) - онлайн препроцессор CSS в Stylus. Для табов в options выбрать Indentation - tab.
......@@ -288,5 +288,5 @@
----------------
[Пред .: CSS](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.1-css.md)
[Далее: Javascript](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.3-javascript.md)
[Пред .: CSS](./1-standards/1.2.1-css.md)
[Далее: Javascript](./1-standards/1.3-javascript.md)
1-standards/1.3-javascript.md
View file @ e052fe4f
# Стиль написания кода на JavaScript
Здесь, в Золотом Коде, для написания JavaScript мы используем [подход Google](https://google.github.io/styleguide/javascriptguide.xml), проверенный годами, с некоторыми изменениями.
Здесь, в Золотом Коде, для написания JavaScript мы используем [подход Google](//google.github.io/styleguide/javascriptguide.xml), проверенный годами, с некоторыми изменениями.
Поэтому, в любом, не описанном ниже случае, стоит прибегать к стайлгайду от Google.
## <a name='TOC'>Оглавление</a>
......@@ -26,7 +26,7 @@
## <a name='es2015'>ES2015</a>
На проектах используется система сборки [`startanull`](https://github.com/hustlahusky/startanull), которая позволяет использовать новый стандарт JavaScript - [ECMAScript 2015](https://learn.javascript.ru/es-modern), и компилироваь его в привычный всем бразуерам ES5.
На проектах используется система сборки [`startanull`](//github.com/hustlahusky/startanull), которая позволяет использовать новый стандарт JavaScript - [ECMAScript 2015](//learn.javascript.ru/es-modern), и компилироваь его в привычный всем бразуерам ES5.
- Указывайте директиву use strict в начале файла, для работы с новым стандартом:
......@@ -163,7 +163,7 @@ let item = new Object();
let item = {};
```
- Не используйте [зарезервированные слова](http://es5.github.io/#x7.6.1) в качестве ключей объектов. Они не будут работать в IE8. [Подробнее](https://github.com/airbnb/javascript/issues/61)
- Не используйте [зарезервированные слова](//es5.github.io/#x7.6.1) в качестве ключей объектов. Они не будут работать в IE8. [Подробнее](//github.com/airbnb/javascript/issues/61)
```javascript
// плохо
......@@ -225,7 +225,7 @@ someStack[someStack.length] = 'zk';
someStack.push('zk');
```
- Если вам необходимо скопировать массив, используйте `Array::slice`. [jsPerf](http://jsperf.com/converting-arguments-to-an-array/7)
- Если вам необходимо скопировать массив, используйте `Array::slice`. [jsPerf](//jsperf.com/converting-arguments-to-an-array/7)
```javascript
let len = items.length,
......@@ -275,7 +275,7 @@ let hero = {
};
```
- Дополнительная запятая в конце объектов: **Нет**. Она способна вызвать проблемы с IE6/7 и IE9 в режиме совместимости. В некоторых реализациях ES3 запятая в конце массива увеличивает его длину на 1, что может вызвать проблемы. Этот вопрос был прояснен только в ES5 ([оригинал](http://es5.github.io/#D)):
- Дополнительная запятая в конце объектов: **Нет**. Она способна вызвать проблемы с IE6/7 и IE9 в режиме совместимости. В некоторых реализациях ES3 запятая в конце массива увеличивает его длину на 1, что может вызвать проблемы. Этот вопрос был прояснен только в ES5 ([оригинал](//es5.github.io/#D)):
```javascript
// плохо
......@@ -376,7 +376,7 @@ let val = Number(inputValue);
let val = parseInt(inputValue, 10);
```
- Если по какой-либо причине вы делаете что-то дикое, и именно на `parseInt` тратится больше всего ресурсов, используйте побитовый сдвиг [из соображений быстродействия](http://jsperf.com/coercion-vs-casting/3), но обязательно оставьте комментарий с объяснением причин.
- Если по какой-либо причине вы делаете что-то дикое, и именно на `parseInt` тратится больше всего ресурсов, используйте побитовый сдвиг [из соображений быстродействия](//jsperf.com/coercion-vs-casting/3), но обязательно оставьте комментарий с объяснением причин.
```javascript
// хорошо
......@@ -388,7 +388,7 @@ let val = parseInt(inputValue, 10);
let val = inputValue >> 0;
```
- **Примечание:** Будьте осторожны с побитовыми операциями. Числа в JavaScript являются [64-битными значениями](http://es5.github.io/#x4.3.19), но побитовые операции всегда возвращают 32-битные значенения. [Источник](http://es5.github.io/#x11.7). Побитовые операции над числами, значение которых выходит за 32 бита (верхний предел: 2,147,483,647).
- **Примечание:** Будьте осторожны с побитовыми операциями. Числа в JavaScript являются [64-битными значениями](//es5.github.io/#x4.3.19), но побитовые операции всегда возвращают 32-битные значенения. [Источник](//es5.github.io/#x11.7). Побитовые операции над числами, значение которых выходит за 32 бита (верхний предел: 2,147,483,647).
```
2147483647 >> 0 //=> 2147483647
......@@ -464,7 +464,7 @@ let named = function named() {
})();
```
- Никогда не объявляйте функцию внутри блока кода — например в if, while, else и так далее. Единственное исключение — блок функции. Вместо этого присваивайте функцию уже объявленной через `let` переменной. Условное объявление функций работает, но в различных браузерах работает по-разному.
- **Примечание** ECMA-262 устанавливает понятие `блока` как списка операторов. Объявление функции (не путайте с присвоением функции переменной) не является оператором. [Комментарий по этому вопросу в ECMA-262](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97).
- **Примечание** ECMA-262 устанавливает понятие `блока` как списка операторов. Объявление функции (не путайте с присвоением функции переменной) не является оператором. [Комментарий по этому вопросу в ECMA-262](//www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97).
```javascript
// плохо
......@@ -576,7 +576,7 @@ if (collection.length) {
}
```
- Более подробно можно прочитать в статье [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) от Angus Croll
- Более подробно можно прочитать в статье [Truth Equality and JavaScript](//javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) от Angus Croll
**[[⬆]](#Оглавление)**
......@@ -612,7 +612,7 @@ function() {
## <a name='comments'>Комментарии</a>
- Документируйте код в формате [jsdoc](http://usejsdoc.org/). Включите описание, опишите типы и значения для всех параметров и возвращаемых значений.
- Документируйте код в формате [jsdoc](//usejsdoc.org/). Включите описание, опишите типы и значения для всех параметров и возвращаемых значений.
```javascript
// плохо
......@@ -741,7 +741,7 @@ function setSidebar() {
}
```
- Для DOM-запросов используйте классический каскадный CSS-синтаксис `$('.sidebar ul')` или родитель > потомок `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)
- Для DOM-запросов используйте классический каскадный CSS-синтаксис `$('.sidebar ul')` или родитель > потомок `$('.sidebar > ul')`. [jsPerf](//jsperf.com/jquery-find-vs-context-sel/16)
- Используйте `find` для поиска внутри DOM-объекта.
```javascript
......@@ -777,7 +777,7 @@ $('button#menuToggler');
$('#menuToggler');
```
- Для задания обработчика элементу используйте метод [`.on()`](http://api.jquery.com/on/).
- Для задания обработчика элементу используйте метод [`.on()`](//api.jquery.com/on/).
```javascript
// Плохо
......@@ -807,13 +807,13 @@ blur: function () { /* ... */ }
## <a name='performance'>Быстродействие</a>
- [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/)
- [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2)
- [Try/Catch Cost In a Loop](http://jsperf.com/try-catch-in-loop-cost)
- [Bang Function](http://jsperf.com/bang-function)
- [jQuery Find vs Context, Selector](http://jsperf.com/jquery-find-vs-context-sel/13)
- [innerHTML vs textContent for script text](http://jsperf.com/innerhtml-vs-textcontent-for-script-text)
- [Long String Concatenation](http://jsperf.com/ya-string-concat)
- [On Layout & Web Performance](//kellegous.com/j/2013/01/26/layout-performance/)
- [String vs Array Concat](//jsperf.com/string-vs-array-concat/2)
- [Try/Catch Cost In a Loop](//jsperf.com/try-catch-in-loop-cost)
- [Bang Function](//jsperf.com/bang-function)
- [jQuery Find vs Context, Selector](//jsperf.com/jquery-find-vs-context-sel/13)
- [innerHTML vs textContent for script text](//jsperf.com/innerhtml-vs-textcontent-for-script-text)
- [Long String Concatenation](//jsperf.com/ya-string-concat)
- В процессе наполнения...
**[[⬆]](#Оглавление)**
......@@ -823,57 +823,57 @@ blur: function () { /* ... */ }
**Прочитайте это**
- [Annotated ECMAScript 5.1](http://es5.github.com/)
- [Annotated ECMAScript 5.1](//es5.github.com/)
**Другие руководства по стилю**
- [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)
- [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines)
- [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/)
- [Google JavaScript Style Guide](//google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)
- [jQuery Core Style Guidelines](//docs.jquery.com/JQuery_Core_Style_Guidelines)
- [Principles of Writing Consistent, Idiomatic JavaScript](//github.com/rwldrn/idiomatic.js/)
**Другие стили**
- [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen
- [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52)
- [Popular JavaScript Coding Conventions on Github](http://sideeffect.kr/popularconvention/#javascript)
- [Naming this in nested functions](//gist.github.com/4135065) - Christian Johansen
- [Conditional Callbacks](//github.com/airbnb/javascript/issues/52)
- [Popular JavaScript Coding Conventions on Github](//sideeffect.kr/popularconvention/#javascript)
**Дальнейшее прочтение**
- [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll
- [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer
- [Understanding JavaScript Closures](//javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll
- [Basic JavaScript for the impatient programmer](//www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer
**Книги**
- [JavaScript: The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) - Douglas Crockford
- [JavaScript Patterns](http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) - Stoyan Stefanov
- [Pro JavaScript Design Patterns](http://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X) - Ross Harmes and Dustin Diaz
- [High Performance Web Sites: Essential Knowledge for Front-End Engineers](http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309) - Steve Souders
- [Maintainable JavaScript](http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680) - Nicholas C. Zakas
- [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw
- [Pro JavaScript Techniques](http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig
- [Smashing Node.js: JavaScript Everywhere](http://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch
- [Secrets of the JavaScript Ninja](http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault
- [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg
- [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
- [JSBooks](http://jsbooks.revolunet.com/)
- [JavaScript: The Good Parts](//www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) - Douglas Crockford
- [JavaScript Patterns](//www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) - Stoyan Stefanov
- [Pro JavaScript Design Patterns](//www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X) - Ross Harmes and Dustin Diaz
- [High Performance Web Sites: Essential Knowledge for Front-End Engineers](//www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309) - Steve Souders
- [Maintainable JavaScript](//www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680) - Nicholas C. Zakas
- [JavaScript Web Applications](//www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw
- [Pro JavaScript Techniques](//www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig
- [Smashing Node.js: JavaScript Everywhere](//www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch
- [Secrets of the JavaScript Ninja](//www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault
- [Human JavaScript](//humanjavascript.com/) - Henrik Joreteg
- [Superhero.js](//superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
- [JSBooks](//jsbooks.revolunet.com/)
**Блоги**
- [DailyJS](http://dailyjs.com/)
- [JavaScript Weekly](http://javascriptweekly.com/)
- [JavaScript, JavaScript...](http://javascriptweblog.wordpress.com/)
- [Bocoup Weblog](http://weblog.bocoup.com/)
- [Adequately Good](http://www.adequatelygood.com/)
- [NCZOnline](http://www.nczonline.net/)
- [Perfection Kills](http://perfectionkills.com/)
- [Ben Alman](http://benalman.com/)
- [Dmitry Baranovskiy](http://dmitry.baranovskiy.com/)
- [Dustin Diaz](http://dustindiaz.com/)
- [nettuts](http://net.tutsplus.com/?s=javascript)
- [DailyJS](//dailyjs.com/)
- [JavaScript Weekly](//javascriptweekly.com/)
- [JavaScript, JavaScript...](//javascriptweblog.wordpress.com/)
- [Bocoup Weblog](//weblog.bocoup.com/)
- [Adequately Good](//www.adequatelygood.com/)
- [NCZOnline](//www.nczonline.net/)
- [Perfection Kills](//perfectionkills.com/)
- [Ben Alman](//benalman.com/)
- [Dmitry Baranovskiy](//dmitry.baranovskiy.com/)
- [Dustin Diaz](//dustindiaz.com/)
- [nettuts](//net.tutsplus.com/?s=javascript)
**[[⬆]](#Оглавление)**
----------------
[Пред .: Less](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.2-less.md)
[Далее: Images](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.4-images.md)
[Пред .: Less](./1-standards/1.2.2-less.md)
[Далее: Images](./1-standards/1.4-images.md)
1-standards/1.4-images.md
View file @ e052fe4f
......@@ -12,10 +12,10 @@
## Оптимизация растровых изображений
Картинки следует ужимать в любом случае.
Для начала стоит использовать Save for Web в самом Adobe Photoshop.
Затем, для JPG используется JPEGMini: использовать можно [на сайте](http://www.jpegmini.com/main/shrink_photo)
Затем, для JPG используется JPEGMini: использовать можно [на сайте](//www.jpegmini.com/main/shrink_photo)
или установить условнобесплатное приложение, бесплатная версия позволяет ужимать до 20 фотографий в день,
это как правило, вполне достатончно. Экономия может достигать 50-500%.
Для PNG есть сервис [TinyPNG](https://tinypng.com). Суть заключается в том, что глубина цвета с 24 бит меняется на 8 бит.
Для PNG есть сервис [TinyPNG](//tinypng.com). Суть заключается в том, что глубина цвета с 24 бит меняется на 8 бит.
Т.е. получается всего 256 цветов, но для отдельных иконок этого более чем достаточно.
При этом экономия получается примерно вдвое-втрое.
Нет смысла ужимать отдельные иконки, которые пойдут в спрайт, но есть смысл ужимать спрайт целиком.
......@@ -27,12 +27,12 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
Открывается Vector Smart Object в самом AI (контекстное меню слоя — Редактирвоать содержимое / Edit Contents)
и оттуда экспортируется в SVG. В случае отсутствия установленного иллюстратора можно из Photoshop
экспортировать его в отдельный AI файл (контекстное меню слоя – Экспорт содержимого / Export Contents)
и сконвертировать в SVG – https://cloudconvert.org/ai-to-svg.
и сконвертировать в SVG – //cloudconvert.org/ai-to-svg.
Но тут проблема в том, что экспортируется файл целиком, поэтому всякие наборы иконок вырезать таким способом не получится.
## Вектор в формах Photoshop
Формы (shape) — это лучший вариант. Можно вырезать самим Photoshop,
если версия CC или CC2014 – http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/.
если версия CC или CC2014 – //creativedroplets.com/generate-svg-with-photoshop-cc-beta/.
Либо есть плагины (платные) — Zeick и SVG Hero. Все это хорошо, но в некоторых конвретных случаях все это может лагать
и вырезать SVG, внутри которого PNG в BASE64. Например, сам Photoshop не умеет экспортировать папки шейпов.
По размеру можно понять или просто проверить содержимое иконки. Такие «кривые» иконки мало того что не вектор,
......@@ -42,14 +42,14 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
Самый лучший вариант — строчный SVG, внедрённый в HTML-разметку.
Это несколько «захламляет» разметку, но зато позволяет делать очень крутые вещи.
Смена цвета иконок из стилей, SMIL-анимация.
По этому поводу можно посмотреть лекцию http://video.yandex.ru/users/ya-events/view/3228.
По этому поводу можно посмотреть лекцию //video.yandex.ru/users/ya-events/view/3228.
Тем более, SVG поддерживается всеми современными браузерами.
Проблема есть лишь в IE8 и Android 2.3.
Но это решаемо изящным костылем — навешивание фона на `<svg>` элемент.
А для конвертации SVG в PNG есть всякие Grunt-задачи.
## Минификация SVG
Для SVG есть прекрасный инструмент — [SVGO](https://github.com/svg/svgo).
Для SVG есть прекрасный инструмент — [SVGO](//github.com/svg/svgo).
Как показывает практика, после экспорта почти любая иконка ужимается вдвое, были случаи с уменьшением и на 90%.
Но с SVGO стоит быть аккуратным — некоторые особо сложные SVG он портит.
После экспорта из редакторов внутри SVG есть куча ненужного кода, но SVGO не знает, что именно лишнее.
......@@ -60,5 +60,5 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
----------------
[Пред .: Javascript](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.3-javascript.md)
[Далее: CSS](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.5-editorconfig.md)
[Пред .: Javascript](./1-standards/1.3-javascript.md)
[Далее: CSS](./1-standards/1.5-editorconfig.md)
1-standards/1.5-editorconfig.md
View file @ e052fe4f
......@@ -2,7 +2,7 @@
**Статус:** черновик.
[EditorConfig](http://editorconfig.org/) это конфигурационный файл и набор расширений, к большому количеству редакторов кода и IDE.
[EditorConfig](//editorconfig.org/) это конфигурационный файл и набор расширений, к большому количеству редакторов кода и IDE.
Его задача — создать единый формат настроек, и, раз и навсегда, решить вопросы вроде “табы или пробелы” для всех IDE и всех языков программирования.
Такой файл может храниться в системе контроля версий проекта, что позволит всем его разработчикам использовать одну и ту же конфигурацию.
......@@ -11,5 +11,5 @@
----------------
[Пред .: Images](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.4-images.md)
[Далее: Git](http://git.zolotoykod.ru/111/developer-guide/blob/master/2-git/readme.md)
[Пред .: Images](./1-standards/1.4-images.md)
[Далее: Git](./2-git/readme.md)
1-standards/readme.md
View file @ e052fe4f
......@@ -4,7 +4,7 @@
Строго соблюдайте, предложенные здесь, соглашения.<br>
Если вы нашли ошибку, будь она большая или маленькая, сразу сообщите об этом.<br>
Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, создайте [issue](https://git.zolotoykod.ru/111/developer-guide/issues/new).
Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, создайте [issue](./issues/new).
В наших проектах мы используем автоматизированные инструменты для облегчения разработки сайтов - Gulp c препроцессорами Pug (бывш. Jade) и Less (и др.), систему конроля версий - Git, код проекта в репозитории git.zolotoykod.ru
......@@ -15,10 +15,10 @@
## Разделы
- [HTML](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.1.1-html.md)
- [Pug](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.1.2-pug.md)
- [CSS](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.1-css.md)
- [Less](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.2-less.md)
- [JavaScript](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.3-javascript.md)
- [Images](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.4-images.md)
- [EditorConfig](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.5-editorconfig.md)
- [HTML](./1-standards/1.1.1-html.md)
- [Pug](./1-standards/1.1.2-pug.md)
- [CSS](./1-standards/1.2.1-css.md)
- [Less](./1-standards/1.2.2-less.md)
- [JavaScript](./1-standards/1.3-javascript.md)
- [Images](./1-standards/1.4-images.md)
- [EditorConfig](./1-standards/1.5-editorconfig.md)
2-git/2.1-git.md
View file @ e052fe4f
......@@ -2,33 +2,33 @@
## 1. Устанавливаем Git
Скачайте и установите консольную версию [Git с официального сайта](https://git-scm.com/downloads)
Скачайте и установите консольную версию [Git с официального сайта](//git-scm.com/downloads)
## 2. Знакомимся с Git
### 2.1. Проходим обучающийся курс
1. Для новичков рекомендуется пройти небольшой обучающийся курс [Git How To](http://githowto.com/ru).
1. Разбираемся в том, как устроена работа в команде - [Github Flow](https://guides.github.com/introduction/flow/)
1. Для новичков рекомендуется пройти небольшой обучающийся курс [Git How To](//githowto.com/ru).
1. Разбираемся в том, как устроена работа в команде - [Github Flow](//guides.github.com/introduction/flow/)
### 2.2. Полезные ссылки
#### 2.2.1. Разбираемся с Git
* [Git How To](http://githowto.com/ru) — это интерактивный тур, который познакомит вас с основами Git. Тур создан с пониманием того, что лучшим способом научиться чему-нибудь — сделать это своими руками.
* [Команды git](http://git-scm.com/book/commands) - полный список команд на официальном сайте
* [git - the simple guide](http://rogerdudler.github.io/git-guide/)
* [Ежедневная работа с Git](http://habrahabr.ru/post/174467/) - статья на Хабре
* [Что нам стоит Git настроить!](http://habrahabr.ru/post/164297/) - статья на Хабре
* [Git How To](//githowto.com/ru) — это интерактивный тур, который познакомит вас с основами Git. Тур создан с пониманием того, что лучшим способом научиться чему-нибудь — сделать это своими руками.
* [Команды git](//git-scm.com/book/commands) - полный список команд на официальном сайте
* [git - the simple guide](//rogerdudler.github.io/git-guide/)
* [Ежедневная работа с Git](//habrahabr.ru/post/174467/) - статья на Хабре
* [Что нам стоит Git настроить!](//habrahabr.ru/post/164297/) - статья на Хабре
#### 2.2.2. Видео
* [Git & GitHub Tutorials](https://www.youtube.com/playlist?list=PLEACDDE80A79CE8E7)
* [Git & GitHub Tutorials](//www.youtube.com/playlist?list=PLEACDDE80A79CE8E7)
#### 2.2.3. Книги
* [Pro Git](http://git-scm.com/book/ru/v2) - официальная книга Git
* [Магия Git](http://dl.dropboxusercontent.com/u/281916/delete/book.pdf)
* [Pro Git](//git-scm.com/book/ru/v2) - официальная книга Git
* [Магия Git](//dl.dropboxusercontent.com/u/281916/delete/book.pdf)
#### 2.2.4. Шпаргалки
* [GitHub Cheatsheet](https://raw.githubusercontent.com/github/training-kit/master/downloads/github-git-cheat-sheet.pdf)
* [GitHub Cheatsheet](//raw.githubusercontent.com/github/training-kit/master/downloads/github-git-cheat-sheet.pdf)
## 3. Работаем с Git
......@@ -185,5 +185,5 @@ To:
----------------
[Пред .: Стандарты](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/readme.md)
[Далее: Настройка Git Золотого Кода](http://git.zolotoykod.ru/111/developer-guide/blob/master/2-git/2.2-git.zolotoykod.md)
[Пред .: Стандарты](./1-standards/readme.md)
[Далее: Настройка Git Золотого Кода](./2-git/2.2-git.zolotoykod.md)
2-git/2.2-git.zolotoykod.md
View file @ e052fe4f
......@@ -15,7 +15,7 @@ ssh-keygen
## Шаг 2. Привязываем ключ к своему профилю
* Скопируйте содержимое вашего публичного ключа id_rsa.pub
* На [git.zolotoykod.ru](http://git.zolotoykod.ru), перейдите в настройки профиля
* На [git.zolotoykod.ru](//git.zolotoykod.ru), перейдите в настройки профиля
* Добавьте свой ключа в разделе *SSH Keys*.
* Проверьте работоспособность ключа
```bash
......@@ -95,11 +95,11 @@ ssh -T git@git.zolotoykod.ru -p 22222
Эта команда должна вывести Вам приветственное сообщение с Вашим именем.
[Using SSH agent forwarding](https://developer.github.com/guides/using-ssh-agent-forwarding/)
[Using SSH agent forwarding](//developer.github.com/guides/using-ssh-agent-forwarding/)
[Working with SSH key passphrases](https://help.github.com/articles/working-with-ssh-key-passphrases/#auto-launching-ssh-agent-on-msysgit)
[Working with SSH key passphrases](//help.github.com/articles/working-with-ssh-key-passphrases/#auto-launching-ssh-agent-on-msysgit)
----------------
[Пред .: Git](http://git.zolotoykod.ru/111/developer-guide/blob/master/2-git/2.1-git.md)
[Далее: Програмное обеспечение](http://git.zolotoykod.ru/111/developer-guide/blob/master/3-software/readme.md)
[Пред .: Git](./2-git/2.1-git.md)
[Далее: Програмное обеспечение](./3-software/readme.md)
2-git/readme.md
View file @ e052fe4f
## Разделы
- [Git](http://git.zolotoykod.ru/111/developer-guide/blob/master/2-git/2.1-git.md)
- [Настройка Git Золотого Кода](http://git.zolotoykod.ru/111/developer-guide/blob/master/2-git/2.2-git.zolotoykod.md)
- [Git](./2-git/2.1-git.md)
- [Настройка Git Золотого Кода](./2-git/2.2-git.zolotoykod.md)
3-software/3.1-local-server.md
View file @ e052fe4f
......@@ -3,15 +3,15 @@
## Docker
Так как новые проекты работают в Docker окружении, сервер для проксирования контейнеров так же проще организовать, используя Docker.
Просто склонируй [zk/docker-proxy-letsencrypt](http://git.zolotoykod.ru/zk/docker-proxy-letsencrypt) и запусти!
Просто склонируй [zk/docker-proxy-letsencrypt](//git.zolotoykod.ru/zk/docker-proxy-letsencrypt) и запусти!
## Bitnami
В качестве локального сервера рекомендуется использовать [Nginx Stack by Bitnami](https://bitnami.com/stack/nginx).
В качестве локального сервера рекомендуется использовать [Nginx Stack by Bitnami](//bitnami.com/stack/nginx).
Bitnami Nginx Stack предоставляет полноценное окружение для разработки на PHP, MySQL и Nginx. В пакет также входят: phpMyAdmin, SQLite, ImageMagick, FastCGI, Memcache, GD, CURL, PEAR, PECL и другие компоненты. Также известен как LEMP для Linux, WEMP для Windows и MEMP для OS X.
Документация по [Nginx Stack](https://wiki.bitnami.com/Infrastructure_Stacks/Bitnami_Nginx_Stack)
Документация по [Nginx Stack](//wiki.bitnami.com/Infrastructure_Stacks/Bitnami_Nginx_Stack)
## После установки
......@@ -19,7 +19,7 @@ Bitnami Nginx Stack предоставляет полноценное окруж
Composer - менеджер зависимостей для PHP. По-умолчанию в Nginx Stack включен Composer, но обычно устаревшей версии. Поэтому лучше сразу его обновить и настроить работу с ним.
1. Скачайте последнюю версию файла [`composer.phar`](https://getcomposer.org/download/)
1. Скачайте последнюю версию файла [`composer.phar`](//getcomposer.org/download/)
1. Замените им устаревшую версию в папке `php`
1. Создайте bat-файл для исполнения команды composer (для Windows):
......@@ -31,4 +31,4 @@ Composer - менеджер зависимостей для PHP. По-умолч
### Работа с проектами
Как разворачивать новые проекты описано в [документации](https://wiki.bitnami.com/Infrastructure_Stacks/Bitnami_Nginx_Stack#How_can_I_create_a_custom_PHP_application.3f) + настройки [создания виртуального хоста](https://wiki.bitnami.com/Infrastructure_Stacks/Bitnami_Nginx_Stack#How_to_create_a_Virtual_Host.3f)
Как разворачивать новые проекты описано в [документации](//wiki.bitnami.com/Infrastructure_Stacks/Bitnami_Nginx_Stack#How_can_I_create_a_custom_PHP_application.3f) + настройки [создания виртуального хоста](//wiki.bitnami.com/Infrastructure_Stacks/Bitnami_Nginx_Stack#How_to_create_a_Virtual_Host.3f)
3-software/3.2-atom.md
View file @ e052fe4f
# Atom
[*Atom*](https://atom.io) — это бесплатный текстовый редактор с открытым исходным кодом для OS X, Linux, Windows с поддержкой плагинов, написанных на Node.js, и встраиваемых под управлением Git Control. Большинство плагинов имеют статус свободного программного обеспечения, разрабатываются и поддерживаются сообществом.
[*Atom*](//atom.io) — это бесплатный текстовый редактор с открытым исходным кодом для OS X, Linux, Windows с поддержкой плагинов, написанных на Node.js, и встраиваемых под управлением Git Control. Большинство плагинов имеют статус свободного программного обеспечения, разрабатываются и поддерживаются сообществом.
## Настройка Atom
Установка необходимых плагинов
- [*git-control*](https://atom.io/packages/git-control) - GUI для работы с git прямо из редактора
- [*git-time-machine*](https://atom.io/packages/git-time-machine) - Показывает историю файла из GIT
- [*linter*](https://atom.io/packages/linter) - Линтер
- [*linter-eslint*](https://atom.io/packages/linter-eslint) - Линтер для JavaScript
- [*linter-less*](https://atom.io/packages/linter-less) - Линтер для Less
- [*linter-php*](https://atom.io/packages/linter-php) - Линтер для PHP
- [*linter-htmlhint*](https://atom.io/packages/linter-htmlhint) - Линтер для HTML
- [*emmet*](https://atom.io/packages/emmet) - Emmet ускоряет написание HTML
- [*docblockr*](https://atom.io/packages/docblockr) - Плагин для создания комментов документации
- [*editorconfig*](https://atom.io/packages/editorconfig) - [EditorConfig](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.5-editorconfig.md)
- [*language-pug*](https://atom.io/packages/language-pug) - Поддержка подвсетки Pug (шаблонизатор)
- [*merge-conflicts*](https://atom.io/packages/merge-conflicts) - merge-tool для разрешения конфликтов в Git;
- [*git-control*](//atom.io/packages/git-control) - GUI для работы с git прямо из редактора
- [*git-time-machine*](//atom.io/packages/git-time-machine) - Показывает историю файла из GIT
- [*linter*](//atom.io/packages/linter) - Линтер
- [*linter-eslint*](//atom.io/packages/linter-eslint) - Линтер для JavaScript
- [*linter-less*](//atom.io/packages/linter-less) - Линтер для Less
- [*linter-php*](//atom.io/packages/linter-php) - Линтер для PHP
- [*linter-htmlhint*](//atom.io/packages/linter-htmlhint) - Линтер для HTML
- [*emmet*](//atom.io/packages/emmet) - Emmet ускоряет написание HTML
- [*docblockr*](//atom.io/packages/docblockr) - Плагин для создания комментов документации
- [*editorconfig*](//atom.io/packages/editorconfig) - [EditorConfig](./1-standards/1.5-editorconfig.md)
- [*language-pug*](//atom.io/packages/language-pug) - Поддержка подвсетки Pug (шаблонизатор)
- [*merge-conflicts*](//atom.io/packages/merge-conflicts) - merge-tool для разрешения конфликтов в Git;
```bash
apm install git-time-machine linter linter-eslint linter-less linter-php linter-htmlhint git-control emmet docblockr editorconfig language-pug merge-conflicts
......
3-software/3.3-phpstorm.md
View file @ e052fe4f
# PHPStorm
[*PhpStorm*](https://www.jetbrains.com/phpstorm/) — коммерческая кросс-платформенная интегрированная среда разработки для PHP. Разрабатывается компанией JetBrains на основе платформы IntelliJ IDEA.
[*PhpStorm*](//www.jetbrains.com/phpstorm/) — коммерческая кросс-платформенная интегрированная среда разработки для PHP. Разрабатывается компанией JetBrains на основе платформы IntelliJ IDEA.
## Настройка параметров PHPStorm
......@@ -21,14 +21,14 @@
- Set 'ESLint package'
- Configuration file = Automatic search
- PHP
- Set interpreter from [Nginx Stack](http://git.zolotoykod.ru/111/developer-guide/blob/master/3-software/3.1-local-server.md)
- Set interpreter from [Nginx Stack](./3-software/3.1-local-server.md)
- Composer
- Set path to Composer.phar from [Nginx Stack](http://git.zolotoykod.ru/111/developer-guide/blob/master/3-software/3.1-local-server.md)
- Set path to Composer.phar from [Nginx Stack](./3-software/3.1-local-server.md)
- Node.js and NPM
- Set Node interpreter
## Установка необходимых плагинов
- *EditorConfig* - [EditorConfig](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.5-editorconfig.md)
- *EditorConfig* - [EditorConfig](./1-standards/1.5-editorconfig.md)
- *Pug (ex-Jade)* - Поддержка подвсетки Pug (шаблонизатор)
3-software/readme.md
View file @ e052fe4f
......@@ -2,20 +2,20 @@
## Разделы
- [Локальный сервер](http://git.zolotoykod.ru/111/developer-guide/blob/master/3-software/3.1-local-server.md)
- [Atom](http://git.zolotoykod.ru/111/developer-guide/blob/master/3-software/3.2-atom.md)
- [PHPStorm](http://git.zolotoykod.ru/111/developer-guide/blob/master/3-software/3.3-phpstorm.md)
- [Локальный сервер](./3-software/3.1-local-server.md)
- [Atom](./3-software/3.2-atom.md)
- [PHPStorm](./3-software/3.3-phpstorm.md)
## Основные инструменты
* [Git](https://git-scm.com/downloads). (Вернуться в раздел по Git)
* [Python 2.7](https://www.python.org/) (**Добавить в PATH после установки!**)
* [Git](//git-scm.com/downloads). (Вернуться в раздел по Git)
* [Python 2.7](//www.python.org/) (**Добавить в PATH после установки!**)
### Node.js
Node.js используется практически в каждом проекте, как минимум для сборки фронт-энда и управления зависимостями.
1. Скачайте и установите [Node.js](https://nodejs.org)
1. Скачайте и установите [Node.js](//nodejs.org)
1. Установите глобальные пакеты
```bash
......@@ -26,7 +26,7 @@ Node.js используется практически в каждом прое
Если для проекта требуется MongoDB:
1. Устанавливаем [MongoDB Community Server](https://www.mongodb.com/download-center)
1. Устанавливаем [MongoDB Community Server](//www.mongodb.com/download-center)
1. Добавить папку с установленными бинарниками в PATH
1. Настраиваем исполнение MongoDB в качестве демона в Unix и в качестве службы в Windows
......@@ -38,4 +38,4 @@ Node.js используется практически в каждом прое
// Смотрим список служб
services.msc
```
1. Для просмотра в удобном виде базы MongoDB можно использовать [RoboMongo](https://robomongo.org/)
1. Для просмотра в удобном виде базы MongoDB можно использовать [RoboMongo](//robomongo.org/)
Awesome Features.md
View file @ e052fe4f
# Awesome Features
- [Single Element CSS Spinners](http://projects.lukehaas.me/css-loaders/)
- [Giving Animations Life](https://medium.com/tictail-makers/giving-animations-life-8b20165224c5/)
- [iHover - CSS3 hover effects pack](http://gudh.github.io/ihover/dist/index.html)
- [Hover.css](http://ianlunn.github.io/Hover/)
- [![tp] Hover Effect Ideas](http://tympanus.net/Development/HoverEffectIdeas/)
- [Example for `background-attachment: fixed`](http://codepen.io/stefanjudis/pen/nrzHI?editors=010) ([Article](http://davidwalsh.name/parallax))
- [Кнопки на CSS](http://liveweave.com/TPQOMw)
- [Arrow Navigation Styles](http://tympanus.net/Development/ArrowNavigationStyles/)
- [CSS Toggle Switch Examples](http://callmenick.com/tutorial-demos/css-toggle-switch/)
- [Monokle and more demos](http://lab.hakim.se/)
- [Centering in CSS: A Complete Guide](http://css-tricks.com/centering-css-complete-guide/)
- [![tp] Tab Styles Inspiration](http://tympanus.net/Development/TabStylesInspiration/)
- [Pure CSS speech bubbles](http://nicolasgallagher.com/pure-css-speech-bubbles/demo/)
- [Mobile Web App Checklist](http://www.luster.io/blog/9-29-14-mobile-web-checklist.html)
- [18 CSS Effect Libraries for Creating Beautiful Animations](http://codegeekz.com/css-effect-libraries-creating-beautiful-animations/)
- [7 simple ways to optimize your website](http://www.developerdrive.com/2014/10/7-simple-ways-to-optimize-your-website/)
- [![tp] Creative Link Effects](http://tympanus.net/Development/CreativeLinkEffects/)
- [![tp] Off-Canvas Menu Effects](http://tympanus.net/Development/OffCanvasMenuEffects/index.html)
- [Demo: Create a CSS Flipping Animation](http://davidwalsh.name/demo/css-flip.php)
- [Foldy Thingy - CodePen](http://codepen.io/bennettfeely/pen/zdafH)
- [SVG CSS3 Menu / Burger Button - CodePen](http://codepen.io/kyleHenwood/pen/Alayb)
- [The Code Player - Learn HTML5, CSS3, Javascript and more...](http://thecodeplayer.com/)
- [CSS Column Ecommerce Product Layout - CodePen](http://codepen.io/jaycozzy/full/kptob/)
- [![habr] 60 FPS? Легко! pointer-events:none!](http://habrahabr.ru/post/204238/) ([Оригинал](http://www.thecssninja.com/javascript/pointer-events-60fps))
- [HINT.css](http://kushagragour.in/lab/hint/)
- [Print.css](http://printstylesheet.com/)
- [CSS3 Shapes](http://www.css3shapes.com/)
- [![tp] Dot Navigation Styles](http://tympanus.net/Development/DotNavigationStyles/)
- [Perspective open door](http://jsfiddle.net/vgwhhhv7/)
- [magic.css - CSS3 Animations with special effects](http://minimamente.com/example/magic_animations/)
- [![tp] Nifty Modal Window Effects](http://tympanus.net/Development/ModalWindowEffects/)
- [![tp] Progress Button Styles](http://tympanus.net/Development/ProgressButtonStyles/)
- [![tp] Animated Content Tabs with CSS3](http://tympanus.net/Tutorials/CSS3ContentTabs/)
- [No JS: Tabs That Scale Down to Menu](http://codepen.io/jakealbaugh/pen/KBsIo)
- [CSS3 breadcrumbs](http://red-team-design.com/css3-breadcrumbs/)
- [Create a masked background effect with `background-attachment: fixed`](http://tutsplus.github.io/create-a-masked-background-effect-with--background-attachment--fixed--/)
- [Simple Parallax Scrolling](http://callmenick.com/tutorial-demos/simple-parallax-effect/)
- [![habr] Выравниваем блок по центру страницы](http://habrahabr.ru/post/238449/)
- [4 balls 10 spinners: CSS3 Animations](http://arqex.com/934/4-balls-10-spinners-css3-animations)
- [![tp] Tooltip Styles](http://tympanus.net/Development/TooltipStylesInspiration/)
- [12 Fun Sharing Button Effects](http://demo.tutorialzine.com/2014/11/12-fun-sharing-button-effects/simple.html)
- [Single input 3D form](http://thecodeplayer.com/walkthrough/single-input-3d-form)
- [Tutorials for Creating 3D Effects in CSS3 and JavaScript](http://www.webresourcesdepot.com/3d-effects-in-css3-javascript/)
- [How I Built The One Page Scroll Plugin](http://www.smashingmagazine.com/2014/08/25/how-i-built-the-one-page-scroll-plugin/) ([![habr] Хабр](http://habrahabr.ru/post/235943/))
- [CSS Only Loaders](http://blog.pexels.com/css-only-loaders/)
- [![tp] Dialog Effect](http://tympanus.net/Development/DialogEffects/)
- [CSS filters in action](http://blog.gospodarets.com/CSS_filters_in_action/)
- [A curated gallery of Dribbble shots reworked as interactive CodePen pens.](http://give-n-go.co/)
- [Pure css icons, with only one element](http://saeedalipoor.github.io/icono/)
- Tooltips: [1 elemehttp://callmenick.com/tutorial-demos/css-toggle-switch/nts with text](http://jsfiddle.net/37cu4/) & [with HTML](http://jsfiddle.net/pKsY4/)
- [![tp] Checkout Concepts](http://tympanus.net/Development/CheckoutConcepts/index.html)
- [![tp] Wobbly Slideshow Effect](http://tympanus.net/Development/WobblySlideshowEffect/)
- [![tp] Sidebar Transitions](http://tympanus.net/Development/SidebarTransitions/)
- [How to make 3-corner-rounded triangle in CSS](http://dabblet.com/gist/4592062)
- [Gooey Menu](http://codepen.io/lbebber/pen/LELBEo) ([Перевод](http://habrahabr.ru/post/250005/) и [оригинал](http://css-tricks.com/gooey-effect/))
- [Single Element CSS Spinners](//projects.lukehaas.me/css-loaders/)
- [Giving Animations Life](//medium.com/tictail-makers/giving-animations-life-8b20165224c5/)
- [iHover - CSS3 hover effects pack](//gudh.github.io/ihover/dist/index.html)
- [Hover.css](//ianlunn.github.io/Hover/)
- [![tp] Hover Effect Ideas](//tympanus.net/Development/HoverEffectIdeas/)
- [Example for `background-attachment: fixed`](//codepen.io/stefanjudis/pen/nrzHI?editors=010) ([Article](//davidwalsh.name/parallax))
- [Кнопки на CSS](//liveweave.com/TPQOMw)
- [Arrow Navigation Styles](//tympanus.net/Development/ArrowNavigationStyles/)
- [CSS Toggle Switch Examples](//callmenick.com/tutorial-demos/css-toggle-switch/)
- [Monokle and more demos](//lab.hakim.se/)
- [Centering in CSS: A Complete Guide](//css-tricks.com/centering-css-complete-guide/)
- [![tp] Tab Styles Inspiration](//tympanus.net/Development/TabStylesInspiration/)
- [Pure CSS speech bubbles](//nicolasgallagher.com/pure-css-speech-bubbles/demo/)
- [Mobile Web App Checklist](//www.luster.io/blog/9-29-14-mobile-web-checklist.html)
- [18 CSS Effect Libraries for Creating Beautiful Animations](//codegeekz.com/css-effect-libraries-creating-beautiful-animations/)
- [7 simple ways to optimize your website](//www.developerdrive.com/2014/10/7-simple-ways-to-optimize-your-website/)
- [![tp] Creative Link Effects](//tympanus.net/Development/CreativeLinkEffects/)
- [![tp] Off-Canvas Menu Effects](//tympanus.net/Development/OffCanvasMenuEffects/index.html)
- [Demo: Create a CSS Flipping Animation](//davidwalsh.name/demo/css-flip.php)
- [Foldy Thingy - CodePen](//codepen.io/bennettfeely/pen/zdafH)
- [SVG CSS3 Menu / Burger Button - CodePen](//codepen.io/kyleHenwood/pen/Alayb)
- [The Code Player - Learn HTML5, CSS3, Javascript and more...](//thecodeplayer.com/)
- [CSS Column Ecommerce Product Layout - CodePen](//codepen.io/jaycozzy/full/kptob/)
- [![habr] 60 FPS? Легко! pointer-events:none!](//habrahabr.ru/post/204238/) ([Оригинал](//www.thecssninja.com/javascript/pointer-events-60fps))
- [HINT.css](//kushagragour.in/lab/hint/)
- [Print.css](//printstylesheet.com/)
- [CSS3 Shapes](//www.css3shapes.com/)
- [![tp] Dot Navigation Styles](//tympanus.net/Development/DotNavigationStyles/)
- [Perspective open door](//jsfiddle.net/vgwhhhv7/)
- [magic.css - CSS3 Animations with special effects](//minimamente.com/example/magic_animations/)
- [![tp] Nifty Modal Window Effects](//tympanus.net/Development/ModalWindowEffects/)
- [![tp] Progress Button Styles](//tympanus.net/Development/ProgressButtonStyles/)
- [![tp] Animated Content Tabs with CSS3](//tympanus.net/Tutorials/CSS3ContentTabs/)
- [No JS: Tabs That Scale Down to Menu](//codepen.io/jakealbaugh/pen/KBsIo)
- [CSS3 breadcrumbs](//red-team-design.com/css3-breadcrumbs/)
- [Create a masked background effect with `background-attachment: fixed`](//tutsplus.github.io/create-a-masked-background-effect-with--background-attachment--fixed--/)
- [Simple Parallax Scrolling](//callmenick.com/tutorial-demos/simple-parallax-effect/)
- [![habr] Выравниваем блок по центру страницы](//habrahabr.ru/post/238449/)
- [4 balls 10 spinners: CSS3 Animations](//arqex.com/934/4-balls-10-spinners-css3-animations)
- [![tp] Tooltip Styles](//tympanus.net/Development/TooltipStylesInspiration/)
- [12 Fun Sharing Button Effects](//demo.tutorialzine.com/2014/11/12-fun-sharing-button-effects/simple.html)
- [Single input 3D form](//thecodeplayer.com/walkthrough/single-input-3d-form)
- [Tutorials for Creating 3D Effects in CSS3 and JavaScript](//www.webresourcesdepot.com/3d-effects-in-css3-javascript/)
- [How I Built The One Page Scroll Plugin](//www.smashingmagazine.com/2014/08/25/how-i-built-the-one-page-scroll-plugin/) ([![habr] Хабр](//habrahabr.ru/post/235943/))
- [CSS Only Loaders](//blog.pexels.com/css-only-loaders/)
- [![tp] Dialog Effect](//tympanus.net/Development/DialogEffects/)
- [CSS filters in action](//blog.gospodarets.com/CSS_filters_in_action/)
- [A curated gallery of Dribbble shots reworked as interactive CodePen pens.](//give-n-go.co/)
- [Pure css icons, with only one element](//saeedalipoor.github.io/icono/)
- Tooltips: [1 eleme//callmenick.com/tutorial-demos/css-toggle-switch/nts with text](//jsfiddle.net/37cu4/) & [with HTML](//jsfiddle.net/pKsY4/)
- [![tp] Checkout Concepts](//tympanus.net/Development/CheckoutConcepts/index.html)
- [![tp] Wobbly Slideshow Effect](//tympanus.net/Development/WobblySlideshowEffect/)
- [![tp] Sidebar Transitions](//tympanus.net/Development/SidebarTransitions/)
- [How to make 3-corner-rounded triangle in CSS](//dabblet.com/gist/4592062)
- [Gooey Menu](//codepen.io/lbebber/pen/LELBEo) ([Перевод](//habrahabr.ru/post/250005/) и [оригинал](//css-tricks.com/gooey-effect/))
[fe]: https://cloud.githubusercontent.com/assets/2854701/4692702/1c90b140-5774-11e4-92cb-e08a7afd3d87.png
[habr]: https://cloud.githubusercontent.com/assets/2854701/4692636/d3785254-5770-11e4-9276-9d2dbe050494.png
[tp]: http://tympanus.net/Development/favicon.ico
[yt]: https://cloud.githubusercontent.com/assets/2854701/4692709/58d7ce04-5774-11e4-909e-368aa3032ee3.png
[fe]: //cloud.githubusercontent.com/assets/2854701/4692702/1c90b140-5774-11e4-92cb-e08a7afd3d87.png
[habr]: //cloud.githubusercontent.com/assets/2854701/4692636/d3785254-5770-11e4-9276-9d2dbe050494.png
[tp]: //tympanus.net/Development/favicon.ico
[yt]: //cloud.githubusercontent.com/assets/2854701/4692709/58d7ce04-5774-11e4-909e-368aa3032ee3.png
JavaScript Plugins.md
View file @ e052fe4f
......@@ -9,122 +9,122 @@
## jQuery
* [50 Amazing jQuery Plugins That You Should Start Using Right Now | Tutorialzine](http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/)
* [50 Amazing jQuery Plugins That You Should Start Using Right Now | Tutorialzine](//tutorialzine.com/2013/04/50-amazing-jquery-plugins/)
### Для изображений
* :star: [Fotorama](http://fotorama.io/)
* :star: [fancyBox - Fancy jQuery Lightbox Alternative](http://fancyapps.com/fancybox/)
* :star: [Colorbox - a jQuery lightbox](http://www.jacklmoore.com/colorbox/)
* :star: [FiNGAHOLiC/jquery.imgpreloader](https://github.com/FiNGAHOLiC/jquery.imgpreloader) - подходит для предзагрузки
* [jQuery Slideshow](http://i-like-robots.github.io/jQuery-Slideshow/)
* [Swipebox | A touchable jQuery lightbox](http://brutaldesign.github.com/swipebox/)
* [iLightBox · Revolutionary Lightbox Plugin](http://iprodev.com/ilightbox/#singleimage)
* [EasyZoom, jQuery image zoom plugin](http://i-like-robots.github.io/EasyZoom/)
* [Owl Carousel](http://www.owlgraphic.com/owlcarousel/)
* [Image Gallery jQuery Thumbnail Plugin | Flow Slider](http://www.flowslider.com/)
* [jQuery Cropbox plugin](https://github.com/acornejo/jquery-cropbox)
* :star: [Fotorama](//fotorama.io/)
* :star: [fancyBox - Fancy jQuery Lightbox Alternative](//fancyapps.com/fancybox/)
* :star: [Colorbox - a jQuery lightbox](//www.jacklmoore.com/colorbox/)
* :star: [FiNGAHOLiC/jquery.imgpreloader](//github.com/FiNGAHOLiC/jquery.imgpreloader) - подходит для предзагрузки
* [jQuery Slideshow](//i-like-robots.github.io/jQuery-Slideshow/)
* [Swipebox | A touchable jQuery lightbox](//brutaldesign.github.com/swipebox/)
* [iLightBox · Revolutionary Lightbox Plugin](//iprodev.com/ilightbox/#singleimage)
* [EasyZoom, jQuery image zoom plugin](//i-like-robots.github.io/EasyZoom/)
* [Owl Carousel](//www.owlgraphic.com/owlcarousel/)
* [Image Gallery jQuery Thumbnail Plugin | Flow Slider](//www.flowslider.com/)
* [jQuery Cropbox plugin](//github.com/acornejo/jquery-cropbox)
### Слайдеры
* :star: [Swiper](http://www.idangero.us/sliders/swiper/) - крутой адаптивный слайдер со свайпом, подходит для всего, не только для картинок, хорошее API
* [Простой слайдер с множеством содержимым](http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/)
* [rcarousel – continuous jQuery UI carousel](http://ryrych.github.com/rcarousel/)
* [12 Professional Responsive jQuery Slider Plugins](http://designmodo.com/responsive-jquery-slider-plugins/)
* [Responsive Carousel](http://basilio.github.io/responsiveCarousel/)
* [FredHQ - Roundabout for jQuery by Fred LeBlanc](http://fredhq.com/projects/roundabout#/demos)
* [ResponsiveSlides.js · Responsive jQuery Slider & Slideshow](http://responsiveslides.com/)
* [jQuery UI Slider | Papermashup.com](http://papermashup.com/jquery-ui-slider/)
* :star: [Swiper](//www.idangero.us/sliders/swiper/) - крутой адаптивный слайдер со свайпом, подходит для всего, не только для картинок, хорошее API
* [Простой слайдер с множеством содержимым](//tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/)
* [rcarousel – continuous jQuery UI carousel](//ryrych.github.com/rcarousel/)
* [12 Professional Responsive jQuery Slider Plugins](//designmodo.com/responsive-jquery-slider-plugins/)
* [Responsive Carousel](//basilio.github.io/responsiveCarousel/)
* [FredHQ - Roundabout for jQuery by Fred LeBlanc](//fredhq.com/projects/roundabout#/demos)
* [ResponsiveSlides.js · Responsive jQuery Slider & Slideshow](//responsiveslides.com/)
* [jQuery UI Slider | Papermashup.com](//papermashup.com/jquery-ui-slider/)
### Каскад
* :star: [isotope](https://github.com/metafizzy/isotope)
* [kombai/freewall](https://github.com/kombai/freewall)
* :star: [isotope](//github.com/metafizzy/isotope)
* [kombai/freewall](//github.com/kombai/freewall)
### Полноэкранные страницы
* [fullPage.js One Page Scroll Sites](http://alvarotrigo.com/fullPage/)
* [· Scrolld.js ·](http://scrolldjs.com/)
* [fullPage.js One Page Scroll Sites](//alvarotrigo.com/fullPage/)
* [· Scrolld.js ·](//scrolldjs.com/)
### Вспомогательные
* :star: [device.js](https://github.com/matthewhudson/device.js)
* :star: [jquery.browser](https://github.com/gabceb/jquery-browser-plugin)
* [momentjs](http://momentjs.com/)
* [countdownjs](http://countdownjs.org/)
* [Canta/unserialize](https://github.com/Canta/unserialize/)
* [nielse63/jQuery-ResizeEnd](https://github.com/nielse63/jQuery-ResizeEnd)
* [dreamerslab/jquery.actual](https://github.com/dreamerslab/jquery.actual)
* [hammer.js](http://eightmedia.github.io/hammer.js/)
* :star: [device.js](//github.com/matthewhudson/device.js)
* :star: [jquery.browser](//github.com/gabceb/jquery-browser-plugin)
* [momentjs](//momentjs.com/)
* [countdownjs](//countdownjs.org/)
* [Canta/unserialize](//github.com/Canta/unserialize/)
* [nielse63/jQuery-ResizeEnd](//github.com/nielse63/jQuery-ResizeEnd)
* [dreamerslab/jquery.actual](//github.com/dreamerslab/jquery.actual)
* [hammer.js](//eightmedia.github.io/hammer.js/)
### Кроссбраузерные костыли на все случаи жизни
* [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) (Довольно неплохой обширный список плагинов)
* [rdebeasi/checked-polyfill](https://github.com/rdebeasi/checked-polyfill)
* [Selectivizr](http://selectivizr.com/) - CSS3 псевдо-классы и атрибуты селекторов для IE6-8
* [Placeholder Enhanced](https://github.com/dciccale/placeholder-enhanced) - подойдёт для IE9-
* [Columnizer](https://github.com/adamwulf/Columnizer-jQuery-Plugin) - подойдёт для IE9-
* [HTML5 Cross Browser Polyfills](//github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) (Довольно неплохой обширный список плагинов)
* [rdebeasi/checked-polyfill](//github.com/rdebeasi/checked-polyfill)
* [Selectivizr](//selectivizr.com/) - CSS3 псевдо-классы и атрибуты селекторов для IE6-8
* [Placeholder Enhanced](//github.com/dciccale/placeholder-enhanced) - подойдёт для IE9-
* [Columnizer](//github.com/adamwulf/Columnizer-jQuery-Plugin) - подойдёт для IE9-
### Навигация
* :star: [jQuery custom scrollbar demo](http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html)
* [darkwebdev/baron · GitHub](https://github.com/darkwebdev/baron)
* [nanoScroller.js](http://jamesflorentino.github.com/nanoScrollerJS/)
* [scrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer](http://markgoodyear.com/2013/01/scrollup-jquery-plugin/)
* [kswedberg/jquery-smooth-scroll](https://github.com/kswedberg/jquery-smooth-scroll)
* :star: [jQuery custom scrollbar demo](//manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html)
* [darkwebdev/baron · GitHub](//github.com/darkwebdev/baron)
* [nanoScroller.js](//jamesflorentino.github.com/nanoScrollerJS/)
* [scrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer](//markgoodyear.com/2013/01/scrollup-jquery-plugin/)
* [kswedberg/jquery-smooth-scroll](//github.com/kswedberg/jquery-smooth-scroll)
### Типография
* [jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content.](http://dotdotdot.frebsite.nl/)
* [jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content.](//dotdotdot.frebsite.nl/)
### Аудио/видео
* [HTML5 Video Player Comparison](http://praegnanz.de/html5video/)
* [MediaElement.js - HTML5 video player and audio player with Flash and Silverlight shims](http://mediaelementjs.com/)
* [Ion.Sound - jQuery плагин для воспроизведения звуков событий](http://ionden.com/a/plugins/ion.sound/)
* [Acorn Media Player, Accessible and customizable HTML5 media player](http://ghinda.net/acornmediaplayer/)
* [HTML5 Video Player | Video.js](http://www.videojs.com/)
* [http://mediafront.org/](http://mediafront.org/)
* [jPlayer : HTML5 Audio & Video for jQuery](http://www.jplayer.org/)
* [HTML5 Video Player Comparison](//praegnanz.de/html5video/)
* [MediaElement.js - HTML5 video player and audio player with Flash and Silverlight shims](//mediaelementjs.com/)
* [Ion.Sound - jQuery плагин для воспроизведения звуков событий](//ionden.com/a/plugins/ion.sound/)
* [Acorn Media Player, Accessible and customizable HTML5 media player](//ghinda.net/acornmediaplayer/)
* [HTML5 Video Player | Video.js](//www.videojs.com/)
* [//mediafront.org/](//mediafront.org/)
* [jPlayer : HTML5 Audio & Video for jQuery](//www.jplayer.org/)
### Формы и стилизация элементов
* [XDSoft plugins, scripts, program, parsers](http://xdsoft.net/jqplugins/datetimepicker/)
* [Selecter / Formstone / Ben Plum](http://www.benplum.com/formstone/selecter/)
* [joelpurra/skipontab](https://github.com/joelpurra/skipontab)
* [Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better](http://harvesthq.github.com/chosen/)
* [ddSlick - a jQuery plugin for custom drop down with images](http://designwithpc.com/Plugins/ddSlick#demo)
* [Примеры для плагина jQuery Form Styler](http://dimox.name/jquery-form-styler/)
* [jQRangeSlider - Technical demo](http://ghusse.github.com/jQRangeSlider/technicalDemo.html)
* [nazar-pc/PickMeUp](https://github.com/nazar-pc/PickMeUp)
* [XDSoft plugins, scripts, program, parsers](//xdsoft.net/jqplugins/datetimepicker/)
* [Selecter / Formstone / Ben Plum](//www.benplum.com/formstone/selecter/)
* [joelpurra/skipontab](//github.com/joelpurra/skipontab)
* [Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better](//harvesthq.github.com/chosen/)
* [ddSlick - a jQuery plugin for custom drop down with images](//designwithpc.com/Plugins/ddSlick#demo)
* [Примеры для плагина jQuery Form Styler](//dimox.name/jquery-form-styler/)
* [jQRangeSlider - Technical demo](//ghusse.github.com/jQRangeSlider/technicalDemo.html)
* [nazar-pc/PickMeUp](//github.com/nazar-pc/PickMeUp)
### Bootstrap
* [Плагин прогресса загрузки как на YouTube](http://skylo.s3-website-ap-southeast-1.amazonaws.com/)
* [Date Picker Input - Bootstrap Form Helpers](http://bootstrapformhelpers.com/datepicker/)
* [Плагин прогресса загрузки как на YouTube](//skylo.s3-website-ap-southeast-1.amazonaws.com/)
* [Date Picker Input - Bootstrap Form Helpers](//bootstrapformhelpers.com/datepicker/)
### Редактор/подсветка кода
* [Ace](http://ace.c9.io/)
* [Editr.js by @Idered](http://lab.idered.pl/editr/)
* [Ace](//ace.c9.io/)
* [Editr.js by @Idered](//lab.idered.pl/editr/)
### Работа с буфером обмена
* [zClip :: jQuery ZeroClipboard](http://www.steamdev.com/zclip/)
* [zClip :: jQuery ZeroClipboard](//www.steamdev.com/zclip/)
### Для создания плагинов
* [Еще раз о создании jQuery плагина или применяем на практике](http://habrahabr.ru/post/176743/)
* [Пишем свой jQuery plugin для Hash-навигации в AJAX-сайтах](http://habrahabr.ru/sandbox/57659/#2)
* [jQuery Boilerplate](http://jqueryboilerplate.com/)
* [Еще раз о создании jQuery плагина или применяем на практике](//habrahabr.ru/post/176743/)
* [Пишем свой jQuery plugin для Hash-навигации в AJAX-сайтах](//habrahabr.ru/sandbox/57659/#2)
* [jQuery Boilerplate](//jqueryboilerplate.com/)
### Анимация
* [Velocity](http://julian.com/research/velocity/)
* [Animate.css | Just-add-water CSS Animations](http://daneden.me/animate/)
* [jquery.animateNumber – simple number animation jQuery plugin](http://aishek.github.io/jquery-animateNumber/)
* [Velocity](//julian.com/research/velocity/)
* [Animate.css | Just-add-water CSS Animations](//daneden.me/animate/)
* [jquery.animateNumber – simple number animation jQuery plugin](//aishek.github.io/jquery-animateNumber/)
### Загрузка файлов
* [jQuery File Upload Demo](http://blueimp.github.io/jQuery-File-Upload/)
* [jQuery File Upload Demo](//blueimp.github.io/jQuery-File-Upload/)
***
## JavaScript
### Аудио/видео
* [Audio5js - The HTML Audio Compatibility Layer](http://zohararad.github.io/audio5js/)
* [Audio5js - The HTML Audio Compatibility Layer](//zohararad.github.io/audio5js/)
### Подсветка кода
* [CodeMirror](http://codemirror.net/)
* [highlight.js](http://highlightjs.org/)
* [Prism](http://prismjs.com/)
* [CodeMirror](//codemirror.net/)
* [highlight.js](//highlightjs.org/)
* [Prism](//prismjs.com/)
### Для изображений
* [Color Thief - Lokesh Dhakar](http://lokeshdhakar.com/color-thief/)
* [Color Thief - Lokesh Dhakar](//lokeshdhakar.com/color-thief/)
### Валидация
* [Validate.js](http://validatejs.org/)
* [Validate.js](//validatejs.org/)
README.md
View file @ e052fe4f
## Разделы
- [Стандарты](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/readme.md)
- [Git](http://git.zolotoykod.ru/111/developer-guide/blob/master/2-git/readme.md)
- [Программное обеспечение](http://git.zolotoykod.ru/111/developer-guide/blob/master/3-software/readme.md)
- [Стандарты](./1-standards/readme.md)
- [Git](./2-git/readme.md)
- [Программное обеспечение](./3-software/readme.md)
Useful Services.md
View file @ e052fe4f
# Полезные сервисы
## Шрифты
- http://webfont.ru/ - Бесплатные шрифты
- http://www.google.com/fonts/ - Шрифты на Google
- http://www.fontsquirrel.com/tools/webfont-generator - Генератор веб-шрифтов
- http://everythingfonts.com/font-face - Генератор веб-шрифтов
- //webfont.ru/ - Бесплатные шрифты
- //www.google.com/fonts/ - Шрифты на Google
- //www.fontsquirrel.com/tools/webfont-generator - Генератор веб-шрифтов
- //everythingfonts.com/font-face - Генератор веб-шрифтов
## Оптимизация изображений
- http://www.jpegmini.com/main/shrink_photo - JPEG
- https://tinypng.com/ - PNG
- https://kraken.io/web-interface - JPEG | PNG
- http://compressor.io/ - JPEG | PNG | GIF | SVG
- https://cloudconvert.com/ - Конвертация в любой формат
- //www.jpegmini.com/main/shrink_photo - JPEG
- //tinypng.com/ - PNG
- //kraken.io/web-interface - JPEG | PNG
- //compressor.io/ - JPEG | PNG | GIF | SVG
- //cloudconvert.com/ - Конвертация в любой формат
## Заглушки
- http://loremflickr.com/
- http://lorempixel.com/
- http://placebox.es/
- http://uifaces.com/
- http://randomuser.me/
- https://placekitten.com/
- //loremflickr.com/
- //lorempixel.com/
- //placebox.es/
- //uifaces.com/
- //randomuser.me/
- //placekitten.com/
## Коллекции изображений
- http://subtlepatterns.com/ - Паттерны
- http://www.noisetexturegenerator.com/ - Генератор текстур с шумом
- http://preloaders.net/ - Прелоадеры
- http://p.yusukekamiyamane.com/ - Более 3.5к прикольных иконок от Юсукэ Камияманэ
- https://www.iconfinder.com/ - Поиск интересных иконок
- http://www.gratisography.com/ - Бесплатные изображения
- http://www.freepik.com/ - Бесплатные изображения
- http://www.pexels.com/ - Бесплатные изображения
- //subtlepatterns.com/ - Паттерны
- //www.noisetexturegenerator.com/ - Генератор текстур с шумом
- //preloaders.net/ - Прелоадеры
- //p.yusukekamiyamane.com/ - Более 3.5к прикольных иконок от Юсукэ Камияманэ
- //www.iconfinder.com/ - Поиск интересных иконок
- //www.gratisography.com/ - Бесплатные изображения
- //www.freepik.com/ - Бесплатные изображения
- //www.pexels.com/ - Бесплатные изображения
## Про порядок в PSD
- http://designbeep.com/2013/01/23/25-highly-detailed-new-psd-files-for-free/
- http://i-love-psd.ru/
- http://photoshopetiquette.com/
- https://medium.com/in-russian/8c4073155f7d
- http://webdesignerschecklist.com/
- http://siliconrus.com/2015/01/14-design-to-code/
- //designbeep.com/2013/01/23/25-highly-detailed-new-psd-files-for-free/
- //i-love-psd.ru/
- //photoshopetiquette.com/
- //medium.com/in-russian/8c4073155f7d
- //webdesignerschecklist.com/
- //siliconrus.com/2015/01/14-design-to-code/
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment