kirillkushpel/news-explorer-frontend

Финальная оценка

Opened this issue · 0 comments

h3yAlias commented

Резюме по работе:

Инфраструктура и Git

На тройку

  • Вебпак настроен:
    • собирает проект.
    • деплоит сайт на GitHub Pages.
    • переменные окружения запрещены, проект собирается и запускается на любой OC после установки необходимых npm-зависимостей. (Использован cross-env)
    • Локальный сервер установлен и настроен.
    • Хеши проставляются и настроено автоматическое обновление страницы (hot reload).
  • Настроен Babel
  • PostCSS установлен и настроен для минификации CSS-кода и простановки вендорных префиксов.
  • Установлены и настроены все плагины. Нету лишних плагинов
  • Устранена проблема с нижними подчеркиваниями при публикации на github. Эта задача решается размещением в корне пустого файла .nojekyll. (Коммент: переложите файл в корень проекта)
  • Продакшн-бандл должен деплоиться на Github Pages скриптом вебпака.
  • Работа с Git
  • GH-pages
  • Исходники проекта хранятся в каталоге src/, итоговый билд - в каталоге dist/.

На четвёрку

  • Для каждой страницы скомпилирован свой CSS-бандл
  • Бандлы хранятся в отдельной директории каталога dist/
  • У каждого установленного плагина зафиксирована версия.
  • Frontend на том же домене, что и API

На пятёрку

  • Полно и корректно оформлен README.md.
  • .gitignore содержит все необходимые каталоги и файлы
  • URL не заканчиваются на .html

HTML и CSS

На тройку

  • Именование классов и структура файлов сделаны по БЭМ.
  • Проект адаптирован под различные разрешения экрана, соответствует макетам, сделанным для них. Горизонтальный скролл не должен возникать на разрешениях от 320 пикселей и больше. Скрывать полосу прокрутки свойством overflow: hidden нельзя.
  • Сайт состоит из 3-х страниц, корректно работает навигация между страницами и ссылки на внешние ресурсы: ни одна ссылка не ведёт в пустоту или на якорь, внешние ссылки открываются в новой вкладке.
  • Отсутствуют ошибки валидации

На четвёрку

  • В коде используется семантическая разметка: применяются семантические теги, выбор элементов при вёрстке корректен (параграф должен быть параграфом, список — списком); структура DOM-дерева состоит не только из контейнеров div.
  • Кнопки, инпуты и ссылки реализованы во всех состояниях, указанных в макете. Если кнопка в макете должна менять цвет при наведении — это обязательно реализовать в проекте.
  • Отзывчивая вёрстка, которая корректно тянется на всех промежуточных разрешениях.
  • В макете есть одинаковые элементы. Для их оформления должен быть переиспользован один компонент.
  • Шрифты подключены через @font-face.
  • Для каждого шрифта указаны альтернативные варианты из системных шрифтов.
  • Для позиционирования элементов выбран верный подход, описанный корректным синтаксисом.
  • Для изображений задан атрибут alt с подходящий значением.
  • Элементы формы должны выделяться, когда на них установлен фокус.
  • У формы должны быть:
    • заданы плейсхолдеры;
    • валидированы обязательные поля.

На пятёрку

  • Каркас макета реализован на Flex layout или Grid layout;
  • reset.css запрещен;
  • растровые и векторные изображения оптимизированы;
  • Использование современных HTML-тегов и атрибутов для респонсив изображений, такие как picture для изображений.

JavaScript

На тройку

  • Настроена работа API для поиска новостей (https://newsapi.org/) и для подгрузки коммитов (https://developer.github.com/v3/). Любые другие внешние API запрещены
  • Асинхронные запросы к API:
    • запросы можно осуществлять через Fetch API или XMLHttpRequest; сторонние библиотеки запрещены — такие как axios или jQuery;
    • для работы с API создан отдельный класс;
    • цепочка обработки промисов завершается блоком catch;
    • первый обработчик then возвращает res.json;
    • манипуляции с DOM-элементами производятся после получения ответа сервера; это касается и сохранения в localStorage;
  • Именование:
    • camelCase для параметров, методов и переменных;
    • существительные для имён переменных;
    • существительные во множественном числе для NodeList;
    • существительные с заглавной буквы для имён классов;
    • const для неизменяемыx напрямую переменных;
    • соответствующее содержимому имя класса;
    • отсутсвует транслит и неуместные сокращения.
  • Сторонние библиотеки применяются только для реализации слайдеров, слайдер создаётся из JavaScript.
  • Дата рассчитывается автоматически: «за 7 дней до сегодняшнего дня»
  • Код JS-модулей инкапсулирован;
  • JWT сохраняется в браузере. Если после успешного входа в систему открыть новое окно, логин и пароль не придётся вводить повторно.
  • Поля форм входа и регистрации валидируются на клиенте. Если поле заполнено с ошибками, под полями ввода появляются стандартные браузерные сообщения об этих ошибках.

На четвёрку

  • Код объектно-ориентирован:
    • использованы ES6-классы;
    • внутри классов нет создания экземпляров других классов;
    • соблюдён принцип DRY (Don't Repeat Yourself);

    Комментарий: на каждой странице дублируется создание классов для работы с бэком и формой авторизации и регистрации

    • соблюдён принцип единственной ответственности, то есть каждый класс полностью отвечает за свою задачу, и никакой другой класс к решению этой задачи не относится;
    • соблюдён принцип открытости-закрытости: для добавления функциональности классы можно расширять, не модифицируя их;

    Комментарий: в конструкторе класса CardsArray вызывается render - не нужно вызывать методы в конструкторах классов, только инициализация полей класса, иначе это может помешать переопределить поведение класса при наследовании там самым делая класс "не открытым" для модификации

    • у классов есть приватные поля, то есть свойства и методы, которые начинаются с нижнего подчёркивания и не используются нигде вне класса;
  • Работа с DOM-деревом для вывода результатов:
    • cайт защищён от XSS: нельзя выполнять скрипты через пользовательский ввод;
    • нет потенциальных утечек памяти: обработчики созданы и удалены в нужных местах;
    • NodeList перебирается с использованием методов для работы с массивами и псевдомассивами;

    Комментарий: for (let i = 0; i < data.articles.length; i += 1) { - перебирать через forEach

    • множественные операции c DOM-элементами производятся прежде, чем добавлять блок в разметку;
    • DOM-элементы не перерисовываются без необходимости;
    • innerHTML запрещён — вместо него применяются более мягкие методы;
    • поиск по DOM-дереву выполняется минимально возможное количество раз, то есть поиск одного элемента не выполняется дважды;
  • Обработка ошибок API:
    • пользователь получает сообщение в случае ошибки;
    • поля формы заблокированы во время отправки запросов;
  • при клике на «Выйти» страница автоматически меняет состояние и выглядит так, как у пользователя, не выполнившего вход в систему.

На пятёрку

  • прелоудер крутится при ожидании ответа от сервера
  • Все события onclick, onload:
    • event.target и this применяются правильно
  • Обработка и валидация форм:
    • текст ошибок кастомный, а не системный;
    • валидация реализована и представляет собой отдельный метод для обработки форм
  • Отсутствует «мусор» в коде:
    • по имени колбэка слушателя понятно его назначение;
    • нет «магических значений», все значения записаны в переменные;

    Комментарий: if (window.innerWidth > 767) mainMenu.close() 767 - магическое значение

    • константы описаны в той области видимости, в которой объявлена функция, и внутри неё значения констант берутся из замыкания;
    • если с API можно работать несколькими способами, то выбран один способ, который применяется везде в проекте. Например, поиск отдельных элементов осуществляется только методом querySelector
  • Модульный JS-код по БЭМ
  • Любой попап закрывается не только при клике на иконку крестика, но и при клике в любое место вне попапа и при нажатии клавиши Esc

    Комментарий: т.к. ошибка о пустом поле поиска тоже сделана попапом предусмотреть и её закрытие при клике в любое место вне попапа и при нажатии клавиши Esc

  • После успешной регистрации пользователю показывается попап с сообщением: «Пользователь успешно зарегистрирован!» и предложением войти в систему
  • Если пользователь не вошёл в систему, то переход на страницу с сохранёнными новостями по прямой ссылке осуществляет редирект на главную.
  • Поля форм входа и регистрации валидируются на клиенте. Сообщения об ошибках кастомные, а не стандартные. Кастомные тексты ошибок есть в макете.

Инфраструктура: 5б

Верстка: 4б

JavaScript: 3б

Бэкенд: 4б (Работа)

Финальная оценка: 4б