Web Audio API

Web Audio API предоставляет мощную и универсальную систему управления звуком. Она позволяет выбирать источники звука, добавлять эффекты к звуку, создавать визуализацию звука, применять пространственные эффекты (например, панорамирование) и многое другое. В данной статье рассказано, как был создан музыкальный инструмент с помощью API.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Стрелочные функции

Одна из полезных фишек JavaScript - это использование стрелочных функций (arrow functions). Они позволяют создавать функции более компактным и читаемым способом, чем традиционные функции.

Вот пример обычной функции:

function multiply(a, b) {
  return a * b;
}

И вот пример той же функции, записанной как стрелочная функция:

const multiply = (a, b) => a * b;

Кроме того, стрелочные функции автоматически привязывают this к текущему контексту, что упрощает работу с объектами и избавляет от необходимости использовать bind, call или apply.

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

#полезно

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

В данной статьей автор демонстрирует создание пианино с помощью JavaScript. Обрати внимание, проект лучше всего работает в Chrome и других браузерах с тем же движком. Могут быть проблемы при работе с Safari.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Метод Array.prototype.includes()

Он позволяет проверить, содержится ли элемент в массиве, возвращая true или false.

Например, можно использовать его для проверки наличия определенного значения в массиве перед выполнением определенных действий. Этот метод был введен в стандарт ECMAScript 2016 и доступен во всех современных браузерах. Не забудьте попробовать его в своих проектах!

Метод includes() также поддерживает поиск по индексу, указанному вторым аргументом.

#методы

Работа с медиа

Делимся статьей, где представлены основные интерфейсы и методы по работе с медиа. Ты узнаешь, как захватить поток с устройства/экрана пользователя; научишься преобразовывать текст в речь и обратно; сможешь получить список медиаустройств пользователя и многое другое.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Деструктуризация

Она позволяет извлекать данные из массивов и объектов более простым и удобным способом.

const user = { name: 'John', age: 30 };
const { name, age } = user;

В этом примере мы используем деструктуризацию, чтобы извлечь значения name и age из объекта user и сохранить их в переменных с теми же именами.

Деструктуризация - это полезная фича в JavaScript, которая делает работу с объектами и массивами более удобной.

#массивы

Селфи в браузере

В данной статье автор рассказывает, как сделать селфи в браузере. Для захвата изображения используется MediaStream Image Capture. Для захвата потока - Media Capture and Streams. File API используется для работы с файлами.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Стрелочные функции

Одной из интересных фишек JavaScript является использование стрелочных функций (arrow functions), которые позволяют определять функции более кратко и лаконично.

Вместо обычного синтаксиса:

function multiply(a, b) {
  return a * b;
}

можно использовать следующий синтаксис с использованием стрелочной функции:

const multiply = (a, b) => a * b;

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

Стрелочные функции также удобны для использования в качестве коллбеков в функциях высшего порядка, таких как методы массивов map, filter и reduce.

Несмотря на все преимущества, не следует злоупотреблять использованием стрелочных функций, так как в некоторых случаях обычный синтаксис более подходящий.

#полезно

tracking.js

Библиотека tracking.js привносит в среду браузера различные алгоритмы и методы компьютерного зрения. Используя современные спецификации HTML5, библиотека предоставляет возможность отслеживать цвета в реальном времени, распознавать лица и многое другое. Делимся статьей, где автор демонстрирует использование tracking.js.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

spread operator

Он позволяет легко и быстро объединять и расширять массивы, объекты и другие коллекции данных.

Оператор расширения также позволяет передавать неопределенное количество аргументов в функцию и извлекать свойства из объектов. Использование оператора расширения может существенно упростить и ускорить написание кода в JavaScript.

#операторы

Apache Cordova

Apache Cordova — это среда разработки мобильных приложений с открытым исходным кодом. Она позволяет использовать стандартные веб-технологии — HTML5, CSS3 и JavaScript для кроссплатформенной разработки. Делимся статьей, где автор демонстрирует создание мобильного приложения для Android с помощью Apache Cordova.

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Метод map() для работы с массивами

Метод map() позволяет применить функцию к каждому элементу массива и вернуть новый массив на основе результатов этой функции.

Например, чтобы создать новый массив, в котором каждый элемент увеличен на 1, можно использовать следующий код:

const arr = [1, 2, 3];
const newArr = arr.map((item) => item + 1);
console.log(newArr); // [2, 3, 4]

Также метод map() позволяет применить функцию к каждому элементу объекта и вернуть новый объект на основе результатов этой функции.

Например, чтобы создать новый объект, в котором каждое свойство увеличено на 1, можно использовать следующий код:

const obj = {a: 1, b: 2, c: 3};
const newObj = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => [key, value + 1])
);
console.log(newObj); // {a: 2, b: 3, c: 4}

Использование метода map() позволяет упростить манипуляции с элементами массива и объекта и повысить читаемость кода.

#методы

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

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Деструктуризация в JavaScript

Деструктуризация позволяет извлекать значения из объектов и массивов и присваивать их переменным.

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

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

Аналогично, чтобы извлечь значения из объекта, можно использовать следующий код:

const obj = {a: 1, b: 2, c: 3};
const {a, b, c} = obj;
console.log(a, b, c); // 1 2 3

Деструктуризация также позволяет извлекать значения из вложенных объектов и массивов:

const obj = {a: 1, b: {c: 2, d: 3}};
const {a, b: {c, d}} = obj;
console.log(a, c, d); // 1 2 3

const arr = [[1, 2], [3, 4]];
const [[a, b], [c, d]] = arr;
console.log(a, b, c, d); // 1 2 3 4

Использование деструктуризации упрощает доступ к значениям объектов и массивов и повышает читаемость кода.

#полезно

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

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Шаблонные строки - это специальный вид строковых литералов, который позволяет вставлять значения переменных и выражений внутрь строки.

Например, чтобы создать строку, содержащую значения переменных, можно использовать обычные строки и конкатенацию:

const name = 'Alice';
const age = 25;
const message = 'My name is ' + name + ' and I am ' + age + ' years old.';
console.log(message); // "My name is Alice and I am 25 years old."

С помощью шаблонных строк этот код можно записать короче и более читаемо:

const name = 'Alice';
const age = 25;
const message = My name is ${name} and I am ${age} years old.;
console.log(message); // "My name is Alice and I am 25 years old."

Шаблонные строки также позволяют использовать многострочный формат и вставлять выражения:

const message = My name is ${name} and I am ${age} years old. The square of my age is ${age * age}.;
console.log(message);
/*
"My name is Alice and I am 25 years old.
The square of my age is 625."
*/

#полезно

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

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Вот еще одна полезная заметка: в JavaScript есть два различных оператора сравнения: "==" и "===".

Оператор "==" сравнивает значения двух операндов и приводит их к одному типу данных, если они имеют разный тип. Например:

console.log(5 == "5"); // true

Значения сравниваются после приведения типов, поэтому "5" (строка) преобразуется в 5 (число).

Оператор "===" также сравнивает значения двух операндов, но не выполняет приведение типов. То есть, если операнды имеют разный тип, они будут считаться не равными. Например:

console.log(5 === "5"); // false

Значения не сравниваются после приведения типов, поэтому "5" (строка) и 5 (число) будут считаться разными значениями.

В целом, рекомендуется использовать оператор "===" вместо "==" в большинстве случаев, чтобы избежать неожиданных результатов при сравнении значений разных типов данных.

#операторы

Heap out of memory

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

#статья

❤️ Прожимай реакции, если нравится такой формат

👉 Читать статью

Промисы - это объекты, которые представляют собой асинхронную операцию, и имеют три состояния: ожидание (pending), выполнено (fulfilled) и отклонено (rejected). Промисы позволяют работать с асинхронными операциями более удобно, чем с колбэками, так как позволяют обрабатывать результаты асинхронной операции через методы then() и catch().

#полезно