Maksym Rudnyi
Maksym Rudnyi
  • 114
  • 283 812
Оптимізація проєкту після якої мій ноут не зміг його потягнути.
Стати спонсором каналу:
ua-cam.com/channels/-648eMxRKdDPJMm5sPd82w.htmljoin
Посилання на код - github.com/wecreus/theCommoner-next
Посилання на сайт - commoner.vercel.app/
Щоб стати учасником - залиште коментар з описом свого проєкту та посиланнями на код та демо сторінку під топіком на DOU - dou.ua/forums/topic/48641/
Буду вдячний за підтримку каналу:
Patreon - www.patreon.com/rudnyi
BuyMeACoffee - www.buymeacoffee.com/maksymrudnyi
Mono Bank - send.monobank.ua/jar/6oqhydjLGp
або так - 5375 4114 0505 7287
Приват банк - 4627 0551 1331 6110
Давайте дружити:
Telegram ↣ t.me/maksymrudnyi
Telegram чат ↣ t.me/joinchat/H4AF4W4dfGeGepNQ
INSTAGRAM ↣ maksym_rudnyi
TWITTER ↣ MaksymRudnyi
FACEBOOK ↣ travelscode/
WEB-SITE ↣ travelscode.com/
GITHUB ↣ github.com/MaksymRudnyi/
Другий UA-cam канал ↣ ua-cam.com/users/travelscode
#NextJS #React #Next25 #Nextjs15 #ReactJS #React19
Переглядів: 94

Відео

Я в шоці від цього проєкту. Можна ж просто взяти й зробити нормально.
Переглядів 2,4 тис.16 годин тому
Кажуть що число 7 щасливе. Сьогодн у нас сьомий розбір проєкту в межах рубрики Show Your Code Saturday (SYCS) проєкт потрапив дійсно крутецький. Я б сказав що автор передивився ус наш розбори та мої відео на каналі, врахував ус зауваження та недоліки й зробив ідеальний проєкт. Ну майже ідеальний. Посилання на відео - ua-cam.com/video/afRitWLturA/v-deo.html Будемо розбирати проєкт від Bohdan Ku...
BiomeJS: Новий Стандарт Форматування та Лінтингу? Порівняння з Prettier та ESLint!
Переглядів 2,1 тис.День тому
Вітаю! У цьому відео ми глибоко зануримося в світ BiomeJS, нового та перспективного інструменту для форматування лінтингу коду. Ми розглянемо його особливост та переваги, порівняємо з такими відомими інструментами, як Prettier ESLint, а також покажемо практичне застосування в реальному проєкті. Основн теми відео: 1. Вступ до BiomeJS: Що таке BiomeJS чому цей інструмент швидко набирає популяр...
Критична помилка в коді вартістю в декілька тисяч доларів.
Переглядів 1,2 тис.День тому
Сьогодн у нас на ревю код від Станіслава - проєкт “Камінь, Ножиці, Папір” реалізований на React. Дякую автору за код. Знайден помилки та проблеми будуть хорошим прикладом для інших та навчанням для автора. Впевнений що дане ревю допоможе автору покращити якість його коду та уникнути критичних помилок, як коштували б кучу грошей. Посилання на код можна залишати в коментарях під цим постом на DOU...
Ви неправильно використовуєте SVG зображення в React! Правильні методи оптимізації
Переглядів 2 тис.14 днів тому
Ви неправильно використовуєте SVG картинки в React проєктах! У цьому відео я поясню, як правильно використовувати SVG зображення, щоб вони не потрапляли в бандл. Розглянемо різн прийоми та порівняємо їх ефективність. Дізнайтеся, як зробити ваш проєкти швидшими та більш оптимізованими! Підписуйтеся на канал ставте лайк, якщо відео було корисним. Ваш коментар та запитання завжди вітаються! #Reac...
Цього я не очікував. Проєкт на NextJS + Prisma + Tailwind, що мене здивував.
Переглядів 1,4 тис.21 день тому
Цього я не очікував. Проєкт на NextJS Prisma Tailwind, що мене здивував.
Що не так з цим проєктом? NextJS, Redux Toolkit, Material UI
Переглядів 951Місяць тому
Що не так з цим проєктом? NextJS, Redux Toolkit, Material UI
Так не пишіть React компоненти. Show Your Code Saturday №3
Переглядів 2 тис.Місяць тому
Так не пишіть React компоненти. Show Your Code Saturday №3
Ідеальний сайт-портфоліо на Vanilla JS?
Переглядів 914Місяць тому
Ідеальний сайт-портфоліо на Vanilla JS?
Code review проєкту з рубрики Screenshot Saturday на DOU. NextJS + Zustand + Sanity. Епізод 1.
Переглядів 615Місяць тому
Code review проєкту з рубрики Screenshot Saturday на DOU. NextJS Zustand Sanity. Епізод 1.
Як Створити PDF з Підписом у React? Практичний Гайд з react-pdf та react-signature-pad-wrapper!
Переглядів 6942 місяці тому
Як Створити PDF з Підписом у React? Практичний Гайд з react-pdf та react-signature-pad-wrapper!
Створюємо Розширення для Google Chrome з React: Повний Путівник від Нуля
Переглядів 1,4 тис.2 місяці тому
Створюємо Розширення для Google Chrome з React: Повний Путівник від Нуля
Інтегруємо ChatGPT у власний проєкт за допомогою React та OpenAI API.
Переглядів 3 тис.2 місяці тому
Інтегруємо ChatGPT у власний проєкт за допомогою React та OpenAI API.
Zustand. Ідеальний стейт менеджер для React у 2024 році?
Переглядів 3,2 тис.3 місяці тому
Zustand. Ідеальний стейт менеджер для React у 2024 році?
Огляд SolidJS. Чи перевершує він React?
Переглядів 2,1 тис.3 місяці тому
Огляд SolidJS. Чи перевершує він React?
Огляд React Signals. Можна забути про useState назавжди?
Переглядів 4,2 тис.3 місяці тому
Огляд React Signals. Можна забути про useState назавжди?
Мій перший зібраний (майже) Народний FPV дрон. Вартість. Проблеми. Навчання пілотування.
Переглядів 3 тис.4 місяці тому
Мій перший зібраний (майже) Народний FPV дрон. Вартість. Проблеми. Навчання пілотування.
GitHub Profile README: Підвищуйте свою професійну привабливість!
Переглядів 3,6 тис.5 місяців тому
GitHub Profile README: Підвищуйте свою професійну привабливість!
Debounce і Throttle - практики які повинен знати кожен програміст. Продуктивність React.
Переглядів 1,3 тис.6 місяців тому
Debounce Throttle - практики як повинен знати кожен програміст. Продуктивність React.
Веброзробка 2024: Що Вчити? Підсумки 2023 та Тренди на Наступний Рік!
Переглядів 4,5 тис.6 місяців тому
Веброзробка 2024: Що Вчити? Підсумки 2023 та Тренди на Наступний Рік!
5 варіантів Infinite Scrolling на React. Intersection Observer + React Virtualization.
Переглядів 2,1 тис.6 місяців тому
5 варіантів Infinite Scrolling на React. Intersection Observer React Virtualization.
React Server Actions туторіал. Клієнтська та серверна валідації. Next.js 14 tutorial
Переглядів 9766 місяців тому
React Server Actions туторіал. Клієнтська та серверна валідації. Next.js 14 tutorial
Міні курс по Supabase - платформі, яку я довго шукав. (Next.js App Router)
Переглядів 2 тис.7 місяців тому
Мін курс по Supabase - платформі, яку я довго шукав. (Next.js App Router)
Огляд Next.js - найпопулярнішого фреймворку на React. Зміни в Next.js 14. Next.js українською
Переглядів 6 тис.7 місяців тому
Огляд Next.js - найпопулярнішого фреймворку на React. Зміни в Next.js 14. Next.js українською
Усе, що ви хотіли знати про тестування, але боялися запитати. Будуємо піраміду тестування.
Переглядів 1,7 тис.7 місяців тому
Усе, що ви хотіли знати про тестування, але боялися запитати. Будуємо піраміду тестування.
React-i18next (i18n, l10n). Додаємо декілька мов на сайт. Локалізація та Інтернаціоналізація
Переглядів 2,3 тис.8 місяців тому
React-i18next (i18n, l10n). Додаємо декілька мов на сайт. Локалізація та Інтернаціоналізація
Майбутнє веброзробки - React Server Components
Переглядів 1,7 тис.8 місяців тому
Майбутнє веброзробки - React Server Components
Що писати в резюме початківцю? Або що написати коли нема чого писати в резюме.
Переглядів 1,8 тис.Рік тому
Що писати в резюме початківцю? Або що написати коли нема чого писати в резюме.
React: Порівняння та Особливості Роботи зі Стилями - Від CSS-класів до Styled Components
Переглядів 1,6 тис.Рік тому
React: Порівняння та Особливост Роботи з Стилями - Від CSS-класів до Styled Components
Оновлення React: Нова документація, перехід на фреймворки та Vite.js, та прощання з Create React App
Переглядів 5 тис.Рік тому
Оновлення React: Нова документація, перехід на фреймворки та Vite.js, та прощання з Create React App

КОМЕНТАРІ

  • @wecreus804
    @wecreus804 24 хвилини тому

    Шчось явно не так пішло з проектом на вашому ноуті. тестував і на mid-range андроіді - все було нормально. Або це через backdrop-filter blur або це через те як на mac відбувається запис екрану з backdrop-filter blur. На рахунок навішо взагалі підгружати компоненти коли юзер скролить -> для просто реакт компонентів - ні, це не має сенсу -> але для three js це прям необхідно, бандл великий, півтора мегабайти наскільки я пам'ятаю + рендерити 3д модель важко (навіть коли нормально сайт працює) + 3д модель повинна рендеритись тільки коли ми доскроллемо до неї. На рахунок "оптимізації" з бд -> я використовую сервер компонент який один раз на годину (незалежно від кліента) загружає данні з бази данних, передає їх кліентським компонентамм і потім юзер вже отримає пререндерений реакт (прям в реквесті можна побачити що отримується заповнений html). Ні юзер ні сервер не робить запити на бд кожного разу коли хтось заходить на сайт. На рахунок шрифтів -> я використовую варіативний шрифт з налаштуванням slant -8 і саме тому я не можу використовувати Next/font (от якраз коментар саме для цього). Але так - prefetch треба зробити, забув за нього. дякую за ревью, прикро що сайт нормально не працює на вашому девайсі. ви хоч зайдіть на телефоні щоб побачити як сайт повинен нормально працювати.

    • @MaksymRudnyi
      @MaksymRudnyi 18 хвилин тому

      Дякую що поділились проєктом. Сайт нормально працював доки не почав записувати екран. Але процесор вижирав і до того. Кулера гуділи весь час. напевно 3д моделька дуже важка. Я б все таки рекомендував переглянути її на щось простіше. Я так розумію вона повинна рендеритись при скролі щоб була анімація. Може є сенс відрендерити модель відразу а просто запустити анімацію коли користувач доскролює. Там ж є якісь задачі для рендерингу анімації які можна зробири раніше. Завантаження при скролі для 3д моделі - може і має сенс, але це треба перевіряти. Я про це нічого не казав. Мене більше здивував цей підхід до відгуків та іншої секції. Там просто React і це було надлишково.

    • @wecreus804
      @wecreus804 11 хвилин тому

      @@MaksymRudnyi Сайт же лагає навіть коли бандл з 3d моделью не підгружається, на 99% впевнений що це backdrop-filter blur + те як на маку зроблений запис екрану. подивлюся протестую, може знайду якусь можливість вимкнути blur коли довго сайт рендериться

  • @user-dk6xt7wf5m
    @user-dk6xt7wf5m 42 хвилини тому

    проект, который майнит?))

    • @MaksymRudnyi
      @MaksymRudnyi 16 хвилин тому

      та ні, просто важка модель, плюс нюанси при записі відео з екрана.

  • @boyywnkobe
    @boyywnkobe Годину тому

    Надіюсь мій скоро на підході, Explend ))

    • @MaksymRudnyi
      @MaksymRudnyi Годину тому

      А Ви додавали його на DOU в топіку?

    • @boyywnkobe
      @boyywnkobe Годину тому

      @@MaksymRudnyi Tak

    • @MaksymRudnyi
      @MaksymRudnyi Годину тому

      а можна посилання на коментар чи про що проєкт?

  • @dimapopov5962
    @dimapopov5962 2 дні тому

    Прокрустове ложе

    • @MaksymRudnyi
      @MaksymRudnyi 2 дні тому

      щось мені не хочеться підлаштовуватись під ці умови.

  • @VasylBatih
    @VasylBatih 2 дні тому

    теж попадав на цю вакансію, посміявся)

    • @MaksymRudnyi
      @MaksymRudnyi 2 дні тому

      Та тут плакати треба. Хтось же ж відгукнеться

    • @VasylBatih
      @VasylBatih 2 дні тому

      @@MaksymRudnyi та відгукнеться такий же "мідл" як і шукають, якийсь джун або людина після курсів ))) і може після N кількості співбесід вони щось таки та зрозуміють, ринок звісно на дні, но ця ЗП десь ще нижче :D

  • @codokit
    @codokit 2 дні тому

    Скільки форматтерів JS-коду виходить за рік? ;) Або за тиждень...

    • @MaksymRudnyi
      @MaksymRudnyi 2 дні тому

      На справді не так багато. Особливо тих що варті уваги. Пройшли ті часи коли щотижня виходив новий фреймворки чи якась тулза.

    • @codokit
      @codokit 2 дні тому

      @@MaksymRudnyi А не запіздно воно все виходить? Я розумію, JS зараз на етапі набуття мачурності, або вже ближче до завершення цього етапу. Просто дивуюся завзяттю програмістів. Це схоже на те якби щось накшталт xdebug кожного року виходив новий. З одного боку, класно що є двіжуха, з іншого - програмісти вкладаються у нові інструменти та формати (в конкретному прикладі - формат конфігу) замість еволюційного розвитку поточних, що сприяє фрагментації. Нічого тут поганого нема, просто збільшується час на вивчення альтернатив та вивчення їх особливостей та недоробленість рішень в глибину. При тому, що лише одна характеристика тут гарна - швидкість обробки.

    • @MaksymRudnyi
      @MaksymRudnyi 2 дні тому

      ну в даному випадку розвивати попередні інструменти не було куди - швидкість там була повільна. тут ми перейшли на Rust і швидкість виросла. Перенавчатися у цьому конкретному випадку - 1 година (одне відео подивитись). Pritter легко замінюється Biome. Я б не сказав що зараз дуже багато всього виходить нового у фронті чи JavaScript.

  • @codokit
    @codokit 2 дні тому

    Сто років не працював з реактом (років зо два). Іконки в SVG спрайтах стара тема, мабуть років 5-6 тому (може і більше) була популярна серед верстальників. Не знаю чому до сих пір вона не настільки поширена - мабуть, тому що простіше запхнути SVG у файл. Якщоб працював з реактом, то так низькорівнево не запарювався би. А ще, мені здається, що такі інтерфеси потребують щось накшталт MUI, тому що писати низькорівневі компоненти "від руки" та ще заморочуватися з іконками... Можливо, для верстки якогось сайту це і ок де много кастома, але для стандартизованого інтерфейсу це боль-печаль. Особливо якщо в тебе команда, яку потрібно всій цій кастомщіні вчити. Постфактум кусаю лікті що не брав MUI/ChakraUI/MantineUI - дуже багато фокусу зїло колупання з низькорівневими компонентами. Може для навчання писати кастомні кнопки-іконки це ОК. Та кому брешу, сам досі хворію кастомними низькорівневими компонентами.

    • @MaksymRudnyi
      @MaksymRudnyi 2 дні тому

      Цілком розумію. В більшості випадків краще взяти якусь Chakru чи щось схоже і пиляти задачки. Тут проблема що потрібно додавати багато різних іконок. Не усі використовують наприклад react-icons де є готові рішення. Коли кастомні іконки - їх потрібно використати щоб не покласти в бандл. Це насправді дрібниця і більшість не париться над цим. Але і відео не для більшості. Також зараз сильно популярний Tailwind - там прямо біль з готовими компонентами. Багато самому писати треба.

    • @codokit
      @codokit 2 дні тому

      ​@@MaksymRudnyi Вважаю, що гарна практика максимально переюзати готові бібліотеки компонентів, щоб вивільняти фокус для більш високорівневих задач. Коли капошишся з умовно кожною іконкою чи кнопкою це впливає на якість прийняття рішень щодо логіки роботи апки взагалом. Є багато більш важливих задач. :) Плюс кіти зазвичай добре протестовані. Це добре і коли працюєш сам і ще краще коли в команді. Хоча поки не пройдеш шлях розробки свого власного юай кіта, то не заспокоєшся. Тут я чудово розумію розробника додатка представленого у відео, але рекомендувати такий підхід навряд зможу.

  • @sandorium
    @sandorium 3 дні тому

    12:55 цікавий момент і все тут правильно зроблено дякуючи тайпскріпту. якщо ці літерали прописані як тип з переліченням то нема сенсу його кудись ще виносити, воно вже в типі є. це зайве якесь нагромадження буде. просто при використанні === intelisense не дасть вам щось інше підставити крім типів. і так наочно видно з чим порівнюється і не треба лізти ще кудись дивитись. при порівнянні нажимаєте в vscode ctrl + space / cmd + i -> і зразу бачите всі можливі варіанти. це може для vanilla js так треба робити.

    • @MaksymRudnyi
      @MaksymRudnyi 2 дні тому

      Воно то так, але якщо там текст зміниться то треба все перейменовувати або сподіватись що IDE перепише сама. Я все таки за більш контрольований підхід. Для vanilla js - це однозначно так треба робити.

    • @sandorium
      @sandorium 17 годин тому

      @@MaksymRudnyi дійсно не подумав. але з мого досвіду не зустрічав коли змінюють назви. більш вірогідно просто назву додадуть і використають там де треба було замінити. старе залишать знову ж таки щоб не зламати нічого і роботи собі не додавати. якщо змінять назву то напевне і ключ теж треба міняти якщо це константа у вигляді обєкту (а то ключ названий по старому а його значення інше виходить). в будь якому випадку я тоді просто пошуком і автозаміною все заміняю.

  • @CodeBeep
    @CodeBeep 3 дні тому

    Питання не по цьому коду, але все ж. Який правильний підхід у Next Js для реалізації завантаження нових тем для додатку, приблизно так як зроблено на Вордпрес - встановлюється тема, сайт повністю міняє зовнішній вигляд. Досить складно зараз, коли стилі прописані прямо в компонентах або в модулях css. Мабуть це мають бути css модулі, з яких підключаються тільки ті, які належать до включеної теми?

  • @CodeBeep
    @CodeBeep 4 дні тому

    ще дивлюся, жорсткість рев'ю недостатня))

    • @MaksymRudnyi
      @MaksymRudnyi 4 дні тому

      😃😃😃 В мене ж не ціль завалити людину. Треба вказати на недоліки коду і як краще виправити.

  • @sherlocksummer6284
    @sherlocksummer6284 4 дні тому

    Дякую

  • @user-jp4uf2sf4d
    @user-jp4uf2sf4d 4 дні тому

    Це просто неймовірно! Ваш пет-проект на React Firebase вражає з усіх сторін: від налаштованого Prettier та ESLint до інтернаціоналізації з використанням i18n і іншого. Поклацавши по чату багу щодо запису аудіо вже наче немає, тепер користувачі отримують повідомлення, що запис не дозволений. Автор вже вніс зміни в структуру файлів: в папках interfaces та types, ті що не перевикористовуються я так розумію по компонентах розкидано і вже створена одна загальна кнопка замість багатьох, далі не дивилася бо проект реально величезний! Це дуже інтерактивний та найбільший по об'єму пет-проект, який я бачила! Продовжуйте в тому ж дусі 👍

    • @MaksymRudnyi
      @MaksymRudnyi 2 дні тому

      Круто що автор відразу врахував зауваження і покращив проєкт.

  • @miha580
    @miha580 4 дні тому

    круто!

    • @MaksymRudnyi
      @MaksymRudnyi 4 дні тому

      Автор реально молодець. Передивився відео і виправив помилки

  • @lesan6866
    @lesan6866 5 днів тому

    Офігезне відео, чому воно мені раніше не попалось, тепер буду перероблювати всі svg у проєкті))) яробив як раз реакт компонентом... Бо як завжди дизайнер напридумував і хавер і зміну кольору від бєкграунду, короче дуже велике дякую!

  • @pillow6457
    @pillow6457 5 днів тому

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

  • @CodeBeep
    @CodeBeep 5 днів тому

    А як щодо того, що в проекті перемішані js i ts файли?

    • @MaksymRudnyi
      @MaksymRudnyi 5 днів тому

      На скільки я пам'ятаю, там лише сервіс воркер JS. Решта тайпсурипт. Той сервіс воркер може бути на JS. Тут нічого страшного. Може ще десь є і я не побачив?

    • @CodeBeep
      @CodeBeep 4 дні тому

      @@MaksymRudnyi так, там ще було, зараз не згадаю, але думаю 3-4 рази я бачив js файли

  • @anton2347
    @anton2347 6 днів тому

    Проект дуже схожий на проект від автора @javascriptmastery

  • @dimapopov5962
    @dimapopov5962 6 днів тому

    Картинки на фоні краще спростити, відволікають.

    • @MaksymRudnyi
      @MaksymRudnyi 6 днів тому

      На функціонал не впливають і то добре. Там з усім дизайном треба попрацювати.

  • @begemotovnet
    @begemotovnet 6 днів тому

    По поводу комментариев в файле конфигурации. Вот с оф. сайта "Alternatively, you can run biome init --jsonc to emit a biome.jsonc file instead."

    • @MaksymRudnyi
      @MaksymRudnyi 6 днів тому

      Знаю. Це вирішить лише питання коментарів. Різні параметри з змінні прокидати все рівно не можна. Хоча, може це і не потрібно.

  • @sandorium
    @sandorium 6 днів тому

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

    • @MaksymRudnyi
      @MaksymRudnyi 6 днів тому

      В .env потрібно їх писати. Тут головне потім в гіт не комітити це.

  • @O-L-1986
    @O-L-1986 6 днів тому

    Одна мова тута лишня)))) +1

    • @MaksymRudnyi
      @MaksymRudnyi 6 днів тому

      Що є то є)

    • @CodeBeep
      @CodeBeep 5 днів тому

      депрекейтед)) форевер))

  • @MrColins710
    @MrColins710 6 днів тому

    Круто, цікавий проект

  • @Kiyanti
    @Kiyanti 6 днів тому

    Це робота на який рівень? Мідл?

    • @avseniya22
      @avseniya22 6 днів тому

      думаю навіть мідл+ але все залежить від компаній. думаю такий достатній рівень розуміння архітектури коду це точно вже не джун!)

    • @MaksymRudnyi
      @MaksymRudnyi 6 днів тому

      Сеніоріті розробника визначають не по написаному коду. Такий код і джун може написати, головне знайти правильні уроки. Я бачив багато розумних джунів які писали код не набагато гірше мене. Потрібно враховувати досвід, уміння самостійно вирішувати задачі, планування на оцінювання часу та зусиль на задачі. І це ще без комунікації (навіть не з замовниками).

  • @BohdanKushnerov
    @BohdanKushnerov 7 днів тому

    Хочу щиро подякувати Максиму Рудному за детальний огляд мого проекту. Цей проект став моїм першим серйозним досвідом з технологіями TypeScript, Tailwind та Zustand. Спочатку я мав на меті реалізувати лише можливість реального часу переписки та авторизації, але поступово проект зростав, я додавав нові функціональні можливості та вдосконалював їх. Так проект виріс у масштабах, і я намагаюся підтримувати код в чистоті та порядку, періодично проводячи рефакторинг. Деякі рішення, які на той час здавались мені оптимальними, тепер потребують покращення або могли бути реалізовані по-іншому через брак досвіду. Деякі баги можуть стати помітними для мене лише через певний час користування, оскільки не завжди їх вдається виявити відразу. Завдяки цьому проекту я відчуваю свій професійний ріст і розвиток як розробника. Близько місяця тому я знайшов рубрику Show Your Code Saturday (SYCS). Твої огляди та поради стали для мене цінним джерелом натхнення і допомоги в удосконаленні навичок чистоти коду. Твій UA-cam канал є справжнім скарбом для новачків і професіоналів, де кожен може знайти щось корисне для себе. Твоя аналітика, поради та увага до деталей надихають на нові звершення та допомагають уникати помилок. Щиро дякую тобі за твій вклад у розвиток спільноти розробників!

    • @MaksymRudnyi
      @MaksymRudnyi 7 днів тому

      Дякую що поділились кодом. Мені дуже сподобався проєкт. Не зміг проаналізувати деталі, дуже вже багато коду і мало часу. Успіхів з рефакторінгом і професійним розвитком. Буду вдячний за позитивний відгук в LinkedIn. Він буде корисний обом. Хороший проєкт повинно побачити більше людей.

  • @boyywnkobe
    @boyywnkobe 7 днів тому

    сорі автор, але дизайн десь з 98 року)

    • @MaksymRudnyi
      @MaksymRudnyi 7 днів тому

      Дизайн такий собі, але це не має значення. Його змінити можна за день.

    • @BohdanKushnerov
      @BohdanKushnerov 7 днів тому

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

    • @boyywnkobe
      @boyywnkobe 7 днів тому

      @@BohdanKushnerov Круто, молодець!

    • @aleksandrsliusarenko2403
      @aleksandrsliusarenko2403 6 днів тому

      ​ @BohdanKushnerov Привіт! можеш глянути в сторону nx, а також юніт тестів. Nx звісно топово працює з ангуляром, але я тестив, і в реакті також є профіт в ізоляції кожної частини проєкту в окреми пакети, які самостійні і можна перевикористовувати будь-де. Наприклад, ти потім захочеш створити віджет чату і в тебе вже буде готова база з мікропакетів, обʼєднавши які можна досягнути поставленої мети (+ так буде легше тестувати проєкт, а nx дуже швидко це зробить для тих модулів, де були тільки зміни).

    • @BohdanKushnerov
      @BohdanKushnerov 6 днів тому

      @@aleksandrsliusarenko2403 Привіт! Я обов'язково зверну увагу на Nx та тестування. Вони дійсно можуть допомогти з ізоляцією та перевикористанням компонентів у проекті, особливо якщо буде достатньо часу для масштабування. Тести - це поки що моя слабка сторона, але я буду працювати над цим у найближчому майбутньому. Дякую за підтримку і чудову ідею!

  • @dmytrolisunov4073
    @dmytrolisunov4073 7 днів тому

  • @daryaaleksmak
    @daryaaleksmak 8 днів тому

    дуже дякую за відео!

  • @macon5696
    @macon5696 8 днів тому

    я грався з zustand не сподобалося пару моментів: 1) те, що є доступ до методів редюсера і ти можеш їх перевизначити 2) те що через відсутність провайдера з асинхронним перзістом відбувається 2 рендери спочатку, перший раз дефолтний стейт, а другий вже підвантажений з перзіста

    • @MaksymRudnyi
      @MaksymRudnyi 8 днів тому

      буду мати на увазі, дякую. Більшість кого питав і хто відписував в коментарях то в захваті. Набагто простіше від Redux (toolkit).

  • @dmitrykovalchuk6549
    @dmitrykovalchuk6549 8 днів тому

    Ти сам себе бачив ? Нудота ??? Скрінів пару показати, ні?

    • @MaksymRudnyi
      @MaksymRudnyi 8 днів тому

      Красавчик). Як мінімум тобі відомий подобаються. Під кожним залишаєш коментар. Прямо найбільший фанат. Скріни у повному відео.

    • @dmitrykovalchuk6549
      @dmitrykovalchuk6549 8 днів тому

      @@MaksymRudnyi Я просуваю твій найнудніший канал про айті розробку! Цінуй!😄

    • @MaksymRudnyi
      @MaksymRudnyi 8 днів тому

      Коли буде мільйон підписників - випишу грамоту))

    • @dmitrykovalchuk6549
      @dmitrykovalchuk6549 8 днів тому

      @@MaksymRudnyi Дякую! Спробуй тільки не виписати!

  • @sandorium
    @sandorium 8 днів тому

    23:05 це ви дурню сказанули, що MUI дно. якщо хтось гівнокодить інлайновими стилями то ви робите висновок що ліба дно? MUI дуже продумана, зручна і потужна в деяких випадках. не ідеальна звісно. документація прекрасна. є хедлес версія. я стилізую через scss модулі і через classes пропс. все ок. стилізується кастомізується 99% елементів. читаємо УВАЖНО розділ 'Style library interoperability'. головне ліба потенційно нівелює гівнокодні велосипеди бо інкапсулє купу нюансів. але це знову таки залежить від того чи уважно читали доку чи ні. більшість звісно не читає, як мабуть і автор який робить дурні висновки. я би радив би MUI але якщо є бажання розбиратися. але більшість нагівнокодили і пішли далі собі.

  • @KlinovAS
    @KlinovAS 8 днів тому

    Вам чим спінер не догодив? Японці з 1980 року змагаються на швидкість робомишами, а ми будемо в 2024 році змагатися хто швидше поформатує код? Нема чим зайнятись компаніям, окрім як код форматувати? Це плінтус.

    • @MaksymRudnyi
      @MaksymRudnyi 8 днів тому

      Це не плінтус а гроші, при чому великі. Час програмістів не безкоштовний. І кожен раз ждати доки пройде лінтинг і форматування перед комітом - це довго. Здається що пару секунд не багато, але доки запуститься процес розробник уже переключив контекст і пішов або каву пити або на перекур, або ще куди. А помітити треба часто. Лінтинг на Ci/CD - серверний час теж не безкоштовний. На кожному інструменті економія кілька секунд і виходить пристойна сума. Не забувайте що час множимо на розмір команд і компаній. Хай японці страждають чим хочуть. Ми тут працюємо і гроші заробляємо. Якщо ці інструменти безтолкові, то чому ми уже не пишемо в Notepad++. Шикарна прога була. І не треба було всяких підказок, форматування, лінтерів.

    • @KlinovAS
      @KlinovAS 8 днів тому

      @@MaksymRudnyi йптхнштйн.. напишіть IDE, який буде зрозумілий навіть для дурних, щоб код для машини був чистий, а для всіх інших з літературними творами на 100 сторінок, щоб без потреби були класи там де їх не повинно бути, але вони є заради зручності, бо теперішній IDE в цьому випадку дуже допомагає. Нехай IDE завжди допомагає. Ниряйте з в глибину графічних блоків, до програмних кодів з поясненнями та грамотним відображенням. А для пк залиште простий швидкий код. Бо заки ви сповідуєте якийсь плінтус, по факту всі клієнти отримують повільні продукти. А у випадку ImageCMS, який був красиво написаний класами, той взагалі потух і плакав гаманець когось вже тепер невідомого. Вже байдуже який красивий на вигляд код

    • @codokit
      @codokit 2 дні тому

      Просто в JS багато платять, тому люди вигадують нові челенджи. :)

    • @codokit
      @codokit 2 дні тому

      @@MaksymRudnyi > Якщо ці інструменти безтолкові, то чому ми уже не пишемо в Notepad++. Шикарна прога була. І не треба було всяких підказок, форматування, лінтерів. Доречі, залюбки б писав в Notepad++, якщоб мова дозволяла. :) Наприклад, PHP взагалі не потрібно транспілювати. Економія!

  • @dimitritarnoruzki1032
    @dimitritarnoruzki1032 8 днів тому

    6 з 8 це повинно бути десь b2- c1. Хоча одна hr попросила мене переписати моє резюме і оцінити свої навички в зірочках

    • @MaksymRudnyi
      @MaksymRudnyi 8 днів тому

      А вона не казала причину цього? Я просто не розумію сенсу в оцінюванні у зірочках. З точки зору UI і дизайну це може бути красиво, але з точки зору UX - невдало. Неоднозначність. Треба вигадувати точний рівень. Замовнику в штатах ж не скажеш що в кандидата 6 зірочок з 8.

    • @dimitritarnoruzki1032
      @dimitritarnoruzki1032 8 днів тому

      @@MaksymRudnyi якось не зручно було питати. Правду кажучи, в моему резюме не було оцінок взагалі. В принципі завжди можно перевести зірочки в бали або відсотки. Хоча hr у Німеччині це ще та пісня. ;)

  • @d_prschk
    @d_prschk 8 днів тому

    Дякую, дуже інформативно. Хотілось би ще окреме відео по eslint, prettier, husky

    • @MaksymRudnyi
      @MaksymRudnyi 8 днів тому

      Це буде. Трішки пізніше.

    • @MisterSimOfficial
      @MisterSimOfficial 4 дні тому

      @@MaksymRudnyi і було б круто з eslint 9.5v. з ts

  • @wpdew
    @wpdew 9 днів тому

    Рідненькою. Дякую.

    • @MaksymRudnyi
      @MaksymRudnyi 8 днів тому

      Завжди рідненькою)

  • @dmytrolisunov4073
    @dmytrolisunov4073 9 днів тому

  • @alexkonoplian
    @alexkonoplian 9 днів тому

    Якщо є формат при збережені файлу і підказки прямо під час кодингу - то можна юзати

    • @VasylBatih
      @VasylBatih 9 днів тому

      ну якщо в ide не налаштували при збереженні файлу то можна взяти ще + husky і на pre-commit зробити форматування, буде ідеально

    • @alexkonoplian
      @alexkonoplian 9 днів тому

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

    • @MaksymRudnyi
      @MaksymRudnyi 8 днів тому

      Підказки є. Плагіни поставити і працює добре. При збереженні напевно є. Це налаштовується в IDE. Тут питання чи це потрібно. Я, наприклад, не зберігаю. IDE має саме це робити. Як на мене то зручніше щоб при коміті все фіксилось.

    • @MaksymRudnyi
      @MaksymRudnyi 8 днів тому

      А як можна віддати кривий код перед комітом якщо налаштований хаскі і є стандартні правила форматування.

  • @avseniya22
    @avseniya22 10 днів тому

    PHP)) ніяких дізлайків тільки лайк! краще ніж JAVa

    • @MaksymRudnyi
      @MaksymRudnyi 8 днів тому

      Точно що краще за Java

  • @user-dv6zu1td2z
    @user-dv6zu1td2z 10 днів тому

    Привіт, зроби будь ласка відео або шорт з виправленнями. Цікаво глянути на результат;)

    • @MaksymRudnyi
      @MaksymRudnyi 10 днів тому

      Привіт. Відео уже є ua-cam.com/video/m8IOKa65BjQ/v-deo.html Тут більш огляд помилок. В мене не хватило сил на фікси. Там багато роботи.

  • @Allegro7.7.7.
    @Allegro7.7.7. 10 днів тому

    Дякую. Але щось виникли проблеми з init(....не хоче і жодної помилки...

    • @MaksymRudnyi
      @MaksymRudnyi 10 днів тому

      Дивно. Треба розбиратися. Може нода не тієї версії або щось оновити треба.

  • @longinvs
    @longinvs 10 днів тому

    Це в якому ECMAScript прописаний BiomeJS?

    • @MaksymRudnyi
      @MaksymRudnyi 10 днів тому

      Це не в екмаскріпті. Просто окремий інструмент написаний на Rust. Заточений під веб розробку. Добре працює з Typescript та JS

  • @dmitrykovalchuk6549
    @dmitrykovalchuk6549 10 днів тому

    Нах ці всі нові теги. Їх і так як гівна вже. Більше половини потрібно видалити.

  • @dmitrykovalchuk6549
    @dmitrykovalchuk6549 10 днів тому

    Який же ти нудний тип, це пздц! Дивився колись твої відоси по реакту. Щось намолов, не зрозумів сам і зїхав з теми. Не приведи Боже мати такого начальника.

    • @MaksymRudnyi
      @MaksymRudnyi 10 днів тому

      Не хвилюйся, не буде. Таких токсичних як ти на роботу не беруть.

    • @dmitrykovalchuk6549
      @dmitrykovalchuk6549 10 днів тому

      @@MaksymRudnyi Та я працюю на проекті

  • @vikaKnow
    @vikaKnow 10 днів тому

    Корисна інформація, дякую😊 Коротко і головне, без води. Цікаво дивитись, особливо з лайвкодінгом.

  • @user-kh8zm3on2b
    @user-kh8zm3on2b 10 днів тому

    Вітаю, а ви могли б записати відео, як коректно зберігати обʼєкти в redux? Маю на увазі не прості типи (string, number), а наприклад File та схожі. Через react context викликаються зайві render

    • @MaksymRudnyi
      @MaksymRudnyi 10 днів тому

      Реакт контекст звісно викликатиме рирендери усіх компонентів які підписані на цей контекст. Дивно що треба зберігати файли в контексті. Це не зовсім правильний підхід. Як мінімум я поки не бачу сенсу (він може і є). Найближчим часом такого відео не буде, не планую.

    • @sandorium
      @sandorium 6 днів тому

      рідакс це стейт менеджер. файли та інше треба зберігати на сервері. а взагалі в браузері є indexedDB почитайте його апі або у гпт спитайте

  • @andriiauziak1178
    @andriiauziak1178 10 днів тому

    А другий шорт з поясненнями, як правильно, буде?🙃

    • @MaksymRudnyi
      @MaksymRudnyi 10 днів тому

      А в мене є ціле відео про це. Одним шортсом не пояснити . Відео ua-cam.com/video/5r9sN5Yz79A/v-deo.html

  • @user-rp2st3vi1k
    @user-rp2st3vi1k 10 днів тому

    Привіт. Я автор цього коду. Дякую за розбір, це важливо для мене, правки вже вношу. Шкода, що сайт ліг саме перед розбором, та вже він працює. Скомпільований код я не копіював, а проганяв стилі через автопрефіксер, для кроссбраузерності. Просто не знав, що префікси додаються автоматично коли код компілюється в JS. Таймер на анімацію лоадера, на 1 сек., робив для того, щоб анімація трошки затрималась. Бо без затримки анімація відображається на долі секунди, виглядало не дуже. Фішку з відніманням брейкпоінтів 0.02рх брав на бутстрапі, та й на деяких сайтах по фронтенду це є як приклади брейкпоінтів. Сайт спочатку робився для выдображення на GitHub Pages, а там працює тільки HashRouter. Але на GH Pages сайт працював не дуже, тож я перейшов на Vercel, і HashRouter на BrowserRouter не змінив, але зараз вже змінив. Файл «.env», з API ключем, я не прибирав через те, що це навчальний проект, і в реальному проекті, звичайно, я би його не виставляв, а ще без нього не працював би сайт. Зараз я його прибрав з гіта, виявляється що на Vercel його можна завантажити в проект окремо. Ще раз дякую за розбір.

  • @dmitrykovalchuk6549
    @dmitrykovalchuk6549 10 днів тому

    Ти найнудніший. Не хотів би з тобою працювати. Задрочиш просто. Ще вдягни вишиваночку

  • @doomor
    @doomor 11 днів тому

    пишу: ще дивлюсь, заінтригований ))))) дуже гарний аналіз!

  • @user-fb8bw7rx4m
    @user-fb8bw7rx4m 11 днів тому

    Професійний огляд і фікс. Дякую!

    • @MaksymRudnyi
      @MaksymRudnyi 11 днів тому

      Дякую, дуже приємно.

  • @BohdanKushnerov
    @BohdanKushnerov 11 днів тому

    @MaksymRudnyi, дякую за змістовний огляд. Хочу також підтримати автора репозиторія за те, що він взагалі поділився своїм кодом. Це чудовий крок, який допоможе йому покращити якість свого коду та отримати безцінний досвід. Давайте також підтримаємо @MaksymRudnyi лайком і коментарем за його зусилля, цікаві новинки та корисний контент, який він створює для нас.

    • @MaksymRudnyi
      @MaksymRudnyi 11 днів тому

      Дякую. Дуже приємно. Сподіваюсь автор використає цю можливість.