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

VK Weekend Offer для бэкенд-разработчиков 28–29 июня VK проведёт Weekend Offer для бэкендеров с опытом от трёх лет. Участников со знанием Java, Go, Python или C++ ждут технические собеседования, знакомство с продуктами и, если всё сложится, офер уже в конце выходных. Ребята много лет создают облачные решения, системы рекомендаций и поисковые движки — всё с миллионами пользователей в проде — и сейчас ищут новых коллег. Поэтому оставляйте заявку до 25 июня, чтобы попасть в команду за выходные! Подробности — на сайте. Подать заявку #реклама 16+ team.vk.company О рекламодателе

🤔 С помощью чего собирать приложения? - Webpack — сборка модулей, ассетов; - Parcel, Vite, Rollup — лёгкие альтернативы; - Grunt, Gulp — для автоматизации задач; - Babel — транспиляция кода (ES6 → ES5); - Docker — контейнеризация и сборка окружения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Крупнейший университет искусственного интеллекта Учим использовать ChatGPT в профессиональных целях, создавать нейро-сотрудников и зарабатывать на искусственном интеллекте. ✨ 8 000+ студентов со всего мира ✨ 600+ AI-проектов, созданных студентами ✨ Сборная Университета — победители крупнейших AI-хакатонов России ✨ Стажировки в крупнейших компаниях России (РЖД, Ростелеком, РУДН, Совкомбанк, Самолет и другие) ✨ Трудоустраиваем выпускников в крупнейшие компании (Яндекс, ВТБ, Сбербанк, Роскосмос и другие) Будем рады видеть тебя в наших рядах! Узнать больше #реклама 16+ neural-university.ru О рекламодателе

🤔 Когда используются теги div и span? <div> и <span> — это самые универсальные HTML-теги, но у них разные роли: <div> — блочный контейнер (для структуры). <span> — строчный контейнер (для оформления текста). 🚩Примеры использования `<div>` Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

<div class="card">
  <h2>Заголовок</h2>
  <p>Текст внутри карточки</p>
</div>

🚩Когда использовать `<span>`? <span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку. 🚩Примеры использования `<span>` Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

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

Срочно требуются Веб-Дизайнеры в Figma. Обучим с нуля. Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

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

Продолжение следует в «Летово Игра» ✨Стоит сделать первый шаг в «Летово» — и привычное лето превращается в межгалактическое приключение. Летающие тарелки на горизонте, учёные ловят таинственные сигналы, чтобы встать на защиту планеты, нужно быть готовым к новым открытиям и испытаниям. «Летово Игра» — это образовательная игра для подростков 10–17 лет, созданная на базе школы «Летово» лучшими педагогами и опытными игротехниками. Знания и навыки здесь осваиваются не за партой, а через действия, вызовы и работу в команде. Каждый день - это шаг в неизведанное: новые вызовы, важные задачи, совместные решения.😊 📅Смены длятся 10 дней и стартуют с 1 июля. Количество мест ограничено. Подать заявку #реклама 16+ letovogame.ru О рекламодателе

🤔 Как понимают изменение состояния mobxvue? MobX в Vue работает с реактивностью (как и Vue), но использует свою систему отслеживания изменений. Он понимает, что состояние изменилось, с помощью прокс (Proxy) и геттеров/сеттеров (get/set). 🚩Как MobX делает состояние реактивным? В MobX основная функция для создания реактивного состояния — observable(). Она превращает объект в реактивный Proxy, который отслеживает чтение (get) и изменение (set) свойств.

import { observable } from "mobx";

const store = observable({
  count: 0,
  increment() {
    this.count++;
  },
});

console.log(store.count); // MobX "запоминает", что это свойство использовалось
store.increment(); // MobX "замечает", что свойство изменилось

🚩Как MobX понимает, что нужно обновить компонент Vue? Vue-компоненты подписываются на реактивные свойства, когда они рендерятся внутри observer().

import { defineComponent } from "vue";
import { observer } from "mobx-vue-lite";

export default observer(defineComponent({
  setup() {
    return {
      store,
    };
  },
  template: `<div>{{ store.count }}</div>`,
}));

🚩Как MobX понимает зависимости? (Track & Re-run) MobX автоматически отслеживает зависимости во время рендера. Когда компонент использует store.count, MobX **"запоминает", что он зависит от count. Когда count изменяется, MobX перерисовывает только этот компонент.

import { computed } from "mobx";

const store = observable({
  count: 1,
  get doubleCount() {
    return this.count * 2;
  },
});

console.log(store.doubleCount); // 2
store.count = 2;
console.log(store.doubleCount); // 4 (MobX понимает, что зависимость изменилась)

🚩Как MobX оптимизирует обновления? (Reactions) MobX не просто перерисовывает всё — он оптимизирует рендеринг. 🟠autorun запускается сразу и при изменении любого используемого свойства. 🟠reaction запускается только когда меняется конкретное наблюдаемое свойство. 🟠when выполняется один раз, когда условие становится true.

import { autorun } from "mobx";

const store = observable({ count: 0 });

autorun(() => {
  console.log("Count изменился:", store.count);
});

store.count = 1; // "Count изменился: 1"
store.count = 2; // "Count изменился: 2"

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

Запусти IT-бизнес с доходом от 500 000 ₽/мес за 7 дней! Что вы получаете: ✅ IT-продукт с рынком 416+ млрд ₽ 💰 Доход от 500 000 ₽ в первый месяц 💻 Полностью онлайн — работайте из любой точки мира Стартовый бюджет: от 200 000 ₽ Окупаемость: 14 дней ⚡ Узнать больше #реклама edler.pro О рекламодателе

🤔 Как можно оптимизировать перерисовки? 1. Минимизировать изменения DOM, используя виртуальный DOM (например, React). 2. Использовать debounce или throttle для ограничения частоты выполнения операций. 3. Применять requestAnimationFrame для синхронизации с обновлением экрана. 4. Удалять ненужные компоненты из дерева или использовать мемоизацию (React.memo, useMemo). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Цены отпускаются! Супер скидки до 90% на WB Грандиозный ценопад!✨ Воспользуйтесь скидками до 90% уже сейчас. Время обновить гардероб, технику или аксессуары выгодно! Узнать больше #реклама wildberries.ru О рекламодателе

🤔 Как можно работать с датами в js? В JavaScript для работы с датами можно использовать: Date – встроенный объект Библиотеку Intl.DateTimeFormat – для форматирования Библиотеки (moment.js, date-fns, luxon) – для удобной работы 🚩Встроенный объект `Date` Создание даты

const now = new Date(); // Текущая дата и время
console.log(now); // Например: 2025-02-25T12:34:56.789Z

Способы создания даты

new Date(); // Текущая дата
new Date(2025, 1, 25); // 25 февраля 2025 (месяцы с 0)
new Date("2025-02-25"); // ISO строка
new Date(1708850400000); // Unix timestamp (в мс)

Получение значений

const date = new Date();
console.log(date.getFullYear()); // 2025
console.log(date.getMonth());    // 1 (февраль, потому что январь — 0)
console.log(date.getDate());     // 25
console.log(date.getDay());      // 2 (вторник, потому что воскресенье — 0)
console.log(date.getHours());    // Часы
console.log(date.getMinutes());  // Минуты
console.log(date.getSeconds());  // Секунды
console.log(date.getTime());     // Время в миллисекундах (Unix timestamp)

Изменение даты

const date = new Date();
date.setFullYear(2030);
date.setMonth(11); // Декабрь
date.setDate(31);
console.log(date); // 31 декабря 2030

Форматирование даты

const date = new Date();
console.log(date.toDateString()); // "Tue Feb 25 2025"
console.log(date.toISOString());  // "2025-02-25T12:34:56.789Z"
console.log(date.toLocaleString()); // Локальное представление
console.log(date.toUTCString());  // "Tue, 25 Feb 2025 12:34:56 GMT"

Форматирование с Intl.DateTimeFormat

const date = new Date();
const formatter = new Intl.DateTimeFormat("ru-RU", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
});
console.log(formatter.format(date)); // "вторник, 25 февраля 2025 г."

🚩Библиотеки (более удобные способы) date-fns (легковесная альтернатива Moment.js)

npm install date-fns

import { format, addDays } from "date-fns";

const now = new Date();
console.log(format(now, "dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(addDays(now, 5)); // Дата + 5 дней

moment.js (устаревший, но популярный)

npm install moment

import moment from "moment";

const now = moment();
console.log(now.format("DD.MM.YYYY HH:mm")); // 25.02.2025 15:30
console.log(now.add(5, "days").format("DD.MM.YYYY")); // +5 дней

luxon (современная альтернатива Moment.js)

npm install luxon

import { DateTime } from "luxon";

const now = DateTime.now();
console.log(now.toFormat("dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(now.plus({ days: 5 }).toFormat("dd.MM.yyyy")); // +5 дней

Разница между датами

const date1 = new Date("2025-02-25");
const date2 = new Date("2025-03-01");

const diff = date2 - date1; // Разница в миллисекундах
console.log(diff / (1000 * 60 * 60 * 24)); // Разница в днях (4)

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

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

🤔 Как считается вес селектора? Вес (специфичность) селектора определяется по "весу" каждой его части. Принцип: - ID = 100 - Класс, атрибут, псевдокласс = 10 - Тег, псевдоэлемент = 1 - Инлайн-стиль = 1000 (вне конкуренции) Селектор с большим весом перебивает селекторы с меньшим весом, если они применяются к одному и тому же элементу. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как мы можем замерить скорость работы участка кода с date.Now? В JavaScript можно замерить скорость выполнения кода с помощью Date.now(), но есть более точные способы. Давайте разберём разные варианты. 🚩Использование `Date.now()` Метод Date.now() возвращает количество миллисекунд с 1 января 1970 года (Unix-время). Можно запомнить время до и после выполнения кода, а затем вычислить разницу.

const start = Date.now(); // Фиксируем время начала

// Код, время выполнения которого нужно измерить
for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = Date.now(); // Фиксируем время окончания
console.log(`Время выполнения: ${end - start} мс`);

🚩Использование `performance.now()` (Более точный способ) Метод performance.now() возвращает время с микросекундной точностью (до тысячных долей миллисекунды). Он точнее, чем Date.now(), так как измеряет время с высокой детализацией.

const start = performance.now();

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

const end = performance.now();
console.log(`Время выполнения: ${(end - start).toFixed(3)} мс`);

🚩Использование `console.time()` Если нужно просто измерить время выполнения блока кода, можно воспользоваться console.time() и console.timeEnd().

console.time("Мой код");

for (let i = 0; i < 1e6; i++) { Math.sqrt(i); }

console.timeEnd("Мой код"); // Выведет время выполнения

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

Получи грант до 1,2 млн руб. на обучение в магистратуре 4 офлайн программы, онлайн-магистратура по ML. Гранты до 1,2 млн руб. Стажировки, диплом гос. образца и фокус на твоей карьере в ЦУ Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе

🤔 Как перехватить глобально ошибки по бэкенду? - Через глобальный обработчик ошибок (например, process.on('uncaughtException') в Node.js); - Использовать middleware-логгер; - Интеграция с системами мониторинга (например, Sentry, Logstash); - Обработка try/catch на верхнем уровне запроса. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 В чём разница между js и python? JavaScript (JS) и Python — два популярных языка программирования, но они предназначены для разных задач и имеют разные принципы работы. 🚩Где используется? JavaScript — в основном для веб-разработки (работает в браузере, создаёт динамичные сайты). Python — универсальный язык, применяется в бэкенде, Data Science, автоматизации, искусственном интеллекте. 🚩Как исполняется код? JS — интерпретируется браузером, выполняется в одном потоке (использует асинхронность). Python — интерпретируемый язык, выполняется синхронно, но можно использовать многопоточное и асинхронное программирование. JavaScript (динамическая веб-страница)

document.querySelector("button").addEventListener("click", () => {
  alert("Привет, мир!");
});

Python (консольная программа)

name = input("Введите ваше имя: ")
print(f"Привет, {name}!")

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

🤔 Что такое IIFE (Immediately Invoked Function Expression) и для чего она нужна? Это немедленно вызываемое функциональное выражение. Используется для: - Изоляции области видимости; - Создания модуля; - Предотвращения загрязнения глобального пространства имён. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Почему вы не используете Битрикс24 CRM с AI? 1- не знал 2- забыл Рассказываем и напоминаем! ✅Битрикс24 CRM с AI помогает увеличивать продажи, работать с постоянными клиентами и сохранять все важные данные. AI-помощник CoPilot внутри сервиса расшифрует телефонные разговоры и автоматически заполнит карточки клиента в CRM. Битрикс24 можно использовать бесплатно для всех команд, независимо от их размера. ⚡Не тратьте время на рутину. Узнать больше #реклама 16+ bitrix24.ru О рекламодателе