Core Web Vitals

Core Web Vitals — это три показателя, которые оценивают опыт пользователя при загрузке веб-страницы. Эти метрики оценивают, насколько быстро загружается содержимое страницы, как быстро браузер, загружающий веб-страницу, может реагировать на ввод пользователя и насколько нестабильно содержимое загружается в браузере. Данная статья поможет разобраться с Core Web. Vitals.

#статья

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

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

О производительности JavaScript

Бенчмарки — это что-то вроде минного поля. Каждый бенчмарк имеет свои недостатки и погрешности, и помимо пиковой производительности существует целый ряд других факторов, которые необходимо оценивать при выборе платформы или фреймворка для создания веб-сервисов. В данной статье автор демонстрирует производительность фреймворка just-js.

#статья

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

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

Преобразовать любое значение в Boolean

Это будет особенно полезно, если вы не хотите послать в бэкенд значение null или undefined.

let number1;
console.log(!!number1); // false
const number2 = 10;
console.log(!!number2); // true
const name1 = 'Tim';
console.log(!!name1); // true
const name2 = '';
console.log(!!name2); // false
const nullValue = null;
console.log(!!nullValue); // false

#полезно

Шифр Вернама

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

#статья

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

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

Алгоритмы поиска

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

#статья

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

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

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

const name = "Mike johnson";
console.log(name.split("")); // ["M", "i", "k", "e", " ", "j", "o", "h", "n", "s", "o", "n"]
const chars = "a,b,c,d,e,f";
console.log(chars.split(",")); // ["a", "b", "c", "d", "e", "f"]

#строки #массивы

Способы применения reduce

Метод reduce() выполняет функцию редуктора для каждого элемента массива и возвращает одно выходное значение. Редьюсер проходит по массиву поэлементно. На каждом шаге добавляет текущее значение массива к результату предыдущего шага. Этот результат является текущей суммой всех предыдущих шагов. Делается это до тех пор, пока не останется элементов для добавления. Делимся статьей, где автор демонстрирует различные применения reduce.

#статья

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

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

Основные приемы работы с Canvas

Делимся статьей, где автор демонстрирует основные приемы работы с Canvas. Ты узнаешь, как рисовать различные фигуры. Также сможешь реализовать алгоритм fibonacci flower, также известный как golden ratio или phyllotaxis.

#статья

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

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

Проверить вхождение определённого значения в массив

const numbers = [1, 2 ,3, 10, 50];
// old way
console.log(numbers.indexOf(3) > -1); // true, т.к. проверяется, есть ли в массиве 3
// new way
console.log(numbers.includes(3)); // true

Метод includes также полезен, если требуется сравнить несколько значений сразу.

#методы

Двоичное дерево

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

#статья

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

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

Использование оператора опциональной последовательности (optional chaining operator)

Раньше, чтобы получить доступ ко вложенному свойству, нужно было проверять, существует ли каждое из свойств. Прямое обращение к user.location.street.name могло выбросить исключение, что мы пытаемся обратиться к name через несуществующие ссылки к методам location или street.

Но теперь, в версии ES11, код после оператора опциональной последовательности выполнится, только если обращение по предыдущей ссылке не привело к undefined или null.

Так что использование этого оператора сократит ваш код и сделает его более понятным.

#операторы

Забудьте о конкатенации, используйте шаблонные строки (литералы)

Конкатенация строк с помощью оператора "+" – это старая школа. Более того, конкатенация строк с участием большого количества переменных (или выражений) повышает риск возникновения путаницы и ошибок.

Шаблонные строки (или литералы) позволяют встраивать выражения прямо в текст. Они обладают уникальным синтаксисом, при котором строка заключается в обратные кавычки (``). Шаблонная строка может содержать места для подстановки динамических значений. Такие места отмечаются знаком доллара и фигурными скобками. Например, ${выражение}.

#полезно

Как в Google Chrome измерить использование памяти веб-страницей

Благодаря этой статье ты узнаешь, как измерять утечки памяти страницы Google Chrome помощью performance.measureMemory. API performance.measureUserAgentSpecificMemory() позволяет разработчикам измерять использование памяти веб-страницами.

#статья

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

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

Значение как число

Вы когда-нибудь обращали внимание, что "event.target.value" всегда возвращает строковое значение, даже если для поля ввода "input" задан тип "number"?

Чтобы сразу получать числовое значение, используйте "event.target.valueAsNumber".

#полезно

Полезные плагины и библиотеки

Делимся статьей, где автор рассказывает про полезные плагины и библиотеки для JavaScript. Всего их 25. Они помогут тебе при работе с анимацией, видео, диаграммами и прочим.

#статья

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

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

flat

Это метод, который создает новый массив со всеми элементами вложенного массива, рекурсивно объединенными с вышестоящим массивом до заданной глубины.

const array = [1, 2, [3, 4]];
array.flat(); // [1, 2, 3, 4];

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

const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]];
crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8];

Чем глубже вы погружаетесь в массив, тем больше вычислительного времени потребуется для его выравнивания. Обратите внимание, что IE и Edge не поддерживают эту функцию.

#методы