Ошибки начинающих разработчиков (как проверить код перед ревью) | Фронтенд-разработка

Показать описание

Ошибки в коде начинающих разработчиков и на что нужно обратить внимание перед тем, как отправить задачу в ревью. Видео рассчитано на начинающих разработчиков и, т. к. я фронтенд-разработчик, ориентируюсь на фронтенд.

В видео 16 советов, как проверить свой код, чтобы вашу задачу реже возвращали с комментариями "не работает", "вёрстка уехала" и правками по стилю кода.

Делать ошибки и не уследить за 100% — это нормально. Мы не машины и можем ошибаться. Поэтому ревью и обязательно) Но если можем дополнительно проверить и сократить время на ревью — думаю, стоит это делать) По всем этим граблям проходилась (и реже, но на некоторые ещё иногда наступаю) в обеих ролях🙂

ССЫЛКИ ИЗ ВИДЕО:

ТАЙМ-КОДЫ:
00:00 О чём видео, для кого и зачем)
00:20 Статусы работы над задачами и о каком этапе речь в видео: о переходе из "в разработке" в состояние "ревью".
01:00 Проблема, которую помогают частично/полностью решить 16 способов проверки своего кода из видео.
01:45 №1 Стиль кода.
02:43 №2 Проверка условий на избыточность.
03:08 №3 Понятные имена переменных/функций/методов/т. д.
03:50 №4 Проверка логики работы добавленной функциональности.
04:58 №5 Почистить от "экспериментов" и логирования.
05:09 №6 Проверка ошибок в консоли в панели разработчика.
05:14 №7 Перечитать задачу.
05:25 №8 Результат вёрстки должен выглядеть как на макете.
06:25 №9 Проверка вёрстки на разных разрешениях экрана.
07:17 №10 Проверка использования переменных в стилях.
07:38 №11 При создании переменной в стилях убедиться, что переменной с таким именем/значением ещё нет.
07:48 №12 Проверка вёрстки и логики в разных браузерах.
08:19 №13 Запуск локальных тестов.
08:25 №14 О прохождении тестов в CI после push.
08:48 №15 Отреагировать на все комментарии при повторном возврате задачи на ревью.
09:30 №16 Точно запушить изменения :) "Как оно бывает" — эмоции со стороны ревьюера и со стороны того, кого ревьювят.
10:41 Окончание и "неудавшиеся дубли"

Подробности в видео, а тут коротко 16 пунктов:

1. Стиль кода. В каждом проекте стиль может немного отличаться, но основные моменты и принципы одинаковые. Пара ссылок, где можно узнать основные общепринятые нормы, чуть выше в описании.

2. Проверьте условия на избыточность.

3. Имена переменных должны максимально понятно передавать их смысл. Ещё обязательно проверьте, что не написали имя новой переменной с ошибкой.

4. Если в задаче делалась какая-то логика, а не просто вёрстка, то нужно проверить логику работы и все варианты пользовательских сценариев взаимодействия с новой функциональностью.

5. Если добавляли какое-то логирование или что-то ещё для локальной отладки и для посмотреть — не забудьте удалить это перед тем, как запушить код и отправить на ревью.

6. Проверьте, что в панели разработчика в консоли нет ошибок.

7. Очень стоит ещё раз внимательно перечитать задачу, т. к. может осенить, что часть не сделали или сделали не то.

8. Результат вёрстки должен выглядеть как на макете.

9. Проверьте, как себя ведёт вёрстка на разных разрешениях экрана.

10. Если в проекте в стилях используются переменные, а они используются часто, то нужно проверить, что вы используете существующие переменные везде, где можно.

11. Если создаёте в стилях новую переменную, убедитесь, что точно ещё нет переменной с таким значением и именем. Ну и что дали понятное название :)

12. Относится и к вёрстке и к логике работы. Проверьте в разных браузерах.

13. Если в проекте есть тесты, запустите их локально и убедитесь, что они проходят успешно.

14. Как правило пуш инициирует запуск тестов в CI, если они там есть. Поэтому, когда запушили все изменения и готовы переводить задачу в ревью, дождитесь, пока тесты пройдут. Не переводите задачу на другого человека, если тесты падают.

15. Ревьюер оставил комментарии и вернул задачу на доработку. Перед тем, как вернуть задачу обратно на проверку, убедитесь, что отреагировали на все его комментарии: ответили, уточнили и внесли необходимые правки.

16. Убедитесь, что действительно запушили. И такое бывает :)

Если есть дополнения — мне будет интересно прочитать их в комментариях. Спасибо, что досмотрели это видео, подписывайтесь на канал и инстаграм, пока :)

MUSIC:
Plaidness — Francis Preve (фонотека YouTube)

#ОшибкиВКоде #ОшибкиНачинающихРазработчиков #КодРевью