Maksym Rudnyi

05/10/2024

Вітаю. Сьогоднішній розбір проєкту уже на каналі. Такого типу проєкти ми ще не дивились. Щось дійсно новеньке.

Особливо корисним може бути приклад використання документації за допомогою TypeDoc. Генерується автоматично на основі коментарів в коді. Хоч коментарі й зло, але в цьому випадку вони доцільні.

Відео

Створення власного NPM пакету не найпростіша задача. Окрім функціоналу, потрібно пам'ятати про документацію та надійність. Той випадок, коли уникнути написан...

28/09/2024

Вітаю. Сьогодні розбір проєкту SYCS14 уже на каналі. Тут є чому повчитися. Не все згадав у відео, тому пишіть в коментарях що ви знайшли і що можна покращити. Автору дякую що поділився кодом.

Сьогодні у нас дуже цікавий і дивний проєкт на розборі. Після аналізу коду у мене залишилось більше питань ніж відповідей:Чому вибраний підхід із Styled Comp...

18/09/2024

Всім привіт!

Нещодавно виникла потреба реалізувати функціонал Drag and Drop на сайті. Знайшов бібліотеку Swapy — дуже проста та швидка в інтеграції та налаштуванні. Додав її у свій проєкт на NextJS за 5 хвилин.

Перевагою цієї бібліотеки є те, що вона фреймворк-агностична, тобто може працювати з будь-яким фреймворком або навіть з чистим JavaScript (Vanilla JS).

Тому, якщо ви шукаєте рішення для DnD задачі, рекомендую звернути увагу на цю бібліотеку. Відеоогляд та налаштування можна переглянути тут:

У цьому відео ми розглянемо бібліотеку Swapy, яка дозволяє легко додати функціонал drag-and-drop до ваших проєктів. Я покажу вам інтеграцію цієї бібліотеки з...

14/09/2024

React патерни Compound Components та Namespace Components на прикладі сьогоднішнього проєкту. Розбираємо код розробника-початківця на React + Vite.

Відео тут https://youtu.be/DS4e3HdAvBg
По проєкту є незначні (і значні) зауваження, про які згадую у відео, але окремо хочу зазначити 2 речі:
- Шикарно описаний ReadMe, що для такого проєкту важливо;
- Використання патернів React.

Чи сильно вас цікавить тема патернів в React?

У цьому відео я роблю код ревю проєкту початківця на React і Vite. Особливу увагу приділяю двом популярним патернам у React: Compound Components та Namespace...

12/08/2024

Привіт усім! 🌟 Суботній огляд проєкту вже доступний на каналі. Цього разу розглянемо сайт піцерії на Next.js, і там є стільки помилок та проблем, що важко їх порахувати. Це чудовий приклад, як можна ознайомитись з типовими помилками початківця та навчитися їх уникати.

Добре, що автор поділився кодом — наші зауваження та рекомендації допоможуть покращити проєкт.

Якщо ви знайдете ще якісь баги або маєте власні поради, не соромтеся писати в коментарях!

Переглянути відео можна тут:

Стати спонсором каналу:https://www.youtube.com/channel/UC-648eMxRKdDPJMm5sPd82w/joinПрийняти участь в огляді - https://dou.ua/forums/topic/48641/Код сьогодні...

20/07/2024

Всім привіт. Сьогоднішній ревю проєкту уже на каналі. Сьогодні у нас незвичний розбір - проєкт на Vue. Я раніше на ньому ніколи не писав і навіть не дивився в ту сторону. Сподобалось що з коробки є методи що спрощують роботу з класами. В реакті для цього треба встановлювати classnames або clsx.

По проєкту є деякі нюанси, що не залежать від фреймворка. Видно що частину коду автор копіював. Нотація змінних залишилась snake_case і багато var замість const.

Рекомендую протестувати проєкт. Мені особливо сподобався тетріс. Можна залипнути.

Відео тут https://youtu.be/wTC78vOZRQ8

Привіт! У цьому відео я, як розробник на React, вперше дивлюся на проєкт, написаний на Vue 3. Разом ми розглянемо клонів популярних ігор, таких як Minesweepe...

13/07/2024

Всім привіт. Сьогодні я підготував для вас новий розбір проєкту! 🔍👉 https://youtu.be/v_tLuYTPoSI

Цього разу розглянемо проєкт на Next.js та TailwindCSS з використанням GitHub Action, Prettier, ESLint, Husky та юніт тестів. Аналітику забезпечує Vercel (/analytics та /speed-insights), а трекінг помилок - Sentry. Стилізація виконана за допомогою Tailwind та -org/react.

Проєкт вразив своєю якістю та продуманістю, і я радий поділитися з вами своїм аналізом. Буду радий почути ваші відгуки! 💬

Також хочу нагадати, що спонсори каналу отримують ранній доступ до відео, тому якщо хочете бути серед перших, приєднуйтесь до наших мемберів! 🎉

У цьому відео я розбираю цікавий проєкт, який мене вразив. Проєкт написаний на Next.js і стилізований за допомогою TailwindCSS та -org/react. Додатков...

06/07/2024

Всім привіт. Суботній розбір проєкту уже готовий https://youtu.be/590tLT-rlYM. Сьогодні дивимось на сайт-портфоліо на NextJS 15-rc, React 19-rc. Багато анімації (не люблю анімацію). Найбільша проблема проєкту - його оптимізації та 3D модельки.

Сподобалось що автор використав Zod для валідації форм (куди ж без нього з серверними екшинами). clsx для роботи з класами. Ну і звісно Biome для лінтінгу та форматування. Цікаво почути відгук.

27/06/2024

Всім привіт. Постійно шукаю цікаві та корисні інструменти для розробників, які спрощують та полегшують життя. Нещодавно знайшов шикарну альтернативу для ESLint та Pritter - Biome. Інструмент поєднує в собі як лінтер, так і форматер. Написаний на Rust, тому і працює швидко. Зручне виведення помилок і підказок як виправити, якщо не хочете автоматично фіксити.

Для любителів Tailwind - автоматичне сортування класів йде з коробки. Жодних додаткових плагінів. Та й ідея, як я розумію, була взяти все найкраще, помістити в один інструмент, щоб працювало швидко і нічого більше не доставляти. Встановили цей пакет, додали розширення у свої улюблені IDE і погнали.

Разом з DOU я провів ревʼю великої кількості проєктів і у всіх них була проблема з автоматичним форматуванням та лінтингом. Здається більшість розробників ігнорують ESLint + Pritter. Гадаю Biome зможе покращити цю ситуацію. Його використання спростили уже до максимум.

Посилання на відео

Вітаю! У цьому відео ми глибоко зануримося в світ BiomeJS, нового та перспективного інструменту для форматування і лінтингу коду. Ми розглянемо його особливо...

24/06/2024

Новий розбір коду уже на каналі. Скажу відразу, що огляд вийшов дуже довгим. Помилок і проблем, над якими працювати, просто безліч. Дуже добре, що цей код потрапив мені на очі та ми зможемо його покращити.

Тут є, як мінімум, одна критична помилка, яка, потенційно, може коштувати автору тисячі доларів. Погоджуєтесь?

Посилання на відео -

Сьогодні у нас на ревю код від Станіслава - проєкт “Камінь, Ножиці, Папір” реалізований на React. Дякую автору за код. Знайдені помилки та проблеми будуть хо...

17/06/2024

Здається, що може бути простішим, ніж вивести SVG зображення у вашому React застосунку? Проте, після численних рев'ю коду, я бачу, що як початківці, так і професіонали часто використовують SVG неправильно або неоптимально.

Найпоширеніша помилка – використання зображень як React компонентів, розміщуючи їх в JSX або як SVGR. Такі зображення додаються в JS-бандл під час білду. Це може катастрофічно збільшити розмір файлу, що ускладнює його парсинг та компіляцію. SVG зображення в принципі дуже важкі для парсингу.

У новому відео я ділюсь порадами щодо оптимізації роботи з SVG. Ви дізнаєтесь про використання SVG-спрайтів та правильний імпорт зображень, щоб вони залишались окремими файлами, а також про те, як змінювати їхні стилі за допомогою CSS (що для багатьох є проблемою).

Посилання на відео: https://youtu.be/5r9sN5Yz79A

Також, у відео я забув згадати про сервіс SVGOMG, який оптимізує зображення, зменшуючи їхній розмір без втрати якості. Так, цей підхід підходить і для SVG.

Ви неправильно використовуєте SVG картинки в React проєктах! У цьому відео я поясню, як правильно використовувати SVG зображення, щоб вони не потрапляли в ба...

09/06/2024

Привіт. Якщо у вас є світло, інтернет і бажання подивитись на чужий код (ох скільки умов), то новий розбір уже на каналі. https://youtu.be/2S6zRIY3CVw

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

Ну а якщо нема бажання дивитись на код то хороших вихідних, можна і в понеділок подивитись)

Нагадую, що разом з розвиваємо нову рубрику Show Your Code Saturday, де ви можете ділитися кодом а я його буду розбирати. Супер корисна практика для початківців щоб покращити якість вашого коду.

Стати спонсором каналу:https://www.youtube.com/channel/UC-648eMxRKdDPJMm5sPd82w/joinБуду вдячний за підтримку каналу:Patreon - https://www.patreon.com/rudnyi...