Генератор коротких CSS классов и id

Делимся статьей, где автор демонстрирует генерацию коротких css классов и id элементов в html верстке. Приведен алгоритм и требования к генератору, также присутствует ссылка на npm пакет.

Читать

#статья | JavaScript_Teacher

Что такое функция обратного вызова (Callback Function)?

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

const btnAdd = document.getElementById('btnAdd')

btnAdd.addEventListener('click', function clickCallback(e)){
    // делаем нечто полезное
}

В примере мы ждем события «клик» на элементе с идентификатором «btnAdd». По клику вызывается функция clickCallback. Функция обратного вызова добавляет некоторый функционал данным или событию. Методам reduce, filter и map в качестве второго аргумента передается функция обратного вызова. Хорошей аналогией callback является следующая ситуация: Вы звоните кому-то, он не отвечает, Вы оставляете ему сообщение и ждете, когда он перезвонит. Звонок или сообщение — это событие или данные, а callback — это ожидание (предвосхищение) встречного звонка.

#собеседование | JavaScript_Teacher

#test | JavaScript_Teacher

Создание понга

Делимся статьей, где автор рассказывает про создание понга с помощью JavaScript. Продемонстрирована игровая логика, создание примитивов на 2D-канвасе. Присутствует ссылка на код в GitHub и видео-гайд.

Читать

#статья | JavaScript_Teacher

Что такое промисы (Promises)?

Промисы — это один из приемов работы с асинхронным кодом в JS. Они возвращают результат асинхронной операции. Промисы были придуманы для решения проблемы так называемого «ада функций обратного вызова».

У промиса есть четыре состояния:

• Ожидание — начальное состояние промиса. Результата промиса неизвестен, поскольку операция не завершена.
• Выполнено — асинхронная операция выполнена, имеется результат.
• Отклонено — асинхронная операция не выполнена, имеется причина.
• Завершено — выполнено или отклонено.

В качестве параметров конструктор промиса принимает resolve и reject. В resolve записывается результат выполнения операции, в reject — причина невыполнения операции. Результат может быть обработан в методе .then, ошибка — в методе .catch. Метод .then также возвращает промис, поэтому мы можем использовать цепочку, состоящую из нескольких .then.

Подробнее о промисах можно почитать здесь и здесь.

#собеседование | JavaScript_Teacher

#test | JavaScript_Teacher

Управление страницей с помощью жестов

Делимся статьей, где автор демонстрирует управление страницей с помощью жестов. Для обнаружения и отслеживания руки и жестов используется MediaPipe. Для работы с зависимостями — Yarn.

Читать

#статья | JavaScript_Teacher

Что такое async/await?

Async/await — относительно новый способ написания асинхронного (неблокирующего) кода в JS. Им оборачивают промис. Он делает код более читаемым и чистым, чем промисы и функции обратного вызова. Однако для использования async/await необходимо хорошо знать промисы.

Запомните: использование ключевого слова «async» перед функцией заставляет ее возвращать промис:

const giveMeOne = async () = 1

giveMeOne()
.then((num) => {
    console.log(num) // 1
})

Ключевое слово «await» можно использовать только внутри асинхронной функции. Использование «await» внутри другой функции приведет к ошибке. Await ожидает завершения выражения справа, чтобы вернуть его значение перед выполнением следующей строчки кода.

#собеседование | JavaScript_Teacher

#test | JavaScript_Teacher

Heap out of memory

Распространенной проблемой при работе с Node.js является ошибка «heap out of memory». Эта ошибка обычно возникает, когда памяти по умолчанию, выделенной твоей системой для Node.js, недостаточно для запуска большого проекта. В данной статье автор демонстрирует, как можно решить эту проблему.

Читать

#статья | JavaScript_Teacher

Что такое параметры по умолчанию (Default Parameters)?

Это относительно новый способ определения значений переменных по умолчанию.

function add(a = 0, b = 0){
return a + b
}
// если мы не присвоим переменным "a" и "b" какие-нибудь значения, они будут равняться 0
add(1) // 1

Мы даже можем использовать по умолчанию параметры, объявленные в том же месте:

function doSomethingWithValue(value = 'Hello World', callback = () => { console.log(value) }){
callback()
}
doSomethingWithValue() // Hello World

#собеседование | JavaScript_Teacher

#test | JavaScript_Teacher

WebHID/WebNFC/WebUSB

Данная статья знакомит с тремя API для работы с аппаратным обеспечением. Благодаря этим API ты сможешь взаимодействовать с HID (Human Interface Device), NFC (Near Field Communication) и USB (Universal Serial Bus).

Читать

#статья | JavaScript_Teacher

Что такое объектная обертка (Wrapper Objects)?

Примитивы строка, число и boolean имеют свойства и методы, несмотря на то, что они не являются объектами:

let name = 'marko'

console.log(typeof name) // string
console.log(name.toUpperCase()) // MARKO

Name — это строка (примитивный тип), у которого нет свойств и методов, но когда мы вызываем метод toUpperCase(), это приводит не к ошибке, а к «MARKO».

Причина такого поведения заключается в том, что name временно преобразуется в объект. У каждого примитива, кроме null и undefined, есть объект-обертка. Такими объектами являются String, Number, Boolean, Symbol и BigInt. В нашем случае код принимает следующий вид:

console.log(new String(name).toUpperCase()) // MARKO

Временный объект отбрасывается по завершении работы со свойством или методом.

#собеседование | JavaScript_Teacher

#test | JavaScript_Teacher