WebDev+ | Веб-разработка
前往频道在 Telegram
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки Связь: @devmangx
显示更多
网络:8 222
订阅者
-524 小时
-327 天
-6630 天
数据加载中...
吸引订阅者
七月 '26
七月 '26
+36
在0个频道中
六月 '26
+53
在2个频道中
Get PRO
五月 '26
+43
在0个频道中
Get PRO
四月 '26
+40
在0个频道中
Get PRO
三月 '26
+34
在0个频道中
Get PRO
二月 '26
+26
在3个频道中
Get PRO
一月 '26
+42
在3个频道中
Get PRO
十二月 '25
+200
在9个频道中
Get PRO
十一月 '25
+504
在316个频道中
Get PRO
十月 '25
+24
在0个频道中
Get PRO
九月 '25
+49
在1个频道中
Get PRO
八月 '25
+63
在0个频道中
Get PRO
七月 '25
+828
在282个频道中
Get PRO
六月 '25
+323
在1个频道中
Get PRO
五月 '25
+205
在0个频道中
Get PRO
四月 '25
+1 473
在0个频道中
Get PRO
三月 '25
+674
在0个频道中
Get PRO
二月 '25
+470
在0个频道中
Get PRO
一月 '25
+69
在0个频道中
Get PRO
十二月 '24
+74
在0个频道中
Get PRO
十一月 '24
+14
在0个频道中
Get PRO
十月 '24
+24
在0个频道中
Get PRO
九月 '24
+18
在0个频道中
Get PRO
八月 '24
+43
在0个频道中
Get PRO
七月 '24
+93
在0个频道中
Get PRO
六月 '24
+58
在0个频道中
Get PRO
五月 '24
+84
在0个频道中
Get PRO
四月 '24
+105
在0个频道中
Get PRO
三月 '24
+100
在0个频道中
Get PRO
二月 '24
+121
在0个频道中
Get PRO
一月 '24
+159
在0个频道中
Get PRO
十二月 '23
+199
在0个频道中
Get PRO
十一月 '23
+351
在0个频道中
Get PRO
十月 '23
+291
在0个频道中
Get PRO
九月 '23
+583
在0个频道中
Get PRO
八月 '23
+1 008
在0个频道中
Get PRO
七月 '23
+1 427
在0个频道中
Get PRO
六月 '23
+912
在0个频道中
Get PRO
五月 '23
+404
在0个频道中
Get PRO
四月 '23
+287
在0个频道中
Get PRO
三月 '23
+154
在0个频道中
Get PRO
二月 '23
+68
在0个频道中
Get PRO
一月 '23
+57
在0个频道中
Get PRO
十二月 '22
+78
在0个频道中
Get PRO
十一月 '22
+292
在0个频道中
Get PRO
十月 '22
+100
在0个频道中
Get PRO
九月 '22
+116
在0个频道中
Get PRO
八月 '22
+86
在0个频道中
Get PRO
七月 '22
+116
在0个频道中
Get PRO
六月 '22
+127
在0个频道中
Get PRO
五月 '22
+129
在0个频道中
Get PRO
四月 '22
+137
在0个频道中
Get PRO
三月 '22
+168
在0个频道中
Get PRO
二月 '22
+164
在0个频道中
Get PRO
一月 '22
+270
在0个频道中
Get PRO
十二月 '21
+258
在0个频道中
Get PRO
十一月 '21
+508
在0个频道中
Get PRO
十月 '21
+309
在0个频道中
Get PRO
九月 '21
+309
在0个频道中
Get PRO
八月 '21
+80
在0个频道中
Get PRO
七月 '21
+166
在0个频道中
Get PRO
六月 '21
+459
在0个频道中
Get PRO
五月 '21
+515
在0个频道中
| 日期 | 订阅者增长 | 提及 | 频道 | |
| 14 七月 | +1 | |||
| 13 七月 | 0 | |||
| 12 七月 | +5 | |||
| 11 七月 | +1 | |||
| 10 七月 | +2 | |||
| 09 七月 | +2 | |||
| 08 七月 | +5 | |||
| 07 七月 | +1 | |||
| 06 七月 | +3 | |||
| 05 七月 | +4 | |||
| 04 七月 | +3 | |||
| 03 七月 | +4 | |||
| 02 七月 | +4 | |||
| 01 七月 | +1 |
频道帖子
Поддержка 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| 2 |  Лучший эффект мерцания текста на 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 | 221 |
| 3 |  Прокачайте свой сайт или приложение с помощью этой библиотеки
Эта библиотека весит всего 2 КБ и предоставляет 10 простых в использовании звуков, которые улучшают обратную связь (UI feedback) в пользовательском интерфейсе.
> pnpm add cuelume
@WebDev_Plus | 271 |
| 4 |  Открытая библиотека CSS-анимаций Kinetics теперь включает 99 готовых эффектов движения.
Для каждого эффекта можно:
скопировать готовый CSS-код в буфер обмена;
скопировать промпт, чтобы легко воспроизвести анимацию с помощью ИИ-инструментов.
🔗 http://kinetics.colorion.co
@WebDev_Plus | 296 |
| 5 | Представьте, что вы разрабатываете приложение, которому нужно извлекать текст из изображений. Это может быть отсканированный чек, фотография доски с заметками или скриншот поста. Традиционно для OCR такие изображения отправлялись в облачный сервис — с оплатой за каждый запрос, дополнительной задержкой и зависимостью от стороннего API. Но что, если всё это можно выполнять локально, прямо в браузере, подключив всего одну JavaScript-библиотеку?
Именно это и делает Tesseract.js. Проект компилирует классический OCR-движок Tesseract в WebAssembly, благодаря чему он работает непосредственно в браузере пользователя или в процессе Node.js. Никаких API-ключей, внешних сервисов или ежемесячных платежей. Только локальное распознавание текста, которое работает даже без интернета и сохраняет конфиденциальность данных.
@WebDev_Plus | 310 |
| 6 |  > 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 | 317 |
| 7 |  > Создавать стильные терминальные интерфейсы стало гораздо проще 🤯
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 | 340 |
| 8 |  TypeScript 7.0 официально вышел — и он стал значительно быстрее
Основные улучшения:
- До 16× более высокая производительность на некоторых проектах.
- Параллелизация проверки типов значительно ускоряет сборку на многоядерных процессорах.
- Компилятор и языковой сервер полностью перенесены на Go, что обеспечивает нативную производительность и эффективное использование многопоточности.
Новые возможности для управления параллелизмом:
- --checkers — задает количество параллельных воркеров для проверки типов.
- --builders — позволяет параллельно собирать проекты при использовании --build.
- --singleThreaded — отключает многопоточность для отладки или работы в средах с ограниченными ресурсами.
По данным команды TypeScript, типичный прирост производительности при полной сборке составляет 8–12×, а при увеличении числа воркеров (например, --checkers 8) на некоторых крупных кодовых базах достигает 16,7×.
@WebDev_Plus | 344 |
| 9 | Новый навык /apple-design поможет применять принципы дизайна Apple на практике
Появился новый навык /apple-design, основанный на материалах конференции WWDC от Apple. Его автор изучил лучшие доклады о дизайне и собрал 17 ключевых принципов дизайна и анимации, которые лежат в основе пользовательского опыта продуктов Apple.
@WebDev_Plus | 338 |
| 10 |  Шпаргалка по командам 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 | 339 |
| 11 |  Vecel представила Native SDK
Набор инструментов для разработки нативных приложений.
Native SDK поддерживает горячую перезагрузку, использует разметку в сочетании с Zig, обеспечивает мгновенный запуск приложений и работает на macOS, Windows и Linux.
В его основе — собственный GPU-движок, созданный с нуля. Также в SDK входят встроенная дизайн-система и темы оформления, а также поддержка пользовательских компонентов и дизайн-токенов.
Создаём собственное ПО. 👏
@WebDev_Plus | 370 |
| 12 |  🇷🇺 Разбираешься в радиочипах, оптике и связи? Забери до 1 000 000 рублей за свои инженерные навыки на турнире «Дронкон» 🇷🇺
«Сталинские Соколы» открывают регистрацию на 4-й Всероссийский турнир «Дронкон», который пройдет с 22 по 26 августа.
Турнир пройдет по направлению:
- Инженерное дело: навыки программирования, сборка электронного оборудования, беспроводная связь, оптические системы + стратегия «Битва Дронов»;
Призовой фонд для победителей:
🥇место – 1 000 000 рублей
🥈место – 700 000 рублей
🥉место – 500 000 рублей
Награда за 4-8 места - 100 000 рублей
Пройди заочный онлайн-этап и получи путевку на очный этап турнира в Республику Татарстан!
Перелет, питание, проживание - за счет организаторов.
🇷🇺 Подать заявку и узнать подробности 🇷🇺 | 334 |
| 13 |  Этот эффект можно реализовать, используя только CSS, объединив псевдоклассы `:has()` и `:not()`:
.menu:has(.item:hover) .item:not(:hover) {
filter: blur(8px);
}
Проще говоря:
> Если внутри .menu есть элемент, на который наведен курсор, применить размытие ко всем остальным элементам, которые в данный момент не находятся под курсором.
@WebDev_Plus | 376 |
| 14 |  Chrome 150 теперь доступен в стабильном релизе! Вот основные нововведения для разработчиков в этой версии:
→ https://goo.gle/3TcjMwm
🔠 CSS text-fit: автоматически масштабирует текст так, чтобы он идеально вписывался по ширине в контейнер — без каких-либо динамических вычислений на JavaScript.
⌨️ Атрибут focusgroup: позволяет декларативно добавить навигацию с помощью клавиш со стрелками и запоминание последнего сфокусированного элемента для составных виджетов, избавляя от необходимости использовать громоздкие скрипты с техникой roving tabindex.
🎨 CSS background-clip: border-area: позволяет обрезать фон непосредственно по области границы, благодаря чему можно создавать нативные градиентные рамки без обходных решений с использованием border-image.
@WebDev_Plus | 390 |
| 15 |  🔍Тестовое собеседование на Frontend-разработчика с ex. TeamLead в Сбер
9 июля(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.
Как это будет:
📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. TeamLead в Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Даниилу
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе. | 324 |
| 16 |  Этот open-source проект просто зверь: Meetily.
Он расшифровывает и суммирует ваши встречи с помощью ИИ.
Но вся обработка выполняется локально — без загрузки аудио на какие-либо серверы. Полностью бесплатно, на 100% конфиденциально и всего за несколько секунд.
→ https://github.com/Zackriya-Solutions/meetily
@WebDev_Plus | 414 |
| 17 |  Название сайта говорит само за себя: F*ckSignups.
Это библиотека, в которой собрано более 170 open-source инструментов, работающих прямо в браузере — без регистрации, без электронной почты и без отслеживания.
Если вас раздражает необходимость регистрироваться, чтобы просто попробовать какой-либо инструмент, этот сайт определенно стоит добавить в закладки.
@WebDev_Plus | 439 |
| 18 |  Хотите убрать эффект «резиновой» прокрутки (bounce) в веб-приложении? Достаточно добавить всего одну строку CSS:
html,
body {
overscroll-behavior-y: none;
}
Свойство overscroll-behavior-y: none отключает вертикальный bounce-эффект при достижении верхней или нижней границы страницы, делая поведение веб-приложения более нативным и предсказуемым, особенно на мобильных устройствах.
@WebDev_Plus | 421 |
| 19 |  Появился новый набор готовых блоков таблиц данных для React на базе shadcn.
В состав входят фасетные фильтры, сортировка и бесконечная прокрутка, палитра команд для фильтрации по сочетанию ⌘K, поддержка хранения состояния в URL через nuqs или zustand, а также серверные хелперы для Drizzle (в документации есть пример интеграции с supabase).
Кроме того, проект включает AI-функции: фильтрацию на естественном языке и отдельный skill для AI-агентов.
Документация: http://logs.run/docs
https://github.com/openstatusHQ/data-table-filters
@WebDev_Plus | 452 |
| 20 |  Нативный <select>, который сам подстраивается под ширину выбранного варианта — в одну строчку CSS:
select {
field-sizing: content;
}
По умолчанию ширина select определяется самой длинной опцией.
field-sizing: content заставляет элемент подстраиваться под текущий выбранный вариант. Работает в Chrome 125+, Edge 125+, Safari 17.4+.
@WebDev_Plus | 455 |
