Подсчет длины текста

В данной статье автор рассказывает про подсчет длины текста. Ты узнаешь, что такое кодовые точки, графемы, селекторы начертаний. Также рассказано про модификаторы цвета и объединитель нулевой ширины.

#статья

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

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

Переменные let и const

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

let используется для переменных, которые нужно переназначить после создания. Переменные, объявленные с помощью const, невозможно переназначить или изменить.

#переменные

AbortController

Интерфейс AbortController представляет собой объект контроллера, который позволяет прерывать один или несколько веб-запросов по мере необходимости. Связь с запросом DOM осуществляется с помощью объекта AbortSignal. Данная статья знакомит с возможностями AbortController.

#статья

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

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

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

Тип 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)!

#классы