✅ Typescript 5.1

Релизнулась ts 5.1 rc. А это значит, что ее уже можно попробовать (основной версией она станет спустя некоторое время)

Кратко, что добавили:

- Упрощенный неявный возврат для undefined значений у функций
- Несвязанные типы для геттеров и сеттеров
- Раздельная проверка типов между элементами jsx и типами тегов
- Пространство имен для атрибутов jsx
- Оптимизацию

Изменились и минимальные требования, теперь это ES2020 и Node.js 14.17.

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

#js #ts #news

✅ Filter

Метод .filter() применяется для фильтрации массива на основе функции, переданной в качестве аргумента. Возвращает новый массив.

Часто используется

#junior #base #function

✅ Функция Debounce

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

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

#middle #js #custom

✅ Map, Set, WeakMap

Пытаемся разобраться как они работают.

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

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

#js #middle

✅ useHooks

Стоило написать про функцию debounce, как ребятки из ui.dev выкатили свою либу с готовыми хуками для подобных функций(К сожалению, только для React)

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

Сайт useHooks
Github

#js #react #lib

✅ Find

Метод .find() позволяет отыскать элемент, который удовлетворяет условиям переданной функции.

Если нам требуется найти только индекс данного элемента, то можно воспользоваться методом .findIndex().

Не забываем, что в ES14 добавили .findLast() и .findLastIndex(), которые позволяют отыскать элемент в массиве, проверяя элементы с конца (раньше для подобного решения требовалось вручную развернуть массив)

Часто используются.

#js #junior #base

✅ Движок JS

Весь наш красивый код обрабатывает движок javascript (в основном это v8). Что происходит при его выполнении и как осуществляется оптимизация?

Статья небольшая, но для понимания самое то.

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

#js #middle

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