Рефакторинг работы с данными в Eleventy (doka-guide#1083)

* Удаляет `permalink: false` у коллекции people * Удаляет тег `practice` из файлов практик * Переносит отдельные сраницы в папку "pages" * Удаляет `permalink: false` из файлов практик * Удаляет пустой yaml-блок * Удаляет первую пустую строку * Восстанавливает строки с символами `---` * Воcстанавливает контент для практики `class-selector`
stavis-dev · Jul 2, 2021 · 3ac9fbf · 3ac9fbf
1 parent 69c3a44
commit 3ac9fbf
Show file tree

Hide file tree

Showing 288 changed files with 1 addition and 1,694 deletions.
diff --git a/css/active/practice/solarrust.md b/css/active/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Дизайнеры и верстальщики почему-то часто забывают про тот короткий промежуток времени, когда пользователь нажал кнопку мыши, но ещё её не отпустил. И не стилизуют состояние `:active`. Но «дьявол кроется в деталях», и если в вашем интерфейсе будут продуманы даже такие небольшие элементы, то он будет создавать ощущение опрятности и заботы о пользователе.
 
 🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: `:link` — `:visited` — `:hover` — `:active`.

diff --git a/css/after/practice/ezhkov.md b/css/after/practice/ezhkov.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Псевдоэлементы [`::before`](/css/before/) и `::after` можно использовать и для более сложной стилизации:
 
 ```html

diff --git a/css/align-items/practice/solarrust.md b/css/align-items/practice/solarrust.md
@@ -1,7 +1 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Если флекс-элементы выстроены в несколько колонок, то выравнивание по поперечной оси будет применяться к каждой строке отдельно.
diff --git a/css/appearance/practice/ezhkov.md b/css/appearance/practice/ezhkov.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Сброс стандартного отображения элементов может быть полезным при применении пользовательских стилей к элементам форм:
 
 <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="ezhkov" data-slug-hash="eYBmqWm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="appearance 3">

diff --git a/css/attr/practice/ezhkov.md b/css/attr/practice/ezhkov.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Самый распространённый случай использования функции `attr()` - отображение значения атрибута `href` после текста ссылки при печати страницы на принтере.
 
 ```html

diff --git a/css/attribute-selector/practice/ezhkov.md b/css/attribute-selector/practice/ezhkov.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 При помощи селектора по атрибуту круто стилизовать ссылки, основываясь на значении атрибута `href`. Можно визуально разделять ссылки, ведущие на соседние страницы сайта, и ссылки, ведущие на другие сайты:
 
 ```html

diff --git a/css/background-color/practice/solarrust.md b/css/background-color/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Если нужна красивая кнопка (`button`), то не забудь *сбросить* фон: укажи для `background-color: transparent`. Или тот цвет фона, который нужен по дизайну. По умолчанию у всех кнопок серый фон с приветом из девяностых.
 
 🛠 Аналогичным способом можно сделать красивые прозрачные поля ввода (`input`) в формах.

diff --git a/css/background-image/practice/furtivite.md b/css/background-image/practice/furtivite.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Стоит понимать разницу между `<div>` с фоновой картинкой и, собственно, картинкой `<img>`. У картинки можно указывать только один параметр размера: высоту или ширину, и браузер сам рассчитает второй. У блока с фоном надо указывать оба параметра.
 
 Так происходит потому, что картинка `<img>` — это контент, под который будут подстраиваться элементы вокруг и блок-родитель, а фоновое изображение у `<div>` — это простой декоративный элемент.

diff --git a/css/background-image/practice/solarrust.md b/css/background-image/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Если задаёшь фоновую картинку для блока с текстом, то обязательно задавай фоновый цвет.
 
 Почему это важно: если при загрузке страницы картинка будет долго загружаться или вообще не загрузится, то белый текст будет совершенно не виден. Пользователь потеряет контекст и, вероятнее всего, интерес к вашей странице.

diff --git a/css/background-image/practice/vladimir.md b/css/background-image/practice/vladimir.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 `backgroung-image` хорош тем, что при правильном сочетании с `background-size` может встроить фоновую картинку как угодно. Получается порой более гибко, чем обычный `<img>`, но не стоит увлекаться этим тегом: поисковик тебе за это спасибо не скажет.
 
 Имеет смысл ставить картинку как фон только тогда, когда `<img>` использовать невозможно.
diff --git a/css/background-position/practice/solarrust.md b/css/background-position/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 В работе редко требуется располагать маленькие фоновые картинки в больших блоках. Сейчас принято делать красивые фоны на всю ширину. Но для любых фонов принято указывать `background-position: center` или `background-position: 50% 50%`. В качестве подстраховки от фатальной поломки вёрстки.
 
 🛠 Можно встретить такую запись `background-position: right 20px bottom 10px;`. В этом случае отступ будет отсчитываться не от верхнего левого угла, а от указанной при помощи ключевого слова стороны. В данном случае картинка будет расположена в 20 пикселях от правого края и в 10 пикселях от нижнего края.

diff --git a/css/background-repeat/practice/solarrust.md b/css/background-repeat/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 `background-repeat` — свойство простое. Написано повторять — повторяем фон. Написано не повторять — не повторяем.
 
 🛠 Чаще всего в работе встречается значение свойства `background-repeat: no-repeat`.

diff --git a/css/background-size/practice/solarrust.md b/css/background-size/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Если для задания фона используется шорткат `background`, то значение для `background-size` указывается последним, после слэша `/`. Пример: `background: url('example.jpg') no-repeat center / **cover**`
 
 🛠 Свойство `background-size` очень пригодится, если хочется сделать фон с повторяющимся элементом. Так называемым паттерном.

diff --git a/css/before/practice/ezhkov.md b/css/before/practice/ezhkov.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Псевдоэлемент `::before` очень часто используют для стилизации нестандартных маркеров списка:
 
 ```html

diff --git a/css/border-image/practice/solarrust.md b/css/border-image/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Это свойство нечасто встречается в повседневной работе, но знать о нём стоит хотя бы из уважения к истории развития веба.
 
 Раньше не существовало свойства `border-radius` и для того, чтобы создать элемент с закруглёнными краями, приходилось нарезать картинки и задавать рамку именно при помощи изображения. А закруглённые края, как на зло, были тогда в большой моде 🤯

diff --git a/css/border-radius/practice/realetive.md b/css/border-radius/practice/realetive.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Если вы не уверены, что блок всегда будет квадратным, то для подстраховки можно указывать закругление в абсолютных единицах.  Причём указать значение, бо́льшая чем максимальная ширина и высота блока. Например, `border-radius: 9999px`. Если в этой ситуации указывать закругление в процентах, то значение будет считаться от ширины и высоты. Что приведёт к вытягиванию блока в _яйцо_:
 
 <p class="codepen" data-height="588" data-theme-id="light" data-default-tab="result" data-user="Realetive" data-slug-hash="yLaXjqp" data-preview="true" style="height: 588px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="border-radius">

diff --git a/css/border-radius/practice/solarrust.md b/css/border-radius/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Самый крутой лайфхак — это круглые элементы при помощи `border-radius`. Они часто нужны для всяких лейблов на странице.
 
 ```html

diff --git a/css/border/practice/solarrust.md b/css/border/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 При помощи `border` можно рисовать различные геометрические фигуры. Например, треугольник. Для этого потребуется задать прозрачную рамку с двух сторон и непрозрачную рамку с третьей стороны.
 
 ```html

diff --git a/css/box-shadow/practice/solarrust.md b/css/box-shadow/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 С помощью тени можно создать блок с несколькими рамками!
 
 ```html

diff --git a/css/box-sizing/practice/solarrust.md b/css/box-sizing/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Из-за стандартного механизма расчёта размера элемента многие начинающие разработчики получают не те размеры элемента, которые ожидали. При этом есть два решения:
 
 1. Подгонять размер элемента под желаемый, высчитывая самостоятельно, какими должны быть внутренние отступы и рамка, чтобы в итоге получился нужный размер.

diff --git a/css/calc/practice/solarrust.md b/css/calc/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Возьмём тот же пример с тремя колонками из начала статьи. Пусть у каждой из колонок будет внешний отступ по 40px с каждой из сторон. Если зададим свойства _в лоб_, то ничего не выйдет, последний блок _падает_ на новую строку.
 
 ```html

diff --git a/css/cascade/practice/realetive.md b/css/cascade/practice/realetive.md
@@ -1,7 +1 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Понимание каскада — один из ключевых моментов в понимании работы CSS. С опытом вы научитесь так эффективно писать селекторы и группировать стили, что сам уровень каскада будет минимальным — это ускоряет «чтение» кода и упрощает поддержку. Ну и в идеале — исключить необходимость использования `!important`.
diff --git a/css/checked/practice/solarrust.md b/css/checked/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Очень часто этот класс пригождается, когда вы делаете какой-то нестандартный элемент управления на основе чекбокса или радиокнопок. В этом случае стандартные элементы скрываются, но их поведение, в частности псевдокласс `:checked`, позволяет что-то переключать вообще без JavaScript.
 
 Например, вот это выпадающее меню реализовано на чистом HTML с использованием трюка в чекбоксом:

diff --git a/css/class-selector/practice/ezhkov.md b/css/class-selector/practice/ezhkov.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Селектор по классу является основным селектором для стилизации любой веб-страницы. Благодаря тому, что одному элементу можно задать несколько классов, а нескольким элементам — один и тот же класс, мы получаем очень гибкий способ стилизации страниц любой сложности.
 
 Например, мы можем уточнить один селектор по классу другим:

diff --git a/css/color/practice/solarrust.md b/css/color/practice/solarrust.md
@@ -1,7 +1 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Цвет текста — наследуемое свойство. Если на странице преобладает какой-то цвет, то его можно задать для селектора `html`. В этот цвет будет автоматически окрашен весь текст на странице.
diff --git a/css/combined-selectors/practice/realetive.md b/css/combined-selectors/practice/realetive.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Лучше записывать селекторы по одному на строчку — так их легче читать и редактировать:
 
 ```css

diff --git a/css/comments/practice/furtivite.md b/css/comments/practice/furtivite.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Иногда в процессе разработки нужно быстро проверять какую-то гипотезу. Не хочется сгоряча удалять блок кода, вымученного кровью и потом. Просто закомментируй подозрительные строки. Если причина не в них, то раскомментируешь. Удалить всегда успеешь.
 
 🛠 Удаляй все закомментированные свойства перед деплоем — публикацией проекта. Комментарии — утилитарная штука. Они полезны, но сильно загружают код и затрудняют его чтение. Если это не информационные комментарии, а следы экспериментов — удаляй их.

diff --git a/css/comments/practice/solarrust.md b/css/comments/practice/solarrust.md
@@ -1,7 +1 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Как всегда, стоит удалить все те комментарии, которые не должен видеть заказчик или пользователь конечного продукта, перед деплоем. Все, что неактуально, решено, касается внутренних процессов в вашей компании и не будет использоваться в дальнейшем — смело под нож!
diff --git a/css/content/practice/ezhkov.md b/css/content/practice/ezhkov.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Свойство `content` со значением `counter()` активно применяется в случаях, когда нужно расставить автоматическую нумерацию элементов, не относящихся к спискам:
 
 ```html

diff --git a/css/css-rule/practice/solarrust.md b/css/css-rule/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Браузер прочитает CSS как бы вы его не оформили. Хоть в одну строку. Но для простоты чтения и редактирования принято соблюдать простые правила оформления:
 
 - Если перечисляете несколько селекторов, ставьте каждый из них на новую строку.

diff --git a/css/cursor/practice/solarrust.md b/css/cursor/practice/solarrust.md
@@ -1,7 +1 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Чаще всего это свойство пригождается при вёрстке кнопок. По умолчанию браузер не меняет внешний вид курсора при наведении мыши на кнопку. Поэтому, если на кнопку можно нажать, ей следует прописать `cursor: pointer`, чтобы пользователь точно понял, что с элементом можно взаимодействовать.
diff --git a/css/custom-properties/practice/ezhkov.md b/css/custom-properties/practice/ezhkov.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Можно эффективно использовать кастомные свойства при разработке дизайн-системы:
 
 <p class="codepen" data-height="323" data-theme-id="light" data-default-tab="css,result" data-user="ezhkov" data-slug-hash="gOgdZLK" style="height: 323px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS-variables 2">

diff --git a/css/disabled-enabled/practice/solarrust.md b/css/disabled-enabled/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом `disabled`, потому что он сразу же отключает возможность нажать на этот элемент без дополнительных стилей. И, ориентируясь на него, гораздо удобнее прописывать стили для неактивных элементов, используя псевдокласс `disabled`.
 
 Код для кнопки из моего последнего проекта:

diff --git a/css/display/practice/solarrust.md b/css/display/practice/solarrust.md
@@ -1,9 +1,3 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 Если пишешь `display: inline-block` с целью выстроить несколько блоков в строку, то обязательно указывай для родительского элемента `font-size: 0`. В противном случае между инлайн-блочными элементами будут небольшие отступы, как между словами — пробелы.
 
 🛠 Многие начинающие разработчики сталкиваются с проблемой при выводе иконок соцсетей фоном для ссылок. Ссылки изначально являются строчными элементами. Для изменения размера ссылки и для возможности задать ей фон её, ссылку, нужно сделать блочной (`display: block`) или строчно-блочной (`display: inline-block`).

diff --git a/css/empty/practice/ezhkov.md b/css/empty/practice/ezhkov.md
@@ -1,7 +1 @@
----
-tags:
-  - practice
-permalink: false
----
-
 🛠 В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса `:empty` позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента.