​Почему не стоит использовать краткую запись свойств CSS?

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

Когда мы пишем что-то вроде этого:

 .btn {
   background: red;
 }

Мы всего лишь хотим, чтобы у нашей кнопки был красный фоновый цвет. Но на самом деле мы задаем целый набор правил:
CSS
.btn {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: red;
}

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

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

👉 @frontendInterview

👉 @frontendInterview

​Почему стоит использовать семантические теги в верстке?

Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на смысловое предназначение каждого блока и логическую структуру документа.

Почему семантика важна?

Чтобы сделать сайт доступным. Для незрячих людей основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь.

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

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <div id="nav"> для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо <div> и <span>. В спецификации для каждого семантического элемента описана его роль.

👉 @frontendInterview

jаvanoscript для начинающих, 6-е издание

Цветное руководство по jаvanoscript для начинающих позволит в короткое время освоить этот язык программирования и приступить к созданию красивых и функциональных сайтов. Вся информация представлена схематично и снабжена наглядными примерами, а код и другие элементы, необходимые для обучения, читатели могут скачать и использовать совершенно бесплатно.

👉 @frontendInterview

Smart Sum

Ваша задача — написать функцию smartSum, которая возвращает сумму произвольного количества аргументов. Но будьте осторожны, некоторые из ваших аргументов могут быть массивами чисел или вложенными массивами.

Примеры:
smartSum(1,2,3,[4,5],6); // returns 21
smartSum(1,2,[[3,4],5],6); // returns 21

👉 @frontendInterview

Что такое кортеж в 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