fix(links): transfer repo from 111 to zk

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