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

🤔 Для чего нужна методология в html? Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения. 🚩Зачем это нужно 🟠Понятность кода Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам. 🟠Снижение ошибок Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей. 🟠Упрощение масштабирования В больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые. 🟠Легкость сопровождения С методологией легко найти нужные элементы и вносить изменения. 🚩Примеры популярных методологий 🟠БЭМ (Блок, Элемент, Модификатор) Одна из самых популярных методологий для HTML и CSS. - Она предлагает структурировать классы так: - Блок: независимый компонент (например, menu). - Элемент: часть блока (например, menu__item). - Модификатор: вариант блока или элемента (например, menu__item--active). Пример кода

     <div class="menu">
       <div class="menu__item menu__item--active">Главная</div>
       <div class="menu__item">О нас</div>
       <div class="menu__item">Контакты</div>
     </div>
     

🟠Atomic Design Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта). Пример

     <!-- Атом -->
     <button class="button">Клик</button>
     <!-- Молекула -->
     <div class="form">
       <label class="form__label">Имя</label>
       <input class="form__input" type="text">
     </div>
     

🟠SMACSS (Scalable and Modular Architecture for CSS) Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода. Ставь 👍 и забирай 📚 Базу знаний

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

🤔 Какие теги запрещены в HTML5? HTML5 устранил устаревшие теги, такие как: - <font> - <center> - <big>, <tt> - <acronym> - <frame>, <frameset>, <noframes> - <applet>, <basefont>, <dir> Их функциональность заменена CSS и современными элементами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие есть альтернативы ssr? В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки. 🚩CSR (Client-Side Rendering) Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой <div> с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.

<div id="app"></div>
<script src="bundle.js"></script>

🚩Плюсы ➕Быстрая работа после загрузки Приложение становится очень интерактивным после инициализации. ➕Меньшая нагрузка на сервер Основная работа выполняется на клиентской стороне. ➕Гибкость и модульность Легко добавлять сложные интерактивные компоненты. 🚩Минусы ➖Медленная первая загрузка (Time to First Byte, TTFB) Пользователь видит пустую страницу, пока загружается JavaScript и данные. ➕Проблемы с SEO Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере. ➖Требования к устройствам Больше ресурсов требуется на стороне клиента. 🚩SSG (Static Site Generation) Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.

npm run build

🚩Плюсы и минусы ➕Молниеносная загрузка HTML статичен и отдается сервером без обработки. ➕SEO-дружелюбность Поисковые системы могут легко индексировать готовый HTML. ➕Уменьшение нагрузки на сервер Все вычисления выполняются заранее (во время сборки). ➖Ограничения при частых обновлениях контента Для обновления нужно заново пересобирать сайт, что может занимать много времени. ➖Не подходит для динамических данных Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным. 🚩ISR (Incremental Static Regeneration) Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее.

export async function getStaticProps() {
  return {
    props: {
      data: fetchData(),
    },
    revalidate: 60, // Обновлять страницу каждые 60 секунд
  };
}

🚩Плюсы и минусы ➕Лучшая производительность Страницы отдаются как статические, но обновляются при необходимости. ➕Гибкость Удобно для контента, который редко обновляется. ➕SEO Поисковики видят статические страницы. ➖Сложнее настроить Нужно управлять кэшированием и интервалами обновления. ➖Не подходит для полностью динамических страниц Если обновления контента слишком частые, ISR может не подойти. 🚩DPR (Dynamic Rendering / Hybrid Rendering) Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков. 🚩Плюсы и минусы ➕Оптимально для SEO Боты получают готовый HTML. ➕Гибкость Пользователи получают интерактивные страницы через CSR. ➖Усложнение архитектуры Нужно отслеживать запросы и разделять их. ➖Задержки для ботов Генерация страницы на сервере может занять время. Ставь 👍 и забирай 📚 Базу знаний

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

🤔 Что такое методы массива? Это встроенные функции в Array.prototype, позволяющие перебирать, фильтровать, изменять, объединять и сортировать массивы. Примеры: map, filter, reduce, forEach, push, pop, splice, sort. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Профессия «Аналитик данных». Рассрочка 0% Освойте высокооплачиваемую IT-профессию с нуля за 6 месяцев. Выдаём диплом, помогаем с трудоустройством. Excel, SQL, PowerBI, Python. Преимущества обучения в Академии Eduson: 🎓 официальный государственный диплом 🎓если после курса не найдёте работу — мы возвращаем деньги и это зафиксировано в договоре 🎓 рассрочка 0% на 24 мес., то есть без переплаты 🎓 бессрочный доступ к лекциям и материалам, которые продолжают обновляться 🎓 личный куратор с Вами на связи Начните обучаться онлайн и получать стабильный доход уже во время обучения! Узнать больше Финансовые услуги оказывает: ПАО "Сбербанк", АО "Тинькофф Банк" и др.. #реклама 16+ eduson.academy О рекламодателе

🤔 Как бы добавлял статический метод в prototype? На самом деле, статические методы не добавляются в prototype, потому что они принадлежат самому классу, а не его экземплярам. Но если ты хочешь имитировать статический метод в prototype, можно использовать функцию-конструктор и добавить метод вручную. 🚩Как работают статические методы? (`static`) В классе статические методы объявляются с помощью static. Они не находятся в prototype, а принадлежат самому классу.

class User {
  static sayHello() {
    return "Привет!";
  }
}

console.log(User.sayHello()); // ✅ "Привет!"
console.log(User.prototype.sayHello); // ❌ undefined (нет в prototype)

🚩Добавление "статического" метода в `prototype` (не совсем статический) Если нужно, чтобы каждый объект имел доступ к "статическому" методу через prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод в prototype
User.prototype.sayHello = function () {
  return "Привет!";
};

const user1 = new User("Иван");
console.log(user1.sayHello()); // ✅ "Привет!"

🚩Добавление метода напрямую в сам класс (имитация `static`) Если хочется добавить метод на сам класс, а не в prototype, можно сделать так

function User(name) {
  this.name = name;
}

// Добавляем метод прямо в функцию-конструктор
User.sayHello = function () {
  return "Привет!";
};

console.log(User.sayHello()); // ✅ "Привет!"

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

Открытые онлайн-уроки в Центральном университете 🎓 Тебя ждут лекции от ведущих преподавателей Центрального университета, а также возможность попасть на буткемп, сертификат о прохождении и тиражный мерч. 💻 Последняя лекция 9 июля — можно подключиться в любой момент Не упусти шанс — регистрируйся уже сейчас! Записаться онлайн #реклама 16+ event.centraluniversity.ru О рекламодателе

🤔 Что такое CSS? CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида и форматирования HTML-элементов, включая цвета, размеры, шрифты и расположение. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем нужен ref? В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React. 🚩Основные случаи использования `ref` Доступ к DOM-элементам: Использование в сторонних библиотеках: Сохранение состояния вне дерева компонентов: 🚩Примеры использования `ref` Доступ к DOM-элементам Установка фокуса на элемент

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;

Получение размеров элемента Измерение элемента:

import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;

Использование в классовых компонентах Доступ к методам компонента:

import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;

🚩Важно помнить Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо. Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам. Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом. Ставь 👍 и забирай 📚 Базу знаний

🤔 Чем похожи массивы, объекты и функции? Все они — объекты в JavaScript. Их можно изменять, расширять, передавать как аргументы, хранить свойства. Отличаются только поведением и встроенными методами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Онлайн-магистратура в IT совместно с ИТМО, МИФИ и МФТИ День открытых дверей В удобное время | Онлайн Все программы 2025, общение со студентами и экспертами из вузов и Яндекса. Ответы на вопросы. Зарегистрироваться #реклама 16+ practicum.yandex.ru О рекламодателе

🤔 Является ли, drag and drop частью спецификации? Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек. 🚩Как работает Drag and Drop API? В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие.

<div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>

<script>
  const dragItem = document.getElementById("drag-item");
  const dropZone = document.getElementById("drop-zone");

  dragItem.addEventListener("dragstart", (event) => {
    event.dataTransfer.setData("text/plain", "Данные элемента");
  });

  dropZone.addEventListener("dragover", (event) => {
    event.preventDefault(); // Нужно, чтобы разрешить сброс
  });

  dropZone.addEventListener("drop", (event) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text/plain");
    alert("Элемент сброшен: " + data);
  });
</script>

🚩Какие события есть в Drag and Drop? Основные события: dragstart — когда начали тянуть элемент. drag — когда элемент двигается (срабатывает много раз). dragenter — когда курсор заходит в зону сброса. dragover — когда элемент находится над зоной (нужно preventDefault()). dragleave — когда курсор покидает зону сброса. drop — когда элемент отпущен в зоне сброса. dragend — когда перетаскивание завершено (даже если не сбросили). 🚩Где используется Drag and Drop? - Перетаскивание файлов в <input type="file"> (например, загрузка изображений). - Канбан-доски, как в Trello. - Онлайн-редакторы, как Figma. - Игры, где можно перемещать предметы. 🚩Можно ли сделать Drag and Drop без HTML5 API? Да, можно использовать другие методы: Через события мыши (mousedown, mousemove, mouseup). Через CSS position: absolute и transform. Через JS-библиотеки (Sortable.js, React DnD, Draggable.js). Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend. Ставь 👍 и забирай 📚 Базу знаний

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

Открыть бизнес? Конечно, со Сбером! За 0₽ любой тариф расчётно-кассового обслуживания на месяц, выбирайте тот, который больше всего подойдёт вашему делу. А также: ✅ бесплатные сервисы для ведения бизнеса: бухгалтерия для ИП, юрподдержка, электронный документооборот, отчётность в госорганы и многое другое. Всё, чтобы вам было удобно! ✅ специальные условия для тех, кто ведёт бизнес на маркетплейсах: безлимитные переводы на счета физлиц без комиссии. Откройте счёт онлайн или в любом нашем офисе. Узнать больше Финансовые услуги оказывает: ПАО Сбербанк. #реклама sberbank.com О рекламодателе

🤔 Расскажи про особенности свойства color color – одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG).

p {
  color: red;
}

🟠Какие значения принимает `color`? CSS позволяет задавать цвета несколькими способами 🟠Особенности работы `color` Наследование color наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background).

body {
  color: blue;
}
p {
  color: inherit; /* Явное наследование */
}

currentColor — скрытое золото Это специальное значение, которое означает "используй текущее значение color". Очень полезно для стилизации border, box-shadow, outline и SVG.

button {
  color: red;
  border: 2px solid currentColor; /* Использует color */
}

transparent — особый цвет

p {
  color: transparent;
}

Когда rgba() или hsla() лучше

p {
  color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}

color и mix-blend-mode Можно заставить текст взаимодействовать с фоном с помощью mix-blend-mode

h1 {
  color: white;
  mix-blend-mode: difference;
}

color в ::selection и ::placeholder Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания color

::selection {
  background: blue;
  color: white;
}

input::placeholder {
  color: gray;
}

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

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

🤔 Какими хуками и средствами можно заблокировать лишний ререндер? - React.memo — мемоизация компонента. - useMemo — мемоизация значений. - useCallback — мемоизация функций. - shouldComponentUpdate / React.PureComponent — в классовых компонентах. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Получи грант до 1,2 млн руб. на обучение в магистратуре Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой? Поступай в магистратуру Центрального университета! - 4 офлайн программы по востребованным направлениям ИТ - Онлайн-программа по машинному обучению - 300 мест с грантами до 1,2 млн руб. - Вечерние занятия и учеба по выходным — удобно совмещать с работой - Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса - Возможность стажировок и трудоустройства в ведущих компаниях - Государственный диплом за 2 года Магистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии. Оставляй заявку на грант уже сейчас! Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе