👉 @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

Разработка веб-приложений GraphQL с React, Node.js и Neo4j

Язык запросов API GraphQL заметно упрощает обмен данными с серверами, позволяя приложениям получать данные в виде простых для понимания графов. Преимущества GraphQL можно усилить за счет таких графовых инструментов и хранилищ данных, как React, Apollo и Neo4j. Подход к разработке графовых приложений полного цикла обеспечивает согласованную модель данных от начала до конца, повышая продуктивность разработчиков. Эта книга научит вас создавать графовые веб-приложения с использованием GraphQL, React, Apollo и базы данных Neo4j, которые все вместе называются GRANDstack.

👉 @frontendInterview

Двумерный массив

Ваша задача - изменить числа на главной диагонали. Все отрицательные нужно заменить на 0, а положительные на 1.

Пример:
Входной массив
[
[-1, 4, -5, -9, 3 ],
[ 6, -4, -7, 4, -5 ],
[ 3, 5, 0, -9, -1 ],
[ 1, 5, -7, -8, -9 ],
[-3, 2, 1, -5, 6 ]
]

Выходной массив
[
[ 0, 4, -5, -9, 3 ],
[ 6, 0, -7, 4, -5 ],
[ 3, 5, 1, -9, -1 ],
[ 1, 5, -7, 0, -9 ],
[-3, 2, 1, -5, 1 ]
]

👉 @frontendInterview

::first-letter

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

Напишем код, выделяющий первую букву в цитате:
blockquote::first-letter {
font-size: 1.86rem;
font-weight: 700;
font-style: italic;
letter-spacing: 0.12rem;
}

Для псевдоэлемента сработает лишь небольшой набор CSS-свойств:
- font и шрифтовые свойства, начинающиеся на font-;
- background и свойства фона, начинающиеся на background-;
- margin и внешние отступы, начинающиеся на margin-;
- padding и внутренние отступы, начинающиеся на padding-;
- border и свойства рамок, начинающиеся на border-;
цвет текста color;
- текстовые свойства text-decoration, text-shadow, text-transform, letter-spacing, word-spacing, line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align.

👉 @frontendInterview

👉 @frontendInterview

word-wrap

Свойство word-wrap управляет переносом длинных слов, если они не помещаются в родительский блок.

Пример того, как можно настроить перенос по символам с помощью word-wrap.
p {
border: 1px solid #fff;
width: 100px;
word-wrap: break-word;
}

Возможные значения:
normal — значение по умолчанию. При этом значении текст будет переноситься по пробелам, специальным символам и тегу <br>.
break-word — слово переносится на любой букве при достижении края родительской области.

👉 @frontendInterview