Calculate age in years

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

Примеры:
getAge(new Date('1913/01/01'), new Date('2013/01/01') === 100
getAge(new Date('2008/02/29'), new Date('2032/03/01')) === 24
getAge(new Date('2008/01/01'), new Date('2000/01/01')) === -8

👉 @frontendInterview

Как найти работу за рубежом?

Международные стартапы с русскоговорящими командами – один из эффективных способов получить оффер.

Вакансии именно в таких компаниях собирают ребята в канале Dev & ML Connectable Jobs.
Как результат – уже десятки читателей получили офферы в Neon, InDrive, 1inch, Wheely и в PLATA.

Несколько актуальных вакансий:
– Senior Frontend Engineer в Activeloop (remote)
– Senior Frontend Developer в JetBrains (Германия, Кипр, Армения, Чехия, Сербия)
– Senior Frontend Developer в Playkot (remote или помогают с релокацией в Сербию / на Кипр)
– Frontend Engineer в BostonGene (Ереван, помогают с релокацией)

Подписывайтесь и развивайте карьеру в будущем единороге!💙

​Делегирование событий

Если у вас есть много элементов, события на которых нужно обрабатывать похожим образом, то не стоит присваивать отдельный обработчик каждому.
Вместо этого, назначьте один обработчик общему родителю. Из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.
Эта техника называется делегированием и очень активно применяется в современном JavaScript.

На примере меню
Делегирование событий позволяет удобно организовывать деревья и вложенные меню.

 <ul id="menu">
   <li><a href="/php">PHP</a></li>
   <li><a href="/html">HTML</a></li>
   <li><a href="/javascript">JavaScript</a></li>
   <li><a href="/flash">Flash</a></li>
 </ul>

Клики по пунктам меню будем обрабатывать при помощи JavaScript. Пунктов меню в примере всего несколько, но может быть и много. Конечно, можно назначить каждому пункту свой персональный onclick-обработчик, но что если пунктов 50, 100, или больше? Неужели нужно создавать столько обработчиков? Конечно же, нет!

Применим делегирование: назначим один обработчик для всего меню, а в нём уже разберёмся, где именно был клик и обработаем его:
// 1. вешаем обработчик
document.getElementById('menu').onclick = function(e) {

// 2. получаем event.target
var event = e || window.event;
var target = event.target || event.srcElement;

// 3. проверим, интересует ли нас этот клик?
// если клик был не на ссылке, то нет
if (target.tagName != 'A') return;

// обработать клик по ссылке
var href = target.getAttribute('href');
alert(href); // в данном примере просто выводим
return false;
};

👉 @frontendInterview

👉 @frontendInterview

Как размыть текст?

Для размытия содержимого элемента, включая текст, применяется стилевое свойство filter с функцией blur(). Внутри функции указываем степень размытия (например, 5px) — чем больше значение, тем сильнее будет размытие.
div { filter: blur(5px); }

Ещё один способ размытия текста — это использование свойства text-shadow, добавляющее к тексту тень. В параметрах свойства можно регулировать степень размытия тени (здесь это третий параметр), добиваясь нужного эффекта.
div { text-shadow: 0 0 5px #000; color: transparent; }
Поскольку тень располагается за текстом, сам текст не меняется при наложении тени и сохраняет свою читаемость. Поэтому текст следует спрятать, задав ему прозрачный цвет через значение transparent.

👉 @frontendInterview

Почему умение дебажить один из самых важных навыков для разработчика

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

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

👉 @frontendInterview

А потом он все доделал и закрыл таск, но это уже совсем другая история...

👉 @frontendInterview

toSpliced()

Метод toSpliced() возвращает новый массив, удаляя определённое количество элементов и/или добавляя новые элементы, начиная с указанного индекса в исходном массиве.

Пример
Создадим массив, удаляя из исходного массива 2 элемента, начиная с элемента с индексом 3:
const months = [
'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь'
]
const newMonths = months.toSpliced(3, 2)

console.log(newMonths)
// ['Май', 'Июнь', 'Июль', 'Октябрь']

В отличие от метода splice(), toSpliced() не меняет исходный массив и не возвращает удаляемые элементы:
const numbers = [10, 20, 30, 40]
const newNumbers = numbers.toSpliced(1, 2)
console.log(newNumbers, numbers)
// [10, 40] [10, 20, 30, 40]

// А вот как работает splice()
const deletedNumbers = numbers.splice(1, 2)
console.log(deletedNumbers, numbers)
// [20, 30] [10, 40]

👉 @frontendInterview

Грокаем функциональное программирование

Вам кажется, что функциональное программирование – это нечто сложное, доступное только гуру программирования? Эта книга развенчает миф об элитарности и позволит любому программисту с легкостью разобраться в хитросплетениях кода.

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

👉 @frontendInterview

COFFEE

Вам дана строка, которая может содержать слово coffee. Некоторые буквы слова могут быть заглавными. Сделайте все буквы этого слова заглавными и верните строку.

Пример:
Input: "Coffee! Buy me a COFFEE!"
Output: "COFFEE! Buy me a COFFEE!"

👉 @frontendInterview

​Для чего используется WebSocket? В чем принцип его работы?

Протокол WebSocket («веб-сокет»), описанный в спецификации RFC 6455, обеспечивает возможность обмена данными между браузером и сервером через постоянное соединение. Данные передаются по нему в обоих направлениях в виде «пакетов», без разрыва соединения и дополнительных HTTP-запросов.

Чтобы открыть веб-сокет-соединение, нам нужно создать объект new WebSocket, указав в url-адресе специальный протокол ws:
let socket = new WebSocket("ws://javascript.info");


Как только объект WebSocket создан, мы должны слушать его события. Их всего 4:
- open – соединение установлено,
- message – получены данные,
- error – ошибка,
- close – соединение закрыто.

Вот пример:

  let socket = new WebSocket("wss://javascript.info/article/websocket/demo/hello");
  
  socket.onopen = function(e) {
    alert("[open] Соединение установлено");
    alert("Отправляем данные на сервер");
    socket.send("Меня зовут Джон");
  };
  
  socket.onmessage = function(event) {
    alert(`[message] Данные получены с сервера: ${event.data}`);
  };
  
  socket.onclose = function(event) {
    if (event.wasClean) {
      alert(`[close] Соединение закрыто чисто, код=${event.code} причина=${event.reason}`);
    } else {
      // например, сервер убил процесс или сеть недоступна
      // обычно в этом случае event.code 1006
      alert('[close] Соединение прервано');
    }
  };
  
  socket.onerror = function(error) {
    alert(`[error] ${error.message}`);
  };

Вызов socket.send(body) принимает body в виде строки или любом бинарном формате включая Blob, ArrayBuffer и другие. Дополнительных настроек не требуется, просто отправляем в любом формате. При получении данных, текст всегда поступает в виде строки. А для бинарных данных мы можем выбрать один из двух форматов: Blob или ArrayBuffer.

👉 @frontendInterview

👉 @frontendInterview

Бесплатный практический вебинар: Профессия «Frontend-разработчик».

⏰ Когда: 25 июля в 19:00 по мск.

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

Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?

Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.

🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  Карта компетенций начинающего Frontend-разработчика.

​Как изменить вид маркера списка?

С помощью CSS допускается устанавливать один из трёх типов маркеров: disc (точка), circle (кружок), square (квадратик). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора ul или li

ul {
    list-style-type: square; /* Квадратные маркеры */
}

Использование псевдоэлемента ::before
Выбор и установка собственного символа маркера происходит через псевдоэлемент ::before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому свойству list-style-type, а затем добавить псевдоэлемент ::before к селектору li. Сам вывод символа осуществляется с помощью свойства content, в качестве значения которого и выступает желаемый символ

li {
    list-style-type: none; /* Убираем маркеры у списка */
}
li::before {
    content: "►"; /* Маркер списка */
    padding-right: 0.5em; /* Расстояние от маркера до текста */
}

Использование псевдоэлемента ::marker
Псевдоэлемент ::marker позволяет управлять настройками маркера списка и работает схожим с ::before образом. При этом убирать исходные маркеры, как это делалось в предыдущем примере, необходимости нет.
Для ::marker не работают свойства margin и padding, поэтому для изменения расстояния от маркера до текста свойство padding-left добавляется к селектору li

li {
    padding-left: 0.5em; /* Расстояние от маркера до текста */
}
li::marker {
    content: "►"; /* Маркер списка */
}

👉 @frontendInterview

Где учиться IT: 70% опрошенных проходили онлайн-курсы

Эта статья про самое важное — обучение. Как вообще IT-специалисты относятся к онлайн-образованию и в чем разница с полноценным обучением в университете. Авторы статьи провели опрос. Ожидания от ответов были разные, но вот, что они выяснили:

- 70% опрошенных IT-специалистов, которые сейчас работают, проходили онлайн-курсы — кто-то из них получал полноценную профессию, а кто-то прокачивал навыки;
- половина из них относятся к такому формату обучения положительно.

В статье разбираемся, какие школы чаще всего выбирали опрошенные специалисты и как выбрать по-настоящему качественный курс.

👉 @frontendInterview