✅ Функция Memoize

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

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

Ранее мы разбирали функции:
debounce, throttle, once

#js #middle #custom

✅ Область видимости

Помимо глобальной и локальной областей видимости, существует также блочная область видимости. Переменные, объявленные с помощью ключевого слова let или const, ограничиваются ближайшими фигурными скобками { }.

Статья на английском

#js #junior #engine

✅ Web Storage

Web Storage – это интерфейс взаимодействия с хранилищем. Есть две реализации этого API: Local Storage и Session Storage.

Оба способа имеют идентичный API и ограничения, основное различие - это время хранения данных.

Если Session Storage ограничивается жизнью сессии, то Local Storage, в теории, является бессрочным хранилищем данных. Хотя данные и должны храниться бессрочно, браузеры все равно вводят свои ограничения.

Так, например, при переполнении хранилища оно полностью очищается. А Safari очищает Local Storage если к нему не обращались в течение семи дней. То есть если пользователь не посещал ваш сайт больше 7 дней, то данные хранящиеся в нем будут удалены.

- Максимальный объем хранимых данных — 5 Мб
- localStorage всегда хранится в строковом формате UTF-16.
- Данные localStorage зависят от протокола браузера и веб-сайта. (Например, они отличаются в HTTP и HTTPS)

Статья на английском

#js #junior #base #api

✅ Array.includes

Метод позволяет определить входит ли значение в массив. Кроме этого, вторым аргументом метод позволяет задать смещение при поиске совпадения.

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

Ссылка на документацию

#js #junior #array

✅ Функция Curry

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

Честно говоря, я всего пару раз видел применение подобной конструкции в рабочих проектах, поэтому просто знайте, что такое есть)

Ранее мы разбирали функции:
debounce throttle once memoize

#js #middle #custom

✅ Svelte 4

Закрутились, завертелись и пропустили анонс svelte 4. 3 версия вышла аж 4 года назад.

Из нового:
- Улучшили производительность
- Обновили документацию
- Улучшили средства разработки

Сами в блоге они пишут, что данная версия это лишь почва для svelte 5. Вот там они будут переписывать компилятор, улучшать среду выполнения (runtime) и вычищать от устаревших версий либ. Так что ждем новостей.

#js #svelte #lib #news

✅ Prototype

Почему мы можем использовать встроенные методы: .split(), .join(),  .length и т.д. для наших строк, массивов или объектов?

Как ведут себя функции конструкторы и какой у них синтаксический сахар (спойлер, это классы).

Статья на английском

#js #junior #engine

✅ Object.values

Если нам нужны только значения свойств объекта - используем Object.values()

Документация

#js #junior #base #object

✅ 100 вещей о Nuxt 3

В конце этого года будет прекращена поддержка vue 2 и nuxt 2.

Автор расписал список вещей, которые нужно знать о nuxt 3. Уверен, что кто работает с данным фреймворком большую часть этого знает, но пункты расписаны довольно подробно и интересно. Все, кто работает с vue и nuxt - рекомендую

Статья на английском

#js #vue #nuxt

✅ Prettier 3.0

Вчера состоялся релиз новой версии prettier.

Из изменений:
- Переход на модули ECMAScript.
- Исправлено форматирование иероглифов.
- trailingComma по умолчанию теперь all
- Api для плагинов теперь асинхронные
- Убрали поддержку комментариев Flow.
и т.д.

Ссылка на релиз

#js #news

✅ Nuxt 3.6

23 июня вышла новая версия Nuxt 3.6 (опять проморгали)

Из изменений:
- Новый индикатор загрузки SPA
- Улучшена производительность
- Улучшили встраивание стилей, работу с анимацией
- Добавили автоматическое обнаружение статических пресетов (прокачали nuxt generate)
- Повысили безопасность типов
- Nitro 2.5
- Полностью статические серверные компоненты

Ссылка на релиз

#js #nuxt #news

✅ Vite 4.4

Новая версия

- Экспериментальная поддержка Lightning CSS
- Esbuild 0.18
- Create-vite для Solid и Qwik
- Корейский перевод документации

и т.д.

Ссылка на релиз

#js #news #vite

✅ Fullscreen API

В статье автор описывает проекты, в которых можно использоваться данные API. Приводит список методов и свойств, а так же делится советами.

Методы и свойства:

✅ element.requestFullscreen(): метод разворачивает указанный элемент в полноэкранном режиме.
✅ document.exitFullscreen(): метод выхода из полноэкранного режима.
✅ document.fullscreenElement: Свойство возвращает элемент, который находится в полноэкранном режиме, с его помощью можно проверить активен ли данный режим. Значение null означает, что ни один элемент не находится в полноэкранном режиме.
✅ document.fullscreenEnabled: Свойство, которое возвращает наличие поддержки полноэкранного режима true/false.
✅ fullscreenchange: Событие используется для обнаружения изменений в полноэкранном режиме.

Статья на английском

#js #core

✅ Генераторы и Итераторы

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

У функции генератора есть специальный синтаксис function*

Статья на английском

#js #core #middle

✅ 5 советов по улучшению вашего Typescript

Советы, приведенные в этой статье, помогут в полной мере использовать проверку типов в TypeScript и повысить качество кода

- Используйте операторы объединения ( | и & )
- Разделяйте типы на несколько видов, чтобы избежать необязательных свойств (в статье есть пример)
- С помощью предикатов можно создавать проверки принадлежности значения к определенному типу
- Используйте перечисления (enum)
- Будьте аккуратней с дженериками

Статья на английском

#js #ts #middle

✅ Object.freeze

Object.freeze() используется для предотвращения изменений свойств объекта. После применения этого метода вы не сможете добавлять, изменять или удалять свойства объекта.

#js #junior #base #object

✅ Функция Pipe

Функция Pipe используется для передачи результата каждой функции по цепочке. Она аналогична оператору pipe в Unix и применяет все функции слева направо, используя функцию reduce():

Рассмотрим на примере связи трех функций:

- Добавить префикс к строке
- Добавить суффикс к строке
- Преобразовать строку в верхний регистр

Ранее мы разбирали функции:
debounce throttle once memoize curry

#js #middle #custom

✅ Promise - async/await

Зачем нужны промисы, как они работают "под капотом" и как писать их наиболее современным способом?

Статья на английском

#js #core #junior

✅ Array.join

Метод join() в JavaScript используется для преобразования всех элементов массива в строку. Элементы будут разделены символом или строкой, которую вы передадите как аргумент. Если аргумент не указан, элементы будут разделены запятыми

#js #junior #base #array

✅ Функция Pick

Функция Pick используется для выбора определенных значений из объекта. Это способ создания нового объекта путем выбора определенных свойств из предоставленного.

Ранее мы разбирали функции:
debounce throttle once memoize curry pipe

#js #middle #custom