Веб-страница
Kanalga Telegram’da o‘tish
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali Веб-страница analitikasi
Веб-страница (@tproger_web) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 22 348 obunachidan iborat bo'lib, Sanʼat & Dizayn toifasida 1 352-o'rinni va Rossiya mintaqasida 29 150-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 22 348 obunachiga ega bo‘ldi.
08 Oktabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -168 ga, so‘nggi 24 soatda esa -2 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 8.97% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 5.82% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 2 006 marta ko‘riladi; birinchi sutkada odatda 1 300 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 2 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent css, javascript, html, github, браузер kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Всё по фронтенду, бэкенду и девопсу в одном месте
Разместить рекламу: @tproger_sales_bot
Правила общения: https://tprg.ru/rules
Другие каналы: @tproger_channels
Сайт: https://tprg.ru/site
Регистрация в перечне РКН: https://tprg.ru/64ai”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 09 Oktabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Sanʼat & Dizayn toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
22 348
Obunachilar
-224 soatlar
-367 kun
-16830 kun
Ma'lumot yuklanmoqda...
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Oktabr '26Okt '26
Oktabr '26
+19
2 kanalda
Sentabr '26
+54
9 kanalda
Get PRO
Avgust '26
+70
9 kanalda
Get PRO
Iyul '26
+61
10 kanalda
Get PRO
Iyun '26
+60
4 kanalda
Get PRO
May '26
+107
1 kanalda
Get PRO
Aprel '26
+46
2 kanalda
Get PRO
Mart '26
+57
3 kanalda
Get PRO
Fevral '26
+69
4 kanalda
Get PRO
Yanvar '26
+81
3 kanalda
Get PRO
Dekabr '25
+104
5 kanalda
Get PRO
Noyabr '25
+105
3 kanalda
Get PRO
Oktabr '25
+90
4 kanalda
Get PRO
Sentabr '25
+141
2 kanalda
Get PRO
Avgust '25
+107
5 kanalda
Get PRO
Iyul '25
+216
5 kanalda
Get PRO
Iyun '25
+309
9 kanalda
Get PRO
May '25
+172
5 kanalda
Get PRO
Aprel '25
+105
4 kanalda
Get PRO
Mart '25
+262
10 kanalda
Get PRO
Fevral '25
+256
8 kanalda
Get PRO
Yanvar '25
+222
5 kanalda
Get PRO
Dekabr '24
+142
6 kanalda
Get PRO
Noyabr '24
+110
4 kanalda
Get PRO
Oktabr '24
+90
4 kanalda
Get PRO
Sentabr '24
+83
4 kanalda
Get PRO
Avgust '24
+81
3 kanalda
Get PRO
Iyul '24
+134
8 kanalda
Get PRO
Iyun '24
+121
13 kanalda
Get PRO
May '24
+191
9 kanalda
Get PRO
Aprel '24
+231
6 kanalda
Get PRO
Mart '24
+277
10 kanalda
Get PRO
Fevral '24
+273
8 kanalda
Get PRO
Yanvar '24
+211
3 kanalda
Get PRO
Dekabr '23
+227
8 kanalda
Get PRO
Noyabr '23
+252
5 kanalda
Get PRO
Oktabr '23
+169
6 kanalda
Get PRO
Sentabr '23
+196
0 kanalda
Get PRO
Avgust '23
+204
0 kanalda
Get PRO
Iyul '23
+173
0 kanalda
Get PRO
Iyun '23
+310
0 kanalda
Get PRO
May '23
+219
0 kanalda
Get PRO
Aprel '23
+196
0 kanalda
Get PRO
Mart '23
+375
0 kanalda
Get PRO
Fevral '23
+258
0 kanalda
Get PRO
Yanvar '23
+517
0 kanalda
Get PRO
Dekabr '22
+336
0 kanalda
Get PRO
Noyabr '22
+321
0 kanalda
Get PRO
Oktabr '22
+475
0 kanalda
Get PRO
Sentabr '22
+467
0 kanalda
Get PRO
Avgust '22
+924
0 kanalda
Get PRO
Iyul '22
+793
0 kanalda
Get PRO
Iyun '22
+1 038
0 kanalda
Get PRO
May '22
+984
0 kanalda
Get PRO
Aprel '22
+1 455
0 kanalda
Get PRO
Mart '22
+2 145
0 kanalda
Get PRO
Fevral '22
+1 447
0 kanalda
Get PRO
Yanvar '22
+1 720
0 kanalda
Get PRO
Dekabr '21
+386
0 kanalda
Get PRO
Noyabr '21
+2 050
0 kanalda
Get PRO
Oktabr '21
+1 542
0 kanalda
Get PRO
Sentabr '21
+416
0 kanalda
Get PRO
Avgust '21
+893
0 kanalda
Get PRO
Iyul '21
+1 205
0 kanalda
Get PRO
Iyun '21
+605
0 kanalda
Get PRO
May '21
+543
0 kanalda
Get PRO
Aprel '21
+3 001
0 kanalda
Get PRO
Mart '21
+430
0 kanalda
Get PRO
Fevral '21
+703
0 kanalda
Get PRO
Yanvar '21
+304
0 kanalda
Get PRO
Dekabr '20
+16 536
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 08 Oktabr | +5 | |||
| 07 Oktabr | +2 | |||
| 06 Oktabr | 0 | |||
| 05 Oktabr | 0 | |||
| 04 Oktabr | +1 | |||
| 03 Oktabr | +3 | |||
| 02 Oktabr | +1 | |||
| 01 Oktabr | +7 |
Kanal postlari
В веб-продукте AI можно использовать для разработки, работы с интерфейсом и автоматизации пользовательских сценариев. Но для каждого варианта нужны свои проверки: где оставить привычный UI, как оценивать дизайн и на чём запускать агента?
На AI Native Conf разберём:
• «Мы открыли продукт для prompt injection, и это круто». Артем Самойлов, Сбер.
Замена GUI действующего сервиса агентным чатом и риски prompt injection.
• «Дизайн в агентном SDLC: разработку ускорили — упёрлись в дизайн». Артур Арсёнов, Looi agent.
Работа дизайна с разработкой, проверки качества и выбор между Figma и HTML-first.
• «Карта AI-инструментов разработки: от GPU до агентики, без слепых зон». Константин Волков, Veai.
Выбор моделей для кода, квантование, стоимость железа и эксплуатационные метрики.
Приходите, если выбираете, какие части веб-продукта и разработки готовы передать агентам.
Москва и онлайн, подробности на сайте
#реклама
О рекламодателе
| 2 |  Как измерить медленный переход внутри SPA в Chrome DevTools
Первый экран может загружаться быстро, а переход в каталог зависать на секунды. При клиентской навигации документ не перезагружается, поэтому запись одного холодного старта не покажет весь сценарий.
В сентябрьском обновлении Chrome анализ soft navigation появился в Insights панели Performance. Теперь такие переходы можно разбирать вместе с уже доступными метриками и временной шкалой. Запишите переход от клика до нового экрана и посмотрите, какие задачи и загрузки приходятся на этот участок.
Для повторяемых замеров через Chrome DevTools Protocol добавили калиброванные уровни производительности CPU. Это пригодится при автоматизации: один и тот же сценарий можно сравнивать с одинаковыми настройками процессора, не ограничиваясь результатом на рабочем ноутбуке. | 983 |
| 3 |  Как спрятать декор, когда он начинает перекрывать контент
Картинка рядом с карточками меняет размер и положение вместе с контейнером. Фиксированный брейкпоинт не всегда попадёт в момент, когда между ними закончится место. Ахмад Шадид показал, как привязать скрытие к реальному расстоянию средствами CSS.
Через anchor positioning он растягивает вспомогательный элемент между краями декора и секции. Внутри лежит псевдоэлемент шириной 20 px: когда зазор становится меньше, появляется переполнение. Scroll timeline переключает CSS-переменную, а style container query убирает декор. Пользователю ничего прокручивать не нужно.
Приём требует поддержки anchor positioning, scroll-driven animations и запросов к стилям контейнера. Для проекта я бы оставил безопасную базовую вёрстку, а такое поведение добавил как улучшение. | 1 106 |
| 4 |  Next.js перестал обновлять серверный код для страниц, которые вы уже закрыли
В большом проекте изменение общего серверного модуля могло запускать обновления маршрутов, открытых раньше в этой сессии. В Next.js 16.4 Turbopack компилирует и применяет такие изменения, когда они понадобятся запросу. Текущая страница обновляется сразу, остальные ждут следующего обращения.
Для клиентских динамических импортов появился отдельный эксперимент: experimental.turbopackLazyDynamicImports: true. Код библиотеки, загружаемой через import() по нажатию кнопки, можно компилировать только при запросе из браузера. Это сокращает работу при старте разработки.
Начать стоит с сравнения запуска dev-сервера и первого открытия тяжёлого экрана. Часть работы переносится на момент обращения к коду, поэтому быстрый старт нужно оценивать вместе с задержкой первого использования. | 1 318 |
| 5 |  Как не потерять языковые страницы из-за слеша в URL
Китайские страницы сайта исчезли из поиска, хотя канонические адреса указывали на них правильно. Причиной оказалось расхождение в одном символе: в canonical стоял завершающий слеш, а в sitemap его не было. Cloudflare дополнительно переписывал адреса, поэтому Google объединял китайскую страницу с английской. После синхронизации URL число ошибок в Search Console упало до нуля примерно за три дня. Весь разбор сбоя и исправления пригодится при запуске многоязычного сайта.
Перед релизом сравните canonical, перекрёстные ссылки hreflang и записи sitemap посимвольно: регистр, завершающий слеш и обработка параметров запроса должны совпадать. Затем проверьте правила нормализации URL в Cloudflare и плагинах, которые меняют атрибуты href. Такую сверку лучше добавить в сборку и останавливать её при первом расхождении. | 1 412 |
| 6 |  Как собирать демо продукта на React вместо записи экрана
Remotion превращает видео в React-композицию: useCurrentFrame() задаёт текущий кадр, interpolate() меняет значения по ходу ролика, а Sequence размещает сцены на временной шкале. Результат рендерится в MP4 через Chrome без интерфейса и FFmpeg.
В разборе рабочего процесса с Remotion интерфейс пришлось отделить от состояния: компоненты получают данные через props, а действия пользователя заменяет сценарий с номерами кадров. Начальная настройка заняла около 85 минут, зато следующие ролики используют те же компоненты, тестовые данные и временную шкалу.
Такой подход пригодится для повторяемых обзоров функций и списков изменений: обновляете объект с данными, запускаете npx remotion render и получаете новый ролик без повторной записи кликов. | 1 378 |
| 7 |  В Safari Technology Preview 253 исправили повторное озвучивание текста
В Safari Technology Preview 253 исправили сбой: VoiceOver мог снова и снова произносить одно и то же содержимое live region, пока текст поступал на страницу. Такие области используют aria-live, чтобы скринридер сообщал об обновлениях без перевода фокуса, например в ответах веб-чата.
Исправление доступно только в тестовой сборке для macOS Golden Gate и macOS Tahoe. Переносить результат на стабильный Safari пока нельзя.
Если поддерживаете чат или другой интерфейс с потоковым текстом, сравните одну и ту же область aria-live в стабильном Safari и Technology Preview с VoiceOver. Так можно проверить, исчезли ли повторы и не потерялись ли новые фрагменты ответа. | 1 322 |
| 8 |  Как связать TanStack Router и Query для загрузки данных до рендера
Если одни и те же данные нужны на нескольких маршрутах React-приложения, кэша отдельного маршрута может быть недостаточно: загрузка остаётся привязана к странице, а результат сложнее переиспользовать.
Связка разделяет обязанности. loader вызывает ensureQueryData до рендера и заранее заполняет общий кэш TanStack Query. Компонент читает подготовленные данные через useSuspenseQuery. Маршрут определяет момент загрузки, Query хранит результат, а компонент занимается отображением.
Практическую схему интеграции Router и Query стоит открыть, когда один запрос обслуживает несколько экранов и загрузку нужно отделить от рендера. | 1 392 |
| 9 |  Как отменять устаревшие fetch-запросы в автодополнении
Быстрый ввод запускает несколько запросов. Если ранний ответ придёт позже нового, он перезапишет актуальную выдачу. AbortController убирает эту гонку: его signal передают в fetch, а перед следующим запросом вызывают abort() у предыдущего контроллера.
В React схему можно собрать в useEffect: поставить задержку на 250 мс, после паузы отправить запрос, а при очистке эффекта сбросить таймер и отменить запрос. Задержка сокращает число обращений, отмена не даёт запоздавшему ответу дойти до отрисовки. AbortError при этом обрабатывают отдельно от остальных ошибок.
Я сохранил себе ключевое ограничение: отменённый контроллер одноразовый, для следующего запроса нужен новый. Проверить весь сценарий можно на демо автодополнения с готовым кодом. | 1 405 |
| 10 |  Как управлять каскадом CSS через @layer и :where()
В большом проекте порядок стилей можно зафиксировать прямо в CSS: @layer reset, base, components, utilities;. Обычное правило из более позднего слоя победит правило из раннего независимо от специфичности. Поэтому утилита сможет переопределить стиль компонента без усложнения селектора и добавления !important.
Для базовых правил пригодится :where(): он выбирает элементы, но не повышает специфичность. Например, обёртка :where(nav a) оставит ссылкам нулевой вес селектора, и компонент легко задаст собственное оформление.
При внедрении сначала разложите reset, базу, компоненты и утилиты по слоям. Затем проверьте два исключения: обычные правила вне слоёв сильнее правил внутри них, а для !important порядок слоёв разворачивается. Примеры современного CSS без сборки помогут сверить схему на рабочем коде. | 1 396 |
| 11 | Как читать падение доли сайтов с хорошим INP в CrUX
В августе 2026 года доля сайтов с хорошим INP снизилась с 85,7% до 85,3%. С марта показатель упал с 87,2%, но Chrome пока не объяснил причину.
CrUX считает скользящее среднее за 28 дней по данным пользователей Chrome. В августовской выборке сайтов стало на 1,3% больше, поэтому общий спад не доказывает проблему конкретного проекта.
Если ваш INP ухудшился, сравните страницы, действия, устройства, браузеры и релизы. Затем проверьте размер и состав выборки, а не только 75-й перцентиль. | 1 395 |
| 12 |  В Streamux реализовали HTTP/2-сервер на Go по RFC 9113
Разработчик собрал сервер с обработкой кадров, HPACK-сжатием заголовков, состояниями потоков, управлением потоком и обязательным TLS. Реализация проходит 145 из 146 тестов h2spec. Так можно заглянуть в транспортный слой, который веб-фреймворки обычно скрывают за API.
Отдельная находка — планировщик приоритетов из RFC 9218. Браузеры передают для запросов приоритет u=N, а Streamux распределяет пропускную способность между уровнями срочности: навигация и главное изображение получают её раньше аналитических пикселей. В тесте с 50 одновременными потоками и окном 16 КиБ передача завершилась на 40% быстрее обычного кругового обхода.
Разбор Streamux пригодится, если хотите понять, как HTTP/2 выбирает следующий поток, и посмотреть реализацию без слоя фреймворка. | 1 411 |
| 13 |  Как замечать проблемы доступности ещё на этапе макета
Даже аккуратный интерфейс исключает людей, если текст нельзя увеличить, контент лишён субтитров, а навигация не имеет предсказуемого шаблона. Держать все требования в памяти трудно, поэтому автор предлагает проверять дизайн через персон с конкретными ограничениями.
На ревью назначьте «несогласного». Этот участник должен спросить, сможет ли человек со слабым зрением настроить экран, пользователь с аутизмом освоить повторяющийся шаблон, а глухой пользователь понять контент. Найденные барьеры затем сверяют с WCAG 2.2 или правилами нужной платформы.
Готовые персоны и схема проверки помогают встроить доступность в обсуждение каждого макета, а не вспоминать о ней отдельно. | 1 445 |
| 14 | Отложили видео, а потом вернулись к нему. Вспомните последний такой просмотр: с какого места вы продолжили? | 1 464 |
| 15 |  Как хранить прогресс просмотра в веб-плеере без бэкенда
В разборе личного проекта HikariPlay Bhaumic Singh показывает, как сделал «Продолжить просмотр» для плеера на Svelte 5, SvelteKit и TypeScript. Позиция видео хранится в localStorage, поэтому аккаунт и запись данных на сервер не нужны.
Плеер сохраняет текущую секунду при паузе, скрытии вкладки и перед закрытием страницы. При следующем открытии он читает значение и перематывает видео к месту остановки. Индикатор продолжения появляется, только если прошло больше 5 секунд, но просмотрено меньше 95%: почти законченные титры не предлагают возобновлять.
Подход пригодится для локального медиаплеера или небольшого веб-приложения, где достаточно памяти одного браузера. Между устройствами прогресс не синхронизируется. Плеер помнит секунду остановки, хотя после перерыва зрителю может понадобиться другой фрагмент. | 1 416 |
| 16 |  Когда маркетплейсу хватает Vanilla JavaScript и PWA
Школьный маркетплейс Aksara-Mart собрали без React и Next.js под конкретные ограничения: у 65% учеников телефоны с 2–3 ГБ оперативной памяти, школьный Wi-Fi перегружен, а перемена длится 15 минут.
Интерфейс на JavaScript и CSS весит меньше 48 КБ в сжатом виде. Состояние корзины хранится в localStorage, один обработчик на контейнере принимает клики со всех карточек, а сервис-воркер отдаёт статические файлы из локального кеша. Запросы к базе он пропускает в сеть.
Перед выбором фреймворка для небольшого приложения проверьте слабейшие устройства и сеть аудитории. Затем оцените, хватит ли хранилища состояния, делегирования событий и кеширования: такой тест покажет, оправдывает ли фреймворк свой вес. | 1 453 |
| 17 |  Как настроить GoatCounter и отсеять ботов от живых читателей
Серверные логи показывали около 2000 посетителей в день, хотя GoatCounter после фильтрации насчитал меньше 200 человек. Причина разрыва: ИИ-скрейперы маскируют user agent и выходят через домашние прокси.
Схема фильтрации засчитывает просмотр только после движения мыши, касания экрана, нажатия клавиши или указателя. Для браузеров без JavaScript запрос отправляет CSS при наведении. Это отсекает роботов, которые загружают страницу, но не взаимодействуют с ней.
Я сохранил разбор как основу для собственной аналитики: GoatCounter не хранит IP-адреса и cookies, а локальный прокси на каждом из пяти серверов держит события в памяти при сбое основного узла и затем отправляет их пакетами. Конфигурации NixOS показывают, как развернуть сервер, прокси и резервное копирование SQLite. | 1 377 |
| 18 |  Где проверять авторизацию в 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 375 |
| 19 | Атрибут maxlength на форме сброса пароля ломал авторизацию клиенту Vanguard
Разработчик Танин Нанакорн год не мог войти в аккаунт брокера Vanguard через браузер: он несколько раз за год сбрасывал пароль и заходил по QR-коду с телефона, пока не изучил верстку страницы сброса.
В форме стоял атрибут maxlength="20". Менеджер паролей генерировал ключ длиннее 20 символов, а Chrome при вставке в оба поля молча обрезал его до 20 знаков. Форма сброса принимала обрезанную строку, и новым паролем стала обрезанная строка.
На странице же входа maxlength отсутствовал: туда вставлялась полная строка, которую сервер отклонял. Использовать maxlength на паролях опасно: проверять длину нужно в JS или на бэкенде с сообщением об ошибке, а не срезать хвост ввода в браузере.
@tproger_web | 1 500 |
| 20 |  Как собрать субтитры с точными таймингами и читаемыми строками
Дмитрий Лукьянов создал Language Dove для изучения языков по фильмам. В разборе пайплайна видео проходит путь от распознавания речи до веб-страницы с плеером и оверлеем субтитров.
Локальная VAD-модель определяет участки с речью, а громкость остальных участков подавляется. Затем каскад моделей распознаёт текст. Исправленный транскрипт сопоставляется с аудио, чтобы получить тайминг каждого слова. Алгоритм делит текст на строки по паузам, знакам препинания и смене говорящего, избегая слишком коротких строк. В интерфейсе можно менять размер, вертикальную позицию и состав текста.
Для веб-разработчика это цельный пример: качество субтитров зависит и от обработки аудио, и от правил интерфейса. Особенно когда видео смотрят без звука. | 1 375 |
