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 💪

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

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

Вам интересно, чтобы я показывал дополнительные примеры на чистом JavaScript в контексте фронтенда? Не классы, как все, а взаимодействие с DOM, создание приложений с паттернами на чистом JS? В рамках функционального программирования?

Возможно стоит дополнительные видео снимать? Паттерны в JavaScript?

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

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

Фабричный метод — это один из самых популярных и простых паттернов. Следующие паттерны будут сложнее 😨, но я вам их все объясню. Будете знать их, как любимую песню — наизусть.

https://youtu.be/kkk95HJrjUg?si=3uwE9QIwsOMs5QmA

Паттерн Строитель.

Тяжко было писать сценарий. Но теперь у меня 3 отличных примера!
Видео выйдет в понедельник-вторник.

Маловато, конечно, набирают видео про паттерны🥲

Выпущу 3 серии, потом посмотрю, актуально ли такие видео выпускать😔

Монтирую видео про паттерн Строитель. Чуть не забыл вырезать разминку(распев)😄

Реальные проекты во время обучения

Нанял веб-разработчика, с которым мы разрабатываем бэкенд и дизайн для учеников с менторства. Надоели однотипные дизайны из Figma и публичные API. Хочется разнообразия. Теперь у нас будет множество проектов с нашим дизайном и API. Ребята пройдут все стадии от старта проекта до его деплоя в продакшен и поддержки.

Ученики учатся продвинутым технологиям: создают проекты, настраивают Webpack, линтеры и т.д. С этой недели стартовал проект "Маркет", мы хотим сделать аналог "Самоката" и подобных сервисов для доставки продуктов. Будем внедрять авторизацию, пагинацию, CRUD операции, фильтрацию, сортировку и т.д. В дальнейшем вы сможете попробовать это всё, протестировать и через чатик поддержки указать на баги. А ребята будут их фиксить. Всё как в реальных компаниях.

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

Хочу создать множество таких проектов и поддерживать их, постоянно дорабатывать, пробовать разные подходы и технологии 😎

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

Сегодня в 16:00 выходит новое видео. Немного поэкспериментировал и реализовал паттерн не через классы, а в рамках функционального программирования 😎

Почти 18 минут годноты и, как обычно, 3 крутых примера. Долго я возился и сомневался, тяжело, конечно, адаптировать паттерны. Но нужно показывать продвинутый Frontend, да и самому учиться 😁