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

🤔 Что такое псевдоклассы? Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое. :hover — применяется к элементу, когда на него наводят курсор мыши.

a:hover {
  color: red; /* Ссылка станет красной при наведении /
}

:focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).

input:focus {
  border-color: blue; / Граница инпута станет синей при фокусе /
}

:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).

button:active {
  transform: scale(0.98); / Кнопка немного уменьшится при клике /
}

:nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.

li:nth-child(odd) {
  background-color: gray; / Заливка каждого нечетного элемента списка /
}

:not() — исключает из выборки элементы, соответствующие указанному селектору.

div:not(.special) {
  color: green; / Применяется к каждому div, который не имеет класса special */
}

🚩Зачем нужны псевдоклассы? Они делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя. Ставь 👍 и забирай 📚 Базу знаний

Виртуальный сервер в аренду в Турции или России. Отказоустойчивый виртуальный облачный сервер на базе виртуализации VMWARE по модели подписки. - Бесплатная миграция инфраструктуры в Турцию - Размещайте ресурсы в Турции или России и оплачивайте в рублях, турицких лирах или евро. - Храните резервные копии данных за рубежом для минимизации рисков - Продолжайте использовать импортное ПО, скачивайте обновления и патчи, общайтесь с техподдержкой - Доступность сервиса — от 99,982% SLA - Дата центры Tier III в России и Турции - Почасовой биллинг и постоплата Подключите услугу сегодня со скидкой 50% на инфраструктуру. Подать заявку #реклама cloud4y.ru О рекламодателе

🤔 Что произойдёт, если написать typeof null? Результат будет "object". Это историческая ошибка в JavaScript, которая сохраняется для обратной совместимости. Хотя null — это примитив, typeof возвращает "object". Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Как frontend-разработчику получить оффер в Bigtech? Ты вроде бы уже не джун, но всё равно чувствуешь, что топчешься на месте? Рынок перегрет, требований всё больше, а откликов — всё меньше? На собесах валят на алгоритмах или просят "нарисовать" архитектуру, как будто ты ведущий. При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, а у тебя не получается даже дойти до финального этапа? Хочется стабильности, интересных задач и наконец-то попасть в сильную команду... Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке. В своем канале: 👉 публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях 👉даю примеры по прохождению собеседований 👉разбираю резюме и докручиваю резюме подписчиков 👉и просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать 🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки. Подписывайся и получай максимум пользы, а нас уже больше 3500 🤓: frontend_punks Реклама, erid: 2W5zFGezJv4 ИП Галактионов Тихон Витальевич, ИНН 771618975809

Методичка: как сделать онлайн-встречи эффективнее Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать? Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи. Из методички узнаете: - Как создать постоянную ссылку и подключаться на встречи в 2 клика, - Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных. - Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту. Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч. Получить гайд можно бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Что такое merge и rebase, в чем отличие друг от друга? Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев. 🚩Merge (слияние) Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния. Предположим, у вас есть две ветки: main и feature. В ветке feature вы сделали несколько коммитов. Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

🚩Rebase (перебазирование) Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов. Предположим, у вас есть две ветки: main и feature. В ветке feature вы сделали несколько коммитов. Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

🚩Основные отличия 🟠История коммитов Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток. Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений. 🟠Коммиты слияния Merge: Создает новый коммит слияния, который объединяет изменения из двух веток. Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую. 🟠Конфликты Merge: Конфликты решаются один раз при слиянии. Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно. 🟠Применение Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе. Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master. Ставь 👍 и забирай 📚 Базу знаний

🤔 Особенности работы с function expression и function declaration? - Function declaration: создаётся при фазе инициализации, доступна до объявления; - Function expression: создаётся во время выполнения, не доступна до строки объявления; - У выражения можно создавать анонимные функции или присваивать переменным. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Высшее образование онлайн — поменяйте жизнь в 2025 году! ✅Набор в сентябре: от 6700 ₽/мес.* Московский технологический институт предлагает: — Высшее образование в московском вузе без выезда на сессии — Полностью дистанционный онлайн-формат — Возможность обучаться дома, на работе, в путешествии — Диплом государственного образца — Более 60 направлений на выбор (IT, инженерные, экономические, педагогические, управленческие и другие) — 5 способов оплаты обучения — Поддержка персонального куратора: от поступления до получения диплома Узнать больше #реклама 16+ mti-vuz.ru О рекламодателе

🤔 Можно ли перезапустить остановленный promise? Нет, Promise в JavaScript нельзя перезапустить. Промисы являются одноразовыми: после того как они переходят в одно из состояний — выполнен (resolved) или отклонён (rejected) — их состояние больше не может измениться. Это одно из ключевых свойств промисов. 🚩Почему нельзя перезапустить Promise? Промис, как только выполняется, становится иммутабельным. После выполнения (resolve) или отклонения (reject), он остаётся в этом состоянии навсегда. Промисы предназначены для представления единственного результата асинхронной операции. Их дизайн не предполагает повторного запуска той же самой асинхронной логики.

const myPromise = new Promise((resolve, reject) => {
  resolve('Done!');
});

myPromise.then((result) => console.log(result)); // "Done!"

// Даже если вы попытаетесь вызвать resolve или reject снова, ничего не произойдет
myPromise.then((result) => console.log(result)); // "Done!" (результат уже закеширован)

🚩Что делать, если нужно "перезапустить" асинхронную операцию? Если вы хотите выполнить операцию заново, вместо "перезапуска" Promise нужно создать новый Promise или использовать функцию, которая возвращает новый Promise каждый раз.

function createPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Я новый промис!'), 1000);
  });
}

// Первый вызов
createPromise().then((result) => console.log(result)); // "Я новый промис!"

// "Перезапуск"
createPromise().then((result) => console.log(result)); // "Я новый промис!" (новый промис создан)

🚩Как это сделать с использованием `async/await`? Это синтаксический сахар над промисами. Если вам нужно "перезапустить" асинхронную операцию, просто вызовите асинхронную функцию ещё раз.

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('Данные загружены!'), 1000);
  });
}

async function main() {
  const data1 = await fetchData();
  console.log(data1); // "Данные загружены!"

  const data2 = await fetchData(); // "Перезапуск" fetchData
  console.log(data2); // "Данные загружены!"
}

main();

🚩Повторная попытка выполнения промиса (ретрай) Если вам нужно повторно попытаться выполнить операцию (например, в случае неудачи), можно реализовать "ретрай". Это особенно полезно для операций вроде сетевых запросов.

function fetchDataWithRetry(retries) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.7) { // 70% шансов на ошибку
        resolve('Данные успешно загружены!');
      } else {
        reject('Ошибка загрузки данных');
      }
    }, 1000);
  }).catch((error) => {
    if (retries > 0) {
      console.log(`Повторная попытка... Осталось: ${retries}`);
      return fetchDataWithRetry(retries - 1); // Рекурсивный вызов
    } else {
      throw error; // Если попытки исчерпаны, выбрасываем ошибку
    }
  });
}

fetchDataWithRetry(3)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

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

Для крупных покупок выбирайте аккредитив Газифицируете участок или приобретаете дорогостоящую технику, мебель на заказ? Оформите аккредитив от СберБанка — оплата пройдёт только после исполнения подрядчиком всех обязательств. Какие ещё преимущества? 👌Удобство: можно оставить заявку на сайте и подписать документы в СберБанк Онлайн. ⚡Скорость: оформление — 10 минут, средства переведём за 1 день. 💰 Доступность: стоимость от 500 ₽. Узнайте, в каких случаях аккредитив пригодится вам, на сайте Узнать больше Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: ПАО Сбербанк. #реклама sberbank.ru О рекламодателе

🤔 Что такое screen reader и accessibility? Screen reader — это программа, которая озвучивает содержимое экрана для людей с нарушениями зрения. Accessibility (доступность) — это практика разработки интерфейсов, которые доступны всем пользователям, включая людей с ограниченными возможностями. Это включает ARIA-атрибуты, контрастность, навигацию с клавиатуры и семантику. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как реализовать адаптивную верстку? Адаптивная верстка (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>

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

Ищу желающих выполнять задачи с помощью ИИ! Работа полностью на удаленке с зп до 150 000 рублей в месяц. Без опыта, нужен только телефон, занятость 3-6 часов в день. Всему обучат на бесплатном курсе и после возьму на работу: ✅ 3 дня уроков по 30 минут ✅ Домашки с проверкой и оплатой бонусами ✅ Плачу 10 тыс за каждую выполненную домашку Все кто пройдет курс, получат сертификат от школы с образовательной лицензией. ⚡ Набор заканчивается завтра. 👍 Для регистрации жмите кнопку "Зарегистрироваться": Зарегистрироваться #реклама 16+ ganstaagency.com О рекламодателе

🤔 Что известно про отдельные домены для статики? Использование отдельных доменов (например, static.example.com) для статики позволяет: - разграничить кэш между основным контентом и статикой; - избежать лишней отправки cookie; - ускорить загрузку ресурсов браузером (параллельные запросы); - повысить безопасность (ограничение CORS и хедеров). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое async и await? Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises). 🚩Ключевое слово async Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.

async function fetchData() {
  return 'данные';
}

fetchData().then(data => console.log(data)); // выводит "данные"

🚩Ключевое слово await Используется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.

async function fetchData() {
  let data = await fetch('https://api.example.com/data');
  let json = await data.json();
  return json;
}

🚩Плюсы ➕Улучшение читаемости кода Асинхронный код, написанный с использованием async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание ➕Упрощение обработки ошибок В асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее. ➕Избегание "callback hell" Использование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками. Ставь 👍 и забирай 📚 Базу знаний

Научим создавать AI-ассистентов за 1 практикум ⚡ Автоматизируй 80% рутинных задач с AI-ассистентом! На бесплатном вебинаре 2 октября научим создавать AI-помощников для работы и жизни. Без программирования! За 1,5 часа вы получите: ✅ Собственного маркетолога, карьерного консультанта или контент-ассистента. ✅ Практику в прямом эфире — сразу создадите своего ассистента. ✅ Готовое решение, которое работает бесплатно. Специальный подарок после регистрации: «Гайд по созданию цифрового аватара» 💰 Успей зарегистрироваться Зарегистрироваться #реклама 16+ ed.bonnieandslide.com О рекламодателе

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

🤔 Какие статические методы 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: Все промисы отклонены

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

REKONFA Live 6 ноября приглашаем всех, кто имеет отношение к маркетингу и рекламным технологиям, обсудить рынок, тренды, вызовы и их решения. С докладами на актуальные темы выступят лидеры индустрии и медийные спикеры. Принять участие можно офлайн и онлайн. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

🤔 Каким сайтам может быть полезно AMP? - Новостные порталы, блоги, СМИ. - Страницы лендингов, где важна моментальная загрузка. - Сайты, сильно зависящие от SEO и мобильного трафика. Но AMP имеет ограничения и постепенно теряет популярность в пользу Core Web Vitals и PWA. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний