🔘CSS-модули — это технология, позволяющая использовать CSS в компонентах, избегая конфликтов имен классов. Они обеспечивают локальную область видимости стилей, что особенно полезно в крупных проектах с множеством компонентов.

😊При использовании CSS-модулей каждый класс и идентификатор автоматически преобразуется в уникальное имя. Это достигается за счет генерации хешей, которые добавляются к именам классов. Таким образом, даже если в разных модулях используются одинаковые имена классов, они не будут конфликтовать.

🔘CSS-модули интегрируются с большинством современных сборщиков. Для использования достаточно импортировать CSS-файл как модуль и применять стили через объект, где ключи — это имена классов, а значения — уникальные строки.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🟢Vue.js — это прогрессивный JavaScript-фреймворк, используемый для создания пользовательских интерфейсов. Он отличается своей гибкостью и простотой, что делает его идеальным выбором как для небольших проектов, так и для крупных приложений. Vue.js позволяет создавать компоненты, которые можно легко переиспользовать и комбинировать, что упрощает управление сложностью приложения.

▶️ Основные особенности Vue.js включают реактивные привязки данных и мощную систему компонентов. Это позволяет автоматически обновлять пользовательский интерфейс при изменении данных, что упрощает разработку интерактивных приложений. Vue.js также поддерживает интеграцию с другими библиотеками, что делает его универсальным инструментом для веб-разработки.

Пример простого компонента на Vue.js:

Vue.component('example-component', {
  template: '<div>Hello, Vue!</div>'
});

▶️ Vue.js активно используется для создания одностраничных приложений (SPA), где требуется высокая интерактивность и отзывчивость интерфейса.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Функция — это блок кода, предназначенный для выполнения определенной задачи. Использование функций улучшает читаемость и повторное использование кода.

Объявление функции в JavaScript можно осуществить несколькими способами:

1⃣ Функциональное объявление:

function greet(name) {
    return `Hello, ${name}!`;
}

2⃣ Функциональное выражение:

const greet = function(name) {
    return

 Hello, ${name}!;

};

3⃣ Стрелочная функция:

const greet = (name) =>

 Hello, ${name}!;

🟥 Каждый из этих методов позволяет создавать функции, которые можно вызывать с разными аргументами для выполнения заданных действий.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔴JSX (JavaScript XML) — это синтаксический сахар для JavaScript, который позволяет писать HTML-подобный код внутри JavaScript. Он используется в React для описания пользовательского интерфейса. JSX упрощает создание компонентов, делая код более читаемым и декларативным.

⚫️JSX не является валидным JavaScript, поэтому он компилируется в вызовы React.createElement(). Например, <div>Hello</div> преобразуется в React.createElement('div', null, 'Hello'). Это позволяет React создавать виртуальное DOM-дерево, оптимизируя обновления реального DOM. JSX поддерживает JavaScript-выражения внутри фигурных скобок {}.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

➡️ Margin — это внешний отступ элемента, который определяет пространство вокруг него. Он позволяет управлять расстоянием между элементами на странице. Margin может быть задан для каждой стороны элемента отдельно: margin-top, margin-right, margin-bottom, margin-left, или с помощью сокращенной записи margin, где значения указываются по часовой стрелке, начиная с верхнего отступа.

.element {
  margin: 10px 20px 15px 5px; /* top, right, bottom, left */
}

➡️ Margin может принимать значения в пикселях, процентах и других единицах измерения.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🟢Атрибут placeholder используется в HTML для предоставления подсказки или примера ввода в текстовых полях формы. Он отображает текст внутри поля ввода, когда оно пустое и не в фокусе, помогая пользователю понять, какую информацию следует ввести.

<input type="text" placeholder="Enter your name">

🟢Этот атрибут улучшает пользовательский интерфейс, делая формы более интуитивно понятными. Однако текст placeholder исчезает при вводе данных.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

📝 Перечисления (Enums) служат для создания именованных констант, что делает код более читаемым и управляемым. Они позволяют группировать связанные значения под одним именем, обеспечивая удобный доступ к ним.

enum Direction {
  Up,
  Down,
  Left,
  Right
}

const move: Direction = Direction.Up;

🟠 По умолчанию перечисления имеют числовые значения, начиная с 0. Можно задавать свои значения:

enum Status {
  Active = 1,
  Inactive,
  Pending
}

🟠 Перечисления помогают избежать ошибок, связанных с использованием "магических" чисел и строк в коде.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Блочная модель в CSS описывает структуру и расположение элементов на веб-странице, включая их содержимое, внутренние отступы (padding), границы (border) и внешние отступы (margin). Она позволяет управлять размерами и позиционированием элементов, что является ключевым аспектом при создании интерфейсов.

✈️ Frontend собеседования

Конкатенация строк в JavaScript может быть выполнена с помощью оператора +, который объединяет две или более строки в одну. Также можно использовать метод concat(), который принимает несколько строк в качестве аргументов и возвращает новую строку. В современных версиях JavaScript часто применяются шаблонные строки с использованием обратных кавычек, что позволяет вставлять переменные и выражения внутрь строк.

👉 Тут еще больше JS

✈️ Frontend собеседования

⏩ Функциональные компоненты проще и легче для понимания. Они представляют собой функции, которые принимают props и возвращают JSX. С введением хуков функциональные компоненты могут управлять состоянием и жизненным циклом, что раньше было доступно только в классовых компонентах.

⏩ Классовые компоненты используют ES6 классы и имеют методы жизненного цикла. Они более громоздкие и сложные, особенно для новичков.

Пример функционального компонента:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Пример классового компонента:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Атрибут id и класс используются для идентификации и стилизации элементов, но имеют разные назначения и ограничения.

1⃣ id — уникальный идентификатор элемента на странице. Он должен быть уникальным в пределах документа и часто используется для JavaScript манипуляций и CSS селекторов:

<div id="header"></div>

2⃣ Класс (class) позволяет группировать элементы для применения общих стилей или поведения. Один элемент может иметь несколько классов, и один класс может быть применен к нескольким элементам:

<div class="button primary"></div>

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🚀 Реактивность во Vue — это ключевая концепция, которая позволяет автоматически обновлять пользовательский интерфейс при изменении данных. Vue отслеживает изменения в объектах данных и обновляет DOM, когда данные изменяются. Это достигается благодаря использованию Proxy во Vue 3 или Object.defineProperty во Vue 2.

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
});

app.mount('#app');

При изменении message, Vue автоматически обновит все связанные с ним элементы в DOM.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

TypeScript — это надмножество JavaScript, которое добавляет статическую типизацию и другие возможности, упрощая разработку и поддержку крупных приложений. В отличие от JavaScript, TypeScript позволяет выявлять ошибки на этапе компиляции, улучшая качество кода и снижая вероятность ошибок в рантайме.

✈️ Frontend собеседования

CSS-in-JS — это подход к стилизации веб-приложений, при котором стили пишутся непосредственно в JavaScript-коде. Этот метод позволяет использовать динамические стили, которые могут изменяться в зависимости от состояния компонента или приложения. Преимущества CSS-in-JS:

😎 Изоляция стилей: Стили применяются только к конкретным компонентам, что предотвращает конфликты имен классов и утечку стилей.

😎 Динамичность: Легко изменять стили в зависимости от состояния приложения или пропсов компонентов.

😎 Поддержка темизации: Упрощает создание тем и их переключение.

😎 Удобство разработки: Стили и логика компонента находятся в одном месте, что упрощает поддержку и развитие кода.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

👉 Наследование в ES6-классах позволяет создавать новые классы на основе существующих, используя ключевое слово extends. Это позволяет новому классу (производному) наследовать свойства и методы базового класса.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak();

Метод super() используется для вызова конструктора базового класса, что позволяет инициализировать свойства, унаследованные от родителя.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔥 Clearfix — это CSS-техника, используемая для исправления проблем с обтеканием, когда контейнер не растягивается по высоте из-за плавающих элементов внутри него. Она применяется для обеспечения корректного отображения и расчета размеров контейнера, содержащего элементы с float.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

📝 Виртуальный DOM (Virtual DOM) — это концепция, используемая в React для оптимизации обновлений пользовательского интерфейса. Он представляет собой легковесную копию реального DOM, которая хранится в памяти и синхронизируется с реальным DOM с помощью библиотеки React.

✅ Когда состояние компонента изменяется, React сначала обновляет виртуальный DOM. Затем сравнивает его с предыдущей версией, используя алгоритм "согласования" (reconciliation), чтобы определить минимальные изменения, необходимые для обновления реального DOM. Это позволяет значительно уменьшить количество операций с DOM, улучшая производительность приложения.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

⏩ Тег <canvas> в HTML5 используется для рисования графики на веб-странице с помощью JavaScript. Он предоставляет область, в которой можно создавать динамические, интерактивные изображения, такие как графики, игры и анимации.

⏩ <canvas> сам по себе не содержит графики. Для рисования используется JavaScript API, который позволяет рисовать линии, фигуры, текст и изображения. Пример использования:

<canvas id="myCanvas" width="200" height="100"></canvas>
<noscript>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 150, 80);
</noscript>

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

💡 Статическая типизация в TypeScript означает, что типы переменных определяются во время компиляции, а не выполнения, что позволяет обнаруживать ошибки типов до запуска программы. Это обеспечивает более надежный и предсказуемый код, так как можно явно указывать типы данных и использовать преимущества автодополнения и проверки типов в процессе разработки.

✈️ Frontend собеседования

☝️ Рекурсия — это метод программирования, при котором функция вызывает саму себя для решения задачи. Это позволяет разбивать сложные задачи на более простые подзадачи. В JavaScript рекурсия часто используется для работы с деревьями и графами, а также для реализации алгоритмов, таких как сортировка и поиск. Пример рекурсивной функции для вычисления факториала числа:

function factorial(n) {
  // Базовый случай: факториал 0 равен 1
  if (n === 0) return 1;
  // Рекурсивный вызов: n * факториал (n-1)
  return n * factorial(n - 1);
}

Важно учитывать базовый случай, чтобы избежать бесконечной рекурсии.

👉 Тут еще больше JS

✈️ Frontend собеседования