Dev Routine
Dev Routine
  • 14
  • 30 024
Навчись використовувати CANVAS в REACT | REACT KONVA
#frontend #canvas #react #konva
Привіт, я Нік і ти на каналі Dev Routine!
Посилання на проект з відео: github.com/SemX74/canvas-excalidraw-clone-tutorial
Стеж за нами в телеграмі: (Корисні пости і меми): t.me/+giZ-rijhq7BiZGEy
Мій інста: kose_7
Лайк та коментар, якщо відео було тобі корисно!
Таймкоди:
0:00 - Інтро
0:51 - Сетап проекта
2:15 - Базові поняття
4:11 - Детальний розгляд фігур
8:21 - Робимо тулбар
11:53 - Паннінг
16:06 - Концепція створення фігур
19:22 - Відображення фігур
20:48 - Продовження написання логіки створення
38:43 - Логіка селекта
41:21 - Мінорні моменти
48:00 - Заключення
Переглядів: 1 283

Відео

ТОПОВА МОДАЛКА на REACT за 6 хвилин
Переглядів 2,4 тис.Місяць тому
#frontend #development #react Привіт, я Нік ти на канал Dev Routine! Посилання на проект з відео: github.com/SemX74/modal-tutorial Стеж за нами в телеграмі: (Корисн пости меми): t.me/ giZ-rijhq7BiZGEy Дивись наш тікток: www.tiktok.com/@dev.routine Лайк та коментар, якщо відео було тоб корисно! Таймкоди: 0:00 - Інтро 0:18 - Пишу модалку 6:11 - Заключення
Пиши КОМПОНЕНТИ як SENIOR | React Compound Component Pattern
Переглядів 14 тис.Місяць тому
#frontend #development #react Привіт, я Нік ти на канал Dev Routine! Посилання на проект з відео: github.com/SemX74/compound-component-tutorial Стеж за нами в телеграмі: (Корисн пости меми): t.me/ giZ-rijhq7BiZGEy Дивись наш тікток: www.tiktok.com/@dev.routine Лайк та коментар, якщо відео було тоб корисно! Таймкоди: 0:00 - Інтро 0:20 - Вступ 1:07 - Пояснення проблеми 2:02 - Рефакторимо компон...
Стань БОГОМ Формочок | REACT HOOK FORM + ZOD
Переглядів 2,6 тис.Місяць тому
#frontend #development #react Привіт, я Нік ти на канал Dev Routine! Посилання на проект з відео: github.com/SemX74/react-hook-form-tutorial Стеж за нами в телеграмі: (Корисн пости меми): t.me/ giZ-rijhq7BiZGEy Дивись наш тікток: www.tiktok.com/@dev.routine Лайк та коментар, якщо відео було тоб корисно! Таймкоди: 0:00 - Інтро 0:31 - Вступ 1:05 - Як варіанти розглянемо? 1:19 - Базовий функціон...
Хто такий ФРОНТЕНД РОЗРОБНИК? | Вся суть фронтенда💀
Переглядів 8612 місяці тому
#frontend #development #фронтенд Привіт, я Нік ти на канал Dev Routine! Стеж за нами в телеграмі: (Корисн пости меми): t.me/dev_routine Дивись наш тікток: www.tiktok.com/@dev.routine Лайк та коментар, якщо відео було тоб корисно! Таймкоди: 0:00 - Інтро 0:33 - Моя історія 1:07 - Хто такий фронтенд розробник? 1:46 - Мови програмування 2:56 - Перш співбесіди 3:24 - Момент Х 3:37 - Результати 4:3...
ВБИВЦЯ Chrome? Кращий Браузер для Програміста | Arc Browser🤖
Переглядів 2,7 тис.2 місяці тому
#frontend #development Привіт, я Нік ти на канал Dev Routine! Посилання на Arc: arc.net/gift/b047c09 Зараз Arc доступний тільки на Mac, але розробники часто роздають посилання на бета-тест Windows версії. Крім того ви можете зареєструватися на цей тест самостійно. Як тільки воно мен дістанеться ще раз, одразу викладу в наш телеграм ✨ Стеж за нами в телеграмі: (Корисн пости меми): t.me/dev_rou...
ПЕРШІ КРОКИ ФРОНТА НА ПРОЕКТІ
Переглядів 4252 місяці тому
#frontend #development Привіт, я Нік ти на канал Dev Routine! Стеж за нами в телеграмі: (Корисн пости меми): t.me/dev_routine Дивись наш тікток: www.tiktok.com/@dev.routine Лайк та коментар, якщо відео було тоб корисно! Таймкоди: 0:00 - Інтро 0:18 - Дисклеймер 0:22 - Онбординг 0:40 - Що потрібно зробити перш за все 1:18 - Ваш перш таски 1:47 - Труднощ на проектах 2:21 - Бекендери 3:21 - Про л...
REACT HOOKS | Гайд по хукам React-а
Переглядів 8724 місяці тому
#react #reacthooks #typescript #javascript #reactjs React Docs: react.dev/reference/react/hooks Привіт, я Нік ти на канал Dev Routine! Стеж за нами в телеграмі: (кидаєм туди меми анонсуємо відео): t.me/dev_routine Лайк та коментар, якщо відео було тоб корисно! Таймкоди: 0:00 - Інтро 0:30 - Правила використання хуків 1:48 - useState 2:57 - useEffect 4:40 - useRef 5:50 - useContext 7:03 - useMe...
USECALLBACK НА ПАЛЬЦЯХ | React useCallback
Переглядів 5706 місяців тому
#react #usecallback #memo #typescript #javascript #reactjs #vite Hey, I'm Nick and welcome to Dev Routine channel! Subscribe to our Telegram channel (memes there): t.me/dev_routine Like or comment if you find that video helpful!
PANNING & CREATING SHAPES | REACT KONVA
Переглядів 8826 місяців тому
#react #reactkonva #typescript #javascript #reactjs #nextjs Hey, I'm Nick and welcome to Dev Routine channel! Subscribe to our Telegram channel (memes there): t.me/dev_routine Like or comment if you find that video helpful!
MASTERING REACT CANVAS | REACT KONVA
Переглядів 3,5 тис.7 місяців тому
#react #reactkonva #typescript #javascript #reactjs #nextjs Hey, I'm Nick and welcome to Dev Routine channel! Like or comment if you find that video helpfull!

КОМЕНТАРІ

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

    from india with <3

  • @user-tc1go4vm8k
    @user-tc1go4vm8k 6 днів тому

    куди пропав відос з поповером?

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

    Тема цікава, а от в подачі матеріалу хочеться послідовності, щоб компоненти та бібліотеки на брались нізвідки

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

      Думаю це б було дуже довго, основний момент був сконцентрований на канвасі

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

      @@itsDevRoutine не зовсім, можна як у того ж Web Dev Simplified - частину коду він не пише, а просто вставляє й коротко пояснює що і як. Таким чином зберігається continuity

  • @alexunderivanov1502
    @alexunderivanov1502 21 день тому

    К сожалению, если вы используете Windows, то даже не стоит пробовать. Программа сильно урезана, и многих функций, о которых он говорит, просто нет.

  • @user-lb6lq5yh5q
    @user-lb6lq5yh5q 24 дні тому

    Чел ты просто гений...

  • @ALeXSagittarius
    @ALeXSagittarius 25 днів тому

    а для створення панелей з кнопками теж якесь готові рішення використано? чи все створювалось руками?

  • @BazliMax
    @BazliMax 25 днів тому

    Дякую за відео

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

    Дуже цікаве відео! Яка в тебе тема VSCode?

    • @itsDevRoutine
      @itsDevRoutine 25 днів тому

      Дякую! Це CodeSandbox Black у виконанні Ziady Mubaraq. Використовую вже років так 2)

  • @ALeXSagittarius
    @ALeXSagittarius 26 днів тому

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

    • @itsDevRoutine
      @itsDevRoutine 26 днів тому

      Привіт! Все це є в цій бібліотеці. Ось посилання, це називається "Трансформер" konvajs.org/docs/react/Transformer.html Це окрема тема, тут дуже багато є аспектів які можна розглянути. Дуже корисна штука якщо потрібно переміщати одразу кілька фігур, повертати їх або зменшувати їхній розмір. Для картинок потрібно написати свій хук, якщо цікаво - напиши в наш телеграм, я тобі скину сніпет коду

    • @ALeXSagittarius
      @ALeXSagittarius 26 днів тому

      @@itsDevRoutine добре, дякую

  • @romanroki7528
    @romanroki7528 26 днів тому

    Привіт дуже круте відео а є в тебе в планах зробити якесь відео по авторизації?

    • @itsDevRoutine
      @itsDevRoutine 26 днів тому

      Дякую! На рахунок авторизації: можеш описати що саме тебе цікавить (тп. валідація, верстка, запити ітд.)

    • @romanroki7528
      @romanroki7528 26 днів тому

      Ну найбільше зараз напевно запити і валідація

    • @romanroki7528
      @romanroki7528 26 днів тому

      Знаєш по типу як є бекенд і ми маєш створити нового юзера і там відправити запрос на бек і тд. Щось з такого плану

  • @user-kb7bp4wc8p
    @user-kb7bp4wc8p 26 днів тому

    За Подоляка окреме дякую))

    • @itsDevRoutine
      @itsDevRoutine 26 днів тому

      Легенда знайшла мем

  • @oleksandr.stetsiuk
    @oleksandr.stetsiuk 26 днів тому

    Корисне відео. Дякую ❤

  • @MykhSerh
    @MykhSerh 26 днів тому

    Дуже цікаво і корисно. У мене як раз була потреба в схожій фічі. Твої відео дуже допомагають. Дякую!!!

  • @danyakulazhenko6400
    @danyakulazhenko6400 27 днів тому

    Один з найкращих каналів українською, круті відео) Не зупиняйся!

  • @sergkyrios
    @sergkyrios 27 днів тому

    Прийдеться відложити просмотр, ще до Реакту не дійшов

  • @kashchenko_hw8855
    @kashchenko_hw8855 27 днів тому

    годнота!

  • @duckmetr
    @duckmetr 27 днів тому

    Рік тому робив гру Line & Dots на konva, що б потренуватись в react

  • @CryptoBro7
    @CryptoBro7 27 днів тому

    Найкращий гайд по Canvas в React в Інтернеті 🍋

  • @chevstyle
    @chevstyle 27 днів тому

    Так як в хуці useModal є стейт, а в свою чергу хук лежить в самому верху, хіба це не означає, що буде рендеритися геть все?

    • @itsDevRoutine
      @itsDevRoutine 27 днів тому

      в тебе в любому випадку буде стейт де ти будеш хендлити стан модалки в самому верху - все буде ререндиритись. В любому випадку всі компоненти будуть в memo в React 19, і цієї проблеми не буде

  • @hasst9261
    @hasst9261 28 днів тому

    Раджу контент фуйлу readme в репо замінити на щось більш актуальне до теми

  • @Broman-er4ni
    @Broman-er4ni Місяць тому

    Маю питання з приводу порталу. Якщо використовувати Link(react-router-dom) в середині модалки з порталом, то свариться, що подалка поза контекстом чи щось таке. Чи є ідея як то пофіксити?

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      спробуй useNavigate() з тієї ж ліби

    • @Broman-er4ni
      @Broman-er4ni 29 днів тому

      @@itsDevRoutine ну як варіант виглядає непогано, дякую.

  • @YevhenZhuchenko
    @YevhenZhuchenko Місяць тому

    Використовую вже більше ніж пів року. Топ браузер

  • @mihal_music
    @mihal_music Місяць тому

    Це інтересний хук, але варіант for = id в HTML мені більше по душі :)

  • @vty4261
    @vty4261 Місяць тому

    Як ж в мене горить від цих index файлів. Ну кааааамон, краще один додатковий файл замість щоб двічі написати слово Modal? Вам що руки від того відсихають?? Тим більше ж авто імпорти є в ВСКоді. Чи налаштуйте собі аліаси...Крик душі просто

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      кожному свій смак і колір

  • @ValeriiLutiy
    @ValeriiLutiy Місяць тому

    Якщо когось бентежить літера "z", то використовуйте yup

  • @user-tn3uo6tr3t
    @user-tn3uo6tr3t Місяць тому

    Дякую за контент. Прекрасна модалка. Проте інколи все ж швидше використати вже готову, або свою яку колись вже створив, або чиюсь.

  • @user-yq3pc8th1c
    @user-yq3pc8th1c Місяць тому

    Я хочу від тебе дітей

  • @wotblitz542
    @wotblitz542 Місяць тому

    Скільки проводите часу за роботою/розвагами(ірами, пс 5)?

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      робота +- 10 годин відео - решту часу зараз на жаль немає часу на ігри(

  • @victormyha882
    @victormyha882 Місяць тому

    Оуу шиит, крутезний відос. Не знав про такий спосіб написання ui, виглядає бомбезно, буду юзати Дякую!

  • @user-wr7wk3fg4v
    @user-wr7wk3fg4v Місяць тому

    Аплодую, підписка та лайк зразу, дуже вчасно, продовжуй знімати хороші відео❤

  • @GazdaZuBB
    @GazdaZuBB Місяць тому

    не вчи людей поганого. не "емайл", а "імейл"

    • @GazdaZuBB
      @GazdaZuBB Місяць тому

      і "схему" туди ж

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      душніла, це не урок англійської

  • @dennyfedyna9707
    @dennyfedyna9707 Місяць тому

    Будуть ще розгляди патернів?)

  • @boyywnkobe
    @boyywnkobe Місяць тому

    гарно

  • @ianach
    @ianach Місяць тому

    «витративши 100500 годин на вивчення бібліотек які виходять частіше ніж я вихожу на вулицю» 😂🤣

  • @user-wb5nv8cp9f
    @user-wb5nv8cp9f Місяць тому

    В розділі "Найголовніша фіча" буквально не має жодної нової фічі. Ну і "вбивця chrome" існує ще з 2004-го року)

  • @alexdorokhov3483
    @alexdorokhov3483 Місяць тому

    Красавчик! Дуже приємно тебе слухати!

  • @black_light
    @black_light Місяць тому

    Дякую за модалочку. Заюзав в петпроджект)

  • @seva6095
    @seva6095 Місяць тому

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

  • @analdestr0yer
    @analdestr0yer Місяць тому

    Нахіба це взагалі треба, якийсь манкі-кодинг

    • @denys.matsevych
      @denys.matsevych Місяць тому

      де саме манкі код?

    • @analdestr0yer
      @analdestr0yer Місяць тому

      @@denys.matsevych У відео. Ви дивились? Все там зрозуміло?

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      Якщо вже критикуєш, пропонуй як зробити краще будь ласка і скажи що саме не зрозуміло, анал дестроєр В дописі є посилання на проект якщо щось пропустив, там можна розглянути код детальніше і подивитись як працюють деталі які ти не зрозумів

  • @sergritlviv
    @sergritlviv Місяць тому

    Коментар на підтримку українського контенту!

  • @AndrewFloatrx
    @AndrewFloatrx Місяць тому

    лайк від помідора... правда переглянув на х2, але ніби косяків не було ))) ну і мінорні зауваження: обгортати можемо не тільки в div, а й призначений для цього тег dialog (є такий в html); також вічна наша проблема з "стрибанням" контенту на 3:55 вирішується в css: `scrollbar-gutter: stable;` (а ще можна написати щось накшталт body:has(.modal){ overflow: hidden; } і буде працювати так само ); в tailwind є compound класс який призначений для overlay: inset-X; не зустрічав на практиці, щоб робили для Portal окремий компонент, перший варіант був більш канонічний; по анімаціям рекомендую глянути framer-motion (то реально махіна можливостей)! Удачі.

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      Чувак я безмежно вдячний за твої коменти, все записую. Не так багато маю досвіду але стараюсь поресьорчити те що говорю і донести у цікавому форматі. Ще раз. Дякую💪 p.s. Бачив у mantine портал винесений в схожий компонент, тому й сам так часто роблю :)

    • @ALeXSagittarius
      @ALeXSagittarius 24 дні тому

      @@itsDevRoutine а чи треба було там оверфлоу міняти? поінтер-евентсами не обійтись?

  • @bozhokvictor7740
    @bozhokvictor7740 Місяць тому

    Ти крутий! Дякую за якісний контент українською!

  • @liganshow
    @liganshow Місяць тому

    Сказал react.createPortal, а импортнул из react-dom. Trololo😂

    • @liganshow
      @liganshow Місяць тому

      Чувак. У тебя еще когда ты добавил контента в основной странице и появился скрол, то когда ты тоглил модалку, контент прыгал, так как овервлоу хиден убирал скрол и потом он снова появлялся , что мелочь но ебет глаз все равно)

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      бля, я записую це в 1-2 ночі після роботи, не души 😂

    • @user-yk6iq5hn4d
      @user-yk6iq5hn4d Місяць тому

      ​@@itsDevRoutine можно использовать scrollbar-gutter: stable для body, контент перестанет прыгать

  • @rusoiob5946
    @rusoiob5946 Місяць тому

    броскі, що за тема у VSCode? 💅

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      Це CodeSandbox Black у виконанні Ziady Mubaraq. Використовую вже років так 2)

    • @rusoiob5946
      @rusoiob5946 Місяць тому

      @@itsDevRoutine дякую 🤗♥️

  • @andriyleliv4608
    @andriyleliv4608 Місяць тому

    Класно, моцний лайк. Є така цікава річ коли в проєкті потрібно використовувати різнотипні модалки, які викликаються з різних місць і потрібно якось їх менеджити (через глобал стейт і так далі, також однотипних може бути кілька одночасно на екрані - але з різним контентом. Може цікаво буде таке зробити - я думаю глядачі бyдуть в захваті.

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      дякую за ідеї та за лайк!

  • @vseslavr
    @vseslavr Місяць тому

    Дякую за класний контент! Лайк, підписка, дзвіночок) Як щодо того, щоб зробити ультимативний гайд на react-hook-form + zod? Типу дуже складна форма з купою залежних один від одного інпутів, екзотичними складними валідаціями, асинхроннисми валідаціями, запобігання ререндерів (навіщо тоді цей watch, якщо через нього все ререндериться?), оптимізація, типізація, асинхронне завантаження даних щоб предзаповнети форму, multiple steps і т.д. ;)

  • @ostap787
    @ostap787 Місяць тому

    react.FC це застарілий і не рекомендований спосіб для типізації

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      Обгрунтуй свою думку будь ласка

    • @ostap787
      @ostap787 Місяць тому

      @@itsDevRoutine загугли Since TypeScript 5.1, React.FC is now "fine"

  • @resoursa
    @resoursa Місяць тому

    🔥🔥🔥🔥

  • @user-yy4zu5nr2b
    @user-yy4zu5nr2b Місяць тому

    Підкажіть будь ласка йолопу, як у ньому увімкнути соловьйну?

    • @itsDevRoutine
      @itsDevRoutine Місяць тому

      мені здається там ще немає підтримки різних мов) У всякому випадку будемо чекати ахах

    • @user-pq7wl3dd9o
      @user-pq7wl3dd9o Місяць тому

      Лише англійська

  • @hasst9261
    @hasst9261 Місяць тому

    Нормальний контент