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

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

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

Готовлю следующее видео. Паттерн Строитель в React. Видео будет годное. Уверен 90% из вас так никогда не писали, не применяли паттерн Строитель💪 Примеры топовые будут✔️

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

Я пишу сценарий к следующему видео о паттернах. Это будет топовый пример. Сам для себя узнал кое-что новое. Так что возможно, в четверг выйдет следующее видео! Прошу вас: ✔️ Поставить лайк ✔️ Написать комментарий ✔️ Досмотреть до конца Иначе все усилия напрасны, и плейлист о паттернах в React не дойдет до завершения. А там очень много интересного 😢 Нигде нет таких примеров. Перед написанием сценариев я обыскиваю весь интернет. Нет вообще и близко хороших примеров. А у нас с вами будут реальные, практические примеры в контексте React и функционального программирования. Каждый пример я прорабатываю сам. Никакой ChatGPT не может мне выдать нормальные примеры, даже самый последний Жду от вас поддержки!🤝

Паттерны в React. Продвинутый Frontend на реальных примерах Ресурсы к видеокурсу Репозиторий: https://github.com/MirgradR/market-patterns Ссылка на дизайн: https://www.figma.com/design/nPXBgdM4DXq7kadEmIOaCj/Shoppe-(Community)?node-id=1908%3A2066&t=OKbF5SoPKQO1gSpG-1

Паттерн Фабричный метод в React. Продвинутый Frontend на реальных примерах В этом видео мы рассмотрим Паттерн Фабричный метод (Factory) в контексте React и Frontend разработки. Фабричный метод — это порождающий паттерн проектирования, который определяет общий интерфейс для создания объектов в суперклассе, позволяя подклассам изменять тип создаваемых объектов. Для проекта Маркет используем Vite, FSD, TypeScript. Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом React и паттернах проектирования. Видео уже на канале! Первая серия видеокурса Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

Паттерны в React. Продвинутый Frontend на реальных примерах В этом видеокурсе мы рассмотрим 23 паттерна проектирования в контексте React и Frontend разработки. Строитель, Фабричный метод, Прототип, Адаптер, Мост, Стратегия и другие классические паттерны. Также мы не обойдем стороной ключевые принципы программирования, включая SOLID, DRY, KISS и YAGNI. Видео предназначено для разработчиков, желающих повысить свои навыки в продвинутом React и паттернах проектирования. Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

Минутка мотивации. Как вы считаете? Если не бросил, то обязательно достигнешь цели? Через 50 минут 2 новых видео⚠️

Ну все! Теперь не нужно тратить деньги на топовые курсы и книги по программированию — их выложили в Telegram бесплатно Все найденные курсы собирают тут — @portalToIT По этим курсам выучить любой язык за 7 дней вообще не проблема, находка для начинающих программистов.

Готовы к выпуску! ✔️ Продвинутый React. ✔️ Видеокурс React Паттерны. ✔️ На реальном примере. ✔️ Без воды. Такого нет в YouTube. Все это бесплатно! Еще и в связке с FSD + TypeScript Если это не годнота, то я не знаю, что годнота.

Хочешь начать свой путь в хакатонах?! Хакатоны.рус запускает ЛЕТС ХАК — первый в России образовательный интенсив и хакатон для начинающих хакатонщиков! Регистрация и подробная информация: https://www.хакатоны.рус/letshack Интенсив рассчитан на раскрытие тем о устройстве хакатонов, о том как правильно подходить к решениям задач, организовывать работу, а также, секретам успеха на подобных соревнованиях. ЛЕТС ХАК пройдет в два этапа: Теоретическая часть — образовательный интенсив — серия онлайн уроков от IT-специалистов, организаторов хакатонов, участников и победителей, которые расскажут о всех тонкостях участия и рецептах успеха в IT-соревнованиях Практическая часть — продуктовый хакатон — вы сможете отточить полученные знания и побороться за призовой фонд. Формат мероприятия: онлайн. Что дает участие? Слушатели образовательного интенсива получат знания об устройстве всех видов IT-соревнованиях. Также, участники, прошедшие курс получат сертификаты. Участники хакатона получат денежные призы и обратную связь от экспертов. Таймлайн: 18-23 мая — образовательный интенсив. Подробная информация: https://www.хакатоны.рус/letshackintensive 24-27 мая — продуктовый хакатон. Подробная информация: https://www.хакатоны.рус/letshackhack Узнай как побеждать на хакатонах, знакомься, объединяйся в команды и получи опыт участия в хакатоне! Успей зарегистрироваться до 23 мая 2024 года: https://www.хакатоны.рус/letshack Стратегические партнеры: MTS StartUp Hub — платформа для развития технологических проектов в прибыльный бизнес. Verum — это торговая площадка для сельхозпроизводителей нового поколения. Проект реализуется при поддержке Росмолодежь.Гранты

Ближайшие бесплатные мероприятия по разработке 22 мая, 19:00 мск, Среда ➖ Frontend meetup Хоп, хлоп, и MVP готов. Причины деградации перформанса фронтенда. Serverless - уже можно? 23 мая, 19:00 мск, Четверг ➖ Delivery Meetup SPB №6 Влияние утилизации ресурсов на скорость поставки. Как найти клад в процессе изменений? Инструменты айти в ритейле 26 мая, 12:00, Воскресенье ➖ EXOZ { “meetup” : “c#/.net” } Введение в архитектуру web-приложений. Чем статический анализ кода полезен С# программисту. Динамическое добавление провайдеров аутентификации openid connect в asp. net core приложении. Еще больше бесплатных онлайн и офлайн мероприятий на канале Митапочная

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

#basic #js Для чего используется ключевое слово super() в дочерних классах? Уровень: 5️⃣ Ключевое слово super() используется для обращения к конструктору и методам родительского класса, что позволяет дочернему классу наследовать поведение родительского класса, изменять его, а также добавлять собственные методы и свойства. Ресурсы для изучения: 📔 Дока 📄 Статья

🔥 Это база 1400 вопросов с собеседований на Frontend разработчика. Фишка в том, что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам 😏

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. На очереди еще множество полезных видео.💪