✅ 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

✅ Самозакрывающиеся теги HTML

Есть проблема и она заключается в том, что /> иногда игнорируется, а иногда нет, в пределах одного и того же HTML-документа. Можно ли сделать так, чтобы правила парсинга переключались таким образом, чтобы /> всегда был значимым? Например, чтобы <div/> действительно был самозакрывающимся. Автор даже создал issue в официальном репозитории html, но подозревает, что это невозможно из-за несовместимости с существующими библиотеками, особенно чувствительными к безопасности.

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

#html #js #middle

✅ Array.from

Array.from() используется для создания нового массива из массивоподобного или итерируемого объекта. Он принимает два аргумента: исходный объект и необязательную функцию для преобразования элементов.

#js #junior #base #array

✅ Функция Omit

Функция Omit является противоположностью функции Pick, поскольку она удаляет определенные свойства из существующего объекта. Таким образом, скрывая свойства, можно избежать избыточной выборки. Ее можно использовать вместо функции Pick, если количество свойств, которые нужно скрыть, меньше количества свойств, которые нужно выбрать.

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

#js #middle #custom

✅ NextUI 2.0

Вышла новая версия ui библиотеки для реакта.

Изменения:
- Перешли с stitches на tailwind
- Добавили настройку tailwind тем
- Повышение производительности с помощью React Server Components
- Кастомные темы, слои, цвета
- Новые шаблоны и гайды
- Tailwind Variants
- Переписали компоненты с использованием хуков react-aria
- Оптимизировали анимацию
- Расширили документацию
- и т.д.

Все изменения

#js #news #lib #react

✅ Lazy Loading In JavaScript

Как реализовать ленивую загрузку, а самое главное когда?

В конце статьи автор приводит советы, которые помогут при работе с ленивой загрузкой, вот некоторые из них:
- Оптимизируйте изображения
- Устанавливайте placeholder(или 'skeleton') для медиа, которое в данный момент загружается
- Обрабатывайте ошибки загрузки. Этим очень часто пренебрегают
- Не переборщите)

Статья на английском
#js #vanilla #middle

✅ Radix UI

Либа компонентов с открытым исходным кодом.

Импортируем и работаем - никаких настроек. Выглядит достаточно красиво

Ссылка на сайт

Producthunt

#js #react #lib #ui

✅ Анонс Typescript 5.2

- Новый декоратор setMetadata
- using, явное управление ресурсами (для чистки памяти)
- Упрощенное использование методов для объединения массивов
- Добавили новые фишки из последней версии ECMAScript
и т.д.

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

#js #ts #news

✅ Bun 1.0

У нас тут появилась альтернатива всему и вся. Вчера релизнулся Bun 1.0

Это, как они сами пишут, инструмент "всё в одном", который замахивается на замену Node.js, пакетным менеджерам и подобным вещам.

В релизе пишут что bun запускается в 4 раза быстрее Node.js

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

#js #ts #nodejs #npm #news