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

Дебаунсинг в React

Несмотря на полезность хука useDebounce, есть аргументы в пользу использования стандартной функции debounce.

Проблемы useDebounce:
- Использование useEffect увеличивает сложность кода из-за необходимости контроля за зависимостями хука.
- Неоптимальное использование useEffect может привести к лишним перерисовкам и перерасходу памяти.
- Хуки с побочными эффектами увеличивают зависимости от состояния компонента, что усложняет поддержку кода.

Преимущества стандартной функции debounce:
- Функция debounce не зависит от жизненного цикла компонента, что упрощает её использование и тестирование.
- Отсутствие привязки к состоянию компонента снижает риск возникновения ошибок.
- Функция легко переиспользуется в разных частях приложения без дополнительной интеграции.

#react #debounce #hook

Кстати, мы же все дружное Frontend сообщество, будем вместе строить YeaHub, поэтому первые доступы будут именно у вас. Будем тестировать и развивать.

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

У каждого из вас будет возможность проявить активность и стать автором контента для Ехаб💪

Идей много, нужны активные и идейные люди для осуществления этих целей. Всем сообществом мы сможем улучшить сферу💪

Привет всем! Ваше мнение очень важно для развития нашего Телеграм-канала.

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

Кроме того, здесь вы можете следить за анонсами новых видео, различных активностей и проектов. Мы немного поменяли вектор развития YeaHub, и летом презентуем вам супер платформу, которая заменит курсы (постараемся)

Что бы вы хотели видеть на канале ещё? Поделитесь вашими идеями и предпочтениями, мне важно знать ваше мнение!

Какой визуально красивый, а главное полезный канал. Я прям в восторге. Ребята с YeaHub ежедневно постят вопросы с ответами. Я каждый день прохожу их🤩

#interview #summary
Проходим собеседование

Сегодня предлагаем закрепить вопросы. Пройдем небольшое собеседование. Сначала постарайтесь ответить на вопросы самостоятельно, а уже потом посмотреть ответы.

Что такое схлопывание margin?

Какие есть семантические теги, и для чего их используют?

Для чего нужны data- атрибуты?

Какие есть этапы рендеринга html страницы?

Что такое XSS (Cross-Site Scripting)?

Что выведет в консоль, если код запустить в браузере?

Расскажите о стрелочных функциях (arrow function). В чем заключаются отличия стрелочных функций от обычных?

Что такое Virtual DOM, и как он работает?

Что мы увидим в консоли?

Проверка строки на палиндром

Для определения, является ли заданная строка палиндромом, можно использовать следующий фрагмент кода на JavaScript. Этот метод особенно актуален при:

- разработке логических игр или головоломок,
- выполнении текстовых анализов и обработок,
- создании валидаций для пользовательских вводов.

#Palindrome #JavaScript #string

Руслан Куянец | Reactify pinned «Frontend | Собеседования - Лучший канал для подготовки к собеседованиям в любую компанию. Его ведет сообщество опытных разработчиков. 💡 Актуальные вопросы и понятные объяснения 🥇 Ссылки на ресурсы для изучения темы А так же вас ждут публичные собеседования…»

Frontend | Собеседования - Лучший канал для подготовки к собеседованиям в любую компанию. Его ведет сообщество опытных разработчиков.

💡 Актуальные вопросы и понятные объяснения
🥇 Ссылки на ресурсы для изучения темы

А так же вас ждут публичные собеседования, которые еженедельно будут разыгрываться среди подписчиков.

@frontend_questions

Frontend Сообщество

Я стараюсь собрать вокруг себя единомышленников, с которыми мы будем улучшать сферу. Планы у нас грандиозные: если все получится, то мы изменим всё.

Мы победим платные курсы. Мы победим галеры. Мы победим студии и фриланс. Мы предложим сфере альтернативу на нашей платформе.

У нас грандиозные планы, и мы их обязательно выполним. На платформе будет всё необходимое для обучения, общения, развития, нетворкинга, карьеры и заработка. Вы свидетели зарождения большого и значимого проекта.

Всем будет от этого профит, нам важна ваша поддержка и участие. Все, что делается на канале, направлено на продвижение и развитие проекта. Доход с рекламы и менторства идет в проект.

Что вы получаете от того, что подписаны на этот канал?

- Как и на любом канале, много полезных постов, мои мысли и рекомендации.
- Розыгрыши обучения, собеседований.
- Планируется много активностей.
- Много полезных ресурсов на моем канале, видео, roadmap, курсы.
- Есть возможность присоединиться к проектам для практики и опыта.
- Возможность быть в числе первых пользователей YeaHub.

YeaHub feat Reactify

Выберите, каким будет IT завтра, вместе с нами.

Реализация метода filter()

Метод filter() создаёт новый массив со всеми элементами исходного массива, которые удовлетворяют условию, заданному в функции обратного вызова.

#javascript #array #filter #methods

Такие посты у нас в новом канале для подготовки к собеседованиям. Мы ведем его всей командой YeaHub
Формируем базу вопросов для нашей платформы 🤩

Мы не только вопросы разбираем, но и предоставляем ресурсы, где это изучить

Еще будем проводить публичные собеседования, с подписчиками канала и выставлять в YouTube. Так что у вас много возможностей прокачаться🫡

Как вам? Подпишетесь на наш новый канал? 🤝

#javascript #function #arrow
Расскажите о стрелочных функциях (arrow function). В чем заключаются отличия стрелочных функций от обычных?

Уровень: 3️⃣

Стрелочные функции (arrow functions) в JavaScript — это компактный способ написания функций. Они не имеют собственного контекста this, что означает, что this внутри стрелочной функции ссылается на this из внешнего контекста. Стрелочные функции не могут быть использованы в качестве конструкторов, и у них также нет доступа к arguments. Они чаще всего используются для коротких функций и колбеков.

Ресурсы для изучения:
📔 Дока
📄 Статья
📹 YouTube

Дарья, моя ученица, значительно прогрессировала за полтора месяца обучения. Она разрабатывает приложения на чистом JavaScript, успешно решает задачи и уже уверенно отвечает на вопросы собеседований.

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

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

Поддержите Дарью, подписавшись на ее канал, чтобы мотивация и стремление к развитию у нее только усиливались🤩
Ей будет очень приятно😊

https://t.me/frontendtrip

Вдохновение, мотивация и хобби

Для успешного достижения целей необходимы мотивация и энтузиазм. Поддерживать фокус на деятельности, которая не приносит удовольствия, бывает трудно.

Хотя в начале своего обучения программированию я не испытывал особого желания заниматься кодингом, у меня было стремление к изменениям и развитию. Мне удалось полюбить программирование, превратив его в свое хобби. Я активно погружался в программирование, выбирал и разрабатывал интересные проекты, а на выходных с утра до вечера создавал свои приложения. Это занятие стало мне по душе.

Каждый находит свой способ мотивации. Сейчас я развиваю свои проекты, веду блог, создаю видео, общаюсь с множеством специалистов и посещаю профессиональные мероприятия. Мне нравится заниматься этим, и я стараюсь вдохновить каждого своего ученика полюбить программирование.

Теперь надо усиленно возвращаться в YouTube

Нам необходимо продвижение платформы YeaHub. Для этого нужна аудитория. Для этого надо снимать видео😅

Контент план есть, начну с выходных съемку 🤞

Приложение

Я завершил работу над своим приложением, которое разрабатывал год. Оно включает в себя два фронтенд приложения, сервер, админскую панель и базу данных, все компоненты интегрированы в Docker.

Используемый стек технологий: React, Redux Toolkit, TypeScript для фронтенда и Nest, PostgreSQL, TypeORM, Liquibase для бекенда.

Развертывание на VPS сервере заняло три недели из-за трудностей с миграциями баз данных, взаимодействием между сервисами, настройкой Nginx и SSL-сертификатами. В конечном итоге приложение было успешно запущено.😤

Пока что дизайн остаётся не доработанным, поскольку я верстал его на глаз, не используя макеты.😅
В настоящий момент приложением пользуются около 200 человек. Первоначальная версия была полностью переписана, и теперь я запустил новую версию.

Планирую, что мои ученики будут практиковаться на этом проекте, так как кодовая база позволяет многое изучить, и клиенты продолжают просить о доработках, что так же будет добавлять некую изюминку в обучение.🎓

Этот проект бесплатный, я на нем практиковал свои навыки разработки fullstack-приложений. Благодаря этому опыту, я осмелился начать разработку YeaHub, уверенный в своих способностях запускать коммерческие приложения с нуля.

Debounce

Функция дебаунса (debounce) в JavaScript полезна, когда вы хотите ограничить частоту выполнения какой-либо функции. Это особенно актуально при работе с событиями, которые могут срабатывать очень часто, например, при изменении размера окна или при вводе текста в поле ввода. Дебаунс гарантирует, что функция выполнится только один раз через заданное время после последнего вызова события.

#JavaScript #debounce

YeaHub Тотемное Животное

Сурикаты — символ кооперации и адаптации. Они демонстрируют эффективное распределение ролей внутри группы, что обеспечивает их выживание. В IT-сфере подобная организация труда позволяет успешно реализовывать проекты, распределяя обязанности между участниками команды.

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

Адаптация к условиям и инновации — ключевые аспекты как для сурикатов, так и для IT-индустрии, где необходимо постоянно следить за технологическими трендами и внедрять новшества.

Сильные социальные связи в коллективе сурикатов напоминают о важности командной работы в IT. Взаимоподдержка и сотрудничество способствуют достижению общих целей и успешному завершению проектов.

#yeahub