- Видео 233
- Просмотров 5 163 099
Михаил Непомнящий
Испания
Добавлен 13 апр 2011
Просто о веб-разработке с разных сторон - от профессионального разработчика и преподавателя Михаила Непомнящего.
Мои курсы с актуальными купонами: www.mishanep.com/#courses
Верстка сайтов и frontend-разработка. Материал подается от простого к сложному.
📢 Поддержка канала:
www.patreon.com/mishanep
www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741
paypal.me/mishanep
Мои курсы с актуальными купонами: www.mishanep.com/#courses
Верстка сайтов и frontend-разработка. Материал подается от простого к сложному.
📢 Поддержка канала:
www.patreon.com/mishanep
www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741
paypal.me/mishanep
Как удобно создавать 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
Код из видео 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
Новые хуки для React 19 и другие фишки
Просмотров 20 тыс.4 месяца назад
Новые хуки для React 19 и другие фишки
8 плагинов с искусственным интеллектом для разработки
Просмотров 28 тыс.4 месяца назад
8 плагинов с искусственным интеллектом для разработки
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 - самое необходимое для новичков
Стань гуру VS Code с набором топ-фишек
Просмотров 15 тыс.7 месяцев назад
Стань гуру VS Code с набором топ-фишек
Совместная работа Prettier и ESLint для качественной разработки
Просмотров 29 тыс.8 месяцев назад
Совместная работа Prettier и ESLint для качественной разработки
Как поделиться локальной разработкой с "горячими" обновлениями
Просмотров 7 тыс.8 месяцев назад
Как поделиться локальной разработкой с "горячими" обновлениями
Комментарии со сверхспособностями для TypeScript и JavaScript
Просмотров 7 тыс.9 месяцев назад
Комментарии со сверхспособностями для TypeScript и JavaScript
Если на проекте используются css модули, то использование этой библиотеки даст лишь лишний написанный бойлерплейт, потому что по сути это будет маппинг css классов. В случае же если используется tailwind, то возможно такой подход сделает некоторые вещи проще, но не понятно как будет работать сам tailwind и его умная автоматизация, которая оставляет в бандле только использованные стили (вероятно никак).
по поводу атрибута 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 не оптимизируются некстом
Спасибо за ваши видео) Они очень интересные. Хотелось бы продолжить тему создания компонентов, а именно - их архитектуру. Очень интересно как правильно создавать компоненты, куда их ложить по всем правилам SOLID. Знаю, что у вас есть подобные видео но очень не хватает полной картины как это все сделать в реальном проекте. Основные вопросы: 1. Нужно ли компоненты отделять от стилизации (безглавые компоненты), если да, то как. 2. Как отделить UI компоненты от инфраструктурных и куда их положить. 3. Могут ли UI компоненты иметь состояние или они должны быть только в инфраструктуре. 4. Как делать разметку (layout) используя UI компоненты и инфраструктурные. 5. Когда использовать пропсы, а когда лучше children? Например PostCard может иметь пропс title и description, а можно и вовсе сделать отдельные компоненты PostTitle, PostDescription и использовать их как children у PostCard. Но когда и какой выбирать вариант не очень понимаю) Спасибо)
FSD посмотри архитектуру, пока что она +- больше всего подходит под SOLID, но со своими упущениями (под разные фреймворки, библиотеки), которые придется делать, если какие-то библиотеки юзаешь, допустим Redux в React, которые создает глобальные сторы. А так, стараешься всю логику из компонентов выносить, чтоб там только получать пропсы или использовать selectors если это Реакт (это не является бизнес логикой). Если что-то переиспользуется то выносишь в общие компоненты. Если будешь использовать FSD архитектуру, то у тебя будут просто карточки и будут widgets и feature компоненты, в которых как раз ты и будешь использовать бизнес логику, а потом в карточки передавать уже полученные и приведенные в нужный вид значения. Там же и будет логика отправки данных, сохранение и т.д. А в компонентах page, будешь просто собирать страницу из готовых элементов Widgets и Feature (которые будут самостоятельными и не зависимыми друг от друга)
Спасибо! Для общего кругозора интересно. Но cva не заменил мне использование старого доброго import cn from 'classnames' с возможностью передачи css классов в зависимости от значения пропсов.
Не глядя лайк, затем глядеть😁
Если вы по какой-то причине не пользуетесь муи, то наверное удобно.
Уже насколько лет не пользуюсь ни css, ни препроцессорами в принципе. А последние года два перестал пользоваться и clsx/classnames. styled-engine в муи хватает чтобы покрыть любые кейсы
MUI - хорошая штука. Но на проектах, кажется, только один раз попадалась. Они вроде сейчас свой CSS-in-JS подход разрабатывают.
Михаил, ну не понимаю я зачем столько движений, это же всё делается просто стилями.
Так это в итоге и делается стилями. Вопрос какие именно стили попадут на компонент, как мы будем собирать нужную строку с набором стилей. Плюс тут еще вопрос удобства типизации.
Скорость разработки уменьшает, меньше кода писать: меньше кода, меньше вероятность ошибок, меньше отладок, проще рефакториг. Бизнес скажет спасибо)
Видео может и неплохое, но без исходного кода не имеет никакого смысла. Дизлайк.
Ролик может и неплохой, но без исходного текста не имеет никакого смысла. Дизлайк.
Это удобно + прикольно, если ты не использует tailwind, спасибо за контент
полезно спасибо
Михаил, может сделаете видео по работе с Profiler в Devtools? Хотелось бы даже разбор какого-нибудь проекта небольшого с проверкой через profiler и оптимизацией
ну и желательно +- с нормальным функционалом, чтоб не просто сразу 1 функция отображалась, а как найти что-то в этом дереве, как найти нужный компонент и т.д
a jwt токен есть возможность использовать в firebase? с куки я так понял он не работает?
В чем преимущество использования этой библиотеки по сравнению с прокидыванием пропсов через data-атрибуты и стилизацией в CSS-модулях?
Ух. В последний раз я видел подход data-атрибутов для задания вариативности компонентов лет пять назад =) Мы использовали это на проекте с ванильным JS (без фреймворка) и тогда это было оправдано. В целом, для меня выглядит сомнительным вариант использования data-атрибутов при работе с современными фреймворками - ведь есть обычные пропсы. И всё что нам нужно сделать на основании пропсов - это сгенерировать правильную строку с css-классами. Навешивать на элемент дополнительные html атрибуты уже не хочется.
жалко только что нет слотов как в tailwind-variants, с таким подходом будет проблематично строить компаунд компоненты с вариантами
Спасибо!
популярнейшая библиотека состощая из одной функции!
Их там две на самом деле)) Вторая - идет как алиас для clsx, чтобы две библиотеки не ставить. А так в этом нет ничего удивительного - немало библиотек, которые предлагают только одну функцию - те же classnames и clsx были из этой же серии и активно используются.
спасибо
Михаил, убери пожалуйста микрофон из под клавиатуры, все нажатия слышно.
очень актуальная тема, доступно и подробно объясняешь!!! Благодаря за очень качественную работу!!!
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.
Hi. Do you mean we don't need to use any eslint plugins for Prettier?
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
Михаил дорожная карта от Вас - ядро для разработчика!
Ерунда какая-то. Как по мне, этолишняя нагрузка на мозги
Только сегодня пытался разобраться, спасибо )
Супер
Удобная либа) с видео из вк и рутуба не работает?
Спасибо за видео) Сам как раз разбирался в этом операторе
Интересно, чем то 'as const' напоминает.
Спасибо, конечно! ... но формат Shorts - отстой...
А мне нравится, 1 минута и много пользы. Про оператор знала, но не юзала. Теперь попробую где-нибудь все-таки
это новинка? раньше не видал
Ну относительная новинка) 15 ноября 2022 зарелизили, версия 4.9
Хорошо сделано. Понятно, дополнительные демонстрации наглядные. Хотя тема очень мутная. Вспоминаю о ней только между поисками работы. В деле как то не требовалось давно. Так же часто спрашивают на собесах порядок выполнения - синхронная, асинхронная, промис. Очень удивился сделав тестовый код. Оказывается промис идёт между синхронной и асинхронной. Третий тип очереди. Даже если внутри него нет асинхронного кода.
Не вижу смысла без бд это обьяснять
Нет проблем сделать с бд. Я решил не усложнять видео темой подключения к бд. А так - действие происходит на сервере, мы можем работать с базой.
Коассное объяснение! Спасибо!
Михаил, большое тебе спасибо! Кракто и понятно. Всегда радуюсь когда по тому или иному вопросу нахожу твое видео, очень выручаешь.
Михаил, спасибо вам за обучающие ролики! Всегда доступно и понятно!
Михаил, как дорасти от джуна до миддла?
Сутки искал нормальное обьяснение. И наконец нашел, спасибо)
А как закрепить конкретную тудушку, чтоб ее нельзя было перетаскивать?
Боже, благослави тех, кто выкладывает код на гитхаб
Спасибо)
Спасибо за видео! А кастомную кнопку "пауза" как можно реализовать? Мне пока идея пришла через событие onPause, но может есть что-то проще)
Что то не могу сходу представить где это может пригодиться?
На собеседовании :)
@@mishanep ну, может быть)
как же zustand хейтять в снг реакт чатах
Это на здоровье. Мне кажется, оверинжениринг нам вообще присущ. А уж согласиться с тем, что годы работы с редаксом, мобх, эффектором и прочими инструментами могут оказаться избыточными для бизнеса - такое тяжело принять.
А у вас есть видео TS + Axios? Только не в Реакте
Не было такого :)
Прикольно, что вместо старого доброго ангуляра предлагается нестабильный и относительно новый свелт)
Angular требует большего пререквизита на мой взгляд. Поэтому как первый фреймворк я его обычно не рекомендую.
const x = void(1,2,3,4,5)
Ну здесь еще проще - void всегда возвращает undefined.
Очень путает когда ты почти все стили написал хотя еще даже локалку не запустил показать нам что там, или когда спешишь пишешь медиа запросы для телефонов когда еще пк только начинаешь делать
опять др*чить блин..
прикольный язык. Боюсь за программиста, которому надо будет присвоить иксу значение миллион. До конца жизни будет код писать.
Ты понял что написал? С чего ты взял, что пример завязан именно на перечислении? Автор ясно сказал, что оператор «,» разделяет наборы выражений, будь то функции или что угодно другое. Тут нет порядка, последним выражением может быть как раз твой миллион, например при записи (1,1000000)
Полезно)))