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

Где вести задачи и проекты? В Битрикс24 ✅ Бесплатный онлайн-сервис для бизнеса и совместной работы. — Удобный планировщик задач для всей команды с чек-листами и комментариями. — Популярные проектные методики: канбан, скрам, диаграмма ганта. — Видеозвонки в один клик из чата. — Календарь и слоты для совместного планирования. — Умный ИИ-помощник для постановки четких тз. Полный комплект для эффективности вашей команды. Ставьте первую задачу прямо сейчас⚡ Начать #реклама 16+ task-24.bitrix24.ru О рекламодателе

🤔 Как проверить, что куки включены? Можно: - Программно — попробовать установить cookie и затем прочитать его; - В JavaScript — через navigator.cookieEnabled (возвращает true/false). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

👩‍💻 Frontend вакансии всех грейдов: удалёнка, реклок, щедрый оффер! Только с прямыми контактами в Telegram! Ноль автоотказов — живой диалог и быстрые объективные решения. 👩‍💻 Frontend 👩‍💻 Node.js 👩‍💻 Python 👣 Go 🤖 ML & DS 👩‍💻 DevOps 👩‍💻 C# 👩‍💻 Java 🔎 QA 🖥 SQL 👩‍💻 UX/UI 🖼️ PHP 👩‍💻 Mobile 📋 Analyst 💼 1C 👨‍✈️ CyberSec 👩‍💻 IT HR Подпишись чтобы не упустить свой шанс получить лучший оффер!

⏳ Осталось 20 мест Акция со скидкой 50% для первых 500 пользователей easyoffer подходит к концу 🔥 Узнай вопросы и задачи с собеседований в конкретных компаниях 🔥 Получи лучшие ответы и видео-примеры от middle/senior специалистов 🔥 Обходи фильтры ATS, добавив топ30 ключевых слов в свое резюме 🔥 Экономь время с помощью автоматических откликов 🔥 Подготовься идеально к интервью с тренажёрами и симуляторами Успей забрать место по акции: 👉 https://easyoffer.ru/pro

🤔 Опасности использования `innerHTML` в JavaScript innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам.

document.getElementById("content").innerHTML = "<h1>Привет!</h1>";

🟠Уязвимость: XSS-атаки (внедрение вредоносного кода) Если innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код.

const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;

🟠Проблемы с безопасностью CSP (Content Security Policy) Если в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

🟠Случайное удаление обработчиков событий Если заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся.

document.getElementById("btn").addEventListener("click", () => {
  alert("Нажато!");
});

document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален

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

🤔 Как работают плавающие элементы (floats)? При установке float: left или float: right: - элемент вырывается из нормального потока документа; - соседние элементы (особенно текст) обтекают его; - родитель может "не заметить" плавающий элемент, если не применить очистку (clearing). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какое событие сработает при потери фокуса элементом формы? Событие, которое срабатывает при потере фокуса элементом формы, называется blur. 🚩Почему нужно событие `blur`? Событие blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле. Автоматическое сохранение введенных данных при переходе на другой элемент формы. Скрытие вспомогательной информации (например, подсказок) при уходе с элемента. blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы. 🚩Как оно работает? blur срабатывает, когда элемент теряет фокус, то есть пользователь: Кликнул на другой элемент. Нажал клавишу Tab, чтобы перейти на следующий элемент. В отличие от события focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом. 🚩Как использовать `blur`? Событие можно обрабатывать с помощью: 1. HTML-атрибутов (например, onblur). 2. JavaScript через метод addEventListener. Пример на практике

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример blur</title>
  <script>
    function validateInput(event) {
      const input = event.target;
      if (input.value.trim() === "") {
        alert("Поле не должно быть пустым!");
      }
    }

    document.addEventListener("DOMContentLoaded", () => {
      const inputElement = document.getElementById("name");
      inputElement.addEventListener("blur", validateInput);
    });
  </script>
</head>
<body>
  <form>
    <label for="name">Введите имя:</label>
    <input type="text" id="name" name="name" />
    <button type="submit">Отправить</button>
  </form>
</body>
</html>

🚩Особенности события `blur` 🟠Не всплывает Событие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.

   // Работает только для конкретного элемента
   element.addEventListener("blur", handler);

   // Для делегирования используют focusout
   parentElement.addEventListener("focusout", handler);
   

🟠Отличие от `change` Событие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение. Ставь 👍 и забирай 📚 Базу знаний

CRM, которая помогает управлять отделом продаж Что делает Битрикс24 CRM: – ставит задачи менеджерам автоматически – интегрируется с 1С и онлайн-кассами – показывает, где теряются деньги – возвращает клиентов и ищет повторные продажи – помогает руководителю контролировать процессы. Битрикс24 CRM работает на результат. Регистрируйтесь бесплатно Зарегистрироваться #реклама 16+ bitrix24.ru О рекламодателе

🤔 Какие есть способы автоматизации в React? - Сборка через Create React App, Vite или Next.js. - Тестирование через Jest, React Testing Library, Cypress. - Линтинг и форматирование через ESLint, Prettier. - Документирование через Storybook. - CI/CD через GitHub Actions, GitLab CI и др. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

⏳ 90 акционных мест Акция со скидкой 50% для первых 500 пользователей easyoffer подходит к концу 🔥 Узнай вопросы и задачи с собеседований в конкретных компаниях 🔥 Получи лучшие ответы и видео-примеры от middle/senior специалистов 🔥 Обходи фильтры ATS, добавив топ30 ключевых слов в свое резюме 🔥 Экономь время с помощью автоматических откликов 🔥 Подготовься идеально к интервью с тренажёрами и симуляторами Успей забрать место по акции: 👉 https://easyoffer.ru/pro

🤔 Что можешь рассказать об 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-приложением; - Повышенные требования к инфраструктуре. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний