✅ Функция Throttle

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

Троттлинг функции означает, что функция вызывается не более одного раза в указанный период времени (например, раз в 10 секунд). Другими словами - троттлинг предотвращает запуск функции, если она уже запускалась недавно.

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

Например, прокрутка страницы, вешаем обработчик тротлинга на событие scroll и реагируем на него (смотри изображение).

Троттлинг наиболее эффективен, когда входные данные для вызова функции не имеют значения или одинаковы каждый раз (например, событие scroll), в то время как debouncing лучше всего подходит, когда результат последнего события (например, инпут или изменение размера окна) имеет значение для конечного пользователя.

#middle #js #customFunction

✅ Event Loop

Ключевой механизм обработки асинхронных задач и поддержания неблокирующего поведения в js​.

Как функции добавляются в стек вызовов и выполняются в порядке LIFO (последним пришел - первым вышел).

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

#junior #js

✅ DaisyUI 3

На днях релизнулась новая версия библиотеки компонентов для Tailwind css. (Библиотека для библиотеки))

Поправили ошибки и баги. Добавили несколько новых функций и улучшений:
- Новые компоненты загрузки
- Новые темы
- и т.д.

Для информации, либа позволяет сокращать полотна с перечислением классов tailwind css.

Ссылка на релиз
Сайт DaisyUI

#css #tailwind #lib #news

✅ Object.hasOwn

Если требуется проверить наличие свойства в объекте используем .hasOwn(obj, prop)

Данный метод ввели в ES13, в конце прошлого года. По MDN документации он является заменой hasOwnProperty.

#js #junior #object

✅ Большой фронтенд

Чем больше проект, тем больше проблем. Если какая-то проблема кажется незначительной на малом и среднем проекте, то она часто перерастает во что-то серьезное при масштабировании.

Статейка интересная, если коротко:
- Удаляйте весь неиспользуемый код сразу (Этим часто грешат джуны). Лучше потом найти в коммитах правки и восстановить удаленное, чем путать коллег и заставлять их изучать бесполезный код.
- Удаляйте неиспользуемые зависимости сразу.
- Определитесь с шаблонами и стилем кода. «В коде должны быть узнаваемы паттерны, но не авторы»
- 10 раз подумайте, а нужно ли вам обновлять зависимости
- Прописывайте типы как можно конкретней (необязательные свойства часто путают и ставят в ступор). В тексте приведен неплохой пример. Лично у нас, в рабочих проектах, этот косяк постоянно всплывает.
- Уменьшаем компоненты и выносим код в хуки и отдельные файлы.
- и еще много чего.

Автор, кстати, рассказывает про свой личный опыт.

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

#js #ts #middle

✅ Функция Once

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

Допустим, запрос на сервер. Нам требуется отправить запрос исключительно 1 раз и не больше (в примере на изображении, естественно, это можно было бы решить с помощью опций события {once: true}, но мы это опустим)

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

#js #junior #custom

✅ Всплытие. Hoisting

Сегодня у нас механизм всплытия. Разбираемся как инициализируются функции и переменные в js.

Почему переменные, объявленные с помощью var, имеют значение undefined, а переменные, объявленные с let и const, остаются неинициализированными

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

#js #junior #engine

✅ Архитектура и реактивное программирование

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

Автор показывает пример двух подходов и почему реактивность не всегда является идеальным решением.

Статья на русском

#js #middle

✅ String.replaceAll

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

Возвращает новую строку с изменениями.

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

#js #base #junior

✅ Функция 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