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

Расширить свой стек – легко! ⚡️ Приглашаем разработчиков на обучение: PostgreSQL, Apache Kafka, Docker, Gitlub CI/CD, Java Script, Python-разработчик и еще более 10 востребованных направлений ждут вас в формате видеокурсов в учебном центре Слёрм. Учёба в Слёрм – это: ✔️ старт в любое время: вы не привязаны к расписанию и проходите курс в комфортном для вас темпе; ✔️ фокус на практику: она занимает около 80% обучения; ✔️ гибкие условия оплаты: рассрочка, налоговый вычет, оплата зарубежной картой и даже оформление оплаты от работодателя; ✔️ передача знаний от ведущих экспертов современного IT рынка. Цените свое время и приходите осваивать best practices и прокачивать свои навыки вместе с нами! Подробнее — на сайте 😉 Реклама ООО «Слёрм» ИНН 3652901451

🤔 В чём отличие null от undefined? `null` в JavaScript — это явное указание на отсутствие значения или объекта, тогда как `undefined` означает, что переменная или свойство были объявлены, но не инициализированы. `null` назначается вручную разработчиком, а `undefined` — результат автоматического присваивания переменным, которые ещё не получили значения. В логическом контексте оба значения считаются ложными, но их использование отличается в зависимости от смысла кода. `null` чаще используется для инициализации переменных, ожидающих объект. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какое свойство используется для перевода текста в заглавные/строчные буквы? Используется свойство text-transform. Это свойство управляет преобразованием текста и может принимать несколько значений для изменения регистра букв. 🚩Значения свойства 🟠none Оставляет текст в его первоначальном виде, без преобразований.

p {
    text-transform: none;
}   

🟠capitalize Преобразует первую букву каждого слова в заглавную.

p {
    text-transform: capitalize;
}   

🟠uppercase Преобразует все буквы текста в заглавные.

p {
    text-transform: uppercase;
}   

🟠lowercase Преобразует все буквы текста в строчные.

p {
    text-transform: lowercase;
}   

🚩Примеры использования 🟠Преобразование текста в заглавные буквы

.uppercase {
    text-transform: uppercase;
}

<p class="uppercase">Этот текст будет заглавными буквами.</p>

🟠Преобразование текста в строчные буквы

.lowercase {
    text-transform: lowercase;
}

<p class="lowercase">ЭТОТ ТЕКСТ БУДЕТ СТРОЧНЫМИ БУКВАМИ.</p>

🟠Преобразование первой буквы каждого слова в заглавную

.capitalize {
    text-transform: capitalize;
}

<p class="capitalize">этот текст будет с заглавными буквами у каждого слова.</p>

🟠Отсутствие преобразований

.none {
    text-transform: none;
}

<p class="none">Этот текст останется в исходном виде.</p>

Ставь 👍 и забирай 📚 Базу знаний

😂 На одном кодинге уже давно не вывезешь, перспектива 2024 года - Информационная Безопасность Ловите два канала на тему ИБ и хакинга Арсенал Безопасника - Проект по кибербезопасности - сборник лучших инструментов и утилит по OSINT, хакингу и деанону Бункер Хакера - Все что необходимо, для того чтобы начать свой путь в безопасности - инструменты, книги, справочники, гайды и ресурсы.

🤔 Что такое this? `this` в JavaScript — это ключевое слово, которое указывает на текущий контекст исполнения функции или объекта. Значение `this` зависит от того, как вызывается функция: в методе объекта `this` ссылается на объект, в функции вне объекта — на глобальный объект или `undefined` в строгом режиме. В стрелочных функциях `this` не определяется локально, а наследуется от родительской области видимости. Использование `this` позволяет работать с динамическими контекстами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работают медиа запросы про мобильные приложения? Используются для создания адаптивного дизайна веб-страниц, который корректно отображается на различных устройствах, включая мобильные телефоны. Они позволяют применять разные стили в зависимости от характеристик устройства, таких как ширина экрана, высота экрана, ориентация и разрешение. Это особенно важно для обеспечения удобного пользовательского опыта на мобильных устройствах. 🚩Основные аспекты 🟠Ширина экрана (Viewport Width) Один из наиболее часто используемых параметров для медиа-запросов — ширина экрана устройства.

@media (max-width: 600px) {
    /* Стили для мобильных устройств */
}   

🟠Ориентация (Orientation) Медиа-запросы могут применяться в зависимости от ориентации устройства: портретная (вертикальная) или альбомная (горизонтальная).

@media (orientation: portrait) {
    /* Стили для портретной ориентации */
}

@media (orientation: landscape) {
    /* Стили для альбомной ориентации */
}   

🟠Разрешение экрана (Resolution) Медиа-запросы могут основываться на разрешении экрана, что полезно для ретина-дисплеев и других устройств с высоким разрешением.

@media (min-resolution: 2dppx) {
    /* Стили для экранов с высоким разрешением */
}   

🚩Примеры Изменение стилей для мобильных устройств

/* Основные стили для всех устройств */
body {
    font-size: 16px;
    background-color: white;
}

/* Стили для мобильных устройств (максимальная ширина 600px) */
@media (max-width: 600px) {
    body {
        font-size: 14px;
        background-color: lightgrey;
    }
}

Адаптация макета для планшетов и мобильных устройств

/* Основные стили для десктопов и планшетов */
.container {
    display: flex;
    flex-direction: row;
}

/* Стили для планшетов (ширина 601px до 1024px) */
@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }
}

/* Стили для мобильных устройств (максимальная ширина 600px) */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
        font-size: 12px;
    }
}

🚩Подходы 🟠Мобильный подход (Mobile-First) В этом подходе основные стили пишутся для мобильных устройств, а затем добавляются медиа-запросы для планшетов и десктопов.

/* Основные стили для мобильных устройств */
body {
font-size: 14px;
}

/* Стили для планшетов и десктопов */
@media (min-width: 600px) {
body {
font-size: 16px;
}
}

@media (min-width: 1024px) {
body {
font-size: 18px;
}
}

🟠Десктопный подход (Desktop-First) В этом подходе основные стили пишутся для десктопов, а затем добавляются медиа-запросы для планшетов и мобильных устройств.

/* Основные стили для десктопов */
body {
font-size: 18px;
}

/* Стили для планшетов */
@media (max-width: 1024px) {
body {
font-size: 16px;
}
}

/* Стили для мобильных устройств */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}

Ставь 👍 и забирай 📚 Базу знаний

🚀 Только 48 часов! Получите лучшие IT-ресурсы абсолютно БЕСПЛАТНО TechVibe временно открывает доступ к уникальным материалам. Не упустите свой шанс! Что вас ждет: 👇🏻 1️⃣ Эксклюзивные курсы и книги 2⃣ Удобные шпаргалки для эффективного кодирования 3⃣ 100 разобранных вопросов с собеседований 4⃣ Готовые скрипты для ваших проектов ⏰ Материалы будут удалены через 48 часов! Действуйте сейчас, чтобы не пропустить эту уникальную возможность Подписывайтесь на ➡️ TechVibe и получите доступ к лучшим IT-ресурсам прямо сейчас P.S.: Вся нужная инфа уже в закрепе канала. Не стесняйся, сделай первый шаг!

🤔 Что такое макро и микро задачи? Макро-задачи (macro-tasks) — это крупные задачи, такие как события ввода-вывода, таймеры или сетевые запросы, которые планируются в основной очереди событий. Микро-задачи (micro-tasks) — это задачи меньшего приоритета, которые выполняются сразу после завершения текущего блока кода, но до выполнения следующих макро-задач (например, `Promise` или `MutationObserver`). Микро-задачи всегда выполняются перед макро-задачами, что позволяет им завершаться быстрее. Это важное отличие в управлении асинхронным кодом и приоритизацией событий. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 !Important для чего используется? Для повышения приоритета конкретного правила, чтобы оно переопределяло все другие правила для данного элемента, даже если другие правила имеют более специфичные селекторы. 🚩Как работает Чтобы применить !important, добавьте его в конце свойства и перед точкой с запятой:

selector {
    property: value !important;
}

В этом примере текст в параграфе с классом important будет зеленым, несмотря на то, что есть другие правила, определяющие цвет текста для <p> и <p class="special">.

/* Без использования !important */
p {
    color: red;
}

p.special {
    color: blue;
}

/* С использованием !important */
p.important {
    color: green !important;
}

🚩Почему используется 🟠Переопределение каскада Иногда вам нужно, чтобы определенное правило CSS применялось независимо от других стилей, которые могут быть установлены для этого элемента. !important позволяет вам это сделать. 🟠Временные исправления В крупных проектах !important может быть полезен для временного исправления или обхода конкретных стилей без необходимости изменять существующие файлы стилей. В этом примере текст в первом параграфе будет красным, так как применится правило .normal. Во втором параграфе текст будет синим, так как правило .override с !important переопределяет правило .normal.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <style>
        .normal {
            color: red;
        }
        .override {
            color: blue !important;
        }
    </style>
</head>
<body>
    <p class="normal">This text is red.</p>
    <p class="normal override">This text is blue.</p>
</body>
</html>

Ставь 👍 и забирай 📚 Базу знаний

Перец на канале «Записки необычного препода» делает невозможное! А именно — встраивает мышление на английском взрослым людям. Как обычно пытаются научить «думать на языке»? Методом «бери больше, кидай дальше». Слушайте песни, смотрите фильмы, читайте книги в оригинале, и оно само как-нибудь запустится. Тут всё совсем не так. Тут происходит встраивание языка на кардинально других принципах. В результате вы ощущаете грамматику и слова «изнутри». Так, как бы вы их ощущали, будь вы носителем английского языка. Почитать подробнее про эту технологию можно тут. Есть конкретный механизм мышления. Он состоит из визуального слоя, слоя смыслов и слоя слов. Механизм разбивается на элементы. Каждый элемент тренируется отдельно. Оттренированные элементы стыкуются друг с другом с помощью специальных упражнений. Здесь: - Пошаговая технология; - Разбор механик мышления на языке; - Простота — любое сложное упражнение должно быть разбито на простые. - Измеримость — все упражнения тренируются до норматива (как правило в секундах). Норматив гарантирует освоение упражнения на уровне навыка. - Сумма упражнений неизбежно приводит к мышлению на языке. Так же, как правильно собранные вместе детали создают автомобиль. Вот, например: - как найти английские артикли в русском; - как освоить что угодно в 10 раз быстрее; - как взломать английскую грамматику. Подписывайся, чтобы узнать больше.

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

🤔 Какие бывают значение у background-size? Свойство CSS background-size определяет размеры фонового изображения элемента. Это свойство позволяет контролировать, как фоновое изображение масштабируется и располагается внутри элемента. 🟠auto Исходный размер фонового изображения. Это значение по умолчанию.

background-size: auto;  

🟠cover Масштабирует фоновое изображение так, чтобы оно полностью покрывало контейнер. Изображение будет обрезано, чтобы сохранить свои пропорции.

background-size: cover; 

🟠contain Масштабирует фоновое изображение так, чтобы оно полностью помещалось внутри контейнера, сохраняя свои пропорции. Изображение будет уменьшено или увеличено, чтобы вписаться в контейнер без обрезки.

background-size: contain;   

🟠Ширина и высота в пикселях Определяет конкретные размеры изображения в пикселях.

background-size: 100px 50px;   

🟠Процентные значения Определяет размер изображения в процентах от размера контейнера.

background-size: 50% 25%;   

🟠Ширина Устанавливает ширину изображения, высота будет автоматически установлена для сохранения пропорций.

background-size: 100px;   

🟠Краткий синтаксис Устанавливает ширину и высоту одновременно.

background-size: width height;   

🚩Примеры использования Масштабирование изображения с cover

.element {
    background-image: url('example.jpg');
    background-size: cover;
}

Масштабирование изображения с contain

.element {
    background-image: url('example.jpg');
    background-size: contain;
}

Конкретные размеры в пикселях

.element {
    background-image: url('example.jpg');
    background-size: 100px 50px;
}

Процентные значения

.element {
    background-image: url('example.jpg');
    background-size: 50% 50%;
}

Одно значение (ширина)

.element {
    background-image: url('example.jpg');
    background-size: 100px;
}

Ставь 👍 и забирай 📚 Базу знаний

Программист — лекарство от больных тимлидов, тупых багов и тех самых митов в 10 утра ☠️ Здесь собирают лучшие мемы про айтишников, чтобы спасти вашу психику от died'осов на работе. Идеально зачиллить вечерком и скинуть друзьям: @progeri

Программист — лекарство от больных тимлидов, тупых багов и тех самых митов в 10 утра ☠️ Здесь собирают лучшие мемы про айтишников, чтобы спасти вашу психику от died'осов на работе. Идеально зачиллить вечерком и скинуть друзьям: @progeri

🤔Различие методов call apply bind? Методы `call` и `apply` выполняют функцию с заданным контекстом `this`, но `call` принимает аргументы по отдельности, а `apply` — в виде массива. Метод `bind` возвращает новую функцию с предустановленным значением `this`, которую можно вызвать позже. В отличие от `call` и `apply`, `bind` не вызывает функцию немедленно. `bind` часто используется для создания копий функций с привязкой контекста. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как убрать маркер у списка? Чтобы убрать маркер у списка, используйте свойство CSS list-style-type со значением none. Это свойство применяется к элементам списка <ul> (ненумерованный список) или <ol> (нумерованный список) и убирает маркеры (буллеты) у элементов списка <li>. Пример использования HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Список без маркеров</title>
    <style>
        .no-marker {
            list-style-type: none; /* Убирает маркеры */
            padding: 0; /* Убирает отступы */
            margin: 0; /* Убирает внешние отступы */
        }
    </style>
</head>
<body>
    <ul class="no-marker">
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
</body>
</html>

Пример использования CSS

.no-marker {
    list-style-type: none; /* Убирает маркеры */
    padding: 0; /* Убирает отступы */
    margin: 0; /* Убирает внешние отступы */
}

🟠list-style-type: none; Убирает маркеры у элементов списка <li>. 🟠padding: 0; Убирает внутренние отступы у списка. Это полезно, поскольку некоторые браузеры добавляют отступы по умолчанию. 🟠margin: 0; Убирает внешние отступы у списка. Ставь 👍 и забирай 📚 Базу знаний

Как легко прокачать навыки верстки и найти работу? Присоединяйся к каналам опытного верстальщика: 2. Вёрстка сайтов | HTML, CSS, JS — здесь собраны бесплатные, структурированные уроки и различные материалы по HTML, CSS, JS, а также советы по заработку на фрилансе. 2. Работа — вёрстка и фронтенд — канал с лучшими вакансиями и проектами с фриланса по вёрстке и фронтенду Научись и зарабатывай на верстке!

🤔 Какие способы изоляции стилей ты знаешь? Изоляция стилей может быть достигнута с помощью CSS-модулей, которые создают уникальные имена классов для предотвращения конфликта стилей. Shadow DOM изолирует стили внутри веб-компонентов, не позволяя им влиять на внешний код. Также можно использовать атрибуты, такие как `scoped` для стилей внутри Vue.js или инкапсуляцию стилей с помощью `@import` и `:host` в веб-компонентах. Все эти способы помогают избежать пересечения стилей и гарантируют их изоляцию. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 За что отвечает justify-content и align-tiems у flexbox контейнера? В CSS Flexbox, свойства justify-content и align-items используются для управления выравниванием и распределением элементов внутри flex-контейнера. 🚩`justify-content` Свойство justify-content определяет, как flex-элементы должны быть распределены вдоль основной оси (main axis) контейнера. Основная ось по умолчанию — это горизонтальная ось для flex-direction: row и вертикальная ось для flex-direction: column. 🟠flex-start Элементы прижаты к началу контейнера.

.container {
    display: flex;
    justify-content: flex-start;
}   

🟠flex-end Элементы прижаты к концу контейнера.

.container {
    display: flex;
    justify-content: flex-end;
}   

🟠center Элементы выровнены по центру контейнера.

.container {
    display: flex;
    justify-content: center;
}   

🟠space-between Элементы равномерно распределены, первый элемент прижат к началу, последний элемент — к концу контейнера.

.container {
    display: flex;
    justify-content: space-between;
}   

🟠space-around Элементы равномерно распределены с равным отступом вокруг них.

.container {
    display: flex;
    justify-content: space-around;
}   

🟠space-evenly Элементы равномерно распределены с равными отступами между ними и краями контейнера.

.container {
    display: flex;
    justify-content: space-evenly;
}   

🚩`align-items` Свойство align-items определяет, как flex-элементы должны быть выровнены вдоль поперечной оси (cross axis) контейнера. Поперечная ось перпендикулярна основной оси: вертикальная ось для flex-direction: row и горизонтальная ось для flex-direction: column. 🟠flex-start Элементы прижаты к началу поперечной оси контейнера.

.container {
    display: flex;
    align-items: flex-start;
}   

🟠flex-end Элементы прижаты к концу поперечной оси контейнера.

.container {
    display: flex;
    align-items: flex-end;
}   

🟠center Элементы выровнены по центру поперечной оси контейнера.

.container {
    display: flex;
    align-items: center;
}   

🟠baseline Элементы выровнены по их базовой линии текста.

.container {
    display: flex;
    align-items: baseline;
}   

🟠stretch Элементы растянуты, чтобы заполнить контейнер вдоль поперечной оси (по умолчанию).

.container {
    display: flex;
    align-items: stretch;
}   

Ставь 👍 и забирай 📚 Базу знаний

🤔 В чем разница == и ===? == сравнивает значения с приведением типов, что может приводить к неожиданным результатам, тогда как === сравнивает как значения, так и типы данных. Это означает, что === является более строгим оператором и не выполняет автоматическое преобразование типов. Например, 1 == '1' вернёт true, а 1 === '1' — false. Использование === более предпочтительно для избежания ошибок. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний