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%
Нет
8%
Посмотреть ответы
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
24%
true
20%
false
28%
NaN
4%
number
12%
Произойдет ошибка
11%
Посмотреть ответы
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
4%
0.3
25%
.3
33%
30%
34%
Все перечисленные сработают
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
8%
several
23%
multiple
9%
multi
11%
multiemail
40%
Такого атрибута не существует
8%
Посмотреть ответы