kinda-neat / cv

Hi there 👋

Чтобы познакомиться со мной заочно можно почитать заметки/статьи по некоторым вопросам, которыми я задавался (либо кто-то меня спрашивал и я решил ответ/ресерч положить в текст для будущих ссылок) по ходу своего пути as a software engineer (и не только).

• Уверены что понимаете как работает useLayoutEffect?
• I don't care if you call yourself a senior. Prove yourself.
• Ubiquitous ideas that underpin code I write
• Where should you do form validation: on Backend, Frontend or both? And Why?
• Планируется больше статей/заметок :)

Уведомления о новых заметках/статьях падают сюда.

Нашли что-то полезное для себя? Можете поддержать меня через:

• buymeacoffee

cv's Issues

Убрать горизонтальный скролл

Сделать так, чтобы при любой ширине экрана не было горизонтального скролла

Иморты в начале

За редкими исключениями все импорты, как в js, так и pug и css, должны быть в самом начале.

передавать в блоки только нужную там информацию

Не забывай про инкапсуляцию и изолированность. Зачем блоку контактов в контракте требовать от внешнего кода передачи ему данных скиллов? :) Передавай в каждый блок только то, что там реально нужно, контракты должны быть минимальными

Не использовать фиксированные значения для выравнивания

Ни для горизонатльного, ни для вертикального. Делать все максимально гибко, и чтобы не было захардкоженных значений.

Например, в header.less top: 45%;: он сейчас и не выравнен по вертикали - просто подогнан, а если ты захочешь потом сделать линии толще (особенно если значение будет в px или rem), тебе придется менять значение top

js файлы в папках с блоками

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

Вот файл — пример, который, возможно, пригодиться. Здесь собирается все файлы из папки, которые не являются index.js и передаются в качестве схем баз данных.

https://gist.github.com/Zarwlar/4d8e68e2960a13f473f1f9e224bd0a07

Данные не должны струтурно зависеть от верстки

У тебя сейчас структура данных жескто завязана на том, как в верстке это выглядит, но это мягко говоря неадекватно. Ты же не будешь в базе делить данные на две таблицы с одинаковой структуруой, просто потому что выводятся данные в двух колонках визуально разных. И что за блок card в data.json? Почему инфа о профиле и описание профиля разделены? Опять же, только потому тчо в верстке это два разных блока? :)

Подстраивание сайта под макет

Это ишус ко второму макету
Как правило, мы берём макет, загружаем его в PixelPerfect и задаём ему определённый масштаб, чтобы проверить вёрстку. Но в твоём случае приходиться изменять зум окна страницы, чтобы подогнать его под макет. Это нужно исправить.

Т.е. при открытии окна должно быть что-то такое:

Но точно не так:

block-header

Почему "block-header", а не "header"? Где-то есть конфликт имён? Если нет, то стоит переименовать

инклудить в начале файла

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

data.json

У объектов не должно быть плоей item1..3 и т.д. Вместо этого нужно использовать массив по типу:

"names": [ { "name":"Alex" }, { "name":"Ivan" }, { "name":"Olga" } ],

Различные плагины должны использоваться из node_modules

Сейчас в твоих скриптах используются плагины, которые должны быть установлены глобально) Чтобы это исправить, нужно изменить пути запуска плагинов на локальные (node_modules)

Лучше сразу поправить во всех проектах :)

"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"npm i": "npm install",
"prod": "webpack -p",
"dev": "webpack-dev-server"
}

require.context отрефакторить и не дублировать

Ты можешь все заимпортить одним вызовом require.context, смысла делить на три тут нет :)

Шрифты

В макете не Arial шрифт. Там подключается свой.

circle-progress-bar-b

Он явно не соответствует макету

Ссылка на изображение

img.developer-card__image(src=""+data.card.image+"" alt="developer's avatar")
Интересно, что за пустые строки в src )

Тернарник в тернарнике. list-item.pug

Плохой подход) Даже при таких простых конструкциях это выглядит нагромождено и не так уж понятно с первого взгляда. Причем в итоге просто конкатенируется название класса с темой переданной в аргументе. + что ты будешь делать если дальше потребуется наличие 3,4,5 тем у list-item?

circle-progress-bar-b и circle-progress-bar

Это ишус ко второму макету
Переименовать согласно семантике

Добавить README

Добавить README c описанием проекта и командами его запуска.
После этого, попробуй склонировать свой проект с гитхаба и запустить
согласно инструкции, которой ты написал.
Если всё ок - закрывай ишус

Куда пропали эти кнопки?

Это ишус ко второму макету

Общие замечания по стилям

Мы работаем по БЭМу, поэтому:

1. Нужно убрать li, span, img и заменить их на соответствующие классы;
2. Нужно убрать каскады, иерархия селекторов должна быть плоской.

Помимо БЭМа:

1. В .developer-education и .skills-item заменить у padding'ов px-ли на другие
   величины.

tel в contact-item

Этот тип выглядит, как неуместный транслит. Лучше переименовать