WebDev+ | Веб-разработка
8.07K subscribers
584 photos
275 videos
10 files
772 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
Шпаргалка по командам 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
Новый навык /apple-design поможет применять принципы дизайна Apple на практике

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

@WebDev_Plus
TypeScript 7.0 официально вышел — и он стал значительно быстрее

Основные улучшения:

- До 16× более высокая производительность на некоторых проектах.
- Параллелизация проверки типов значительно ускоряет сборку на многоядерных процессорах.
- Компилятор и языковой сервер полностью перенесены на Go, что обеспечивает нативную производительность и эффективное использование многопоточности.

Новые возможности для управления параллелизмом:

- --checkers — задает количество параллельных воркеров для проверки типов.
- --builders — позволяет параллельно собирать проекты при использовании --build.
- --singleThreaded — отключает многопоточность для отладки или работы в средах с ограниченными ресурсами.

По данным команды TypeScript, типичный прирост производительности при полной сборке составляет 8–12×, а при увеличении числа воркеров (например, --checkers 8) на некоторых крупных кодовых базах достигает 16,7×.

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
> Создавать стильные терминальные интерфейсы стало гораздо проще 🤯

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
Please open Telegram to view this post
VIEW IN TELEGRAM
> 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
Представьте, что вы разрабатываете приложение, которому нужно извлекать текст из изображений. Это может быть отсканированный чек, фотография доски с заметками или скриншот поста. Традиционно для OCR такие изображения отправлялись в облачный сервис — с оплатой за каждый запрос, дополнительной задержкой и зависимостью от стороннего API. Но что, если всё это можно выполнять локально, прямо в браузере, подключив всего одну JavaScript-библиотеку?

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

@WebDev_Plus
Media is too big
VIEW IN TELEGRAM
Открытая библиотека CSS-анимаций Kinetics теперь включает 99 готовых эффектов движения.

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

🔗 http://kinetics.colorion.co

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Прокачайте свой сайт или приложение с помощью этой библиотеки

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

> pnpm add cuelume

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Лучший эффект мерцания текста на 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
This media is not supported in your browser
VIEW IN TELEGRAM
Этот проект пригодится для вашего сайта или приложения.

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

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

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Чистый SaaS-стек для более быстрой разработки и релизов:

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

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Вайб-кодерам это точно понравится - https://namethatui.com/

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

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

@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Claude, приведи SEO в порядок. 🤯

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

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

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

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Игру без движка полностью написали на 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
This media is not supported in your browser
VIEW IN TELEGRAM
Бро… этот 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