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

⚡️Век живи, век учись — пора и Angular открыть!

⏰Приглашаем сегодня, 3 ноября в 20:00, на открытый урок: "Разработка приложений на Angular. Основные преимущества и возможности"

Angular - это мощный фреймворк от Google, который используется для создания мобильных приложений.

📌За 1,5 часа на занятии с опытным экспертом мы:
- Познакомимся с Angular CLI, two-way data binding, templates, routing, services;
- Как экономить время на разработке c этими технологиями;
- Получим расширяемый, легко поддерживаемый и структурированный код.

👨‍🎓Кто вещает?
Виктор Березин, Frontend Architect / Senior Full Stack Developer и преподаватель курса “Angular Developer” в OTUS.

🔴 Чтобы записаться на вебинар, пройдите вступительный тест: https://otus.pw/nsmr/

Это занятие является частью онлайн-курса «Angular Developer» от OTUS.

👉 @frontendInterview

👉 @frontendInterview