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

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

Оооо... это слишком круто. 🤯 Это расширение для VS Code позволяет рисовать прямо внутри редактора — буквально делать наброски мышкой или стилусом. Идеально подходит для: * быстрого прототипирования идей; * планирования архитектуры всего проекта перед написанием кода; * создания майнд-карт для сложных концепций; * набросков UI/UX-сценариев. И всё это без необходимости покидать редактор кода. Очень удобно, особенно во время брейнштормов или созвонов с клиентами :) @WebDev_Plus

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

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

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

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

@WebDev_Plus

WTF???... Люди реально превращают Telegram в «бесконечное» облачное хранилище. 🤯 Такое ощущение, будто об этом вообще незаконно знать… но кто-то действительно создал open-source приложение, которое позволяет использовать свой Telegram-аккаунт как персональный облачный диск. Возможности: → Загрузка файлов через drag-and-drop → Стриминг видео и аудио → Встроенный просмотрщик PDF → Превью файлов → Ссылки для скачивания, которыми можно делиться → Поддержка Windows, macOS, Linux и Android Самое интересное: файлы хранятся прямо в вашем Telegram-аккаунте, а приложение не зависит от сторонних серверов :) Исходники 🔗: github.com/caamer20/Telegram-Drive @WebDev_Plus

🔍Тестовое собеседование с ТимЛидом Frontend-разработки в этот четверг 23 июля(уже завтра!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Алексей Романов, Teamlead в Underhood.dev с опытом 6+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Алексей будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Алексею Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

Совет по 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

На Stepik вышла программа «DevOps с нуля: от Linux до Kubernetes» Это комплексная программа из 5 практических курсов по ключевым технологиям DevOps: Linux, Git, Docker, GitLab CI/CD, Kubernetes Вы последовательно пройдёте путь от работы в Linux и управления кодом через Git до контейнеризации приложений, настройки CI/CD-пайплайнов и развёртывания в Kubernetes. Что вы изучите:

• работу с Linux и командной строкой • Git и контроль версий в реальных проектах • создание Docker-образов и запуск контейнеров • автоматизацию сборки, тестирования и деплоя в GitLab CI/CD • развёртывание и управление приложениями в Kubernetes • сети, хранилища, конфигурации и секреты • диагностику инфраструктуры и автоматизацию рутинных задач ... и многое другое

Все знания закрепляются на практике с помощью заданий с автопроверкой. Материал подаётся последовательно и понятным языком: с примерами, схемами и демонстрациями. Во время обучения можно задавать вопросы по урокам и заданиям, получать обратную связь и помощь при возникновении сложностей. После прохождения программы вы получите сертификат, который можно добавить в резюме. Скидка 20% на 48 часов: по промокоду DEVOPS20 стоимость всей программы составит 10 392 ₽. Открыть программу на Stepik

Игру без движка полностью написали на 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