Переходы (transition) в CSS позволяют плавно изменять значения свойств элемента при смене состояния, например, при наведении. Трансформации (transform) применяются для изменения положения, размера или формы элемента, включая перемещение, масштабирование и вращение.

.element {
  transition: opacity 0.5s ease; /* Плавное изменение opacity */
  transform: rotate(45deg); /* Вращение элемента на 45 градусов */
}

Переходы и трансформации часто используются вместе для создания анимаций и интерактивных эффектов.

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

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

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

# После конфликта Git помечает конфликтующие участки в файле
<<<<<<< HEAD
изменение из текущей ветки
=======
изменение из ветки для слияния
>>>>>>> branch-name

Для решения конфликтов необходимо вручную отредактировать файл, оставив нужные изменения, и удалить маркеры конфликта. После этого нужно добавить файл в индекс и завершить слияние.

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

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

Многострочное текстовое поле создаётся с помощью тега <textarea>. Этот элемент позволяет пользователю вводить текст, а атрибуты rows и cols задают размеры поля.

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

Настройка компилятора через tsconfig.json позволяет управлять процессом компиляции. Этот файл создается в корне проекта и содержит параметры, которые определяют, как будет происходить трансформация кода.

Основные разделы файла:
- compilerOptions: настройки компилятора, такие как целевая версия, модульная система, строгость типов и другие.
- include: массив путей к файлам, которые должны быть включены в компиляцию.
- exclude: массив путей к файлам, которые должны быть исключены из компиляции.

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

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

- target: определяет версию стандарта, в которую будет компилироваться код.
- module: задает систему модулей.
- strict: включает строгий режим проверки типов.
- outDir: указывает директорию для скомпилированных файлов.
- include/exclude: управляют выбором файлов для компиляции.

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

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

➡️ Оператор typeof используется для определения типа значения. Он возвращает строку, указывающую тип операнда. Работает как с примитивами, так и с объектами.

Основные возвращаемые значения:
- "undefined" для undefined.
- "boolean" для булевых значений.
- "number" для чисел.
- "string" для строк.
- "bigint" для значений типа BigInt.
- "symbol" для символов.
- "object" для объектов (включая null и массивы).
- "function" для функций.

Пример:

console.log(typeof 42); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof null); // "object"
console.log(typeof function() {}); // "function"

- Для null возвращается "object", что является исторической ошибкой.
- Для массивов также возвращается "object", так как они являются объектами.
- Для функций возвращается "function", хотя они тоже являются объектами.

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

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

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

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

🛑Тег в Git — это указатель на конкретный коммит, который используется для отметки важных моментов в истории проекта, например, версий релизов. Теги бывают двух типов: легковесные (lightweight) и аннотированные (annotated).

- Легковесный тег — это просто ссылка на коммит. Создается командой:

git tag v1.0

- Аннотированный тег содержит дополнительную информацию: имя автора, дату и сообщение. Создается командой:

git tag -a v1.0 -m "Release version 1.0"

Теги не обновляются автоматически при новых коммитах, что делает их удобными для фиксации состояний проекта. Для отправки тегов в удаленный репозиторий используется команда:

git push origin v1.0

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

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

➡️Кастомный хук — это функция, которая использует встроенные хуки (useState, useEffect и другие) для создания повторно используемой логики. Имя хука должно начинаться с use, чтобы React мог корректно отслеживать его вызовы.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

В этом примере хук useWindowWidth отслеживает ширину окна браузера и возвращает её значение. Кастомные хуки позволяют инкапсулировать логику, упрощая её повторное использование в разных компонентах.

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

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

🛑Styled Components — это библиотека для стилизации компонентов в React, которая позволяет писать CSS-код непосредственно в JavaScript. Она создает изолированные стили, автоматически генерируя уникальные классы, что предотвращает конфликты.

Пример использования:

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

// Использование компонента
<Button primary>Click me</Button>

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

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

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

Кнопка в HTML создается с помощью тега <button>, который может содержать текст или другие элементы. Для отправки данных в формах также используется тег <input> с атрибутом type="submit".

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

➡️ ESLint — это инструмент для статического анализа кода, который помогает находить и исправлять ошибки, а также обеспечивать соблюдение стиля написания. Для работы с TypeScript требуется установка плагина @typenoscript-eslint/parser и настройка конфигурации.

Пример настройки .eslintrc.js:

module.exports = {
  parser: '@typenoscript-eslint/parser',
  plugins: ['@typenoscript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typenoscript-eslint/recommended'
  ],
  rules: {
    '@typenoscript-eslint/no-unused-vars': 'error',
    '@typenoscript-eslint/explicit-function-return-type': 'warn'
  }
};

- parser указывает на использование TypeScript-парсера.
- plugins добавляет поддержку TypeScript.
- extends включает рекомендуемые правила для JavaScript и TypeScript.
- rules позволяет настраивать дополнительные правила или переопределять существующие.

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

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

🔘Для преобразования строки в верхний или нижний регистр используются методы toUpperCase() и toLowerCase(). Эти методы возвращают новую строку, не изменяя оригинальную.

Пример:

const text = "Hello World";
console.log(text.toUpperCase()); // "HELLO WORLD"
console.log(text.toLowerCase()); // "hello world"

- toUpperCase() преобразует все символы строки в верхний регистр.
- toLowerCase() преобразует все символы строки в нижний регистр.
- Оба метода не изменяют исходную строку, а возвращают новую.

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

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

Обработчик событий в Vue-шаблоне добавляется с помощью директивы v-on или ее сокращенного синтаксиса @. Например, для обработки клика по кнопке используется @click="methodName", где methodName — метод, определенный в компоненте.

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

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

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

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

🪅 CSS-модули позволяют изолировать стили для каждого компонента, избегая конфликтов имен классов. Для их использования в проекте React необходимо настроить сборку (например, через Webpack или Create React App) и именовать файлы стилей с расширением .module.css.

Пример использования:

import styles from './MyComponent.module.css';

function MyComponent() {
  return <div className={styles.container}>Content</div>;
}

- Файл стилей MyComponent.module.css должен содержать классы, например:

  .container {
    padding: 10px;
    background: #fff;
  }

- Классы из CSS-модуля доступны через объект styles, что обеспечивает уникальность имен.

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

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

Для просмотра всех веток в репозитории используется команда git branch, которая выводит список локальных веток. Чтобы увидеть также удаленные ветки, нужно добавить флаг -a.

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

🔹Тег <nonoscript> используется для отображения контента, если JavaScript отключен в браузере. Он позволяет предоставить альтернативное содержимое или сообщение для пользователей, которые не могут или не хотят использовать JavaScript.

Пример:

<nonoscript>
  <p>Please enable JavaScript to use this website.</p>
</nonoscript>

- Контент внутри <nonoscript> отображается только при отключенном JavaScript.
- Часто используется для информирования пользователей или предоставления базовой функциональности без JavaScript.

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

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

✅React Profiler — инструмент для измерения производительности React-приложений. Он помогает находить узкие места в рендеринге компонентов.

Для использования нужно обернуть целевую часть приложения в компонент Profiler. Он принимает два пропа: id (идентификатор) и onRender (колбэк, срабатывающий после рендера).

<Profiler id="App" onRender={(id, phase, actualTime) => {
  console.log(`${id} took ${actualTime}ms to render`);
}}>
  <App />
</Profiler>

Колбэк onRender получает параметры: id, phase (mount/update), actualTime (время рендера), baseTime (время без мемоизации).

В DevTools React Profiler отображает flamegraph и ranked chart для анализа производительности. Инструмент полезен для оптимизации сложных компонентов.

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

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

Тег <code> используется для выделения фрагментов кода в HTML. Он отображает текст моноширинным шрифтом, сохраняя форматирование, но для многострочного кода лучше подходит <pre>.

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

✔️ Тип never в TypeScript обозначает значение, которое никогда не должно возникать. Он используется в ситуациях, когда функция не завершается нормально или когда переменная не может иметь значения.

Функция, которая всегда выбрасывает ошибку или содержит бесконечный цикл, возвращает never:

function throwError(message: string): never {
  throw new Error(message);
}

Также never полезен в exhaustive checks для обработки всех вариантов union-типа:

type Shape = 'circle' | 'square';
function handleShape(shape: Shape) {
  switch (shape) {
    case 'circle': return;
    case 'square': return;
    default: const _exhaustiveCheck: never = shape; // Ошибка, если Shape расширится
  }
}

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

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

▶️Параметры по умолчанию позволяют задавать начальные значения аргументов функции, если они не переданы или равны undefined.

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

Если вызвать greet() без аргументов, name примет значение 'Guest'. Параметры по умолчанию могут быть любыми выражениями, включая вызовы функций.

function createUser(name, id = generateId()) {
  return { name, id };
}

Значения по умолчанию вычисляются только в момент вызова функции, если соответствующий аргумент отсутствует.

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

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