@tproger_web
Веб-страница
Telegram channel @tproger_web: 22.4K subscribers, 1.4K views per post, score 33
33FAhead of 1 in 10 channels in its category
Category midrange 33–52This channel 33
- 22.4K
- Subscribers
- 1.4K
- Median views over 30 days
- 6.4%
- Views / subscribers over 30 days
- 99
- Posts over 30 days
Data as of October 1, 2026
Covers frontend development: React hydration, component re-renders, GSAP and WebGL animation, and styling without Tailwind. As of 14 September: subscribers stand at 22.5K, above the category median of 18K. Median post views reach 1.9K, and ER sits on par with the category median at 8.6% versus 8.4%. Posts over 30 days total 94, well ahead of the category median. Recent material includes a breakdown of React hydration failures caused by mismatched server and browser HTML, an explanation of cascading re-renders through props, a roundup of CSS color palettes replacing Tailwind (uchū, Flexoki, Reasonable Colors), and a piece on pairing GSAP with WebGL for frame-by-frame video transitions without overloading React. Another post reconstructs the Claude mascot's pixel animation built entirely from SVG rectangles.”}
catalog description About the channel, by its author
Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: tprg.ru/rules Другие каналы: @tproger_channels Сайт: tprg.ru/site Регистрация в перечне РКН: tprg.ru/64ai
Common questions
- How many subscribers?
- Subscribers: 22.4K. Median views per post: 1.4K. Views per subscriber: 6.4%. Measured on October 1, 2026.
- How often are posts published?
- Posts in the last 30 days: 99 — that is several times a day. Measured on October 1, 2026.
- Does this channel have a Telegram tick?
- No Telegram tick.
- Who runs this channel page in the catalog?
- Nobody yet. If this is your channel, claim the page: you will be able to reply to reviews and see its stats.
Is this your channel?
Claim it — accurate metrics, replies to reviews as the channel, and an owner badge on the page.
Verify ownershipTakes a minute: a post with a code, or the bot as an admin
Your page on tg.place
Know the owner?
Forward them this message — they can verify their rights and collect what has piled up: page statistics and replies to reviews.
22,61522,380
Oct 122,380−5 in a day
Hover the chart or swipe it — we show the day.
| What it is made of | |
|---|---|
| Engagement | 4.6 of 30 |
| Growth quality | 12 of 20 |
| Reactions and forwards | 3.9 of 15 |
| Consistency | 3.6 of 12 |
| Trust | 3.8 of 8 |
| Reviews | not enough datano reviews yet |
Score 33 — from 5 of 6 signals: the rest are not measured yet. Methodology
Latest posts
Posts are in Russian — that is what the channel publishes.
- Как собрать 3D-сцену на CSS и управлять её камерой На примере перехода от Super Mario Bros 3 к Super Mario 64 автор разбирает CSS 3D по шагам. Сначала слои двигаются с разной скоростью и имитируют глубину. Затем perspective задаёт расстояние от наблюдателя до экрана, а perspective-origin переносит точку схода. Чтобы объект не сплющился в плоскость родителя, transform-style: preserve-3d нужен по всей цепочке контейнеров. Так шаблон из шести граней можно превращать в платформы, ящики и трубы: размеры и положение меняются через CSS-переменные. Откройте интерактивный гайд 3D CSS, from Super Mario Bros 3 to Super Mario 64, чтобы разобраться с CSS 3D на наглядной сцене: там можно менять перспективу, двигать камеру, отключать сохранение глубины, вращать блок и менять его размеры.
- Как сделать текст выразительнее с помощью CSS Одного удачного шрифта бывает мало. В подборке Master.dev Blog собраны пять приёмов на CSS для случаев, когда тексту нужны не только цвет, начертание и отступы. Два приёма можно быстро унести в вёрстку. background-clip: text обрезает фон по контурам букв: если сделать цвет текста прозрачным, внутри них будет видно изображение или градиент. А align-content: center выравнивает содержимое блочного контейнера по вертикали, без Grid или Flexbox. Ещё одна развилка: vertical-align в строке выравнивает span, img или input относительно текста, а не текст внутри блока. Откройте подборку перед вёрсткой заголовка, многострочной плашки или вертикальной подписи: там есть примеры для каждого приёма.
- Как привязать размеры в CSS к высоте строки с помощью lh Единица lh равна вычисленному значению line-height. Поэтому отступ margin-bottom: 1lh равен одной высоте строки и пересчитывается вместе с ней: поменяли типографику, и расстояние между абзацами сохранило тот же вертикальный ритм. Для списка с обрезкой можно задать max-height: 5lh, а градиент маски начать за 1lh до края. При смене размера шрифта блок по-прежнему вмещает пять строк. Ещё один сценарий: размер SVG-иконки 0.8lh, чтобы она масштабировалась вместе с текстом кнопки. Откройте The CSS lh unit, когда отступы, маска или иконки должны следовать за типографикой, а не за фиксированным числом пикселей.
- Как проверить поведение CSS, которое не видит @supports @supports умеет проверить, распознаёт ли браузер объявление, селектор или правило. Но совместный эффект он не проверяет: условие с display: flex и gap проходило даже там, где gap работал только с Grid. Для таких случаев появился named-feature(). Он принимает заданное имя поведения. Сейчас в спецификации два таких имени: одно проверяет, учитывает ли якорное позиционирование трансформации, другое — умеет ли контейнер прокручиваться только по одной оси. Сохраните разбор Bramus для постепенного улучшения интерфейса: новая проверка позволяет точнее отделить браузеры с нужным поведением. Перед применением всё равно сверяйте поддержку самой функции и конкретного имени: наборы в браузерах пока различаются.
- Как заставить
imgвыйти за собственные границы Уimgдва размера: размер HTML-элемента и размер ресурса. Приobject-fit: coverбраузер сохраняет пропорции ресурса и масштабирует его до заполнения рамки. Выступающие части по умолчанию скрываетoverflow: clip, но значение можно сменить наvisible. Сobject-fit: noneресурс сохраняет исходный размер, аobject-positionсдвигает его внутри элемента. На этой разнице автор собирает эффекты наведения, 3D-эффект и анимацию загрузчика без дополнительных элементов и псевдоэлементов. Я сохранил бы разбор Master.dev Blog с демо на случай, когда HTML менять нельзя. Автор предупреждает: те же демо можно собрать более привычными способами. #css #html - Кнопка или ссылка: как выбрать HTML-элемент по поведению Ссылка представляет цель, которую можно открыть в новой вкладке, скопировать, сохранить или отправить. Кнопка запускает действие в текущем контексте. Поэтому переход на другую страницу не превращает элемент в ссылку: поиск, выход из аккаунта и отмена редактирования могут оставаться кнопками. Если оформить «Отменить» как
<a>и покрасить под кнопку, браузер всё равно даст открыть цель отдельно и покажет ссылочное меню. Дажеrole=buttonне меняет всех этих свойств. В разборе Button Actions предложеныactionиmethodдляbutton. Они позволят перерисовывать текущую страницу сетевым запросом без формы и JavaScript. Пока это предложение, а для существующих интерфейсов полезен критерий: если цель должна переноситься в другую вкладку или закладку, нужна ссылка; если действие привязано к текущему контексту, кнопка. - Как связать HTML-атрибуты с адаптивными компонентами в CSS Расширенный attr() читает data-атрибут как число, длину или CSS-идентификатор. Поэтому data-repeat=4 можно передать в repeat(), а data-gap=2 превратить в 2cqi, то есть отступ в единицах ширины контейнера. Отдельные классы под каждое значение не нужны. Запросы по стилю контейнера добавляют контекст: карточка проверяет вычисленное CSS-свойство ближайшего предка, например --density: compact, и меняет отступы, размер аватара и видимость описания. Для такого запроса container-type не нужен. В разборе utilitybend оба механизма соединены в сетке и переключателе плотности. Демо намеренно оставлены без @supports и запасных стилей: перед продакшеном проверьте поддержку и добавьте запасной вариант.
- Как собрать кастомный скроллбар почти целиком на CSS Обычно размер и положение ползунка приходится пересчитывать в JavaScript на каждом событии прокрутки. В результате код читает размеры контейнера, обновляет DOM и может вызывать перерасчёт вёрстки. В разборе Master.dev Blog эту работу переносят в CSS. Якорное позиционирование удерживает полосы поверх контейнера, а анимация от прокрутки двигает края ползунка. Контейнерные единицы связывают его высоту с отношением видимой области к полной высоте содержимого. JavaScript остаётся только для перетаскивания указателем; колесо, клавиатура и тач работают через нативную прокрутку. Подход доступен в Chrome и Safari, а в Firefox пока только в Nightly. Поэтому его стоит брать как прототип для дизайн-системы и отдельно проверять поддержку браузеров и доступность кастомного элемента.
- Почему браузерный поиск не видит текст в аккордеоне FAQ может исправно открываться и закрываться, а его кнопки работать с клавиатуры, но обычный Ctrl/Cmd+F всё равно провалится. Если закрытый ответ скрыт через
display: none, встроенный поиск браузера считает, что этого текста на странице нет. Добавьте к проверкам простой сценарий: откройте демо в отдельной вкладке, сверните ответ и поищите фразу, которая есть только внутри него. Если совпадения нет, проверки кнопок и открытия ответов покрывают лишь часть поведения компонента. В разборе Агустина Барриентоса показаны воспроизводимый пример и код, из-за которого поиск не срабатывает. #html #фронтенд - В веб-проектах работают не только фронтендеры и бэкендеры, но и дизайнеры, аналитики, продакты. Кто все эти люди (на самом деле очень важные)? Чем они занимаются? Об этом новая мини-подборка. Хорошо почитать, если хочется лучше понимать, какие задачи решает дизайн, что делают аналитики и как работают продуктовые метрики. Как один лотерейный билет превратился в несколько сотен требований, десятки интеграций и пять месяцев Discovery Очнуться от мрака метрик: три истории от продакта о том, как решать неочевидные проблемы бизнеса Как проверять продукт на UX на примере личного кабинета студента Как тестировать пуши и диплинки в финансовом приложении Дизайн в маркетинге: как фирменный стиль решает бизнес-задачи
The channel in numbers
- Created
- June 14, 2019
- Photos
- 2.1K
- Videos
- 559
- Files
- 2
- Links
- 4.3K
Telegram data as of October 1, 2026
Contacts
- Ads
- @tproger_sales_bot
From the channel description
Reviews
Leave a review
No reviews yet. Yours would be the first.
