Frontend | Interview questions

В нашем канале много ценного для разработчиков по подготовке к собесам👇 Уже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум! Полные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Стримы с гостями и записями: Как проходить собеседование на английском Как решать livecoding задачи Прокачали более 30 резюме вместе с Юрой Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Статистика по рынку: Июль, Июнь, Май, Апрель, Март Текущие рекорды участников: Оффер 6800$ net с релокацией на Кипр Из Шанхая до 4500$ в американскую компанию Получили 427 000 на руки в Сбер и отказались Выбили 380 000 на руки в банк и приняли! Наши встречи в Питере, Москве, Шанхае Как я прохожу собесы на ютубе: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 Ссылка скрыта Реклама, erid: 2W5zFHWEhaH ИП Галактионов Тихон Витальевич, ИНН 771618975809

🤔 Где используются Promise? Promise применяется при асинхронных операциях, таких как: - fetch и любые HTTP-запросы - Асинхронные таймеры (через обёртки) - Файловые операции (в Node.js) - Интерфейсы IndexedDB - Асинхронные анимации, Web APIs Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое семантические коммиты? Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа. Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов. 🚩Формат семантического коммита Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки. Основной шаблон (): 🚩Основные типы коммитов 🟠feat добавление новой функциональности 🟠fix исправление ошибки 🟠docs изменение документации 🟠style исправления, не влияющие на логику (например, форматирование) 🟠refactor переработка кода без изменения функциональности 🟠test добавление или обновление тестов 🟠chore изменения, не влияющие на код (например, обновление зависимостей) 🚩Примеры 1⃣Добавление новой функции feat(auth): добавлена аутентификация через Google 2⃣Исправление ошибки fix(login): исправлен баг с неверным редиректом 3⃣Улучшение кода без изменения refactor(api): оптимизирован алгоритм фильтрации данных 4⃣Обновление документации docs(readme): добавлены инструкции по развертыванию Ставь 👍 и забирай 📚 Базу знаний

🤔 Как считается вес селектора? Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов. ( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент ) Пример /* Специфичность: (0, 1, 0, 0) */ #header { color: red; } /* Специфичность: (0, 0, 1, 0) */ .header { color: blue; } /* Специфичность: (0, 0, 0, 1) */ h1 { color: green; } 🟠Примеры сравнения специфичности Пример 1 h1 { color: red; } /* (0,0,0,1) */ .title { color: blue; } /* (0,0,1,0) */ Пример 2 h1 { color: red; } /* (0,0,0,1) */ #main { color: blue; } /* (0,1,0,0) */ Пример 3 (комбинированные селекторы) h1.title { color: red; } /* (0,0,1,1) */ #main h1 { color: blue; } /* (0,1,0,1) */ Пример 4 (инлайн-стиль всегда сильнее) Заголовок h1 { color: red; } /* (0,0,0,1) */ .title { color: blue; } /* (0,0,1,0) */ #main { color: purple; } /* (0,1,0,0) */ 🟠Как повысить вес селектора? Добавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например, .header h1 вместо h1). Использовать !important (но осторожно!). h1 { color: red !important; } /* Всегда будет красным */ Ставь 👍 и забирай 📚 Базу знаний

🤔 В каком случае нужно SPA? SPA (Single Page Application) нужен, когда: - требуется динамичный интерфейс без перезагрузки страницы; - важен быстрый отклик UI; - есть много интерактивных действий на клиенте; - приложение похоже на десктопное по поведению (например, админки, CRM, почта). Не нужен — для SEO-критичных лендингов и новостных сайтов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован. 🚩Зачем уничтожать Web Worker? Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется. 🚩Как использовать `terminate()`? Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта. // Создаем worker const myWorker = new Worker('worker.js'); // Выполняем какие-то операции через worker myWorker.postMessage('Hello, worker!'); // Завершаем работу worker, когда он больше не нужен myWorker.terminate(); 🚩Важно помнить 1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения. 2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются. 3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут. const worker = new Worker('worker.js'); // Отправляем сообщение worker.postMessage('Start working'); // Завершаем работу worker worker.terminate(); // Попытка отправить сообщение после уничтожения worker worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен 🚩 Когда еще уничтожается worker? Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике. Ставь 👍 и забирай 📚 Базу знаний

🤔 Как следует оформлять страницу, в которой контент может быть на разных языках? - Указывать атрибут lang в и в текстовых блоках; - Использовать hreflang в • и для указания языковых версий; - Хранить переводы отдельно и подгружать в зависимости от языка (через i18n). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем нужен ref? В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React. 🚩Основные случаи использования `ref` Доступ к DOM-элементам: Использование в сторонних библиотеках: Сохранение состояния вне дерева компонентов: 🚩Примеры использования `ref` Доступ к DOM-элементам Установка фокуса на элемент import React, { useRef, useEffect } from 'react'; function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // Установить фокус на текстовое поле inputEl.current.focus(); }; return ( Установить фокус ); } export default TextInputWithFocusButton; Получение размеров элемента Измерение элемента: import React, { useRef, useEffect, useState } from 'react'; function MeasureDiv() { const divRef = useRef(null); const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); useEffect(() => { if (divRef.current) { const { width, height } = divRef.current.getBoundingClientRect(); setDimensions({ width, height }); } }, []); return ( Измеряемый элемент Ширина: {dimensions.width}px, Высота: {dimensions.height}px ); } export default MeasureDiv; Использование в классовых компонентах Доступ к методам компонента: import React, { Component } from 'react'; class CustomComponent extends Component { customMethod() { console.log('Метод компонента вызван'); } render() { return Custom Component ; } } class ParentComponent extends Component { constructor(props) { super(props); this.customComponentRef = React.createRef(); } handleClick = () => { this.customComponentRef.current.customMethod(); }; render() { return ( Вызвать метод компонента ); } } export default ParentComponent; 🚩Важно помнить Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо. Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам. Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом. Ставь 👍 и забирай 📚 Базу знаний

🤔 Пример архитектурных решений для проектов на Node.js? - Layered architecture — с разделением на controller, service, repository; - Hexagonal architecture — с портами/адаптерами; - Microservices с gRPC/REST; - GraphQL gateway с Apollo; - Event-driven через Kafka/RabbitMQ; - Serverless архитектура (AWS Lambda, Firebase Functions). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний