Руслан Куянец | Reactify

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="title"></slot>
<slot></slot> <!-- default slot -->

<!-- В основном DOM -->
<div slot="title">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

Shadow DOM Shadow DOM позволяет инкапсулировать HTML и CSS в веб-компонентах, скрывая их детали реализации и стили от основного документа, тем самым предотвращая конфликты имен и стилей. Для добавления 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. - Селектор `:host` используется для стилизации корневого элемента Shadow DOM. - Глобальные стили не проникают в Shadow DOM, но переменные CSS (**`var()`**) и кастомные свойства могут быть использованы для тематизации. Слоты (<slot>) — это элементы в Shadow DOM, которые определяют места для вставки пользовательского контента из основного DOM. Слоты могут иметь имена (name атрибут), позволяя детально управлять распределением контента. `

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

Серьезно подошел к роли 🧐 Угадаете для каких Паттернов аттрибуты?

Вышла новая, более мощная версия ChatGPT 4o Немного поработал с ней уже. Эх, опять самому все делать. Не решает она мои задачи Но работает быстрее, чем предыдущая версия. Пишет код, текст моментально GPT-4 теперь вроде как доступен без подписки. А вы уже успели опробовать?

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

👨‍💻 Изучаешь Frontend? Я тоже! idk Frontend - канал, в котором я максимально подробно конспектирую весь мой путь обучения с самого старта. С меня: — Сложная теория простым языком; — Практические примеры и объяснения; — Крутые викторины по JS и шпаргалки; — Работа над ошибками. С тебя: — Подписка @idk_frontend Продолжим обучаться вместе! 👋

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

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

Как вам такой формат Shorts? https://youtube.com/shorts/UAX5Lxdxh5A?feature=share

Снял первое видео из серии Паттерны в React. Надеюсь, оно вам понравится, потому, что на очереди еще 20+ различных паттернов, правил и принципов😅 Угадайте какой паттерн🧐

Хочешь освоить или улучшить свои навыки JavaScript? Отличные новости — тебе теперь есть где тренироваться! В канале @codewars_js публикуют задачи разной сложности по JavaScript Подписывайся и развивайся, всего за 5-10 минут в день!

Функции в JavaScript. 30+ концепций в одном видео Как вам новое превью? Видео без воды, рассмотрены практически все концепции функций в JavaScript. Хочу немного бустануть видео, чтобы проверить новое превью. Проведите выходные с пользой, уделите 25 минут времени, изучите что-то новое сегодня 😎 Записываю для вас годное видео на выходных! На неделе выпущу! Всех хороших выходных🤝 https://youtu.be/XyeS37LbNyU?si=hQr6zVj7_fuWSGXl

Как вам новое превью? Видео без воды, рассмотрены практически все концепции функций в JavaScript. Хочу немного бустануть видео, чтобы проверить новое превью. Проведите выходные с пользой, уделите 25 минут времени, изучите что-то новое сегодня 😎 Записываю для вас годное видео на выходных! На неделе выпущу! Всех хороших выходных🤝 https://youtu.be/XyeS37LbNyU?si=hQr6zVj7_fuWSGXl

Новое видео на канале! Собеседую ученика. Вроде держится молодцом. Как считаете? https://youtu.be/fNhEAnp3ntw

🎉 Результаты розыгрыша: Победители: 1. KDTenshi (@kdtenshi) 2. Jacob (@Krus_Jacob) Проверить результаты

Кстати висит собеседование в новом формате. Жду когда превью дизайнер мне сделает. Решил полный ребрендинг сделать

Поделитесь мнением. Неужели плохое видео? 😢 Вроде монтаж неплохой, много примеров, без воды, почти все о функциях рассказал. Все концепции разобрал. Что не так? 🤷‍♂️ https://youtu.be/XyeS37LbNyU?si=AC4XoGAs3RtRiJX3

Всем привет. Может есть желающие поучаствовать в собеседовании? Длительность 30-50 минут. Хочу чтобы ребята с обучения провели собеседование, потренировались и набрались уверенности. Уровень: Junior React Developer и выше Проведем на выходных. Созвонимся в Google Meets Нужны 2 человека. Душнить не будем, просто поболтаем, поспрашиваем вопросы начиная с верстки и заканчивая экосистемой React. По желанию запишем собес и я выложу в YouTube с вашего согласия

В конце мая два моих ученика начнут искать работу, и я буду сопровождать их на каждом этапе этого пути. Мы усердно готовились: решали задачи, изучали и разбирали вопросы, практиковались и проводили сессии лайвкодинга. Сегодня я организую вебинар с участием HR-специалиста для наших студентов. Залифа (@HR_Zalifa) расскажет о процессе трудоустройства, поделится полезными советами, проверит резюме каждого и составит чеклист с рекомендациями. Конечно, она также ответит на все вопросы. Наши ребята уже справляются с большими задачами, анализируют чужой код и работают в команде. Их уровень подготовки действительно высок. Это совсем не то, что просто добавить в резюме три года опыта после курсов 😎 Скоро я попрошу знакомых провести для них тренировочные собеседования. Ребята уже привыкли ко мне, так что пора добавить немного стресса. Буду делиться процессом их поиска работы. Обещаю, будет интересно! 💪 Спасибо Залифе, что согласилась провести вебинар.💪 https://t.me/it_coach1