Прокачайте свой сайт или приложение с помощью этой библиотеки

Эта библиотека весит всего 2 КБ и предоставляет 10 простых в использовании звуков, которые улучшают обратную связь (UI feedback) в пользовательском интерфейсе.

> pnpm add cuelume

@WebDev_Plus

Лучший эффект мерцания текста на CSS
Сделано с помощью background-clip — стоит сохранить.

.txt {
background-clip: text;
color: #0000;
background: var(--gradient) 0 0 / 300% 100%;
animation: shim 2s infinite;
}
@​keyframes shim {
0% { background-position: 100% 0; }
}

@WebDev_Plus

Поддержка TypeScript 7 в Next.js

Кратко:
Теперь в next@preview можно включить experimental.useTypeScriptCli, чтобы использовать TypeScript 7.

Подробнее:
TypeScript 7 вышел с ts-go — очень радует прирост производительности!
В этом релизе намеренно отсутствует JavaScript API, который планируют выпустить в TypeScript 7.1.
К сожалению, это означает, что текущий релиз TypeScript 7 ломает работу фреймворков, интегрирующих TypeScript через JS API.

Next.js использует JS API для запуска TypeScript во время выполнения next build, а также добавляет дополнительное форматирование, чтобы логи выглядели единообразно с остальными этапами сборки.

Чтобы обеспечить поддержку TypeScript 7 без JS API, нам пришлось изменить способ запуска TypeScript и напрямую использовать установленную команду tsc.
Это изменение доступно через experimental.useTypeScriptCli.
Оно выпущено в составе Next.js 16.3 Preview.

Установить эту версию можно командой:
npm install next@preview

@WebDev_Plus

Этот проект пригодится для вашего сайта или приложения.

Он автоматически генерирует скелетоны для компонентов. Ничего не нужно рассчитывать вручную.
Просто оберните компоненты в <Skeleton> — и готово.

Для Vue, React, Angular и Svelte:
https://github.com/0xGF/boneyard

@WebDev_Plus

Чистый SaaS-стек для более быстрой разработки и релизов:

* хостинг фронтенда и бэкенда — Sevalla
* база данных — PlanetScale
* аутентификация — Clerk
* платежи — Stripe
* транзакционные письма — Postmark
* файловое хранилище — Bunny Storage
* отслеживание ошибок — Sentry
* продуктовая аналитика — PostHog

@WebDev_Plus

Вайб-кодерам это точно понравится - https://namethatui.com/

Это огромный визуальный каталог UI-компонентов с готовыми промптами.

Можно просматривать и копировать промпты для разных элементов интерфейса или просто описать что-то вроде «серый оверлей за всплывающим окном» или «те самые три точки» — и быстро найти нужный UI-компонент вместе с примерами :)

@WebDev_Plus

Игру без движка полностью написали на TypeScript

Разработчик представил Bone Tide — игру, созданную с нуля на TypeScript с использованием TypeGPU. Проект обходится без традиционного игрового движка: на TypeScript написаны как игровая логика, так и шейдеры.

По словам автора, такой подход показывает, что TypeScript может быть пригоден не только для веб-приложений, но и для производительной игровой разработки с удобным DX. Игра работает в браузере, а сам подход потенциально применим и в React Native.

Веб-версия Bone Tide уже доступна для запуска. На мобильных устройствах разработчик рекомендует добавить игру на главный экран как PWA.

@WebDev_Plus

Энтузиаст выложил в открытый доступ бенчмарк для пиксель-арта, созданного ИИ

> Сравнивает конвертеры пиксель-арта с помощью открытых и воспроизводимых тестов
> Любой может добавлять методы, запускать бенчмарки и независимо оценивать результаты

Репозиторий: https://github.com/Retro-Diffusion/pixel-bench


@WebDev_Plus

Этот инструмент превращает Claude Code в команду из 50 агентов

> Запускает десятки агентов Claude Code, чтобы параллельно исправлять баги и проводить рефакторинг кода
> Включает мониторинг, автоматическое восстановление и поддержку более 30 стеков разработки

Репозиторий: https://github.com/Dicklesworthstone/claude_code_agent_farm

@WebDev_Plus

Каждый Node.js-разработчик должен знать эту строчку.

Helmet помогает защитить приложение на Node.js/Express, устанавливая важные HTTP-заголовки ответа, например Content-Security-Policy и Strict-Transport-Security.

Просто добавьте:

app.use(helmet())

И всё. По умолчанию Helmet устанавливает 13 HTTP-заголовков, которые помогают защитить приложение от распространённых веб-атак и ошибок конфигурации безопасности.
Один из самых простых способов быстро повысить безопасность любого Express-приложения :)

Источник : github.com/helmetjs/helmet

@WebDev_Plus

⚡️ Универсальный хук, который приводит пагинированный API к единому формату

@WebDev_Plus

Бро… этот open-source дизайн-скилл для AI делает интерфейсы, сгенерированные AI, гораздо менее шаблонными. 😍

Hallmark — это дизайн-скилл для Claude Code, Cursor и Codex, который помогает AI генерировать интерфейсы, выглядящие как результат осознанной дизайн-работы, а не как типичный AI-вывод.

Он умеет:
→ создавать красивые новые UI
→ проводить аудит существующего дизайна
→ редизайнить страницы, сохраняя ваш контент
→ анализировать URL или скриншот и извлекать из них дизайн-ДНК

Если вы разрабатываете приложения с помощью AI, это точно стоит попробовать :)

@WebDev_Plus

Мои любимые AI-модели на этой неделе

Простые задачи → GPT 5.6 Luna Max
Повседневная разработка → GPT 5.6 Sol Medium
Сложные задачи → GPT 5.6 Sol Max
Баланс качества и скорости → Grok 4.5
Создание интерфейсов и UI → Claude Fable 5
Поиск уязвимостей и задачи по безопасности → Fable 5
Крупные рефакторинги → Claude Opus 4.8
Игры и 3D-проекты → Kimi K3
Лучшая открытая модель → Kimi K3

@WebDev_Plus

Если вы разрабатываете сайты на React, не пренебрегайте мелкими деталями.

Amicro — это готовая библиотека микроинтеракций, которая добавляет hover-эффекты, трансформации иконок, переходы между состояниями и интерактивные анимации, благодаря которым интерфейс выглядит более профессионально.

Главное преимущество — вам не нужно создавать все эти детали с нуля. Библиотека подходит для лендингов, SaaS-продуктов и AI-инструментов.

https://amicro.vercel.app/

@WebDev_Plus

Чёрт… эта open-source альтернатива Figma выглядит невероятно круто.

Она умеет открывать, редактировать и сохранять нативные файлы Figma в формате .fig, а также предлагает:

→ Встроенного ИИ-ассистента
→ Совместную работу в реальном времени
→ Поддержку MCP
→ Экспорт дизайна в код
→ Кроссплатформенную поддержку

А самое главное — проект полностью с открытым исходным кодом.
Он всё ещё находится в активной разработке, но за ним определённо стоит следить :)

Источник: github.com/open-pencil/open-pencil

@WebDev_Plus

Совет по TypeScript: используйте переназначение ключей, чтобы выбирать или исключать свойства по типу.

#TypeScript

@WebDev_Plus

WTF???... Люди реально превращают Telegram в «бесконечное» облачное хранилище. 🤯

Такое ощущение, будто об этом вообще незаконно знать… но кто-то действительно создал open-source приложение, которое позволяет использовать свой Telegram-аккаунт как персональный облачный диск.

Возможности:

→ Загрузка файлов через drag-and-drop
→ Стриминг видео и аудио
→ Встроенный просмотрщик PDF
→ Превью файлов
→ Ссылки для скачивания, которыми можно делиться
→ Поддержка Windows, macOS, Linux и Android

Самое интересное: файлы хранятся прямо в вашем Telegram-аккаунте, а приложение не зависит от сторонних серверов :)

Исходники 🔗: github.com/caamer20/Telegram-Drive

@WebDev_Plus

При работе с JSONB знали ли вы, что следующие запросы функционально эквивалентны, но используют разные индексы?
Оба проверяют, что по пути user.city находится значение "Denver", но первый использует извлечение значения по пути и оператор сравнения, а второй — оператор вхождения.

B-tree индекс по выражению, использует операторы сравнения:

data->'user'->>'city' = 'Denver'

GIN-индекс, использует операторы вхождения:

data @> '{"user": {"city": "Denver"}}'

@WebDev_Plus

⚡️ TypeScript: превращаем карту объектов в discriminated union с помощью mapped types
#TypeScript

@WebDev_Plus