Frontend | Вопросы собесов

🤔 Какие есть операторы в JS? Арифметические (+, -, *, /), логические (&&, ||, !), сравнения (==, ===, >,

🤔 Что такое миксины в препроцессорах? Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку. 🚩Примеры использования миксинов 1⃣Определение миксина @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } 2⃣Использование миксина .box { @include border-radius(10px); } .button { @include border-radius(5px); } 🚩Пример на LESS 1⃣Определение миксина .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } 2⃣Использование миксина .box { .border-radius(10px); } .button { .border-radius(5px); } 🚩Пример на Stylus 1⃣Определение миксина border-radius(radius) -webkit-border-radius: radius -moz-border-radius: radius border-radius: radius 2⃣Использование миксина .box border-radius(10px) .button border-radius(5px Ставь 👍 и забирай 📚 Базу знаний

🤔 Для чего существует тег ? Тег используется для встроенных (коротких) цитат. Браузер автоматически добавляет кавычки вокруг содержимого. Для длинных цитат используется . Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как достигается изоляция при использовании бэм? БЭМ (Блок, Элемент, Модификатор) достигает изоляции стилей с помощью уникальных имен классов. Это помогает избежать конфликтов между стилями и делает код более предсказуемым. 🚩Как БЭМ предотвращает конфликты? 🟠Все стили зависят только от конкретного блока В БЭМ нет зависимостей от родительских элементов, поэтому стили блока не сломаются, если он окажется в другом месте. Кнопка .button { background: blue; color: white; } Плохой пример без БЭМ .container .button { background: blue; } 🟠Элементы (`__`) зависят только от своего блока Стили элемента никогда не зависят от родителя — только от блока. Заголовок Текст карточки .card__title { font-size: 20px; } .card__text { color: gray; } 🟠Модификаторы (`--`) изменяют только нужные стили Модификаторы позволяют изменять внешний вид без переписывания базовых стилей. Кнопка Кнопка .button { padding: 10px; border-radius: 5px; } .button--red { background: red; } .button--blue { background: blue; } 🟠Имена классов уникальны, нет глобальных стилей В БЭМ не используется tag {} или id {} — только классы. Это предотвращает конфликты стилей. h1 { color: red; } БЭМ-версия .card__title { color: red; } Ставь 👍 и забирай 📚 Базу знаний

🤔 В каком случае важен порядок: при копировании объекта или массива? - Для массива порядок важен всегда, так как позиции имеют смысл (это индексированная структура). - Для объекта порядок чаще не имеет значения, но в некоторых случаях (например, при сериализации) он может быть важен, особенно если зависит от порядка вставки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как проверить правильную иерархию html заголовков? Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы. 🚩Зачем нужна правильная иерархия заголовков? 🟠Логическая структура Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги. 🟠Доступность Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице. 🟠SEO Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы. 🚩Что значит "правильная иерархия заголовков"? 🟠`` Заголовок страницы (должен быть уникальным и только один на странице). 🟠`` Подразделы . 🟠`` Подразделы , и так далее. Главный заголовок страницы Раздел 1 Подраздел 1.1 Подраздел 1.2 Раздел 2 Подраздел 2.1 Подраздел 2.1.1 🚩Как проверить иерархию заголовков? 🟠Ручная проверка HTML-кода Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например, → → и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от сразу к ). 🟠Использование браузерных DevTools В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (, и так далее) и проверьте их последовательность. 🟠Инструменты для проверки доступности Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков. 🟠Скрипт для автоматической проверки Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков. const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')]; headings.forEach((heading, index) => { console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`); }); 🟠Плагин для анализа заголовков Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO. 🚩Примеры ошибок в структуре и как их исправить Ошибка: Пропуск уровней заголовков Главный заголовок Подраздел Исправление Главный заголовок Подраздел Ошибка: Несколько на одной странице Главный заголовок Еще один заголовок Исправление Главный заголовок Еще один заголовок Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие методы массивов мутируют его? Методы, изменяющие (мутиующие) массив: - push(), pop() – добавление/удаление в конец. - shift(), unshift() – добавление/удаление в начало. - splice() – удаление/добавление/замена элементов. - sort() – сортирует массив по месту. - reverse() – изменяет порядок элементов. - fill() – заполняет массив одинаковыми значениями. Немутирующие (map(), filter(), slice(), concat(), reduce()) возвращают новый массив. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие статические методы promise знаешь? Promise – это объект, представляющий отложенный результат (асинхронную операцию). Помимо new Promise(), у Promise есть статические методы, которые помогают работать с несколькими промисами. 🟠`Promise.resolve(value)` – создаёт выполненный промис Возвращает успешно выполненный Promise с переданным значением. Promise.resolve(42).then(console.log); // 42 🟠`Promise.reject(error)` – создаёт отклонённый промис Возвращает промис в состоянии "отклонён" (rejected). Promise.reject("Ошибка!").catch(console.error); // "Ошибка!" 🟠`Promise.all(promises)` – ждёт ВСЕ промисы или первый `reject` Выполняет все промисы параллельно и ждёт, пока ВСЕ выполнятся. Если один промис отклонится, Promise.all немедленно выдаст ошибку. Promise.all([ Promise.resolve(10), Promise.resolve(20), Promise.resolve(30), ]).then(console.log); // [10, 20, 30] Ошибка прерывает выполнение Promise.all([ Promise.resolve(1), Promise.reject("Ошибка!"), Promise.resolve(3), ]).catch(console.error); // "Ошибка!" 🟠`Promise.allSettled(promises)` – ждёт ВСЕ промисы, не падает при `reject` Возвращает массив состояний (fulfilled или rejected) каждого промиса. Никогда не отклоняется, даже если есть ошибки. Promise.allSettled([ Promise.resolve(100), Promise.reject("Ошибка!"), Promise.resolve(300), ]).then(console.log); Выведет [ { status: "fulfilled", value: 100 }, { status: "rejected", reason: "Ошибка!" }, { status: "fulfilled", value: 300 } ] 🟠`Promise.race(promises)` – ждёт ТОЛЬКО первый завершённый промис Возвращает результат ПЕРВОГО выполненного или отклонённого промиса. Promise.race([ new Promise(res => setTimeout(() => res("Промис 1"), 500)), new Promise(res => setTimeout(() => res("Промис 2"), 300)), ]).then(console.log); // "Промис 2" (он быстрее) 🟠`Promise.any(promises)` – ждёт ПЕРВЫЙ успешный промис Возвращает результат ПЕРВОГО выполненного (fulfilled) промиса. Если ВСЕ промисы отклонены (rejected), возвращает AggregateError. Promise.any([ Promise.reject("Ошибка 1"), Promise.resolve("Успех!"), Promise.reject("Ошибка 2"), ]).then(console.log); // "Успех!" Ошибка, если все промисы reject Promise.any([ Promise.reject("Ошибка 1"), Promise.reject("Ошибка 2"), ]).catch(console.error); // AggregateError: Все промисы отклонены Ставь 👍 и забирай 📚 Базу знаний

🤔 Как перехватить глобально ошибки по бэкенду? - Через глобальный обработчик ошибок (например, process.on('uncaughtException') в Node.js); - Использовать middleware-логгер; - Интеграция с системами мониторинга (например, Sentry, Logstash); - Обработка try/catch на верхнем уровне запроса. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний