Портфолио

Требования к проектам:

• Требования к проекту №1, №2

  Нажмите, чтобы развернуть

  • Разметка:

    1. Грубые ошибки в разметке отсутствуют.
    2. Проект соответствует техническому заданию.
    3. У всех изображений в теге <img> прописан размер.
    4. Использовано минимально возможное количество HTML-элементов (нет лишних элементов).
    5. Названия полей форм привязаны к своим полям с помощью <label>.

  • Стилизация:

    1. В CSS отсутствует !important.
    2. Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family.
    3. Для стилизации не использованы #id.
    4. При использовании блочно-строчных элементов явно указывайте вертикальное выравнивание.
    5. Для блока, у которого есть фоновое изображение, прописан фоновый цвет, который соответствует преобладающему цвету изображения (пока изображение не загружено, страница выглядит похоже на макет).

  • Тестирование:

    1. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, Edge, а также в Internet Explorer 11+.
    2. Сайт нормально смотрится на минимальной для макета ширине.
    3. Вёрстка проходит тест на переполнение контентом.

  • Разное:

    1. Единообразное написание и форматирование кода в HTML, CSS и JavaScript.
    2. Критическая функциональность сайта работоспособна без JavaScript (использовано прогрессивное улучшение).
    3. Отсутствует транслит в названиях классов, атрибутах, названиях файлов и так далее.

  • Доступность:

    1. У интерактивных элементов при нажатии или фокусе с клавиатуры есть активное состояние.
    2. Все интерактивные элементы имеют текстовое описание.

  • JavaScript:

    1. С помощью JavaScript реализовано открытие/закрытие окна с формой (без вспомогательных библиотек).
    2. С помощью JavaScript добавлена анимация формы (без вспомогательных библиотек).

• Требования к проекту №3

  Нажмите, чтобы развернуть

  • Разметка:

    1. Грубые ошибки в разметке отсутствуют.
    2. Отсутствуют типовые ошибки в разметке по методологии.
    3. У всех векторных изображений размер прописан в теге <img>, у встроенных SVG-изображений размер прописан в теге <svg>.
    4. В разметке отсутствует дублирование кода для одного и того же элемента, с помощью которых элемент отображается в разных местах страницы на разных версиях: мобильной, десктопной, планшетной.
    5. Использовано минимально возможное количество HTML-элементов (нет лишних элементов).
    6. Названия полей форм привязаны к своим полям с помощью <label>.

  • Стилизация:

    1. В CSS отсутствует !important.
    2. Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family.
    3. Нестандартные шрифты подключены локально. Формат шрифтов должен быть woff и woff2.
    4. Для стилизации не использованы #id.
    5. Нет глобальных стилей тегов.
    6. Для блока, у которого есть фоновое изображение, прописан фоновый цвет, который соответствует преобладающему цвету изображения (пока изображение не загружено, страница выглядит похоже на макет).

  • CSS-препроцессор:

    1. Код стилей должен быть разбит на несколько частей.
    2. & только для псевдоэлементов, псевдоклассов и модификаторов.

  • Адаптивность:

    1. Выполнена вёрстка трёх состояний каждой страницы: мобильной, планшетной и десктопной.
    2. В разметке есть правильный вьюпорт тег.
    3. Для микросеток использованы флексбоксы.
    4. Выполнена ретинизация растровой графики.
    5. Выполнено кадрирование контентных изображений.

  • Графика:

    1. Использована векторная графика.

  • Оптимизация:

    1. «Нежная» ретинизация.
    2. Использованы изображения в формате WebP.
    3. Использован векторный спрайт.
    4. Произведена оптимизация загрузки шрифтов.

  • Тестирование:

    1. Вёрстка проходит тест на переполнение контентом.

  • Сборка проекта:

    1. Процесс сборки личного проекта настроен с помощью Gulp.
    2. В результате сборки должна получаться папка build со всеми необходимыми файлами.
    3. Папка build со всем её содержимым не должна попадать в Гитхаб.

  • Разное:

    1. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, Edge, а также в Internet Explorer 11+.
    2. Единообразное написание и форматирование кода в HTML, файлах CSS-препроцессора и JavaScript (включая файлы автоматизации).
    3. Мобильное меню должно быть работоспособным при отключённом JavaScript.
    4. Отсутствует транслит в названиях классов, атрибутах, переменных CSS-препроцессора, названиях примесей и так далее.
    5. Проект соответствует техническому заданию.

  • Доступность:

    1. У интерактивных элементов при нажатии или фокусе с клавиатуры есть активное состояние.
    2. Все интерактивные элементы имеют текстовое описание.

  • Форматирование и внешний вид:

    1. Код соответствует правилам в EditorConfig.
    2. Код соответствует правилам в Stylelint.

• Требования к проекту №4

  Нажмите, чтобы развернуть

  • Задача:

    1. Все обязательные пункты технического задания выполнены.
    2. При открытии диалогов, загрузки данных и работе с сайтом не возникает ошибок, программа не ломается и не зависает.

  • Именование:

    1. Название переменных, параметров, свойств и методов начинается со строчной буквы и записываются в нотации CamelCase.
    2. Для названия значений используются английские существительные.
    3. Массивы названы существительными во множественном числе.
    4. Название функции или метода содержит глагол.
    5. Названия констант (постоянных значений) написаны прописными (заглавными) буквами.
    6. Название конструкторов и перечислений начинается с заглавной буквы. В названии используются английские существительные. Значения перечислений объявлены как константы.
    7. Название методов и свойств объектов не содержит название объектов.
    8. Из названия обработчика события и функции-коллбэка следует, что это обработчик.

  • Форматирование и внешний вид:

    1. Используются обязательные блоки кода.
    2. Список констант идёт перед основным кодом.
    3. Код соответствует гайдлайнам (ESLint).

  • Мусор:

    1. В коде проекта нет файлов, модулей и частей кода, которые не используются, включая, закомментированные участки кода.
    2. В коде нет заранее недостижимых участков кода.

  • Корректность:

    1. Константы нигде в коде не переопределяются.
    2. Включён строгий режим (ESLint).
    3. Используются строгие сравнения вместо нестрогих (ESLint).
    4. В коде не используются зарезервированные слова в качестве имён переменных и свойств.
    5. Нельзя пользоваться глобальной переменной event.

  • Модульность:

    1. Все файлы JS представляют собой отдельные модули в IIFE.
    2. Все значения, используемые только внутри модулей ограничены по видимости.
    3. В случае, если одинаковый код повторяется в нескольких модулях, повторяющаяся часть вынесена в отдельный модуль.
    4. При экспорте из одного модуля нескольких значений используется пространство имён.

  • Универсальность:

    1. Код является кроссбраузерным и не вызывает ошибок в разных браузерах и разных операционных системах.

  • Оптимальность:

    1. Множественные DOM-операции производятся на элементах, которые не добавлены в DOM.
    2. Константы, используемые внутри функций создаются вне функций и используются повторно через замыкания.
    3. Поиск элементов по селекторам делается минимальное количество раз, после этого ссылки на элементы сохраняются.
    4. Массивы и объекты, содержимое которых вычисляется, собираются один раз, а после этого только переиспользуются.
    5. Изменения применяются точечно.

  • Безопасность:

    1. Обработчики события добавляются и удаляются своевременно.
    2. Для вставки пользовательских строк (имён, фамилий и т.д.) использован textContent.

  • Единообразие:

    1. Все функции объявлены единообразно.
    2. Используется единый стиль именования переменных.
    3. При использовании встроенного API, который поддерживает несколько вариантов использования, используется один способ.

  • Сложность. Читаемость:

    1. Для каждого события используется отдельный обработчик.
    2. Длинные функции и методы разбиты на несколько небольших.