Frontend Interview - JS HTML CSS

Big O Нотация Big O («О» большое) — это способ описания производительности функции без измерения времени ее выполнения. Вместо того, чтобы засекать, сколько секунд выполняется функция от начала до конца, Big O показывает, как меняется время ее выполнения по мере увеличения размера входных данных. Этот подход помогает понять, как программа будет вести себя при разных объемах входящей информации. В этой статье я разберу четыре наиболее часто встречающиеся категории нотации Big O: константную, логарифмическую, линейную и квадратичную. Не переживайте, если эти термины пока ничего вам не говорят — мы подробно рассмотрим каждый из них и наглядно визуализируем в процессе. 👉 @frontendInterview

Какой элемент будет рисоваться выше других? Или ниже остальных? Решает браузер по определённым правилам. Контекст наложения — это концепция трёхмерного расположения элементов по оси z относительно пользователя, смотрящего на экран. Самый базовый контекст наложения, существующий на любой странице формируется корневым элементом . Все элементы внутри этого контекста сортируются и располагаются с оглядкой друг на друга. Но мы можем создавать контексты наложения не только на странице целиком, но и в каждом отдельном блоке. Тогда вложенные в него дочерние блоки будут сортироваться и располагаться уже по правилам этого нового, родительского контекста наложения. Новый контекст наложения формируется если: 1. это корневой элемент (), 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

Опасности использования innerHTML в JavaScript innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам. document.getElementById("content").innerHTML = "Привет! "; Уязвимость: XSS-атаки (внедрение вредоносного кода) Если innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код. const userInput = "alert('Вас взломали!');"; document.getElementById("content").innerHTML = userInput; Проблемы с безопасностью CSP (Content Security Policy) Если в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности. Случайное удаление обработчиков событий Если заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся. document.getElementById("btn").addEventListener("click", () => { alert("Нажато!"); }); document.getElementById("container").innerHTML = "Клик"; document.getElementById("btn").click(); // Ошибка, обработчик удален 👉 @frontendInterview

Spin Around, Touch the Ground Вам дан массив, состоящий из строк "left" и "right". Каждая строка делает поворот на 90° в соответствующую сторону. Создайте функцию, которая вернет количество разворотов на 360°. Примеры: ["left", "right", "left", "right"] ➞ 0 ["right", "right", "right", "right", "right", "right", "right", "right"] ➞ 2 ["left", "left", "left", "left"] ➞ 1 👉 @frontendInterview

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

Объект пользовательского события CustomEvent CustomEvent даёт возможность создавать пользовательские события с произвольным именем и дополнительной информацией. Их можно запускать вручную и отслеживать через стандартные механизмы событий. Пример const myCustomEvent = new CustomEvent('mycustomevent', { detail: { key: 'value' } }) CustomEvent создаёт пользовательское (кастомное) событие. Оно даёт разработчику возможность самостоятельно определить, когда событие происходит, как называется и какие данные с ним передаются. Пригодится, когда стандартных DOM-событий (например, click или input) недостаточно для описания происходящего на странице. CustomEvent похож на обычный Event. Основное отличие — CustomEvent позволяет передать дополнительные данные, а Event нет. Отправить пользовательское событие можно с помощью dispatchEvent(). 👉 @frontendInterview

"Да, я развился в такой перспективной сфере как гуглить" 👉 @frontendInterview

HTML- и CSS-советы для джуниор фронтенд-разработчиков Я начинал изучать вёрстку в 2010 году. Я не знал английский, поэтому у меня был ограниченный набор материала. Кто помнит видеоуроки Попова? Хорошо, что сейчас ситуация уже лучше. В целом можно найти очень классные статьи, видео и бесплатные курсы. Но и мне есть что сказать! Я собрал несколько советов. По моей задумке, если вы обратите внимание на эти аспекты, то ваш код будет лучше. Давайте посмотрим, что я вам подготовил. 👉 @frontendInterview

Вставка изображений в HTML Картинки — важная часть веба. Они делают сайты визуально выразительными, помогают передать смысл, иллюстрируют текст и даже играют функциональную роль (например, иконки или изображения товаров). И у HTML есть сразу несколько способов вставки изображений. 👉 @frontendInterview