mvodev / hotel Goto Github PK

1. По заданию макс ширина 1920, но лучше делать чтобы на 1920+ тоже все выглядело хорошо. То есть растянуть по ширине фоновое изображение, продлить футер и хедер. При этом сам контент оставить где он есть.
   

2. Футер должен быть прижат к низу https://github.com/fullstack-development/front-end-best-practices/blob/master/CSS/README.md#1.15

3. Здесь должен быть единый календарь, c выбором диапазона:
   

4. Количество младенцев нужно считать тоже:
   
   Пример:
   
   Сюда нужно запретить писать:
   

5. Здесь кнопка, как будто не относится к инпуту, когда он в фокусе:
   

6. Здесь текст явно не вровень с маркером:
   
   В задании есть требование pixelperfect. Просьба проверить, что все совпадет.

7. Не срабатывает если не по сердцу кликать:
   

8. Здесь должен быть слайдер изображений:
   
   Примерно такой:
   

9. Пробелы невпопад
   

10. Курсор должен меняться на pointer, когда на ползунок наводим (и на все интерактивные элементы):
    

11. Бордер у чекбоксов не по макету
    

Имя директории в include не соответствует фактическому. На чувствительных к регистру символов файловых системах проект не соберётся.

https://github.com/mvodev/FSDCourse2/blob/3659977ad14ac931a5b1186af0a32f3f6c0a5845/src/pages/ui-kit-page/ui-kit.js#L12-L17

К скриптам такое же требование как и к стилям тут.

Не ясно какую смысловую нагрузку несет в себе то разделение изображений опираясь на расширение, возможно присмотревшись внимательно ты придумаешь как их грамотно распределить, к тому же не все изображения должны храниться в assets, если изображение строго привязано к кому-то компоненту, то есть смысл положить его в том же компоненте.

https://github.com/fullstack-development/front-end-best-practices/blob/master/Initiation.md#2
Лучше везде делать в два пробела, табы не годятся, в один пробел - тоже.

Добавить папку docs в .gitignore.

https://github.com/mvodev/FSDCourse2/blob/646de2e321f646e27ad613f3170e5a8b0b52217a/src/index.pug#L3-L13

Тут тоже вопрос к единообразию, кавычки вокруг значений атрибутов отличаются, когда будешь писать на реакте используя синтаксис jsx, можешь по привычке пренебрегать стандартизацией, а затем правило для кавычек тимлид может описать в eslint и вылезет куча предупреждений мелких.

Сложно ориентироваться в не совсем стандартной структуре директорий.

Понятней будет, если поместить блоки БЭМ (те, что сейчас в src/ui-kit/modules) в components, а страницы - в pages:

/src
  /components # блоки БЭМ
  /pages # страницы

Перенеси пожалуйста в dependencies всё то, без чего твоя продакшен сборка не соберется или не будет работать после компиляции, а в devDependencies остальное. Это один из вариантов распределения зависимостей, будет полезно ознакомиться.

В данном файле указанно, что изображения лежат в корне проекта, но в продакшен билде фавиконок в корне нет, пути нужно поправить, это касается и browserconfig.xml. Как я понимаю ты сгенерировал фавиконки на генераторе, он по умолчанию генерирует их так, будто они будут лежать в корне проекта, а если фавиконки некоторые типов лежат в корне проекта их не нужно импортировать, учти это и перепроверь пожалуйста, что подключено, а что нет )

Страницы не проходят валидацию.

В продакшен билде, шрифты лежат и в корне проекта и в assets.

Когда padding/margin симметричны - лучше использовать краткую запись (и не стоит добавлять единицы измерения к нулям):

padding: 0 15px;

1. Встречается инструкция var в файлах pug, следует заменить на const или let. На JavaScript в файлах pug также распространяются best practices.
2. Миксин button перегружен, лучше разбить на несколько, по одному на каждый блок (button, like-button, etc). В целом следует избегать слишком "универсальных" компонентов - поддерживать код будет гораздо проще.
3. В данном случае условие излишне:
   
   можно обойтись checked=isChecked.

Клик на пустое подчеркнутой пространство меняет состояние чекбокса.

Нужно разделить установку, запуск сервера, сборку. Не нашел команды для старта devserver, только для сборки проекта.

Удобно, когда посмотрев класс в devTools, можно легко найти нужный файл. И вроде в БЭМ про это тоже говорилось.

https://github.com/mvodev/FSDCourse2/blob/3659977ad14ac931a5b1186af0a32f3f6c0a5845/src/styles/style.scss#L16-L20

На строке 19 ошибка в пути @import '../components/heading//heading.scss'; .

Предпочтительно перенести импорт стилей в те компоненты куда подключается остальная часть компонента. Например ты подключаешь компонент button в компоненты dropdown, header-bar и т.д., стили компонента button нужно подключать в этих компонентах.

1. Все зависимости, используемые в production (jquery) должны быть в dependencies.
2. Вероятно, зависимости typescript и ts-loader лишние, если проект написан полностью на js?

Класс-модификатор не может использоваться без основного класса блока/элемента:

.

Должно быть: class="form-elements__buttons-wrapper form-elements__buttons-wrapper_first-row"

К тому же хорошие практики запрещают использование примесей. Их следует заменить на модификаторы, например: class="button button_variant_with-arrow.

dropdown-count.js
А что если понадобится переиспользовать компонент?
Что если выбриаемые элементы будут другими?
dropdownType = 'room'; dropdownType = 'guests';
Почему тип назван по случаю применеия?

Нужно стараться придерживаться единообразия, по дефолту мы предпочитаем использовать нейминг kebab-case и у тебя он используемся по большей мере. 😊

Чтобы не писать ишью по каждому пункту, прошу перечитать и поправить код
https://github.com/fullstack-development/front-end-best-practices