![Михаил Непомнящий](/img/default-banner.jpg)
- 234
- 5 194 819
Михаил Непомнящий
Spain
Приєднався 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
Публикуем NextJS на своем сервере с SSL и прочими плюшками
Разбираемся как опубликовать NextJS приложение на собственном VDS сервере: базовые настройки Linux-сервера, подготовка приложения, настройка веб-сервера Nginx, настройка менеджера приложений PM2, установка сертификата безопасности и настройка протокола HTTP 2.
Промокод MISHANEP на кешбэк 50% в Спринтбокс
sprintbox.ru/c5301
Гайд с инструкциями к видео: green-galley-384.notion.site/NextJS-VDS-aaf07d1e2dff4379bd24ab911101a53e
Репозиторий с проектом: github.com/michey85/next-prisma-sqlite-demo
Мои курсы по вебу с купонами:
✅ mishanep.com
Мой телеграм-канал:
✅ t.me/mishanep_channel
Тайм-коды:
00:00 Анонс темы
03:02 Создание VDS сервера
08:00 Базовая настройка VDS
11:36 Подготовка NextJS приложения
16:08 Настройка nginx
20:29 Менеджер PM2
22:28 Добавление HTTPS
25:07 Настройка HTTP 2
27:16 Заключительные слова
📢 Поддержка канала:
www.patreon.com/mishanep
www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741
paypal.me/mishanep
ERID: 2SDnjd6zXmU
Промокод MISHANEP на кешбэк 50% в Спринтбокс
sprintbox.ru/c5301
Гайд с инструкциями к видео: green-galley-384.notion.site/NextJS-VDS-aaf07d1e2dff4379bd24ab911101a53e
Репозиторий с проектом: github.com/michey85/next-prisma-sqlite-demo
Мои курсы по вебу с купонами:
✅ mishanep.com
Мой телеграм-канал:
✅ t.me/mishanep_channel
Тайм-коды:
00:00 Анонс темы
03:02 Создание VDS сервера
08:00 Базовая настройка VDS
11:36 Подготовка NextJS приложения
16:08 Настройка nginx
20:29 Менеджер PM2
22:28 Добавление HTTPS
25:07 Настройка HTTP 2
27:16 Заключительные слова
📢 Поддержка канала:
www.patreon.com/mishanep
www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741
paypal.me/mishanep
ERID: 2SDnjd6zXmU
Переглядів: 28
Відео
Как удобно создавать UI компоненты со множеством вариантов
Переглядів 7 тис.19 годин тому
Разбираемся с библиотекой cva - удобной абстракцией для создания многовариантных UI компонентов во фронтенд-разработке. Cva станет отличной альтернативой библиотекам classnames и clsx, которые сегодня присутствуют на множестве проектов. Кроме того, подход cva сегодня всё чаще используют популярные UI библиотеки. Код из видео github.com/michey85/react-starter/tree/with-cva Сайт инструмента cva.s...
Дорожная карта Фронтенд разработчика
Переглядів 9 тис.14 днів тому
Разбираемся как простроить свой карьерный путь во фронтенд разработке. О том, что уже надо знать, приступая к изучению верстки сайтов, на чём сделать акцент в первую очередь и как не разбрасываться на необязательные технологии. Таймкоды: 00:00 Анонс темы 01:27 Пример roadmap.sh 02:18 Про компьютерную грамотность 05:03 Платформа для обучения 07:03 Фундаментальные знания 12:32 Подготовка к профес...
Заменяем page.tsx на свои лейблы
Переглядів 9 тис.21 день тому
Редактор VS Code выпустил настройку под названием custom labels, которая позволяет помечать файлы под собственными названиями. Это удобно, когда на проекте обилие индексных файлов или стилевых с одинаковым названием. Также данный паттерн понравится всем тем, кто работает с NextJS и его App Router, где все файлы страниц называются page.tsx. Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддерж...
Знакомство с Tailwind CSS на примере проекта с FrontendMentor
Переглядів 14 тис.28 днів тому
Мини-курс по библиотеке Tailwind CSS с вёрсткой проекта. Разбираемся на примере использования в обычном HTML без фреймворков. Настраиваем свои цвета в Tailwind конфиге, смотрим как пользоваться готовыми CSS классами и создавать на их основе красивые компоненты. Документация Tailwind CSS tailwindcss.com Плагины из видео marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss market...
Хуки мемоизации больше не нужны. React обзавёлся компилятором
Переглядів 32 тис.Місяць тому
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
Переглядів 6 тис.Місяць тому
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 на примере добавлении нескольких UA-cam видео. Библиотека из видео github.com/cookpete/react-player Пример из видео: github.com/michey85/with-video Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: www.patreon.com/mishanep www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf4...
Геолокация в браузере для JavaScript приложений
Переглядів 4,7 тис.Місяць тому
Разбираемся какие возможности нам предоставляют современные браузере по работе с геолокацией через JavaScript. А также смотрим какие инструменты для этих целей есть в DevTools браузера Google Chrome. Мои курсы по вебу с купонами: ✅ mishanep.com/ 📢 Поддержка канала: www.patreon.com/mishanep www.tinkoff.ru/rm/nepomnyaschiy.mikhail1/dihf419741 paypal.me/mishanep
Чем и зачем заменить Postman в 2024-м
Переглядів 30 тис.2 місяці тому
Чем и зачем заменить Postman в 2024-м
Самый простой способ начать работу с БД
Переглядів 6 тис.2 місяці тому
Самый простой способ начать работу с БД
Анонс курса по тестированию JS и React приложений
Переглядів 3,6 тис.3 місяці тому
Анонс курса по тестированию JS и React приложений
Убираем act warning в юнит тестах для React
Переглядів 1,7 тис.3 місяці тому
Убираем act warning в юнит тестах для React
Как настроить тестовое окружение для React-приложений с Vite
Переглядів 3,8 тис.3 місяці тому
Как настроить тестовое окружение для React-приложений с Vite
Новые хуки для React 19 и другие фишки
Переглядів 20 тис.4 місяці тому
Новые хуки для React 19 и другие фишки
8 плагинов с искусственным интеллектом для разработки
Переглядів 28 тис.4 місяці тому
8 плагинов с искусственным интеллектом для разработки
Redux Toolkit 2.0 - новые возможности и критические изменения
Переглядів 24 тис.5 місяців тому
Redux Toolkit 2.0 - новые возможности и критические изменения
Персональные итоги 2023 канала Михаил Непомнящий
Переглядів 2,6 тис.5 місяців тому
Персональные итоги 2023 канала Михаил Непомнящий
Как использовать переменные окружения для GitHub Pages
Переглядів 2,2 тис.6 місяців тому
Как использовать переменные окружения для GitHub Pages
Используем GitHub Actions для публикации на GitHub Pages
Переглядів 4,3 тис.6 місяців тому
Используем GitHub Actions для публикации на GitHub Pages
Готовим VS Сode для работы с React
Переглядів 11 тис.6 місяців тому
Готовим VS Сode для работы с React
Chrome DevTools - самое необходимое для новичков
Переглядів 8 тис.6 місяців тому
Chrome DevTools - самое необходимое для новичков
Стань гуру VS Code с набором топ-фишек
Переглядів 15 тис.8 місяців тому
Стань гуру VS Code с набором топ-фишек
Совместная работа Prettier и ESLint для качественной разработки
Переглядів 30 тис.8 місяців тому
Совместная работа Prettier и ESLint для качественной разработки
Как поделиться локальной разработкой с "горячими" обновлениями
Переглядів 7 тис.9 місяців тому
Как поделиться локальной разработкой с "горячими" обновлениями
Михаил, большое спасибо за видео! Все очень понятно и без воды.
Неплохо, но смотреть только на 2х
Очень крутой урок. Очень помогло. Спасибо)
Не понял, зачем аппендить ссылку в dom, а затем удалять, если click() работает и так? Или в каких-то сценариях работать не будет?
понять без примера реализации гиблое дело
Как называется расширение для снипитов React?
Не совсем понял в чем предназначение thunk-ов. Мы ведь можем сделать просто запрос на сервер и дождавшись ответа просто вызвать dispatch например чтобы передать туда полученные данные. Просто сравниваю ваше видео по авторизации на firebase и там вроде без thunk-ов все обошлось и все работает. В чем тогда смысл асинхронного редакса?
Thunk'и позволяют обрабатывать разные статусы запроса непосредственно на уровне редакса, причем сразу в нескольких слайсах. Плюс внутри think можно легко получить данные из стора и запустить дополнительные экшны, когда нужно.
Круто! сложное - простыми словами!
Из всего перечисленного совсем не пригодились пока что принципы SOLID. Со всем остальным столкнулся на работе. Стаж 1,5 года.
Как указать в matcher все?? как сделать, чтобы он редиректил на любой странице на логин??? Так сложно было это сказать. Я нихрена не могу найти в этой сраной документации и гугле
Для этого и существует испытательный срок 2 недели, месяц, два месяца, чтобы и работодатель, и работник смогли в реальных условиях понят, получится ли вместе работать 🤷♂️
C 12:00 объяснение неверное. После того, как промис получил статус resolve/reject, value этого промиса (т.е объекта) не меняется. Метод .then не меняет value изначального промиса. Метод .then создает новый промис с новым value.
Михаил, скажите пожалуйста, если у меня уже есть готовый frontend на React + Vite, можно ли отдельно на next.js реализовать эту логику с авторизацией и законектить этот бэк некста с фронтом на реакте? Или возможности такой реализации доступны только в рамках одного монолитного проекта ?
npm run build все стили пропадают у меня! как правильно сделать? спасибо вам за урок!
Здравствуйте Михаил! Появился вопрос: Почему на 12:56 отрисовывается элемент, который рендерится только при ошибке в роутинге, ведь ошибка в сетевом запросе (неправильное название сервера)?
Благодарю за прекрасные уроки! Данный урок не для новичков, конечно, но что-то вроде понял)
Спасибо большое за уроки! Делайте пожалуйста побольше уроков и по смежным темам: js, node.js, react и тп!
Настолько все грамотно подано, одно удовольствие смотреть!
Я конечно не видел объяснения других по поводу дженериков и не могу судить как они объясняют, но после этого объяснения, думаю, мне больше ничего другого и не нужно)) Большое спасибо за уроки!
Определенно спасибо. Очень полезно.
Крутецкий урок! Спасибо большое! Реально очень помогли разобраться!
Уроки супер! Большое вам спасибо!
благодарю тебя, дружище!
Класс, наконец то я добрался до полноценного изучения этой темы. Спасибо, Миша за урок.
import styles from './styles.module.scss'; const sizes = { s: styles.sizeS, m: styles.sizeM, }; export type ComponentProps = { size?: keyof typeof sizes; } export const Component = ({ size = 's', }: ComponentProps ) => { return ( <div className={classNames(styles.content, sizes[size])}></div> ); } И все, и так со всеми вариациями. Зачем столько бойлерплейта для этого?
Cva - хорошая штука,но не умеет в глубь.. когда дизайн заставляет комбинировать не комбинируемые свойсвва и типизацию ломает не только в storybook а везде впринципе после сборки.
Михаил, что скажете по поводу stylesX?
Пока не имел с ним дело.
Есть ли смысл его использовать в коммерческих проектах уже, не рано ли? Что думаешь?
Пока рановато. Я бы полгодика подождал.
спасибо, тебе. это самое доступное объяснение, что такое колбек. а до этого никак не мог понять. на мой взгляд, стоит добавить, что в JS функция это не просто метод, как например в Java, а объект. я долго не мог понять колбеки, т.к. думал, что в качестве параметра выступает результат работы функции, а не она сама. ещё раз спасибо.
нарешті зрозумів, що таке проміси. дякую, тобі, людина!
Здравствуйте Михаил. Спасибо вам за ваши видео. На русскоязычном контенте вы самый лучший из React программистов. Хотел бы узнать возможно ли добавить в db.json картинки хранящиеся в отдельной папке проекта?
Возможно. Вам понадобится указать конкретный путь до картинок. Причем не в папке scr, а в public (они туда могут и из src при сборке попасть, просто соберите приложение и посмотрите где оказались изображения).
Если ты используешь Tailwind лучше посмотри эту библиотеку "tailwind-variants" она более продуманая. Спасибо за контент
Если на проекте используются css модули, то использование этой библиотеки даст лишь лишний написанный бойлерплейт, потому что по сути это будет маппинг css классов. В случае же если используется tailwind, то возможно такой подход сделает некоторые вещи проще, но не понятно как будет работать сам tailwind и его умная автоматизация, которая оставляет в бандле только использованные стили (вероятно никак).
Насколько понимаю, проблем с магией самого tailwind быть не должно. Я узнал об этом инструменте от Стива Кинни, который свои проекты делает на tailwind последние несколько лет. Для css модулей мне лично нравится такой бойлерплейт, он более наглядный. Да и на практике для конкретного варианта может понадобиться более одного класса. Но выбирать всегда команде конкретного проекта.
по поводу атрибута 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 подход разрабатывают.