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

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

#статья

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

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

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

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

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.

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

#полезно

Управление зависимостями

Согласно опросу «State of JS» 2021 года, управление зависимостями в JavaScript — проблема номер один для разработчиков. На втором месте — архитектура кода. Делимся статьей, где автор рассказывает про управление зависимостями в монорепозитории JS.

#статья

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

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

spread operator

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

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

#операторы

Логические операторы

В данной статье автор подробно рассказывает про логические операторы «НЕ», «ИЛИ», «И» и нулевого слияния. Дополнительно рассматриваются побитовые операторы. Они используются для криптографии.

#статья

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

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

Метод 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() позволяет упростить манипуляции с элементами массива и объекта и повысить читаемость кода.

#методы

Глубокое копирование объектов

Знал ли ты, что теперь в JavaScript есть встроенный способ делать глубокие копии объектов? Для этого существует функция structuredClone, встроенная в среду выполнения JavaScript. Делимся статьей, где автор рассказывает про современный способ глубокого копирования объектов.

#статья

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

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

Деструктуризация в 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

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

#полезно

Web Audio API

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

#статья

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

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

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

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

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."
*/

#полезно

Особенности стрелочных функций

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

#статья

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

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

Нюансы использования push

При решении задач в массиве в JavaScript. Мы можем столкнуться с ошибками в методе push для добавления элемента. Здесь проблема возникает, когда мы создаем/разрабатываем что-то на JavaScript или React.

#статья

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

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

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

#полезно

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

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

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

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

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

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

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

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

#операторы

tracking.js

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

#статья

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

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

Получить n последних элементов массива

Метод массива slice() может принимать отрицательные целые числа, и при наличии он будет принимать значения с конца массива, а не с начала.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

#массивы

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

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

#статья

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

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

Оператор || для задания значений по умолчанию

Одной из малоизвестных, но полезных заметок в JavaScript является то, что можно использовать логический оператор || для задания значений по умолчанию. Если переменная имеет значение null, undefined, false или 0, то можно использовать || для установки значения по умолчанию. Например, вместо записи:

if (x === undefined) {
  x = 'default';
}

можно записать:

x = x || 'default';

Эта конструкция работает так: если значение x равно null, undefined, false или 0, то будет использовано значение 'default'. Если значение x уже установлено и является истинным, то будет использовано это значение. Такой подход позволяет сократить код и упростить его чтение и понимание.

#операторы