WebDev+ | Веб-разработка

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

#TypeScript

@WebDev_Plus

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

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

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

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

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

@WebDev_Plus

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

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

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

https://amicro.vercel.app/

@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

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

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

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

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

@WebDev_Plus

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

@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

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

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

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

@WebDev_Plus

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

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

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


@WebDev_Plus

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

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

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

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

@WebDev_Plus

Claude, приведи SEO в порядок. 🤯

Этот универсальный SEO-навык для Claude Code включает 25 специализированных навыков и 18 AI-агентов, которые охватывают:

→ техническое SEO
→ E-E-A-T
→ Schema-разметку
→ GEO — оптимизацию под AI-поиск
→ обратные ссылки
→ локальное SEO
→ оптимизацию изображений
→ и многое другое...

Если вы используете Claude Code для создания или поддержки сайтов, это определённо стоит попробовать :)

@WebDev_Plus

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

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

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

@WebDev_Plus

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

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

@WebDev_Plus

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

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

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

@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

Лучший эффект мерцания текста на 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

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

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

> pnpm add cuelume

@WebDev_Plus

Открытая библиотека CSS-анимаций Kinetics теперь включает 99 готовых эффектов движения.

Для каждого эффекта можно:
скопировать готовый CSS-код в буфер обмена;
скопировать промпт, чтобы легко воспроизвести анимацию с помощью ИИ-инструментов.

🔗 http://kinetics.colorion.co

@WebDev_Plus

Представьте, что вы разрабатываете приложение, которому нужно извлекать текст из изображений. Это может быть отсканированный чек, фотография доски с заметками или скриншот поста. Традиционно для OCR такие изображения отправлялись в облачный сервис — с оплатой за каждый запрос, дополнительной задержкой и зависимостью от стороннего API. Но что, если всё это можно выполнять локально, прямо в браузере, подключив всего одну JavaScript-библиотеку?

Именно это и делает Tesseract.js. Проект компилирует классический OCR-движок Tesseract в WebAssembly, благодаря чему он работает непосредственно в браузере пользователя или в процессе Node.js. Никаких API-ключей, внешних сервисов или ежемесячных платежей. Только локальное распознавание текста, которое работает даже без интернета и сохраняет конфиденциальность данных.

@WebDev_Plus

> Google только что представила кое-что действительно впечатляющее.

Речь о LiteRT.js — новом рантайме, который позволяет запускать AI-модели прямо в браузере с использованием WebGPU. Без серверов, без API и с полной обработкой данных локально на устройстве пользователя

По заявлению Google, LiteRT.js обеспечивает более высокую производительность, чем TensorFlow.js и ONNX Runtime Web, благодаря использованию нативного рантайма LiteRT, WebAssembly и аппаратного ускорения через WebGPU (в будущем также появится поддержка WebNN).

→ AI-инференс полностью в браузере
→ аппаратное ускорение через WebGPU
→ без серверов и API
→ данные не покидают устройство пользователя
→ более высокая производительность по сравнению с TensorFlow.js и ONNX Runtime Web
→ совместимость с существующими моделями .tflite и простой путь миграции из PyTorch

GitHub: https://github.com/google-ai-edge/LiteRT/tree/main/litert/js

@WebDev_Plus