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

🤔 Как добавить класс на элемент по условию? Если тебе нужно применять стили к элементу в зависимости от какого-то состояния, Vue позволяет это сделать динамически. Ты просто указываешь, когда класс должен применяться, а когда нет. Это удобно для подсветки выбранных элементов, отображения ошибок или изменения внешнего вида по действиям пользователя. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как можно работать с датами в 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)

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

🤔 Какие недостатки есть у iframe? - Сложности с безопасностью (XSS, sandbox); - SEO-непрозрачность; - Изоляция стилей и скриптов; - Трудности в кросс-доменном взаимодействии. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда использовать uselayuouteffect, а когда useeffect? Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются useEffect выполняется после рендера и отрисовки в браузере. useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере. То есть useLayoutEffect блокирует рендер, а useEffect — нет. 🚩Когда использовать `useEffect`? useEffect выполняется асинхронно, после того как браузер отрисовал страницу. Используется для: - Запросов к API. - Подключения WebSocket'ов или таймеров. - Логирования данных. - Изменения заголовка страницы (document.title).

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Вы кликнули ${count} раз`;
  }, [count]); // Запускается после рендера

  return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}

🚩Когда использовать `useLayoutEffect`? useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения. Используется для - Синхронных манипуляций с DOM. - Измерения размеров элементов (getBoundingClientRect). - Анимаций (например, при расчёте позиций).

import { useEffect, useLayoutEffect, useState } from "react";

function Example() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const box = document.getElementById("box");
    setWidth(box.offsetWidth);
  }, []);

  return (
    <div>
      <div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
      <p>Ширина: {width}px</p>
    </div>
  );
}

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

Бесплатная защита от DDoS-атак 📱 DDoS-атаки способны замедлить сайт или полностью вывести его из строя. Особенно это критично в пиковые сезоны или во время распродаж, когда каждая минута простоя сайта равна потерянным клиентам. 👍 AntiDDoS от Solar Space — облачное решение для защиты сайта от DDoS-атак. Бесплатный тариф подходит для небольших ресурсов: сайтов-визиток, сайтов экспертов и корпоративных порталов. ✅ Решение не требует сложных настроек: после активации сервис сразу начинает фильтровать трафик и подавлять атаки. 👌 Подключение занимает всего 20 минут в личном кабинете. Никаких карт, подписок и скрытых платежей. Установить #реклама 16+ rt-solar.ru О рекламодателе

🤔 Какие ещё есть парадигмы программирования? Кроме объектно-ориентированной и функциональной, существуют процедурная, декларативная, логическая, реактивная, событийная и аспектно-ориентированная парадигмы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как отменить обтекание картинки текстом? Когда мы добавляем картинку в HTML, текст по умолчанию может обтекать её, если используется float. 🚩Отмена обтекания с `clear: both;` Если изображение обтекается текстом из-за float, нужно очистить обтекание с помощью clear: both;.

<img src="image.jpg" class="float-img">
<p class="clear-text">Этот текст не будет обтекать картинку.</p>

.float-img {
  float: left; /* Изображение обтекается текстом */
  margin-right: 10px;
}

.clear-text {
  clear: both; /* Останавливает обтекание */
}

🚩Сделать изображение блочным (`display: block;`) По умолчанию img – inline-block элемент, поэтому текст может располагаться рядом. Если сделать его display: block;, текст уйдёт вниз.

img {
  display: block;
  margin: 10px auto; /* Центрирование */
}

🚩Использовать `overflow: hidden;` для предотвращения наложений Если у родителя есть float, можно использовать overflow: hidden; для очистки потока.

.container {
  overflow: hidden; /* Очищает обтекание */
}

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

⚡️ В сети начали массово сливать курсы и книги известных онлайн школ по айти Вот отсортированная база с тонной материала (постепенно пополняется): (363 видео, 87 книги) — Python (415 видео, 68 книги) — Frontend (143 видео, 33 книги) — ИБ/Хакинг (352 видео, 89 книги) — С/С++/C# (343 видео, 87 книги) — Java/QA (176 видео, 32 книги) — Git/Linux (174 видео, 91 книги) — DevOps (167 видео, 53 книги) — PHP/1С (227 видео, 83 книги) — SQL/БД (114 видео, 77 книги) — Сисадмин (107 видео, 43 книги) — BA/SA (181 видео, 32 книги) — Go/Rust (167 видео, 43 книги) — Kotlin/Swift (112 видео, 24 книги) — Flutter (137 видео, 93 книги) — DS/ML (113 видео, 82 книги) — GameDev (183 видео, 37 книги) — Дизайн (136 видео, 33 книги) — PM/HR Скачивать ничего не нужно — все выложили в Telegram

🤔 Как в CSS работают разные приоритеты стилей? Приоритеты определяются специфичностью селектора и порядком подключения. !important имеет высший приоритет, но лучше его избегать. Inline-стили имеют больший вес, чем внешние. Более конкретные селекторы побеждают общие. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про оптимизацию рендеринга в react? Это процесс снижения количества лишних перерисовок компонентов, что улучшает производительность приложения. React повторно рендерит компоненты, когда их состояние (state) или свойства (props) изменяются. Однако часто это приводит к ненужным рендерам, которые можно избежать. 🚩Почему важна оптимизация рендеринга? 🟠Производительность Чем больше компонентов рендерится без необходимости, тем больше времени тратится на вычисления и обновления DOM. 🟠Экономия ресурсов Избегая лишних рендеров, приложение работает быстрее, а пользовательский интерфейс становится более отзывчивым. 🟠Лучший UX Плавная работа интерфейса критична для сложных приложений с большим количеством данных. 🚩Основные подходы к оптимизации рендеринга 🟠Мемоизация компонентов React предоставляет утилиту React.memo, чтобы предотвращать ререндеринг компонента, если его props не изменились.

import React from 'react';

const MyComponent = React.memo(({ count }) => {
  console.log('Рендер компонента');
  return <div>Счётчик: {count}</div>;
});

// Использование
export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <MyComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

🟠Использование `useMemo` и `useCallback` Эти хуки используются для предотвращения повторных вычислений и создания функций при каждом рендере.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ number }) {
  const calculatedValue = useMemo(() => {
    console.log('Выполняются сложные вычисления...');
    return number ** 2;
  }, [number]); // Пересчитывается только если `number` изменился

  return <div>Результат: {calculatedValue}</div>;
}

Пример useCallback

import React, { useCallback, useState } from 'react';

const Child = React.memo(({ onClick }) => {
  console.log('Рендер дочернего компонента');
  return <button onClick={onClick}>Кликни меня</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Кнопка нажата');
  }, []); // Создаётся одна и та же функция между рендерами

  return (
    <div>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Увеличить {count}</button>
    </div>
  );
}

🟠Разделение кода и ленивый рендеринг Использование React.lazy и Suspense позволяет загружать компоненты только тогда, когда они необходимы.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

🟠Проверка зависимости в `useEffect` Избегайте запуска побочных эффектов, если зависимости не изменились.

React.useEffect(() => {
  console.log('Эффект сработал!');
}, [/* следите только за нужными зависимостями */]);

🟠Избегайте анонимных функций и объектов в `props` Передача новых объектов и функций через props вызывает лишние рендеры.

<ChildComponent data={{ key: 'value' }} />

Лучше так

const data = { key: 'value' };
<ChildComponent data={data} />;

🟠Разделение больших компонентов Если компонент слишком сложный, разделите его на более мелкие, чтобы React мог эффективно управлять состоянием и перерисовкой. 🟠Использование ключей при рендере списков Каждый элемент списка должен иметь уникальный ключ, чтобы React мог правильно отслеживать изменения.

{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}

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

Дизайн в FIGMA с нуля. Бесплатный курс + портфолио Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Как работает this в JavaScript? this указывает на контекст вызова функции. Его поведение зависит от способа вызова: - В методе объекта — указывает на сам объект. - В обычной функции — зависит от строгого режима (undefined или глобальный объект). - В стрелочной функции — берёт значение this из внешнего контекста. - Через call, apply, bind можно явно задать this. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего в js нужна асинхронность? JavaScript – однопоточный язык, где код выполняется **последовательно, но иногда мы ждём ответа (запрос в интернет, чтение файла, таймер). Если всё делать синхронно, программа зависнет. 🟠Проблема синхронного кода Представьте, что мы загружаем данные из API синхронно:

const data = fetch("https://api.example.com/users"); // ❌ Ожидание ответа
console.log("Данные загружены:", data);

🟠Асинхронность решает эту проблему Асинхронный код не блокирует выполнение программы

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log("Данные загружены:", data));

console.log("Этот код выполнится сразу! 🚀");

🚩Как работает асинхронность в JS? Callbacks (обратные вызовы) – старый способ. Promises (fetch(), then/catch) – современный вариант. async/await – удобный синтаксис для асинхронного кода. async/await – лучший способ писать асинхронный код

async function getData() {
    try {
        let response = await fetch("https://api.example.com/users");
        let data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка загрузки:", error);
    }
}

getData();
console.log("Этот код выполняется, пока ждём данные!");

🚩Где нужна асинхронность? Запросы к серверу Чтение файлов Таймеры Работа с базами данных Взаимодействие с пользователем (ожидание ввода) Ставь 👍 и забирай 📚 Базу знаний

IT — не латте, смузи и гироскутер, а вызовы и амбиции VK показывает, чем занимаются её команды — от экспериментальных технологий до VK Fest. Переходите по ссылке: смотрите ролики, читайте про проекты и тут же откликайтесь на вакансию, которая по вкусу! Перейти на сайт #реклама 16+ vkteam.ru О рекламодателе

🤔 Какие статические методы есть у Promise? Promise предоставляет несколько полезных статических методов: - Promise.resolve() — создаёт успешно завершённый промис. - Promise.reject() — создаёт отклонённый промис. - Promise.all() — ждёт завершения всех промисов или отклоняет при первой ошибке. - Promise.race() — возвращает результат первого завершившегося промиса. - Promise.allSettled() — ждёт завершения всех промисов, возвращает статусы. - Promise.any() — возвращает первый успешно завершённый промис или ошибку, если все отклонены. Эти методы позволяют управлять сразу несколькими асинхронными операциями. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как оптимизировать страницы для печати? Если пользователи захотят распечатать вашу веб-страницу, важно, чтобы она выглядела чисто и профессионально. Для этого используется CSS-медиа-правило @media print, которое позволяет задать специальные стили для печати. 🟠Использование `@media print` Вы можете задать стили, которые будут применяться только при печати

@media print {
  body {
    font-size: 12pt; /* Оптимальный размер шрифта */
    color: black; /* Убираем цветной текст для экономии чернил */
    background: none !important; /* Убираем фон */
  }
}

🟠Убираем ненужные элементы (меню, рекламу, анимации) Некоторые элементы (например, навигация, футер, кнопки) не нужны при печати, их можно скрыть

@media print {
  nav, .sidebar, .ads, .button {
    display: none; /* Скрываем ненужное */
  }
}

🟠Изменяем ширину страницы и текст Обычно страницы шире, чем лист бумаги. Можно задать max-width для удобства

@media print {
  body {
    width: 100%; 
    max-width: 800px; /* Уменьшаем ширину */
    margin: auto; /* Центрируем */
  }
}

Заменяем цвета на чёрно-белые (экономия чернил)

@media print {
  a {
    color: black !important; /* Делаем ссылки чёрными */
    text-decoration: underline; /* Добавляем подчёркивание */
  }
}

🟠Добавляем URL ссылок в текст При печати гиперссылки не работают, поэтому можно показать их адрес

@media print {
  a::after {
    content: " (" attr(href) ")"; /* Добавляем URL рядом со ссылкой */
    font-size: 10pt;
    color: gray;
  }
}

Избегаем разрывов страниц в неудобных местах

@media print {
  h1, h2, h3 {
    page-break-after: avoid; /* Не разрываем страницу после заголовка */
  }
  p {
    page-break-inside: avoid; /* Не разрываем абзац на две страницы */
  }
}

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

🤔 С чем работать помимо React? Обычно в связке с React используют: - Redux / Zustand / Context API — для управления состоянием. - TypeScript — для типизации. - React Router — для маршрутизации. - Formik / React Hook Form — для работы с формами. - Styled-components / Emotion / Tailwind CSS — для стилизации. - Jest / React Testing Library — для тестирования компонентов. - Next.js — для SSR, SSG и улучшенного рендеринга. Если ты уточнишь стек, могу подробнее описать каждую технологию. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

База 1000+ реальных собеседований теперь встроена в easyoffer Смотрите, как другие кандидаты отвечают на вопросы, решают задачи и проходят этапы на реальных собеседованиях от топовых компаний. Подготовьтесь к своему собеседованию с двойной уверенностью. Напоминаем, что сегодня последний день Чёрной Пятницы 👉 Забрать PRO со скидкой 70%: https://easyoffer.ru/

🤔 Зачем создавались библиотеки react и другие? Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки: 🟠Повышение эффективности разработки Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным. React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение. 🟠Улучшение производительности Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким. React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились. 🟠Облегчение работы с состоянием приложения Управление состоянием больших и сложных приложений может стать хаотичным. React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой. 🟠Улучшение масштабируемости и поддерживаемости кода По мере роста приложения, код может стать сложным для понимания и изменения. Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода. 🟠Сообщество и экосистема Наличие обширного сообщества и инструментов для разработки. React имеет большое сообщество разработчиков, множество библиотек и инструментов, которые упрощают разработку и интеграцию различных функций в приложения.

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

export default Counter;

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

🤔 Для чего нужна методология в HTML? Методология помогает структурировать и стандартизировать верстку, улучшает читаемость, поддержку и масштабируемость кода. Пример: BEM (Block Element Modifier) — популярная методология для CSS/HTML. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний