Что такое кортеж в TypeScript?

Кортежи похожи на массивы с одним ключевым отличием. В кортежах можно указать тип каждого конкретного элемента. Нужно перечислить все типы в квадратных скобках, тем самым присвоив их каждой позиции.

// определение кортежа - кортеж состоит из двух элементов - строки и числа
let userInfo: [string, number];

// инициализация кортежа

 userInfo = ["Tom", 28];

// Неправильная инициализация - переданные значения не соответствуют типам по позиции

 userInfo = [28, "Tom"]; // Ошибка

// использование кортежа
console.log(userInfo[1]); // 28
userInfo[1] = 37;

👉 @frontendInterview

👉 @frontendInterview

Что такое GraphQL?

Это язык запросов и интерфейс для получения данных, который был разработан Facebook в 2012 году. Он предлагает универсальный способ запрашивать и получать данные из различных источников, таких как REST API или базы данных.

Он отличается от REST тем, что в ответ на запрос можно получить только необходимые данные, а не всю сущность. Например, если вам нужны только имя и возраст пользователя, вы можете отправить запрос с этими полями, а не получить всю сущность пользователя.
Пример запроса, который запрашивает имя и возраст пользователя с ID 1:

 query {
   user(id: 1) {
     name
     age
   }
 }

GraphQL также имеет систему типов для определения схемы данных на бэкенде и фронтенде, что сокращает количество багов при создании интеграции между бэком и фронтом.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Как вы отлаживаете и отлавливаете ошибки в TypeScript коде?

- Первым шагом для отладки может быть использование консоли браузера или инструментов разработчика, чтобы просмотреть вывод и ошибки JavaScript-кода, который был сгенерирован из TypeScript.

- Другой метод отладки - использование breakpoints и отладчика в среде разработки, такой как Visual Studio Code, который позволяет просматривать и изменять переменные во время выполнения.

- Использование сообщений об ошибках TypeScript и их детализация может быть очень полезна для определения и исправления проблем.

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

👉 @frontendInterview

Тестирование программного обеспечения

Учебное пособие посвящено вопросам анализа, планирования, проведения тестовых испытаний и оценки качества программного обеспечения на всех стадиях его жизненного цикла.

👉 @frontendInterview

MergeSort "merge" function

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

Примеры:

 mergesorted([1,2],[3,4]) //should: [1,2,3,4]
 mergesorted([1,2],[3]) //should: [1,2,3]
 mergesorted([1],[2, 3]) //should: [1,2,3]

👉 @frontendInterview

Зачем нужен атрибут aria-expanded?

Атрибут aria-expanded нужен для элементов, при взаимодействии с которыми содержимое изменяет видимость. Например для кнопки, которая показывает или скрывает меню.

Пример
<button aria-expanded="false" aria-controls="menu">Раскрыть меню</button>
<div class="menu" id="menu">
<ul>
<li>
<a href="/dogs-pools/">Бассейны для собак</a>
</li>
<li>
<a href="/cats-boxes/">Коробки для кошек</a>
</li>
</ul>
</div>

Aria-expanded принимает одно из трёх значений:
true — содержимое или другие элементы развёрнуты.
false — содержимое или другие элементы свёрнуты.
undefined (по умолчанию) — у элемента нет содержимого, которое разворачивается и сворачивается.

👉 @frontendInterview

👉 @frontendInterview

Что такое Web3?

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

Для того, чтобы начать работу с Web3, необходимо иметь представление о том, как работает Ethereum и какие инструменты можно использовать для создания приложений. Для начала необходимо научиться программировать на Solidity, языке программирования, используемом для создания децентрализованных приложений на базе Ethereum. После того как вы научитесь программировать на Solidity, вам необходимо будет использовать инструменты Web3, такие как Web3.js или Ethers.js, чтобы связать ваше приложение с блокчейном Ethereum.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Оптимизация css стилей

Cначала проверяем необходимость подключения конкретных стилей. Если вы используете библиотеки типа Bootstrap, то выбирайте только необходимые стили, не нужно загружать то, чем вы не пользуетесь.

Принципы оптимизации загрузки css файлов:
1. Загружаем нужны стили на нужных страницах
2. Сжимаем код
3. Объединяем в один файл
Можно выделить самые важные стили (описание 10-100 самых базовых элементов) и встроить их (inline) в код страницы. Google рекомендует это делать для ускорения прорисовки шаблона/структуры страницы.

Все оптимизации css стилей также лучше автоматизировать с помощью плагинов.

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

👉 @frontendInterview