This media is not supported in your browser
VIEW IN TELEGRAM
Анимированная кнопка, выполненная с помощью CSS, SVG и JavaScript.
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем dropzone с помощью HTML, CSS и JavaScript
Javascript вопрос: Может ли использоваться деструктуризация в объявлении функции в блоке перечисления аргументов (то есть, в круглых скобках, перед телом функции)?
Anonymous Quiz
69%
Да
22%
Нет
9%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
Трюки при работе с SVG
SVG предоставляет довольно гибкий API для реализации интересных анимаций и эффектов в вебе. Вот несколько примеров, которые помогут вам в этом разобраться.
SVG предоставляет довольно гибкий API для реализации интересных анимаций и эффектов в вебе. Вот несколько примеров, которые помогут вам в этом разобраться.
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем галерею с красивым эффектом наведения, используя только HTML и CSS 👨💻
Javascript вопрос: Что вернет код ниже?
Object.is(NaN, NaN)
Object.is(NaN, NaN)
Anonymous Quiz
26%
true
18%
false
28%
NaN
4%
number
13%
Произойдет ошибка
12%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
Создайте форму входа в систему с помощью HTML и CSS
This media is not supported in your browser
VIEW IN TELEGRAM
Подборка анимаций для модальных окон😉
Назови компоненты жизненного цикл ?
Спросят с вероятностью 7%
Компонент жизненного цикла включает в себя несколько этапов, которые можно разделить на три основные фазы: монтирование, обновление и размонтирование. Каждая из этих фаз включает определенные методы цикла.
1️⃣ Монтирование (Mounting):
✅ constructor(): Вызывается перед монтированием компонента. Обычно используется для инициализации состояния и привязки методов.
✅ static getDerivedStateFromProps(props, state): Вызывается перед рендером компонента как при монтировании, так и при обновлении. Используется для синхронизации состояния с пропсами.
✅ render(): Обязательный метод, который возвращает JSX-разметку компонента.
✅ componentDidMount(): Вызывается сразу после монтирования компонента. Здесь можно выполнять запросы к API или подписываться на события.
2️⃣ Обновление (Updating):
✅ static getDerivedStateFromProps(props, state): Как и при монтировании, вызывается перед рендером компонента для синхронизации состояния с пропсами.
✅ shouldComponentUpdate(nextProps, nextState): Определяет, нужно ли компоненту перерисовываться. Можно использовать для оптимизации производительности.
✅ render(): Ререндер компонента на основе новых пропсов или состояния.
✅ getSnapshotBeforeUpdate(prevProps, prevState): Вызывается прямо перед тем, как изменённый DOM будет отображен. Полезно для сохранения информации о DOM, которая может измениться после обновления.
✅ componentDidUpdate(prevProps, prevState, snapshot): Вызывается сразу после обновления компонента. Можно использовать для выполнения действий после обновления, таких как запросы к API на основе новых пропсов или состояния.
3️⃣ Размонтирование (Unmounting):
✅ componentWillUnmount(): Вызывается перед размонтированием и удалением компонента. Используется для очистки ресурсов, таких как таймеры, подписки или запросы.
Пример:
Жизненный цикл компонента включает три фазы: монтирование, обновление и размонтирование. В каждой фазе есть свои методы, которые выполняют определенные действия для управления состоянием и поведением компонента.
Спросят с вероятностью 7%
Компонент жизненного цикла включает в себя несколько этапов, которые можно разделить на три основные фазы: монтирование, обновление и размонтирование. Каждая из этих фаз включает определенные методы цикла.
1️⃣ Монтирование (Mounting):
✅ constructor(): Вызывается перед монтированием компонента. Обычно используется для инициализации состояния и привязки методов.
✅ static getDerivedStateFromProps(props, state): Вызывается перед рендером компонента как при монтировании, так и при обновлении. Используется для синхронизации состояния с пропсами.
✅ render(): Обязательный метод, который возвращает JSX-разметку компонента.
✅ componentDidMount(): Вызывается сразу после монтирования компонента. Здесь можно выполнять запросы к API или подписываться на события.
2️⃣ Обновление (Updating):
✅ static getDerivedStateFromProps(props, state): Как и при монтировании, вызывается перед рендером компонента для синхронизации состояния с пропсами.
✅ shouldComponentUpdate(nextProps, nextState): Определяет, нужно ли компоненту перерисовываться. Можно использовать для оптимизации производительности.
✅ render(): Ререндер компонента на основе новых пропсов или состояния.
✅ getSnapshotBeforeUpdate(prevProps, prevState): Вызывается прямо перед тем, как изменённый DOM будет отображен. Полезно для сохранения информации о DOM, которая может измениться после обновления.
✅ componentDidUpdate(prevProps, prevState, snapshot): Вызывается сразу после обновления компонента. Можно использовать для выполнения действий после обновления, таких как запросы к API на основе новых пропсов или состояния.
3️⃣ Размонтирование (Unmounting):
✅ componentWillUnmount(): Вызывается перед размонтированием и удалением компонента. Используется для очистки ресурсов, таких как таймеры, подписки или запросы.
Пример:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
static getDerivedStateFromProps(nextProps, prevState) {
// Синхронизация состояния с пропсами
if (nextProps.count !== prevState.count) {
return { count: nextProps.count };
}
return null;
}
componentDidMount() {
// Выполнение действий после монтирования
console.log('Component mounted');
}
shouldComponentUpdate(nextProps, nextState) {
// Оптимизация перерисовки
return nextState.count !== this.state.count;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// Сохранение информации о DOM
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// Выполнение действий после обновления
console.log('Component updated');
}
componentWillUnmount() {
// Очистка ресурсов перед удалением компонента
console.log('Component will unmount');
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
</div>
);
}
}
Жизненный цикл компонента включает три фазы: монтирование, обновление и размонтирование. В каждой фазе есть свои методы, которые выполняют определенные действия для управления состоянием и поведением компонента.
CSS. Выберите значение свойства opacity, которое не сработает
Anonymous Quiz
3%
0.3
23%
.3
32%
30%
38%
Все перечисленные сработают
4%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
3D Interactive Card Hover
Свойство transform со значением rotate изменяется в зависимости от положения курсора.
Свойство transform со значением rotate изменяется в зависимости от положения курсора.
This media is not supported in your browser
VIEW IN TELEGRAM
Скролл-анимация с типографикой
Эксперимент с анимацией с появлением изображения в тексте при скролле.
Эксперимент с анимацией с появлением изображения в тексте при скролле.
This media is not supported in your browser
VIEW IN TELEGRAM
Пользовательский Range Slider с всплывающей подсказкой
Всплывающая подсказка будет менять свою форму, чтобы оставаться в границах ползунка. Даже радиус будет меняться, когда подсказка будет приближаться к углам.
Всплывающая подсказка будет менять свою форму, чтобы оставаться в границах ползунка. Даже радиус будет меняться, когда подсказка будет приближаться к углам.
Дарим билет в мир большого IT 🎫
От тебя нужен только опыт работы разработчиком JS+React от года и желание попасть в команду Холдинга Т1 — одного из лидеров российского ИТ-рынка, в портфеле которого 800+ высокотехнологичных проектов и 70+ продуктов и услуг.
Регистрируйся на онлайн-интенсив в Открытые школы Т1 и прокачай навыки бесплатно всего за 1 месяц. Лучшие получат оффер от Т1 🔝 и уникальный карьерный фаст-трек до мидла в бигтехе.
Всего за полгода мы выпустили 500+ специалистов. Участники присоединились к командам финтех-разработки и разработки ИТ-продуктов. Также участников ждут в юнитах облачных сервисов, развития ИИ-решений, интеграции и консалтинга.
⌛️ Быстрое обучение: 1 месяц.
💻Гибкий формат: все этапы онлайн, занятия по вечерам.
🌏 Работа в Т1 возможна с тер-рии РФ и Беларуси.
Ты с нами? Тогда подавай заявку до 24 июля!
Старт интенсива — 29 июля.
Реклама. ООО "Т1". ИНН 7720484492.
От тебя нужен только опыт работы разработчиком JS+React от года и желание попасть в команду Холдинга Т1 — одного из лидеров российского ИТ-рынка, в портфеле которого 800+ высокотехнологичных проектов и 70+ продуктов и услуг.
Регистрируйся на онлайн-интенсив в Открытые школы Т1 и прокачай навыки бесплатно всего за 1 месяц. Лучшие получат оффер от Т1 🔝 и уникальный карьерный фаст-трек до мидла в бигтехе.
Всего за полгода мы выпустили 500+ специалистов. Участники присоединились к командам финтех-разработки и разработки ИТ-продуктов. Также участников ждут в юнитах облачных сервисов, развития ИИ-решений, интеграции и консалтинга.
⌛️ Быстрое обучение: 1 месяц.
💻Гибкий формат: все этапы онлайн, занятия по вечерам.
🌏 Работа в Т1 возможна с тер-рии РФ и Беларуси.
Ты с нами? Тогда подавай заявку до 24 июля!
Старт интенсива — 29 июля.
Реклама. ООО "Т1". ИНН 7720484492.
HTML. Какой атрибут позволяет указывать несколько email-ов в одном input (type="email") поле?
Anonymous Quiz
6%
several
26%
multiple
7%
multi
12%
multiemail
38%
Такого атрибута не существует
11%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация замыливания текста при скролле
Еще один эффект для текста, основанный на использовании скролла.
Еще один эффект для текста, основанный на использовании скролла.
Нужен front-end-разработчик для фриланс-сотрудничества!
Пишешь на Vue больше 2 лет? Есть регулярные задачи для тебя в формате фриланса!
Задачи разнообразные, чаще на новый функционал и реже верстку
Требования:
- Опыт работы в коммерческих проектах.
- Умеете работать в команде, быстро схватываете задачи и задаете правильные вопросы.
- Не раздуваете задачи, цените простой и понятный подход.
Будет плюсом владение версткой Tailwind.
Ищешь гибкий график и интересные задачи? Мы ждем тебя! Напиши @where_my_million
Пишешь на Vue больше 2 лет? Есть регулярные задачи для тебя в формате фриланса!
Задачи разнообразные, чаще на новый функционал и реже верстку
Требования:
- Опыт работы в коммерческих проектах.
- Умеете работать в команде, быстро схватываете задачи и задаете правильные вопросы.
- Не раздуваете задачи, цените простой и понятный подход.
Будет плюсом владение версткой Tailwind.
Ищешь гибкий график и интересные задачи? Мы ждем тебя! Напиши @where_my_million