Объект пользовательского события CustomEvent
CustomEvent даёт возможность создавать пользовательские события с произвольным именем и дополнительной информацией. Их можно запускать вручную и отслеживать через стандартные механизмы событий.
Пример
CustomEvent создаёт пользовательское (кастомное) событие. Оно даёт разработчику возможность самостоятельно определить, когда событие происходит, как называется и какие данные с ним передаются. Пригодится, когда стандартных DOM-событий (например, click или input) недостаточно для описания происходящего на странице.
CustomEvent похож на обычный Event. Основное отличие — CustomEvent позволяет передать дополнительные данные, а Event нет.
Отправить пользовательское событие можно с помощью dispatchEvent().
👉 @frontendInterview
CustomEvent даёт возможность создавать пользовательские события с произвольным именем и дополнительной информацией. Их можно запускать вручную и отслеживать через стандартные механизмы событий.
Пример
const myCustomEvent = new CustomEvent('mycustomevent', {
detail: {
key: 'value'
}
})CustomEvent создаёт пользовательское (кастомное) событие. Оно даёт разработчику возможность самостоятельно определить, когда событие происходит, как называется и какие данные с ним передаются. Пригодится, когда стандартных DOM-событий (например, click или input) недостаточно для описания происходящего на странице.
CustomEvent похож на обычный Event. Основное отличие — CustomEvent позволяет передать дополнительные данные, а Event нет.
Отправить пользовательское событие можно с помощью dispatchEvent().
👉 @frontendInterview
👍2
Real-World Next.js: Build scalable, high-performance, and modern web applications using Next.js, the React framework for production
Next.js - это масштабируемый и высокопроизводительный фреймворк поверх React.js для современной веб-разработки, предоставляющий большой набор функций, таких как гибридный рендеринг, предварительная выборка маршрутов, автоматическая оптимизация изображений и интернационализация. Если вы хотите создать блог, сайт электронной коммерции или простой веб-сайт, эта книга покажет вам, как можно использовать многоцелевой фреймворк Next.js для создания впечатляющего пользовательского опыта.
👉 @frontendInterview
Next.js - это масштабируемый и высокопроизводительный фреймворк поверх React.js для современной веб-разработки, предоставляющий большой набор функций, таких как гибридный рендеринг, предварительная выборка маршрутов, автоматическая оптимизация изображений и интернационализация. Если вы хотите создать блог, сайт электронной коммерции или простой веб-сайт, эта книга покажет вам, как можно использовать многоцелевой фреймворк Next.js для создания впечатляющего пользовательского опыта.
👉 @frontendInterview
Spin Around, Touch the Ground
Вам дан массив, состоящий из строк "left" и "right". Каждая строка делает поворот на 90° в соответствующую сторону. Создайте функцию, которая вернет количество разворотов на 360°.
Примеры:
👉 @frontendInterview
Вам дан массив, состоящий из строк "left" и "right". Каждая строка делает поворот на 90° в соответствующую сторону. Создайте функцию, которая вернет количество разворотов на 360°.
Примеры:
["left", "right", "left", "right"] ➞ 0
["right", "right", "right", "right", "right", "right", "right", "right"] ➞ 2
["left", "left", "left", "left"] ➞ 1
👉 @frontendInterview
Опасности использования innerHTML в JavaScript
Уязвимость: XSS-атаки (внедрение вредоносного кода)
Если
Проблемы с безопасностью CSP (Content Security Policy)
Если в веб-приложении включена CSP (защита от XSS), то
Случайное удаление обработчиков событий
Если заменить содержимое элемента через
👉 @frontendInterview
innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам. document.getElementById("content").innerHTML = "<h1>Привет!</h1>";Уязвимость: XSS-атаки (внедрение вредоносного кода)
Если
innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код. const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;Проблемы с безопасностью CSP (Content Security Policy)
Если в веб-приложении включена CSP (защита от XSS), то
innerHTML может нарушать политику безопасности. <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
Случайное удаление обработчиков событий
Если заменить содержимое элемента через
innerHTML, все обработчики событий внутри него удалятся. document.getElementById("btn").addEventListener("click", () => {
alert("Нажато!");
});
document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален👉 @frontendInterview
❤2👍2
Как включить в расчёт ширины и высоты элемента его border?
Anonymous Quiz
2%
display: block
14%
box-sizing: content-box
5%
box-sizing: fit-content
79%
box-sizing: border-box
Какой элемент будет рисоваться выше других? Или ниже остальных? Решает браузер по определённым правилам.
Контекст наложения — это концепция трёхмерного расположения элементов по оси z относительно пользователя, смотрящего на экран.
Самый базовый контекст наложения, существующий на любой странице формируется корневым элементом <html>. Все элементы внутри этого контекста сортируются и располагаются с оглядкой друг на друга.
Но мы можем создавать контексты наложения не только на странице целиком, но и в каждом отдельном блоке. Тогда вложенные в него дочерние блоки будут сортироваться и располагаться уже по правилам этого нового, родительского контекста наложения.
Новый контекст наложения формируется если:
1. это корневой элемент (<html>),
2. элемент позиционирован абсолютно (position: absolute) или относительно (position: relative) со свойством z-index, значение которого не auto,
3. флекс-элемент со свойством z-index, значение которого не auto и чей родительский элемент имеет свойство display: flex или display: inline-flex,
4. элементу задано свойство opacity со значением меньше 1,
5. элементу задано свойство transform со значением не none,
6. элементу задано свойство mix-blend-mode со значением не normal,
7. элементу задано свойство filter со значением не none,
8. элементу задано свойство isolation со значением isolate,
9. элемент с position: fixed,
10. элементу задано свойство will-change или аналогичный атрибут,
11. элементу задано свойство -webkit-overflow-scrolling со значением touch.
Остальные элементы, не создающие собственный контекст наложения, используют родительский контекст.
Обычно достаточно запомнить первые три сценария и чуть-чуть помнить про следующие два. Если браузер рисует что-то, чего вы не ожидали, можно всегда вернуться и подсмотреть остальные.
👉 @frontendInterview
Контекст наложения — это концепция трёхмерного расположения элементов по оси z относительно пользователя, смотрящего на экран.
Самый базовый контекст наложения, существующий на любой странице формируется корневым элементом <html>. Все элементы внутри этого контекста сортируются и располагаются с оглядкой друг на друга.
Но мы можем создавать контексты наложения не только на странице целиком, но и в каждом отдельном блоке. Тогда вложенные в него дочерние блоки будут сортироваться и располагаться уже по правилам этого нового, родительского контекста наложения.
Новый контекст наложения формируется если:
1. это корневой элемент (<html>),
2. элемент позиционирован абсолютно (position: absolute) или относительно (position: relative) со свойством z-index, значение которого не auto,
3. флекс-элемент со свойством z-index, значение которого не auto и чей родительский элемент имеет свойство display: flex или display: inline-flex,
4. элементу задано свойство opacity со значением меньше 1,
5. элементу задано свойство transform со значением не none,
6. элементу задано свойство mix-blend-mode со значением не normal,
7. элементу задано свойство filter со значением не none,
8. элементу задано свойство isolation со значением isolate,
9. элемент с position: fixed,
10. элементу задано свойство will-change или аналогичный атрибут,
11. элементу задано свойство -webkit-overflow-scrolling со значением touch.
Остальные элементы, не создающие собственный контекст наложения, используют родительский контекст.
Обычно достаточно запомнить первые три сценария и чуть-чуть помнить про следующие два. Если браузер рисует что-то, чего вы не ожидали, можно всегда вернуться и подсмотреть остальные.
👉 @frontendInterview
❤1👍1
Big O
Нотация Big O («О» большое) — это способ описания производительности функции без измерения времени ее выполнения. Вместо того, чтобы засекать, сколько секунд выполняется функция от начала до конца, Big O показывает, как меняется время ее выполнения по мере увеличения размера входных данных. Этот подход помогает понять, как программа будет вести себя при разных объемах входящей информации.
В этой статье я разберу четыре наиболее часто встречающиеся категории нотации Big O: константную, логарифмическую, линейную и квадратичную. Не переживайте, если эти термины пока ничего вам не говорят — мы подробно рассмотрим каждый из них и наглядно визуализируем в процессе.
👉 @frontendInterview
Нотация Big O («О» большое) — это способ описания производительности функции без измерения времени ее выполнения. Вместо того, чтобы засекать, сколько секунд выполняется функция от начала до конца, Big O показывает, как меняется время ее выполнения по мере увеличения размера входных данных. Этот подход помогает понять, как программа будет вести себя при разных объемах входящей информации.
В этой статье я разберу четыре наиболее часто встречающиеся категории нотации Big O: константную, логарифмическую, линейную и квадратичную. Не переживайте, если эти термины пока ничего вам не говорят — мы подробно рассмотрим каждый из них и наглядно визуализируем в процессе.
👉 @frontendInterview
Please open Telegram to view this post
VIEW IN TELEGRAM
Что показывает Call Stack в инструментах разработчика?
Anonymous Quiz
2%
Список всех изображений на странице
90%
Последовательность вызовов функций
5%
Значения переменных в реальном времени
3%
Список загруженных CSS-файлов
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Немного не договорили, что стек с которым придется работать был актуален 10 лет назад
👉 @frontendInterview
👉 @frontendInterview
🔥1
Как изменить стили кнопок с атрибутом disabled?
C атрибутом
Пример использования Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут
Пример использования Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии
Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.
👉 @frontendInterview
C атрибутом
disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.Пример использования Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут
disabled.button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
opacity: 0.6; /* Уменьшает непрозрачность */
}Пример использования Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии
disabled.button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}Комбинированный подход
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.
/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
background-color: darkgray;
color: black;
border: 1px dashed #999;
cursor: not-allowed;
opacity: 0.7;
}
👉 @frontendInterview
👍1🔥1