Специализация
React Frontend Developer
Python Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
Выберите навыки
React
Git
Redux
Webpack
Docker
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Что такое HTML Imports и почему они были отклонены стандартом? Какие современные альтернативы существуют для организации модулей?
HTML Imports — это экспериментальная технология, которая позволяла загружать и включать HTML-файлы в другие документы с помощью тега <link>. Она была отклонена из-за слабой поддержки и наличия альтернативных стандартов, таких как JavaScript модули и Web Components. Современные альтернативы включают ES-модули (import/export) и технологии, основанные на шаблонах и компонентах, такие как React и Web Components.
Как реализовать ленивую загрузку (lazy loading) элементов на странице с помощью атрибута loading? Какие есть альтернативные методы?
Ленивая загрузка — это техника, которая позволяет откладывать загрузку изображений или фреймов до тех пор, пока они не появятся в видимой области экрана. Атрибут loading="lazy" в теге <img> или <iframe> автоматически откладывает загрузку элемента. Это сокращает время начальной загрузки страницы и снижает использование трафика. Альтернативные методы включают использование Intersection Observer API для более гибкого контроля над загрузкой элементов.
Как работают fallback-механизмы в HTML5 для старых браузеров и какие техники следует применять для кроссбраузерной совместимости?
HTML5 предлагает новые теги и функции, которые не всегда поддерживаются старыми браузерами. Чтобы страницы корректно работали в таких браузерах, используются fallback-механизмы — альтернативный контент или теги, которые подхватываются, если основной функционал недоступен. Например, для видео можно использовать элемент <object> или ссылку для скачивания файла, если <video> не поддерживается. Для кроссбраузерной совместимости также применяются полифилы и шимы — скрипты, добавляющие поддержку современных функций в старых браузерах.
Как управлять фокусом на странице с помощью атрибутов tabindex и методов, таких как focus()?
Атрибут tabindex управляет порядком, в котором элементы на странице получают фокус при навигации с клавиатуры. Элементы с положительным значением tabindex получают фокус в порядке возрастания числа, элементы с tabindex="0" — в порядке их появления, а отрицательные значения делают элемент недоступным для фокусировки с клавиатуры. Метод focus() в JavaScript позволяет программно устанавливать фокус на элементе. Это важно для обеспечения доступности и удобства управления для пользователей с особыми потребностями.
Как работает HTML Custom Elements API, и как можно создать и зарегистрировать собственные элементы?
HTML Custom Elements API позволяет разработчикам создавать собственные HTML-элементы, которые ведут себя как стандартные элементы, но могут иметь свою уникальную логику и стиль. Чтобы создать кастомный элемент, необходимо определить класс, который наследует от HTMLElement, и зарегистрировать его с помощью customElements.define(). Эти элементы могут быть использованы на странице так же, как и стандартные HTML-теги. Custom Elements расширяют возможности HTML, делая его более гибким для современных веб-приложений.
Что такое <template> и <slot>, как их использовать при создании кастомных элементов и динамических структур на странице?
Как работают форматы ввода и валидация данных в HTML5? В чем различие между встроенной и кастомной валидацией?
Как работает Shadow DOM? Какие преимущества он дает для разработки веб-компонентов?
Зачем для тега <script> добавляют атрибуты async и defer?
Для чего нужны функции?
Рейтинг:
2
Сложность:
5
<template> — это специальный элемент HTML, который позволяет создавать фрагменты кода, которые не отображаются на странице до тех пор, пока они не будут активированы с помощью JavaScript. Элемент <slot> используется в кастомных элементах для определения места, где можно вставить содержимое, переданное элементу. Эти элементы помогают разработчикам создавать более гибкие и переиспользуемые компоненты, которые могут динамически изменять свое содержимое в зависимости от контекста.
Рейтинг:
2
Сложность:
5
HTML5 предоставляет различные форматы ввода, такие как <input type="email">, <input type="url"> и <input type="number">, которые автоматически проверяют вводимые данные на соответствие определенным критериям. Встроенная валидация происходит автоматически при отправке формы, и браузер уведомляет пользователя об ошибках, если данные не соответствуют формату. Кастомная валидация, с другой стороны, позволяет разработчикам создавать свои собственные правила проверки данных с помощью JavaScript, что дает больше контроля и гибкости.
Рейтинг:
3
Сложность:
6
Shadow DOM создает изолированное дерево DOM для веб-компонента, которое скрыто от остальной части документа.
Плюсы:
Рейтинг:
4
Сложность:
6
Атрибуты async и defer у тега <script> используются для управления тем, как и когда браузер загружает и выполняет JavaScript. async загружает скрипт асинхронно и выполняет его сразу после загрузки, не дожидаясь завершения загрузки всей страницы. defer также загружает скрипт асинхронно, но откладывает его выполнение до полной загрузки HTML-документа, что предотвращает блокировку рендеринга страницы.
Рейтинг:
2
Сложность:
2
Функции — это блоки кода, которые выполняют определённую задачу. Они помогают избежать дублирования кода, упрощают его обслуживание и делают программу более понятной. Функция может принимать данные (параметры) и возвращать результат. Например:
function greet(name) {
return `Привет, ${name}!`;
}
console.log(greet("Иван")); // Выведет: Привет, Иван!Рейтинг:
1
Сложность:
5
Рейтинг:
4
Сложность:
7
Рейтинг:
1
Сложность:
6
Рейтинг:
1
Сложность:
3
Рейтинг:
2
Сложность:
6