From 1ddaa905b31f0aa7e00c50bf8e69c5694cd38e97 Mon Sep 17 00:00:00 2001
From: Ruslan Makarov <ruslan.makarov@gmail.com>
Date: Thu, 16 Nov 2023 12:12:57 +0700
Subject: [PATCH] feat: add chapter 11

---
 docs/.vitepress/config/sidebar.book.ru.ts     |   2 +-
 .../Chapter_10__Deploying_Your_Application.md |   2 +-
 ...hapter_11__Bonus_Chapter_-_UX_Patterns.md} | 755 +++++++-----------
 .../Chapter_9__Testing_and_Source_Control.md  |   2 +-
 4 files changed, 299 insertions(+), 462 deletions(-)
 rename docs/book/ru/{Chapter_11__Bonus_Chapter_-_UX_Patterns.md1 => Chapter_11__Bonus_Chapter_-_UX_Patterns.md} (76%)

diff --git a/docs/.vitepress/config/sidebar.book.ru.ts b/docs/.vitepress/config/sidebar.book.ru.ts
index 8266ed28e..98d4cebdd 100644
--- a/docs/.vitepress/config/sidebar.book.ru.ts
+++ b/docs/.vitepress/config/sidebar.book.ru.ts
@@ -46,7 +46,7 @@ export default [
   },
   {
     text: "Глава 11: UX Patterns",
-    link: "/book/ru/not-implemented",
+    link: "/book/ru/Chapter_11__Bonus_Chapter_-_UX_Patterns",
   },
   {
     text: "Приложение: Миграция с Vue 2 на Vue 3",
diff --git a/docs/book/ru/Chapter_10__Deploying_Your_Application.md b/docs/book/ru/Chapter_10__Deploying_Your_Application.md
index 6728b1b6b..b4051a6f7 100644
--- a/docs/book/ru/Chapter_10__Deploying_Your_Application.md
+++ b/docs/book/ru/Chapter_10__Deploying_Your_Application.md
@@ -478,7 +478,7 @@ SSH доступ, процесс также несложен. Фонд Let's Enc
 фреймворком и заканчивая тестированием отдельных компонентов и
 установкой готовых к производству файлов на веб-сервер. 
 
-## Вопросы к обзору
+## Вопросы для проверки
 
 - Что такое домен верхнего уровня и чем он отличается от домена?
 - Существует ли ограничение на количество поддоменов, которые мы можем создать для нашего домена? Почему?
diff --git a/docs/book/ru/Chapter_11__Bonus_Chapter_-_UX_Patterns.md1 b/docs/book/ru/Chapter_11__Bonus_Chapter_-_UX_Patterns.md
similarity index 76%
rename from docs/book/ru/Chapter_11__Bonus_Chapter_-_UX_Patterns.md1
rename to docs/book/ru/Chapter_11__Bonus_Chapter_-_UX_Patterns.md
index aacea17d8..0b8ac571d 100644
--- a/docs/book/ru/Chapter_11__Bonus_Chapter_-_UX_Patterns.md1
+++ b/docs/book/ru/Chapter_11__Bonus_Chapter_-_UX_Patterns.md
@@ -5,74 +5,82 @@
 специализированным обучением. Если в корпоративных приложениях и
 специализированном оборудовании это еще как-то применимо, то на
 потребительском рынке такая концепция практически полностью исчезла.
+
 Представьте себе, что для каждого веб-сайта нужно было прочитать
 руководство и пройти трехмесячные курсы обучения, прежде чем начать его
 использовать. Как же так получается, что сегодня пользователь,
 познакомившись с новым приложением, может с первого взгляда справиться с
-основными задачами? Несомненно, большой вклад в эту ситуацию внесли
+основными задачами? 
+
+Несомненно, большой вклад в эту ситуацию внесли
 многолетние исследования и прогресс в области человеко-компьютерного
 взаимодействия - дисциплины, практически такой же древней, как и сами
 компьютеры.
 
-В этой главе мы расскажем о том, что такое человеко-компьютерное
-взаимодействие.
-
-В этой главе мы сделаем шаг назад от тонкостей внутренних паттернов и
+В этой главе мы сделаем шаг назад от тонкостей внутренних шаблонов и
 архитектуры программного обеспечения и рассмотрим некоторые из
-устоявшихся паттернов для проектирования **пользовательского
+устоявшихся шаблонов для проектирования **пользовательского
 интерфейса** (**UI**) и **пользовательского опыта** (**UX**). Мы сделаем
 следующее:
 
--   Поймем различия между UI и UX
--   Познакомимся с распространенными паттернами UX в веб-приложениях
--   Узнаем о злой стороне UX с помощью темных паттернов
+- Поймем различия между UI и UX
+- Познакомимся с распространенными шаблонами UX в веб-приложениях
+- Узнаем о злой стороне UX с помощью "темных" шаблонов
 
 К концу этой главы вы получите широкое представление о том, что такое
-UX-паттерны, на каких принципах они основаны, каковы наиболее
+UX-шаблоны, на каких принципах они основаны, каковы наиболее
 распространенные на сегодняшний день подходы и какие эффекты они
 вызывают у пользователя - положительные или отрицательные. Вы также
 изучите и выработаете общий язык для взаимодействия с дизайнерами UI и
 UX и другими разработчиками.
 
-# Технические требования
+## Технические требования
 
 Эта глава носит в основном информационный характер, однако в ней
 рассматриваются небольшие примеры, реализованные на Vue 3, поскольку они
 демонстрируют использование техники, не встречавшейся до сих пор в
 книге. Полный исходный код можно найти в папке проекта главы в
-репозитории книги по адресу
-<https://github.com/PacktPublishing/Vue.js-3-Design-Patterns-and-Best-Practices/tree/main/Chapter11>.
+репозитории книги по адресу:
+[https://github.com/PacktPublishing/Vue.js-3-Design-Patterns-and-Best-Practices/tree/main/Chapter11](https://github.com/PacktPublishing/Vue.js-3-Design-Patterns-and-Best-Practices/tree/main/Chapter11).
 
-Посмотрите следующее видео, чтобы увидеть код в действии:
-<https://packt.link/5ymkr>
+Посмотрите следующее [видео](https://packt.link/5ymkr), чтобы увидеть код в действии.
 
-# UI-дизайн против UX-дизайна
+## UI-дизайн против UX-дизайна
 
 Очень часто можно услышать, что эти два термина ассоциируются или
 используются неразличенно, а в некоторых случаях обе обязанности
 объединяются в одну роль в команде, что еще больше усиливает путаницу.
 
--   **Дизайн пользовательского интерфейса** отвечает за определение
+- **Дизайн пользовательского интерфейса (User Inteface - UI)** отвечает за определение
     визуального языка для представления информации и сбора
     пользовательских данных для взаимодействия с приложением. Он
     включает в себя разработку визуальных стилей, типографики,
     взаимодействия, цветов, размеров, анимации, звуков и т.д., которые
     составляют интерфейс между человеком и компьютером (программным и
-    аппаратным обеспечением). Это относится как к визуальным средам
+    аппаратным обеспечением). 
+    
+    Это относится как к визуальным средам
     (веб, мобильные устройства и т.д.), так и к другим типам, таким как
     интерфейсы на естественном языке (вспомните помощников
     искусственного интеллекта, таких как Siri, Alexa и т.д.).
--   **UX-дизайн** включает условия, которые влияют на дизайн
+    
+- **UX-дизайн (User eXperience)** включает условия, которые влияют на дизайн
     пользовательского интерфейса и направляют его, но охватывает более
     широкий взгляд на восприятие пользователем системы, компании или
-    функции, с которой он взаимодействует. Он включает в себя не только
+    функции, с которой он взаимодействует. 
+    
+    Он включает в себя не только
     программные или аппаратные элементы, но и такие аспекты, как
     поддержка, продвижение, постсервисное обслуживание и т.д. Цель -
     создать широкий и, надеюсь, успешный положительный опыт с точки
-    зрения пользователя. Под этим определением подразумевается
+    зрения пользователя. 
+    
+    Под этим определением подразумевается
     взаимодействие с другими дисциплинами, такими как маркетинг,
     поддержка клиентов, дистрибуция, управление продуктом, узнаваемость
-    бренда и т.д. Его основная цель - изменить или создать у
+    бренда и т.д. 
+    
+    Его основная цель - изменить или создать у
     пользователя представление о том, что продукт, услуга или система
     просты в использовании, эффективны и, прежде всего, полезны для его
     целей.
@@ -83,35 +91,38 @@ UX и другими разработчиками.
 Без UI и UX даже самое лучшее программное обеспечение может кануть в
 Лету. История программного обеспечения полна примеров того, как
 компании, даже имея продукты, превосходящие своих конкурентов,
-становились на путь птицы дронта, поскольку пренебрегали
+становились на путь птицы Додо, поскольку пренебрегали
 пользовательским опытом или имели плохой визуальный дизайн. Иногда
-обложка книги так же важна, как и ее содержание...
+обложка книги так же важна, как и ее содержание.
 
-# Принципы проектирования пользовательского интерфейса
+## Принципы проектирования пользовательского интерфейса
 
 В основе дизайна пользовательского интерфейса лежит задача создания
 интерфейса, который будет удобен для пользователя, эффективен,
 информативен и приятен. Такие маркетинговые концепции, как удержание и
 удовлетворение пользователей, в значительной степени зависят от дизайна
-продукта. Для наших целей мы ограничим рассмотрение пользовательских
+продукта. 
+
+Для наших целей мы ограничим рассмотрение пользовательских
 интерфейсов интерфейсами приложений на дисплее (представленных с помощью
 визуальных средств, таких как экран или сенсорное устройство).
 
-В настоящее время существует большое количество источников информации о
-пользовательских интерфейсах.
-
 Существует большое количество документации, детально изучающей
 проектирование пользовательских интерфейсов с инженерной точностью и
 четко определенными отраслевыми стандартами. Каждый аспект имеет свой
 собственный набор правил, которые необходимо учитывать хорошему
 дизайнеру пользовательского интерфейса. Например, веб-дизайнер будет
-видеть вещи иначе, чем промышленный дизайнер. В нашем случае большинство
-паттернов для проектирования пользовательского интерфейса с самого
+видеть вещи иначе, чем промышленный дизайнер. 
+
+В нашем случае большинство
+шаблонов для проектирования пользовательского интерфейса с самого
 начала были включены в стандарт HTML, поэтому большинство, если не все,
-из того, что мы будем рассматривать как паттерны, уже знакомо вам и
+из того, что мы будем рассматривать как шаблоны, уже знакомо вам и
 конечному пользователю. Однако то, как они работают, или принципы,
 которым они следуют, - это не то, что обычно обсуждается или является
-очевидным. Например, почему символ "X" для закрытия окна находится в
+очевидным. 
+
+Например, почему символ "X" для закрытия окна находится в
 правом верхнем углу? Что означает каждый значок меню? Почему кнопка
 **Start** расположена в верхнем или левом нижнем углу экрана? Почему
 некоторые функции трудно найти, а другие доступны с первого взгляда? Все
@@ -119,7 +130,7 @@ UX и другими разработчиками.
 интерфейса и UX-шаблонах. Поэтому давайте рассмотрим некоторые принципы
 пользовательского интерфейса, а затем перейдем к шаблонам UX.
 
-## Достаточный контраст или различие между элементами
+### Достаточный контраст или различие между элементами
 
 Этот принцип гласит, что элементы страницы должны быть четко отличимы
 друг от друга и отражать свою функцию. Он отражает необходимость
@@ -127,22 +138,16 @@ UX и другими разработчиками.
 цвета, типографики, полей и белого пространства таким образом, чтобы
 каждая функция была четко представлена и отличалась от других. Основная
 задача - направить внимание пользователя на центральную точку
-интерфейса. Рассмотрим в качестве примера домашнюю страницу Packt
-(<https://www.packtpub.com/>):
+интерфейса. Рассмотрим в качестве примера домашнюю страницу [Packt](https://www.packtpub.com/):
 
 ![](/book/images/Figure_11.01_B18602.jpg)
-width="519" height="174"
-alt="Рисунок 11.1 - Главная страница Packt и цветовой контраст" />.
-
-Рисунок 11.1 - Главная страница Packt и цветовой контраст
 
-.
+Рисунок 11.1 - Главная страница Packt и цветовой контраст.
 
 В данном примере большая часть контента использует ограниченное
 количество цветов ("палитру"), а две кнопки имеют высокий контраст, что
-привлекает внимание пользователя: это кнопки **TRY FOR FREE** и **START
-LEARNING NOW**. Очевидно, что дизайнер установил точку фокусировки на
-этих двух действиях.
+привлекает внимание пользователя: это кнопки **TRY FOR FREE** и **START LEARNING NOW**. 
+Очевидно, что дизайнер установил точку фокусировки на этих двух действиях.
 
 В связи с этим принципом на данном снимке экрана применено "правило"
 дизайна, которое удобно иметь в виду: *60-30-10 color rule*. Это
@@ -154,14 +159,14 @@ LEARNING NOW**. Очевидно, что дизайнер установил т
 чтобы ознакомиться с другими принципами проектирования пользовательского
 интерфейса.
 
-## Стимулировать повторение и быть последовательным
-
-.
+### Стимулировать повторение и быть последовательным.
 
 Этот принцип основан на концепции, согласно которой люди учатся через
 повторение. Он указывает на то, что одна и та же задача, даже
 выполняемая через разные интерфейсы, должна вызывать у пользователя
-более или менее одинаковое повторяющееся поведение. Например, если вы
+более или менее одинаковое повторяющееся поведение. 
+
+Например, если вы
 попросите пользователя открыть текстовый процессор, а потом предложите
 ему открыть файл, куда он попытается нажать? Большинство "опытных"
 пользователей подведут мышь к левой верхней части окна и будут искать
@@ -176,7 +181,6 @@ LEARNING NOW**. Очевидно, что дизайнер установил т
 или общего набора. Приведем пример с сайта Packt Publishing:
 
 ![](/book/images/Figure_11.02_B18602.jpg)
-width="1124" height="557" alt="Рисунок 11.2 - Карточки с книгами" />.
 
 Рисунок 11.2 - Карточки с книгами
 
@@ -188,14 +192,10 @@ width="1124" height="557" alt="Рисунок 11.2 - Карточки с кни
 важно, чтобы пользователю не пришлось "заново" изучать интерфейс для
 каждой книги.
 
-Короче говоря, это повторение визуального дизайна.
-
 Кроче говоря, это повторение расположения, действий и визуальных стилей.
 Перейдем к следующему.
 
-## Внимательно следите за выравниванием и направлением
-
-.
+### Внимательно следите за выравниванием и направлением
 
 Выравнивание элементов (графики, шрифтов и т.д.) создает ощущение
 порядка и организованности, показывая, что эти элементы принадлежат к
@@ -207,30 +207,20 @@ width="1124" height="557" alt="Рисунок 11.2 - Карточки с кни
 выравниванию и стилю можно определить, что относится к той или иной
 естественной группе.
 
-Другой пример - выравнивание вкладки.
-
 Другой пример выравнивания хорошо виден при использовании типографики
 только для меню и функций.
 
 ![](/book/images/Figure_11.03_B18602.jpg)
-width="480" height="116"
-alt="Рисунок 11.3 - Футер сайта Packt, использующий выравнивание для отображения естественных групп" />
 
 Рисунок 11.3 - Нижний колонтитул сайта Packt, использующий выравнивание
-для отображения естественных групп
-
-.
+для отображения естественных групп.
 
 Этот пример, хотя и простой, уже демонстрирует использование контраста
 (жирный шрифт против обычного), последовательности за счет повторения,
 выравнивания, а также следующего принципа, который мы здесь рассмотрим:
 близости.
 
-Используйте близость.
-
-## Используйте близость и расстояние, чтобы показать естественные группы
-
-.
+### Используйте близость и расстояние, чтобы показать естественные группы
 
 Этот принцип прост: размещайте элементы, которые естественным образом
 связаны друг с другом, близко друг к другу. Это облегчает пользователю
@@ -242,7 +232,6 @@ Microsoft в своих приложениях Office, в значительно
 **Home**, посвященный выравниванию, спискам, интервалам и отступам:
 
 ![](/book/images/Figure_11.04_B18602.jpg)
-width="380" height="98" alt="Рисунок 11.4 - Значки абзацев" />.
 
 Рисунок 11.4 - Значки абзацев
 
@@ -254,15 +243,15 @@ width="380" height="98" alt="Рисунок 11.4 - Значки абзацев"
 разработке наших компонентов. Если вы работаете с командой, в которую
 входит дизайнер пользовательского интерфейса, вы можете получить шаблоны
 или макеты, даже раскадровки, для реализации в компонентах Vue, как мы
-видели в [*главе
-4*](https://learning.oreilly.com/library/view/vue-js-3-design/9781803238074/B18602_04.xhtml#_idTextAnchor102),
-*Композиция пользовательского интерфейса с компонентами*. Если же вы
+видели в главе 4, *Композиция пользовательского интерфейса с компонентами*. 
+
+Если же вы
 работаете в команде *"one-man band team"* и проектирование интерфейсов
 лежит на ваших плечах, то эти принципы очень помогут вам создать
 профессиональный и полезный пользовательский интерфейс. Но это еще не
-все...
+все.
 
-## Законы проектирования пользовательского интерфейса
+### Законы проектирования пользовательского интерфейса
 
 Как и в случае с принципами, в ряде исследований были выведены или
 определены "законы" дизайна, которые представляют собой измеримые
@@ -279,7 +268,7 @@ width="380" height="98" alt="Рисунок 11.4 - Значки абзацев"
 
 В результате применения этого закона кнопка закрытия окна (**X**)
 располагается в одном из углов экрана (при максимизации окна), кнопка
-**Start** - в левом нижнем углу экрана, *Show desktop* - в правом нижнем
+**Start** - в левом нижнем углу экрана, **Show desktop** - в правом нижнем
 углу экрана и так далее. Если пользователь перемещает мышь в любом из
 этих направлений, то рано или поздно он попадет на эти цели, и
 продолжение движения в том же направлении не повлияет на результат. На
@@ -303,11 +292,11 @@ width="380" height="98" alt="Рисунок 11.4 - Значки абзацев"
 тратить больше времени на принятие решения. Некоторые следствия из этого
 закона выглядят следующим образом:
 
--   Разбивайте сложные задачи на более мелкие группы, которыми может
+- Разбивайте сложные задачи на более мелкие группы, которыми может
     управлять пользователь, чтобы ускорить время принятия решения
--   Избегайте создания интерфейсов, перегруженных опциями, так как они
+- Избегайте создания интерфейсов, перегруженных опциями, так как они
     будут перегружать пользователя
--   Если функция чувствительна ко времени, сведите количество опций к
+- Если функция чувствительна ко времени, сведите количество опций к
     минимуму, необходимому в данной ситуации
 
 В повседневном программном обеспечении мы можем наблюдать применение
@@ -315,8 +304,7 @@ width="380" height="98" alt="Рисунок 11.4 - Значки абзацев"
 конкретного программного обеспечения, где во время или перед началом
 установки пользователю последовательно представляются окна с опциями, в
 отличие от формы для заполнения. Более подробную информацию об этом
-законе можно найти в Википедии:
-<https://en.wikipedia.org/wiki/Hick%27s_law>.
+законе можно найти в [Википедии](https://en.wikipedia.org/wiki/Hick%27s_law).
 
 ### Восемь правил Бена Шнайдермана
 
@@ -330,25 +318,25 @@ Human-Computer Interaction*, в которой он сформулировал 
     т.д.).
 2.  Обеспечьте использование быстрых клавиш для выполнения общих задач
     (будь то клавиатура или пиктограммы).
-3.  Предлагать информативную обратную связь (особенно при возникновении
+3.  Предлагайте информативную обратную связь (особенно при возникновении
     ошибок).
 4.  Дизайн диалогов с окончанием.
-5.  Предлагать простую обработку ошибок, чтобы пользователь мог быстро
+5.  Предлагайте простую обработку ошибок, чтобы пользователь мог быстро
     принять меры и избежать серьезных ошибок со стороны пользователя.
-    Классической реализацией правил *\#4* и *\#5* являются "диалоги
+    Классической реализацией правил *#4* и *#5* являются "диалоги
     подтверждения" перед выполнением постоянных действий, таких как
     удаление содержимого.
-6.  Позволяют легко и просто выполнять действия, связанные с удалением
+6.  Позволяйте легко и просто выполнять действия, связанные с удалением
     содержимого.
-7.  Позволяют легко отменять действия (благодаря этому у нас есть
-    *Ctrl* + *Z*!).
-8.  Поддерживать чувство контроля у пользователя. Нет ничего хуже для
+7.  Позволяйте легко отменять действия (благодаря этому у нас есть
+    *Ctrl + Z*!).
+8.  Поддерживайте чувство контроля у пользователя. Нет ничего хуже для
     пользователя, чем чувствовать, что машина "делает все сама, без
     контроля". Если вы когда-нибудь по ошибке отправляли на печать
     800-страничный файл, и у вас ушло с десяток страниц, прежде чем вы
-    смогли отменить операцию... вот о чем идет речь.
-9.  Сокращение времени на печать.
-10. Сокращение кратковременной памяти. Пользователь может одновременно
+    смогли отменить операцию. Вот о чем идет речь.
+9.  Сокращенайте время на печать.
+10. Сокращайте кратковременную память. Пользователь может одновременно
     удерживать в своей кратковременной памяти лишь несколько элементов и
     задач, а слишком большое количество элементов на экране (меню и
     т.д.) вызывает отторжение. Этот принцип также связан с законом Хика.
@@ -357,22 +345,22 @@ Human-Computer Interaction*, в которой он сформулировал 
 законы должны дать нам уверенную опору.
 
 Больше информации об этих правилах и Бене Шнайдермане можно найти в
-Википедии (<https://en.wikipedia.org/wiki/Ben_Shneiderman>).
+[Википедии](https://en.wikipedia.org/wiki/Ben_Shneiderman).
 
-### Принципы проектированияUX
+### Принципы проектирования UX
 
 UX-дизайн также имеет свои цели и принципы, которые распространяются на
-паттерны. Прежде всего, основная цель UX - обеспечить хорошее восприятие
+шаблоны. Прежде всего, основная цель UX - обеспечить хорошее восприятие
 пользователя, создать связь с брендом или продуктом, тщательно выстроив
 поток взаимодействий. В данном случае решения должны быть следующими:
 
--   *Полезность и удобство использования:* Прежде всего, приложение
+- *Полезность и удобство использования:* Прежде всего, приложение
     должно делать то, для чего оно предназначено, делать это хорошо и
     быть простым для пользователя
--   *Узнаваемость и запоминаемость*: пользователь должен иметь
+- *Узнаваемость и запоминаемость*: пользователь должен иметь
     возможность изучить и понять представленную информацию, а также
     усвоить ее для дальнейшего использования
--   *Креативность и предоставление контроля пользователю*: Когда
+- *Креативность и предоставление контроля пользователю*: Когда
     пользователь взаимодействует с приложением, он должен чувствовать,
     что делает то, что задумал пользователь, и что результат "безопасен"
     для пользователя
@@ -380,15 +368,11 @@ UX-дизайн также имеет свои цели и принципы, к
 Последний принцип очень важен. Если пользователь чувствует, что
 приложение где-то в процессе взаимодействия "потеряло контроль" над
 происходящим, то это залог катастрофы. К сожалению, это слишком часто
-происходит с мрачными шаблонами, которые мы рассмотрим далее в этой
+происходит с темным шаблонами, которые мы рассмотрим далее в этой
 главе, но сейчас давайте посмотрим на хорошие шаблоны, которые приводят
 к хорошему опыту для пользователя.
 
-# Общие шаблоны
-
-.
-
-# Общие шаблоны для работы с данными
+## Общие шаблоны для работы с данными
 
 Чаще всего этим шаблонам соответствуют чистые HTML-элементы, другие же
 появились в последние годы благодаря грамотному использованию стилизации
@@ -396,51 +380,43 @@ UX-дизайн также имеет свои цели и принципы, к
 пользователями с первого взгляда. Ниже приводится неполный список с
 кратким описанием того, когда следует использовать каждый из них.
 
-## Элементы ввода HTML
+### Элементы ввода HTML
 
 Стандартные поля ввода, предусмотренные в HTML, представляют собой
 четкий шаблон для получения информации от пользователя. В настоящее
-время элемент input имеет множество вариантов благодаря атрибуту
+время элемент `input` имеет множество вариантов благодаря атрибуту
 **type**, позволяющему вводить не только обычный текст. Используемые в
 формах и библиотеках проверки, эти элементы не уступают по своим
 возможностям: они готовы к чтению и форматированию от текста и чисел до
 URL, даты, времени, изображений и цветов. Полный список доступных типов,
-поддерживаемых современными браузерами, можно найти здесь:
-<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types>.
+поддерживаемых современными браузерами, можно найти [здесь](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types).
 
 По большей части эти элементы используются с базовой функциональностью и
-некоторым тяжелым CSS-стилем. Используйте **вводы** (и **текстовые
-области**) в тех случаях, когда пользователю необходимо ввести текстовую
+некоторым тяжелым CSS-стилем. Используйте **input** (и **textarea**) в тех случаях, когда пользователю необходимо ввести текстовую
 информацию. Для более сложных типов, таких как выбор даты или цвета,
 браузеры сегодня предлагают собственные виджеты.
 
-Виджеты для ввода текста.
-
-## Чекбоксы, радиоприемники и тумблеры
+#### Чекбоксы, радиокнопки и тумблеры
 
 Клавиши и радиокнопки предоставляются HTML нативно и представляются
 пользователю в соответствии с форматом локальной ОС или среды.
-**Клавиши** представляют пользователю несколько вариантов, которые он
+**button** представляют пользователю несколько вариантов, которые он
 может свободно выбрать из группы. В отличие от них, кнопки **radio**
 позволяют выбрать только один вариант из списка:
 
 ![](/book/images/Figure_11.05_B18602.jpg)
-width="820" height="187"
-alt="Рисунок 11.5 - Checkboxes слева и radio buttons справа" />.
 
-Рисунок 11.5 - Флажки слева и радиокнопки справа
+Рисунок 11.5 - Чекбоксы слева и радиокнопки справа
 
 С выходом оригинального iPhone стал очень популярен новый вариант
-флажка: **тумблер**. Он не предусмотрен стандартом HTML, но его можно
-легко стилизовать с помощью CSS, чтобы "замаскировать" флажок. Тумблер
+флажка: **тумблер (toggle switch)**. Он не предусмотрен стандартом HTML, но его можно
+легко стилизовать с помощью CSS, чтобы "замаскировать" чекбокс. Тумблер
 имеет два состояния, включенное и выключенное, и часто используется для
 активации или деактивации функции или возможности. Это важное различие,
 поскольку флажок должен фокусироваться на вариантах или альтернативах.
 Вот пример:
 
 ![](/book/images/Figure_11.06_B18602.jpg)
-width="606" height="103"
-alt="Рисунок 11.6 - Тумблеры в каждом состоянии" />.
 
 Рисунок 11.6 - Тумблеры в каждом состоянии
 
@@ -453,25 +429,23 @@ alt="Рисунок 11.6 - Тумблеры в каждом состоянии"
 т.д. Компонент **Toggle**, реализующий стилизацию, и код **v-модели** вы
 можете найти в репозитории к этой главе.
 
-Картинки.
-
-## Чипы, таблетки или теги
+#### Чипы, таблетки или теги
 
-Этот паттерн включает в себя короткий текст (или "копию" на языке
+Этот шаблон включает в себя короткий текст (или "копию" на языке
 пользовательского интерфейса) внутри круглой рамки. Копия может
 сопровождаться значком, подчеркивающим ее состояние при выделении, или
-действием, например, символом "**X**" для ее удаления. Обычно пилюли
+действием, например, символом "**X**" для ее удаления. Обычно тэги
 используются в списках для отображения атрибутов, тегов, категорий или
-других типов классификаторов для данного элемента. В некоторых случаях
+других типов классификаторов для данного элемента. 
+
+В некоторых случаях
 они могут использоваться и для выбора (переключения) элементов из
-списка. В этом случае они конкурируют или ведут себя так же, как флажок,
+списка. В этом случае они конкурируют или ведут себя так же, как чекбокс,
 но в более наглядной форме. Реализация фишек достаточно тривиальна и
 может быть выполнена с помощью обычного CSS в одном HTML-элементе
 (например, в элементе **span**).
 
 ![](/book/images/Figure_11.07_B18602.jpg)
-width="530" height="98"
-alt="Рисунок 11.7 - Список элементов с таблетками" />.
 
 Рисунок 11.7 - Список элементов с таблетками
 
@@ -479,28 +453,24 @@ alt="Рисунок 11.7 - Список элементов с таблеткам
 пользовательского ввода, но он охватывает наиболее распространенные
 типы: HTML-вводы и вариации стилей.
 
-# Общие паттерны для визуализации данных
+##№ Общие шаблоны для визуализации данных
 
 Эти шаблоны отображают информацию обратно пользователю, либо в ответ на
 действие пользователя, либо на событие приложения. Ниже приведен
 неполный список шаблонов.
 
-## Советы
+#### Подсказки (tooltips)
 
-Этот паттерн показывает пользователю плавающий небольшой текст с
+Этот шаблон показывает пользователю плавающий небольшой текст с
 информацией о целевом элементе, обычно когда пользователь активирует
 элемент с помощью какого-либо действия (наведение, щелчок, выделение и
 т.д.). Информация отображается над, под или сбоку от элемента в виде
 "речевого пузыря" (как в комиксах). Вот пример:
 
 ![](/book/images/Figure_11.08_B18602.jpg)
-width="289" height="70"
-alt="Рисунок 11.8 - Подсказка, отображающая название/действие пиктограммы и ярлык" />.
 
 Рисунок 11.8 - Всплывающая подсказка, отображающая название/действие
-пиктограммы и ярлыка
-
-.
+пиктограммы и ярлыка.
 
 В основном этот шаблон используется для отображения справки по целевому
 объекту, но может применяться и для отображения контекстных меню.
@@ -508,13 +478,9 @@ alt="Рисунок 11.8 - Подсказка, отображающая назв
 режиме онлайн отобразится всплывающее окно с меню:
 
 ![](/book/images/Figure_11.09_B18602.jpg)
-width="546" height="117"
-alt="Рисунок 11.9 - Шаблон всплывающей подсказки, используемый для отображения контекстного меню" />.
 
 Рисунок 11.9 - Шаблон всплывающей подсказки, используемый для
-отображения контекстного меню
-
-.
+отображения контекстного меню.
 
 Может возникнуть дискуссия по поводу того, является ли последнее
 использование всплывающей подсказкой или контекстным меню, но тот факт,
@@ -525,37 +491,31 @@ alt="Рисунок 11.9 - Шаблон всплывающей подсказк
 показывать пользователю информацию при выборе или предварительной
 активации, чтобы помочь ему решить, что делать дальше.
 
-Контекстное меню - это не просто меню, а меню, которое открывается при
-выборе или предварительной активации.
+#### Уведомляющие точки, пузырьки, метки или значки
 
-## Уведомляющие точки, пузырьки, метки или значки
-
-.
-
-Этот паттерн заключается в отображении маленького значка поверх более
+Этот шаблон заключается в отображении маленького значка поверх более
 крупного значка, чтобы показать, что произошло событие, требующее
 внимания пользователя, но не являющееся срочным. Этот маленький значок
 может быть точкой, пузырьком и т.д. Если в уведомлении есть цифра, его
-также называют **значком.** Ниже приведены примеры этого шаблона:
+также называют **значком (badge)** Ниже приведены примеры этого шаблона:
 
--   Маленький кружок с цифрой для новых полученных писем в значке
-    электронной почты
--   Двойная галочка в приложении чата, указывающая на то, что собеседник
-    получил и прочитал сообщение
--   Маленькая отметка на панели задач, показывающая, что приложение было
-    открыто
+- Маленький кружок с цифрой для новых полученных писем в значке электронной почты
+- Двойная галочка в приложении чата, указывающая на то, что собеседник получил и прочитал сообщение
+- Маленькая отметка на панели задач, показывающая, что приложение было открыто
 
 Основная концепция заключается в том, чтобы использовать некое небольшое
 отклонение от пиктограммы, указывающее на необходимость обратить на себя
 внимание в будущем, но при этом не являющееся срочным и не влияющее на
 текущую деятельность пользователя.
 
-## Тостовые уведомления
+#### Тостовые уведомления
 
-Этот паттерн используется во многих приложениях и ОС. Он заключается в
+Этот шаблон используется во многих приложениях и ОС. Он заключается в
 отображении на короткое время плавающего окна с быстрой информацией для
 пользователя. Часто оно включает в себя короткий текстовый фрагмент в
-сочетании с понятной пиктограммой. В зависимости от ОС оно может
+сочетании с понятной пиктограммой. 
+
+В зависимости от ОС оно может
 отображаться вверху по центру, справа от экрана или внизу справа над
 системным лотком. Веб-приложения могут либо реализовать собственное
 тостовое уведомление в окне браузера, либо запросить разрешение у
@@ -563,8 +523,6 @@ alt="Рисунок 11.9 - Шаблон всплывающей подсказк
 локальной ОС. Вот пример уведомления о тосте:
 
 ![](/book/images/Figure_11.10_B18602.jpg)
-width="524" height="121"
-alt="Рисунок 11.10 - Нативное уведомление о тосте на рабочем столе" />.
 
 Рисунок 11.10 - Нативное уведомление о тостах на рабочем столе
 
@@ -574,9 +532,7 @@ alt="Рисунок 11.10 - Нативное уведомление о тост
 вниманию эфемерны, поэтому они не должны быть критической частью важного
 рабочего процесса, за исключением только что упомянутых условий.
 
-Карусель.
-
-## Карусель или слайдеры изображений
+#### Карусель или слайдеры изображений
 
 Карусель или слайдеры изображений - это шаблон для последовательного
 отображения в одном пространстве различных секций с изображениями и
@@ -589,42 +545,24 @@ alt="Рисунок 11.10 - Нативное уведомление о тост
 делать список разделов как можно короче, где-то между тремя и пятью
 элементами.
 
-Примеры такой реализации.
-
 Примеров такой реализации в Интернете множество, поскольку они
 реализуются в основном на посадочной странице сайта. Практически все
-торговые и новостные сайты используют этот паттерн - например,
+торговые и новостные сайты используют этот шаблон - например,
 посадочная страница Amazon ([www.amazon.de](http://www.amazon.de/)):
 
-<div>
-
-<div>
-
-</div>
-
-.
-
 ![](/book/images/Figure_11.11_B18602.jpg)
-width="481" height="150"
-alt="Рисунок 11.11 - Карусель Amazon отображает предложения от магазина" />.
 
 Рисунок 11.11 - Карусель Amazon отображает предложения из магазина
 
-.
-
 Слайдеры изображений могут быть такими же большими, как карусель, но
 могут быть и гораздо меньше и использоваться для отображения миниатюр.
 Вот еще один пример из Amazon:
 
 ![](/book/images/Figure_11.12_B18602.jpg)
-width="481" height="97"
-alt="Рисунок 11.12 - Amazon хорошо использует слайдеры изображений для отображения товаров пользователю" />.
 
 Рисунок 11.12 - Amazon использует слайдеры изображений для отображения
 товаров пользователю
 
-.
-
 Несмотря на тривиальную реализацию, использование каруселей и слайдеров
 изображений является хорошим способом отображения информации для
 пользователя. Однако стоит предупредить, что злоупотребление этим
@@ -632,16 +570,20 @@ alt="Рисунок 11.12 - Amazon хорошо использует слайд
 вызвать путаницу и даже спровоцировать нежелательные побочные эффекты,
 такие как сенсорное подавление и избегание контента.
 
-## Панели прогресса и спиннеры
+#### Панели прогресса (progress bars) и спиннеры
 
 Панель прогресса - это любой элемент, который дает пользователю
 представление о том, на каком этапе рабочего процесса находится его
 текущее состояние. Хотя название, казалось бы, указывает на "полосу", на
 практике в эту категорию попадает любой элемент, отображающий прогресс
-выполнения ограниченного числа действий. Основная цель - уведомить
+выполнения ограниченного числа действий. 
+
+Основная цель - уведомить
 пользователя о ходе выполнения задач, требующих длительного времени, и
 показать, что система "занята" их выполнением, тем самым обеспечивая
-наглядность и чувство контроля для пользователя. Прогресс-бары очень
+наглядность и чувство контроля для пользователя. 
+
+Прогресс-бары очень
 важны для предотвращения непроизвольных негативных действий со стороны
 пользователя. Если длительное задание выполняется в фоновом режиме
 (например, в веб-рабочем) без какой-либо обратной связи о ходе его
@@ -651,12 +593,8 @@ alt="Рисунок 11.12 - Amazon хорошо использует слайд
 элементов индикатора выполнения:
 
 ![](/book/images/Figure_11.13_B18602.jpg)
-width="524" height="210"
-alt="Рисунок 11.13 - Пример индикатора выполнения" />.
-
-Рисунок 11.13 - Пример полос прогресса
 
-.
+Рисунок 11.13 - Пример прогресс-бара
 
 Помимо стилизации, индикаторы выполнения могут использоваться и в
 "неопределенном состоянии", то есть приложение не может рассчитать,
@@ -664,8 +602,7 @@ alt="Рисунок 11.13 - Пример индикатора выполнени
 хочет сообщить пользователю, что система занята и не должна быть
 прервана. В стандарте HTML предусмотрен элемент, специально
 предназначенный для индикаторов выполнения, который позволяет справиться
-с подобными ситуациями (элемент progress; см.
-<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress>),
+с подобными ситуациями (элемент [progress](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)),
 но есть и другие шаблоны, которые можно использовать в таких случаях,
 например **спиннеры**.
 
@@ -674,58 +611,50 @@ alt="Рисунок 11.13 - Пример индикатора выполнени
 спиннера с текстовым индикатором:
 
 ![](/book/images/Figure_11.14_B18602.jpg)
-width="497" height="102"
-alt="Рисунок 11.14 - Круг спиннера, указывающий на занятость приложения" />.
 
 Рисунок 11.14 - Кружок спиннера, указывающий на занятость приложения
 
-.
-
 Этот подход уже давно используется в ОС и приложениях, поэтому
 пользователи понимают его смысл. Есть одно предостережение при
-использовании этого паттерна - после длительного использования он может
+использовании этого шаблона - после длительного использования он может
 вызывать беспокойство, поэтому рекомендуется сопровождать его каким-либо
 индикатором действия. Реализация компонента **спиннера** в Vue
 достаточно тривиальна, и в основном это CSS:
 
-./components/Spinner.vue
+##### ./components/Spinner.vue
 
-<div class="orm-ChapterReader-codeSnippetContainer"
-testid="custom pre block">
-
-``` source-code
-<Настройка скрипта>
-const $props=defineProps(['caption'])
+```vue
+<script setup>
+    const $props = defineProps(['caption'])
 </script>
-<шаблон>
+<template>
     <div>
-         <span class="спиннер"></span> {{ $props.caption }}
+         <span class="spinner"></span> {{ $props.caption }}
     </div>
 </template>
 <style scoped>
-.spinner{
+.spinner {
     display: inline-block;
-    высота: 1rem; ширина: 1rem;
+    height: 1rem; 
+    width: 1rem;
     border: 2px solid;
     vertical-align: middle;
     border-radius: 50%;
     border-top-color: #06c9c9;
-    анимация: rotate 1s linear infinite;
+    animation: rotate 1s linear infinite;
 }
 @keyframes rotate {
     0%{ transform: rotate(0deg);}
-     100%{ transform: rotate(360deg);}
+    100%{ transform: rotate(360deg);}
 }
 </style>
 ```
 
-<div class="orm-ChapterReader-snippetButtonContainer">
-
-В этом простом компоненте нам нужно определить только prop для текста и
+В этом простом компоненте нам нужно определить только пропс для текста и
 класс для вращающихся элементов. Для того чтобы вращение было заметным,
 мы задаем радиус окружности и определяем цвет одной из границ.
 
-## Пагинация и бесконечный скроллер
+#### Пагинация (пейджер) и бесконечный скроллер
 
 Когда нам нужно отобразить пользователю длинный список элементов, на ум
 приходят два шаблона, которые являются хорошо понятными решениями:
@@ -743,8 +672,6 @@ const $props=defineProps(['caption'])
 Типичный пейджер может выглядеть следующим образом:
 
 ![](/book/images/Figure_11.15_B18602.jpg)
-width="713" height="188"
-alt="Рисунок 11.15 - Элементы типичного пейджера" />.
 
 Рисунок 11.15 - Элементы типичного пейджера
 
@@ -755,10 +682,8 @@ alt="Рисунок 11.15 - Элементы типичного пейджера
 страниц и т.д. Важной концепцией этого шаблона является разделение
 набора и быстрая навигация по каждой отдельной подгруппе.
 
-Альтернативой пейджеру может служить его страница.
-
-Альтернативой пагинации является использование **бесконечного
-скроллера**. В этом случае точное местоположение каждого элемента в
+Альтернативой пагинации является использование **бесконечного скроллера (infinite scroller)**. 
+В этом случае точное местоположение каждого элемента в
 наборе данных может и не требоваться, а элементы представляются
 пользователю по мере прокрутки веб-страницы. Когда пользователь доходит
 до конца списка, на страницу загружаются новые элементы, фрагмент за
@@ -766,14 +691,12 @@ alt="Рисунок 11.15 - Элементы типичного пейджера
 загружен весь набор данных. Вот графическое представление этого шаблона:
 
 ![](/book/images/Figure_11.16_B18602.jpg)
-width="711" height="417"
-alt="Рисунок 11.16 - Реализация бесконечного скроллера" />.
 
 Рисунок 11.16 - Реализация бесконечного скроллера
 
 Для определения поведения пользователя и загрузки или предварительной
 загрузки данных используется ряд приемов. Одна из самых простых
-реализаций - использование **наблюдателя пересечения**, собственного
+реализаций - использование **intersection observer**, собственного
 элемента, предоставляемого браузерами на JavaScript и вызывающего
 событие при пересечении такого наблюдателя с другими элементами, а в
 данном случае - с областью просмотра. Поскольку это новая концепция, мы
@@ -781,110 +704,107 @@ alt="Рисунок 11.16 - Реализация бесконечного скр
 следующим образом:
 
 ![](/book/images/Figure_11.17_B18602.jpg)
-width="681" height="175"
-alt="Рисунок 11.17 - Пример бесконечного скроллера, ограниченного элементом div" />.
 
 Рисунок 11.17 - Пример бесконечного скроллера, ограниченного элементом
-**div**
-
-.
 
 Если прокрутить вниз границу **div** любым доступным способом (мышью,
 клавиатурой и т.д.), то список будет генерировать новые элементы и
 никогда не остановится, создавая впечатление, что прокрутка бесконечна.
 Вот исходный код этого компонента:
 
-./src/components/InfiniteScroller.vue
-
-<div class="orm-ChapterReader-codeSnippetContainer"
-testid="custom pre block">
+##### ./src/components/InfiniteScroller.vue
 
-``` source-code
-<Настройка скрипта>
-import { ref, onMounted } из "vue"
-const _max_value = ref(30),                                    #1
-    _scroll_watcher = ref(null),              ;                  #2.
-    observer = new IntersectionObserver(triggerEvent)      #3
+```vue
+<script setup>
+import { ref, onMounted } from "vue"
+const _max_value = ref(30),                                 #1
+    _scroll_watcher = ref(null),                            #2
+    observer = new IntersectionObserver(triggerEvent)       #3
 onMounted(() => {
-    observer.observe(_scroll_watcher.value)                #4
+    observer.observe(_scroll_watcher.value)                 #4
 })
 function triggerEvent() {_max_value.value += 20;}
 </script>
 <template>
     <div v-for="elem in _max_value" :key="elem">
-         элемент {{ elem }}
+        element {{ elem }}
     </div>
-    <div      ref="_scroll_watcher"></div>                    #5
+    <div ref="_scroll_watcher"></div>                       #5
 </template>
 ```
 
-<div class="orm-ChapterReader-snippetButtonContainer">
-
 Представленный компонент минимален, но он наглядно демонстрирует технику
 работы. У нас будет список чисел с начальным ограничением, которое
-вызовет переполнение контейнера (**\#1**). Это важно, поскольку при
+вызовет переполнение контейнера (**#1**). Это важно, поскольку при
 первой загрузке пользователь узнает, что внизу есть полоса прокрутки и
-больше содержимого (как на *Рисунок 11.17*). Теперь техника заключается
-в определении реактивной переменной **\_scroll_watcher**, указывающей на
+больше содержимого (как на *рисунке 11.17*). 
+
+Теперь техника заключается
+в определении реактивной переменной **_scroll_watcher**, указывающей на
 **null**. В дальнейшем эта переменная будет иметь значение элемента в
-нижней части списка, который мы помечаем как ссылку (**\#5**). Мы
+нижней части списка, который мы помечаем как ссылку (**#5**). Мы
 используем **null**, чтобы Vue не проводил никакой оптимизации на этом
-этапе. В строке **\#3** мы создаем новый **IntersectionObserver** и
+этапе. 
+
+В строке **#3** мы создаем новый **IntersectionObserver** и
 передаем в качестве значения ссылку на нашу функцию **triggerEvent**, в
 которой мы будем просто увеличивать границу нашего списка. В нашем
 шаблоне мы используем директиву **v-for** для генерации элементов для
 каждого целого числа в списке, которые должны появиться перед нашим
-элементом scroll watcher. Волшебство происходит в строке **\#4**, когда
+элементом scroll watcher. 
+
+Волшебство происходит в строке **#4**, когда
 наш компонент создан и установлен на страницу. В этот момент Vue уже
-присвоил **\_scroll_watcher** ссылку на HTML-элемент, и мы можем
+присвоил **_scroll_watcher** ссылку на HTML-элемент, и мы можем
 передать ее нашему экземпляру **IntersectionObserver**. Поскольку мы
 используем его с настройками по умолчанию, он будет запускать функцию
 **triggerEvent** каждый раз, когда рассматриваемый div появится в
-области просмотра, что произойдет, когда мы дойдем до конца списка. В
-этой функции мы снова увеличиваем количество элементов, заставляя Vue
+области просмотра, что произойдет, когда мы дойдем до конца списка. 
+
+В этой функции мы снова увеличиваем количество элементов, заставляя Vue
 внедрять на веб-страницу все новые элементы и снова выталкивая div,
 наблюдающий за прокруткой, за пределы области просмотра. Этот процесс
 повторяется *ad infinitum*, в результате чего мы получаем простой, но
 эффективный бесконечный скроллер.
 
-Помимо реализации UX-паттерна, данная техника является правильным
+Помимо реализации UX-шаблона, данная техника является правильным
 подходом к привязке реактивной переменной к элементу в DOM и избавляет
 нас от написания прямых манипуляций с DOM на JavaScript, таких как
 **document.getElementById("#someId")** и решения таких проблем, как
 коллизии идентификаторов. Vue решает эту проблему за нас.
 
-# Общие паттерны для взаимодействия и навигации
+## Общие шаблоны для взаимодействия и навигации
 
-Эти паттерны управляют взаимодействием или предлагают пользователю
+Эти шаблоны управляют взаимодействием или предлагают пользователю
 варианты управления процессом и навигацией по приложению. Как это обычно
-бывает, некоторые из этих паттернов могут быть отнесены и к другим
+бывает, некоторые из этих шаблонов могут быть отнесены и к другим
 категориям.
 
-## Размещение меню
+#### Размещение меню
 
-Размещение меню - это тоже паттерн, который стандартизирован в трех
+Размещение меню - это тоже шаблон, который стандартизирован в трех
 основных вариантах:
 
--   **Панели меню** (горизонтальные) часто размещаются в "липкой"
+- **Панели меню (menu bars)** (горизонтальные) часто размещаются в "sticky"
     позиции в верхней части экрана (то есть они не прокручиваются вместе
     со страницей).
--   **Панели навигации** (горизонтальные), популярные в основном для
+- **Панели навигации (navigation bars)** (горизонтальные), популярные в основном для
     мобильных устройств, представляют собой меню с пиктограммами,
     размещенное в нижней части экрана для перехода к различным разделам
     приложения.
--   **Боковые панели** занимают всю высоту экрана и имеют переменную
+- **Боковые панели (sidebars)** занимают всю высоту экрана и имеют переменную
     ширину. На них отображаются меню с пиктограммами и/или текстом. В
     мобильных и настольных приложениях, где важно реальное состояние
     экрана, обычно имеется возможность переключать его в область
     просмотра или из нее. Стандартным значком, вызывающим эту функцию,
     стал значок "гамбургер" (см. далее в этой главе).
 
-Следование стандартному расположению пиктограмм для настольных и
+Следование стандартному расположению для настольных и
 мобильных компьютеров позволит пользователю легко ориентироваться на
 сайте. Часто некоторые приложения, например видеоигры, нарушают эти
 стандарты, но если для этого нет весомых причин, этого следует избегать.
 
-## Хлебные крошки
+#### Хлебные крошки (breadcrumbs)
 
 Хлебные крошки - это иерархический список ссылок, показывающих текущее
 положение веб-страницы в общей структуре сайта. Каждая ссылка позволяет
@@ -893,60 +813,48 @@ function triggerEvent() {_max_value.value += 20;}
 размещать хлебные крошки в верхней части страницы, перед основным
 содержанием. Вот пример пути к хлебным крошкам:
 
-<div class="orm-ChapterReader-codeSnippetContainer"
-testid="custom pre block">
-
-``` source-code
-Главная > Уровень 1 > Уровень 2 > Уровень 3 > Текущая страница
+```txt
+Home > Level 1 > Level 2 > Level 3 > Current page
 ```
 
-<div class="orm-ChapterReader-snippetButtonContainer">
-
-.
-
 Для разделения каждой навигационной страницы принято использовать символ
-more-than (**\>**), однако в этом вопросе существует множество
-художественных лицензий. Другим вариантом представления такой навигации
+*больше* (**>**), однако в этом вопросе существует множество
+художественных вариантов. Другим вариантом представления такой навигации
 является использование древовидной структуры, например, такой:
 
-<div class="orm-ChapterReader-codeSnippetContainer"
-testid="custom pre block">
-
-``` source-code
-Главная
-  └── Уровень 1
-   └──── Уровень 2
-    └── Уровень 3
-      └── Текущая страница
+```txt
+Home
+  └── Level 1
+   └──── Level 2
+    └── Level 3
+      └── Current page
 ```
 
-<div class="orm-ChapterReader-snippetButtonContainer">
-
 Такая "папкоподобная" структура не так часто встречается в основной
-навигации, а в основном используется для вложенного контента, например,
+навигации, а обычно используется для вложенного контента, например,
 комментариев и ответов в форумах.
 
-## Модальные диалоги
+#### Модальные диалоги
 
 Модальный диалог - это небольшое окно, которое открывается перед
 приложением, полностью захватывая его фокус. Он не позволяет
 пользователю взаимодействовать с остальными частями приложения до тех
-пор, пока не будет решена задача, представленная в диалоге. Модальные
+пор, пока не будет решена задача, представленная в диалоге. 
+
+Модальные
 диалоги должны фокусироваться только на одном действии и предоставлять
 пользователю достаточную информацию для принятия решения путем
 предоставления четких вариантов. Вот пример:
 
 ![](/book/images/Figure_11.18_B18602.jpg)
-width="942" height="233" alt="Рисунок 11.18 - Диалог подтверждения" />.
 
 Рисунок 11.18 - Диалог подтверждения
 
 Мы уже реализовывали систему отображения модальных диалогов в Vue 3,
-поэтому вы можете просмотреть код из [*главы
-5*](https://learning.oreilly.com/library/view/vue-js-3-design/9781803238074/B18602_05.xhtml#_idTextAnchor130),
-*Одностраничные приложения*, чтобы увидеть реализованный подход.
+поэтому вы можете просмотреть код из главы 5, *Одностраничные приложения*, 
+чтобы увидеть реализованный подход.
 
-## Иконки меню
+#### Иконки меню
 
 Помимо обычного (текстового) именования пунктов меню, сегодня
 используется ряд пиктограмм, которые с первого взгляда показывают
@@ -955,36 +863,33 @@ width="942" height="233" alt="Рисунок 11.18 - Диалог подтвер
 встретить и использовать сегодня:
 
 ![](/book/images/Figure_11.19_B18602.jpg)
-width="533" height="110" alt="Рисунок 11.19 - Иконки меню" />.
 
 Рисунок 11.19 - Иконки меню
 
-.
-
 А вот их описания:
 
--   **Значок гамбургера** (три горизонтальные линии): Зарезервированный
+- **Иконка гамбургера** (три горизонтальные линии): Зарезервированный
     для *главного меню* и навигации, этот значок включает отображение
     широкого меню сайта в боковой панели. Такие типы боковых панелей,
     которые отображаются и скрываются по мере удобства, называются
     **драйверами** и очень популярны на мобильных сайтах и в
     приложениях.
--   **Иконка кебаба** (три вертикальные точки): Ставший популярным
+- **Иконка кебаба** (три вертикальные точки): Ставший популярным
     благодаря Material Design от Google, он указывает на то, что для
     текущего элемента или действия существует больше *вариантов* и что
     они будут отображаться в модальном диалоге.
--   **Значок мясного шарика** (три горизонтальные точки): Отображается
+- **Иконка Meatball** (три горизонтальные точки): Отображается
     рядом с элементом в списке и указывает на наличие всплывающего меню
     с дополнительными *действиями* для данного элемента.
--   **Значок Бенто** (9 квадратов в сетке 3x3): Используется для
+- **Иконка Bento** (9 квадратов в сетке 3x3): Используется для
     обозначения всплывающего меню для перехода между различными
     *приложениями* внутри одного и того же решения или среды.
--   **Иконка "Дёнер"** (три стековые линии разного размера): Указывает
+- **Иконка Döner** (три стековые линии разного размера): Указывает
     на возможность *сортировки* записей списка с помощью опции выбора
     порядка (обычно во всплывающем окне). Однако этот значок не стал
     таким популярным, как остальные.
 
-## Аккордеонные меню
+#### Аккордеонные меню
 
 В основном этот шаблон используется для группировки содержимого под
 заголовком и отображения его только при выборе пользователем, причем
@@ -993,36 +898,35 @@ width="533" height="110" alt="Рисунок 11.19 - Иконки меню" />.
 боковых меню. Вот пример с сайта Packt (<https://www.packtpub.com/>):
 
 ![](/book/images/Figure_11.20_B18602.jpg)
-width="855" height="383"
-alt="Figure 11.20 - Accordion menu used for FAQ" />.
 
 Рисунок 11.20 - Аккордеонное меню, используемое для FAQ
 
-.
-
-Меню в виде аккордеона - это хорошо понятный пользователям паттерн,
+Меню в виде аккордеона - это хорошо понятный пользователям шаблон,
 который довольно просто реализовать. Оно помогает сохранить чистоту
 дизайна и позволяет пользователю сосредоточиться только на том, что для
 него важно.
 
-## Мегаменю
+#### Мегаменю
 
-До сих пор большинство рассмотренных нами паттернов преследовали цель
+До сих пор большинство рассмотренных нами шаблонов преследовали цель
 скрыть сложность от пользователя, чтобы не перегружать его. Однако
-данный паттерн, на первый взгляд, нарушает это правило. Если сложность
+данный шаблон, на первый взгляд, нарушает это правило. Если сложность
 навигации затрудняет поиск элементов (например, более трех уровней
 глубины: группа -\> подгруппа -\> подгруппа), альтернативой может быть
-использование **мега-меню**. Этот паттерн часто используется на
+использование **мега-меню**. 
+
+Этот шаблон часто используется на
 правительственных сайтах и других сложных организациях с большим
 неизбежным контентом. Основная концепция заключается в том, чтобы
 представить большое меню, содержащее все (или большинство) вариантов
-выбора. Это не означает, что после достижения этих разделов не будет
-"сверления вниз", но это делает доступ более быстрым. Например,
+выбора. 
+
+Это не означает, что после достижения этих разделов не будет
+дальнейшей детализации, но это делает доступ более быстрым. Например,
 рассмотрим официальный сайт города Хювинкяа, Финляндия
 ([www.hyvinkaa.fi](http://www.hyvinkaa.fi/)):
 
 ![](/book/images/Figure_11.21_B18602.jpg)
-width="1216" height="565" />
 
 Рисунок 11.21: Мега-меню главной страницы города Хювинкяя
 
@@ -1032,68 +936,58 @@ width="1216" height="565" />
 нарушает правило *простоты*, но не забывает о других правилах и
 принципах проектирования пользовательского интерфейса, благодаря чему он
 по-прежнему радует глаз. В других случаях мегаменю можно рассматривать
-как место для других паттернов, например, боковой панели или
-меню-аккордеона. На официальном сайте Packt
-(<https://www.packtpub.com/>) этот паттерн используется в главном меню
-
-КНИГИ и **ВИДЕО**:
-
-.
+как место для других шаблонов, например, боковой панели или
+меню-аккордеона. На официальном сайте [Packt](https://www.packtpub.com/) этот шаблон используется в главном меню в секции "КНИГИ и ВИДЕО":
 
 ![](/book/images/Figure_11.22_B18602.jpg)
-width="1428" height="567"
-alt="Рисунок 11.22 - Мега меню Packt с боковой панелью для категоризации и фильтрации опций" />.
 
 Рисунок 11.22 - Мега-меню Packt с боковой панелью для категоризации и
 фильтрации опций
 
-.
-
 Мега-меню может стать местом для инноваций, поскольку оно проще для
 понимания и использования пользователем. Оно не является подходящим
 вариантом для каждого веб-приложения, но при правильном использовании
 может быть очень мощным. Когда нет другого выхода, кроме как показать
 большое количество ярлыков или опций, этот шаблон следует иметь в виду.
 
-## Выпадающие меню
+#### Выпадающие меню
 
 Выпадающие меню и поля выбора отображают список опций пользователю,
 когда они активизируются (например, щелчком мыши или прикосновением)
 через триггерную область (пиктограмму, текст или кнопку). Здесь важнее
 концепция скрытия опций и их отображения по "запросу" пользователя, чем
-конкретная реализация. Эту концепцию используют, например, аккордеонное
+конкретная реализация. 
+
+Эту концепцию используют, например, аккордеонное
 и мегаменю. Аккордеонное меню можно рассматривать как список выпадающих
 меню, и это не так уж далеко от него. HTML предлагает собственное
 решение для списков выбора (элемент **select**), но та же концепция
 может быть применена во многих обстоятельствах и, при определенной
 креативности, может породить новые реализации.
 
-# Общие шаблоны для списков выбора
-
-# Общие паттерны для организации контента
+## Общие шаблоны для организации контента
 
-Следующие паттерны связаны с общей организацией и компоновкой сайта или
+Следующие шаблоны связаны с общей организацией и компоновкой сайта или
 приложения.
 
-## Резонансные приложения
+### Отзывчивые (responsive) приложения
 
 Термин *отзывчивый* относится к тому, как макет приложения адаптируется
 к размеру экрана. Возможно, вы слышали о "мобильном подходе"
 (mobile-first approach), который представляет собой философию, согласно
 которой сначала разрабатывается дизайн для небольших экранов, а затем по
 возрастающей переходят к возможным разрешениям, чтобы достичь
-настольного компьютера, который считается самым большим. Хотя существуют
+desktop размера, который считается самым большим. Хотя существуют
 способы добиться этого с помощью JavaScript, наиболее разумным прямым
 подходом является использование хорошо продуманного дизайна с
 медиазапросами CSS.
 
-В зависимости от того, как это будет реализовано, в зависимости от того,
-как это будет реализовано.
-
 В зависимости от области применения существуют определенные формулы для
 создания отзывчивого сайта, но анализ множества альтернатив выходит за
 рамки задач данной книги. Поэтому в качестве примера мы рассмотрим
-только одну из них - метод "переключения колонок". Этот метод, по сути,
+только одну из них - метод "переключения колонок". 
+
+Этот метод, по сути,
 устанавливает для мобильных (или узких портретных) экранов основной
 контент внутри одной вертикальной колонки, раздел за разделом. Основная
 панель навигации или меню размещается в верхней или нижней части экрана,
@@ -1104,133 +998,110 @@ alt="Рисунок 11.22 - Мега меню Packt с боковой панел
 можно с помощью следующего рисунка:
 
 ![](/book/images/Figure_11.23_B18602.jpg)
-width="529" height="291"
-alt="Рисунок 11.23 - Трансформация с первого мобильного на рабочий стол" />.
 
 Рисунок 11.23 - Трансформация от первого мобильного к настольному
 
-.
-
 Как видно из предыдущего рисунка, разделы всегда располагаются в одном и
 том же порядке, но содержимое внутри адаптируется от вертикального к
 горизонтальному направлению расположения. Эта концепция настолько проста
 и понятна, что стала стандартом для большинства целевых страниц. Как
-только вы поймете этот паттерн, вы начнете видеть его повсюду, где он
+только вы поймете этот шаблон, вы начнете видеть его повсюду, где он
 применяется.
 
-Простой подход к кодированию.
-
 Простой подход к кодированию для этого изменения заключается в
 использовании модели CSS flexbox и изменении ориентации с колоночной на
 горизонтальную на уровне секции. Вот пример:
 
-<div class="orm-ChapterReader-codeSnippetContainer"
-testid="custom pre block">
-
-``` source-code
-.
-// Для мобильных устройств
-    @media only screen and (max-width: 600px) {
-          section{
-              display: flex;
-                  flex-direction: column;
-            }
+```CSS
+// For mobile
+@media only screen and (max-width: 600px) {
+     section{
+         display: flex;
+         flex-direction: column;
      }
-// Для рабочего стола
+}
+// For desktop
 section{
      display: flex;
      flex-direction: row;
 }
 ```
 
-<div class="orm-ChapterReader-snippetButtonContainer">
-
 Обратите внимание, что в код включена точка останова на ширине 600
 пикселей. Вы можете управлять различными размерами экрана, применяя
 несколько медиазапросов с точками останова.
 
-## Домашняя ссылка
+### Домашняя ссылка
 
-Этот паттерн настолько распространен, что мы даже не задумываемся о нем.
+Этот шаблон настолько распространен, что мы даже не задумываемся о нем.
 Главный логотип компании размещается в левой верхней части страницы как
 ссылка на главный экран. Такое расположение не случайно, оно связано с
-тем, как пользователи "сканируют" страницу. Разные пользователи при
+тем, как пользователи "сканируют" страницу. 
+
+Разные пользователи при
 загрузке страницы бросают беглый взгляд, направляя глаза в направлении
 *Z*, *L* или *T* по странице. Размещение логотипа в виде ссылки в левом
 верхнем углу гарантирует, что он будет первым элементом, который
 зарегистрирует пользователь. В данной главе хорошим примером этого
-шаблона являются рисунки 11.21 и *11.22*. Но есть и исключения,
+шаблона являются рисунки 11.21 и 11.22. Но есть и исключения,
 например, домашняя страница Google:
 
 ![](/book/images/Figure_11.24_B18602.jpg)
-width="614" height="178"
-alt="Рисунок 11.24 - Домашняя страница Google является исключением из этого шаблона, поскольку логотип не является ссылкой" />.
 
 Рисунок 11.24 - Главная страница Google является исключением из этого
 шаблона, так как логотип не является ссылкой
 
-Как бы то ни было, логотип не является ссылкой.
-
 Однако исключение, показанное на предыдущем рисунке, является лишь
 временным, так как Google возвращается к этому шаблону, когда выводит
 результаты поиска:
 
 ![](/book/images/Figure_11.25_B18602.jpg)
-width="588" height="155"
-alt="Рисунок 11.25 - Результат поиска Google применяет шаблон" />.
 
 Рисунок 11.25 - Результат поиска Google применяет шаблон
 
-.
-
 Шаблон "Главная ссылка" должен возвращать вас либо на главную страницу,
 либо на первый шаг процесса. Этот шаблон настолько широко распространен
 и понятен пользователям, что любое исключение из него должно делаться
 очень осторожно, с хорошим пониманием поведения и взаимодействия
 пользовательской базы.
 
-## Главная секция, призыв к действию и иконки социальных сетей
+### Главная (hero) секция, призыв к действию (call to action) и иконки социальных сетей
 
-Раздел **героя** - это первая часть, которая отображается при загрузке
+Раздел **hero** - это первая часть, которая отображается при загрузке
 страницы в браузере и идет от самого верха (где находятся главная ссылка
 и главное меню) до, максимум, видимой нижней части экрана. Все
-содержимое, расположенное ниже этого раздела, называется "ниже сгиба",
+содержимое, расположенное ниже этого раздела, называется "ниже сгиба (“below the fold)",
 т.е. чтобы увидеть его, пользователю необходимо прокрутить страницу
-вниз. Раздел-герой считается наиболее важной частью главной страницы и
-местом, где размещается первоначальный **призыв к действию**. Мы уже
+вниз. 
+
+Hero раздел считается наиболее важной частью главной страницы и
+местом, где размещается первоначальный **призыв к действию (call to action)**. Мы уже
 рассматривали эту концепцию в этой главе, когда говорили о принципах и
 контрастах дизайна пользовательского интерфейса. В настоящее время
 большинство сайтов придерживаются этой схемы и отображают раздел-герой
 контрастно, с большими изображениями или каруселью и преобладающим
 призывом к действию.
 
-<div>
-
-**призыв к действию**.
-
 ![](/book/images/Figure_11.26_B18602.jpg)
-width="480" height="184"
-alt="Рисунок 11.26 - Героический раздел главной страницы Kobold Press - красочный и прямой" />.
 
 Рисунок 11.26 - Героический раздел главной страницы Kobold Press -
 красочный и непосредственный
 
-На предыдущем рисунке, который мы приводим в качестве примера, герой
-главной страницы Kobold Press - красочный и непосредственный.
-
-В предыдущем примере от Kobold Press (<https://koboldpress.com/>) мы
+В предыдущем примере от [Kobold Press](https://koboldpress.com/) мы
 видим, как они применили несколько шаблонов, описанных здесь, начиная с
 главной ссылки и главного меню и заканчивая героической секцией и
-призывом к действию. Обратите внимание также на то, что слева в виде
+призывом к действию. 
+
+Обратите внимание также на то, что слева в виде
 плавающей боковой панели отображаются иконки социальных сетей.
 Становится шаблонным размещение таких значков со ссылками на адреса
 социальных сетей для каждого учреждения, а в случае постов или статей -
 со ссылкой "поделиться" контентом. Обычно панель социальных иконок
 размещается следующим образом:
 
--   В нижнем колонтитуле сайта
--   В начале и/или конце статьи
--   В описании продукта
+- В нижнем колонтитуле сайта
+- В начале и/или конце статьи
+- В описании продукта
 
 При размещении ссылок на прямой доступ к контенту из приложения Vue
 (например, к товару из интернет-магазина) важно, чтобы ссылка и
@@ -1240,25 +1111,25 @@ alt="Рисунок 11.26 - Героический раздел главной 
 размещения ссылок, открывающих домашний экран вместо нужного раздела
 приложения.
 
-## Другие паттерны
+### Другие шаблоны
 
-Есть и другие паттерны, сотни, если не тысячи, которые оказывают
+Есть и другие шаблоны, сотни, если не тысячи, которые оказывают
 непосредственное влияние на пользовательский опыт. Я рекомендую вам
 продолжить их изучение, например, следующие:
 
--   Шаблоны корзины
--   Пользовательский onboarding
--   Паттерны геймификации
--   Паттерны регистрации и снятия с регистрации
+- Шаблоны корзины
+- Пользовательский onboarding
+- Шаблоны геймификации
+- Шаблоны регистрации и снятия с регистрации
 
 Однако у пользовательского опыта есть и темная сторона, связанная с
 использованием манипулятивных и обманных приемов. Как этичный
 разработчик, вы должны избегать использования любых из этих темных
 шаблонов.
 
-# Темные паттерны
+## Темные шаблоны
 
-Темные паттерны - это тщательно продуманные интерфейсы и взаимодействия
+Темные шаблоны - это тщательно продуманные интерфейсы и взаимодействия
 с единственной целью - манипулировать или обмануть пользователя,
 заставить его совершить непредусмотренные действия или даже втянуть его
 во вредоносные результаты. После такого определения можно подумать, что
@@ -1266,23 +1137,19 @@ alt="Рисунок 11.26 - Героический раздел главной 
 К сожалению, даже крупные компании часто следуют этой неэтичной
 практике. Собственно говоря, все воспроизведенные в этих разделах
 примеры относятся именно к такой категории, и, как это часто бывает с
-паттернами проектирования, многие из них пересекаются или могут быть
+шаблонами проектирования, многие из них пересекаются или могут быть
 вложены друг в друга. Давайте рассмотрим их по очереди.
 
-## Вопросы с подвохом
+### Вопросы с подвохом
 
-Этот паттерн представляет собой простую или сложную игру слов,
+Этот шаблон представляет собой простую или сложную игру слов,
 направленную на то, чтобы обмануть пользователя и заставить его сделать
 противоположное тому, что он задумал. Вот пример:
 
 ![](/book/images/Figure_11.27_B18602.jpg)
-width="663" height="100"
-alt="Рисунок 11.27 - Вопрос-обманка для подписки на рассылку" />
 
 Рисунок 11.27 - Вопрос с подвохом для подписки на рассылку
 
-.
-
 Как видно из приведенного примера, у пользователя, заполняющего форму,
 может возникнуть соблазн оставить этот флажок не отмеченным, если он не
 хочет получать рассылку новостей от компании. Обычная тенденция -
@@ -1291,22 +1158,18 @@ alt="Рисунок 11.27 - Вопрос-обманка для подписки
 абзаца, который большинство пользователей не читает: **Отметьте эту
 опцию, если вы не хотите получать** **нашу рассылку**.
 
-## Проникновение в корзину
+### Проникновение в корзину
 
-Этот темный паттерн встречается во многих приложениях для покупок,
+Этот темный шаблон встречается во многих приложениях для покупок,
 довольно часто в таких сервисах, как хостинг и авиабилеты. Он
 заключается в том, что при оформлении заказа в корзину помещаются
 товары, которые пользователь не выбрал, обычно это представляется как
 предложение или "необходимый" товар на небольшую сумму. Вот пример:
 
 ![](/book/images/Figure_11.28_B18602.jpg)
-width="682" height="104"
-alt="Рисунок 11.28 - В корзину был добавлен дополнительный товар" />.
 
 Рисунок 11.28 - В корзину добавлен дополнительный товар
 
-.
-
 В данном примере после оформления заказа на новый домен в корзину был
 автоматически добавлен новый пункт **Первая настройка**. Этот пункт не
 имеет другого объяснения, а его сумма кажется "маленькой" по сравнению с
@@ -1316,11 +1179,9 @@ alt="Рисунок 11.28 - В корзину был добавлен допол
 такие элементы до подтверждения покупки, но чаще всего такой возможности
 нет.
 
-Воровские мотивы.
+### Приманка для тараканов (Roach motels)
 
-## Рабочие мотели
-
-Этот паттерн довольно часто встречается для услуг и подписок. Он
+Этот шаблон довольно часто встречается для услуг и подписок. Он
 заключается в том, что покупка совершается очень легко, часто после
 бесплатного пробного периода, с условием, что списание средств будет
 продолжаться до тех пор, пока пользователь явно не отменит покупку. Вот
@@ -1331,7 +1192,7 @@ alt="Рисунок 11.28 - В корзину был добавлен допол
 "заманить пользователя в ловушку", чтобы отказ от услуг стал практически
 невозможным.
 
-## Privacy Zuckering
+### Privacy Zuckering
 
 Эта темная схема названа в честь основателя известной компании,
 работающей в социальных сетях. Она заключается в том, что пользователю
@@ -1345,34 +1206,28 @@ alt="Рисунок 11.28 - В корзину был добавлен допол
 осведомлен, в то время как очень немногие пользователи вообще читают или
 правильно интерпретируют такое соглашение.
 
-Предотвращение утечки данных
-
-## Предотвращение сравнения цен
+### Предотвращение сравнения цен
 
 В данном случае сайт представляет пользователю несколько тарифных планов
 на услуги, но намеренно скрывает или маскирует либо характеристики, либо
 индивидуальные цены, в результате чего пользователь не может провести
 прямое сравнение и выбрать наиболее подходящий вариант.
 
-Цена скрывается или маскируется.
-
 Цена скрыта или замаскирована таким образом, что пользователь не может
 принять обоснованное решение и вынужден выбирать вариант на основе
 характеристик или других атрибутов.
 
-## Ненаправленность
+### Ненаправленность
 
-Это еще один паттерн, часто используемый в рабочих процессах корзины. Он
+Это еще один шаблон, часто используемый в рабочих процессах корзины. Он
 заключается в использовании названий и опций, которые сбивают
 пользователя с толку, а предварительно выбранные варианты скрывают
 альтернативные и более выгодные ценовые предложения. Если система имеет
 плавающее значение цены (например, для гостиниц или авиабилетов), этот
-паттерн часто используется для манипулирования пользователем с целью
+шаблон часто используется для манипулирования пользователем с целью
 заставить его выбрать тот вариант, который отвечает интересам компании.
 
-Скрытые расходы.
-
-## Скрытые расходы
+### Скрытые расходы
 
 В данном случае при выборе пользователем товара или услуги не
 раскрывается полное или исчерпывающее описание сопутствующих расходов
@@ -1380,9 +1235,7 @@ alt="Рисунок 11.28 - В корзину был добавлен допол
 покупках общая сумма оплаты оказывается выше, чем та, на которую
 рассчитывал пользователь в первый раз.
 
-## Приманка и подмена
-
-.
+### Приманка и подмена
 
 Эта схема широко используется рекламодателями в Интернете и вызывает
 наибольшую ненависть у пользователей. Он просто маскирует одну опцию под
@@ -1392,11 +1245,7 @@ alt="Рисунок 11.28 - В корзину был добавлен допол
 намереваясь закрыть диалоговое окно, открывается новая вкладка с
 рекламируемым сайтом.
 
-Подтверждение подтверждения.
-
-## Подтверждающий стыд
-
-.
+### Подтверждение позора (Confirm shaming)
 
 Весьма манипулятивная схема, предполагающая намеренное использование
 формулировок или действий для того, чтобы пристыдить и высмеять
@@ -1406,19 +1255,15 @@ alt="Рисунок 11.28 - В корзину был добавлен допол
 пример:
 
 ![](/book/images/Figure_11.29_B18602.jpg)
-width="706" height="130"
-alt="Рисунок 11.29 - Диалог подтверждения при удалении услуги из корзины" />.
 
 Рисунок 11.29 - Диалог подтверждения при удалении услуги из корзины
 
-.
-
 Заметьте, что в примере формулировки кнопок действий носят
 манипулятивный характер, хотя исходный вопрос таковым не является. Этот
-паттерн является обоюдоострым мечом, так как пользователь может
+шаблон является обоюдоострым мечом, так как пользователь может
 почувствовать отказ от всей услуги и отменить всю операцию.
 
-## Замаскированная реклама
+### Замаскированная реклама
 
 При внедрении рекламы на страницу она может маскироваться под реальный
 контент, имитируя стили и кнопки действий с целью заставить пользователя
@@ -1426,27 +1271,23 @@ alt="Рисунок 11.29 - Диалог подтверждения при уд
 маскировка такова, что отличить призыв к действию на сайте от рекламы
 невозможно. Подобная схема популярна на бесплатных сайтах, предлагающих
 размещение файлов для скачивания, где часто можно встретить несколько
-кнопок **Загрузить** на странице, но только одна из них действительно
+кнопок **Скачать** на странице, но только одна из них действительно
 загружает нужный файл, а остальные перенаправляют пользователя на
 сторонний сайт. Вот один из примеров:
 
 ![](/book/images/Figure_11.30_B18602.jpg)
-width="1176" height="356"
-alt="Рисунок 11.30 - FileHippo.com размещает бесплатные программы. Некоторые объявления маскируются под кнопки загрузки" />
 
 Рисунок 11.30 - FileHippo.com размещает бесплатное программное
 обеспечение. Некоторые рекламные объявления маскируются под кнопки
 загрузки
 
-.
-
 На этом скриншоте с сайта [FileHippo.com](http://filehippo.com/) при
 переходе на страницу загрузки VLC Media Player на сайте представлены
 несколько кнопок **Скачать**. Если пользователь не обратит на них
 внимания, это может вызвать действие, отличное от предполагаемой
 загрузки программного обеспечения.
 
-## Дружественный спам
+### Дружественный спам
 
 В этом темном шаблоне приложение запрашивает доступ к контактам
 пользователя с целью расширения его сети или круга общения. Если
@@ -1455,41 +1296,37 @@ alt="Рисунок 11.30 - FileHippo.com размещает бесплатны
 после предоставления этой информации она также передается сторонним
 организациям и рекламодателям.
 
-В списке темных шаблонов есть и такой.
-
-Перечень темных паттернов может не быть напрямую связан с каким-либо
+Перечень темных шаблонов может не быть напрямую связан с каким-либо
 одним средством массовой информации или структурой, но избегать или
 предотвращать их - этическая обязанность людей, работающих в этой
 отрасли.
 
-# Подведение итогов
+## Подведение итогов
 
 В этой главе мы рассмотрели важные закономерности, позволяющие создать
 для пользователя удовлетворительный пользовательский опыт. Мы также
 познакомились с важными терминами, позволяющими разговаривать с
 дизайнерами на равных и с взаимопониманием, что является необходимым
 условием для сотрудничества и предоставления пользователю максимально
-положительного опыта. Мы также рассмотрели некоторые из наиболее
+положительного опыта. 
+
+Мы также рассмотрели некоторые из наиболее
 распространенных "темных" шаблонов, которые представляют собой приемы и
 реализации рабочих процессов, направленные на манипулирование
 пользователями и зачастую лишающие их конфиденциальности и ресурсов.
+
 Хотя эта глава носит в основном информационный характер, она должна дать
 вам более полное представление о среде, в которой создаются
 веб-приложения, и о том, каких стандартов следует придерживаться для
 удобства работы с ними. Все это - знания, которые должен знать хороший
 инженер и разработчик.
 
-# Вопросы для ознакомления
+## Вопросы для проверки
 
 Приведем несколько простых вопросов, которые помогут вам обобщить то,
 что вы узнали в этой главе:
 
--   Что такое UI и UX паттерны?
--   Можете ли вы назвать преимущества использования паттернов UX?
--   Какую пользу может принести использование стандартных паттернов в
-    компонентах Vue 3?
--   Что такое темные паттерны и почему их следует избегать?
-
-</div>
-
-</div>
+- Что такое UI и UX шаблоны?
+- Можете ли вы назвать преимущества использования шаблонов UX?
+- Какую пользу может принести использование стандартных шаблонов в компонентах Vue 3?
+- Что такое темные шаблоны и почему их следует избегать?
diff --git a/docs/book/ru/Chapter_9__Testing_and_Source_Control.md b/docs/book/ru/Chapter_9__Testing_and_Source_Control.md
index ff672ef9e..1cf7c64d5 100644
--- a/docs/book/ru/Chapter_9__Testing_and_Source_Control.md
+++ b/docs/book/ru/Chapter_9__Testing_and_Source_Control.md
@@ -1218,7 +1218,7 @@ push на сервер запускают тестирование прилож
 Все эти инструменты имеют профессиональную
 ценность для разработчика и необходимы в современной индустрии.
 
-## Вопросы к обзору
+## Вопросы для проверки
 
 - Почему важно автоматизированное тестирование? Устраняет ли оно необходимость проведения ручного тестирования?
 - Что необходимо для тестирования наших однофайловых компонентов в Vue?