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

🤔 В чём преимущество синтаксического сахара в виде async/await над Promise? - Легче читать и писать последовательный асинхронный код; - Упрощает обработку ошибок с try/catch; - Позволяет писать код, похожий на синхронный; - Устраняет вложенность .then(). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation? Оба подхода используются в веб-разработке для обеспечения доступности и совместимости веб-приложений на разных устройствах и браузерах. 🚩Progressive Enhancement (Прогрессивное улучшение) Сначала создаём простую, но рабочую версию сайта, которая работает на всех устройствах и браузерах. Затем добавляем улучшения (CSS-анимации, сложный JavaScript), которые работают только в современных браузерах. 🚩Graceful Degradation (Постепенное упрощение) Сначала создаём полнофункциональную версию с последними технологиями. Затем добавляем fallback'и (упрощённые версии) для старых браузеров. Используем CSS Grid, но добавляем @supports для fallback'а на Flexbox Приложение на React, но показываем простой HTML, если JavaScript отключён. Ставь 👍 и забирай 📚 Базу знаний

Материалы для разработчиков, которые помогут получить оффер от 200тыс до 350тыс₽ и успешной пройти испытательный срок. [Гайд] Как упаковать резюме разработчику, чтобы звали на собеседования? [Скрипт] Что говорить на интервью, чтобы каждый второй собес заканчивался оффером 200к+? [Статья] Откровения СТО.. самый короткий путь разработчика к большим деньгам [Разбор] Где искать валютную удаленку? Учимся работать с LinkedIn Канал ведет СТО с 13-ти летним стажем. Поэтому в текстах куча тонкостей, как готовиться и проходить собесы в 2025 году. Подписывайтесь и читайте закреп с бонусами.

🤔 Как работает браузер? Браузер выполняет четыре основные задачи: 1. Запрос к серверу: отправляет HTTP/HTTPS-запрос для получения веб-страницы. 2. Парсинг данных: создаёт DOM из HTML и CSSOM из CSS. 3. Рендеринг: объединяет DOM и CSSOM в Render Tree, выполняет раскладку и отрисовку. 4. JavaScript: интерпретируется для динамических изменений и взаимодействий. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 К какой категории относятся промисы? Промисы (Promise) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами). Категория: Асинхронные программные конструкции (Async Objects / Async Patterns) Тип: Объект (Promise Object)* Используются в: Асинхронном программировании (Async/Await, then/catch) 🚩Почему промисы – асинхронная конструкция? Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в .then() или .catch().

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Данные загружены!"); // Успех
  }, 2000);
});

fetchData.then(data => console.log(data));

🚩Promise – это не просто колбэк До появления Promise в JavaScript использовались колбэки, но они приводили к "callback hell".

function fetchData(callback) {
  setTimeout(() => {
    callback("Данные загружены!");
  }, 2000);
}

fetchData(data => console.log(data));

Решение с Promise

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

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

🤔 Как сделать разные типы отчётов: CSV, HTML, PDF? Для генерации отчётов в разных форматах используют разные подходы: - CSV — формируется из данных в виде строк, разделённых запятыми или точками с запятой, обычно это просто текстовая сериализация табличных данных. - HTML — отчёт можно рендерить через шаблонизаторы или прямо в DOM, если речь про frontend. - PDF — создаётся с помощью библиотек (например, jsPDF, Puppeteer в JS, ReportLab в Python), которые преобразуют HTML или структурированные данные в документ. Приложение может предоставлять пользователю возможность выбора формата, а контроллер — вызывать соответствующий генератор. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое dispatch? В контексте Frontend-разработки, dispatch — это метод, который отправляет (диспатчит) событие или действие. В зависимости от технологии dispatch может использоваться в Redux, EventTarget или React. 🟠`dispatch` в Redux В Redux dispatch(action) используется для отправки (диспатча) действий (actions) в хранилище (store).

import { useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      Увеличить
    </button>
  );
};

🟠`dispatchEvent` в JavaScript (EventTarget API) В нативном JavaScript метод dispatchEvent() используется для генерации пользовательских событий на DOM-элементах.

const button = document.querySelector("button");

// Создаём событие
const event = new Event("myCustomEvent");

// Добавляем слушатель событий
button.addEventListener("myCustomEvent", () => {
  console.log("Событие вызвано!");
});

// Диспатчим событие
button.dispatchEvent(event); // Выведет: "Событие вызвано!"

🟠`dispatch` в React (useReducer) В React-хуке useReducer dispatch используется для изменения состояния компонента.

import { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      {state.count}
    </button>
  );
};

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

🤔 Что известно про недостатки и модульные системы, используемые в JS и Node.js? - CommonJS (Node.js) — синхронная загрузка, неудобна для браузеров. - ECMAScript Modules (ESM) — асинхронная, современная, но требует поддержки платформы. - Недостатки: разрозненность, несовместимость между системами, затруднения в миграции и тестировании. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про отдельные домены для статики Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей: CSS, JavaScript Изображения, видео Шрифты, иконки Чтобы ускорить загрузку сайта и снизить нагрузку на основной сервер, статические файлы часто выносят на отдельный домен или CDN. 🚩Зачем использовать отдельные домены для статики? 🟠Разгрузка основного сервера Основной сервер обрабатывает только динамический контент (например, API-запросы). Статические файлы отдаются с другого сервера быстрее 🟠Ускорение загрузки сайта Браузеры ограничивают количество одновременных соединений к одному домену (обычно 6-8). Если статика загружается с другого домена, браузер может скачивать больше файлов одновременно. 🟠Кэширование и CDN Отдельный домен можно использовать через CDN (Cloudflare, AWS S3, Vercel, Fastly). Это уменьшает задержки и ускоряет загрузку контента по всему миру 🟠Уменьшение размера cookie Основной сайт передает cookies при каждом запросе. Если статика загружается с отдельного домена без cookies (static.example.com), это снижает трафик 🚩Как настроить отдельный домен для статики? 🟠Создать поддомен для статики Обычно статику размещают на поддомене: static.example.com cdn.example.com assets.example.com 🟠Настроить веб-сервер или CDN Если используем NGINX:

  server {
    server_name static.example.com;
    root /var/www/static;
  }

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

🤔 Как происходит загрузка страницы? - Запрос отправляется на сервер; - Загружается HTML; - HTML парсится и создаётся DOM; - Загрузка и выполнение CSS, JS и внешних ресурсов; - После загрузки всех блокирующих ресурсов вызывается DOMContentLoaded, затем load. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что произойдет если мы напишем невалидную разметку? Если в HTML-документе будет невалидная разметка, браузер всё равно попытается её обработать и отобразить страницу, но возможны различные неожиданные ошибки и баги. Давайте разберём, что может пойти не так. 🚩Что делает браузер с невалидным HTML? Когда браузер сталкивается с ошибками в разметке, он использует механизм исправления ошибок (HTML Parser Error Handling). Это означает, что: Браузер автоматически исправит некоторые ошибки (например, добавит закрывающий тег). Некоторые элементы могут быть проигнорированы или отображены некорректно. CSS и JavaScript могут работать неправильно из-за ошибки в DOM-структуре. 🚩Примеры ошибок и их последствия Отсутствие закрывающего тега

<p>Привет, мир!
<p>Это новый абзац?

Вложенность тегов в неправильных местах

<p>Текст <div>Блок внутри абзаца</div></p>

По спецификации <div> нельзя вкладывать в <p>, браузер может вынести <div> за пределы абзаца. Итоговый HTML может быть таким:

<p>Текст </p>
<div>Блок внутри абзаца</div>

🟠Отсутствие `DOCTYPE` Если не указать <!DOCTYPE html>, браузер может перейти в режим совместимости (Quirks Mode), что приведёт к некорректному отображению стилей. Неправильные атрибуты в тегах

<img src="image.jpg" alt="Картинка" wrongAttr="что это?">

Незакрытые теги в таблице

<table>
  <tr>
    <td>Ячейка 1
    <td>Ячейка 2
  </tr>
</table>

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

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

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

🤔 Что такое элемент datalist в html 5? <datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для <input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от <select>, список остаётся необязательным — пользователь может ввести своё значение. 🚩Как работает `<datalist>`? Пример: автодополнение города

<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">

<datalist id="cities">
  <option value="Москва">
  <option value="Санкт-Петербург">
  <option value="Казань">
  <option value="Новосибирск">
</datalist>

🚩Можно ли использовать с `type="number"`? Нет, <datalist> не работает с type="number". Но с type="text" и type="email" — работает отлично.

<input type="number" list="numbers">
<datalist id="numbers">
  <option value="10">
  <option value="20">
</datalist>

Рабочий вариант

<input type="text" list="numbers">

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

🤔 Почему при обращении к примитивной строке, можно обратиться и как к объекту? Потому что временно происходит боксинг — JS оборачивает примитив во временный объект (String, Number, и т.д.), чтобы можно было вызывать методы (length, toUpperCase и др.). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: 🚩Используется ли это состояние в нескольких независимых компонентах? Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux).

// Глобальное состояние (например, Context API)
const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "Иван", isLoggedIn: true });

  return (
    <UserContext.Provider value={user}>
      <Navbar />
      <Profile />
    </UserContext.Provider>
  );
}

function Navbar() {
  const user = useContext(UserContext);
  return <div>Привет, {user.name}!</div>;
}

function Profile() {
  const user = useContext(UserContext);
  return <div>Профиль пользователя: {user.name}</div>;
}

🚩Должно ли состояние сохраняться при переходе между страницами? Если данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине Авторизация пользователя Темная/светлая тема приложения Если данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище. 🚩Может ли состояние изменяться в одном месте, а использоваться в другом? Если одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии.

const ChatContext = createContext();

function ChatProvider({ children }) {
  const [messages, setMessages] = useState([]);

  const sendMessage = (text) => {
    setMessages([...messages, { text, id: Date.now() }]);
  };

  return (
    <ChatContext.Provider value={{ messages, sendMessage }}>
      {children}
    </ChatContext.Provider>
  );
}

function ChatList() {
  const { messages } = useContext(ChatContext);
  return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}

function ChatInput() {
  const { sendMessage } = useContext(ChatContext);
  const [text, setText] = useState("");

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
      onKeyPress={(e) => {
        if (e.key === "Enter") {
          sendMessage(text);
          setText("");
        }
      }}
    />
  );
}

🚩Зависит ли состояние от URL (адресной строки)? Иногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path). ID открытого товара: /products/123 Фильтры товаров: /shop?category=shoes&sort=price Страница чата с пользователем: /chat?user=ivan Ставь 👍 и забирай 📚 Базу знаний

🤔 По какому алгоритму сравниваются deps (dependencies) между собой? React использует поверхностное сравнение ссылок (Object.is). Если хотя бы один элемент в массиве зависимостей изменился по ссылке — эффект будет вызван заново. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как понять что код работает корректно? Чтобы понять, что код работает корректно, нужно провести его тестирование, что включает в себя проверку кода на соответствие ожидаемым результатам в различных ситуациях. Вот основные подходы и шаги: 🚩Проверка требований Прежде чем тестировать код, нужно понять, что он должен делать. Обычно для этого используют техническое задание или описание требований. Например: если вы пишете функцию, которая складывает два числа, то ожидается, что при вызове add(2, 3) результат будет 5. 🚩Тестирование (Test Cases) Тестирование предполагает выполнение кода с разными входными данными и проверку, что результат соответствует ожиданиям. 🟠Ручное тестирование Вы запускаете код с различными значениями и проверяете результаты. 🟠Автоматизированное тестирование Пишете тестовые скрипты, которые автоматически проверяют корректность работы.

function add(a, b) {
    return a + b;
}

Мы можем протестировать её так

console.log(add(2, 3)); // Должно вывести 5
console.log(add(0, 0)); // Должно вывести 0
console.log(add(-1, -1)); // Должно вывести -2

Однако лучше использовать автоматическое тестирование. Например, с помощью Jest

test('add function works correctly', () => {
    expect(add(2, 3)).toBe(5);
    expect(add(0, 0)).toBe(0);
    expect(add(-1, -1)).toBe(-2);
});

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

   console.log(add()); // undefined или ошибка
   console.log(add('2', 3)); // Может вернуть '23' или ошибку, если функция не проверяет типы
   

🚩Отладка (Debugging) Если код не работает как надо, нужно использовать инструменты для отладки 🟠console.log() Вывод данных для проверки логики. 🟠Инструменты разработчика в браузере Для работы с JavaScript в реальном времени. 🟠Дебаггер Позволяет пошагово выполнять код. 🚩Проверка производительности Иногда корректная работа кода связана не только с правильным результатом, но и с его скоростью. Если код работает слишком медленно, это может быть проблемой. Инструменты, такие как performance.now() в JavaScript, позволяют измерять время выполнения функций. 🚩Code Reviews и тестирование пользователями После тестов полезно показать код другим разработчикам для проверки (code review) или провести тестирование с реальными пользователями. Это позволяет найти ошибки, которые могли быть упущены. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как работает new? Ключевое слово new создаёт новый объект, основанный на конструкторе. 1. Создаётся пустой объект, связанный с прототипом конструктора. 2. Вызывается функция-конструктор, передающая объекту свои свойства и методы. 3. Если конструктор не возвращает объект явно, возвращается новый объект. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

😌 Уже умеете писать на JavaScript, но чувствуете, что используете лишь часть возможностей языка и его фреймворков? Пройдите наш тест, чтобы узнать свой уровень и станьте студентом курса: https://tglink.io/180cfdfdd8df 📈 Актуальное повышение квалификации «JavaScript Developer. Professional» от OTUS — это глубокое погружение в React, Angular, Vue, Svelte и серверную разработку на Node.js. Программа составлена практикующими экспертами, материалы постоянно обновляются под требования рынка, а все онлайн-лекции проходят в режиме реального времени. После курса вы будете: ✅ создавать полнофункциональные web-приложения на ReactJS с Redux; ✅ собирать production-проекты через Webpack и тестировать их unit-тестами; ✅ проектировать клиентские и серверные приложения с применением SOLID и Event Loop; ✅ работать с Vue.js, Svelte и TypeScript для разнообразия инструментов; ✅ организовывать хранение данных в PostgreSQL и применять TDD. 🔥 Диплом OTUS ценится крупными IT-компаниями и открывает доступ к интересным проектам и стартапам. Пройдите короткое тестирование, узнайте свой уровень и получите скидку на обучение: https://tglink.io/180cfdfdd8df erid: 2W5zFJeMWuN