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

🤔 Как защитить Cookie от JavaScript? Если cookie содержит чувствительную информацию (например, auth_token), важно защитить его от доступа через JavaScript. Иначе злоумышленник может украсть его через XSS-атаку (Cross-Site Scripting). 🟠Используем флаг `HttpOnly` (основная защита) HttpOnly делает cookie недоступным для JavaScript (document.cookie).

Set-Cookie: auth_token=abc123; HttpOnly; Secure; SameSite=Strict

🟠Используем `Secure`, чтобы cookie передавались только по HTTPS Флаг Secure запрещает передачу cookie через HTTP, только HTTPS.

Set-Cookie: auth_token=abc123; Secure

🟠Используем `SameSite`, чтобы защититься от CSRF-атак SameSite=Strict или SameSite=Lax защищает от подделки запросов (CSRF).

Set-Cookie: auth_token=abc123; SameSite=Strict

🟠Не храним токены в cookie (если можно) Если возможно, используйте Authorization: Bearer заголовки вместо cookie.

Authorization: Bearer abc123

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

🤔 Что такое псевдоклассы? Псевдоклассы в CSS используются для определения специальных состояний элементов. Например, :hover применяется к элементам, когда пользователь наводит на них курсор, а :first-child выбирает первый дочерний элемент в своем контейнере. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Теперь тебе не придется искать работу самому Совсем скоро я анонсирую первого в России AI-ассистента для поиска работы. И у тебя будет шанс попробовать его бесплатно. Все, что нужно будет сделать - это пройти короткий опрос про твой опыт работы и подключить ее к аккаунту на хэдхантере. Дальше произойдет магия. 🔵Софи структурирует твой опыт в резюме и опишет его через результаты. А еще добавит ключевые слова и адаптирует резюме под вакансию. 🔵Она сама будет делать до 100 откликов в день, причем каждый отклик будет соответствовать твоему стеку, зарплатным ожиданиям и нужному формату работы. 🔵Софи будет писать сопроводительные письма для каждой компании, учитывая их ценности, боли и требования к сотрудникам. 🔵Ты больше не будешь узнавать про отказы от работодателей - Софи будет присылать только полезные апдейты по сделанным откликам. 🔵Как только ты получишь приглашение на собес, Софи найдет свободный слот в твоем календаре и запланирует встречу. А еще пришлет тебе описание компании, вакансии, вопросы которые могут задать и материалы по подготовке. 15 июля я проведу прямой эфир и открою бесплатный доступ к Софи для 350 человек. Сразу после мы закроем продажи на несколько недель. Первые пользователи также получат 2 бонуса: -3 месяца подписки за 14990 3500 рублей. -Бесплатный доступ к тренажеру собеседований на 1 месяц. 15 июля. 350 мест. Подпишись, чтобы не пропустить.

🤔 Что такое боксинг? Это процесс упаковки примитивного типа данных в объект. Это делается, чтобы примитивные типы могли работать как объекты в тех ситуациях, где объекты необходимы, например, в коллекциях (таких как ArrayList или HashMap) или при вызове методов, ожидающих объект в качестве аргумента. 🚩Зачем нужен боксинг? 🟠Единый подход к данным Примитивы сами по себе не являются объектами. Они имеют меньший размер и работают быстрее, но иногда нужно обернуть их в объект, чтобы пользоваться методами или хранить их в структурах данных, предназначенных для объектов. 🟠Совместимость Во многих случаях требуется, чтобы данные могли быть использованы в объектно-ориентированных конструкциях, где примитивы недоступны. 🟠Гибкость Примитивы нельзя присвоить переменной типа Object, а после боксинга это становится возможным. 🚩Как это работает? Примитивные типы, такие как int, double или boolean, автоматически упаковываются в их соответствующие классы-обертки, такие как Integer, Double и Boolean. Это действие называется автобоксингом.

// Боксинг вручную
int primitiveInt = 42;
Integer boxedInt = Integer.valueOf(primitiveInt); // Боксинг

// Автобоксинг
Integer autoBoxedInt = 42; // Примитив int автоматически упакован в Integer

// Распаковка (unboxing)
int unboxedInt = autoBoxedInt; // Integer автоматически преобразован обратно в int

Коллекции в Java (например, ArrayList) работают только с объектами. Поэтому, если вы хотите сохранить int в коллекции, он автоматически упаковывается в Integer.

import java.util.ArrayList;

public class Example {
    public static void main(String[] args) {
        ArrayList<Integer> numbers = new ArrayList<>();
        numbers.add(10); // Автобоксинг: int превращается в Integer
        numbers.add(20);
        
        int num = numbers.get(0); // Авто-распаковка: Integer превращается в int
        System.out.println(num); // 10
    }
}

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

🤔 Что известно про вёрстку под разные размеры экранов? - Используются медиа-запросы (@media). - Применяется flexbox и grid для адаптивных макетов. - Используются относительные единицы (%, vh, vw, em) вместо фиксированных. - Можно применять mobile-first стратегию. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как растянуть элемент на 100%? Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы. 🟠Растяжение элемента на 100% ширины (`width: 100%;`) Элемент займет всю ширину своего родителя.

<div style="width: 300px; background: lightblue;">
  <div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div>

🟠Растяжение элемента на 100% высоты (`height: 100%;`) Элемент займет всю высоту родительского элемента.

<div style="height: 300px; background: lightblue;">
  <div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>

🟠Растяжение элемента на 100% ширины и высоты Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>

🟠Растяжение относительно окна браузера (`viewport`) Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).

<div style="width: 100vw; height: 100vh; background: coral;">
  Я растянут на весь экран!
</div>

Для исключения полосы прокрутки можно использовать

width: calc(100vw - 16px); /* Учитывается ширина скролла */

🟠Использование `position: absolute` Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.

<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
    Я растянут абсолютно!
  </div>
</div>

🟠Растяжение внутри Flexbox-контейнера Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.

<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
  <div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>

🟠Растяжение внутри Grid-контейнера CSS Grid также позволяет растягивать элементы.

<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>

🟠Растяжение с учетом отступов Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
    Я растянут с учетом отступов!
  </div>
</div>

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

AI-помощник в Битрикс24 сам сделает сайт Вам просто надо написать промт-пожелание и за 30 секунд вы получите полноценный, продающий сайт Создать! Попробовать #реклама 16+ sites-24.bitrix24.ru О рекламодателе

🤔 Что такое шаблоны и строки? - Шаблоны — это заготовки для HTML или текста с переменными. - В JS часто реализуются как шаблонные строки: поддерживают интерполяцию через строка ${переменная}. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Почему у нас в 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;
}

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

Специальность «Интеллектуальный анализ данных» 🎓Открыт набор в Университет IThub 2025-2026! Программа бакалавриата «Прикладная информатика» Программа создана для будущих аналитиков данных и специалистов по машинному обучению, которые хотят работать с большими данными и искусственным интеллектом. Она идеально подойдет выпускникам колледжей, которые получили диплом по IT-специальности: разработке, программированию, информационной безопасности, системному администрированию. Программа сочетает актуальные знания в информатике и навыки работы с данными, что делает выпускников востребованными в IT-компаниях, банках, ритейле и других сферах, где нужен анализ данных. 📚Практические навыки + стажировки и 💰трудоустройство! ✅День открытых дверей 22 июня! Перейти на сайт #реклама 16+ univer.ithub.ru О рекламодателе

🤔 Какие плюсы и минусы работы с Redux? Плюсы: - Централизованное хранилище данных. - Прозрачная структура данных (весь state виден). - Простота тестирования — вся логика сосредоточена в reducer’ах. - Огромное сообщество, поддержка Redux Toolkit, DevTools. Минусы: - Много шаблонного кода (actions, reducers, types). - Ощущается "тяжеловесным" в небольших проектах. - Потенциальная избыточность для простых случаев. - Работа с асинхронностью требует дополнительных библиотек (redux-thunk, redux-saga). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

📺 Уникальная база IT собеседований 456+ реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы. Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

🤔 Почему повсеместно нужен https? HTTPS (HyperText Transfer Protocol Secure) — это безопасная версия HTTP, которая шифрует данные между браузером и сервером. Он защищает пользователей и сайты от перехвата данных, атак и подделки информации. 🚩 Главные причины использовать HTTPS 🟠Шифрование данных (Защита от перехвата) Без HTTPS злоумышленники могут перехватить* данные, например, пароли или банковские карты. В HTTP данные передаются открытым текстом (их легко украсть в открытых Wi-Fi). В HTTPS данные зашифрованы с помощью SSL/TLS, и даже если их перехватят, их невозможно прочитать. 🟠Защита от атак "Человек посередине" (MITM) Без HTTPS злоумышленник может подменить содержимое сайта. Опасные сценарии: Хакер в Wi-Fi кафе встраивает вредоносный код в сайт. Вредоносный провайдер заменяет рекламу или ворует куки. 🟠Google даёт больше доверия к HTTPS-сайтам Google понижает в поиске сайты без HTTPS, а Chrome помечает их как "Небезопасные". 🟠Обязателен для онлайн-платежей и авторизации Для ввода паролей, карт и личных данных HTTPS обязателен по закону (например, PCI DSS для платежей). Если сайт работает без HTTPS, браузеры блокируют передачу банковских данных. Ставь 👍 и забирай 📚 Базу знаний

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

🤔 Какие модификаторы есть у v-model? Для двусторонней привязки данных с помощью v-model есть модификаторы, позволяющие изменить стандартное поведение. Например, можно задать обновление значения только при завершении ввода, автоматически преобразовать значение в число или убрать пробелы с краёв строки. Это помогает упростить валидацию данных и уменьшить количество ошибок при вводе. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое псевдоэлемент? Это специальный синтаксис, позволяющий стилизовать определенные части элемента или добавлять специальные элементы (как бы "элементы-призраки"), не создавая для этого дополнительные теги в HTML. Псевдоэлементы предоставляют удобный способ внесения изменений в структуру документа, не затрагивая HTML. 🚩Синтаксис Начинается с двойного двоеточия (::), за которым следует название псевдоэлемента. Например, ::before или ::after. 🟠Распространенные псевдоэлементы ::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов.

    p::before {
    content: "«";
    color: blue;
  }
  
  p::after {
    content: "»";
    color: blue;
  }
  

::first-line: Применяет стили к первой строке текста в блочном элементе.

    p::first-line {
    font-weight: bold;
  }
  

::first-letter: Применяет стили к первой букве текста в блочном элементе.

    p::first-letter {
    font-size: 200%;
  }
  

::selection: Применяет стили к части текста, которую пользователь выделил.

    p::selection {
    background: yellow;
  }
  

🚩Особенности работы Работают как часть документа, но на самом деле не существуют в DOM-дереве, а создаются стилями. Чтобы псевдоэлементы ::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";). Могут быть стилизованы почти так же, как обычные элементы, но есть некоторые ограничения, например, связанные с взаимодействием с JavaScript. Ставь 👍 и забирай 📚 Базу знаний

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

Высшее образование дистанционно от 6700 ₽/мес. Поступи в Московский технологический институт в июне! — Высшее образование в московском вузе без выезда на сессии. — Полностью дистанционный онлайн-формат. — Обучайся дома, на работе, в путешествии. — Диплом государственного образца. — 73 направления и программы обучения. — Программа колледж + вуз без ЕГЭ. Скидка 10% на платное обучение при оплате за год. Подать заявку #реклама 16+ mti-vuz.ru О рекламодателе

🤔 Расскажи о действиях в vuex В Vuex (хранилище данных в Vue 2 и 3) actions используются для выполнения асинхронных операций, прежде чем изменить состояние (state). 🚩 Как работают actions? 🟠Определение action в `actions` В actions передаётся объект context, из которого можно вызвать commit() для изменения state.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit("increment"); // Вызываем мутацию через 1 сек
      }, 1000);
    }
  }
});

🟠Как вызвать action? Actions вызываются через dispatch(), а не commit().

store.dispatch("asyncIncrement");

🟠Actions с параметрами Можно передавать параметры в dispatch(), чтобы использовать их внутри action.

actions: {
  asyncIncrement(context, payload) {
    setTimeout(() => {
      context.commit("increment");
      console.log("Задержка:", payload.delay);
    }, payload.delay);
  }
}

store.dispatch("asyncIncrement", { delay: 2000 });

🟠Возвращение `Promise` в actions Если action должен дождаться завершения, можно вернуть Promise.

actions: {
  fetchData(context) {
    return fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(data => {
        console.log("Данные получены:", data);
      });
  }
}

store.dispatch("fetchData").then(() => {
  console.log("Данные загружены!");
});

🟠Использование `async/await` в actions Можно использовать async/await, чтобы код выглядел чище.

actions: {
  async fetchData(context) {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log("Данные:", data);
  }
}

await store.dispatch("fetchData");
console.log("Данные загружены!");

🟠Actions могут вызывать другие actions Если нужно выполнить несколько actions последовательно, можно вызывать один action внутри другого.

actions: {
  async firstAction(context) {
    console.log("Первый action выполнен");
  },
  async secondAction(context) {
    await context.dispatch("firstAction");
    console.log("Второй action выполнен");
  }
}

store.dispatch("secondAction");
// Выведет: "Первый action выполнен"
// Затем: "Второй action выполнен"

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

VK Weekend Offer для бэкенд-разработчиков 28–29 июня VK проведёт Weekend Offer для бэкендеров с опытом от трёх лет. Участников со знанием Java, Go, Python или C++ ждут технические собеседования, знакомство с продуктами и, если всё сложится, офер уже в конце выходных. Ребята много лет создают облачные решения, системы рекомендаций и поисковые движки — всё с миллионами пользователей в проде — и сейчас ищут новых коллег. Поэтому оставляйте заявку до 25 июня, чтобы попасть в команду за выходные! Подробности — на сайте. Подать заявку #реклама 16+ team.vk.company О рекламодателе