Снял первое видео из серии Паттерны в React.

Надеюсь, оно вам понравится, потому, что на очереди еще 20+ различных паттернов, правил и принципов😅

Угадайте какой паттерн🧐

Как вам такой формат Shorts?

https://youtube.com/shorts/UAX5Lxdxh5A?feature=share

Каждый раз, когда ChatGPT не в состоянии решить сложную задачу, и мне приходится взяться за это самому, я чувствую себя как Тор в момент, когда он снова хватает молот:
"Все еще достоин!"

Как вам наброски?😂

Норм или кринж? Экспериментировать дальше?😅

Кстати, с момента выхода видео, roadmap обновлялся пару раз. Добавил больше ресурсов и технологий.

Ссылка на Figma

Ссылка на видео

#roadmap

Вышла новая, более мощная версия ChatGPT 4o

Немного поработал с ней уже. Эх, опять самому все делать. Не решает она мои задачи

Но работает быстрее, чем предыдущая версия. Пишет код, текст моментально

GPT-4 теперь вроде как доступен без подписки.

А вы уже успели опробовать?

Серьезно подошел к роли 🧐

Угадаете для каких Паттернов атрибуты?

Сегодня утвердил превью для видео. Получилось очень круто!

На волне вдохновения от классного превью, весь день переделывал проект с примерами для первого паттерна. Хотя уже отснял всё, понял, что оно не идеально. Создал новое приложение, красиво оформил, нашел подходящий дизайн. Добавил три крутых примера паттерна Фабрика. Завтра снова снимать буду🙃

Завтра буду монтировать и постараюсь выложить на YouTube. На очереди еще множество полезных видео.💪

Shadow DOM

Shadow DOM позволяет инкапсулировать HTML и CSS в веб-компонентах, скрывая их детали реализации и стили от основного документа, тем самым предотвращая конфликты имен и стилей.

Создание Shadow DOM:
Для добавления Shadow DOM к элементу, используйте метод attachShadow({mode: 'open' | 'closed'}) на целевом элементе. Режим open позволяет доступ к Shadow DOM из основного документа через свойство shadowRoot, в то время как closed делает Shadow DOM полностью инкапсулированным.

let host = document.createElement('div');
let shadowRoot = host.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<style>:host { color: red; }</style><b>I am in shadow dom!</b>';
document.body.appendChild(host);

Стилизация Shadow DOM:
- Стили внутри Shadow DOM инкапсулированы и не влияют на основной документ, а стили основного документа не влияют на содержимое Shadow DOM.
- Селектор `:host` используется для стилизации корневого элемента Shadow DOM.
- Глобальные стили не проникают в Shadow DOM, но переменные CSS (**`var()`**) и кастомные свойства могут быть использованы для тематизации.

Слоты:
Слоты (<slot>) — это элементы в Shadow DOM, которые определяют места для вставки пользовательского контента из основного DOM. Слоты могут иметь имена (name атрибут), позволяя детально управлять распределением контента.

<!-- В Shadow DOM -->
<slot name="noscript"></slot>
<slot></slot> <!-- default slot -->

<!-- В основном DOM -->
<div slot="noscript">This goes into the named slot</div>
<div>This goes into the default slot</div>

Взаимодействие с Shadow DOM:
- Доступ к элементам внутри Shadow DOM возможен через `shadowRoot`, если режим установлен в `open`.
- Изоляция Shadow DOM обеспечивает инкапсуляцию, но также требует использования специфичных методов для взаимодействия с ним, особенно в случае `closed` режима.

#shadowdom #html #JavaScript

Классы – больная тема для фронтендеров. В React мы используем функциональное программирование, пишем все на функциях, а к классам прибегаем изредка. Но про классы, ООП, наследование часто спрашивают на собеседованиях. Зачем, если мы не применяем это в работе? 🤔

Паттерны в React. Продвинутый Frontend на реальных примерах

В этом видеокурсе мы рассмотрим 23 паттерна проектирования в контексте React и Frontend разработки. Строитель, Фабричный метод, Прототип, Адаптер, Мост, Стратегия и другие классические паттерны.

Также мы не обойдем стороной ключевые принципы программирования, включая SOLID, DRY, KISS и YAGNI.

Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом React и паттернах проектирования.

Видео уже на канале! В 16:00 выйдет первая серия видеокурса
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

Паттерн Фабричный метод в React. Продвинутый Frontend на реальных примерах

В этом видео мы рассмотрим Паттерн Фабричный метод (Factory) в контексте React и Frontend разработки. Фабричный метод — это порождающий паттерн проектирования, который определяет общий интерфейс для создания объектов в суперклассе, позволяя подклассам изменять тип создаваемых объектов.

Для проекта Маркет используем Vite, FSD, TypeScript.

Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом React и паттернах проектирования.

Видео уже на канале! Первая серия видеокурса
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

Паттерны в React & JavaScript. Продвинутый Frontend на реальных примерах

Ресурсы к видеокурсу

Репозиторий:
https://github.com/MirgradR/market-patterns
https://github.com/MirgradR/js-patterns

Ссылка на дизайн:
https://www.figma.com/design/nPXBgdM4DXq7kadEmIOaCj/Shoppe-(Community)?node-id=1908%3A2066&t=OKbF5SoPKQO1gSpG-1

Как вам первое видео из серии Паттерны в React?

Как вам паттерн Фабричный метод? Я думаю, многие из вас его применяли, возможно, даже не осознавая, что это паттерн. Дальше будет еще интереснее. Сейчас у видео 80 лайков. Помогите достичь 100 💪

Следующий паттерн угадайте по фото

Привет, всем! Накидайте интересные видео по фронтенд-технологиям в комментарии. Также можно добавлять понравившиеся видео собеседований или про трудоустройство😌