Совет для инженеров по проектированию интерфейсов:

Не блокируйте ввод при достижении лимита символов. Блокируйте отправку.
Дайте пользователям закончить свою мысль.

@WebDev_Plus

Совет: не каждая ошибка требует сообщения. Иногда достаточно намёка.

@WebDev_Plus

Обязательно используйте правильные семантические элементы в вашей HTML-разметке 🚀

@WebDev_Plus

⚡️ Валидация строковых паттернов с помощью template literal types в TypeScript

#TypeScript

@WebDev_Plus

Open-source библиотека motion-эффектов — Kinetics теперь содержит 99 анимаций.

- CSS + React версия
- Промпт-версия для вашего AI-кодинг-агента

http://kinetics.colorion.co

@WebDev_Plus

Распространённые стратегии балансировки нагрузки:

- Round Robin (Круговой): Запросы отправляются серверам последовательно в повторяющемся цикле.

- IP Hash (Хеш IP): Использует IP-адрес клиента для постоянной маршрутизации запросов к одному и тому же серверу.

- Least Connections (Наименьшее число соединений): Новый трафик направляется на сервер с наименьшим количеством активных сессий.

- Least Response Time (Наименьшее время отклика): Выбирается сервер, который в данный момент отвечает быстрее всего.

- Least Bandwidth (Наименьшая пропускная способность): Маршрутизирует трафик на сервер с наименьшей сетевой нагрузкой.

Основная цель проста: обеспечить скорость, доступность и устойчивость приложений.

@WebDev_Plus

Нативный <select>, который сам подстраивается под ширину выбранного варианта — в одну строчку CSS:

select {
  field-sizing: content;
}

По умолчанию ширина select определяется самой длинной опцией.
field-sizing: content заставляет элемент подстраиваться под текущий выбранный вариант. Работает в Chrome 125+, Edge 125+, Safari 17.4+.

@WebDev_Plus

Появился новый набор готовых блоков таблиц данных для React на базе shadcn.

В состав входят фасетные фильтры, сортировка и бесконечная прокрутка, палитра команд для фильтрации по сочетанию ⌘K, поддержка хранения состояния в URL через nuqs или zustand, а также серверные хелперы для Drizzle (в документации есть пример интеграции с supabase).

Кроме того, проект включает AI-функции: фильтрацию на естественном языке и отдельный skill для AI-агентов.

Документация: http://logs.run/docs

https://github.com/openstatusHQ/data-table-filters

@WebDev_Plus

Хотите убрать эффект «резиновой» прокрутки (bounce) в веб-приложении? Достаточно добавить всего одну строку CSS:

html,
body {
  overscroll-behavior-y: none;
}

Свойство overscroll-behavior-y: none отключает вертикальный bounce-эффект при достижении верхней или нижней границы страницы, делая поведение веб-приложения более нативным и предсказуемым, особенно на мобильных устройствах.

@WebDev_Plus

Название сайта говорит само за себя: F*ckSignups.

Это библиотека, в которой собрано более 170 open-source инструментов, работающих прямо в браузере — без регистрации, без электронной почты и без отслеживания.

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

@WebDev_Plus

Этот open-source проект просто зверь: Meetily.

Он расшифровывает и суммирует ваши встречи с помощью ИИ.
Но вся обработка выполняется локально — без загрузки аудио на какие-либо серверы. Полностью бесплатно, на 100% конфиденциально и всего за несколько секунд.

→ https://github.com/Zackriya-Solutions/meetily

@WebDev_Plus

Chrome 150 теперь доступен в стабильном релизе! Вот основные нововведения для разработчиков в этой версии:
→ https://goo.gle/3TcjMwm

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

@WebDev_Plus

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

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

Проще говоря:

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

@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

Новый навык /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

> 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