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

(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%) на новые и действующие серверы! 

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

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

legend

Добавляет заголовок в <fieldset>, который по умолчанию оформляется браузером как текст, органично вписанный в рамку.

 <fieldset>
   <legend>Заголовок для группы контролов</legend>
   …
 </fieldset>

<legend> позволяет описать содержимое <fieldset>, но семантически он не является «представителем» h1-h6-заголовков, хотя выполняет схожую функцию. Он не задаёт иерархию, а лишь характеризует контент внутри «своей» группы — как <label> для соответствующего контрола.

👉 @frontendInterview

Дебаггинг

👉 @frontendInterview

👉 @frontendInterview

JavaScript. Как писать программы

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

👉 @frontendInterview

(Don't) Make Me Repeat Myself

Создайте свою функцию repeat, которая будет применяться к строке и повторять эту строку указанное количество раз.

Примеры:
'a'.repeat(3) === 'aaa'
'around the world '.repeat(2) === 'around the world around the world'

👉 @frontendInterview

box-shadow

Свойство, бросающее тень на ваши блоки 👤
Создано, чтобы имитировать объекты реального мира и создавать иллюзию объёма для плоских элементов интерфейса.

Пример
Частая ситуация — выделить кнопку, задав ей тень, что визуально сделает её объёмной.
<button class="button">Купить немедленно!</button>
Помимо основных оформительских стилей задаём нашей кнопке тень:
.button {
box-shadow: -15px 15px 0 0 #ED6742;
}

👉 @frontendInterview