From bf24fe497cd53f015c82f4e5b6e1363755dfb7f4 Mon Sep 17 00:00:00 2001 From: Aleksandr Petrov Date: Thu, 22 Dec 2016 18:15:27 +0300 Subject: [PATCH] Remove old articles Remove articles from previous version of sputnik --- docs/CSS/Stylus.md | 287 ----- docs/Git/Aliases.md | 103 -- docs/Git/Convention.md | 66 - docs/Git/Readme.md | 136 -- docs/{Markup/HTML.md => HTML/Readme.md} | 51 +- docs/Images.md | 62 - docs/JavaScript/Plugins.md | 123 -- docs/JavaScript/Readme.md | 1548 ----------------------- docs/Markup/Jade.md | 319 ----- docs/Markup/Readme.md | 24 - docs/Soft/Editors/EditorConfig.md | 8 - docs/Soft/Editors/Plugins.md | 66 - docs/Soft/Readme.md | 97 -- docs/Summary.md | 24 +- docs/Useful Services.md | 39 - 15 files changed, 36 insertions(+), 2917 deletions(-) delete mode 100644 docs/CSS/Stylus.md delete mode 100644 docs/Git/Aliases.md delete mode 100644 docs/Git/Convention.md delete mode 100644 docs/Git/Readme.md rename docs/{Markup/HTML.md => HTML/Readme.md} (89%) delete mode 100644 docs/Images.md delete mode 100644 docs/JavaScript/Plugins.md delete mode 100644 docs/JavaScript/Readme.md delete mode 100644 docs/Markup/Jade.md delete mode 100644 docs/Markup/Readme.md delete mode 100644 docs/Soft/Editors/EditorConfig.md delete mode 100644 docs/Soft/Editors/Plugins.md delete mode 100644 docs/Soft/Readme.md delete mode 100644 docs/Useful Services.md diff --git a/docs/CSS/Stylus.md b/docs/CSS/Stylus.md deleted file mode 100644 index e64cdbc..0000000 --- a/docs/CSS/Stylus.md +++ /dev/null @@ -1,287 +0,0 @@ -# Stylus -## Синтаксис в Stylus - -- Используйте вложенность с `&` ([амперсанд](https://ru.wikipedia.org/wiki/Амперсанд)), так будет видна зависимость и иерархическое дерево классов. - -```stylus -// Плохо -.project { /* ... */ } -.project__name { /* ... */ } -.project__description { /* ... */ } - -// Хорошо -.project - // ... - - &__name - // ... - - &__description - // ... -``` - -- Используйте табы для отступов, не используйте табы и пробелы одновременно - стили не скомпилируются.
-В этом примере `∙∙∙∙` - четыре пробела, а `――――` - один отступ с табуляцией. - -```stylus -// Плохо -.project -∙∙∙∙// ... - -∙∙∙∙&__name -∙∙∙∙∙∙∙∙// ... - -// Хорошо -.project -――――// ... - -――――&__name -—―――――――// ... -``` - -- Между классами с группой свойств добавляте перенос строки для лучшей читабельности. - -```stylus -// Плохо -.project - // ... - &__name - // ... - &:before - // ... - -// Хорошо -.project - // ... - - &__name - // ... - - &:before - // ... -``` - -- Опускайте использование фигурных скобок `{}`, двоеточий `:` и точек с запятыми `;`, в Stylus можно обходиться без них. - -```stylus -// Плохо -.button { - position: relative; - font-size: 14px; - line-height: 1; - background-color: #08f; -} - -// Хорошо -.button - position relative - font-size 14px - line-height 1 - background-color #08f -``` - -- Не используйте `&-` для описания имен составных блоков. Это затрудняет их поиск. - -```stylus -// Плохо -.project - // ... - - &-container - // ... - - &__name - // ... - - &:before - // ... - -// Хорошо -.project - // ... - - &__name - // ... - - &:before - // ... - -.project-container - // ... - -``` - -- Один файл — один блок. Имя файла совпадает с именем блока. Все стили для блока должны быть описаны в этом файле. Блок не должен встречаться в других файлах. - -```stylus -// Плохо -// main.styl -.project - // ... - - &__name - // ... - - &__before - // ... - -.project-container - // ... - -.portfolio - // ... - - -// Хорошо -// project.styl -.project - // ... - - &__name - // ... - - &__before - // ... - -// project-container.styl -.project-container - // ... - -// portfolio.styl -.portfolio - // ... - -``` - -- [Rupture](https://github.com/jenius/rupture)-примеси содержат в себе только блок свойств, селекторов внутри быть не должно. - -```stylus -// Плохо -.block - +below(666px) - &:first-child - margin-top: 5px - -// Хорошо -.block - &:first-child - +below(666px) - margin-top: 5px - -``` - -- Исходя из всех предыдущих получаем следующую иерархию и последовательность - -```stylus -// Блок -.block - // ... - - // @media-примеси блока - +below(640px) - // ... - - // Псевдоэлементы блока - &::after - // ... - - // Псевдоклассы блока - &:first-child - // ... - - // Псевдоэлементы с псевдоклассом блока - &::after - // ... - - // Модификаторы блока - &_key_val - // ... - - // Псевдоклассы модификатора блока - &:first-child - // ... - - // Псевдоэлементы модификатора блока - &::after - // ... - - // Элементы - &__element - // ... - - // @media-примеси элемента - +below(640px) - // ... - - // Псевдоэлементы элемента - &::after - // ... - - // Псевдоклассы элемента - &:first-child - // ... - - // Псевдоэлементы с псевдоклассом элемента - &::after - // ... - - // Модификаторы элемента - &_key_val - // ... - - // Псевдоклассы модификатора элемента - &:first-child - // ... - - // Псевдоэлементы модификатора элемента - &::after - // ... - - // Псевдоклассы блока, влияющие на элементы - &:first-child &__element - // ... - - // Модификаторы блока, влияющие на элементы - &_key_val &__element - // ... - - // N элементов ещё... -``` - -- Используйте примеси (mixins) для частоповторяющихся участков кода. -- Используйте циклы для однотипных строк с различием в значениях. - - -Полезные ссылки: - -- [Документация Stylus](http://stylus-lang.com/). -- [CSS2Stylus](http://css2stylus.com/) - онлайн препроцессор CSS в Stylus. Для табов в options выбрать Indentation - tab. - - - -## Переменные - -При частой записи одиноковых значений следует использовать переменные: -- Название шрифтов. -- Фирменные цвета. -- Ресурсы в `data-uri`. - -## Возможные проблемы и пути их решения - -- Когда комментируются свойства, нужно комментировать ещё и селектор, иначе он будет брать свойства вместе со следующим селектором или, если следующего селектора нет, компилятор выдаст ошибку. - -```stylus -// Плохо -.block - // ... - - &__item - // color #08f - -// Хорошо -.block - // ... - - // &__item - // color #08f -``` diff --git a/docs/Git/Aliases.md b/docs/Git/Aliases.md deleted file mode 100644 index 66836af..0000000 --- a/docs/Git/Aliases.md +++ /dev/null @@ -1,103 +0,0 @@ -# Короткие команды - -Чтобы было удобней работать, можно настроить алиасы для коротких команд. - -**Для пользователей OS X.** - -1. В консоли набрать `nano ~/.bash_profile`. -2. Добавить нужные строки. -3. Ctrl+X — Выйти.
- Y — Сохранить.
- [Enter] — Да, заменить. - - -**Для пользователей Windows.** - -Алиасы находятся в файле [`.profile`](https://gist.github.com/felixexter/ad648218634f9491a5b9). - -в папке профиля `c:\users\\`, где `` - имя вашего профиля, если такого файла нет, то его нужно создать. - -[**Список коротких команд:**](https://gist.github.com/felixexter/ad648218634f9491a5b9) -```php -# Отображение текущего состояния. -alias gs='git status ' - -# Отображение коммитов с коротким названием, датой, комментарием и автором. -alias gl='git --no-pager log --pretty=format:"%h | %ad | %s%d [%an]" --graph --date=short' -alias glo=gl -alias glog=gl - -# Добавление всех файлов с учётом удалённых и отображение текущего состояния. -alias gall='git add --all && git status' -alias gal=gall -alias ga=gall - -# Добавление всех файлов с учётом удалённых и коммит с комментарием. -alias gam='git commit -am ' - -# Коммит с комментарием. -# Пример: gc 'Fixed bug.' -alias gc='git commit -m ' - -# Отображает текущую ветку среди всех имеющихся. -alias gb='git branch ' - -# Отправка в произвольную ветку. -# Пример: gpo master -alias gpo='git push origin ' - -# Отправка в ветку master. -alias gpm='git push origin master' - -# Скачивание обновлений в ветку по умолчанию. -alias gpl='git pull ' - -# Скачивание обновлений в произвольную ветку. -# Пример: gplo mybranch -alias gplo='git pull origin ' - -# Скачивание обновлений в произвольную ветку и ребэйз. -# Пример: gpro master -alias gpro='git pull --rebase origin ' - -# Слияние ветки с ребэйзом -# Пример: gr mybranch -alias gr='git rebase ' - -# Продолжить ребэйз -# Пример: grc -alias grc='git rebase --continue ' - -# Скачивание обновлений всех последних изменний во всех ветках. -alias gfo='git fetch origin ' - -# Слияние веток. -# Пример: gm mybranch -alias gm='git merge ' - -# Слияние веток с флагом --no-ff. -# Пример: gmnf mybranch -alias gmnf='git merge --no-ff ' -alias gmnff=gmnf - -# Отмена коммита. -# Пример: gback -alias gback='git reset --soft HEAD^' - -# Переключение по веткам. -# Пример: go master -alias go='git checkout ' - -# Создание новой ветки. -# Пример: gob new-branch -alias gob='git checkout -b ' - -# Дополнительные алисы на случай опечатки. -alias got='git ' -alias get='git ' - -``` - -Эти алиасы не являются обязательными, настроить их можно так, как вам удобно. - -После создания/изменения алиасов необходимо закрыть консоль и открыть заново, чтобы алиасы были доступны. diff --git a/docs/Git/Convention.md b/docs/Git/Convention.md deleted file mode 100644 index 2898737..0000000 --- a/docs/Git/Convention.md +++ /dev/null @@ -1,66 +0,0 @@ -# Соглашение по именованию коммитов - -Используется подход conventional changelog. - -## Формат - -Каждый коммит начинается с **типа (type)**, **области (scope)** и **сообщения (subject)**. - -В самом конце может быть **описание (body)** с замечанием и т.п. - -- `type` - тип изменений, который содержит коммит; -- `scope` - область кода, в которой производились изменения; -- `subject` - сообщение; -- `body` (не обязательно) - подробно описание изменнений или важное замечание. - -``` -(): - - -``` - -Примеры: - -``` -feat(ruler): add inches as well as centimeters -fix(protractor): fix 90 degrees counting as 91 degrees -refactor(pencil): use graphite instead of lead - -Closes #640. - -Graphite is a much more available resource than lead, so we use it to lower the price. -fix(pen): use blue ink instead of red ink - -BREAKING CHANGE: Pen now uses blue ink instead of red. - -To migrate, change your code from the following: - -`pen.draw('blue')` - -To: - -`pen.draw('red')` -``` - -Каждая строка в коммите может содержать не более 100 символов. - -### Типы - -- `feat` - новая фича; -- `fix` - багофикс; -- `docs` - изменения в документации; -- `style` - форматирование кода или любые другие изменения, не влияющие на работу кода; -- `refactor` - изменения в коде, которые не относятся к фиксам или фиче; -- `test` - добавлен или обновлён тест; -- `chore` - изменения в сборщике, зависимостях и т.п. - -### Область - -Может быть любым специфичным местом в коде, в котором были изменения. **Не допускается более одной области.** - -### Сообщения - -- Только английский язык, никакого транслита; -- Используйте настоящее время, например, `change`, но не `changed` или `changes`; -- Первое слово с прописной буквы, не с заглавной; -- Не ставьте точку на конце. diff --git a/docs/Git/Readme.md b/docs/Git/Readme.md deleted file mode 100644 index ba5967b..0000000 --- a/docs/Git/Readme.md +++ /dev/null @@ -1,136 +0,0 @@ -# Git - система контроля версий -![git](http://git-scm.com/images/logo@2x.png) - - -## 1. Устанавливаем Git - -### 1.1. Устанавливаем консольную версию -Если у вас OS X - в консоли набрать `$ sudo port install git-core +doc +bash_completion +gitweb`. - -Если у вас Windows - скачать и устанвоить из [msysgit.github.io](http://msysgit.github.io/). - -### 1.2. По желанию устанавливаем Git клиент с GUI интерфейсом (не обязательно) - -* [GitHub Windows](https://windows.github.com/) - Git-клиент с GUI от GitHub для Windows 7, 8 и 8.1. - -* [GitHub Mac](https://mac.github.com/) - Git-клиент с GUI от GitHub для Mac OS X 10.9+. - -* [Git для Windows](http://msysgit.github.io/) - 3 в 1: Git, bash-консоль и простой GUI-клиент. - -* [SourceTree](http://www.sourcetreeapp.com) - бесплатный Git-клиент. Позволяет работать с Git без консоли в графической среде. Работает под Windows 7+ и Mac OS X 10.7+. Мультиязычное приложение. -Чтобы использовать SourceTree, обязательно нужно изучить основы Git и уметь работать с ним в консоли. - -## 2. Знакомимся с Git - -### 2.1. Проходим обучающийся курс -Для новичков рекомендуется пройти небольшой обучающийся курс [Git How To](http://githowto.com/ru). - -### 2.2. Полезные ссылки - -#### 2.2.1. Разбираемся с Git -* [Git How To](http://githowto.com/ru) — это интерактивный тур, который познакомит вас с основами Git. Тур создан с пониманием того, что лучшим способом научиться чему-нибудь — сделать это своими руками. -* [Команды git](http://git-scm.com/book/commands) - полный список команд на официальном сайте -* [git - the simple guide](http://rogerdudler.github.io/git-guide/) -* [Ежедневная работа с Git](http://habrahabr.ru/post/174467/) - статья на Хабре -* [Что нам стоит Git настроить!](http://habrahabr.ru/post/164297/) - статья на Хабре - -#### 2.2.2. Видео -* [Git & GitHub Tutorials](https://www.youtube.com/playlist?list=PLEACDDE80A79CE8E7) - -#### 2.2.3. Книги -* [Pro Git](http://git-scm.com/book/ru/v2) - официальная книга Git -* [Магия Git](http://dl.dropboxusercontent.com/u/281916/delete/book.pdf) - -#### 2.2.4. Шпаргалки -* [GitHub Cheatsheet](https://raw.githubusercontent.com/github/training-kit/master/downloads/github-git-cheat-sheet.pdf) - - -## 3. Работаем с Git - -### 3.1. Стартуем проект из [шаблона](https://github.com/CSSSR/csssr-project-template): - -* `git clone git@github.com:CSSSR/csssr-project-template.git new-project && cd new-project` - клонируем в папку `new-project` и переход в неё. -* `rm -rf .git` - удаляем папку `.git`, избавляясь от избыточной истории коммитов шаблона. -* `git init` - инициализируем Git. -* `git add -A` - индексируем все файлы. -* `git commit -m 'chore(project): init project'` - коммитим и комментируем в соответствии с соглашением по коммитоименованию. -* `git remote add origin ` - добавляем удалённый репозиторий, где `` - ссылка на git-репозиторий. -* `git push origin master` - заливаем проект в удалённый репозиторий в ветку `master`. -* Если залить не удалось, проект уже не пустой и может содержать `readme.md`, поэтому нужно сделать `rebase`: -``` -git pull --rebase origin master -``` -* Если есть конфликты, то см. п. 3.4. -* Заливаем снова. - -### 3.2. Разворачиваем уже имеющийся проект - -* `git clone ` - клонируем проект. - -### 3.3. Повседневная работа с проектом - -* `git pull --rebase origin master` - обновляем ветку `master` с ключём `--rebase`, чтобы избежать промежуточных коммитов. -* Если конфликтов не произошло, то пропускаем этот пункт. Если есть, то правим руками (см. п. 3.4). -* Делаем изменения в коде, например, добавляем главную страницу. -* `git add -A` - индексируем изменения. -* `git commit -m 'feat(main): add main page'` - закоммитили в соответствии с соглашением по коммитоименованию. -* `git push origin master` - заливаем изменения в удалённый репозиторийй в ветку `master`. - -### 3.4. Разрешаем конфликты - -* Правим руками файлы, содержащие конфликты (посмотреть их можно через `git status`): -``` -<<<<<<< HEAD -// 1 секция: Код текущей ветки -======= -// 2 секция: Наш изменения в коде ->>>>>>> master -``` - -Чтобы разрешить конфликт, нужно *внимательно* сравнить изменения в 1 секции и добавить недостающий (новый) код в свою (2 секцию). После этого удаляем всё, кроме 2 секции. - -``` -// 2 секция: Наш изменения в коде -``` - -* После этого индексируем изменения. -``` -git add -A -``` - -* Далее нужно продолжить `rebase` с помощью команды: -``` -git rebase --continue -``` - -* Если конфликтов больше нет и `reabase` завершился, то на это всё, если конфликты есть, то повторить итерацию. - -### 3.5. Создаём фичу в отдельной ветке - -#### 3.5.1. Создаём ветку - -* `git pull --rebase origin master` - обновляем ветку `master` с ключём `--rebase`, чтобы избежать промежуточных коммитов. -* `git checkout -b feature/` - создаём ветку с `feature/`, где `` - название фичи. -* Делаем изменения в коде, например, добавляем главную страницу. -* `git add -A` - индексируем изменения. -* `git commit -m 'feat(main): add main page'` - закоммитили в соответствии с соглашением по коммитоименованию. -* `git push origin feature/` - заливаем нашу ветку в удалённый репозиторий. - - -#### 3.5.2. Делаем `rebase` нашей фичи в основную ветку `master`. - -* Находясь в ветке фичи выполняем команду: -``` -git rebase master -``` -* Если конфликтов нет, то пропускаем этот пункт. Если есть, то разрешаем конфликты (см. п. 3.4). -* Переходим в ветку `master` и сливаем в неё фичу: -``` -git merge feature/ -``` -* `git push origin master` - заливаем итоговые изменения в удалённый репозиторий. - -### 3.6. Полезные команды на всякий случай - -* `git commit --amend` - позволяет изменить название коммита. Если нужно включить ещё и изменённые файлы, то перед этим проиндексировать файлы. -* `git reset --hard HEAD^` - полное удаление последнего коммита. diff --git a/docs/Markup/HTML.md b/docs/HTML/Readme.md similarity index 89% rename from docs/Markup/HTML.md rename to docs/HTML/Readme.md index 938e57e..2145964 100644 --- a/docs/Markup/HTML.md +++ b/docs/HTML/Readme.md @@ -1,6 +1,7 @@ # HTML ## Общее ### HTML5 Doctype + Указывайте в начале каждой HTML-страницы тип документа HTML5 Doctype, чтобы браузер работал в режиме соответствия стандартам. Это обеспечит единое отображение страниц в разных браузерах. @@ -18,11 +19,12 @@ ``` ### Lang -Из спецификации HTML5: > Для указания языка документа авторам рекомендуется прописывать атрибут языка в корневом элементе HTML. Это поможет инструментам синтеза речи определить какое произношение использовать, а инструментам перевода - какие правила. +> +> [HTML Specification][1] ```html @@ -30,19 +32,17 @@ ``` -Подробнее познакомиться с атрибутом `lang` можно в -[спецификации](https://w3c.github.io/html/dom.html#element-attrdef-global-lang). -Список кодов различных языков на -[Sitepoint](http://reference.sitepoint.com/html/lang-codes). +Список кодов различных языков на [Sitepoint][2]. ## Head ### Favicon + Помимо стандартной фавиконки 16х16 есть большое множество иконок, которые используются на различных платформах, — вплоть до 512х512. Если иконки отличаются деталями, то необходимо отрисовать их вручную. Если же иконки отличаются только размером, возьмите самую большую иконку и сгенерируете все остальные, рекомендуемый инструмент — -[Real Favicon Generator](https://realfavicongenerator.net/): +[Real Favicon Generator][3]: ```html @@ -54,27 +54,31 @@ ``` ### Метатеги + - IE каждой версии поддерживает работу «как предыдущая версия» и в зависимости -от различных условий может автоматически отображать страницу как предыдущая -версия. Метатегом можно заставить сайт отображаться в режиме последней версии. + от различных условий может автоматически отображать страницу как предыдущая + версия. Метатегом можно заставить сайт отображаться в режиме последней версии. ```html ``` + - Всего явно объявляйте кодировку символов. При этом, вы сможете избежать -использования символьных сущностей в HTML-коде, если их кодировка совпадает -с кодировкой документа (как правило, utf-8). + использования символьных сущностей в HTML-коде, если их кодировка совпадает + с кодировкой документа (как правило, utf-8). ```html ``` ### CSS + Для подключения CSS идеальный способ — использование Critical CSS, которое подключается через `