Dev Routine
Dev Routine
  • Видео 14
  • Просмотров 29 961
Навчись використовувати 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 282

Видео

ТОПОВА МОДАЛКА на 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
Просмотров 8806 месяцев назад
#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,4 тыс.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 День назад

    from india with <3

  • @user-tc1go4vm8k
    @user-tc1go4vm8k 5 дней назад

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

  • @devjourney8583
    @devjourney8583 5 дней назад

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

    • @itsDevRoutine
      @itsDevRoutine 3 дня назад

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

    • @devjourney8583
      @devjourney8583 3 дня назад

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

  • @alexunderivanov1502
    @alexunderivanov1502 20 дней назад

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

  • @user-lb6lq5yh5q
    @user-lb6lq5yh5q 23 дня назад

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

  • @ALeXSagittarius
    @ALeXSagittarius 24 дня назад

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

  • @BazliMax
    @BazliMax 24 дня назад

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

  • @d_prschk
    @d_prschk 24 дня назад

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

    • @itsDevRoutine
      @itsDevRoutine 24 дня назад

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

  • @ALeXSagittarius
    @ALeXSagittarius 25 дней назад

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

    • @itsDevRoutine
      @itsDevRoutine 25 дней назад

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

    • @ALeXSagittarius
      @ALeXSagittarius 25 дней назад

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

  • @romanroki7528
    @romanroki7528 25 дней назад

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

    • @itsDevRoutine
      @itsDevRoutine 25 дней назад

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

    • @romanroki7528
      @romanroki7528 25 дней назад

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

    • @romanroki7528
      @romanroki7528 25 дней назад

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

  • @user-kb7bp4wc8p
    @user-kb7bp4wc8p 25 дней назад

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

    • @itsDevRoutine
      @itsDevRoutine 25 дней назад

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

  • @oleksandr.stetsiuk
    @oleksandr.stetsiuk 25 дней назад

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

  • @MykhSerh
    @MykhSerh 25 дней назад

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

  • @danyakulazhenko6400
    @danyakulazhenko6400 25 дней назад

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

  • @sergkyrios
    @sergkyrios 26 дней назад

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

  • @kashchenko_hw8855
    @kashchenko_hw8855 26 дней назад

    годнота!

  • @duckmetr
    @duckmetr 26 дней назад

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

  • @CryptoBro7
    @CryptoBro7 26 дней назад

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

  • @chevstyle
    @chevstyle 26 дней назад

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

    • @itsDevRoutine
      @itsDevRoutine 26 дней назад

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

  • @hasst9261
    @hasst9261 27 дней назад

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

  • @Broman-er4ni
    @Broman-er4ni 29 дней назад

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

    • @itsDevRoutine
      @itsDevRoutine 29 дней назад

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

    • @Broman-er4ni
      @Broman-er4ni 28 дней назад

      @@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 23 дня назад

      @@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 Месяц назад

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