Что такое псевдоклассы в CSS?

Они определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа.
Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к селектору.

Синтаксис выглядит следующим образом:
селектор:псевдокласс { }
Пробела между селектором и псевдоклассом нет, чтобы показать, что они связаны друг с другом.

Несколько псевдоклассов:
:hover - применяет стили, когда на целевой элемент наводится указатель мыши.

:visited - нацеливается на ссылки, которые уже были посещены.

:focus - данный псевдокласс срабатывает, когда элемент HTML получает фокус. Это особенно полезно для полей форм.

:first-child и :last-child - связаны с иерархией в HTML. Они нацеливаются на элементы HTML в зависимости от порядка, в котором они появляются в коде.

:nth-child - является глобальной версией :first-child и :last-child. С помощью :nth-child вы можете вычислить конкретный дочерний целевой элемент.

Laws of UX: Using Psychology to Design Better Products & Services

Это практическое руководство объясняет, как вы можете применять ключевые принципы психологии для создания продуктов, которые являются более интуитивными и ориентированными на человека. Автор Джон Яблонски разбирает дизайн приложений, чтобы привести наглядные примеры того, как дизайнеры UX могут создавать дизайн, адаптирующийся к тому, как пользователи воспринимают и обрабатывают цифровые интерфейсы.

👉 @frontendInterview

Lazy Repeater

Создайте функцию makeLooper(). В эту функцию передайте строку. Вызов этой функции вернет другую функцию, каждый вызов которой должен возвращать символы переданной строки по очереди.

Пример:
var abc = makeLooper('abc');
abc(); // should return 'a' on this first call
abc(); // should return 'b' on this second call
abc(); // should return 'c' on this third call
abc(); // should return 'a' again on this fourth call

👉 @frontendInterview

Array.from()

Функция Array.from() создаёт новый массив на основе переданного объекта. Объект должен быть либо массивоподобным (как строка или объект arguments), либо итерируемым (как Set или Map).

Функция Array.from() принимает три аргумента, последние два из которых не обязательны:
- Объект, на основе которого создаётся массив.
- Функция преобразования элемента перед его добавлением в массив. Работает как метод .map().
- Значение, которое будет использоваться как this в функции из второго параметра.
Возвращает новый массив, составленный из элементов переданного объекта.

Пример
const arr = Array.from('фронт')

console.log(arr)
// ['ф', 'р', 'о', 'н', 'т']

👉 @frontendInterview

👉 @frontendInterview

Что такое композиция в JavaScript?

Композиция - это сердце и душа функционального программирования. Например, у нас есть функция a, которая принимает x и возвращает х + 2. Также есть функция b, которая также принимает x и возвращает х 3:

 const a = x => x + 2;
 const b = x => x * 3;

Композиция - это акт объединения этих функций, в следствии которого выходные данные одной функции становятся входными данными следующей. Мы можем увидеть это, вложив их вместе. Начнем с нашей функции a, вложим в неё нашу функцию b и передадим ей значение (аргумент) 5. В консоли мы увидим 17, что имеет смысл, так как 5 * 3 = 15, а 15 - входное значение для функции a, 15 + 2 = 17.

console.log(a(b(5))); // 17

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Что такое SSL-сертификат?

SSL-сертификат необходим для защиты данных пользователя. Если в адресной строке браузера отображается замочек рядом с адресом сайта, значит всё в порядке, и данные пользователя передаются на сервер в зашифрованном виде.

SSL-сертификат — это набор информации в бумажном или электронном виде, состоящий из:

- Открытого криптографического ключа.
- Информации о владельце ключа.
- Области применения ключа.
- Подписи специальной организации или человека, которые могут подтвердить принадлежность ключа его владельцу.

SSL-сертификат — это открытый ключ, способ применения которого имеет юридическую силу и право владения которым подтверждается авторизованным провайдером. Применяются сертификаты в рамках протокола SSL на этапе формирования сеанса передачи данных.

👉 @frontendInterview

Структуры данных и алгоритмы. Классическое издание

В этой книге описаны структуры данных и алгоритмы, которые являются фундаментом современного компьютерного программирования. Основу данной книги составляют первые шесть глав нашей ранее изданной книги The Design and Analysis of Computer Algorithms. Мы расширили ее содержание, включив материал по алгоритмам внешнего хранения и управлению памятью.

👉 @frontendInterview

Check same case

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

Примеры:
'a' and 'g' returns 1
'A' and 'C' returns 1
'b' and 'G' returns 0
'B' and 'g' returns 0
'0' and '?' returns -1

👉 @frontendInterview

Псевдоклассы группы type

Псевдоклассы -of-type позволяют выбирать из группы элементы одного уровня вложенности на основании их порядка:

:first-of-type — первый;
:nth-of-type(n-число) — каждый n-й элемент;
:last-of-type — последний;
:nth-last-of-type(n-число) — каждый n-й элемент с отсчётом «с конца».

Допустим, мы имеем такую HTML-разметку:
<ol class="list">
<li>Default означает «по умолчанию», цвет этого пункта без изменений.</li>
<li class="list__item">Амбары красят в красный цвет, потому что красная краска...</li>
<li>Говорят, в СССР красили подъезды в зелёный цвет, потому что осталось...</li>
<li class="list__item">В Катаре красят асфальт в синий цвет, чтобы он не перегревался.</li>
</ol>

И, допустим, нам нужно задать цвет текста каждого из пунктов, основываясь на их порядке.

Этот пункт не имеет класса, всё, что мы о нём знаем — что он третий <li> по порядку:
li:nth-of-type(3) {
color: #49A16C;
}

👉 @frontendInterview

​text-rendering

Свойство text-rendering позволяет указывать браузеру, какие оптимизации нужно производить с текстом во время рендера.
Когда браузер «рассчитал» внешний вид символа, он должен корректно отрисовать символ в пиксельной сетке экрана монитора. Процесс заполнения пикселей после расчётов для видимой отрисовки чего угодно называется рендеринг.

Рендеринг текста — это процесс отрисовки символов шрифта в пиксельной сетке. При этом для обеспечения более естественного вида текста браузер может выполнять дополнительные вычисления и модификации символов: изменять кернинг (межсимвольное расстояние), объединять пары и даже тройки символов в лигатуры.

Ключевые слова:
auto
Значение по умолчанию. Браузер пытается самостоятельно угадать, в какой момент отрисовки важна скорость вывода символов, в какой — читаемость, а в какой — геометрическая точность.

optimizeSpeed
При отрисовке текста браузер будет ставить в приоритет именно скорость отрисовки, поэтому лигатуры и кернинг будут отключены.

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

geometricPrecision
Основной приоритет при рендеринге текста — геометрическая точность. В некоторых шрифтах кернинг изменяется не пропорционально изменению размера шрифта. Это может приводить к не самому лучшему внешнему виду текста.

👉 @frontendInterview