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

🤔 Для кого необходима семантическая верстка? - Для поисковых систем (SEO); - Для помощников с ограниченными возможностями (screen reader); - Для разработчиков и поддержки кода — читаемость и логика; - Для браузеров и парсеров — правильная обработка контента. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Новый кроссовер премиум-класса HONGQI HS5 от 3 990 000 ₽ Новый полноприводный кроссовер с просторным и комфортным салоном выгодно впечатляет! Записывайтесь на тест-драйв, чтобы почувствовать премиальный комфорт и мощь без компромиссов. Узнать больше #реклама hongqi.ru О рекламодателе

🤔 Почему методы жизненного цикла нельзя писать через прилоченную функцию? В Vue 2 и Vue 3 (Options API) методы жизненного цикла (mounted, created, beforeDestroy и др.) должны быть обычными функциями, а не стрелочными (() => {}). 🟠Как работает `this` в Vue? Когда Vue вызывает метод жизненного цикла, он автоматически привязывает this к экземпляру компонента.

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted() {
    console.log(this.message); // ✅ Работает, this = { message: "Привет!" }
  }
};

🟠Почему стрелочная функция не работает? Стрелочные функции не создают свой собственный this, а берут this из внешнего контекста (того, что было при их создании).

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted: () => {
    console.log(this.message); // ❌ Ошибка: this === undefined
  }
};

🟠Как стрелочные функции всё-таки можно использовать? Хотя стрелочные функции нельзя использовать для методов жизненного цикла, их можно применять внутри обычных методов:

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted() {
    setTimeout(() => {
      console.log(this.message); // ✅ Работает, this берётся из `mounted()`
    }, 1000);
  }
};

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

Присоединяйся к хакатону года в сфере travel-tech - О!Хакатону от Островка 💚 Островок приглашает Go и Python разработчиков, а также аналитиков и продакт-менеджеров попробовать свои силы в реальных бизнес-задачах и побороться за денежный приз. Мероприятие пройдет полностью в онлайн-формате, участвовать можно из любой точки мира, самостоятельно или в команде. Призовой фонд: 1 000 000 ₽ Регистрация открыта до 18 сентября. Стартуем 26 сентября! 🚀 Подробности и регистрация Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ". ИНН 7703389880.

🤔 Какие способы изоляции стилей ты знаешь? Изоляция стилей может быть достигнута с помощью CSS-модулей, которые создают уникальные имена классов для предотвращения конфликта стилей. Shadow DOM изолирует стили внутри веб-компонентов, не позволяя им влиять на внешний код. Также можно использовать атрибуты, такие как scoped для стилей внутри Vue.js или инкапсуляцию стилей с помощью @import и :host в веб-компонентах. Все эти способы помогают избежать пересечения стилей и гарантируют их изоляцию. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое семантические коммиты? Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа. Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов. 🚩Формат семантического коммита Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки. Основной шаблон

<тип>(<область>): <краткое описание>

🚩Основные типы коммитов 🟠feat добавление новой функциональности 🟠fix исправление ошибки 🟠docs изменение документации 🟠style исправления, не влияющие на логику (например, форматирование) 🟠refactor переработка кода без изменения функциональности 🟠test добавление или обновление тестов 🟠chore изменения, не влияющие на код (например, обновление зависимостей) 🚩Примеры 1⃣Добавление новой функции

feat(auth): добавлена аутентификация через Google

2⃣Исправление ошибки

fix(login): исправлен баг с неверным редиректом

3⃣Улучшение кода без изменения

refactor(api): оптимизирован алгоритм фильтрации данных

4⃣Обновление документации

docs(readme): добавлены инструкции по развертыванию

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

ЖК «Мечта». Готовые дома для всей семьи от 10 000 ₽/мес Полноценная жизнь за городом в окружении леса и трех озер с собственными пляжами. ✅ Современные школы и детские сады ✅ Чистый воздух, реликтовые озёра ✅ 17 мин. езды до МЦД Лобня ✅4 квартала в продаже: выгодная ипотека, беспроцентная рассрочка, ключи сразу! Узнать больше Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: ПАО "Банк ВТБ". #реклама mrqz.me О рекламодателе

🤔 Что такое блочная модель? Блочная модель (Box model) описывает, как браузер отображает и рассчитывает размеры элементов: - content → padding → border → margin. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое git-flow? Это рабочая модель ветвления, предложенная Винсентом Дриссеном в 2010 году. Эта модель определяет строгий набор правил для создания веток и их слияния, что помогает более организованно управлять процессом разработки, особенно в условиях, когда над проектом работает много людей. Он предназначен для упрощения процесса выпуска новых версий программного обеспечения и обеспечения стабильности кодовой базы. 🚩Основные ветки 🟠master Содержит стабильную версию кода, готовую к выпуску (release). 🟠develop Основная ветка для разработки, содержит последние изменения кода для следующего выпуска. 🚩Вспомогательные ветки 🟠feature Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop. 🟠release Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop. 🟠hotfix Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop. Ставь 👍 и забирай 📚 Базу знаний

Скидка до 20% на готовые квартиры — Мкр. «Самолёт» Жилой микрорайон расположен на северо-западе Краснодара, в районе Западного Обхода. Он находится далеко от промышленных предприятий. Здесь будет всё для комфортной жизни: современные дома с разными планировками, школы и детские сады, поликлиника, торговые центры, парки и аллеи. Центр притяжения микрорайона — бульвар длиной 1,6 км с зонами для отдыха и развлечений. На территории проекта расположено: 4 школы, 10 детских садов, спортивные площадки. - Квартиры от 3,8 млн рублей - Квартиры с выгодой до 1,9 млн. рублей - Выгодные условия покупки квартир - ипотечные каникулы с бонусом до 700 000 рублей. Выбирайте квартиру по лучшей цене на сайте! Получить предложение Проектная декларация на сайте https://наш.дом.рф/ #реклама mrqz.me О рекламодателе

🤔 Что будет, если забиндить два контекста подряд? Если контексты в DI фреймворке (например, в Angular, React или NestJS) перекрывают друг друга, то: - Последний контекст (или более локальный) переопределит предыдущий. - Может возникнуть конфликт зависимостей или непредсказуемое поведение. Важно понимать иерархию инжекторов и область действия каждого контекста. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работает settimeout? Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

function: Будет вызвана после задержки. functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности). delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0. arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

🚩Отмена выполнения setTimeout Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

🚩Особенности поведения 🟠Минимальная задержка В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения. 🟠Задержка в неактивных вкладках Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано. 🟠Асинхронность setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания. Ставь 👍 и забирай 📚 Базу знаний

Регистрируйтесь на вебинар SIEM UserGate 💻Расскажет о том, как консалтинг в области информационной безопасности помогает решить проблему кадрового голода и повышает устойчивость бизнес-процессов. 📊На вебинаре будет: - Угрозы и вызовы в области ИБ. Зачем нужен консалтинг? - Виды консалтинговых услуг. Преимущества и наши подходы - Консалтинг - ориентация на бизнес - Практическая безопасность. С чего начать? - Ответы на вопросы 👌Расскажем, как защитить вашу компанию. Регистрируйтесь — будет интересно! Зарегистрироваться #реклама 16+ webinar.usergate.com О рекламодателе

🤔 Для чего существует тег <q>? Тег <q> используется для встроенных (коротких) цитат. Браузер автоматически добавляет кавычки вокруг содержимого. Для длинных цитат используется <blockquote>. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем var отличается от const ? Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде. 🚩Область видимости (Scope) 🟠Var Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена. 🟠Const Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена. 🚩Переназначение и изменение 🟠Var Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение. 🟠Const Переменные, объявленные с помощью нее, не могут быть переназначены. Однако, если переменная представляет собой объект или массив, её содержимое может быть изменено (например, можно добавить новое свойство в объект или новый элемент в массив). Важно понимать, что const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений. 🚩Поднятие (Hoisting) 🟠Var Переменные, объявленные через нее, поднимаются в начало своей функциональной области видимости перед выполнением кода. Однако до их объявления в коде они будут иметь значение undefined. 🟠Const Подобно let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона". 🚩Инициализация 🟠Var Эти переменные можно объявить без инициализации, и их начальное значение будет undefined. 🟠Const Эти переменные требуют обязательной инициализации при объявлении. Если попытаться объявить его без инициализации, это приведет к синтаксической ошибке.

var varVariable = 1;
varVariable = 2; // Переназначение возможно

const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибку

if (true) {
  var varScope = "доступна везде в функции";
  const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена

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

Купить Solaris HС выгодно в автокредит Специальное предложение! Solaris HС в автокредит. Низкие ставки. ✨Срок от 1 до 8 лет Комфортные условия для покупки стильного, полноприводного кроссовера Solaris HC. Кредит на выгодных условиях только до 30 июня. Узнайте все условия. Узнать цену Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: ПАО "Совкомбанк", АО "Альфа-Банк". #реклама solaris.auto О рекламодателе

🤔 Что такое хэш-таблица? Хэш-таблица — это структура данных, которая хранит пары ключ–значение. Ключи обрабатываются через хэш-функцию, что обеспечивает быстрый доступ к значениям — обычно за константное время. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🎉Разыгрываем пожизненный доступ к AI-ассистенту для поиска работы для 3 подписчиков До запуска Софи остается меньше месяца, поэтому мы решили порадовать вас и устроить конкурс, приуроченный к этому событию. Кто такая Софи? Это первый в России ассистент по поиску работы, который будет сам делать отклики, писать сопроводительные письма, поможет с резюме и подготовкой к собесу, а еще избавит тебя от отказов. Мы работали над ней более полугода, и сейчас хотим подарить бесплатный пожизненный доступ для 3 наших подписчиков. Мы посчитали, стоимость одной такой подписки ну хотя бы на 10 лет составляла бы 420.000 руб. Условия конкурса простые: 1. Подписаться на 4 наших канала: Софи и партнёры Young & Junior - вакансии IT Young Стажёр - стажировки ИТ IT мероприятия для стажеров и студентов 2. Нажать кнопку "участвую" под этим постом. 15 июля, в 19:00, мы в прямом эфире проведем запуск Софи, а в 20:00 опубликуем результаты конкурса в канале Софи и Партнёры. Каждый победитель получит бесплатный доступ к Софи навсегда. Всем удачи и до встречи в прямом эфире🚀

Скидки на электрические зубные щетки Oral-B ORAL-B Genius-X с искусственным интеллектом – первая в мире зубная щетка, которая распознает стиль чистки зубов и дает рекомендации по улучшению. Купить #реклама market.yandex.ru О рекламодателе

🤔 Что можешь рассказать об 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

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