Skip to content

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

fix(standards): fix incorrect code insertion, add linking

parent 163d3f30
Show whitespace changes
Inline Side-by-side
Showing with 38 additions and 29 deletions
1-standarts/1.1.1-html.md → 1-standards/1.1.1-html.md
View file @ 2cf0fafe
...@@ -494,4 +494,4 @@ contacts.html ...@@ -494,4 +494,4 @@ contacts.html
По мере необходимости можно писать комментарии для пометки назначения какого-либо куска кода или причины выбора того или иного решения, которое может быть неочевидными, пометки для заказчика, если код при определённых условиях должен быть изменён. Комментировать всё не нужно. По мере необходимости можно писать комментарии для пометки назначения какого-либо куска кода или причины выбора того или иного решения, которое может быть неочевидными, пометки для заказчика, если код при определённых условиях должен быть изменён. Комментировать всё не нужно.
Для русскоязычных проектов комментарии пишутся на русском языке, для иностранных - на английском. Для русскоязычных проектов комментарии пишутся на русском языке, для иностранных - на английском.
[Далее: Pug](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standarts/1.1.2-pug.md) [Далее: Pug](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.1.2-pug.md)
\ No newline at end of file \ No newline at end of file
1-standarts/1.1.2-pug.md → 1-standards/1.1.2-pug.md
View file @ 2cf0fafe
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
* [html2jade.org](http://html2jade.org/) - конвертация HTML в Jade и Jade в HTML. * [html2jade.org](http://html2jade.org/) - конвертация HTML в Jade и Jade в HTML.
* [html2jade.aaron-powell.com](http://html2jade.aaron-powell.com/) - и еще один инструмент для конвертации HTML → Jade. * [html2jade.aaron-powell.com](http://html2jade.aaron-powell.com/) - и еще один инструмент для конвертации HTML → Jade.
## 1. Назначение папок ## 1. Назначение папок
``` ```
...@@ -32,7 +31,6 @@ templates/ # Папка с шаблонами Jade ...@@ -32,7 +31,6 @@ templates/ # Папка с шаблонами Jade
└── scripts.pug # Шаблон со скриптами └── scripts.pug # Шаблон со скриптами
``` ```
## 2. Подключение частиц в страницы ## 2. Подключение частиц в страницы
* `include header` - используется для подключения частиц страницы, например, для шапок и подвалов. * `include header` - используется для подключения частиц страницы, например, для шапок и подвалов.
...@@ -41,10 +39,10 @@ templates/ # Папка с шаблонами Jade ...@@ -41,10 +39,10 @@ templates/ # Папка с шаблонами Jade
Во всех случаях через пробел указывается путь от текущего расположения до шаблона без расширения `.pug`. Во всех случаях через пробел указывается путь от текущего расположения до шаблона без расширения `.pug`.
## 3. Теги, классы и идентификаторы ## 3. Теги, классы и идентификаторы
- Классы и идентификаторы пишутся в начале, а не в атрибутах. Указывать тег `div` не нужно, т.к. он используется по умолчанию. - Классы и идентификаторы пишутся в начале, а не в атрибутах. Указывать тег `div` не нужно, т.к. он используется по умолчанию.
```pug ```pug
//- Плохо //- Плохо
div(class='carousel' id="carousel") div(class='carousel' id="carousel")
...@@ -58,6 +56,7 @@ nav.nav.nav_pos_left ...@@ -58,6 +56,7 @@ nav.nav.nav_pos_left
``` ```
- Идентификатор ставится после классов. - Идентификатор ставится после классов.
```pug ```pug
//- Плохо //- Плохо
.carousel#carousel.carousel_theme_dark .carousel#carousel.carousel_theme_dark
...@@ -68,10 +67,10 @@ nav.nav.nav_pos_left ...@@ -68,10 +67,10 @@ nav.nav.nav_pos_left
.carousel#carousel .carousel#carousel
``` ```
## 4. Атрибуты элемента и их значения ## 4. Атрибуты элемента и их значения
- Для нескольких атрибутов запятая не нужна. - Для нескольких атрибутов запятая не нужна.
```pug ```pug
//- Плохо //- Плохо
input.input-text(type='text', name='project', value='zk', required) input.input-text(type='text', name='project', value='zk', required)
...@@ -81,6 +80,7 @@ input.input-text(type='text' name='project' value='zk' required) ...@@ -81,6 +80,7 @@ input.input-text(type='text' name='project' value='zk' required)
``` ```
- Используйте одинарные кавычки для текстовых значений. - Используйте одинарные кавычки для текстовых значений.
```pug ```pug
//- Плохо //- Плохо
input.input-text(type="text" name="project" value="zk" required) input.input-text(type="text" name="project" value="zk" required)
...@@ -90,6 +90,7 @@ input.input-text(type='text' name='project' value='zk' required) ...@@ -90,6 +90,7 @@ input.input-text(type='text' name='project' value='zk' required)
``` ```
- Не давайте необязательные значения атрибутам. - Не давайте необязательные значения атрибутам.
```pug ```pug
//- Плохо //- Плохо
input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked='checked') input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked='checked')
...@@ -99,6 +100,7 @@ input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked) ...@@ -99,6 +100,7 @@ input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked)
``` ```
- Распологайте одиночные атрибуты в последнюю очередь. - Распологайте одиночные атрибуты в последнюю очередь.
```pug ```pug
//- Плохо //- Плохо
input.input-checkbox(type='checkbox' checked name='browser[]' value='chrome') input.input-checkbox(type='checkbox' checked name='browser[]' value='chrome')
...@@ -108,6 +110,7 @@ input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked) ...@@ -108,6 +110,7 @@ input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked)
``` ```
- Для числовых значений кавычки не нужны. - Для числовых значений кавычки не нужны.
```pug ```pug
//- Плохо //- Плохо
input.input-text(type="text" name="price" value="24999") input.input-text(type="text" name="price" value="24999")
...@@ -117,6 +120,7 @@ input.input-text(type='text' name='price' value=24999) ...@@ -117,6 +120,7 @@ input.input-text(type='text' name='price' value=24999)
``` ```
- Переносите атрибуты новую строку, если их много и/или значения длинные. - Переносите атрибуты новую строку, если их много и/или значения длинные.
```pug ```pug
//- Плохо //- Плохо
input.input-text(type='text' name='project' value='zk' data-required='Это поле обязательно для заполнения!' data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.' required) input.input-text(type='text' name='project' value='zk' data-required='Это поле обязательно для заполнения!' data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.' required)
...@@ -135,6 +139,7 @@ input.input-text( ...@@ -135,6 +139,7 @@ input.input-text(
## 5. Переносы строк ## 5. Переносы строк
- Добавляйте перенос строки для однотипных блоков с множественным вложением элементов. В лучшем случае используйте [примесь (mixin)](http://jade-lang.com/reference/#mixins). - Добавляйте перенос строки для однотипных блоков с множественным вложением элементов. В лучшем случае используйте [примесь (mixin)](http://jade-lang.com/reference/#mixins).
```pug ```pug
//- Плохо //- Плохо
.project .project
...@@ -163,6 +168,7 @@ input.input-text( ...@@ -163,6 +168,7 @@ input.input-text(
``` ```
- Строчные элементы можно записывать на одной строке через двоеточие `:`.<br>Не злоупотреблять с длинными классами. - Строчные элементы можно записывать на одной строке через двоеточие `:`.<br>Не злоупотреблять с длинными классами.
```pug ```pug
//- Хорошо //- Хорошо
ul.nav ul.nav
...@@ -183,6 +189,7 @@ ul.nav ...@@ -183,6 +189,7 @@ ul.nav
## 6. Комментарии ## 6. Комментарии
- Комментарии в Jade, которые не должны попасть в HTML записываются через `//-`. - Комментарии в Jade, которые не должны попасть в HTML записываются через `//-`.
```pug ```pug
// Этот комментарий попадёт в HTML. // Этот комментарий попадёт в HTML.
...@@ -190,6 +197,7 @@ ul.nav ...@@ -190,6 +197,7 @@ ul.nav
``` ```
- Простые или условные комментарии можно записывать прямо в HTML-формате. - Простые или условные комментарии можно записывать прямо в HTML-формате.
```html ```html
<!--[if IE]> <!--[if IE]>
meta(name='imagetoolbar' content='no') meta(name='imagetoolbar' content='no')
...@@ -201,10 +209,10 @@ meta(name='msthemecompatible' content='no') ...@@ -201,10 +209,10 @@ meta(name='msthemecompatible' content='no')
<!--/noindex--> <!--/noindex-->
``` ```
## 7. Пиши меньше, делай больше или используйте примеси! ## 7. Пиши меньше, делай больше или используйте примеси!
Для однотипных и повторяющихся строк кода имеет смысл использовать [примеси (mixins)](http://jade-lang.com/reference/#mixins) и указать только данные. Для однотипных и повторяющихся строк кода имеет смысл использовать [примеси (mixins)](http://jade-lang.com/reference/#mixins) и указать только данные.
```pug ```pug
mixin tools(list) mixin tools(list)
ul.list ul.list
...@@ -232,5 +240,5 @@ mixin tools(list) ...@@ -232,5 +240,5 @@ mixin tools(list)
</ul> </ul>
``` ```
[Пред.: HTML](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standarts/1.1.2-html.md) [Пред.: 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-standarts/1.2.1-css.md) [Далее: CSS](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.1-css.md)
\ No newline at end of file
1-standarts/1.2.1-css.md → 1-standards/1.2.1-css.md
View file @ 2cf0fafe
...@@ -32,7 +32,8 @@ ...@@ -32,7 +32,8 @@
.heading { .heading {
∙∙font-size: 32px; ∙∙font-size: 32px;
∙∙font-color: #000; ∙∙font-color: #000;
}``` }
```
- Каждый селектор на отдельной строке. - Каждый селектор на отдельной строке.
...@@ -218,8 +219,6 @@ input[type="text"] { ...@@ -218,8 +219,6 @@ input[type="text"] {
} }
``` ```
## <a name='#css-declaration-order'>Порядок объявления</a> ## <a name='#css-declaration-order'>Порядок объявления</a>
Объявления логически связанных свойств должны быть сгруппированы в следующем порядке: Объявления логически связанных свойств должны быть сгруппированы в следующем порядке:
...@@ -274,7 +273,6 @@ input[type="text"] { ...@@ -274,7 +273,6 @@ input[type="text"] {
} }
``` ```
## <a name='#css-import'>Не используйте @import</a> ## <a name='#css-import'>Не используйте @import</a>
По сравнению с тегом `<link>` правило `@import` медленнее, создает дополнительные запросы и может вызвать иные непредвиденные проблемы. Избегайте это правило и используйте вместо него один из альтернативных подходов: По сравнению с тегом `<link>` правило `@import` медленнее, создает дополнительные запросы и может вызвать иные непредвиденные проблемы. Избегайте это правило и используйте вместо него один из альтернативных подходов:
...@@ -294,7 +292,6 @@ input[type="text"] { ...@@ -294,7 +292,6 @@ input[type="text"] {
</style> </style>
``` ```
## <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](https://www.npmjs.org/package/grunt-combine-media-queries) или [Gulp](https://www.npmjs.org/package/gulp-combine-media-queries). В противном случае это приведет к тому, что медиавыражения будут не замечены в будущем.
...@@ -456,3 +453,6 @@ a.link { /* ... */ } ...@@ -456,3 +453,6 @@ a.link { /* ... */ }
- `BlockName--modName` — булевый модификатор блока. - `BlockName--modName` — булевый модификатор блока.
- `BlockName_ElemName` — элемент блока. - `BlockName_ElemName` — элемент блока.
- `BlockName_ElemName--modName` — булевый модификатор элемента. - `BlockName_ElemName--modName` — булевый модификатор элемента.
[Пред.: 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)
1-standarts/1.2.2-less.md → 1-standards/1.2.2-less.md
View file @ 2cf0fafe
...@@ -285,3 +285,6 @@ ...@@ -285,3 +285,6 @@
// &__item // &__item
// color #08f // color #08f
``` ```
[Пред.: 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)
1-standarts/1.3-javascript.md → 1-standards/1.3-javascript.md
View file @ 2cf0fafe
...@@ -133,6 +133,7 @@ bar = 9; ...@@ -133,6 +133,7 @@ bar = 9;
console.log(foo, bar); // => 1, 9. foo не изменился console.log(foo, bar); // => 1, 9. foo не изменился
``` ```
- **Сложные типы**: Когда вы взаимодействуете со сложным типом, вы взаимодействуете с ссылкой на его значение в памяти. - **Сложные типы**: Когда вы взаимодействуете со сложным типом, вы взаимодействуете с ссылкой на его значение в памяти.
+ `object` + `object`
...@@ -196,6 +197,7 @@ let superman = { ...@@ -196,6 +197,7 @@ let superman = {
type: 'alien' type: 'alien'
}; };
``` ```
**[[⬆]](#Оглавление)** **[[⬆]](#Оглавление)**
## <a name='arrays'>Массивы</a> ## <a name='arrays'>Массивы</a>
...@@ -256,16 +258,6 @@ function trigger() { ...@@ -256,16 +258,6 @@ function trigger() {
- Запятые в начале строки: **Нет.** - Запятые в начале строки: **Нет.**
```javascript ```javascript
// плохо
let once
, upon
, aTime;
// хорошо
let once,
upon,
aTime;
// плохо // плохо
let hero = { let hero = {
firstName: 'Bob' firstName: 'Bob'
...@@ -770,6 +762,7 @@ $sidebar.find('ul').hide(); ...@@ -770,6 +762,7 @@ $sidebar.find('ul').hide();
``` ```
- Для поиска одного элемента используйте только идентификатор `#id`. - Для поиска одного элемента используйте только идентификатор `#id`.
```javascript ```javascript
// плохо // плохо
$('.menu button'); $('.menu button');
...@@ -785,6 +778,7 @@ $('#menuToggler'); ...@@ -785,6 +778,7 @@ $('#menuToggler');
``` ```
- Для задания обработчика элементу используйте метод [`.on()`](http://api.jquery.com/on/). - Для задания обработчика элементу используйте метод [`.on()`](http://api.jquery.com/on/).
```javascript ```javascript
// Плохо // Плохо
$input $input
...@@ -878,3 +872,6 @@ blur: function () { /* ... */ } ...@@ -878,3 +872,6 @@ blur: function () { /* ... */ }
- [nettuts](http://net.tutsplus.com/?s=javascript) - [nettuts](http://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)
1-standarts/1.4-images.md → 1-standards/1.4-images.md
View file @ 2cf0fafe
# Изображения и их оптимизация # Изображения и их оптимизация
**Статус:** черновик.
**Статус:** черновик.
## Растр ## Растр
С вырезанием растра проблем обычно не возникает. С вырезанием растра проблем обычно не возникает.
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
В первом хранятся всякие фотографии или фоны. В первом хранятся всякие фотографии или фоны.
В PNG - иконки, все что требует прозрачности. В PNG - иконки, все что требует прозрачности.
## Оптимизация растровых изображений ## Оптимизация растровых изображений
Картинки следует ужимать в любом случае. Картинки следует ужимать в любом случае.
Для начала стоит использовать Save for Web в самом Adobe Photoshop. Для начала стоит использовать Save for Web в самом Adobe Photoshop.
...@@ -23,7 +22,6 @@ ...@@ -23,7 +22,6 @@
TinyPNG доступен в виде пакета для Grunt и Gulp, который ужимает все это в автоматическом режиме, TinyPNG доступен в виде пакета для Grunt и Gulp, который ужимает все это в автоматическом режиме,
единственное ограничение — 500 картинок в месяц. единственное ограничение — 500 картинок в месяц.
## Вектор в Adobe Illustartor ## Вектор в Adobe Illustartor
Вектор из AI – при наличии установленного AI проблем нет тоже. Вектор из AI – при наличии установленного AI проблем нет тоже.
Открывается Vector Smart Object в самом AI (контекстное меню слоя — Редактирвоать содержимое / Edit Contents) Открывается Vector Smart Object в самом AI (контекстное меню слоя — Редактирвоать содержимое / Edit Contents)
...@@ -32,7 +30,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото ...@@ -32,7 +30,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
и сконвертировать в SVG – https://cloudconvert.org/ai-to-svg. и сконвертировать в SVG – https://cloudconvert.org/ai-to-svg.
Но тут проблема в том, что экспортируется файл целиком, поэтому всякие наборы иконок вырезать таким способом не получится. Но тут проблема в том, что экспортируется файл целиком, поэтому всякие наборы иконок вырезать таким способом не получится.
## Вектор в формах Photoshop ## Вектор в формах Photoshop
Формы (shape) — это лучший вариант. Можно вырезать самим Photoshop, Формы (shape) — это лучший вариант. Можно вырезать самим Photoshop,
если версия CC или CC2014 – http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/. если версия CC или CC2014 – http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/.
...@@ -41,7 +38,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото ...@@ -41,7 +38,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
По размеру можно понять или просто проверить содержимое иконки. Такие «кривые» иконки мало того что не вектор, По размеру можно понять или просто проверить содержимое иконки. Такие «кривые» иконки мало того что не вектор,
весят больше чем обычный png, так еще и не отображаются на мобильниках и в сафари. весят больше чем обычный png, так еще и не отображаются на мобильниках и в сафари.
## Использование векторных иконок ## Использование векторных иконок
Самый лучший вариант — строчный SVG, внедрённый в HTML-разметку. Самый лучший вариант — строчный SVG, внедрённый в HTML-разметку.
Это несколько «захламляет» разметку, но зато позволяет делать очень крутые вещи. Это несколько «захламляет» разметку, но зато позволяет делать очень крутые вещи.
...@@ -52,7 +48,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото ...@@ -52,7 +48,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
Но это решаемо изящным костылем — навешивание фона на `<svg>` элемент. Но это решаемо изящным костылем — навешивание фона на `<svg>` элемент.
А для конвертации SVG в PNG есть всякие Grunt-задачи. А для конвертации SVG в PNG есть всякие Grunt-задачи.
## Минификация SVG ## Минификация SVG
Для SVG есть прекрасный инструмент — [SVGO](https://github.com/svg/svgo). Для SVG есть прекрасный инструмент — [SVGO](https://github.com/svg/svgo).
Как показывает практика, после экспорта почти любая иконка ужимается вдвое, были случаи с уменьшением и на 90%. Как показывает практика, после экспорта почти любая иконка ужимается вдвое, были случаи с уменьшением и на 90%.
...@@ -62,3 +57,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото ...@@ -62,3 +57,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
на многие мешает атрибуты из области видимости скетча (ну и сама область видимости). на многие мешает атрибуты из области видимости скетча (ну и сама область видимости).
Примерно так же поступает и Adobe Illustrator. Примерно так же поступает и Adobe Illustrator.
По-хорошему, всё лишнее убрать и затем пропустить через SVGO. По-хорошему, всё лишнее убрать и затем пропустить через SVGO.
[Пред.: 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)
1-standarts/1.5-editorconfig.md → 1-standards/1.5-editorconfig.md
View file @ 2cf0fafe
...@@ -8,3 +8,6 @@ ...@@ -8,3 +8,6 @@
Такой файл может храниться в системе контроля версий проекта, что позволит всем его разработчикам использовать одну и ту же конфигурацию. Такой файл может храниться в системе контроля версий проекта, что позволит всем его разработчикам использовать одну и ту же конфигурацию.
В каждом проекте Золотого Кода в корне находится файл конфигурации `.editorconfig`. В нем уже описано большинство соглашений по форматированию кода. Все что вам требуется - настроить свой редактор для работы с ним. В каждом проекте Золотого Кода в корне находится файл конфигурации `.editorconfig`. В нем уже описано большинство соглашений по форматированию кода. Все что вам требуется - настроить свой редактор для работы с ним.
[Пред.: 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/2.1-git.md)
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