Веб-страница
Open in Telegram
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
Show more
Network:📈 Analytical overview of Telegram channel Веб-страница
Channel Веб-страница (@tproger_web) in the Russian language segment is an active participant. Currently, the community unites 22 611 subscribers, ranking 1 343 in the Art & Design category and 29 214 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 22 611 subscribers.
According to the latest data from 25 August, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -150 over the last 30 days and by -6 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 11.63%. Within the first 24 hours after publication, content typically collects 6.64% reactions from the total number of subscribers.
- Post reach: On average, each post receives 2 631 views. Within the first day, a publication typically gains 1 501 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 7.
- Thematic interests: Content is focused on key topics such as css, javascript, html, github, браузер.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“Всё по фронтенду, бэкенду и девопсу в одном месте
Разместить рекламу: @tproger_sales_bot
Правила общения: https://tprg.ru/rules
Другие каналы: @tproger_channels
Сайт: https://tprg.ru/site
Регистрация в перечне РКН: https://tprg.ru/64ai”
Thanks to the high frequency of updates (latest data received on 26 August, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Art & Design category.
22 611
Subscribers
-624 hours
-167 days
-15030 days
Posts Archive
22 609
Что делать, если участники команды видят только свой участок работы, десятиминутный дейли незаметно растягивается на час, а стопперы всплывают слишком поздно, чтобы успеть на них среагировать? В статье смотрим на работу команды и путь задач от бэклога до релиза, и думаем какие коммуникации действительно нужны в этом процессе.
Отдельно о том, что именно должен проверить разработчик перед первым коммитом и как устроены quality gates перед выпуском версии в прод.
22 609
Вместо списка из .btn-primary, .btn-secondary и .btn-danger в CSS появится один .btn-*
Чтобы задать общий стиль всем кнопкам, сегодня приходится перечислять классы через запятую или вешать в разметку лишний общий класс. На августовской встрече рабочей группы CSS в Берлине приняли Class Prefix Selector:
.btn-* цепляет любой класс, начинающийся с этого префикса. Идею предложила Лея Веру ещё в 2024 году.
Но радоваться рано: фича живёт только в тексте спецификации, ни один браузер её пока не умеет, и до реализации синтаксис ещё поменяется.
#css22 609
Один Vue-фронтенд для десктоп, Android и веб
Одна кодовая база, а на выходе программа для Windows, macOS и Linux, сборка для Android и обычный сайт. Так автор и собрал клиент Reddit: Tauri заворачивает фронтенд в десктоп, Capacitor в Android, а он же открывается как сайт.
За таким решением прячутся четыре счёта. Собрать .msi на маке не выйдет: Tauri опирается на нативный тулчейн каждой системы. На старых Windows программа может открыться белым окном. Дефолтный release-бинарник Rust выходит толстым. А с авторизацией вышла отдельная боль: в браузере OAuth возвращает пользователя на callback-адрес, а в упакованном виде отвечать по нему некому.
Подробности на dev.to.
22 609
Repost from Типичный программист
Делаем из плоского фото 3D-сцену со светом и тенями
В новом туториале Codrops Dominik Fojcik показывает, как обычное 2D-изображение начинает отбрасывать настоящие тени: без 3D-модели, одной текстурой. Берёте картинку, генерируете карту глубины и пропускаете свет через WebGPU-шейдер в Three.js.
Фишка в том, что готовые карты глубины обычно 8-битные, всего 256 градаций, и на гладких поверхностях свет ловит ступеньки. Автор же разбирает, как конвертировать карту в float, слегка размыть и сохранить в half-float, чтобы шум исчез.
Работает пока только где есть WebGPU. Пошаговый туториал на Codrops.
22 609
Он не был в отпуске с того самого релиза, который «вот-вот стабилизируется». Пришло время отправить Типичного Программиста в отпуск!
В новой мини-игре нужно откопать разработчика, найти билет, сложить чемодан и подобрать гардероб, в котором не три одинаковые чёрные футболки. Спойлер: он всё равно попытается запихнуть ноутбук в чемодан. Ваша задача — чтобы шорты тоже влезли. Найдите все пасхалки от партнёров и помогите разрабу уйти в отпуск со спокойной душой!
Играть → https://tprg.ru/SEVh
22 609
JWT-аутентификация: лучшие практики
LogRocket разобрал, как не уронить безопасность аутентификации одним неверным решением. Их вывод простой: access короткоживущий и живёт в оперативной памяти, а refresh длинноживущий — прячется в httpOnly-куках, куда JavaScript не достаёт. Даже при XSS атакующий получит только короткий токен, а не ключ к бесконечному входу.
В статье есть и менее очевидные моменты. Если сейчас проектируете аутентификацию или проверяете текущую схему, рекомендую разбор по ссылке.
22 609
React не следит за фокусом — useFocus из @reactuses/core делает это за него
В React нет состояния, которое говорит, активно ли сейчас поле ввода.
document.activeElement показывает ответ, но не перерендеривает компонент при смене фокуса, а autoFocus стреляет один раз и не даёт вернуть фокус программно. Приходится вешать onFocus и onBlur вручную.
Хук useFocus из @reactuses/core сворачивает это в [isFocused, setFocused]: первая часть отражает реальное состояние элемента, вторая вызывает focus() или blur() по вашей логике. Например, при программном фокусе на поиске.
Для подсветки рамки хватит CSS :focus, но как только фокус начинает управлять JSX через подсказки, плавающие лейблы или паузу тикера, хук убирает шаблонный код.
Я бы сохранил его для форм и модалок, где фокус важен для UX, а не только для стилей. Разобрали в статье.
22 609
Выбираем менеджер пакетов
При десятке JS/TS-проектов вопрос — не «кто быстрее ставит», а «кто не раздует node_modules и не даст импортнуть левое». Автор сравнения оценил npm, Yarn, pnpm и Bun по этому критерию.
Разбор по ссылке.
22 609
Утечки памяти в JS: почему фронтенд тормозит со временем
Долгоживущие вкладки часто тормозят из-за мелких ссылок, которые не дают сборщику мусора освободить память. В JavaScript объект живёт, пока на него остаётся ссылка, и удаление последней ссылки отправляет его в следующий проход сборщика мусора.
Чаще всего утечки дают забытые таймеры и обработчики событий, отсоединённые DOM-узлы, оставшиеся в массивах, и глобальные переменные без
let, const или var. Замыкания тоже держат ссылки дольше, чем нужно.
Проверить проще, чем кажется: в Chrome DevTools вкладка Memory покажет снимок кучи и найдёт объекты, которые висят дольше положенного. А для метаданных объектов посмотрите на WeakMap: при удалении основной ссылки данные уйдут вместе с ней. Подробнее в азборе от Sharique Siddiqui.22 609
uBlock Origin больше не фильтрует рекламу в *Facebook
Разработчик проекта объявил, что команда прекращает поддержку сайта: соцсеть меняет разметку быстрее, чем волонтёры успевают чинить фильтры. Правки со стороны примут пул-реквестом, но сами тянуть это больше не будут.
Интереснее механика, из-за которой гонка проиграна. Слово Sponsored на карточке рекламы разбито на отдельные буквы, каждая живёт в своём элементе, и приёму этому около пяти лет. Порядок букв иногда перемешивают, а между ними подставляют фиктивные символы, так что фильтр, ловящий объявление по тексту, получает мусор.
*Компания Meta и её продукты признаны экстремистскими, их деятельность запрещена на территории РФ.
22 609
Откройте свой логотип в Chrome и Firefox рядом: в одном он будет толще
Растровая иконка размером пикселей в пятнадцать в двух браузерах выглядит по-разному: в Chrome штрихи полнее, в Firefox ближе к оригиналу. Оказалось, что некоторые изображения Chrome целиком даже не распаковывает.
Разработчик разобрал, почему так: сколько мегабайт памяти браузер на этом экономит, при чём тут блоки 8 на 8 и почему тот же приём годится не только для уменьшения.
Проверить у себя можно за минуту: откройте страницу в двух браузерах и приблизьте иконку. Если разница видна, читайте разбор целиком, он короткий и с примерами до и после. Заодно узнаете, чем это лечится.
22 609
Почему учиться в IT стало сложнее?
Вайбкодинг создал иллюзию, что теперь любой может сделать продукт быстро и легко, всего лишь с парой подписок.
Работает это не так: необходимость разбираться в том, как всё устроено, применять знания и читать код никуда не делась.
Разбор задачи, на который раньше уходил месяц, теперь укладывается в десять минут. Именно за этот месяц набирался опыт, а теперь без хорошей базы почти невозможно оценить то, что модель выдала за минуты.
Почему разбираться теперь приходится глубже и быстрее, и что с этим делать — читайте на Tproger: https://tproger.ru/articles/uchitsya-v-it-stalo-slozhnee-chto-na-samom-dele-izmenil-vajbkoding
22 609
Почему хорошие идеи так и остаются в заметках?
«Инициатива наказуема» — знакомое выражение? Промолчал, ничего не сделал: не накажут. Предложил и ошибся: накажут почти наверняка.
Например, некоторые компании переняли у Toyota контроль качества, только наоборот. У японцев за найденный брак поощряли, а в других компаниях стали наказывать. Так и пропадает желание что-то предлагать.
В новом материале на Tproger разбираем три ловушки, которые убивают инициативу внутри компании.
https://tproger.ru/articles/chto-mewaet-zapustit-novye-produkty-vnutri-kompanii
22 609
Ваш сайт может обслуживать ИИ-агентов напрямую, не заставляя их кликать по вёрстке
Агенты уже ходят по вашим страницам, но работают с ними как человек: разбирают разметку, ищут поле поиска, кликают, заполняют форму. Токены при этом уходят на навигацию вместо самой задачи, а любая правка вёрстки сбивает агента с пути.
WebMCP предлагает сайту объявить свои действия явно, чтобы искать их не приходилось. Стандарт экспериментально поехал в Chrome 146: на странице появляется document.modelContext, и сайт регистрирует через него инструменты, то есть именованные операции с описанием и параметрами, вроде search_products с поисковым запросом. Агент вызывает нужную операцию как функцию и получает готовый ответ.
Руками это отдельная работа: решить, какие действия отдавать наружу, связать каждый инструмент с тем же кодом, который выполняет ваша кнопка, и поддерживать всё это, пока стандарт меняется. Cloudflare сделал из этого тумблер: их прокси дописывает одну строку со скриптом в каждую страницу, которую отдаёт ваш сайт, а скрипт регистрирует готовые наборы инструментов. Если браузер стандарта не понимает, скрипт молча завершается и страница работает как раньше.
Отдельный набор пробрасывает наружу ваш собственный MCP-сервер, если он уже есть: скрипт запрашивает у него список инструментов, регистрирует каждый как свой, а вызовы отправляет на /mcp того же origin с сессией посетителя. То есть агент работает с вашим бэкендом под правами залогиненного пользователя.
Пока это developer preview с двумя наборами инструментов, и всё исполняется в браузере посетителя. Прежде чем щёлкать тумблер, пройдитесь по списку инструментов: агенту станет доступно ровно то, что в нём объявлено, поэтому всё меняющее состояние, от оформления заказа до правки профиля, либо не выкладывайте, либо оставляйте за подтверждением пользователя.
#mcp
22 609
В гриде и флексбоксе наконец заработали нативные разделители между элементами
Линию между колонками мы до сих пор рисуем обходным путём: вешаем бордер на соседний элемент или заводим псевдоэлемент, а потом правим это на переносах строк и по краям сетки. Со 149-й версии Chrome и Edge задача закрывается штатно: свойство
column-rule, работавшее раньше только в многоколоночной вёрстке, теперь понимают grid и flexbox, а для второй оси появилось row-rule. Firefox и Safari фичу пока не умеют.
Разработчик из команды Edge рассказывает, что поменялось в фиче с раннего превью:
— почему outset переименовали в inset;
— зачем понадобились отдельные свойства для концов и пересечений линий;
— как gap-rule-paint-order стал rule-overlap;
— для чего появилось rule-visibility-items.
Полифил для отставших браузеров только пишут. Значит, включать фичу можно там, где линии остаются украшением: без поддержки просто ничего не нарисуется, и вёрстка не поедет. А если без разделителей блоки визуально слипаются, придётся ждать полифила или Safari.
#css22 609
Карьерный потолок не щадит никого: время идёт, таски закрываются, приходит скука и предел. Можно ли вырваться из «Матрицы»?
https://tproger.ru/articles/zhizn-posle-senora-kak-ya-haknul-matricu
