NEW BOT Телеграм, страница

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

XHTML — это строгая версия HTML, соответствующая правилам XML: требует закрытия всех тегов, корректной вложенности, чувствителен к регистру и атрибутам. HTML более гибкий, допускает пропуск некоторых закрывающих тегов и менее строг к синтаксису.

XHTML обрабатывается парсерами как XML, что обеспечивает лучшую согласованность, но требует точного синтаксиса, тогда как HTML более терпим к ошибкам разметки.

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4

533 views11:02

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

Error Boundaries — это компоненты, которые перехватывают JavaScript-ошибки в дочерних компонентах, логируют их и отображают резервный UI вместо «поломанного» дерева компонентов.


class ErrorBoundary extends React.Component {
  state = { hasError: false };
  
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  
  componentDidCatch(error, info) {
    logErrorToService(error, info); // Логирование ошибки
  }
  
  render() {
    return this.state.hasError 
      ? <FallbackComponent /> 
      : this.props.children;
  }
}

Работают как try/catch, но только для компонентов. Не перехватывают ошибки в:
- Обработчиках событий
- Асинхронном коде (setTimeout, промисы)
- SSR
- Внутри самого Error Boundary

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

❤5

558 views16:02

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

Промисы типизируются с помощью generic-параметра Promise<T>, где T — тип значения, с которым резолвится промис.


const fetchData: Promise<string> = new Promise((resolve) => {
  resolve("Success"); // Корректно: возвращает string
});

Для ошибок используется тип Promise<T | Error>, либо отдельная обработка в catch.


async function load(): Promise<Data> {
  const response = await fetch(url);
  return response.json(); // Автоматическая проверка типа
}

Указание типа гарантирует корректность данных при then() и await.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

543 views06:02

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

Строгий режим — это способ сделать код более безопасным, предотвращая использование устаревших или проблемных конструкций (например, необъявленных переменных). Он включается директивой 'use strict' и вызывает явные ошибки вместо молчаливого игнорирования потенциальных багов.

Этот режим также изменяет поведение некоторых операций (например, this в функциях) и запрещает синтаксис, который может мешать оптимизациям движка JS.

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

517 views11:02

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

Правило @keyframes определяет последовательность стилей на разных этапах анимации. Имя анимации задаётся разработчиком, а ключевые кадры отмечаются процентами (0% — начало, 100% — конец).


@keyframes slide-in {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

Для применения анимации используется свойство animation с указанием имени, длительности и других параметров.


.element {
  animation: slide-in 1s ease-in-out;
}

Ключевые кадры поддерживают промежуточные точки (например, 50%). Анимация автоматически интерполирует значения между кадрами.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

549 views16:02

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

useReducer — альтернатива useState для управления сложным состоянием. Принимает редюсер-функцию (state, action) => newState и начальное состояние, возвращает текущее состояние и метод dispatch для генерации действий.


const [state, dispatch] = useReducer(reducer, initialState);

Редюсер обрабатывает действия (обычно объекты с `type`), обновляя состояние предсказуемо. Оптимален для связанных данных или когда следующее состояние зависит от предыдущего.


function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    default: return state;
  }
}

Используется для сложной логики состояния, особенно в сочетании с контекстом.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

556 views06:02

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

Тег <link> устанавливает связь между текущим HTML-документом и внешними ресурсами, такими как CSS-файлы, иконки или шрифты. Он размещается в <head> и чаще всего используется для подключения стилей (rel="stylesheet") или favicon (rel="icon").

Также <link> может применяться для предзагрузки ресурсов (rel="preload"), указания альтернативных версий страницы или установки отношений между документами через атрибут rel.

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4❤1

527 views11:02

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

Определяет, как элемент реагирует на события мыши/тача. Основные значения:
- auto (по умолчанию) — элемент обрабатывает события как обычно
- none — полностью игнорирует события (клики, ховеры)


.button { pointer-events: none; } /* Кнопка становится "некликабельной" */

Особенности:
- Не влияет на события клавиатуры (фокус остаётся доступным)
- Позволяет "прокликивать" сквозь элементы к нижним слоям
- Часто используется для временного отключения интерактивности

Работает для SVG и HTML-элементов. В сложных случаях комбинируется с visibility или opacity.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

552 views16:02

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

Коммит — это snapshot (снимок) состояния репозитория на определенный момент времени. Каждый коммит сохраняет изменения в файлах, а также содержит метаданные: автора, дату, сообщение и уникальный хеш (например, a1b2c3d).

Коммиты образуют историю проекта. Их можно просматривать, откатывать или объединять. Создается коммит командой:


git commit -m "Описание изменений"

Комментарий к коммиту должен быть четким и описывать суть изменений. Для просмотра истории коммитов используется git log.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

581 views06:02

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

Состояние — это внутренние данные компонента, которые могут изменяться со временем и влиять на его отображение. При обновлении состояния React автоматически перерисовывает компонент, чтобы отразить новые данные.

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

545 views11:02

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

Атрибуты — это дополнительные свойства HTML-элементов, которые задают их характеристики или поведение. Они указываются внутри открывающего тега в формате name="value".

Некоторые атрибуты универсальны, например class, id или style, другие — специфичны для определенных элементов (href для <a>, src для <img>).


<a href="https://example.com" target="_blank">Ссылка</a>

Атрибут href задает URL, а target="_blank" открывает ссылку в новой вкладке.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

557 views16:02

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

Оператор keyof принимает тип объекта и возвращает объединение строковых литералов его ключей. Это полезно для строгой типизации при работе со свойствами объекта.


type Person = { name: string; age: number };
type PersonKeys = keyof Person; // "name" | "age"

Используется в дженериках и утилитах типов для обеспечения типобезопасности. Например, keyof помогает ограничить параметры функции только допустимыми ключами объекта.


function getProperty<T>(obj: T, key: keyof T) {
  return obj[key];
}

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4

564 views06:02

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

Ассоциативный массив — это структура данных, где элементы хранятся в формате "ключ-значение", а доступ к ним осуществляется по уникальному ключу (обычно строковому). В JavaScript ассоциативные массивы реализуются через обычные объекты или коллекции Map.

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3🔥1

527 views11:02

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

Для выполнения HTTP-запросов обычно используют библиотеки axios или fetch. Асинхронные операции обрабатывают в методах компонента, часто с применением async/await для удобства.


data() {
  return { posts: [] };
},
async created() {
  try {
    const response = await axios.get('https://api.example.com/posts');
    this.posts = response.data;
  } catch (error) {
    console.error('Ошибка загрузки данных:', error);
  }
}

Для управления состоянием загрузки и ошибок добавляют соответствующие поля в data. В Vue 3 можно использовать Composition API с ref или reactive для аналогичной логики.


setup() {
  const posts = ref([]);
  const loadPosts = async () => {
    posts.value = await axios.get('https://api.example.com/posts');
  };
  return { posts, loadPosts };
}

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4

544 views16:02

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

Свойство user-select определяет, может ли пользователь выделять текст на странице. Для полного запрета выделения используется значение none.


.unselectable {
  user-select: none;
  -webkit-user-select: none; /* Для Safari */
  -moz-user-select: none; /* Для Firefox */
}

Это полезно для элементов интерфейса, где выделение текста не требуется (кнопки, иконки). Свойство не блокирует копирование через контекстное меню или DevTools.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

555 views06:02

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

Для клонирования репозитория используется команда git clone, за которой следует URL репозитория (HTTPS или SSH). Эта команда создает локальную копию со всей историей и ветками.

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4

509 views11:02

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

Подъем состояния — это перенос общего состояния из дочерних компонентов в их ближайшего общего родителя. Такой подход обеспечивает синхронизацию данных между компонентами.


function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <ChildA value={value} onChange={setValue} />
      <ChildB value={value} />
    </>
  );
}

Родительский компонент управляет состоянием и передает его дочерним через props. Изменения состояния обрабатываются через колбэки.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4

498 views16:02

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

Таблицы используются для структурированного отображения данных в строках и столбцах. Основные теги:


<table>
  <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
  </tr>
  <tr>
    <td>Данные 1</td>
    <td>Данные 2</td>
  </tr>
</table>

- <table>: контейнер таблицы
- <tr>: строка таблицы
- <th>: ячейка заголовка (жирный текст)
- <td>: ячейка с данными

Для объединения ячеек используются атрибуты colspan и rowspan. Стилизация выполняется через CSS.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4

532 views06:02

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

Транспиляция — это преобразование TypeScript-кода в чистый JavaScript через компилятор tsc. В процессе удаляются типы и аннотации, сохраняется логика кода, а также применяются настройки из tsconfig.json (версия JS, модули и другие опции).

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

488 views11:02

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

Для работы с датами используется объект Date. Он позволяет создавать экземпляры дат, производить манипуляции и форматирование.


const now = new Date(); // Текущая дата и время
const specificDate = new Date(2024, 11, 31); // 31 декабря 2024

Основные методы:
- getFullYear(), getMonth(), getDate() — получение компонентов даты
- setHours(), setMinutes() — установка времени
- toLocaleDateString() — локализованное форматирование

Для сложных операций (интервалы, парсинг) удобно использовать библиотеки типа moment.js или date-fns.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5🔥1

493 views16:02

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

Нестандартные шрифты подключаются через правило @font-face, которое указывает путь к файлу шрифта и его свойства.


@font-face {
  font-family: 'CustomFont';
  src: url('fonts/custom-font.woff2') format('woff2'),
       url('fonts/custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

После объявления шрифт применяется через свойство font-family. Современные форматы (WOFF2) обеспечивают лучшее сжатие. Важно указывать fallback-шрифты на случай проблем с загрузкой.


body {
  font-family: 'CustomFont', Arial, sans-serif;
}

Для оптимальной производительности рекомендуются подмножества шрифтов и предзагрузка через <link rel="preload">.

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

👈

✈️

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

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5

501 views06:02

About

Blog

Apps

Platform