Михаил Непомнящий
Михаил Непомнящий
  • Видео 233
  • Просмотров 5 163 099
Как удобно создавать UI компоненты со множеством вариантов
Разбираемся с библиотекой cva - удобной абстракцией для создания многовариантных UI компонентов во фронтенд-разработке. Cva станет отличной альтернативой библиотекам classnames и clsx, которые сегодня присутствуют на множестве проектов. Кроме того, подход cva сегодня всё чаще используют популярные UI библиотеки.
Код из видео github.com/michey85/react-starter/tree/with-cva
Сайт инструмента cva.style
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
www.patreon.com/mishanep
www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741
paypal.me/mishanep
Просмотров: 3 576

Видео

Дорожная карта Фронтенд разработчика
Просмотров 5 тыс.21 час назад
Разбираемся как простроить свой карьерный путь во фронтенд разработке. О том, что уже надо знать, приступая к изучению верстки сайтов, на чём сделать акцент в первую очередь и как не разбрасываться на необязательные технологии. Таймкоды: 00:00 Анонс темы 01:27 Пример roadmap.sh 02:18 Про компьютерную грамотность 05:03 Платформа для обучения 07:03 Фундаментальные знания 12:32 Подготовка к профес...
Заменяем page.tsx на свои лейблы
Просмотров 9 тыс.14 дней назад
Редактор VS Code выпустил настройку под названием custom labels, которая позволяет помечать файлы под собственными названиями. Это удобно, когда на проекте обилие индексных файлов или стилевых с одинаковым названием. Также данный паттерн понравится всем тем, кто работает с NextJS и его App Router, где все файлы страниц называются page.tsx. Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддерж...
Знакомство с Tailwind CSS на примере проекта с FrontendMentor
Просмотров 14 тыс.21 день назад
Мини-курс по библиотеке Tailwind CSS с вёрсткой проекта. Разбираемся на примере использования в обычном HTML без фреймворков. Настраиваем свои цвета в Tailwind конфиге, смотрим как пользоваться готовыми CSS классами и создавать на их основе красивые компоненты. Документация Tailwind CSS tailwindcss.com Плагины из видео marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss market...
Хуки мемоизации больше не нужны. React обзавёлся компилятором
Просмотров 31 тыс.28 дней назад
React compiler был представлен на React Conf 2024 в виде Babel плагина. Компилятор позволяет автоматически мемоизировать участки кода, где это необходимо. При этом использование хуков useMemo и useCallback, а также функции memo становится избыточным. Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: www.patreon.com/mishanep www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741 pay...
Новый конфиг для Eslint 9
Просмотров 5 тыс.Месяц назад
Eslint поменял подход к созданию конфига и его особенностям его настройки. Разбираемся как перейти на новую мажорную версию для проектов на JavaScript и TypeScript. Пример конфига для React TypeScript приложения github.com/michey85/react-starter/blob/master/eslint.config.js Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: www.patreon.com/mishanep www.tinkoff.ru/rm/nepomnyaschiy...
Добавление видео в React приложение
Просмотров 6 тыс.Месяц назад
Смотрим как добавить видео без просадки производительности React приложения. Используем библиотеку react-player на примере добавлении нескольких RUclips видео. Библиотека из видео github.com/cookpete/react-player Пример из видео: github.com/michey85/with-video Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: www.patreon.com/mishanep www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf...
Геолокация в браузере для JavaScript приложений
Просмотров 4,6 тыс.Месяц назад
Разбираемся какие возможности нам предоставляют современные браузере по работе с геолокацией через JavaScript. А также смотрим какие инструменты для этих целей есть в DevTools браузера Google Chrome. Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: www.patreon.com/mishanep www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741 paypal.me/mishanep
Чем и зачем заменить Postman в 2024-м
Просмотров 30 тыс.Месяц назад
Чем и зачем заменить Postman в 2024-м
Самый простой способ начать работу с БД
Просмотров 6 тыс.2 месяца назад
Самый простой способ начать работу с БД
Анонс курса по тестированию JS и React приложений
Просмотров 3,6 тыс.2 месяца назад
Анонс курса по тестированию JS и React приложений
Убираем act warning в юнит тестах для React
Просмотров 1,7 тыс.3 месяца назад
Убираем act warning в юнит тестах для React
Как настроить тестовое окружение для React-приложений с Vite
Просмотров 3,7 тыс.3 месяца назад
Как настроить тестовое окружение для React-приложений с Vite
Линтер для стилей Stylelint
Просмотров 5 тыс.3 месяца назад
Линтер для стилей Stylelint
Новые хуки для React 19 и другие фишки
Просмотров 20 тыс.4 месяца назад
Новые хуки для React 19 и другие фишки
8 плагинов с искусственным интеллектом для разработки
Просмотров 28 тыс.4 месяца назад
8 плагинов с искусственным интеллектом для разработки
Хватит тревожиться о хайпе в IT
Просмотров 16 тыс.4 месяца назад
Хватит тревожиться о хайпе в IT
Чем собирать React в 2024-м
Просмотров 15 тыс.5 месяцев назад
Чем собирать React в 2024-м
Redux Toolkit 2.0 - новые возможности и критические изменения
Просмотров 23 тыс.5 месяцев назад
Redux Toolkit 2.0 - новые возможности и критические изменения
Персональные итоги 2023 канала Михаил Непомнящий
Просмотров 2,6 тыс.5 месяцев назад
Персональные итоги 2023 канала Михаил Непомнящий
Как использовать переменные окружения для GitHub Pages
Просмотров 2,2 тыс.6 месяцев назад
Как использовать переменные окружения для GitHub Pages
Используем GitHub Actions для публикации на GitHub Pages
Просмотров 4,2 тыс.6 месяцев назад
Используем GitHub Actions для публикации на GitHub Pages
Готовим VS Сode для работы с React
Просмотров 11 тыс.6 месяцев назад
Готовим VS Сode для работы с React
Chrome DevTools - самое необходимое для новичков
Просмотров 8 тыс.6 месяцев назад
Chrome DevTools - самое необходимое для новичков
Релиз NextJS 14 и Server actions
Просмотров 15 тыс.7 месяцев назад
Релиз NextJS 14 и Server actions
Стань гуру VS Code с набором топ-фишек
Просмотров 15 тыс.7 месяцев назад
Стань гуру VS Code с набором топ-фишек
Совместная работа Prettier и ESLint для качественной разработки
Просмотров 29 тыс.8 месяцев назад
Совместная работа Prettier и ESLint для качественной разработки
Рекурсивные типы в TypeScript
Просмотров 8 тыс.8 месяцев назад
Рекурсивные типы в TypeScript
Как поделиться локальной разработкой с "горячими" обновлениями
Просмотров 7 тыс.8 месяцев назад
Как поделиться локальной разработкой с "горячими" обновлениями
Комментарии со сверхспособностями для TypeScript и JavaScript
Просмотров 7 тыс.9 месяцев назад
Комментарии со сверхспособностями для TypeScript и JavaScript

Комментарии

  • @profesor08
    @profesor08 Час назад

    Если на проекте используются css модули, то использование этой библиотеки даст лишь лишний написанный бойлерплейт, потому что по сути это будет маппинг css классов. В случае же если используется tailwind, то возможно такой подход сделает некоторые вещи проще, но не понятно как будет работать сам tailwind и его умная автоматизация, которая оставляет в бандле только использованные стили (вероятно никак).

  • @true227
    @true227 5 часов назад

    по поводу атрибута alt вот что пишут на странице некста: If the image is purely decorative or not intended for the user, the alt property should be an empty string (alt=""). И это относится не только к нексту. Они в свою очередь взяли эту информацию из спека. Т.е. если изображение бэкграунд, то альт должен быть пустым. И еще: насколько я понял картинки заданные через background-image css не оптимизируются некстом

  • @user-rm6xt9gz2f
    @user-rm6xt9gz2f 14 часов назад

    Спасибо за ваши видео) Они очень интересные. Хотелось бы продолжить тему создания компонентов, а именно - их архитектуру. Очень интересно как правильно создавать компоненты, куда их ложить по всем правилам SOLID. Знаю, что у вас есть подобные видео но очень не хватает полной картины как это все сделать в реальном проекте. Основные вопросы: 1. Нужно ли компоненты отделять от стилизации (безглавые компоненты), если да, то как. 2. Как отделить UI компоненты от инфраструктурных и куда их положить. 3. Могут ли UI компоненты иметь состояние или они должны быть только в инфраструктуре. 4. Как делать разметку (layout) используя UI компоненты и инфраструктурные. 5. Когда использовать пропсы, а когда лучше children? Например PostCard может иметь пропс title и description, а можно и вовсе сделать отдельные компоненты PostTitle, PostDescription и использовать их как children у PostCard. Но когда и какой выбирать вариант не очень понимаю) Спасибо)

    • @gabblz480
      @gabblz480 4 часа назад

      FSD посмотри архитектуру, пока что она +- больше всего подходит под SOLID, но со своими упущениями (под разные фреймворки, библиотеки), которые придется делать, если какие-то библиотеки юзаешь, допустим Redux в React, которые создает глобальные сторы. А так, стараешься всю логику из компонентов выносить, чтоб там только получать пропсы или использовать selectors если это Реакт (это не является бизнес логикой). Если что-то переиспользуется то выносишь в общие компоненты. Если будешь использовать FSD архитектуру, то у тебя будут просто карточки и будут widgets и feature компоненты, в которых как раз ты и будешь использовать бизнес логику, а потом в карточки передавать уже полученные и приведенные в нужный вид значения. Там же и будет логика отправки данных, сохранение и т.д. А в компонентах page, будешь просто собирать страницу из готовых элементов Widgets и Feature (которые будут самостоятельными и не зависимыми друг от друга)

  • @user-hi7ty7wd4i
    @user-hi7ty7wd4i 17 часов назад

    Спасибо! Для общего кругозора интересно. Но cva не заменил мне использование старого доброго import cn from 'classnames' с возможностью передачи css классов в зависимости от значения пропсов.

  • @user-kb5kd7ln3h
    @user-kb5kd7ln3h 18 часов назад

    Не глядя лайк, затем глядеть😁

  • @Khvplus
    @Khvplus 19 часов назад

    Если вы по какой-то причине не пользуетесь муи, то наверное удобно.

    • @Khvplus
      @Khvplus 19 часов назад

      Уже насколько лет не пользуюсь ни css, ни препроцессорами в принципе. А последние года два перестал пользоваться и clsx/classnames. styled-engine в муи хватает чтобы покрыть любые кейсы

    • @mishanep
      @mishanep 18 часов назад

      MUI - хорошая штука. Но на проектах, кажется, только один раз попадалась. Они вроде сейчас свой CSS-in-JS подход разрабатывают.

  • @arthurshaidullin7981
    @arthurshaidullin7981 21 час назад

    Михаил, ну не понимаю я зачем столько движений, это же всё делается просто стилями.

    • @mishanep
      @mishanep 18 часов назад

      Так это в итоге и делается стилями. Вопрос какие именно стили попадут на компонент, как мы будем собирать нужную строку с набором стилей. Плюс тут еще вопрос удобства типизации.

    • @Mr.Bellamy
      @Mr.Bellamy 18 часов назад

      Скорость разработки уменьшает, меньше кода писать: меньше кода, меньше вероятность ошибок, меньше отладок, проще рефакториг. Бизнес скажет спасибо)

  • @Garry_Levin
    @Garry_Levin 23 часа назад

    Видео может и неплохое, но без исходного кода не имеет никакого смысла. Дизлайк.

  • @Garry_Levin
    @Garry_Levin 23 часа назад

    Ролик может и неплохой, но без исходного текста не имеет никакого смысла. Дизлайк.

  • @Exigoll92
    @Exigoll92 День назад

    Это удобно + прикольно, если ты не использует tailwind, спасибо за контент

  • @user-kj9mm2gc3r
    @user-kj9mm2gc3r День назад

    полезно спасибо

  • @true227
    @true227 День назад

    Михаил, может сделаете видео по работе с Profiler в Devtools? Хотелось бы даже разбор какого-нибудь проекта небольшого с проверкой через profiler и оптимизацией

    • @gabblz480
      @gabblz480 4 часа назад

      ну и желательно +- с нормальным функционалом, чтоб не просто сразу 1 функция отображалась, а как найти что-то в этом дереве, как найти нужный компонент и т.д

  • @never.m1nd
    @never.m1nd День назад

    a jwt токен есть возможность использовать в firebase? с куки я так понял он не работает?

  • @user-nl5hn5bi6b
    @user-nl5hn5bi6b День назад

    В чем преимущество использования этой библиотеки по сравнению с прокидыванием пропсов через data-атрибуты и стилизацией в CSS-модулях?

    • @mishanep
      @mishanep День назад

      Ух. В последний раз я видел подход data-атрибутов для задания вариативности компонентов лет пять назад =) Мы использовали это на проекте с ванильным JS (без фреймворка) и тогда это было оправдано. В целом, для меня выглядит сомнительным вариант использования data-атрибутов при работе с современными фреймворками - ведь есть обычные пропсы. И всё что нам нужно сделать на основании пропсов - это сгенерировать правильную строку с css-классами. Навешивать на элемент дополнительные html атрибуты уже не хочется.

  • @Xelson1337
    @Xelson1337 День назад

    жалко только что нет слотов как в tailwind-variants, с таким подходом будет проблематично строить компаунд компоненты с вариантами

  • @yelstofs6117
    @yelstofs6117 День назад

    Спасибо!

  • @user-no6ke4sq4m
    @user-no6ke4sq4m День назад

    популярнейшая библиотека состощая из одной функции!

    • @mishanep
      @mishanep День назад

      Их там две на самом деле)) Вторая - идет как алиас для clsx, чтобы две библиотеки не ставить. А так в этом нет ничего удивительного - немало библиотек, которые предлагают только одну функцию - те же classnames и clsx были из этой же серии и активно используются.

  • @user-ic9hf3ps4z
    @user-ic9hf3ps4z 2 дня назад

    спасибо

  • @user-mu2lr9zc7d
    @user-mu2lr9zc7d 2 дня назад

    Михаил, убери пожалуйста микрофон из под клавиатуры, все нажатия слышно.

  • @zeevnadiv8778
    @zeevnadiv8778 2 дня назад

    очень актуальная тема, доступно и подробно объясняешь!!! Благодаря за очень качественную работу!!!

  • @user-je8vr1rz9s
    @user-je8vr1rz9s 2 дня назад

    When searching for both Prettier and your linter on the Internet you’ll probably find more related projects. These are generally not recommended, but can be useful in certain circumstances. First, we have plugins that let you run Prettier as if it was a linter rule: eslint-plugin-prettier stylelint-prettier These plugins were especially useful when Prettier was new. By running Prettier inside your linters, you didn’t have to set up any new infrastructure and you could re-use your editor integrations for the linters. But these days you can run prettier --check . and most editors have Prettier support.

    • @mishanep
      @mishanep 2 дня назад

      Hi. Do you mean we don't need to use any eslint plugins for Prettier?

    • @user-je8vr1rz9s
      @user-je8vr1rz9s 2 дня назад

      The official prettier documentation says that it is recommended to use only eslint-config-prettier. You can read more details in the section Integrating with Linters

  • @olegdegterov1595
    @olegdegterov1595 2 дня назад

    Михаил дорожная карта от Вас - ядро для разработчика!

  • @getshou
    @getshou 2 дня назад

    Ерунда какая-то. Как по мне, этолишняя нагрузка на мозги

  • @fuad2069
    @fuad2069 2 дня назад

    Только сегодня пытался разобраться, спасибо )

  • @user-xf7cp1ht9g
    @user-xf7cp1ht9g 2 дня назад

    Супер

  • @dante01rus32
    @dante01rus32 2 дня назад

    Удобная либа) с видео из вк и рутуба не работает?

  • @Kotovar
    @Kotovar 2 дня назад

    Спасибо за видео) Сам как раз разбирался в этом операторе

  • @user-wt5cr7xr1r
    @user-wt5cr7xr1r 2 дня назад

    Интересно, чем то 'as const' напоминает.

  • @victormog
    @victormog 2 дня назад

    Спасибо, конечно! ... но формат Shorts - отстой...

    • @TsyganskiyPosol
      @TsyganskiyPosol 2 дня назад

      А мне нравится, 1 минута и много пользы. Про оператор знала, но не юзала. Теперь попробую где-нибудь все-таки

  • @NeoCoding
    @NeoCoding 2 дня назад

    это новинка? раньше не видал

    • @TsyganskiyPosol
      @TsyganskiyPosol 2 дня назад

      Ну относительная новинка) 15 ноября 2022 зарелизили, версия 4.9

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

    Хорошо сделано. Понятно, дополнительные демонстрации наглядные. Хотя тема очень мутная. Вспоминаю о ней только между поисками работы. В деле как то не требовалось давно. Так же часто спрашивают на собесах порядок выполнения - синхронная, асинхронная, промис. Очень удивился сделав тестовый код. Оказывается промис идёт между синхронной и асинхронной. Третий тип очереди. Даже если внутри него нет асинхронного кода.

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

    Не вижу смысла без бд это обьяснять

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

      Нет проблем сделать с бд. Я решил не усложнять видео темой подключения к бд. А так - действие происходит на сервере, мы можем работать с базой.

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

    Коассное объяснение! Спасибо!

  • @user-bx7rm2rp9g
    @user-bx7rm2rp9g 4 дня назад

    Михаил, большое тебе спасибо! Кракто и понятно. Всегда радуюсь когда по тому или иному вопросу нахожу твое видео, очень выручаешь.

  • @n3trnnr
    @n3trnnr 4 дня назад

    Михаил, спасибо вам за обучающие ролики! Всегда доступно и понятно!

  • @Alex.Shalda
    @Alex.Shalda 4 дня назад

    Михаил, как дорасти от джуна до миддла?

  • @user-fj3sj3zm2c
    @user-fj3sj3zm2c 4 дня назад

    Сутки искал нормальное обьяснение. И наконец нашел, спасибо)

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

    А как закрепить конкретную тудушку, чтоб ее нельзя было перетаскивать?

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

    Боже, благослави тех, кто выкладывает код на гитхаб

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

    Спасибо)

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

    Спасибо за видео! А кастомную кнопку "пауза" как можно реализовать? Мне пока идея пришла через событие onPause, но может есть что-то проще)

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

    Что то не могу сходу представить где это может пригодиться?

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

      На собеседовании :)

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

      @@mishanep ну, может быть)

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

    как же zustand хейтять в снг реакт чатах

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

      Это на здоровье. Мне кажется, оверинжениринг нам вообще присущ. А уж согласиться с тем, что годы работы с редаксом, мобх, эффектором и прочими инструментами могут оказаться избыточными для бизнеса - такое тяжело принять.

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

    А у вас есть видео TS + Axios? Только не в Реакте

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

      Не было такого :)

  • @evgenstepanov6319
    @evgenstepanov6319 6 дней назад

    Прикольно, что вместо старого доброго ангуляра предлагается нестабильный и относительно новый свелт)

    • @mishanep
      @mishanep 6 дней назад

      Angular требует большего пререквизита на мой взгляд. Поэтому как первый фреймворк я его обычно не рекомендую.

  • @user-iu4jv2dw1o
    @user-iu4jv2dw1o 6 дней назад

    const x = void(1,2,3,4,5)

    • @mishanep
      @mishanep 6 дней назад

      Ну здесь еще проще - void всегда возвращает undefined.

  • @Volodymyr-vq5fm
    @Volodymyr-vq5fm 6 дней назад

    Очень путает когда ты почти все стили написал хотя еще даже локалку не запустил показать нам что там, или когда спешишь пишешь медиа запросы для телефонов когда еще пк только начинаешь делать

  • @warcraft.mp4889
    @warcraft.mp4889 6 дней назад

    опять др*чить блин..

  • @labzeen
    @labzeen 7 дней назад

    прикольный язык. Боюсь за программиста, которому надо будет присвоить иксу значение миллион. До конца жизни будет код писать.

    • @bykolaider422
      @bykolaider422 6 дней назад

      Ты понял что написал? С чего ты взял, что пример завязан именно на перечислении? Автор ясно сказал, что оператор «,» разделяет наборы выражений, будь то функции или что угодно другое. Тут нет порядка, последним выражением может быть как раз твой миллион, например при записи (1,1000000)

  • @STELLS541
    @STELLS541 7 дней назад

    Полезно)))