akhmadbabaev / toxin-demo Goto Github PK

Папку docs нужно добавить в .gitignore

1. По стандартам airbnb в js используются одинарные кавычки. Это правило распространяется на js-код в pug:
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/pages/index/index.pug#L4-L8

2. В html по стандартам компании (7 пункт) нужно указывать еще и цвет фона:
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/styles/basic.scss#L1-L9

• line-height лучше указать без единиц измерения (коэффициентом) в сокращенном свойстве font.

3. Сейчас у тебя глобально во многих свойствах используется em, но не похоже, что отступление от стандартов здесь действительно необходимо, поэтому em надо заменить на rem:
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/card-data/card-data.scss#L2

4. Не используй отрицательные margin (пункт 4):
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/price/price.scss#L6

Нужно исправить глобально. Объекты рекомендуется деструктурировать:
https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/pages/colors/colors.pug#L26-L27

Названия шрифтов должны быть в стиле lower-case-hyphenated (см. пункт 1):

Мне кажется, эти комментарии избыточны, т. к. из названий шрифтов ясно, что первый - regular, а второй - bold.
https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/styles/fonts/montserrat.scss#L3-L9

layout.pug не является компонентом, его лучше перенести в src. Можно в папке pages создать подпапку layout и там хранить layout.pug и общие стили из basic.scss.

В блоке card-data в хедере используются два компонента card-info и price. Содержимое этих блоков минимальное, и очевидно, что они являются частью блока card-data и не будут использоваться в отрыве от него. Поэтому, мне кажется, что нет смысла выносить их в отдельные компоненты.

https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/card-data/card-data.pug#L5-L22

Еще почему-то переменная isLuxury нигде не используется.

При запуске start команды, открывается страница номеров отеля. А как мне попасть на страницу цветов и шрифтов? Нужно организовать эту возможность

Обычно, эту папку именуют webpack

Какую роль в проекте у тебя имеют эти файлы?

Фото номеров не общие для всего проекта, а поэтому должны лежать в папке компонента

Запусти dev команду, зашел в браузере по адресу, который написан в файле (http://localhost) -> и что-то пошло не так(

Исправь этот момент, не нужно вводить людей в заблуждение

1. querySelectorAll возвращает NodeList, по которому можно пройтись с помощью forEach() без каких-либо преобразований (mdn):
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/card/Card-init.js#L5

Такой способ формирования класса модификатора не очень читабельный, т. к. конкатенация проводится неявно в операнде логического И. А если в блоке будут другие типы модификаторов (по цвету, например), то для каждого придется писать подобную конструкцию.
https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/ui-types/ui-types.pug#L11-L13

Элементы leftClass и rightClass логично было бы объединить в каком-нибудь контейнере и добавлять модификатор к нему. Еще на больших проектах удобно использовать общую схему добавления модификаторов. Вот хороший пример:

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

1. rgba() принято писать строчными буквами:
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/card-data/card-data.scss#L12

2. Миксин hello() где-то используется? Если да, то надо ему дать более осмысленное название.
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/card-info/card-info.scss#L1-L4

3. Названия классов должны описывать контент, который содержат элементы. Пока я не посмотрела готовую страницу, не могла понять, где используется компонент ui-types. Уж очень общие названия элементов в нем используются:
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/ui-types/ui-types.pug#L8-L16

4. Мне кажется, схема с хранением класса блока в переменной приносит больше неудобств, чем выгоды. Визуально воспринимать БЭМ-структуру блока сложно, когда имя класса формируется через шаблонную строку, а в js-классе ты все равно не используешь переменную className.
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/card/card.pug#L5-L9
   Было бы проще, если бы общие классы добавлялись примерно так:
   

Почему тут не использовать относительные пути в ссылках?

По-хорошему, нужно писать самодокументируемый код, когда это возможно. Бывают случаи, когда код ну очень сложен и никакие техники для документации кода не действуют(e.g. хорошие имена переменных), тогда можно добавить комментарии, но делать это тоже очень внимательно. У тебя очень простой код и комментарии тут избыточны)

Не согласен, что это главный цвет. Главный цвет - basic-color у тебя. Нужно переименовать

Использование этого цвета не нашел

Удалить пустые строчки, кроме последней
Все цвета вынести в константы
Почему такой line-height выбран?
Зачем отключил kerning шрифтов?
Насчет 10-ой строчки + не используй important

Нужно добавить автоматический импорт scss и js, чтобы не приходилось вручную прописывать пути для каждого файла.
https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/pages/index/index.scss#L21-L36

scss тоже должны импортироваться в главный js:
https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/pages/index/index.pug#L14

А он в свою очередь должен подключаться автоматически через webpack:
https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/pages/index/index.pug#L27

Стили для плагина swiper импортируй из node_modules в scss соответствующего компонента.
https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/pages/index/index.pug#L11

1. Инициализация js для этого компонента должна происходить независимо от того, где этот блок используется. То есть схема аналогична Card-init.js - находишь все 'js-card-slider' и создаешь для них экземпляр класса CardSlider. А сейчас тебе в блоке card приходится создавать дополнительный div.js-card__slider, чтобы инициализировать свайпер:
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/card/Card.js#L9-L10

2. Плагин swiper позволяет гибко настраивать имена классов для любых встроенных элементов. Когда есть такая возможность, надо ей пользоваться:) И структура компонента будет более читабельной и понятной из-за отсутствия служебных классов, которые не вписываются в БЭМ:
   https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/components/card-slider/card-slider.pug#L4-L14

Т.к. проект у тебя приватный, то нет необходимости в полях name, version и еще в некоторых. Это не критично, но тк ты добавил поле private, значит понимаешь о чем речь и можешь доработать эту идею до конца.

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

Раскидай dep и devDep, руководствуясь документом

В проекте совсем не используются семантические теги. Например, логотип логично поместить в тег header, а основной контент в тег main:
https://github.com/AkhmadBabaev/fsd-landing/blob/914f7d88c052ec9b8a4206a58dae649abc9635ce/src/pages/colors/colors.pug#L21-L27

Ну и глобально посмотреть, возможно где-то можно кликабельные div'ы заменить на кнопки, добавить section, article, вместо div для текста использовать соответствующий текстовый тег (p, h1-h6) и т. д.

Ссылки на ресурсы по семантике можно найти в стандартах компании (пункт 8).

В задании нет необходимости поддерживать IE, поэтому можно убрать это

Можно чуть более описательный контент у тегов?

Использование капса - плохая практика, за исключение некоторых случаев

Можно подумать о замене этого тега на более семантичный

Зачем ты поделил блок card на блоки? У тебя где-то используется этот блок не целиком?

Тут тоже нужно поменять теги на семантичные

Обязательно захламлять разметку ненужными тегами типа .card-data__separator?

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