Core Web Vitals

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

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

#статьи

165+ терминов JavaScript, которые вам нужно знать

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

https://shly.link/DEWnm

Optional chaining

Опциональная цепочка ?. — это безопасный способ доступа к свойствам вложенных объектов, даже если промежуточное свойство не существует. Оценка останавливается, если значение до ?. является неопределенным или нулевым и возвращает неопределенное значение. Данное видео поможет разобраться с optional chaining.

👀Смотреть видео

#видео

Promise.catch

Метод catch() возвращает промис и работает только с отклоненными случаями. Данный метод используется для обработки ошибок в составе промисов. Поскольку он возвращает промис, его можно связать так же, как родственный метод then().

#практика

​🖥 InterviewBit

Сайт позволяет подготовиться к собеседованию в лучшие IT-компании Кремниевой долины, такие как Google, Facebook и Amazon. На нем вы можете практиковаться в решении задач с собеседований в этих компаниях, получать помощь от менторов, а также получать рекомендации от сотрудников этих компаний.

#сайты #совет| Всë об IT!

performance.measureMemory

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

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

#статьи

Temporal Dead Zone

Временная мертвая зона — это период времени, в течение которого объявления let и const недоступны. Временная мертвая зона начинается, когда выполнение кода входит в блок, содержащий объявление let или const. Она продолжается до тех пор, пока объявление не будет выполнено. Данное видео поможет разобраться с этим явлением.

👀Смотреть видео

#видео

Алгоритмы и структуры данных

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

https://bookflow.ru/algoritmy-i-struktury-dannyh/

@itmozg

https://medium.com/devschacht/https-medium-com-kasimoka-joseph-zimmerman-drag-drop-file-uploader-vanilla-js-de850d74aa2f

https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/

Две статьи по созданию компонента для выбора файла с drag and drop

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

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

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

#статьи

​​28 расширений VS Code для разработки документации

Плагины VS Code, без которых техническим писателям и разработчикам документации жить можно, но сложно. В подборке — линтеры, форматирование, работа с git, проектирование API, подготовка схем и милота для удобной разработки.

Читать...

#longread

Разделяй и не страдай: что выбрать для микрофронтенда?

Сравнение разных способов организации микрофронтендов + рекомендации по выбору подхода.

Читать

TypeScript: паттерны проектирования. Часть 1

Паттерны (или шаблоны) проектирования (design patterns) описывают типичные способы решения часто встречающихся проблем при проектировании программ.

https://habr.com/ru/company/timeweb/blog/699408/

#js #ru

Каррирование

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

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

#статьи

Второй аргумент JSON.stringify - это replacer. Заменитель может быть либо функцией, либо массивом, и позволяет вам контролировать, что и как должны быть преобразованы в значения.

Если заменитель является массивом, только свойства, имена которых включены в массив, будут добавлены в строку JSON. В этом случае включаются только свойства с именами "level" и "health", "username" исключается. data теперь равен "{"level":19, "health":90}".

Если заменитель является function, эта функция вызывается для каждого свойства объекта, который вы преобразуете. Значение, возвращаемое из этой функции, будет значением свойства при добавлении в строку JSON. Если значение равно undefined, это свойство исключается из строки JSON.

javascript-algorithms ⭐️ 160k

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

https://github.com/trekhleb/javascript-algorithms

Array.reduceRight

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

#практика

​​Еще одна новая фича JS - structuredClone

Приветствую товарищи фронты! Сегодня в статейке на хабре вычитал что JS наконец таки научился делать глубокое клонирование объектов. Способы были и раньше конечно но специального метода для этого не было.

Это пример:

const calendarEvent = {
title: "Builder.io Conf",
date: new Date(123),
attendees: ["Steve"]
}

const copied = structuredClone(calendarEvent)

Пишут что он умеет:

👉 Клонировать бесконечно вложенные объекты и массивы.
👉 Клонировать циклические ссылки.
👉 Клонировать широкий спектр типов JavaScript, таких как: Date, Set, Map, Error, RegExp, ArrayBuffer, Blob, File, ImageData и многие другие.
👉 Передавать любые передаваемые объекты.

На практике я пока его не применял но звучит как что-то интересное, да и судя по caniuse он работает во всех браузерах, кроме IE