Создаем свой UI Framework. Webpack, StoryBook, публикуем в NPM
HTML-код
- Опубликовано: 27 июл 2024
- Реализация простой UI библиотеки с конфигурацией Webpack, storybook и typescript. Итоговый результат публикуем в NPM. Аналог react bootsrap, react material ui, react ant design.
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Телеграм канал - t.me/ulbi_tv
Исходный код - github.com/utimur/ui-kit
Таймкоды:
00:00 ➝ Введение
00:40 ➝ Начало разработки
02:30 ➝ Первый компонент
04:00 ➝ tsconfig
05:10 ➝ Конфигурация Webpack.
08:30 ➝ npm link Локальные пакеты
10:10 ➝ Настраиваем стили
15:10 ➝ Публикация в npm
19:30 ➝ Storybook
24:30 ➝ Время ставить лайки и писать комментарии!
Мой канал в telegram и канал для общения подписчиков - t.me/ulbi_tv
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469 
Наука
Наложил кирпичей от такой лучшей читабельности и небольшого форматирования на 3:32))
ИДЕЯ ДЛЯ РОЛИКА: Возможно немного не твой формат, но думаю многим зайдет.Делаешь тестовое задание в компанию на позицию Junior/Middle/Senior и пошагово говоришь исходя из своего опыта , как бы сделал тут , как правильно и т.д в этом ключе. Поддержите лайком в топ что бы увидел.
И поздравляю с 50к, делаешь очень полезный образовательный контент, успехов тебе!
Блин, только понял что хочется создать свой UI Framework и тут ролик на канале! Ребят, он явно за нами следит!)
Тимур, запиши про продвинутый TS, там есть нюансы по сужению типов, как это обходить и так далее. Типо as const и т.д.
Согласен, не хватает продвинутого ts на ютубе, utility types, mapped types и тд. В исполнении Тимура было бы вообще топ
Присоединяюсь
@@friendlyguy7813 utility types, mapped types ты можешь сам изучить за пару часов, вряд ли это можно считать чем то продвинутом
@@user-jw1pc9ls1x На самом деле сложно судить о продвинутости чего-либо не зная идеально язык на 100%, можно писать на js/ts 5 лет и все равно узнавать что-то новое об условных примитивах, хотя они тоже учатся за 10 минут. А по поводу моего предложения выше в комментариях, я знаю ts и пишу на нем в прод, а написал коммент, так как в ютубе нет подробного видео о продвинутом ts и считаю, что это может и каналу и зрителям, да и уверен, что лично узнаю что-то новое из него + пересмотреть перед собесом всегда полезно подобное, чтобы освежить знания
Спасибо за лайки и комментарии! Идеи для новых роликов оставляйте в комментариях, все читаю и беру на вооружение!
Поддержать канал и получить бонусы - boosty.to/ulbitv
Телеграм канал - t.me/ulbi_tv
Давайте поздравим Тимура,50к подписчиков это крутая цифра!!! Ролик, как всегда, топовый!!! Удачи в новых видосах💪🏻
Respect for your efforts. You're the best as usual.
Новый ролик! Все бросаю бегу смотреть! Спасибо🙏
Большое спасибо! Смотрим!
Что за топ контент?) ждём фундаментальный по node js
Ооо, новый ролик! Смотрю!
Ещё не посмотрел, но уже поставил лайк за то что выпустил видео в мой др)))
Nice
Тим, спасибо за интересные ролики! Всегда жду!👍
Благодарю за труд! Интересно было увидеть, как разрабатываются библиотеки. Стало понятнее как использовать webpack. Узнал много нового!
Как всегда, супер, ракета, бомба, питарда👍🤣 на работе нету пока времени с такими вот вещами разбираться, а ты все сделал за меня, спасибо тебе большое человеческое
Спасибо за труды и материал!
Отец русского программирования
↑Отец 1000 комментариев под видосами о программировании
@@luckyman5983 это правда)
Годнота!
Комментарий в поддержку канала!)
Спасибо за топовый контент, на выходных посмотрим-с
Сразу лайк
Тимур, ты СУПЕР!!! Благо дарю за бесценный русскоязычный контент и за профессиональный формат подачи 👍
50к! Очень круто! Мои поздравления!
Ролик- как и все остальные, очень годный!
Тимур, спасибо! Ждём node js
Лайк залетает сразу. Спасибо за контент, которого нигде больше нет
Тимур спасибо тебе!! Запусти плей лист Тимура на ночь. Накруткой это не назвать.
Сначала лайк, потом посмотрим )
Канал имба 😍
Поздравляю с 50к ✊
Познавательно. Спасибо.
Реализация простой UI библиотеки с конфигурацией Webpack, storybook и typescript. Итоговый результат публикуем в NPM. Аналог react bootsrap, react material ui, react ant design.
Классно объяснил, все кратко и понятно. Очень хотелось бы увидеть видео как правильно вести документацию к проекту.
Охеренно! И очень актуально, возможно как раз этим скоро буду заниматься. Спасибо!
Спасибо! Как всегда годнота!
Очень крутой контент на канале. Спасибо)
Спасибо за хорошее видео.
Было интересно посмотреть, сторибук крутая штука, не знал, что такое есть.
Спасибо. storybook понравился
Как всегда на высоте, очень познавательные уроки. Спасибо
Успехов в дальнейшем развитии канала, спасибо за труд.
Чел, спасибо тебе большое)
Благодаря тебе перешёл на более высокий уровень программирования. И твой подход ко всему относиться как к реальному проекту - это гениально. За один видос по реакту улучшил свой код (компанентный подход) сильнее, чем за полгода
А где он говорил про этот подход?
@@valeraaligator999 ну в длинном видосе про реакт (3 часа который) он рассказывал. А так в любом видео у него этот подход, просто он на этом внимание не заостряет
Ролик как всегда на высоте. Спасибо
Отличное видео, спасибо!!
Как боженька вещаешь. Ждем angular, rxjs и ngrx
Я тоже кстати свою либу писать пытался. Как раз буду смотреть. Тимур было бы круто если бы ты еще список библиотек указывал в описании.
Бро это супер ролик, просто бомба, спасибо
Как всегда на высоте!!!!🙌🏻👍🏻👍🏻👍🏻
Спасибо товарищ! Замечательные уроки, так держать! С меня поддержка на патреоне )
Спасибо!
Го ролик о себе, на 50к подписчиков)
Лучший контент. Лучший канал
Спасибо большое
Спасибо, все как обычно четко и понятно.
Отличный урок! Спасибо большое!
Тимур, а давай про Module Federation?
Ролик на самом деле класс ! Без воды ... Неплохо бы было все тоже самое только в разрезе Next.js, потому как сразу портировать не удается
в итоге смогли подключить
?
Вот прям то что было нужно. Кратко, по делу, очень ёмко. Спасибо большое!
Все, что нужно для развития развития разработчика! Спасибо!
Дружище этим видосом ты спас мою задачу по работе. Спасибо!
Контент как всегда огонь!)
А будет что-то про rxjs и redux-observable?
и для Vue теперь еще))
Спасибо за видео! А появится видос по webpack 5?
У лаврик же есть нормальный:) Мало? Я проверял рабочий конфиг, в отличии от Минина.
Крутой чел, у меня как раз рабочая задача связана с тем что показано в ролике очень сильно помог
Крутой контент, новичкам для понимания самое то
Благодарю!
Какой же ты классный!! Какую пользу нам несешь!
как и всегда очень классный контент! Спасибо!
Здравствуй Тимур, полезно, интересно, много нового для себя нашёл, благодарю.
*Л. а. й. к.*
и
*Р. е. с. п. е. к. т.*
хорошо было бы интересно посмотреть ролик сборки webpack для js css
Просто восхитительно что можно сказать я сам хочу посмотреть ролик про тестирование на node ts и react, было бы круто
Молодец, я доволен!
👍👍👍👍👍👍👍👍👍
спасибо огромное
Вот бы урок про typescript + backend + ddd pattern
Спасибо! Дорос, пригождается сейчас эта информация
привет Тимур. Спасибо за видео. Мог ли ты сделать подробное видео о том как можно создать Booking-clone проект с помощью Node.js
Го что-нибудь по Rx js🙏
Кратко, чётко, содержательно
👍
Красавчик. Больше кастомных фич
Не можнь не радовать
Оч, круто.
Спасибо!
Супер классный ролик!
Как всегда все просто пушка
Слушай , а может запилить ролик по установке линтеров с поддержкой в ide?
Например eslint, prettier, и config airbnb
И разумеется, чтобы все это работало с typescript
Я сколько не сталкивался , но всегда сталкиваюсь с уже устаревшой инфой и никто не говорит про нужные версии зависимостей
Спасибо за видео. Был бы очень благодарен если ты сделаешь курс по созданию мультиязычных приложений на реакте как это правильно и без костылей реализовать какие библиотеки лучше и как со стороны пользователя(админа) добавлять информацию на нескольких языках через "инпуты" в приложении(админке).
На русском ютубе не встречал таких видео. На зарубежных полно видео хотелось бы и на русском языке получить такую информацию.
От тебя очень развёрнуто и понятно получается. Буду как всегда благодарен 😁
спасибо! это прям то что надо)
Спасибо большое автору видео!
Всё наглядно ясно и понятно
Лайк. Осилил. Хоть и не с первого раза. 🤓
Ролик очень полезный, спасибо
Вот тебе список идей:
1) Webpack от А до Я;
2) Тестирование от А до Я
3) Создание своего фрейморка по типу React, Vue. p.s. я знаю что React это библиотека
4) урок по React Native
5) написать веб приложение на React, Apollo, GraphQL, Typescript
Если зайти в первое, можно там остаться на всегда)
1) Программирование от А до Я с нуля до профи за один час!
@@murad40 на китайском
@@yakut54 🤣🤣🤣
Збс
Лайк, как связать dropdown users в таблице с posts, jsonplaceholder
Моё почтение!
Про тайпскрипт пожалуйста
Дуже крутий мануал👍
Сторибук крутая либа) Но бывают случаи когда нам не очень то и нужна вся мощь сторибука, а просто страничка с компонентами где можно поиграться с его пропсами. Есть либа по типу сторибука только на минималках, как раз для таких целей, называется storybox-react
У кого ТС ругается на children - в 18 версии теперь надо указывать тип children в интерфейсе: " children: React.ReactNode "
у Вас очень крутая подача, все локанично.
Планируется ли подобное видео для Vue 3 / Composition API под Vite сборке?
а keycloak graphql когда будет?
Огромное спасибо за ролик. Столкнулся с некоторыми трудностями, так как пытался перейти на vite изза прекращения поддержки react-create-app. Вот если бы ты подправил бы как публиковать npm пакет без использования react-create-app...
Го выпуск про сторибук на максималках с тс, редаксом и тп!! ПС: Спасибо за видос!)