Frontend Сообщество

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

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

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

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

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

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

YeaHub feat Reactify

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

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

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

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

@frontend_questions

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

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

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

#Palindrome #JavaScript #string

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рекурсия

Рекурсия в JavaScript — это техника, при которой функция вызывает сама себя. Это полезно для задач, которые можно разделить на подзадачи одного типа.

Вычисление факториала числа — это классическая задача, которую можно решить с помощью рекурсии. Факториал числа n, обозначаемый как n!, это произведение всех положительных целых чисел до n включительно. Например, 3! = 3 × 2 × 1 = 6.

Как понять?
1. factorial(3) вызывает factorial(2), а factorial(3) ожидает его результат.

2. factorial(2) вызывает factorial(1), а factorial(2) ожидает его результат.

3. factorial(1) достигает базового случая и возвращает 1.

4. factorial(2) получает 1, возвращает 2 × 1 = 2.
factorial(3) получает 2, возвращает 3 × 2 = 6.

#javanoscript #recursion #factorial

Тинькофф Круглый стол по Frontend

Вчера был на крутом мероприятии в офисе Тинькофф в Краснодаре. Всего было за всю историю 3 круглых стола, я был на каждом из них😁

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

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

В общем холиварили как обычно, а потом просто болтали после основной части мероприятия.

В очередной раз убедился, что ведение блога повышает скилл и знания😎

Почти все паттерны я объяснял тут на канале. Найти можно по тегам #patterns или #solid
А главное, что я приводил понятные примеры из React. Планирую продолжить эту рубрику

Контент план

Постепенно разрулил дела свои. Наконец-то (надеюсь) перехожу к YouTube. Вот видео которые я хотел бы записывать:

1. YouTube JavaScript (Promise, Функции, Event Loop ...)
2. YouTube Паттерны (Объяснять паттерны в контексте React)
3. YouTube Болтовня (трудоустройство, собесы, обучение)
4. YouTube Собеседования (видео собесов, разбор вопросов)

У меня всегда много дел, постоянно мои планы рушатся😁🙃

Но понимаю, что YouTube дает много возможностей, надо больше записывать видео, для того чтобы потом продвигать платформу YeaHub

Как вам темы? И продвинуты и для новичков. На любой вкус и цвет. Пожелайте удачи мне и побольше времени🫡🤝

Методы жизненного цикла React

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

Монтаж (Mounting):
constructor(): метод, вызываемый при создании компонента, используется для инициализации состояния.

static getDerivedStateFromProps(props, state): вызывается непосредственно перед рендерингом компонента, как при первом монтаже, так и при последующих обновлениях.

render(): обязательный метод, который отвечает за описание того, что должно быть отрисовано.

componentDidMount(): вызывается сразу после монтажа компонента в DOM. Здесь можно выполнять запросы к серверу, подписки и другие эффекты.

Обновление (Updating):
static getDerivedStateFromProps(props, state): вызывается при обновлении компонента в результате изменения

props.shouldComponentUpdate(nextProps, nextState): позволяет оптимизировать производительность, предотвращая рендеринг компонента.

render(): вызывается для ре-рендеринга компонента.

getSnapshotBeforeUpdate(prevProps, prevState): вызывается перед применением результатов последнего рендеринга в DOM.

componentDidUpdate(prevProps, prevState, snapshot): вызывается сразу после обновления компонента. Используется для выполнения действий после обновления DOM.

Размонтирование (Unmounting):
componentWillUnmount(): вызывается перед удалением компонента из DOM. Здесь следует освобождать ресурсы и отменять все подписки.

Обработка ошибок (Error handling):
static getDerivedStateFromError(error): вызывается после возникновения ошибки в компоненте или в любом из его дочерних компонентов.

componentDidCatch(error, info): вызывается после возникновения ошибки в любом компоненте в пределах дерева компонентов.

#react #lifecicle

Век живи - век учись. Не часто используешь данный хук, а когда надо забываешь о нем) Недавно была необходимость корректировки размера блока в зависимости от длинны текста. Хук пригодился 👍

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

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

Какие существуют CSS-селекторы?

Какие в CSS есть единицы измерения?

Что такое DOCTYPE и зачем он нужен?

Зачем для тега <noscript> добавляют атрибуты async и defer?

Что такое LocalStorage, SessionStorage, cookies, и чем они отличаются?

Как клиент взаимодействует с сервером?

Чем управляемые компоненты отличаются от неуправляемых?

Какие особенности имеют хуки useEffect и useLayoutEffect?

Что такое Set и Map?

В чем разница между git merge и git rebase?

Что такое Promise в JavaScript?

Что такое requestAnimationFrame?

Новое видео на канале!

Все о функциях в JavaScript

Всем хороших выходных🤝😊

0:00 - Что такое функции
0:19 - Создание функции
1:00 - Возврат, return
1:20 - Параметры и аргументы
1:55 - Пример, генерация пароля
3:05 - Пример, рецепт пирожков
6:40 - Область видимости, объявление функций
8:00 - Концепция, логика
8:30 - Методы
10:00 - Реализация методов
11:07 - Function Declaration и Function Expression
11:20 - Всплытие (hoisting)
12:33 - Анонимные функции
13:08 - IIFE
13:25 - Стрелочные функции, this, arguments
17:24 - Переменные, затенение
18:30 - Значения по умолчанию
18:45 - Именование функций
20:20 - return, break, циклы, условия
21:00 - callback
21:20 - setTimeout и setInterval
21:48 - Чистая функция
22:35 - Замыкание
23:13 - Фабрика функций
23:40 - Каррирование
24:05 - Ассинхронность, async, await
24:26 - Декораторы
24:41 - Генераторы
24:56 - Функции высшего порядка
25:26 - Рекурсия

https://youtu.be/XyeS37LbNyU

Загадываю желание😜