Фильтр уникальных значений

Тип Set был введен в ES6, и наряду с оператором «spread» ... мы можем использовать его для создания нового массива с уникальными значениями.

Этот трюк работает для массивов, содержащих примитивные типы: undefined, null, boolean, string и number. (Если бы у вас был массив, содержащий объекты, функции или дополнительные массивы, вам понадобился бы другой подход!)

#массив

CORS

Совместное использование ресурсов различными источниками (CORS) — это механизм безопасности на основе HTTP, который контролируется и применяется клиентом (веб-браузером). Это позволяет службе (API) указывать любой источник, кроме своего собственного, из которого клиент может запрашивать ресурсы. Делимся статьей, где автор знакомит с CORS.

#статья

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

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

Длина кэш-массива в циклах

Когда вы изучаете for для циклов, то следуете стандартной процедуре:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Тем не менее, при таком синтаксисе цикл for повторно проверяет длину массива при каждой итерации.

Иногда это может быть полезно, но в большинстве случаев эффективнее кэшировать длину массива, что потребует одного обращения к нему. Мы можем сделать это путем определения переменной длины, где задать переменную i, например, так:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

В принципе, почти то же самое, что и выше, но при увеличении размера цикла мы получим значительную экономию времени.

#циклы

Геометрия объектной модели документа

Бесконечная прокрутка, анимация элементов при прокрутке или перетаскивание являются интересными интерфейсными решениями, которые существуют уже некоторое время. В данной статье автор анализирует методы и свойства, которые делают эти интерфейсы достижимыми.

#статья

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

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

Оценка короткого замыкания (оценка Маккарти)

Тернарный оператор — быстрый и эффективный способ написать простые (а иногда и не очень простые) conditional statements:

х> 100? «больше 100»: «меньше 100»;
х> 100? (x> 200? «больше 200»: «между 100-200»): «меньше 100»;

Но иногда даже тернарный оператор сложнее, чем требуется. Вместо него мы можем использовать ‘and’ && и ‘or’ || логические операторы для оценки некоторых выражений еще более кратким способом. Его часто называют «коротким замыканием» или «оценкой короткого замыкания».

#полезно

SPA потоки и состояния

SPA (одностраничное приложение) — это реализация веб-приложения. Она загружает только один веб-документ, а затем обновляет содержимое тела этого единственного документа с помощью API-интерфейсов JavaScript, таких как XMLHttpRequest и Fetch. Делимся статьей, где автор рассказывает про SPA потоки и состояния.

#статья

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

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

Преобразование в Boolean

Кроме обычных логических функций true и false, JavaScript также рассматривает все другие значения как truthy или falsy.

Пока не указано иное, все значения в JavaScript — truthy, за исключением 0, "", null, undefined, NaN и, конечно, false. Последние являются falsy.

Мы можем легко переключаться между теми и другими, используя оператор !, который также преобразует тип в логический.

#типы

Замена фона видео

Делимся статьей, где автор рассказывает о 2 инструментах MediaPipe. Selfie Segmentation позволяет выделять людей в кадре. Face Mesh предоставляет сетку лица человека, которая работает в реальном времени даже на мобильных устройствах.

#статья

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

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

Расширения Chrome

Делимся статьей, где автор рассказывает про полезные расширения для Chrome. Есть как и общие расширения для всех, так и более специфические. Например, для определения фреймворка, шрифтов. Также есть список расширений для GitHub.

#статья

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

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

Преобразование в строку

Быстрое преобразование целого числа в строку можно выполнить следующим образом.

#типы

Web Speech API

Web Speech API позволяет использовать голосовые данные в веб-приложениях. Web Speech API состоит из двух частей: SpeechSynthesis (преобразование текста в речь) и SpeechRecognition (асинхронное распознавание речи). Благодаря этой статье ты познакомишься с Web Speech API.

#статья

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

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

Преобразование в целое число

Этот способ может быть использован и для преобразования логического типа данных boolean в обычные числовые значения, как показано ниже:

console.log(+true); // Return: 1
console.log(+false); // Return: 0

#типы

Задачи на Promise

Объект Promise представляет возможное завершение (или сбой) асинхронной операции и ее результирующее значение. В данной статье продемонстрированы основные задачи на Promsie, которые часто спрашивают на собеседованиях. Присутствует код с подробными комментариями.

#статья

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

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

Float в целое число

При необходимости преобразовать float в целое число можно воспользоваться Math.floor(), Math.ceil() или Math.round(). Но есть и более быстрый путь, для этого используем |, то есть оператор OR.

console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23

#полезно

Как работает браузер

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

#статья

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

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

Убираем замыкающие числа

Оператор OR можно использовать для того, чтобы убрать любое количество цифр из числа. Это означает, что нам не нужно преобразовывать типы, как здесь:

let str = "1553";
Number(str.substring(0, str.length - 1));

Вместо этого просто прописываем:

console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1

#полезно

Использование ESLint

ESLint — это инструмент для выявления шаблонов, обнаруженных в коде ECMAScript/JavaScript, и составления отчетов о них. Во многом он похож на JSLint и JSHint. Благодаря этой статье ты узнаешь, как правильно пользоваться ESLint.

#статья

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

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

Автоматическое связывание

Стрелочные обозначения ES6 можно использовать в методах класса, и при этом подразумевается привязка. Благодаря этому можно попрощаться с повторяющимися выражениями, такими как this.myMethod = this.myMethod.bind (this)!

#классы

Шаблоны загрузки данных

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

#статья

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

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

Обрезка массива

Если вам необходимо убрать значения из массива, то есть более быстрые методы, чем splice().

К примеру, если вы знаете размер оригинального массива, то можете переопределить его свойство length следующим образом:

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

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

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Result: [0, 1, 2, 3]

#массивы