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

🤔 Как браузер понимает что ресурс нужно закешировать? Браузер использует 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 Здесь на простых картинках и понятном языке обучают фронтенд-разработке, делятся полезными фишками и ресурсами Подписывайтесь: @FrontendPortal

🚨 Последний шанс! Сегодня — последний день краудфандинга. Через несколько часов всё закроется, и больше невозможно будет поучаствовать. Если ты хотел, но откладывал — СЕЙЧАС самое время. Займёт 2 минуты, но изменит твой подход к собеседованиям надолго. Поддержи easyoffer 2.0 и получи: 🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование PRO подписка к easyoffer 2.0: ✅ Доступ к списку вопросов, которые задаются на собеседованиях + вероятность встречи этих вопросов + их фильтрация по грейдам, типам интервью, компаниям ✅ Доступ к лучшим ответам на вопросы ✅ Список самых частых задач, которые задаются на собеседовании + их фильтрация по грейдам и компаниям ✅ Доступ к лучшим ответам на задачи ✅ Список тестовых заданий компаний + лучшее решение ✅ Доступ к тренажеру "Проработка вопросов", который позволит очень быстро подготовиться к самым частым вопросам ✅ Доступ к тренажеру "Реальное собеседование", который позволит тренироваться проходить собеседование в конкретную компанию До конца кампании — остались часы. Поддержать: https://planeta.ru/campaigns/easyoffer 📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

10 сервисов для команд в подписке VK WorkSpace - 159 ₽ Представьте: утро начинается не с поиска нужного файла по всем мессенджерам и почтовым ящикам, а с одного окна, в котором собраны все рабочие чаты, почта и календарь, видеоконференции и другие сервисы для работы. VK WorkSpace делает это реальностью для сотен российских компаний. Наша платформа объединяет самые необходимые инструменты для командной работы, адаптируясь под потребности как крупных корпораций, так и небольших команд: - Почта на домене; - Календарь; - Задачи; - Доска; - Диск; - Редактор документов; - Мессенджер; - Видеоконференции; - Заметки; - Опросы. Подключитесь сегодня, протестируйте целый месяц и откройте новые возможности для роста! Зарегистрироваться #реклама 16+ biz.mail.ru О рекламодателе

🤔 Для чего нужен UTC? - Универсальное время — база для сравнения. - Избегаем проблем с часовыми поясами. - В БД храним в UTC, отображаем в локали. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Завтра последний день! Краудфандинг заканчивается уже завтра, и второй попытки не будет. 👉 Поддержи easyoffer 2.0 и получи: 🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование 📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

🤔 Как методы будут у 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

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

Срочно требуются Веб-Дизайнеры в Figma. Обучим с нуля. Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Какие есть подходы к адаптивности? - Media queries. - Flexbox / Grid. - Mobile-first дизайн. - rem, %, vw/vh вместо px. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

⏳ Осталось 3 дня! Финальный отсчёт пошёл — осталось всего 3 дня до окончания краудфандинга easyoffer 2.0 Сейчас можно получить максимум пользы за минимальные деньги. После окончания кампании цены вырастут и вознаграждения станут недоступны. 👉 Поддержи easyoffer 2.0 и получи: 🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу. ➕ Приглашение на закрытое бета-тестирование Поддержи проект сейчас, чтобы не забыть! 📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

Битрикс24 дропнул новую фичу — онлайн-доски Теперь к вашему рабочему мессенджеру, видеозвонкам и таскам добавился еще один маст-хэв инструмент. Все это бесплатно и в одном комплекте. Офисные стикеры, берегитесь.😊 Узнать больше #реклама 16+ bitrix24.ru О рекламодателе

🤔 Для чего необходим viewport? Viewport – это область видимой части веб-страницы в браузере пользователя. 🟠`meta viewport` – ключ для адаптивного дизайна Чтобы страница корректно отображалась на мобильных устройствах, используется мета-тег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

🟠Проблема без `meta viewport` (почему он нужен?) Без viewport (по умолчанию) На мобильных браузерах страницы загружаются как на ПК, но уменьшаются. Пользователям приходится зумить и скроллить. 🟠Дополнительные параметры `meta viewport` Управление масштабом

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Отключение адаптации iOS Safari

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

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

Ищешь высокооплачиваемые проекты? Попробуй SkillStaff SkillStaff — это платформа для ИТ-специалистов, менеджеров и креаторов, которым мало одного оклада. Здесь можно найти клиентов, выполнять их проекты и увеличивать свой доход. - Проекты с гибким графиком: part time, full time, удаленка и гибрид - Ставка за час работы — та, что ты сам выбрал - Клиенты — ведущие бренды, проверенные с юридической точки зрения при регистрации на платформе - Оплата поступает ежемесячно на расчетный счет исполнителя - Удобный личный кабинет и функционал, автоматизирующий документооборот Все, что нужно для работы — иметь статус самозанятого или ИП, а платформа поможет со всеми нюансами. Регистрируйся прямо сейчас Зарегистрироваться #реклама 16+ skillstaff.ru О рекламодателе

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

Офигеть, вот это поддержка! 🔥 Скажу честно: когда я планировал запуск краудфандинговой кампании, в голове были разные варианты развития событий. Думал — ну, наверное, получится собрать 300 тысяч. В самом идеальном сценарии — может быть, миллион. Но больше всего я боялся, что запущу кампанию, и не получится собрать даже 300 т. Это был бы провал. Так много усилий, времени и денег вложено в проект… и если бы всё закончилось ничем — это бы сильно демотивировало. Но, ребята, мы превысили изначальную цель в 10 раз — 3 031 040 рублей! 🤯 Вся эта кампания — это одна большая проверка бизнес-модели на прочность. И я супер рад, что запустил всё публично. Люди видят, что EasyOffer реально нужен. Теперь нет сомнений — проект актуален, он будет прибыльным и будет развиваться. Мне приходит огромное количество сообщений в личку: кто-то когда-то давно пользовался сайтом, он помог с трудоустройством, и сейчас они уже не ищут работу — но всё равно поддержали. Это прям очень круто и трогательно. Никак не могу отделаться от мысли, что easyoffer — это ведь мой первый сайт. Учебный, пет-проект, просто для портфолио. И вот что из него вышло. Просто офигеть. Я не зря ушёл с работы, чтобы заниматься только им. Я поверил в этот проект — и сейчас вижу, что вы тоже в него верите. Для меня это очень многое значит. Огромное спасибо за вашу поддержку! ❤️

🤔 В какой последователности будут вызываться хуки при использовании хуков жизненного цикла в миксине и подключении его в компонент? В Vue 2 и Vue 3 можно подключать миксины (mixins), которые добавляют в компонент дополнительные методы, данные и хуки жизненного цикла. 🚩Пример в Vue 2 Миксин (myMixin.js)

export default {
  created() {
    console.log("🌍 Миксин: created");
  }
};

Компонент (MyComponent.vue)

<script>
import myMixin from "./myMixin.js";

export default {
  mixins: [myMixin],
  created() {
    console.log("📦 Компонент: created");
  }
};
</script>

Вывод в консоль при создании компонента

Миксин: created
Компонент: created

Vue 3: хуки вызываются так же Если использовать setup(), он выполнится после хуков миксина

import { onMounted } from "vue";
export default {
  mixins: [myMixin],
  setup() {
    console.log("🚀 setup()");
  },
  mounted() {
    console.log("📦 Компонент: mounted");
  }
};

Вывод в консоль

Миксин: mounted
setup()
Компонент: mounted

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

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

🤔 Для чего в js нужна асинхронность? JavaScript – однопоточный язык, где код выполняется **последовательно, но иногда мы ждём ответа (запрос в интернет, чтение файла, таймер). Если всё делать синхронно, программа зависнет. 🟠Проблема синхронного кода Представьте, что мы загружаем данные из API синхронно:

const data = fetch("https://api.example.com/users"); // ❌ Ожидание ответа
console.log("Данные загружены:", data);

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

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log("Данные загружены:", data));

console.log("Этот код выполнится сразу! 🚀");

🚩Как работает асинхронность в JS? Callbacks (обратные вызовы) – старый способ. Promises (fetch(), then/catch) – современный вариант. async/await – удобный синтаксис для асинхронного кода. async/await – лучший способ писать асинхронный код

async function getData() {
    try {
        let response = await fetch("https://api.example.com/users");
        let data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка загрузки:", error);
    }
}

getData();
console.log("Этот код выполняется, пока ждём данные!");

🚩Где нужна асинхронность? Запросы к серверу Чтение файлов Таймеры Работа с базами данных Взаимодействие с пользователем (ожидание ввода) Ставь 👍 и забирай 📚 Базу знаний

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

🤔 Как реализовать адаптивную верстку? Адаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК). 🟠Гибкие сетки (Flexbox, Grid, `max-width`) Использование max-width вместо width

.container {
  width: 100%; /* Контейнер занимает всю ширину */
  max-width: 1200px; /* Но не больше 1200px */
  margin: auto; /* Центрирование */
}

Использование Flexbox

.container {
  display: flex;
  flex-wrap: wrap; /* Перенос элементов, если не влезают */
  justify-content: space-between;
}

.item {
  width: 48%; /* Два элемента в ряд */
}

@media (max-width: 768px) {
  .item {
    width: 100%; /* Один элемент в ряд на маленьких экранах */
  }
}

Использование CSS Grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

🟠Медиа-запросы (`@media`) Изменяют стили в зависимости от ширины экрана.

/* Десктоп (от 1024px) */
body {
  font-size: 18px;
}

/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
  body {
    font-size: 16px;
  }
}

/* Телефоны (до 767px) */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

🟠Адаптивные изображения (`srcset`, `sizes`) Позволяет загружать разные изображения в зависимости от устройства.

<img 
  src="image-400.jpg" 
  srcset="image-800.jpg 800w, image-1200.jpg 1200w" 
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" 
  alt="Адаптивное изображение">

🟠Viewport (`meta viewport`) Управляет масштабированием на мобильных устройствах.

<meta name="viewport" content="width=device-width, initial-scale=1">

🟠CSS-фреймворки (Bootstrap, Tailwind) Фреймворки содержат готовые адаптивные классы. Bootstrap (грид-система)

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">Контент</div>
    <div class="col-md-6 col-sm-12">Контент</div>
  </div>
</div>

Tailwind CSS

<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
  <div class="bg-blue-500">1</div>
  <div class="bg-green-500">2</div>
  <div class="bg-red-500">3</div>
</div>

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