✅ Preline UI

Набор компонентов с использованием Tailwind CSS. Простенько, но красиво.

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

Есть инструкции по установке с разными фреймворками

Страничка на productHunt
Ссылка на либу

#lib #js #css #tailwind #vue #react

✅ useHooks

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

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

Сайт useHooks
Github

#js #react #lib

✅ NextUI 2.0

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

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

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

#js #news #lib #react

✅ Radix UI

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

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

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

Producthunt

#js #react #lib #ui

✅ Next.js 14.1

На этой неделе вышло обновление next, изменения:

- Новая документация по self-hosting
- Добавили возможность кастомного обработчика кэша.
- Улучшили турбопакет
- Улучшили сообщения об ошибках
- Добавили в appRoute поддержку pushState и replaceState
- Пофиксили 20 багов в работе роутов
- Прокачали next/image

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

#js #ts #react #news #framework

✅ Vite 5.1

Несколько недель назад Vite преодолел планку в 10 млн установок в неделю.

Изменения:
- Экспериментальная поддержка Vite Runtime API
- Стабилизировали работу css?url
- В build.assetsInlineLimit добавили колбеки
- Улучшен HMR для циклического импорта
- Повысили производительность
- и т.д.

Тест производительности:
Тест проводился на загрузке 10к модулей на apple m1 max
Vite 4.0 - 8 секунд
Vite 4.3 - 6.35 секунд
Vite 5.1 - 5.35 секунд

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

#js #vue #react #news

🔥 Дайджест #2

CSS
🇺🇸 CSS :has() Интерактивное руководство
🇺🇸 Анимация перехода. Изменение размера
🇺🇸 Выходим за рамки пикселей и rem
🇺🇸 Коллекция css toggle/switch

Vue
🇺🇸 Пишем чистые компоненты Vue
🇺🇸 defineModel во Vue 3.4
🇺🇸 Релиз NuxtHub - фулстек фреймворк

React
🇺🇸 Тренды React 2024
🇺🇸 React будет компилироваться
🇺🇸 Как избежать ошибок гидратации с useSyncExternalStore
🇺🇸 Next.js формы с server actions
🇺🇸 Параметры поиска с серверными компонентами React
🇺🇸 Next.js vs Remix
🇺🇸 HTMX vs React

Инструменты и ресурсы
🇺🇸 Функциональный UI kit для Figma
🇺🇸 Huemint - генератор цветовых палитр с AI
🇺🇸 Composable функции для рисования геометрии во Vue 3

Разное
🇺🇸 Рендеринг писем со Svelte
🇺🇸 Использование localStorage в наши дни
🇺🇸 СSS и SVG в console.log
🇺🇸 Раздутый JavaScript в 2024 - Статья на хабр 😇
🇺🇸 Chrome DevTools: +400% скорости вкладки "Производительность" с помощью perf-ception
🇺🇸 Релиз Bun v1.0.30

🇺🇸 Mario Kart 3D - игрушка на js

#js #weekly #react #vue

✅ Vercel AI SDK

Библиотека для создания интерфейсов ИИ чат ботов с поддержкой React, Svelte, Vue и Solid. Из коробки доступны самые популярные ИИ

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

#js #vue #react #solid #svelte #ai

✅ Генерация VUE UI

Open Source версия библиотеки v0 для реакта. Позволяет генерировать компоненты для vue, есть поддержка shadcn/vue, tailwindCSS.

Единственный нюанс - нужно сгенерировать ключ от OpenAI

Ссылка на vuev0
Ссылка на v0 react

#js #vue #ai #react

✅ Astro 4.5

- Добавили dev Audit UI - теперь выявить проблемы производительности станет легче
- Изменили View Transition: перерендер островов и перезапуск скриптов
- Shiki 1.0 - библиотека для подсветки кода, как в VS Code
- Добавили настройки подключения CDN для разных ресурсов
- В статус эксперимента добавили: JSON схемы для Data Collections и Новый алгоритм обнаружения скриптов

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

#js #vue #react #lib

✅ CSS-in-JS JS-from-CSS

Если вы когда-нибудь мечтали писать только css и ничего больше - то эта библиотека для вас! Пишем css - получаем react компоненты. Есть поддержка Tailwind.

Цитата с сайта:

Когда ваш код станет чище, вы, скорее всего, почувствуете себя более расслабленно

Ссылка на библиотеку

#js #news #react #css

✅ 3D эффект на тексте с React Three Fiber

Может показаться немного бесполезным, но выглядит прикольно.

Для любителей красивых эффектов.

🇺🇸 Ссылка на статью

#js #react #css #design #threejs