- Видео 14
- Просмотров 29 961
Dev Routine
Добавлен 14 ноя 2023
Привіт друже, вітаю тебе на нашому ламповому каналі, де ми обкашлюємо питаннячка які повʼязані з Веб розробкою та айті в цілому.
Почувайся як вдома🌸
Почувайся як вдома🌸
Навчись використовувати 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 - Заключення
Привіт, я Нік і ти на каналі 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!
from india with <3
куди пропав відос з поповером?
Тема цікава, а от в подачі матеріалу хочеться послідовності, щоб компоненти та бібліотеки на брались нізвідки
Думаю це б було дуже довго, основний момент був сконцентрований на канвасі
@@itsDevRoutine не зовсім, можна як у того ж Web Dev Simplified - частину коду він не пише, а просто вставляє й коротко пояснює що і як. Таким чином зберігається continuity
К сожалению, если вы используете Windows, то даже не стоит пробовать. Программа сильно урезана, и многих функций, о которых он говорит, просто нет.
Чел ты просто гений...
а для створення панелей з кнопками теж якесь готові рішення використано? чи все створювалось руками?
все руками 🙌
Дякую за відео
Дуже цікаве відео! Яка в тебе тема VSCode?
Дякую! Це CodeSandbox Black у виконанні Ziady Mubaraq. Використовую вже років так 2)
А є готове рішення для імпорту картинок і трасформації їх, а саме 9-точкова рамка, за маркери якої можна тягати і змінювати розмір як пропорційно, так і по одній з осей, крутити, переміщати... стандартна трансформація в багатьох графічних редакторах. А ще кроп, що б можна було приховати частини картинки з боків.
Привіт! Все це є в цій бібліотеці. Ось посилання, це називається "Трансформер" konvajs.org/docs/react/Transformer.html Це окрема тема, тут дуже багато є аспектів які можна розглянути. Дуже корисна штука якщо потрібно переміщати одразу кілька фігур, повертати їх або зменшувати їхній розмір. Для картинок потрібно написати свій хук, якщо цікаво - напиши в наш телеграм, я тобі скину сніпет коду
@@itsDevRoutine добре, дякую
Привіт дуже круте відео а є в тебе в планах зробити якесь відео по авторизації?
Дякую! На рахунок авторизації: можеш описати що саме тебе цікавить (тп. валідація, верстка, запити ітд.)
Ну найбільше зараз напевно запити і валідація
Знаєш по типу як є бекенд і ми маєш створити нового юзера і там відправити запрос на бек і тд. Щось з такого плану
За Подоляка окреме дякую))
Легенда знайшла мем
Корисне відео. Дякую ❤
Прошу!
Дуже цікаво і корисно. У мене як раз була потреба в схожій фічі. Твої відео дуже допомагають. Дякую!!!
Один з найкращих каналів українською, круті відео) Не зупиняйся!
дякую!
Прийдеться відложити просмотр, ще до Реакту не дійшов
годнота!
дякую!
Рік тому робив гру Line & Dots на konva, що б потренуватись в react
звір💣
Найкращий гайд по Canvas в React в Інтернеті 🍋
дякую!🤟🏽
Так як в хуці useModal є стейт, а в свою чергу хук лежить в самому верху, хіба це не означає, що буде рендеритися геть все?
в тебе в любому випадку буде стейт де ти будеш хендлити стан модалки в самому верху - все буде ререндиритись. В любому випадку всі компоненти будуть в memo в React 19, і цієї проблеми не буде
Раджу контент фуйлу readme в репо замінити на щось більш актуальне до теми
Маю питання з приводу порталу. Якщо використовувати Link(react-router-dom) в середині модалки з порталом, то свариться, що подалка поза контекстом чи щось таке. Чи є ідея як то пофіксити?
спробуй useNavigate() з тієї ж ліби
@@itsDevRoutine ну як варіант виглядає непогано, дякую.
Використовую вже більше ніж пів року. Топ браузер
Це інтересний хук, але варіант for = id в HTML мені більше по душі :)
Як ж в мене горить від цих index файлів. Ну кааааамон, краще один додатковий файл замість щоб двічі написати слово Modal? Вам що руки від того відсихають?? Тим більше ж авто імпорти є в ВСКоді. Чи налаштуйте собі аліаси...Крик душі просто
кожному свій смак і колір
Якщо когось бентежить літера "z", то використовуйте yup
😁
Дякую за контент. Прекрасна модалка. Проте інколи все ж швидше використати вже готову, або свою яку колись вже створив, або чиюсь.
Я хочу від тебе дітей
😆
Скільки проводите часу за роботою/розвагами(ірами, пс 5)?
робота +- 10 годин відео - решту часу зараз на жаль немає часу на ігри(
Оуу шиит, крутезний відос. Не знав про такий спосіб написання ui, виглядає бомбезно, буду юзати Дякую!
Аплодую, підписка та лайк зразу, дуже вчасно, продовжуй знімати хороші відео❤
не вчи людей поганого. не "емайл", а "імейл"
і "схему" туди ж
душніла, це не урок англійської
Будуть ще розгляди патернів?)
гарно
«витративши 100500 годин на вивчення бібліотек які виходять частіше ніж я вихожу на вулицю» 😂🤣
В розділі "Найголовніша фіча" буквально не має жодної нової фічі. Ну і "вбивця chrome" існує ще з 2004-го року)
😁
Красавчик! Дуже приємно тебе слухати!
Дякую за модалочку. Заюзав в петпроджект)
прошу!
Привіт, міг би зробити обзор на типи якими ти розширюєш interface, такої інфи в ютубі дуже мало, зазвичай всі розказують як просто типізувати пропси, або змінні. Це було би дуже корисно, так як приходиться набагато більше писати типів в інтерфейсі, і вони розростаються, особисто в мене до великих масштабів, це би зекономило багато часу, був би дуже вдячний за такий матеріал!
в планах 🤝
Нахіба це взагалі треба, якийсь манкі-кодинг
де саме манкі код?
@@denys.matsevych У відео. Ви дивились? Все там зрозуміло?
Якщо вже критикуєш, пропонуй як зробити краще будь ласка і скажи що саме не зрозуміло, анал дестроєр В дописі є посилання на проект якщо щось пропустив, там можна розглянути код детальніше і подивитись як працюють деталі які ти не зрозумів
Коментар на підтримку українського контенту!
лайк від помідора... правда переглянув на х2, але ніби косяків не було ))) ну і мінорні зауваження: обгортати можемо не тільки в div, а й призначений для цього тег dialog (є такий в html); також вічна наша проблема з "стрибанням" контенту на 3:55 вирішується в css: `scrollbar-gutter: stable;` (а ще можна написати щось накшталт body:has(.modal){ overflow: hidden; } і буде працювати так само ); в tailwind є compound класс який призначений для overlay: inset-X; не зустрічав на практиці, щоб робили для Portal окремий компонент, перший варіант був більш канонічний; по анімаціям рекомендую глянути framer-motion (то реально махіна можливостей)! Удачі.
Чувак я безмежно вдячний за твої коменти, все записую. Не так багато маю досвіду але стараюсь поресьорчити те що говорю і донести у цікавому форматі. Ще раз. Дякую💪 p.s. Бачив у mantine портал винесений в схожий компонент, тому й сам так часто роблю :)
@@itsDevRoutine а чи треба було там оверфлоу міняти? поінтер-евентсами не обійтись?
Ти крутий! Дякую за якісний контент українською!
Сказал react.createPortal, а импортнул из react-dom. Trololo😂
Чувак. У тебя еще когда ты добавил контента в основной странице и появился скрол, то когда ты тоглил модалку, контент прыгал, так как овервлоу хиден убирал скрол и потом он снова появлялся , что мелочь но ебет глаз все равно)
бля, я записую це в 1-2 ночі після роботи, не души 😂
@@itsDevRoutine можно использовать scrollbar-gutter: stable для body, контент перестанет прыгать
броскі, що за тема у VSCode? 💅
Це CodeSandbox Black у виконанні Ziady Mubaraq. Використовую вже років так 2)
@@itsDevRoutine дякую 🤗♥️
Класно, моцний лайк. Є така цікава річ коли в проєкті потрібно використовувати різнотипні модалки, які викликаються з різних місць і потрібно якось їх менеджити (через глобал стейт і так далі, також однотипних може бути кілька одночасно на екрані - але з різним контентом. Може цікаво буде таке зробити - я думаю глядачі бyдуть в захваті.
дякую за ідеї та за лайк!
Дякую за класний контент! Лайк, підписка, дзвіночок) Як щодо того, щоб зробити ультимативний гайд на react-hook-form + zod? Типу дуже складна форма з купою залежних один від одного інпутів, екзотичними складними валідаціями, асинхроннисми валідаціями, запобігання ререндерів (навіщо тоді цей watch, якщо через нього все ререндериться?), оптимізація, типізація, асинхронне завантаження даних щоб предзаповнети форму, multiple steps і т.д. ;)
react.FC це застарілий і не рекомендований спосіб для типізації
Обгрунтуй свою думку будь ласка
@@itsDevRoutine загугли Since TypeScript 5.1, React.FC is now "fine"
🔥🔥🔥🔥
Підкажіть будь ласка йолопу, як у ньому увімкнути соловьйну?
мені здається там ще немає підтримки різних мов) У всякому випадку будемо чекати ахах
Лише англійська
Нормальний контент