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

Паттерны проектирования JavaScript

https://stackblitz.com/@lydiahallie/collections/javascript-patterns

👉 @frontend_1

ECMAScript 2022 - изменения в Async/Await 

22 июня 2022 года официально анонсировали новый стандарт ECMAScript 2022 который содержит в себе довольно интересные изменения.

Одно из интересных изменений это то что теперь оператор await можно будет использовать в верхнем уровне скрипта, вне async функции.

Вот так вот:

// my-module.js
const res = await fetch('https://example.com');
const text = await res.text();
console.log(text);

Яндекс Практикум запустил бесплатный курс по алгоритмическим собеседованиям. Курс поможет студентам подготовиться к таким интервью, чтобы устроиться на работу в крупные IT-компании.

Уроки сделаны на основе курса «Алгоритмы и структуры данных»‎, но здесь полностью бесплатны.
Курс будет полезен тем, кто знаком с алгоритмами, и тем, кто только планирует их изучать:
→ знатоки смогут применить умения на практике;
→ новички смогут сориентироваться и понять, на что стоит обратить внимание.

На курсе студенты:
— узнают, как проходят собеседования и как к ним готовиться;
— научатся отвечать на неочевидные вопросы;
— пройдут тесты на знание алгоритмов и структур данных;
— решат практические задачи с реальных собеседований.

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

Начинайте готовиться вместе с Практикумом

#вопросы_с_собеседований
Вопрос о рендеринге компонентов в React и оптимизации производительности.

Когда компоненты React рендерятся на странице, это может привести к задержкам в работе приложения. Один из способов решения этой проблемы - это использование метода shouldComponentUpdate(), который определяет, должен ли компонент перерисовываться при изменении свойств или состояния.

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

В  примере мы используем хук useMemo(). Массив зависимостей вторым аргументом в хуке указывает, когда должно выполняться повторное вычисление: при изменении значения someProp.

https://twitter.com/_abstractart/status/1629860942614806534 тред в twitter про подготовку к алгоритмическим собесам