Show your code Saturday: код-рев’ю #1

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Коментар редакції. Тиждень тому ми оголосили про початок Show your code Saturday — це інтерактивна рубрика, у якій кожен охочий може поділитися власним проєктом, написавши про нього в коментарях. А ми натомість щосуботи обираємо найцікавіший і розповідатимемо детальніше.

Сьогодні ми хочемо поділитися з вами проєктом Артема Захарова, який створив вебсайт, де люди можуть робити власні тризуби та завантажувати їх у будь-якому кольорі чи розмірі.


У коментарях Артем описав проєкт так:

Я знайшов крутий дизайн на Figma з великою кількістю тризубів. Ну, і я подумав, що було б прикольно створити вебсайт, де люди могли б робити власні тризуби та завантажувати їх у будь-якому кольорі чи розмірі, який вони хочуть ) Не всі знають історію власного герба, тому було б непогано зробити сторінки, де люди також могли б прочитати про нього.

Я все ще роблю цей вебсайт, але вже можна створити та завантажити пару тризубів.
coat-of-arms-of-ukraine.vercel.app


Наш активний учасник спільноти Максим Рудний зробив код-рев’ю проєкту! Тож далі передаємо слово Максиму 👇

Проєкт — вебсайт, де люди могли б робити власні тризуби та завантажувати їх у будь-якому кольорі чи розмірі, який вони хочуть.

Посилання на код.

Дисклеймер: я не є автором коду і не знаю причин реалізації будь-якої частини коду таким чином, як це є. Стиль написання коду без ознайомлення з Code Style та Code Convention проєкту не можу критикувати, може це так було задумано.

Проєкт створений на основі Next.js — це дає простоту та зручність при старті нового проєкту та економію в часі на розробку. З коробки йде підтримка SEO, що буде плюсом для проєкту, оскільки цей сайт повинен індексуватися та шукатися через пошукові системи.

На сайті можна вибирати варіант герба і змінювати його колір. Реалізація зміни кольору трішки дивна. При виборі кольору йде запит на бекенд і він повертає нову згенеровану картинку. При цьому на клієнті відображається лоадер. Чому б не змінювати колір на клієнтській частині? По коду видно що сервер лише отримує колір і підставляє його у SVG зображення. З погляду UX та продуктивності це краще зробити на клієнті, а завантаження фінального зображення уже залишити на бек.

Перше що бачите в коді — доданий Prettier. Автоматично форматований код набагато зручніше читати та забирає менше часу та зусиль на code review. Я ще б додав Husky, щоб форматування відбувалось перед кожним коммітом.

Дублікати коду

Кожен ендпойнт на отримання нового зображення дублює код валідації, який можна було б винести в middleware.

const validationResult = validateGetImageRequest(req);
if (!validationResult.success) {
 return NextResponse.json(validationResult.errors);
}

Схоже проблема й у компонентах SelectColor та SelectSize, де код кожної кнопки або серектора дублюється.

Стейт-менеджер

Тут використовується Zustand. Я тільки не дуже зрозумів, чому стор розташовується у папці hooks. Спочатку подумав, що то кастомний хук врапер, але ні, це просто стор. Можливо його треба винести на рівень вище і зберігати в папці store. Тоді і знайти його буде легше.

Single Responsibility

Є одна утиліта validateGetImageRequest, яка, згідно з назвою, має робити валідацію коду і повертати значення віладний чи ні. Можна ще було б помилку повернути. А в середині функція мутує дані і повертає їх. Ця логіка вже не відповідає назві функції:

let data = validationResult.data;
data.fill = "#" + data.fill;
return { success: true, data };

Висновок

Код виглядає чистим та якісним, за винятком вище згаданого та ще кількох дрібниць які згадую у відео. Ще б додати юніт-тести й було б взагалі за Робертом Мартіном.

👍ПодобаєтьсяСподобалось1
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Добрий день, дякую велике за Code Review.

Як ви могли бачити, проєкт ще не закінчений і відсутні деякі сторінки, тому і є дублікати коду. Безумовно, я з вами погоджуюсь з приводу читабельності коду, коли ми проходимо map по масиву елементів.

З приводу генерації на клієнті я думав про це, але щось не додумався, як це добре зробити ) Саме тому я і поставив максимальний розмір 3х, щоб генерація проходила швидко.

Чесно кажучи, я навіть не задумувався про Husky 🤭 і форматування, оскільки я звик, що у мене стоїть форматування при збереженні. Тож я просто підключив плагіни і пишу собі, а в команді могли бути проблемки. Дякую за пораду.

Я думав про те, щоб створити окрему компоненту для вибору кольору і розміру, але я подумав, що нехай буде так зараз і зроблю це потім, оскільки я мав 2 дні, щоб покращити проєкт для рев’ю. Але знову ж таки, окрема компонента завжди краще.

Не до кінця зрозумів про кастомний хук і useShallow. Воно спочатку було реалізовано на звичайних стейтах, але мені захотілося трошки зменшити ререндери. Хоча можна було про це не турбуватися, адже реакт документація сама говорить, що ререндери це ок.

Ви мали на увазі створити в файлі стейту функції типу useColor useSize, де я буду повертати тільки потрібні мені значення ?

Про ту функцію валідації максимально погоджуюсь. Я, навіть, не помітив цього 😶‍🌫️. До речі, чи не знаєте ви, як можна URL-параметром передати хештег, щоб було типу так: api/v1/tridents/simple?fill=#fff&size=1 і отримати значення на ендпоінті ?

Так, там в Intro я перевіряю, чи завершилася завантаження компоненти, тому setLoaded, а не setLoading. Але всеодно дякую.

З приводу проєкту, я просто наповнюю портфоліо, оскільки активно шукаю роботу, якийсь Internship або Junior. Хоча без досвіду, напевно, не візьмуть. Тому скористаюся моментом і залишу лінки на портфоліо і Linkedln 🤭

www.linkedin.com/...​artem-zakharov-6b94b6251
zakharov-artem.vercel.app
github.com/ZAKHAROV-Artem

Дякую ще раз за Code Review. Це надзвичайно важливо для початківців.

Зробив правки після Review, якби комусь, було цікаво, то лишаю лінк на відповідні коміти

Основне то Middleware, SelectColorItem & SelectSizeItem

github.com/...​f-ukraine/commits/master

Радий що рев’ю було корисне. Відповіді дав у коментарі на YouTube.

Підписатись на коментарі