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

Получайте больше продаж из поиска Яндекса Анализируйте метрики и получайте рекомендации для роста продаж в Яндекс Товарах ⚡ Попробовать #реклама merchants.yandex.ru О рекламодателе

🤔 Почему повсеместно нужен https? HTTPS (HyperText Transfer Protocol Secure) — это безопасная версия HTTP, которая шифрует данные между браузером и сервером. Он защищает пользователей и сайты от перехвата данных, атак и подделки информации. 🚩 Главные причины использовать HTTPS 🟠Шифрование данных (Защита от перехвата) Без HTTPS злоумышленники могут перехватить* данные, например, пароли или банковские карты. В HTTP данные передаются открытым текстом (их легко украсть в открытых Wi-Fi). В HTTPS данные зашифрованы с помощью SSL/TLS, и даже если их перехватят, их невозможно прочитать. 🟠Защита от атак "Человек посередине" (MITM) Без HTTPS злоумышленник может подменить содержимое сайта. Опасные сценарии: Хакер в Wi-Fi кафе встраивает вредоносный код в сайт. Вредоносный провайдер заменяет рекламу или ворует куки. 🟠Google даёт больше доверия к HTTPS-сайтам Google понижает в поиске сайты без HTTPS, а Chrome помечает их как "Небезопасные". 🟠Обязателен для онлайн-платежей и авторизации Для ввода паролей, карт и личных данных HTTPS обязателен по закону (например, PCI DSS для платежей). Если сайт работает без HTTPS, браузеры блокируют передачу банковских данных. Ставь 👍 и забирай 📚 Базу знаний

Качаем скиллы PostgreSQL на PG BootCamp Russia 2025! Регистрируйся на бесплатную конференцию по PostgreSQL — 10.04.2025.📅 ✅ Бесплатное участие ✅ Опытные спикеры ✅ Тематические доклады ✅ Рабочие кейсы Каждый участник получает именной Сертификат участника мероприятия. Одни из немногих спикеров конференции: — Андрей Бородин PostgreSQL contributor, руководитель подразделения разработки РСУБД с открытым исходным кодом Yandex Cloud — Александр Никитин Ведущий администратор БД DBA.Team — Максим Милютин PostgreSQL Contributor, openGauss Contributor ... и многие другие. Регистрируйся, будет интересно! И бесплатно! Зарегистрироваться #реклама pgbootcamp.ru О рекламодателе

🤔 Что такое frontend? Это часть веб-приложения, видимая пользователю. Оно включает: 1. Разметку (HTML). 2. Стили (CSS). 3. Логику взаимодействия (JavaScript). Frontend отвечает за отображение информации и обработку пользовательских действий. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Высшее образование дистанционно от 6700 ₽/мес. Поступи в Московский технологический институт в марте! — Высшее образование в московском вузе без выезда на сессии. — Полностью дистанционный онлайн-формат. — Обучайся дома, на работе, в путешествии. — Диплом государственного образца. — 73 направления и программы обучения. — Программа колледж + вуз без ЕГЭ. Скидка 10% на платное обучение при оплате за год. Подать заявку #реклама 16+ mti-vuz.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;

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

Нанимаете аутсорс, подрядчиков, фрилансеров? Попробуйте Битрикс24 Коллабы – платформа для эффективной работы с подрядчиками. Тут обсуждения превращаются в задачи, а видео созвон можно собрать одной кнопкой. Любой проект можно разложить по полочкам с понятным ТЗ и обозначенными сроками. Работайте в Битрикс24 и создавайте Коллабы с подрядчиками. Начать #реклама 16+ collabs.bitrix24.ru О рекламодателе

🤔 Какие методы HTTP-запросов есть? 1. GET: Получение данных с сервера. 2. POST: Отправка данных на сервер. 3. PUT: Полное обновление ресурса. 4. PATCH: Частичное обновление ресурса. 5. DELETE: Удаление ресурса. 6. HEAD: Получение заголовков ответа без тела. 7. OPTIONS: Получение информации о поддерживаемых методах. 8. CONNECT, TRACE: Используются реже для специальных задач. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

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

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

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

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

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

Хочешь стать фронтенд-разработчиком, но не знаешь, с чего начать? Pulpy и SuperJob запустили проект “Карьера шаг за шагом”. Он поможет разобраться в мире ИТ и получить первую стажировку. Внутри — видео-интервью от практиков индустрии и пошаговый гайд о построении карьеры для начинающих. Кроме того, можешь отправить резюме и получить шанс: • Выиграть индивидуальную карьерную консультацию. • Попасть на стажировку в компанию-партнера. Если успеешь попасть в число первых 200 участников проекта, еще и получишь бесплатный разбор резюме. Спеши! Переходи на сайт, изучай материалы и делай первый шаг в IT: ссылка на проект Реклама АО “Мултон”, ИНН 7810249327, erid: 2W5zFJkMoYL

Получи грант на обучение в Центральном университете Прояви себя, получи грант до 2,8 млн на обучение ИТ и бизнесу в вузе. Для школьников 10-х и 11-х классов, СПО. Подать заявку #реклама apply.centraluniversity.ru О рекламодателе

🤔 Расскажи про области видимости? Области видимости определяют, где переменные доступны: глобальная (доступна везде), локальная (внутри функции), блочная (внутри блока) и модульная (в пределах модуля). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

⚡ Новые каналы с вакансиями и стажировками для джунов В этих каналах публикуются все свежие вакансии и стажировки 🔺 ВАКАНСИИ

Горячие вакансии с привлекательными офферами для джуниор разработчиков, аналитиков, дизайнеров и QA-специалистов.

👉 ПОДПИСАТЬСЯ 🔺СТАЖИРОВКИ

Стажировки для начинающих специалистов в IT независимо от возраста!

👉 ПОДПИСАТЬСЯ 🔺IT interns

Свежие стажировки для junior специалистов в топовых компании России и мира

👉 ПОДПИСАТЬСЯ 🔺Junojobs

Вакансии и стажировки для junior-разработчиков на удалёнке.

👉 ПОДПИСАТЬСЯ 🔺БИГТЕХ

Junior вакансии и стажировки в крупнейших IT-компаниях мира: NVidia, Apple, T-банк, Яндекс, Google и т. д.

👉 ПОДПИСАТЬСЯ 🔺Ква инженер - QA junior

Отборные джун вакансии и стажировки для QA, тестировщиков.

👉 ПОДПИСАТЬСЯ

Искусственный интеллект помогает больше продавать Битрикс24 CRM + Ai упрощает работу менеджера. Расшифровывает записи звонков клиентам и сам заполняет карточку сделки. Менеджер в это время уже звонит следующему клиенту. Попробуйте умную CRM Попробовать #реклама 16+ bitrix24.ru О рекламодателе

🤔 Когда использовать 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>
  );
}

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

Большая онлайн-конференция UserGate OpenConf ⚡ ИТ-конференция про защиту в открытую. Диалог между заказчиками, партнерами, экспертами и специалистами в сфере продуктов, технологий и услуг информационной безопасности. Зарегистрироваться #реклама 16+ openconf.usergate.com О рекламодателе

🤔 Разница между margin и padding? Margin (внешний отступ) определяет пространство вокруг элемента, не влияя на его внутренний размер. Padding (внутренний отступ) увеличивает пространство внутри границ элемента, увеличивая его видимый размер. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда используются теги 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>

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

Ищешь высокооплачиваемые проекты? Попробуй SkillStaff SkillStaff — это платформа для ИТ-специалистов, менеджеров и креаторов, которым мало одного оклада. Здесь можно найти клиентов, выполнять их проекты и увеличивать свой доход. - Проекты с гибким графиком: part time, full time, удаленка и гибрид - Ставка за час работы — та, что ты сам выбрал - Клиенты — ведущие бренды, проверенные с юридической точки зрения при регистрации на платформе - Оплата поступает ежемесячно на расчетный счет исполнителя - Удобный личный кабинет и функционал, автоматизирующий документооборот Все, что нужно для работы — иметь статус самозанятого или ИП, а платформа поможет со всеми нюансами. Регистрируйся прямо сейчас Зарегистрироваться #реклама 16+ skillstaff.ru О рекламодателе