JavaScript для профессиональных веб-разработчиков.

Самое полное руководство по современному JavaScript
Как максимально прокачать свои навыки и стать топовым JS-программистом? Четвертое издание «JavaScript для профессиональных веб-разработчиков» идеально подойдет тем, кто уже имеет базовые знания и опыт разработки на JavaScript. Автор сразу переходит к техническим деталям, которые сделают ваш код чистым и переведут вас с уровня рядового кодера на высоту продвинутого разработчика.

👉 @frontendInterview

Fibonacci Generator

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

Пример:
var fib = genfib();
fib(); // -> returns 0
fib(); // -> returns 1
fib(); // -> returns 1
fib(); // -> returns 2

👉 @frontendInterview

content

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

Пример
a::after {
content: "👉";
margin-right: 5px;
}

Изображение в качестве содержимого. Может применяться к любому элементу.
div {
content: url("http://www.example.com/test.png");
}

Все значения ниже могут применяться ТОЛЬКО к псевдоэлементам ::before и ::after.

👉 @frontendInterview

HTML тег data

Элемент <data> позволяет хранить в своём содержимом данные в формате, понятном человеку, а в атрибуте value — в формате, понятном машинам.

Так можно передать числовое значение для текста:
Жили у бабуси <data value="2">два</data> весёлых гуся.

Ещё один пример: вы разрабатываете интернет-магазин, который занимается продажей компьютеров. У вас есть множество типов, моделей и конфигураций — и у каждого есть свой ID, который используется в базе данных. Эти ID мало что скажут пользователям, поэтому лучше выводить названия компьютеров в формате, который они могут понять. Но тут же в атрибуте value тега <data> можно хранить ID, который используется для удобного доступа к нужной модели:

<ul>
<li>
<data value="2020138256">
MacBook Pro 13 M1 8 Gb 256 Gb mid. 2020
</data>
</li>
<li>
<data value="2020138512">
MacBook Pro 13 M1 8 Gb 512 Gb mid. 2020
</data>
</li>
</ul>

👉 @frontendInterview

Спред-синтаксис ...

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

Спред применятся и для объектов, чтобы копировать пары ключ-значение из одного объекта в другой.

Пример:
При вызове функции использовать значения из массива как аргументы:
function multiplyThreeNumbers(a, b, c) {
return a * b * c
}
const nums = [1, 2, 3]
console.log(multiplyThreeNumbers(...nums))
// 6

В массиве скопировать элементы из другого массива в новый:
const donor = ['это', 'старые', 'значения']
const newArray = [...donor, 1, true, 'мама']
console.log(newArray)
// ['это', 'старые', 'значения', 1, true, 'мама']

У объекта скопировать свойства из другого объекта в новый:
const persona = { name: 'Иван', lastName: 'Объектов'}
const userData = { ...persona, username: 'killer3000' }
console.log(userData)
// {
// name: "Иван",
// lastName: "Объектов",
// username: "killer3000"
// }

👉 @frontendInterview

Совершенный софт

Совершенный софт – это проверенный, структурированный и высокотехнологичный подход к разработке ПО. Множество компаний уже используют идеи Лёве в сотнях систем, но раньше эти мысли нигде не публиковались.

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

👉 @frontendInterview

True Min

  function min(a, b){
    return (a<b)?a:b;
  }

Доработайте функцию так, чтобы она корректно обрабатывала нечисловые значения.

Примеры:

 min(1, -2.5) === -2.5
 // 'Return the minimum of the two arguments'

 isNaN(min(1.5, NaN))
 //'Any NaN value should return NaN'

 isNaN(min(1.5, undefined))
 //'Any undefined value should return NaN'

 min(-Infinity, Infinity) === -Infinity
 //'Infinity should be handled like normal numbers'

 min(null, 2.5) === 0
 //'treat null as if it were 0'

👉 @frontendInterview

Объект события Event

Объект Event описывает событие, произошедшее на странице. Одной из причин возникновения событий являются действия пользователя, такие как клики мышкой MouseEvent или ввод с клавиатуры KeyboardEvent. Существует множество различных событий, которые будут иметь разный набор информации о них.

Пример
Самый простой и широко распространённый способ использования событий — это отслеживание срабатывания кликов по каким-либо элементам на странице.

При подписке на событие мы передаём обработчик, который будет вызван при каждом срабатывании события в браузере. В случае, когда происходит событие типа click, обработчик будет вызван с событием MouseEvent:
element.addEventListener('click', function (event) {})

👉 @frontendInterview

👉 @frontendInterview

cursor

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

Пример
Пусть будет обычный блок статьи:
<article>
<h2>Какая-то статья</h2>
<p>
Многие кометы имеют два хвоста.
</p>
</article>

Пусть при наведении курсора на блок статьи показывается смайлик с котиком:
article {
cursor: url(cat.png) 2 2, default;
}

👉 @frontendInterview

👉 @frontendInterview

Любите находить решение сложных задач? У хостера FirstVDS для вас классная новость! Каждую Пятницу 13 они запускают масштабную акцию с крутыми интерактивами, чтобы вы могли «поразмять мозги».

В этот раз FirstVDS подготовили игру «Побег из лагеря Crystal Lake». Проверим, сможете ли вы выбраться из лагеря целым и невредимым, спасти друзей, найти ценные ресурсы, и разобраться с Jason’ом.

На кону — и сертификаты на пополнение баланса 500 р, и скидки (аж до 35%) на новые и действующие серверы! 

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

Желаем удачи!