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

🤔 Что можешь рассказать об version? version (версия) – это числовой или текстовый идентификатор, который используется для обозначения определённого состояния кода, программы, библиотеки или API. Версия помогает понимать, какие изменения были внесены, и совместима ли текущая версия с предыдущими. 🟠Семантическое версионирование (SemVer) Наиболее распространённый стандарт версионирования – SemVer (Semantic Versioning). Он использует формат

MAJOR.MINOR.PATCH

Пример в package.json (Node.js-проекты):

{
  "name": "my-app",
  "version": "1.2.3"
}

Команда для обновления версии в package.json

npm version major   # 2.0.0
npm version minor   # 1.3.0
npm version patch   # 1.2.4

🟠Версионирование API При работе с REST API или GraphQL API тоже используют версии, чтобы не ломать старые клиенты.

https://api.example.com/v1/users
https://api.example.com/v2/users

🟠Версионирование в Git В Git версиями называют теги (tags), привязанные к коммитам.

git tag v1.0.0
git push origin v1.0.0

Чтобы посмотреть все версии

git tag

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

Месяц игр в RuStore Любите мобильные игры? Тогда загляните в RuStore ⚡ В течение всего месяца вас ждут эксклюзивные скидки от 30% и промокоды в популярных играх. RPG, стратегии, гонки, головоломки, казуалки — в сторе доступно более 40 000 игр от российских и зарубежных разработчиков. Игры и бонусы уже ждут вас — переходите, загружайте и побеждайте. Перейти на сайт #реклама 16+ rustore.ru О рекламодателе

🤔 Чем отличается display: block от display: inline? - block занимает всю ширину контейнера, начинается с новой строки; - inline занимает только свою ширину, не разрывает поток, не принимает margin/padding по вертикали. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Является ли Service Workers частью спецификации HTML5? Частично. Хотя они не напрямую входят в HTML5, Service Workers считаются частью современных web API, тесно связанных с HTML5 и прогрессивными веб-приложениями (PWA). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про отдельные домены для статики Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей: 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;
  }

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

Тюменский бренд электроники CaseGuru запустил розыгрыш! До 20.10 разыгрываем 6 подарков: ⚡ 4 беспроводные колонки CaseGuru CGBox Sound ⚡4 пары беспроводных наушники CaseGuru CGPods Allure Чтобы участвовать нужно: 1. Быть подписанным на канал - https://clck.cx/Ad3AX 2. Нажать на кнопку "Участвовать" в посте в закрепе 3. Пригласить друзей (приглашенные друзья дают дополнительные шансы!) ✅ Итоги 20 октября Успейте поучаствовать - https://clck.cx/Ad3AX Подписаться #реклама clck.cx О рекламодателе

🤔 Что такое нечистая функция? Нечистая функция — функция, которая: - Имеет побочные эффекты (запросы, изменения внешнего состояния). - Может возвращать разные результаты при одних и тех же входных данных. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего нуден 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} />
))}

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

🤔 В чём заключаются недостатки SSR? - Задержка при первом рендеринге; - Нагрузка на сервер; - Сложность интеграции с клиентским SPA-приложением; - Повышенные требования к инфраструктуре. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как бы повернул блок на 45 градусов? Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон. 🚩Пример использования

.rotated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform: rotate(45deg);
}

🚩Объяснение Основной синтаксис 🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).

transform: rotate(угол);   

🟠Параметры Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rotated-box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated-box"></div>
</body>
</html>

🚩Пояснение 🟠Свойство `transform` Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение. 🟠Функция rotate Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки. 🚩Использование в реальных проектах 🟠Вращение элементов Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста. 🟠Анимация В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы. Ставь 👍 и забирай 📚 Базу знаний

🤔 Для чего нужны props? Props — это механизм передачи данных между компонентами. Родитель передаёт данные дочернему компоненту через props. Они позволяют: - Делать компоненты гибкими и переиспользуемыми. - Управлять поведением дочерних компонентов. - Разделять логику отображения и данные. Props неизменяемы — это защита от случайных изменений внутри компонентов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое нечистая функция? Нечистая функция (impure function) – это функция, результат которой зависит от внешних данных или побочных эффектов. При одном и том же входном значении она может возвращать разные результаты, что делает её непредсказуемой. 🚩Признаки нечистой функции Зависит от внешнего состояния Изменяет глобальные переменные Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.) 🚩Примеры нечистых функций Использует внешнюю переменную (зависит от внешнего состояния)

let count = 0;

function increment() {
    count += 1; 
    return count;
}

console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)

Модифицирует переданный аргумент

function addElement(arr, item) {
    arr.push(item); // изменяет оригинальный массив
    return arr;
}

let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)

Выполняет побочные эффекты (например, изменяет DOM)

function changeTitle(newTitle) {
    document.title = newTitle;
}

changeTitle("Новая страница");
console.log(document.title); // "Новая страница"

Генерирует случайное значение

function getRandomNumber() {
    return Math.random();
}

console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)

🚩Чем отличается от чистой функции? Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния. Чистый вариант функции addElement() (не меняет исходный массив)

function addElementPure(arr, item) {
    return [...arr, item]; // создаёт новый массив, не изменяя старый
}

let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)

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

Гайд МТС Линк для HRD и HRBP по улучшению онлайн-встреч Как HRD и HRBP сократить отток на адаптации и повысить конверсию в закрытую вакансию? Гайд МТС Линк: 37 страниц полезных материалов, чек-листов и кейсов для ускорения найма, упрощения адаптации и снижения нагрузки на HR-команду с помощью онлайн-встреч. ✅ В гайде: - Как упростить рекрутинг и снизить нагрузку на HR-команду; - Как ускорить адаптацию новичков и сократить отток на испытательном сроке; - Как экономить время на обсуждение кандидатов с помощью ИИ-расшифровки созвонов в текст; - Как системно прокачивать сотрудников разных уровней и отделов с помощью регулярных онлайн-тренингов; - Как снизить текучесть без лишних затрат. Бонус внутри: 5 способов не выгореть от бесконечных синков. ✨ Скачайте гайд бесплатно по ссылке Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Что такое мутации (mutations) в Vuex? Мутации — это единственный способ изменить данные в state. Они должны быть синхронными и простыми. Каждый раз, когда нужно поменять что-то в хранилище — например, добавить элемент в массив или изменить флаг — это делается через вызов мутации. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда брать абсолютные величины а когда относительные? Выбор между абсолютными и относительными единицами измерения зависит от контекста использования и целей, которые вы преследуете. Рассмотрим подробнее, когда и почему стоит использовать те или иные единицы. 🚩Абсолютные величины (например, px, pt, cm, in) Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста. 🚩Когда использовать 1⃣Пиксели (`px`) Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне. Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки). Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.

.logo {
  width: 100px;
  height: 50px;
}

🚩Относительные величины (например, %, em, rem, vw, vh) Изменяются в зависимости от других элементов или размеров экрана. Они позволяют создавать более гибкие и адаптивные макеты. 🟠Проценты (`%`) Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента. Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.

.container {
  width: 80%;
  height: 50%;
}

🟠Эм (`em`) Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя. Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.

.text {
  font-size: 1.2em;
  margin: 1em;
}

🟠Рем (`rem`): Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование. Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта

body {
  font-size: 16px;
}

.header {
  font-size: 2rem; /* 32px */
  margin: 1rem;    /* 16px */
}

🟠Вьюпорт (`vw`, `vh`): Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера). Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.

.hero {
  width: 100vw;
  height: 100vh;
}

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

.container {
  width: 80%;  /* Относительная ширина */
  padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
  font-size: 1.5rem; /* Относительный размер шрифта */
  margin: 2em; /* Относительный внешний отступ */
}

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

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

🤔 Если у нас есть CSS, зачем существуют теги strong, center, etc? Некоторые теги (strong, em) имеют семантический смысл — важны для SEO и доступности. Например, strong указывает на важность, а не только жирный стиль. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем нам разбивать приложение отдельно на backend и frontend? Разделение на Frontend (клиент) и Backend (сервер) – это стандартный подход в современной веб-разработке. Это делает приложение гибче, масштабируемее и удобнее в разработке. 🚩Почему лучше разделять? 🟠Гибкость и масштабируемость Можно менять Frontend и Backend независимо. Можно использовать разные технологии (например, Vue.js + Django). Можно легко разделить команды разработчиков. 🟠Повышенная безопасность Frontend не имеет доступа к базе данных. Все важные вычисления, авторизация, хранение данных происходят на сервере. API можно защитить токенами (JWT, OAuth). 🟠Уменьшение нагрузки на клиент Логика обработки данных выполняется на сервере. Клиент получает уже готовые данные, а не загружает огромные файлы. 🟠Легче разрабатывать и тестировать Можно разрабатывать Frontend и Backend независимо. Можно подменять сервер на mock-данные во время разработки. 🚩Как они общаются? (REST API & GraphQL) Разделённые приложения общаются через API: REST API (GET, POST, PUT, DELETE) GraphQL API (запросы только нужных данных) WebSockets (реальное время, чаты, онлайн-игры)

GET https://api.example.com/users

Ответ от Backend

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

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

🤔 Если рассматривать HTML5 как открытую web-платформу, на чём она строится, из каких компонентов состоит? HTML5 включает: - Разметку и семантику (новые теги: article, nav, section); - API (Canvas, Geolocation, Drag-and-Drop); - Мультимедиа (<video>, <audio>); - Storage (LocalStorage, SessionStorage, IndexedDB); - Сетевые возможности (WebSocket, SSE, Fetch); - Offline (Service Workers, Cache API); - Формы и валидация (input types, pattern, required и т.д.). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний