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

Новые возможности Yandex Search API 20 февраля в 12:00 (мск) пройдёт бесплатный онлайн-вебинар для владельцев сайтов и аналитических сервисов. Вы узнаете, как использовать поисковые технологии для повышения эффективности своего бизнеса. Зарегистрироваться #реклама 16+ yandex.cloud О рекламодателе Реклама на Яндексе

🤔 Какие значения будут являться falsy значениями? В JavaScript значения, которые при приведении к логическому типу (boolean) становятся false, называются "falsy" значениями. Существует всего семь таких значений: 🟠`false` Логическое значение false.

console.log(Boolean(false)); // false    

🟠`0` Число ноль.

console.log(Boolean(0)); // false    

🟠`-0` Отрицательное число ноль (хотя это редко встречается на практике).

console.log(Boolean(-0)); // false    

🟠`0n` Число BigInt с значением ноль.

console.log(Boolean(0n)); // false    

🟠`""` (пустая строка) Строка без символов.

console.log(Boolean("")); // false    

🟠`null` Специальное значение, обозначающее отсутствие какого-либо значения.

console.log(Boolean(null)); // false    

🟠`undefined` Специальное значение, обозначающее необъявленное или неприсвоенное значение.

console.log(Boolean(undefined)); // false    

🟠`NaN` Специальное значение, обозначающее не число (Not-a-Number).

console.log(Boolean(NaN)); // false    

🚩Примеры использования 🟠Проверка значений на falsy В условиях (if statements) все falsy значения интерпретируются как false.

const values = [false, 0, -0, 0n, "", null, undefined, NaN];

values.forEach(value => {
    if (!value) {
        console.log(`${value} is falsy`);
    }
});

Примеры в условиях

if (!false) {
    console.log('false is falsy'); // выводится
}

if (!0) {
    console.log('0 is falsy'); // выводится
}

if (!"") {
    console.log('"" is falsy'); // выводится
}

if (!null) {
    console.log('null is falsy'); // выводится
}

if (!undefined) {
    console.log('undefined is falsy'); // выводится
}

if (!NaN) {
    console.log('NaN is falsy'); // выводится
}

🟠Использование в логических операторах Falsy значения также учитываются в логических операциях.

const value = null;

const result = value || 'default value';
console.log(result); // 'default value', потому что value является falsy

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

Подключите единое решение для вашего колл-центра Управляйте вашими звонками, чатами, аналитикой и операторами в одном окне Контакт-центра MANGO OFFICE! ✅Читайте на сайте реальные кейсы повышения CSI, выручки, скорости ответа и найма сотрудников Попробовать #реклама 16+ mango-office.ru О рекламодателе

🤔 Что делает Webpack? Это инструмент для сборки модулей JavaScript: 1. Объединяет файлы: Собирает модули в один файл для улучшения производительности. 2. Обработка ресурсов: Подключает стили, изображения, шрифты. 3. Оптимизация: Минимизирует код, разделяет файлы на части (chunking). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

📺 Уникальная база IT собеседований 456+ реальных собеседований на программиста, тестировщика, аналитика и прочие IT профы. Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

🤔 Что такое flexbox? Flexbox (Flexible Box Layout) – это модель размещения элементов в CSS, которая делает макет гибким и удобным для адаптивной верстки. Главные особенности 🟠Гибкое выравнивание элементов в строку или колонку 🟠Равномерное распределение пространства между элементами 🟠Упрощает адаптивную верстку без float и position 🟠Легкое центрирование элементов 🚩Основные термины Flexbox Когда включается display: flex;, элементы внутри него становятся флекс-элементами. Flex-контейнер → родительский элемент (display: flex;) Flex-элементы → дочерние элементы контейнера Главная ось (main axis) → ось, вдоль которой расположены элементы Поперечная ось (cross axis) → перпендикулярная ось

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

🚩Основные свойства Flexbox 🟠`display: flex;` Включает Flexbox для контейнера.

.container {
  display: flex;
}

🟠`flex-direction` – направление оси Определяет, как располагаются элементы (по горизонтали или вертикали).

.container {
  flex-direction: row; /* По умолчанию: слева направо */
}
/* Другие значения */
.container {
  flex-direction: column; /* В столбик */
  flex-direction: row-reverse; /* Справа налево */
  flex-direction: column-reverse; /* Вниз-вверх */
}

🟠`justify-content` – выравнивание по главной оси

.container {
  justify-content: flex-start; /* По умолчанию, слева направо */
  justify-content: center; /* Центр */
  justify-content: flex-end; /* Справа налево */
  justify-content: space-between; /* Равномерное распределение */
  justify-content: space-around; /* С отступами */
  justify-content: space-evenly; /* Равномерные промежутки */
}

🟠`align-items` – выравнивание по поперечной оси

.container {
  align-items: stretch; /* По умолчанию (растягивает) */
  align-items: center; /* Центр по вертикали */
  align-items: flex-start; /* Вверх */
  align-items: flex-end; /* Вниз */
  align-items: baseline; /* По базовой линии текста */
}

🟠`flex-wrap` – перенос элементов на новую строку

.container {
  flex-wrap: nowrap; /* По умолчанию – все в одной строке */
  flex-wrap: wrap; /* Элементы переносятся */
  flex-wrap: wrap-reverse; /* Перенос в обратном порядке */
}

🟠`align-content` – выравнивание строк (если `flex-wrap: wrap;`) Работает, когда элементы занимают несколько строк.

.container {
  align-content: flex-start; /* Вверх */
  align-content: flex-end; /* Вниз */
  align-content: center; /* По центру */
  align-content: space-between; /* Равномерное распределение */
  align-content: space-around; /* С отступами */
  align-content: stretch; /* Растянуть (по умолчанию) */
}

🚩Управление отдельными элементами (`flex`-элементы) flex-grow – рост элемента

.item {
  flex-grow: 1; /* Растянется, если есть место */
}

flex-shrink – сжатие элемента

.item {
  flex-shrink: 0; /* Не уменьшаться */
}

flex-basis – начальный размер элемента

.item {
  flex-basis: 200px; /* Фиксированный размер */
}

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

Решаете задачи, но не получаете оффер? Прокачка хард-скиллов – это основа. Умение писать чистый код, разбираться в алгоритмах и решать сложные задачи действительно важно. Чем сильнее технические навыки, тем выше шансы пройти тех.интервью. Бесспорно. Но вот вопрос: почему даже сильные разработчики могут провалить собеседование? Потому что сейчас технические навыки – это не всё. Процесс получения оффера – это не только алгоритмы и код. Вы можете идеально решить задачу, но если: • Не умеете объяснять свои решения • Теряетесь на поведенческих вопросах • Не понимаете, что именно хочет услышать интервьюер • Не выстраиваете стратегию поиска, а просто бесконечно откликаетесь, да еще и слабым резюме, не доходите до тех.интрвью, не выстраиваете коммуникацию в процессе отклика и на этапах … так можете и не дойти до финального оффера. Тем более до выбора из офферов с классной зп. Конверсия будет страдать! Как получить оффер, а не просто проходить интервью? Разбирают на канале ключевые аспекты, без которых даже топовый технарь может провалиться: Как оформлять резюме и отклики, чтобы вас звали на интервью Как отвечать на вопросы о вашем опыте Как уверенно проходить собеседования и "продавать" себя Какие ошибки мешают даже опытным разработчикам получать офферы Подробный разбор — как получить оффер

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

🤔 Что такое Redux? Это библиотека для управления состоянием приложения: 1. Единое хранилище: Все состояние приложения хранится в одном объекте. 2. Принцип "однонаправленного потока данных": Состояние изменяется через действия (actions) и редюсеры (reducers). 3. Удобство тестирования: Легко отслеживать изменения состояния. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда нужно использовать кнопки а когда ссылки? В веб-разработке часто возникает вопрос: использовать кнопку (<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение. 🟠Когда использовать `<button>`? Когда действие выполняется на странице без перехода на другую Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта) Отправка формы Открытие/закрытие модального окна Включение/выключение чего-то на странице Взаимодействие с JavaScript (AJAX-запросы, события)

<button onclick="alert('Нажато!')">Кликни</button>

Пример кнопки в форме:

<form>
  <input type="text" placeholder="Введите имя">
  <button type="submit">Отправить</button>
</form>

🟠Когда использовать `<a>`? Когда нужно перейти на другую страницу (или секцию сайта) Когда ссылка ведет на внешний или внутренний ресурс Навигация по сайту Переход на другую страницу Ссылки на соцсети, статьи, файлы

<a href="https://example.com">Перейти на сайт</a>

Ссылка внутри страницы (якорь)

<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>

Открытие в новом окне

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>

🟠Ошибки и неправильное использование Ошибка: использовать <button> вместо ссылки

<button onclick="window.location.href='https://example.com'">Перейти</button>

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

⚡️Слита База из 1000+ топовых курсов и материалов для айтишников 🖥 Python: @python_baza 👩‍💻 Frontend: @frontend_baza 👩‍💻 Backend: @backend_baza 🎨 Дизайн: @design_baza 📚 Книги: @archive_baza 👩‍💻 Топ GitHub: @main_it_baza Всё лучшее про IT бесплатно — уже на Базе 🚀

Ошибки в коде — ключ для атаки на веб-приложения Всего одна ошибка — и данные ваших клиентов могут оказаться в руках мошенников. Иногда достаточно одной неверной строчки кода, чтобы хакеры получили доступ к информации о пользователях. Чтобы этого не произошло, важно позаботиться о безопасности еще на начальном этапе разработки. Как это сделать, расскажут эксперты «Солара» и AppSec Solutions на вебинаре 18 февраля. Вы узнаете: ✅какие языки программирования наиболее уязвимы — исследования от AppSec Solutions, ✅как проверить веб-приложение и ПО на безопасность без навыка разработки, ✅какие новые возможности появились в Solar appScreener 3.15.0. Регистрируйтесь! Зарегистрироваться #реклама 16+ rt-solar.ru О рекламодателе

🤔 Почему React? 1. Компонентный подход: Упрощает создание и повторное использование UI-элементов. 2. Виртуальный DOM: Повышает производительность благодаря минимизации операций с реальным DOM. 3. Большая экосистема: Множество библиотек и инструментов для разработки. 4. Универсальность: Подходит как для веб-приложений, так и для мобильных (React Native). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Онлайн-интенсив для ИТ-специалистов в Открытых школах Т1 Уже есть опыт работы в ИТ, но хочешь прокачать скилы и продвинуться в карьере? Тогда скорее залетай на бесплатный ИТ-интенсив в Открытых школах Т1. Открытые школы — это возможность усилить свои навыки и получить оффер в ИТ-холдинг Т1. И все это за месяц, онлайн и в удобное вечернее время. Что ты получишь? ✅ бесплатное обучение в гибком формате: по вечерам, онлайн, из любого города РФ и РБ. ✅ материалы от HR для прокачки резюме и подготовки к интервью в Т1. ✅ много практики и уникальный рыночный опыт. ✅ поддержку опытных преподавателей и карьерный фаст-трек до мидла в Т1 для лучших выпускников. ✅ реальный шанс получить оффер в Т1. Более 1000 специалистов уже прошли этот путь — теперь твоя очередь! Регистрация до 14 марта! Подать заявку #реклама 16+ t1.ru О рекламодателе

🤔 Опасности использования `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(); // Ошибка, обработчик удален

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

🤔 Что такое семантика? Это использование HTML-элементов в соответствии с их смыслом. Например: - <header> для заголовков. - <article> для статей. - Семантический HTML улучшает SEO, доступность и структуру кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Квартиры в ЖК SOKOLNIKI! Рассрочка до 2,5 лет, ПВ от 10% Видовые квартиры бизнес+ класса возле парка от 28 м² от 400 000 руб./м² Первый взнос от 10% Гибкие программы рассрочки до 2,5х лет с переходом в ипотеку Квартиры от 28м² до 135м² От студий до семейных фоматов с большими гостиными Колясочные на этаже Все для удобства родителей Дизайнерские лобби Стильные входные группы Подземный паркинг Системы хранения велосипедов и самокатов Детский сад Закрытая территория Девелопер STONE 18 лет на рынке недвижимости. 27 проектов м. "Сокольники", 12 мин. от парка Перейти на сайт Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО СЗ «КВАРТАЛ СОКОЛЬНИКИ». Финансовые услуги оказывает: ПАО "Совкомбанк". #реклама stone-sokolniki.ru О рекламодателе

🤔 Основные причины отказа от классовых компонентов в react? С появлением React Hooks в версии 16.8 (2019 год) классовые компоненты стали устаревшим способом создания компонентов. Сегодня функциональные компоненты с хуками заменяют классы. Давайте разберем почему. 🟠Меньше кода → чище и понятнее Функциональные компоненты короче, читаются легче, а код становится чище.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.increment}>
        Счетчик: {this.state.count}
      </button>
    );
  }
}

Функциональный компонент (хуки делают код проще)

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Счетчик: {count}
    </button>
  );
}

🟠Легче управлять жизненным циклом (useEffect vs componentDidMount) В классах жизненный цикл* компонента состоит из нескольких методов (componentDidMount, componentDidUpdate, componentWillUnmount).

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: 0 };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: this.state.time + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <p>Время: {this.state.time} секунд</p>;
  }
}

Функциональный компонент (хуки делают все проще)

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Время: {time} секунд</p>;
}

🟠Лучшая производительность (меньше потребления памяти) Классовые компоненты используют экземпляры классов, а функциональные компоненты – просто функции. Создают экземпляры this Обрабатывают setState Хранят лишние связи и контексты Не создают this Используют только нужные данные Оптимизируются через React.memo

const Button = React.memo(({ onClick }) => {
  console.log("Ререндер кнопки");
  return <button onClick={onClick}>Нажми</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(c => c + 1), []);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <Button onClick={increment} />
    </div>
  );
}

🟠Легче переиспользовать логику (React Hooks vs HOC/Render Props) Раньше в классах код переиспользовали через HOC и Render Props, но это делало код сложным.

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Компонент монтирован");
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

Хуки (useEffect) делают код чище

function useLogger() {
  useEffect(() => console.log("Компонент монтирован"), []);
}

function MyComponent() {
  useLogger();
  return <p>Привет, мир!</p>;
}

🟠Функциональные компоненты – будущее React React официально рекомендует использовать функциональные компоненты Dan Abramov (разработчик React) Новые фичи React (Suspense, Server Components) создаются для функциональных компонентов Классы не работают в React Server Components Большинство современных библиотек (Redux Toolkit, React Query) рассчитаны на хуки Ставь 👍 и забирай 📚 Базу знаний

Все новости из мира программирования на этом канале @umnyiprogrammist Подписывайтесь, чтобы не упустите ничего важного Ставь 👍 и забирай 📚 Базу знаний

Профессиональная конференция по UX/UI 22 февраля в Москве пройдёт профильная UX/UI конференция для тех, кто проектирует и создаёт интерфейсы. 20+ экспертов топовых digital-агентств и RnD. 3 потока докладов. Кейсы от ведущих агентств. Активный нетворкинг. Афтепати в завершении дня. Программа и билеты на сайте. Узнать больше #реклама uxuiconf.ru О рекламодателе