В чем разница между interface и type в TypeScript?

interface X {
a: number
b: string
}

type X = {
a: number
b: string
};

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

В целом, можно сказать, что ключевое слово type больше подходит для типизации примитивных значений или объектных значений, не являющихся звеньями сложной цепочки. interface же необходим и удобен при осознанном построении объектно-ориентированной архитектуры.

👉 @frontendInterview

​Что такое ErrorBoundary в React?

Error boundaries- это компоненты, которые отлавливают ошибки JavaScript, возникающие в любом дочернем компоненте, сообщают об этих ошибках и отображают резервный UI.

Классовый компонент становится предохранителем при определении в нем нового метода жизненного цикла componentDidCatch(error, info) или static getDerivedStateFromError() :

 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props)
     this.state = { hasError: false }
   }

   componentDidCatch(error, info) {
     // Вы также можете отправлять ошибки в специальный сервис по их обработке
     logErrorToMyService(error, info)
   }

   static getDerivedStateFromError(error) {
      // Обновляем состояние, чтобы при следующем рендеринге использовался запасной UI
      return { hasError: true };
    }

   render() {
     if (this.state.hasError) {
       // Вы можете рендерить любой резервный интерфейс
       return <h1>{'Что-то пошло не так.'}</h1>
     }
     return this.props.children
   }
 }

После этого, предохранитель используется как обычный компонент:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>

👉 @frontendInterview

👉 @frontendInterview

Селекты, инпуты, батоны и прочие обитатели форм

Зачем они нужны, если есть куча библиотек с красивыми кастомными элементами?

Нужны! и важно уметь с ними работать

✔️ С нативным элементом можно предсказуемо взаимодействовать клавиатурой

✔️ Не возникает косяков с положением выпадающих элементов на экране

✔️ Элемент соответствует настройкам операционной системы

✔️ Контролы доступны скринридерам

✔️ Элемент будет доступен пользователям с ограниченными возможностями

Чтобы разобраться во всех тонкостях создания нативных форм, рекомендую эти тренажеры

Тренажер «Погружение в формы»

Проходить можно прямо в браузере, подача - огонь 🔥

👉 @frontendInterview

Почему этот код нестабилен?

Поскольку setState() является асинхронным, установка нового состояния на основе предыдущего состояния иногда может пойти не так. В таких сценариях нужно использовать синтаксис функции обратного вызова для установки состояния. Тогда в prevState будет актуальное значение.

const [state, setState] = useState(0);
setState((prevState) => prevState + 1);

👉 @frontendInterview

React. Сборник рецептов. Практические приемы работы с фреймворком React

Книга посвящена практическому применению фреймворка React. Описано создание простых приложений и приложений со сложным интерфейсом, рассмотрены вопросы маршрутизации в приложениях и управление их состоянием. Даны примеры реализации интерактивного взаимодействия с пользователем, подключения к различным службам бэкенда, таким как REST и GraphQL, описана работа с библиотеками компонентов. Подробно рассматривается безопасность приложений, процесс их тестирования, даны советы по обеспечению доступности. Приводятся практические рекомендации по повышению производительности и созданию прогрессивных веб-приложений.

👉 @frontendInterview

Merged String Checker

Создайте функцию, которая проверит, можно ли составить строку s из символов двух других строк - part1 и part2. При этом символы в part1 и part2 нельзя менять местами.

Пример:
'codewars' is a merge from 'cdw' and 'oears':

s: c o d e w a r s = codewars
part1: c d w = cdw
part2: o e a r s = oears

👉 @frontendInterview

Различия протоколов TCP и UDP

TCP – транспортный протокол передачи данных в сетях TCP/IP, предварительно устанавливающий соединение с сетью.

UDP – транспортный протокол, передающий сообщения-датаграммы без необходимости установки соединения в IP-сети.

Разница между протоколами TCP и UDP – в так называемой "гарантии доставки". TCP требует отклика от клиента, которому доставлен пакет данных, подтверждения доставки, и для этого ему необходимо установленное заранее соединение. Также протокол TCP считается надежным, тогда как UDP получил даже именование “протокол ненадежных датаграмм. TCP исключает потери данных, дублирование и перемешивание пакетов, задержки. UDP все это допускает, и соединение для работы ему не требуется. Процессы, которым данные передаются по UDP, должны обходиться полученным, даже и с потерями. TCP контролирует загруженность соединения, UDP не контролирует ничего, кроме целостности полученных датаграмм.

👉 @frontendInterview

♥️ Все наши каналы по JS / PHP / Python, подпишись ♥️

@seniorFront - всё про фронтенд, практика, примеры кода, интересные статьи

@web_craft - php, Laravel, фронтенд

@sWebDev - обзор библиотек JS / CSS

@python_practics - всё про Python, обучающие материалы, полезные советы и статьи

Что такое HTTP и HTTPS?

HTTP (от англ. HyperText Transfer Protocol — протокол передачи гипертекста) — это прикладной протокол передачи данных в сети. На текущий момент используется для получения информации с веб-сайтов. Протокол HTTP основан на использовании технологии «клиент-сервер»: клиент, отправляющий запрос, является инициатором соединения; сервер, получающий запрос, выполняет его и отправляет клиенту результат.

HTTPS (от англ. HyperText Transfer Protocol Secure — безопасный протокол передачи гипертекста) — это расширение протокола HTTP, поддерживающее шифрование посредством криптографических протоколов SSL и TLS.

Чем отличаются HTTP и HTTPS:
- HTTPS не является отдельным протоколом передачи данных, а представляет собой расширение протокола HTTP с надстройкой шифрования;
- передаваемые по протоколу HTTP данные не защищены, HTTPS обеспечивает конфиденциальность информации путем ее шифрования;
- HTTP использует порт 80, HTTPS — порт 443.

👉 @frontendInterview

Реклама. ООО "Яндекс" ИНН 7736207543 Erid LdtCKfwJx

🔥 Разыгрываем Станцию Дуо Макс! Это первая колонка Яндекса с камерой и сенсорным экраном — флагман новой линейки устройств.

Что делать? Подпишитесь на телеграм-каналы @yandex и @techno_yandex, а потом нажмите кнопку «Участвовать» под этим постом. 15 декабря в 13:00 бот рандомно выберет победителя из числа участников.

▶️ А как производят и тестируют умные устройства Яндекса на заводе в Гуанчжоу, смотрите в мини-сериале YaC 2023 — на Кинопоиске и YouTube.

👉 @frontendInterview