Веб-страница
رفتن به کانال در Telegram
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
نمایش بیشتر
شبکه:📈 تحلیل کانال تلگرام Веб-страница
کانال Веб-страница (@tproger_web) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 22 356 مشترک است و جایگاه 1 355 را در دسته هنر و طراحی و رتبه 29 131 را در منطقه روسيا دارد.
📊 شاخص‌های مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 22 356 مشترک جذب کرده است.
بر اساس آخرین داده‌ها در تاریخ 05 اکتبر, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر -173 و در ۲۴ ساعت گذشته برابر -5 بوده و همچنان دسترسی گسترده‌ای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 9.12% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 5.92% واکنش نسبت به کل مشترکان کسب می‌کند.
- دسترسی پست‌ها: هر پست به طور میانگین 2 039 بازدید دریافت می‌کند. در اولین روز معمولاً 1 323 بازدید جمع‌آوری می‌شود.
- واکنش‌ها و تعامل: مخاطبان به‌طور فعال حمایت می‌کنند؛ میانگین واکنش به هر پست 2 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند css, javascript, html, github, браузер تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاه‌های شخصی توصیف می‌کند:
“Всё по фронтенду, бэкенду и девопсу в одном месте
Разместить рекламу: @tproger_sales_bot
Правила общения: https://tprg.ru/rules
Другие каналы: @tproger_channels
Сайт: https://tprg.ru/site
Регистрация в перечне РКН: https://tprg.ru/64ai”
به لطف به‌روزرسانی‌های پرتکرار (آخرین داده در تاریخ 06 اکتبر, 2026)، کانال همواره به‌روز و دارای دسترسی بالاست. تحلیل‌ها نشان می‌دهد مخاطبان به‌طور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته هنر و طراحی تبدیل کرده‌اند.
22 356
مشترکین
-524 ساعت
-397 روز
-17330 روز
در حال بارگیری داده...
کانال‌های مشابه
ابر برچسب‌ها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اکتبر '26اکتبر '26
اکتبر '26
+12
در 2 کانال‌ها
سپتامبر '26
+54
در 9 کانال‌ها
Get PRO
اوت '26
+70
در 9 کانال‌ها
Get PRO
ژوئیه '26
+61
در 10 کانال‌ها
Get PRO
ژوئن '26
+60
در 4 کانال‌ها
Get PRO
مه '26
+107
در 1 کانال‌ها
Get PRO
آوریل '26
+46
در 2 کانال‌ها
Get PRO
مارس '26
+57
در 3 کانال‌ها
Get PRO
فوریه '26
+69
در 4 کانال‌ها
Get PRO
ژانویه '26
+81
در 3 کانال‌ها
Get PRO
دسامبر '25
+104
در 5 کانال‌ها
Get PRO
نوامبر '25
+105
در 3 کانال‌ها
Get PRO
اکتبر '25
+90
در 4 کانال‌ها
Get PRO
سپتامبر '25
+141
در 2 کانال‌ها
Get PRO
اوت '25
+107
در 5 کانال‌ها
Get PRO
ژوئیه '25
+216
در 5 کانال‌ها
Get PRO
ژوئن '25
+309
در 9 کانال‌ها
Get PRO
مه '25
+172
در 5 کانال‌ها
Get PRO
آوریل '25
+105
در 4 کانال‌ها
Get PRO
مارس '25
+262
در 10 کانال‌ها
Get PRO
فوریه '25
+256
در 8 کانال‌ها
Get PRO
ژانویه '25
+222
در 5 کانال‌ها
Get PRO
دسامبر '24
+142
در 6 کانال‌ها
Get PRO
نوامبر '24
+110
در 4 کانال‌ها
Get PRO
اکتبر '24
+90
در 4 کانال‌ها
Get PRO
سپتامبر '24
+83
در 4 کانال‌ها
Get PRO
اوت '24
+81
در 3 کانال‌ها
Get PRO
ژوئیه '24
+134
در 8 کانال‌ها
Get PRO
ژوئن '24
+121
در 13 کانال‌ها
Get PRO
مه '24
+191
در 9 کانال‌ها
Get PRO
آوریل '24
+231
در 6 کانال‌ها
Get PRO
مارس '24
+277
در 10 کانال‌ها
Get PRO
فوریه '24
+273
در 8 کانال‌ها
Get PRO
ژانویه '24
+211
در 3 کانال‌ها
Get PRO
دسامبر '23
+227
در 8 کانال‌ها
Get PRO
نوامبر '23
+252
در 5 کانال‌ها
Get PRO
اکتبر '23
+169
در 6 کانال‌ها
Get PRO
سپتامبر '23
+196
در 0 کانال‌ها
Get PRO
اوت '23
+204
در 0 کانال‌ها
Get PRO
ژوئیه '23
+173
در 0 کانال‌ها
Get PRO
ژوئن '23
+310
در 0 کانال‌ها
Get PRO
مه '23
+219
در 0 کانال‌ها
Get PRO
آوریل '23
+196
در 0 کانال‌ها
Get PRO
مارس '23
+375
در 0 کانال‌ها
Get PRO
فوریه '23
+258
در 0 کانال‌ها
Get PRO
ژانویه '23
+517
در 0 کانال‌ها
Get PRO
دسامبر '22
+336
در 0 کانال‌ها
Get PRO
نوامبر '22
+321
در 0 کانال‌ها
Get PRO
اکتبر '22
+475
در 0 کانال‌ها
Get PRO
سپتامبر '22
+467
در 0 کانال‌ها
Get PRO
اوت '22
+924
در 0 کانال‌ها
Get PRO
ژوئیه '22
+793
در 0 کانال‌ها
Get PRO
ژوئن '22
+1 038
در 0 کانال‌ها
Get PRO
مه '22
+984
در 0 کانال‌ها
Get PRO
آوریل '22
+1 455
در 0 کانال‌ها
Get PRO
مارس '22
+2 145
در 0 کانال‌ها
Get PRO
فوریه '22
+1 447
در 0 کانال‌ها
Get PRO
ژانویه '22
+1 720
در 0 کانال‌ها
Get PRO
دسامبر '21
+386
در 0 کانال‌ها
Get PRO
نوامبر '21
+2 050
در 0 کانال‌ها
Get PRO
اکتبر '21
+1 542
در 0 کانال‌ها
Get PRO
سپتامبر '21
+416
در 0 کانال‌ها
Get PRO
اوت '21
+893
در 0 کانال‌ها
Get PRO
ژوئیه '21
+1 205
در 0 کانال‌ها
Get PRO
ژوئن '21
+605
در 0 کانال‌ها
Get PRO
مه '21
+543
در 0 کانال‌ها
Get PRO
آوریل '21
+3 001
در 0 کانال‌ها
Get PRO
مارس '21
+430
در 0 کانال‌ها
Get PRO
فوریه '21
+703
در 0 کانال‌ها
Get PRO
ژانویه '21
+304
در 0 کانال‌ها
Get PRO
دسامبر '20
+16 536
در 0 کانال‌ها
| تاریخ | رشد مشترکین | اشارات | کانال‌ها | |
| 06 اکتبر | 0 | |||
| 05 اکتبر | 0 | |||
| 04 اکتبر | +1 | |||
| 03 اکتبر | +3 | |||
| 02 اکتبر | +1 | |||
| 01 اکتبر | +7 |
پست‌های کانال
Как связать TanStack Router и Query для загрузки данных до рендера
Если одни и те же данные нужны на нескольких маршрутах React-приложения, кэша отдельного маршрута может быть недостаточно: загрузка остаётся привязана к странице, а результат сложнее переиспользовать.
Связка разделяет обязанности.
loader вызывает ensureQueryData до рендера и заранее заполняет общий кэш TanStack Query. Компонент читает подготовленные данные через useSuspenseQuery. Маршрут определяет момент загрузки, Query хранит результат, а компонент занимается отображением.
Практическую схему интеграции Router и Query стоит открыть, когда один запрос обслуживает несколько экранов и загрузку нужно отделить от рендера.| 2 |  Как отменять устаревшие fetch-запросы в автодополнении
Быстрый ввод запускает несколько запросов. Если ранний ответ придёт позже нового, он перезапишет актуальную выдачу. AbortController убирает эту гонку: его signal передают в fetch, а перед следующим запросом вызывают abort() у предыдущего контроллера.
В React схему можно собрать в useEffect: поставить задержку на 250 мс, после паузы отправить запрос, а при очистке эффекта сбросить таймер и отменить запрос. Задержка сокращает число обращений, отмена не даёт запоздавшему ответу дойти до отрисовки. AbortError при этом обрабатывают отдельно от остальных ошибок.
Я сохранил себе ключевое ограничение: отменённый контроллер одноразовый, для следующего запроса нужен новый. Проверить весь сценарий можно на демо автодополнения с готовым кодом. | 1 083 |
| 3 |  Как управлять каскадом CSS через @layer и :where()
В большом проекте порядок стилей можно зафиксировать прямо в CSS: @layer reset, base, components, utilities;. Обычное правило из более позднего слоя победит правило из раннего независимо от специфичности. Поэтому утилита сможет переопределить стиль компонента без усложнения селектора и добавления !important.
Для базовых правил пригодится :where(): он выбирает элементы, но не повышает специфичность. Например, обёртка :where(nav a) оставит ссылкам нулевой вес селектора, и компонент легко задаст собственное оформление.
При внедрении сначала разложите reset, базу, компоненты и утилиты по слоям. Затем проверьте два исключения: обычные правила вне слоёв сильнее правил внутри них, а для !important порядок слоёв разворачивается. Примеры современного CSS без сборки помогут сверить схему на рабочем коде. | 1 139 |
| 4 | Как читать падение доли сайтов с хорошим INP в CrUX
В августе 2026 года доля сайтов с хорошим INP снизилась с 85,7% до 85,3%. С марта показатель упал с 87,2%, но Chrome пока не объяснил причину.
CrUX считает скользящее среднее за 28 дней по данным пользователей Chrome. В августовской выборке сайтов стало на 1,3% больше, поэтому общий спад не доказывает проблему конкретного проекта.
Если ваш INP ухудшился, сравните страницы, действия, устройства, браузеры и релизы. Затем проверьте размер и состав выборки, а не только 75-й перцентиль. | 1 221 |
| 5 |  В Streamux реализовали HTTP/2-сервер на Go по RFC 9113
Разработчик собрал сервер с обработкой кадров, HPACK-сжатием заголовков, состояниями потоков, управлением потоком и обязательным TLS. Реализация проходит 145 из 146 тестов h2spec. Так можно заглянуть в транспортный слой, который веб-фреймворки обычно скрывают за API.
Отдельная находка — планировщик приоритетов из RFC 9218. Браузеры передают для запросов приоритет u=N, а Streamux распределяет пропускную способность между уровнями срочности: навигация и главное изображение получают её раньше аналитических пикселей. В тесте с 50 одновременными потоками и окном 16 КиБ передача завершилась на 40% быстрее обычного кругового обхода.
Разбор Streamux пригодится, если хотите понять, как HTTP/2 выбирает следующий поток, и посмотреть реализацию без слоя фреймворка. | 1 247 |
| 6 |  Как замечать проблемы доступности ещё на этапе макета
Даже аккуратный интерфейс исключает людей, если текст нельзя увеличить, контент лишён субтитров, а навигация не имеет предсказуемого шаблона. Держать все требования в памяти трудно, поэтому автор предлагает проверять дизайн через персон с конкретными ограничениями.
На ревью назначьте «несогласного». Этот участник должен спросить, сможет ли человек со слабым зрением настроить экран, пользователь с аутизмом освоить повторяющийся шаблон, а глухой пользователь понять контент. Найденные барьеры затем сверяют с WCAG 2.2 или правилами нужной платформы.
Готовые персоны и схема проверки помогают встроить доступность в обсуждение каждого макета, а не вспоминать о ней отдельно. | 1 231 |
| 7 | Отложили видео, а потом вернулись к нему. Вспомните последний такой просмотр: с какого места вы продолжили? | 1 267 |
| 8 |  Как хранить прогресс просмотра в веб-плеере без бэкенда
В разборе личного проекта HikariPlay Bhaumic Singh показывает, как сделал «Продолжить просмотр» для плеера на Svelte 5, SvelteKit и TypeScript. Позиция видео хранится в localStorage, поэтому аккаунт и запись данных на сервер не нужны.
Плеер сохраняет текущую секунду при паузе, скрытии вкладки и перед закрытием страницы. При следующем открытии он читает значение и перематывает видео к месту остановки. Индикатор продолжения появляется, только если прошло больше 5 секунд, но просмотрено меньше 95%: почти законченные титры не предлагают возобновлять.
Подход пригодится для локального медиаплеера или небольшого веб-приложения, где достаточно памяти одного браузера. Между устройствами прогресс не синхронизируется. Плеер помнит секунду остановки, хотя после перерыва зрителю может понадобиться другой фрагмент. | 1 196 |
| 9 |  Когда маркетплейсу хватает Vanilla JavaScript и PWA
Школьный маркетплейс Aksara-Mart собрали без React и Next.js под конкретные ограничения: у 65% учеников телефоны с 2–3 ГБ оперативной памяти, школьный Wi-Fi перегружен, а перемена длится 15 минут.
Интерфейс на JavaScript и CSS весит меньше 48 КБ в сжатом виде. Состояние корзины хранится в localStorage, один обработчик на контейнере принимает клики со всех карточек, а сервис-воркер отдаёт статические файлы из локального кеша. Запросы к базе он пропускает в сеть.
Перед выбором фреймворка для небольшого приложения проверьте слабейшие устройства и сеть аудитории. Затем оцените, хватит ли хранилища состояния, делегирования событий и кеширования: такой тест покажет, оправдывает ли фреймворк свой вес. | 1 191 |
| 10 |  Как настроить GoatCounter и отсеять ботов от живых читателей
Серверные логи показывали около 2000 посетителей в день, хотя GoatCounter после фильтрации насчитал меньше 200 человек. Причина разрыва: ИИ-скрейперы маскируют user agent и выходят через домашние прокси.
Схема фильтрации засчитывает просмотр только после движения мыши, касания экрана, нажатия клавиши или указателя. Для браузеров без JavaScript запрос отправляет CSS при наведении. Это отсекает роботов, которые загружают страницу, но не взаимодействуют с ней.
Я сохранил разбор как основу для собственной аналитики: GoatCounter не хранит IP-адреса и cookies, а локальный прокси на каждом из пяти серверов держит события в памяти при сбое основного узла и затем отправляет их пакетами. Конфигурации NixOS показывают, как развернуть сервер, прокси и резервное копирование SQLite. | 1 183 |
| 11 |  Где проверять авторизацию в Next.js, чтобы не перегружать Middleware
Проверка роли пользователя через базу прямо в Middleware выглядит логично, но выполняется на каждом совпавшем запросе: при переходе по странице, загрузке данных React Server Components и фоновой ревалидации. Один клик может породить несколько обращений к базе, а неверная настройка matcher добавит запросы к статическим файлам.
Рабочее разделение: в Middleware без базы проверить наличие и подпись JWT через jose и Web Crypto API, а роли, отзыв сессии и профиль проверять в Server Components, Route Handlers или Server Actions. Там доступны полный Node.js runtime, драйверы баз данных и пулы соединений.
Я сохранил схему двухуровневой авторизации как чеклист для ревью Next.js-проекта: проверить matcher, найти обращения к базе в middleware.js и перенести проверки с состоянием на сервер. | 1 192 |
| 12 | Атрибут maxlength на форме сброса пароля ломал авторизацию клиенту Vanguard
Разработчик Танин Нанакорн год не мог войти в аккаунт брокера Vanguard через браузер: он несколько раз за год сбрасывал пароль и заходил по QR-коду с телефона, пока не изучил верстку страницы сброса.
В форме стоял атрибут maxlength="20". Менеджер паролей генерировал ключ длиннее 20 символов, а Chrome при вставке в оба поля молча обрезал его до 20 знаков. Форма сброса принимала обрезанную строку, и новым паролем стала обрезанная строка.
На странице же входа maxlength отсутствовал: туда вставлялась полная строка, которую сервер отклонял. Использовать maxlength на паролях опасно: проверять длину нужно в JS или на бэкенде с сообщением об ошибке, а не срезать хвост ввода в браузере.
@tproger_web | 1 269 |
| 13 |  Как собрать субтитры с точными таймингами и читаемыми строками
Дмитрий Лукьянов создал Language Dove для изучения языков по фильмам. В разборе пайплайна видео проходит путь от распознавания речи до веб-страницы с плеером и оверлеем субтитров.
Локальная VAD-модель определяет участки с речью, а громкость остальных участков подавляется. Затем каскад моделей распознаёт текст. Исправленный транскрипт сопоставляется с аудио, чтобы получить тайминг каждого слова. Алгоритм делит текст на строки по паузам, знакам препинания и смене говорящего, избегая слишком коротких строк. В интерфейсе можно менять размер, вертикальную позицию и состав текста.
Для веб-разработчика это цельный пример: качество субтитров зависит и от обработки аудио, и от правил интерфейса. Особенно когда видео смотрят без звука. | 1 248 |
| 14 | Вспомните последнее видео, которое смотрели на телефоне, когда рядом были другие люди. Как вы его слушали? | 1 156 |
| 15 |  Как поручить ИИ миграцию сайта и не потерять 400 страниц
Сайт с сотнями маршрутов, формами, редиректами и старым кодом автор перенёс на Astro за две недели. Он запускал не больше двух агентов параллельно, чтобы проверять результат до размножения ошибок.
Требование сохранить возможности превратили в контракт: какие адреса, метаданные, изображения и формы должны работать. Рискованный перенос контента сначала проверили на прототипе. Затем конвертер переводил известные конструкции в MDX по правилам, а на незнакомых останавливался.
В разборе миграции полезен сам метод: дробить работу на задачи с критериями приёмки и оставлять продуктовые решения человеку. | 6 607 |
| 16 |  Как защитить веб-API от повторных операций с помощью идемпотентности и Outbox
Таймаут не сообщает клиенту, успел ли сервер провести платёж. Повторный POST может списать деньги ещё раз, поэтому одна логическая операция должна приходить с одним ключом идемпотентности. Сервер атомарно резервирует ключ и сохраняет слепок запроса вместе с ответом.
Проверка «сначала найти, потом записать» оставляет гонку: два запроса одновременно не увидят ключ. Нужны уникальный индекс или условная запись. Для базы и очереди помогает Outbox: бизнес-запись и событие попадают в одну транзакцию, а отдельный процесс отправляет событие в очередь.
Я сохранил разбор идемпотентных API и Outbox как чек-лист для POST-ручек: проверить атомарное резервирование, возврат прежнего ответа и тест с полусотней одновременных запросов. | 1 238 |
| 17 |  Как перестать отдавать браузеру лишние мегабайты картинок
Начните не с AVIF или WebP, а с размеров. Фото 6000×4000 в карточке шириной 1200 CSS-пикселей передаёт в 25 раз больше пикселей, чем нужно обычному экрану. Уменьшение до отображаемого размера сократило тестовый файл с 4,7 до 1,1 МБ без потери качества. Для плотных экранов подготовьте варианты в srcset, нужный выберет браузер.
Затем выбирайте формат: WebP или AVIF для фото, PNG либо WebP без потерь для скриншотов, SVG для логотипов. AVIF в тесте занял 210 КБ против 420 КБ у JPEG при сопоставимом качестве, но кодировался примерно в 15 раз дольше. Его стоит генерировать на сборке, а не при каждом запросе.
Чеклист оптимизации пригодится перед настройкой обработки изображений: сначала проверьте размеры, затем формат, качество и метаданные. | 1 294 |
| 18 |  Даже если вы не девопс, рано или поздно придётся разбираться, где и как крутится ваше приложение. Собрали материалы про Kubernetes, обновления и стратегии деплоя простым языком.
Deckhouse Conf 2026: зачем инженерам самописный SDN и виртуалки в Kubernetes
Kubernetes на практике: гайды и малоизвестные Open Source-инструменты
Как обновиться на Kubernetes 1.37 и не уронить прод
Стратегии деплоя, которые не роняют прод | 1 365 |
| 19 | Во время видео переключились с Wi-Fi на мобильный интернет. Вспомните последний такой случай: что вы первым делом сделали с качеством изображения? | 1 393 |
| 20 |  Как плеер меняет качество при переходе с Wi-Fi на мобильную сеть
Плееру не обязательно перезапускать ролик, когда соединение меняется. berzzWrites строит упрощённую видеоплатформу на Go и в разборе адаптивного битрейта показывает, как переключать качество между соседними сегментами.
Платформа заранее готовит версии ролика с разными разрешением и битрейтом, режет каждую на короткие фрагменты и создаёт для неё манифест со списком сегментов. Плеер следит за скоростью загрузки, задержкой, запасом видео в буфере и производительностью устройства. Следующим он может запросить сегмент уже другого качества, поэтому воспроизведение не начинается заново.
Такой разбор пригодится, чтобы разнести по архитектуре обработку загрузки, хранение сегментов и логику плеера. Автоматика выбирает следующий фрагмент сама, но зритель всё равно может решить, менять ли качество вручную. | 1 389 |
