sk1e/yasn

yasn's Issues

Рамки

Нет рамок вокруг user-profile и textarea в messager'е

Тултип юзер профайла

При переполнении текст выходит за границы, и хвост тултипа съезжает вверх.

Импорт глобальных констант в stylus

Сейчас в каждом stylus-файле импортятся константы. Того же эффекта можно добиться подключив файл констант один раз в вебпак-конфиге. Для этого нужно stylus-лоадеру передать опцию import с путем до файла с константами.

Вынести разметку в шаблоны по максимуму

Увидел ХТМЛ в скриптах, например, вот:

<div class='messenger__message messenger__message_self'>${text.value}</div>

шаблонизаторы же уже настроны, там две минуты все переделать красиво :)

Файлы стилей

Файлы стилей, а также фавиконку и json-файл в папке web_modules, было бы не плохо вынести в отдельную папку, например, theme.

Шрифт тултипа слайдера

Нет скруглений верхних углов карты

Кнопки

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

`PercentageView` зависит от другого блока

Лучше так не делать, когда js расширяется другим блоком - иерархия зависимостей лучше пусть будет чисто семантическая и идет от html, который друг в друге создает разметку компонент, а тут ты в перпендикулярной плоскости создаешь еще другой вид зависимости.

Создай лучше папку shared в web_modules и туда вынеси общий класс, который потом импортируй и для PieChartView, и для PercentageView

Нет eslint для проекта

Причем его расширение конфигом от airbnb обязательно

В messager'е при нажатии лкм не передается фокус текстовому полю и кнопке, соответственно не срабатывает click.

Добавить .gitignore

Не забыть добавить туда .idea, node_modules и файлы сборки

Все классы, которые используем для поиска по DOM-у должны начинаться с префикса js-

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

Собирать объект entry points лучше редьюсом

Отличный пример, когда можно заюзать reduce

const entries = {};
pageList.forEach((x) => { entries[x] = ['babel-polyfill', `./pages/${x}.js`]; });

Вообще я  forEach не люблю как раз ввиду его сайд эффектов, сам по себе он не очень полезный. А методы перебора как раз нужны обычно чтобы просто получить на входе массив и вернуть сразу же что-то на его основе, forEach в этих ситуациях - костыль

Имя в месседжере

Ну тут по картинке я думаю понятно в чем проблема)

Обновить npm и убрать костыль с d3

В файлах встречаются импорты вида

import { arc, pie } from 'd3/d3-shape';

А в конфиге вебпака

      d3: 'd3/node_modules',

Это все возможно было нужно для старых нпм, но сейчас он ставит зависимости плоско - то есть все зависимости зависимостей не вложены, а на верхнем уровне находятся

Инкапсуляция компонент в js

Для того, чтобы блоки были по максимуму независимы в HTML используется разделение на файлы и затем их сборка шаблонизатором, в принципе этого хватает. Для того, чтобы сделать блоки независимыми в CSS используется БЭМ.
А вот для независимости в js нужно будет придумать самому пару правил и везде им следовать :)
Например, блоки точно должны обладать возможностью быть вставленными множество раз на одну страницу так, чтобы их скрипты не пересекались и при клике на первый блок не меняли второй (например, сейчас блоки commentable и location явно не следуют этому правилу)
Блоки кода точно не должны ничего знать про другие блоки (как минимум сверху, но по хорошему и не лезть в верстку блоков снизу в иерархии), например взаимодействие можно настроить только посылкой событий и их прослушиванием (так, причем, чтобы блок мог слушать только своих родителей и детей, а не схожие блоки из соседних веток DOM)
Еще было бы неплохо для всех блоков придумать общую струтктуру, я говорю не о конкретных утилитах и строках кода, которые часто встречаются, а именно об одинаковых шагах. Например почти у всех блоков есть шаг поиска элемнетов в DOM. У всех блоков есть шаг - привязать события к элементам DOM. Еще у всех блоков в отдельных функциях лежат обработчики - их как-то организовать бы тоже по одному принципу. Тут может помочь все блоки делать классами, у которых будут методы с похожими названиями. Тогда при создании нового блока с нуля сразу ясно-понятно будет, какая у него будет структура .js-файла

тег <buttton> в блоке search

По заданию все страницы должны быть responsive

На данный момент все сверстанные страницы - static.

Пропустил в двух местах префикс js-. По issue #21

а именно: 20-ая строка и 66-ая строка

Переполнение текстовых элементов

Нужно проверить все текстовые элементы на предмет переполнения.

Переполнение news и events

Тоже не очень красиво

Думаю будет правильно как-то ограничить высоту

Использовать webpack-dev-server

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

Рамка в arrow-button должна быть толще

Шрифт месяца в календаре

Страницы не адаптивны

Страница контактов, ее проверяю первой:

Нет скруглений углов карты

Функции в классах элементов

Функции attachCoordinates(), attachEventHandlers(), render() и т.д., правильнее будет вызывать внутри конструктора. Например, создание экземпляра кнопки не имеет смысла без привязки обработчиков, поэтому нужно делать эту привязку внутри конструктора.

Отступы и размеры шрифтов

Во многих местах не соблюдены отступы и размеры шрифтов.

тултип слайдера

Зачем в slider.pug в микшин tooltip передаются атрибуты tooltip и tooltipBody, если внутри микшина они не используются?
+tooltip("dark-2", "bottom")(tooltip="slider__tooltip", tooltipBody="slider__tooltip-body")= 0

В percentage цифры не по центру

Нет бэкграунда у входящего сообщения в messager'е

Снова кнопка

Немного не доделал. Если у кнопки тень 3px, то при нажатии она должна опускаться на все 3px.

Resize textarea

на всех textarea нужно запретить возможность ресайза

Кнопка today в календаре

Не сбрасывает выбранную дату на сегодняшнюю