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

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

> Создавать стильные терминальные интерфейсы стало гораздо проще 🤯 Termcn — это, по сути, shadcn/ui для терминальных приложений. Это бесплатная open-source коллекция красиво оформленных UI-компонентов для терминала, которые можно просто копировать и вставлять в проекты на React. Построена на базе Ink и OpenTUI. → готовые terminal UI-компоненты по принципу copy-paste → построено на Ink и OpenTUI → работает с shadcn CLI → поддерживает темы, шаблоны и полную кастомизацию Отличный выбор, если вы разрабатываете CLI-инструменты, AI-агентов или терминальные приложения, которые выглядят так же современно и качественно, как веб-приложения. Источник : github.com/shadcn-labs/termcn @WebDev_Plus

TypeScript 7.0 официально вышел — и он стал значительно быстрее Основные улучшения: - До 16× более высокая производительность на некоторых проектах. - Параллелизация проверки типов значительно ускоряет сборку на многоядерных процессорах. - Компилятор и языковой сервер полностью перенесены на Go, что обеспечивает нативную производительность и эффективное использование многопоточности. Новые возможности для управления параллелизмом: - --checkers — задает количество параллельных воркеров для проверки типов. - --builders — позволяет параллельно собирать проекты при использовании --build. - --singleThreaded — отключает многопоточность для отладки или работы в средах с ограниченными ресурсами. По данным команды TypeScript, типичный прирост производительности при полной сборке составляет 8–12×, а при увеличении числа воркеров (например, --checkers 8) на некоторых крупных кодовых базах достигает 16,7×. @WebDev_Plus

Новый навык /apple-design поможет применять принципы дизайна Apple на практике Появился новый навык /apple-design, основанный на материалах конференции WWDC от Apple. Его автор изучил лучшие доклады о дизайне и собрал 17 ключевых принципов дизайна и анимации, которые лежат в основе пользовательского опыта продуктов Apple. @WebDev_Plus

Шпаргалка по командам Docker 🐳 Базовые команды docker --version — показать версию Docker. docker version — показать версии Docker Client и Docker Server. docker info — вывести информацию о системе Docker. docker help — показать список доступных команд. docker — открыть справку по Docker CLI. Управление контейнерами docker run image — создать и запустить контейнер. docker run -d image — запустить контейнер в фоновом режиме. docker run -it image — запустить контейнер в интерактивном режиме. docker ps — показать запущенные контейнеры. docker ps -a — показать все контейнеры. docker start container_id — запустить остановленный контейнер. docker stop container_id — остановить контейнер. docker restart container_id — перезапустить контейнер. docker pause container_id — приостановить контейнер. docker unpause container_id — возобновить работу контейнера. docker rm container_id — удалить контейнер. Управление образами docker images — показать локальные образы. docker pull image — скачать образ из реестра. docker push image — загрузить образ в реестр. docker build -t image . — собрать образ из Dockerfile. docker tag image new_tag — создать новый тег для образа. docker rmi image — удалить образ. docker image prune — удалить неиспользуемые (dangling) образы. Просмотр информации и логов docker logs container_id — показать логи контейнера. docker logs -f container_id — отслеживать логи в реальном времени. docker inspect container_id — вывести подробную информацию о контейнере. docker stats — показать текущее потребление ресурсов контейнерами. docker top container_id — вывести список процессов внутри контейнера. docker exec -it container_id bash — открыть Bash внутри контейнера. docker exec -it container_id sh — открыть Shell внутри контейнера. Тома и сети docker volume ls — показать список томов. docker volume create — создать том. docker volume rm volume_id — удалить том. docker network ls — показать список сетей. docker network create network — создать сеть. docker network connect network container_id — подключить контейнер к сети. docker network disconnect network container_id — отключить контейнер от сети. Docker Compose docker compose up — запустить сервисы. docker compose up -d — запустить сервисы в фоновом режиме. docker compose down — остановить и удалить сервисы. docker compose restart — перезапустить сервисы. docker compose logs — показать логи сервисов. docker compose ps — показать контейнеры Compose. docker compose build — собрать образы для Compose. Очистка docker system prune — удалить все неиспользуемые ресурсы. docker container prune — удалить остановленные контейнеры. docker image prune — удалить неиспользуемые образы. docker volume prune — удалить неиспользуемые тома. docker network prune — удалить неиспользуемые сети. Другие полезные команды docker login — войти в Docker Hub. docker logout — выйти из Docker Hub. docker save image > image.tar — сохранить образ в архив. docker load < image.tar — загрузить образ из архива. docker cp container:file host — скопировать файл из контейнера на хост. docker commit container_id image — создать образ на основе контейнера. docker history image — показать историю слоёв образа. @WebDev_Plus

Vecel представила Native SDK Набор инструментов для разработки нативных приложений. Native SDK поддерживает горячую перезагрузку, использует разметку в сочетании с Zig, обеспечивает мгновенный запуск приложений и работает на macOS, Windows и Linux. В его основе — собственный GPU-движок, созданный с нуля. Также в SDK входят встроенная дизайн-система и темы оформления, а также поддержка пользовательских компонентов и дизайн-токенов. Создаём собственное ПО. 👏 @WebDev_Plus

🇷🇺 Разбираешься в радиочипах, оптике и связи? Забери до 1 000 000 рублей за свои инженерные навыки на турнире «Дронкон» 🇷🇺 «Сталинские Соколы» открывают регистрацию на 4-й Всероссийский турнир «Дронкон», который пройдет с 22 по 26 августа. Турнир пройдет по направлению: - Инженерное дело: навыки программирования, сборка электронного оборудования, беспроводная связь, оптические системы + стратегия «Битва Дронов»; Призовой фонд для победителей: 🥇место – 1 000 000 рублей 🥈место – 700 000 рублей 🥉место – 500 000 рублей Награда за 4-8 места - 100 000 рублей Пройди заочный онлайн-этап и получи путевку на очный этап турнира в Республику Татарстан! Перелет, питание, проживание - за счет организаторов. 🇷🇺 Подать заявку и узнать подробности 🇷🇺

Этот эффект можно реализовать, используя только CSS, объединив псевдоклассы `:has()` и `:not()`:

.menu:has(.item:hover) .item:not(:hover) {
  filter: blur(8px);
}

Проще говоря: > Если внутри .menu есть элемент, на который наведен курсор, применить размытие ко всем остальным элементам, которые в данный момент не находятся под курсором. @WebDev_Plus

Chrome 150 теперь доступен в стабильном релизе! Вот основные нововведения для разработчиков в этой версии: → https://goo.gle/3TcjMwm 🔠 CSS text-fit: автоматически масштабирует текст так, чтобы он идеально вписывался по ширине в контейнер — без каких-либо динамических вычислений на JavaScript. ⌨️ Атрибут focusgroup: позволяет декларативно добавить навигацию с помощью клавиш со стрелками и запоминание последнего сфокусированного элемента для составных виджетов, избавляя от необходимости использовать громоздкие скрипты с техникой roving tabindex. 🎨 CSS background-clip: border-area: позволяет обрезать фон непосредственно по области границы, благодаря чему можно создавать нативные градиентные рамки без обходных решений с использованием border-image. @WebDev_Plus

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