✅ 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

✅ 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