This media is not supported in your browser
VIEW IN TELEGRAM
Какой визуально красивый, а главное полезный канал. Я прям в восторге. Ребята с YeaHub ежедневно постят вопросы с ответами. Я каждый день прохожу их🤩
🔥12👍2❤1🤝1
Привет всем! Ваше мнение очень важно для развития нашего Телеграм-канала.
Я регулярно публикую посты на разнообразные темы. Особое внимание уделяю техническим темам, которые нахожу интересными, хочу изучить подробнее или вспомнить. Также на канале вы найдете разговорные посты о мотивации, психологии, поиске работы и других актуальных темах.
Кроме того, здесь вы можете следить за анонсами новых видео, различных активностей и проектов. Мы немного поменяли вектор развития YeaHub, и летом презентуем вам супер платформу, которая заменит курсы (постараемся)
Что бы вы хотели видеть на канале ещё? Поделитесь вашими идеями и предпочтениями, мне важно знать ваше мнение!
Я регулярно публикую посты на разнообразные темы. Особое внимание уделяю техническим темам, которые нахожу интересными, хочу изучить подробнее или вспомнить. Также на канале вы найдете разговорные посты о мотивации, психологии, поиске работы и других актуальных темах.
Кроме того, здесь вы можете следить за анонсами новых видео, различных активностей и проектов. Мы немного поменяли вектор развития YeaHub, и летом презентуем вам супер платформу, которая заменит курсы (постараемся)
Что бы вы хотели видеть на канале ещё? Поделитесь вашими идеями и предпочтениями, мне важно знать ваше мнение!
❤5👍5🔥2
Кстати, мы же все дружное Frontend сообщество, будем вместе строить YeaHub, поэтому первые доступы будут именно у вас. Будем тестировать и развивать.
Еще мы планируем делать для продвижения очень много контента: записывать видео, писать статьи, делать бесплатные курсы, проводить интервью, вести каналы, проводить моковые собесы.
У каждого из вас будет возможность проявить активность и стать автором контента для Ехаб💪
Идей много, нужны активные и идейные люди для осуществления этих целей. Всем сообществом мы сможем улучшить сферу💪
Еще мы планируем делать для продвижения очень много контента: записывать видео, писать статьи, делать бесплатные курсы, проводить интервью, вести каналы, проводить моковые собесы.
У каждого из вас будет возможность проявить активность и стать автором контента для Ехаб💪
Идей много, нужны активные и идейные люди для осуществления этих целей. Всем сообществом мы сможем улучшить сферу💪
🔥13❤4👍3
Дебаунсинг в React
Несмотря на полезность хука useDebounce, есть аргументы в пользу использования стандартной функции debounce.
Проблемы useDebounce:
- Использование useEffect увеличивает сложность кода из-за необходимости контроля за зависимостями хука.
- Неоптимальное использование useEffect может привести к лишним перерисовкам и перерасходу памяти.
- Хуки с побочными эффектами увеличивают зависимости от состояния компонента, что усложняет поддержку кода.
Преимущества стандартной функции debounce:
- Функция debounce не зависит от жизненного цикла компонента, что упрощает её использование и тестирование.
- Отсутствие привязки к состоянию компонента снижает риск возникновения ошибок.
- Функция легко переиспользуется в разных частях приложения без дополнительной интеграции.
#react #debounce #hook
Несмотря на полезность хука useDebounce, есть аргументы в пользу использования стандартной функции debounce.
Проблемы useDebounce:
- Использование useEffect увеличивает сложность кода из-за необходимости контроля за зависимостями хука.
- Неоптимальное использование useEffect может привести к лишним перерисовкам и перерасходу памяти.
- Хуки с побочными эффектами увеличивают зависимости от состояния компонента, что усложняет поддержку кода.
Преимущества стандартной функции debounce:
- Функция debounce не зависит от жизненного цикла компонента, что упрощает её использование и тестирование.
- Отсутствие привязки к состоянию компонента снижает риск возникновения ошибок.
- Функция легко переиспользуется в разных частях приложения без дополнительной интеграции.
#react #debounce #hook
🔥10👍6💯2
Рекурсия
Рекурсия в 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
Рекурсия в 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
👍15❤3🔥3
Тинькофф Круглый стол по Frontend
Вчера был на крутом мероприятии в офисе Тинькофф в Краснодаре. Всего было за всю историю 3 круглых стола, я был на каждом из них😁
Люблю такие мероприятия, там нет спикера, есть просто темы и мы по очереди обсуждаем каждую из них в неформальной обстановке. Кушаем пиццу, кто-то пьет пивко (все за счет Тинькофф).
Вчера была тема паттернов. Обсудили Solid, Поведенческие, структурные, порождающие паттерны. Оказалось, я достаточно много знаю про них😁
В общем холиварили как обычно, а потом просто болтали после основной части мероприятия.
В очередной раз убедился, что ведение блога повышает скилл и знания😎
Почти все паттерны я объяснял тут на канале. Найти можно по тегам #patterns или #solid
А главное, что я приводил понятные примеры из React. Планирую продолжить эту рубрику
Вчера был на крутом мероприятии в офисе Тинькофф в Краснодаре. Всего было за всю историю 3 круглых стола, я был на каждом из них😁
Люблю такие мероприятия, там нет спикера, есть просто темы и мы по очереди обсуждаем каждую из них в неформальной обстановке. Кушаем пиццу, кто-то пьет пивко (все за счет Тинькофф).
Вчера была тема паттернов. Обсудили Solid, Поведенческие, структурные, порождающие паттерны. Оказалось, я достаточно много знаю про них😁
В общем холиварили как обычно, а потом просто болтали после основной части мероприятия.
В очередной раз убедился, что ведение блога повышает скилл и знания😎
Почти все паттерны я объяснял тут на канале. Найти можно по тегам #patterns или #solid
А главное, что я приводил понятные примеры из React. Планирую продолжить эту рубрику
🔥13👍3❤1
Контент план
Постепенно разрулил дела свои. Наконец-то (надеюсь) перехожу к YouTube. Вот видео которые я хотел бы записывать:
1. YouTube JavaScript (Promise, Функции, Event Loop ...)
2. YouTube Паттерны (Объяснять паттерны в контексте React)
3. YouTube Болтовня (трудоустройство, собесы, обучение)
4. YouTube Собеседования (видео собесов, разбор вопросов)
У меня всегда много дел, постоянно мои планы рушатся😁🙃
Но понимаю, что YouTube дает много возможностей, надо больше записывать видео, для того чтобы потом продвигать платформу YeaHub
Как вам темы? И продвинуты и для новичков. На любой вкус и цвет. Пожелайте удачи мне и побольше времени🫡🤝
Постепенно разрулил дела свои. Наконец-то (надеюсь) перехожу к YouTube. Вот видео которые я хотел бы записывать:
1. YouTube JavaScript (Promise, Функции, Event Loop ...)
2. YouTube Паттерны (Объяснять паттерны в контексте React)
3. YouTube Болтовня (трудоустройство, собесы, обучение)
4. YouTube Собеседования (видео собесов, разбор вопросов)
У меня всегда много дел, постоянно мои планы рушатся😁🙃
Но понимаю, что YouTube дает много возможностей, надо больше записывать видео, для того чтобы потом продвигать платформу YeaHub
Как вам темы? И продвинуты и для новичков. На любой вкус и цвет. Пожелайте удачи мне и побольше времени🫡🤝
👍27🔥6💯3
Методы жизненного цикла 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
Жизненные циклы компонентов в 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
🔥19👍6❤3
Век живи - век учись. Не часто используешь данный хук, а когда надо забываешь о нем) Недавно была необходимость корректировки размера блока в зависимости от длинны текста. Хук пригодился 👍
Forwarded from React Frontend | YeaHub
#react #hook
Какие особенности имеют хуки useEffect и useLayoutEffect?
Уровень:4️⃣
useEffect выполняется асинхронно после рендеринга и "покраски" DOM, подходит для большинства побочных эффектов, включая API запросы и асинхронные операции, не требующие моментального отображения в DOM.
useLayoutEffect вызывается синхронно после изменений в DOM, но перед их визуальным отображением, используется для действий, требующих немедленного выполнения, таких как коррекции размеров или позиций элементов, чтобы избежать визуальных артефактов.
Ресурсы для изучения:
📔Дока
📄Статья
📹 YouTube
Какие особенности имеют хуки useEffect и useLayoutEffect?
Уровень:
useLayoutEffect вызывается синхронно после изменений в DOM, но перед их визуальным отображением, используется для действий, требующих немедленного выполнения, таких как коррекции размеров или позиций элементов, чтобы избежать визуальных артефактов.
Ресурсы для изучения:
📔Дока
📄Статья
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👍7🔥2
Forwarded from React Frontend | YeaHub
#interview #summary
Проходим собеседование
Сегодня предлагаем закрепить знания. Пройдем небольшое собеседование. Сначала постарайтесь ответить на вопросы самостоятельно, а уже потом посмотреть ответы.
Какие существуют CSS-селекторы?
Какие в CSS есть единицы измерения?
Что такое DOCTYPE и зачем он нужен?
Зачем для тега <noscript> добавляют атрибуты async и defer?
Что такое LocalStorage, SessionStorage, cookies, и чем они отличаются?
Как клиент взаимодействует с сервером?
Чем управляемые компоненты отличаются от неуправляемых?
Какие особенности имеют хуки useEffect и useLayoutEffect?
Что такое Set и Map?
В чем разница между git merge и git rebase?
Что такое Promise в JavaScript?
Что такое requestAnimationFrame?
Проходим собеседование
Сегодня предлагаем закрепить знания. Пройдем небольшое собеседование. Сначала постарайтесь ответить на вопросы самостоятельно, а уже потом посмотреть ответы.
Какие существуют CSS-селекторы?
Какие в CSS есть единицы измерения?
Что такое DOCTYPE и зачем он нужен?
Зачем для тега <noscript> добавляют атрибуты async и defer?
Что такое LocalStorage, SessionStorage, cookies, и чем они отличаются?
Как клиент взаимодействует с сервером?
Чем управляемые компоненты отличаются от неуправляемых?
Какие особенности имеют хуки useEffect и useLayoutEffect?
Что такое Set и Map?
В чем разница между git merge и git rebase?
Что такое Promise в JavaScript?
Что такое requestAnimationFrame?
👍6🔥2❤1
Новое видео на канале!
Все о функциях в 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
Все о функциях в 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
YouTube
Функции в JavaScript. 30+ концепций в одном видео
В этом видео мы рассмотрели основные аспекты функций в JavaScript, которые включают в себя различные способы их объявления, такие как Function Declaration и Function Expression.
Мы также углубились в различные типы функций: методы объектов, стрелочные функции…
Мы также углубились в различные типы функций: методы объектов, стрелочные функции…
🔥36👍7💯4❤1
Forwarded from Айтишница Даша
- Почему нельзя просто написать функцию в React?
- Можно, если это чистая функция
- А если нет?
function MyComponent() {
const [data, setData] = useState(null);
const fetchData = async () => {
const response = await fetch(url)
const data = await response.json()
setData(data)
};
fetchData()
return <div>Loading...</div>
}fetchData обращаемся к серверу за данными.setData.fetchData вызывается снова.В результате у нас получается бесконечный цикл !
useEffect(() => {наша функция} , [массив зависимостей])Содержит список всех переменных, от которых зависит эффект:
[]Эффект выполнится один раз при монтировании компоненты.
[props, state, context]Если эти значения изменятся, эффект будет запущен снова. Также сюда можно включить глобальные переменные.
Перепишем наш запрос для получения погоды:
import { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState(null)
const fetchData = async () => {
const response = await fetch(url)
const data = await response.json()
setData(data)
}
useEffect(() => {
fetchData()
}, [])
return data ? <div>{data}</div> : <div>Loading...</div>
}Как мы решили проблему?
(Часть 1)
#react
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🔥5❤2😁1
Всем привет! Вот и прошли праздники, хорошо отдохнул. За неделю произошло множество значимых событий в моей жизни.
Я заряжен и мотивирован. YeaHub развивается, дела идут. Скоро с ребятами с менторства начнем искать работу. Усиленно готовимся к собеседованиям, много практикуемся, прокачиваем мидловские навыки.
Также сейчас создаю себе систему заметок "Второй мозг". Уж слишком много информации через меня проходит, много дел. Хочу повысить продуктивность. Использую для этого Notion.
Буду теперь ставить четкие цели и день за днем их выполнять. Много идей для видео. Уже не терпится начать.
Как у вас дела? Что нового?
Я заряжен и мотивирован. YeaHub развивается, дела идут. Скоро с ребятами с менторства начнем искать работу. Усиленно готовимся к собеседованиям, много практикуемся, прокачиваем мидловские навыки.
Также сейчас создаю себе систему заметок "Второй мозг". Уж слишком много информации через меня проходит, много дел. Хочу повысить продуктивность. Использую для этого Notion.
Буду теперь ставить четкие цели и день за днем их выполнять. Много идей для видео. Уже не терпится начать.
Как у вас дела? Что нового?
👍16❤3🔥2
эх
а ведь я всего лишь сказал, что не нужно откликаться на вакансии, если вы еще не готовы)
Не нужно откликаться на Реакт разработчика, если вы еще не изучили Реакт)))
Не надо откликаться, если вы еще не можете простое приложение сделать
Как у ребят подгорает
https://www.youtube.com/shorts/xUq7378vlik
а ведь я всего лишь сказал, что не нужно откликаться на вакансии, если вы еще не готовы)
Не нужно откликаться на Реакт разработчика, если вы еще не изучили Реакт)))
Не надо откликаться, если вы еще не можете простое приложение сделать
Как у ребят подгорает
https://www.youtube.com/shorts/xUq7378vlik
😁10👍5🔥1
В конце мая два моих ученика начнут искать работу, и я буду сопровождать их на каждом этапе этого пути. Мы усердно готовились: решали задачи, изучали и разбирали вопросы, практиковались и проводили сессии лайвкодинга.
Сегодня я организую вебинар с участием HR-специалиста для своих учеников. Залифа (@HR_Zalifa) расскажет о процессе трудоустройства, поделится полезными советами, проверит резюме каждого и составит чеклист с рекомендациями. Конечно, она также ответит на все вопросы.
Наши ребята уже справляются с большими задачами, анализируют чужой код и работают в команде. Их уровень подготовки действительно высок. Это совсем не то, что просто добавить в резюме три года опыта после курсов 😎
Скоро я попрошу знакомых провести для них тренировочные собеседования. Ребята уже привыкли ко мне, так что пора добавить немного стресса.
Буду делиться процессом их поиска работы. Обещаю, будет интересно! 💪
Спасибо Залифе, что согласилась провести вебинар.💪
https://news.1rj.ru/str/it_coach1
Сегодня я организую вебинар с участием HR-специалиста для своих учеников. Залифа (@HR_Zalifa) расскажет о процессе трудоустройства, поделится полезными советами, проверит резюме каждого и составит чеклист с рекомендациями. Конечно, она также ответит на все вопросы.
Наши ребята уже справляются с большими задачами, анализируют чужой код и работают в команде. Их уровень подготовки действительно высок. Это совсем не то, что просто добавить в резюме три года опыта после курсов 😎
Скоро я попрошу знакомых провести для них тренировочные собеседования. Ребята уже привыкли ко мне, так что пора добавить немного стресса.
Буду делиться процессом их поиска работы. Обещаю, будет интересно! 💪
Спасибо Залифе, что согласилась провести вебинар.💪
https://news.1rj.ru/str/it_coach1
Telegram
IT карьера с Залифой: рост, деньги, смысл
Карьерный коуч и HR в IT 10+ лет
Мои клиенты уже в Яндексе, Сбере, МТС
Веду группы по дисциплине и поиску работы.
Здесь сообщество силы,где вы вырабатываете дисциплину,уверенность, растёте в доходе на 30%+ и получаете карьеру, которая даёт вам свободу)
Мои клиенты уже в Яндексе, Сбере, МТС
Веду группы по дисциплине и поиску работы.
Здесь сообщество силы,где вы вырабатываете дисциплину,уверенность, растёте в доходе на 30%+ и получаете карьеру, которая даёт вам свободу)
👍11🔥4❤1🤔1