yasn's People
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 в календаре
Не сбрасывает выбранную дату на сегодняшнюю
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.