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

🤔 Для чего нуден key при работе со списками? В React при рендере списков (например, через .map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке. 🚩Почему `key` важен? React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим. Без key React не понимает, какие элементы изменились, удалились или добавились. Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру. 🚩Как использовать `key` правильно?

    
        const users = ["Alice", "Bob", "Charlie"];

function UserList() {
    return (
        <ul>
            {users.map((user, index) => (
                <li key={user}>{user}</li> // Хорошо, если `user` уникален
            ))}
        </ul>
    );
}{}
    

🚩Что будет без `key`? Если не указать key, React выдаст предупреждение:

    
        Warning: Each child in a list should have a unique "key" prop.{}
    

Кроме того, при изменении списка возможны проблемы с перерисовкой

    
        {users.map((user, index) => (
    <input key={index} defaultValue={user} />
))}{}
    

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

🤔 Что такое абсолютная ссылка? Абсолютная ссылка содержит полный путь до ресурса, включая протокол и домен. Она работает независимо от расположения текущего документа. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие есть значения у box-sizing? Свойство box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. 🚩Возможные значения `box-sizing` 🟠`content-box` Размеры элемента считаются только по `width` и `height`, без учета padding и border. Если добавить padding или border, фактические размеры элемента увеличатся.

    
           .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: content-box;
   }{}
    

🟠`border-box` width и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры.

    
           .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: border-box;
   }{}
    

🟠`inherit` Наследует значение box-sizing от родительского элемента.

    
           .parent {
       box-sizing: border-box;
   }
   .child {
       box-sizing: inherit; /* Унаследует border-box */
   }{}
    

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

🤔 Какие бывают коды ответов с сервера? - 1xx — информационные; - 2xx — успешные (200, 201, 204); - 3xx — перенаправления (301, 302); - 4xx — ошибки клиента (400, 401, 403, 404); - 5xx — ошибки сервера (500, 502, 503). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Почему у нас в css нет селектора на родителе? В CSS нет селектора родителя, потому что это нарушило бы оптимизацию и производительность рендеринга. 🚩Как работают селекторы в CSS? Обычные селекторы идут от родителя к дочерним элементам.

    
        .parent .child {
  color: red;
}{}
    

Что было бы с селектором родителя?

    
        .child:has-parent(.parent) { 
  color: red;
}{}
    

🚩Использовать `:has()` (в современных браузерах) В CSS4 появился :has(), который позволяет изменять родителя, если в нём есть определённый потомок.

    
        .parent:has(.child) {
  border: 2px solid red;
}{}
    

🚩Использовать Flexbox/Grid вместо селектора родителя Иногда можно поменять структуру HTML и стилизацию, чтобы избежать проблемы.

    
        .parent {
  display: flex;
  gap: 10px;
}{}
    

🚩Использовать JavaScript Если нужно изменить родителя динамически, можно использовать JavaScript.

    
        document.querySelectorAll(".child").forEach(child => {
  child.parentElement.classList.add("has-child");
});{}
    

    
        .has-child {
  border: 2px solid blue;
}{}
    

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

🤔 Какие популярные форматы картинок используются в веб-верстке? - JPEG — для фотографий; - PNG — для изображений с прозрачностью; - GIF — для простых анимаций; - SVG — векторная графика, масштабируется без потери качества; - WEBP — современный формат с хорошим сжатием и качеством. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как методы будут у api? В API (Application Programming Interface) обычно используются HTTP-методы, которые определяют, какое действие нужно выполнить с ресурсом (данными). 🚩Примеры использования 🟠`GET` – Получение данных Запрашиваем список пользователей:

    
        GET /users HTTP/1.1
Host: api.example.com{}
    

Ответ (JSON)

    
        [
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]{}
    

🟠`POST` – Создание нового ресурса Отправляем данные нового пользователя:

    
        POST /users HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Charlie",
  "email": "charlie@example.com"
}{}
    

Ответ (201 Created)

    
        {
  "id": 3,
  "name": "Charlie",
  "email": "charlie@example.com"
}{}
    

🟠`PUT` – Полное обновление ресурса Заменяем пользователя с ID 1:

    
        PUT /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Smith",
  "email": "alice.smith@example.com"
}{}
    

🟠`PATCH` – Частичное обновление ресурса Меняем только имя пользователя 1, не трогая email:

    
        PATCH /users/1 HTTP/1.1
Host: api.example.com
Content-Type: application/json

{
  "name": "Alice Johnson"
}{}
    

🟠`DELETE` – Удаление ресурса Удаляем пользователя с ID 2:

    
        DELETE /users/2 HTTP/1.1
Host: api.example.com{}
    

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

🤔 Какие есть операторы в JS? Арифметические (+, -, *, /), логические (&&, ||, !), сравнения (==, ===, >, <), присваивания (=, +=), тернарный (?:), побитовые, typeof, instanceof, delete, new, in и др. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как браузер понимает что ресурс нужно закешировать? Браузер использует HTTP-заголовки и механизмы кэширования, чтобы решить, нужно ли сохранять ресурс (HTML, CSS, JS, изображения) и как долго его хранить. 🚩Как браузер решает, кешировать ресурс или нет? Когда браузер загружает ресурс, сервер может сказать браузеру, как его кешировать, с помощью HTTP-заголовков.

    
        HTTP/1.1 200 OK
Cache-Control: max-age=3600, public
ETag: "abc123"{}
    

🚩Как работают заголовки кэширования? 🟠`Cache-Control` – главный заголовок Определяет, как долго ресурс должен храниться в кэше.

    
        Cache-Control: max-age=86400, public{}
    

🟠`Expires` – устаревший, но ещё используется Определяет конкретную дату, до которой браузер может использовать кэшированный ресурс.

    
        Expires: Wed, 26 Feb 2025 12:00:00 GMT{}
    

🟠`ETag` – проверка обновлений ресурса Позволяет браузеру узнать, изменился ли файл на сервере.

    
        ETag: "abc123"{}
    

Если браузер снова запрашивает ресурс, он отправляет заголовок

    
        If-None-Match: "abc123"{}
    

🟠`Last-Modified` – альтернатива `ETag` Дата последнего изменения ресурса.

    
        Last-Modified: Tue, 25 Feb 2025 15:30:00 GMT{}
    

Браузер может отправить запрос с

    
        If-Modified-Since: Tue, 25 Feb 2025 15:30:00 GMT{}
    

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

Как frontend-разработчику получить оффер в Big Tech? Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные. Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK... Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.

Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке. В своем канале: 👉Разбираю самые популярные и каверзные вопросы на собесах 👉Рассказываю как пройти фильтр HR 👉Борюсь с убеждениями, которые мешают развиваться 👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров Регулярно публикую полезные материалы: ▪️60 вопросов, которые точно помогут тебе на собеседовании. ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1 ▪️Чек лист проверки своего резюме Подписывайся, нас уже 4500 🤓: ссылка Реклама, erid 2W5zFJrCWRN: ИП Галактионов Тихон Витальевич, ИНН 771618975809