Блочная модель в 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 собеседования

Элементы "inline" занимают только необходимое пространство и располагаются в одной строке с другими элементами, например, теги <span> и <a>. Элементы "block" занимают всю ширину родительского контейнера и начинаются с новой строки, как <div>, а "inline-block" элементы, такие как <button>, сочетают свойства обоих: они располагаются в одной строке, но могут иметь заданные ширину и высоту.

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

☝️ Экземпляр Vue — это основа любого приложения на Vue.js. Он управляет данными, рендерингом и реактивностью. Создание экземпляра Vue — первый шаг в разработке приложения.

🔴 Для создания экземпляра Vue используется конструктор Vue. В него передаются опции, такие как el, data, methods и computed.

new Vue({
  // Указывает элемент, к которому будет привязан экземпляр
  el: '#app',
  // Данные, которые будут реактивными
  data: {
    message: 'Hello, Vue!'
  },
  // Методы, которые можно вызывать из шаблона
  methods: {
    greet() {
      return `Message: ${this.message}`;
    }
  }
});

🔴 Экземпляр Vue связывается с DOM и управляет его обновлением.

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

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

🔘 В React передача данных от родительского компонента к дочернему осуществляется через props. Родительский компонент передает данные в виде атрибутов, которые затем доступны в дочернем компоненте через объект props.

// Родительский компонент
function ParentComponent() {
  const data = "Привет, мир!";
  return <ChildComponent message={data} />;
}

// Дочерний компонент
function ChildComponent(props) {
  // Доступ к переданным данным через props
  return <div>{props.message}</div>;
}

😊 В этом примере ParentComponent передает строку "Привет, мир!" в ChildComponent через prop message. Дочерний компонент получает доступ к этому значению через props.message и отображает его.

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

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

▶️ Для создания ссылки на другую страницу используется элемент <a>. Атрибут href указывает адрес страницы, на которую ведет ссылка.

<!-- Ссылка на внешнюю страницу -->
<a href="https://example.com">Перейти на Example</a>

<!-- Ссылка на внутреннюю страницу -->
<a href="/about.html">О нас</a>

▶️ В первом примере ссылка ведет на внешний сайт. Во втором примере ссылка указывает на внутреннюю страницу сайта. Текст между тегами <a> отображается как кликабельная ссылка.

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

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

🟢 В JavaScript длина массива определяется с помощью свойства length. Это свойство возвращает количество элементов в массиве.

// Создание массива
const fruits = ["apple", "banana", "cherry"];

// Получение длины массива
const length = fruits.length;

// Вывод длины массива
console.log(length); // 3

🟢 В этом примере массив fruits содержит три элемента. Свойство length возвращает значение 3, которое затем выводится в консоль.

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

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

➡️ Создание анимации с помощью CSS — это простой и эффективный способ добавить динамику на веб-страницу. Для этого используются ключевые кадры и свойство animation. Пример анимации, которая перемещает элемент слева направо:

/* Определение ключевых кадров для анимации */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

/* Применение анимации к элементу */
.element {
  animation: slide 2s infinite alternate;
}

В этом примере анимация slide длится 2 секунды и повторяется бесконечно, чередуя направление движения.

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

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

💡.git в репозитории содержит все необходимые метаданные для управления версиями проекта, включая историю коммитов, конфигурацию и ссылки на удаленные репозитории. Это скрытая папка, которая позволяет Git отслеживать изменения и управлять ветками, обеспечивая полное управление версионностью проекта.

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