New We are sorting MAX channels into categories and territories. Read the news
MAX analyticschannels, chats and posts

Analytics

MAX
Information collectorsbrain-pro.ru Foreign agent labelingagent-mark.ru
Public channel ID 68905802009120

Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html

Всё по фронтенду, бэкенду и девопсу в одном месте.

IT Юмор: @ithumor
Типичный программист: @tproger
Новости IT: @your_tech
Для новичков в IT: @prog_point
Инструменты для программистов: @prog_tools
Всё о Python: @zen_of_python
Мобильная разработка: @mobi_dev

Правила общения: tprg.ru/rules

Сайт: tprg.ru/site

Разместить рекламу: t.me/tproger_sales_bot

IT and programming
Channels in category
2 093
This channel's rank
№ 189
Open category →
Open in MAX

Posts for the period

By reactions

Search and the whole feed — after free registration. Custom dates — with a subscription; the channel owner sees them for free. Sorting by reactions — with a subscription. Sign up

Loading…

Loading image…
W3C убрал лишние обёртки из своей дизайн-системы

Правила отступов, удобные для фиксированных шаблонов CMS, начали мешать на других страницах. Разработчикам приходилось подгонять разметку под конкретные родительские контейнеры.

В обновлении дизайн-системы W3C этот набор правил пересмотрели. Ограничение длины строки перенесли прямо на заголовки, абзацы и списки, убрав отдельную обёртку текстового компонента. Карточки теперь управляют большей частью своих стилей и отступов, поэтому их проще вкладывать друг в друга.

Размеры текста заданы девятью CSS-переменными и плавно меняются вместе с шириной экрана. Старые классы сохранили для совместимости. Там, где это было уместно, добавили логические свойства CSS, чтобы стили учитывали направление текста.
113
Go to post Open in MAX Report an inaccuracy
Loading image…
Почему горизонтальная прокрутка мешает закрепить заголовок таблицы

Таблице задали overflow-x: auto, первой колонке — left: 0, заголовку — top: 0 и position: sticky. Колонка закрепилась, а заголовок не держится у верхнего края страницы. Контейнер фактически стал прокручиваемым по обеим осям.

В разборе одноосевых scroll containers показано новое поведение overflow: auto clip. Обёртка отвечает за горизонтальную прокрутку, а sticky-заголовок по вертикали ориентируется на прокрутку документа.

Для проверки поддержки нужен @supports named-feature(single-axis-scroll-container): проверка одного синтаксиса overflow не подтверждает нужное поведение. Статья посвящена тестированию функции в Beta, Dev и Canary; отдельно стоит проверить скролл из JavaScript и минимальные размеры элементов Grid/Flex.
94
Go to post Open in MAX Report an inaccuracy
Loading image…
Давайте сыграем в айтишную каламбурю!

Правила простые: берём любой термин, название компании или имя известного айтишника и делаем из него каламбур.

Я начинаю — вы подхватываете: Ада Лавпринглс
121
Go to post Open in MAX Report an inaccuracy
Loading image…
iframe научился подстраивать высоту под встроенную страницу

Форма внутри iframe переходит на следующий шаг, становится выше и получает собственную полосу прокрутки. В Chrome 154 для этого появился `frame-sizing`: например, content-height позволяет подбирать высоту по содержимому встроенного документа.

Одного CSS у родителя недостаточно. Страница внутри iframe должна разрешить передачу размера через <meta name="responsive-embedded-sizing" content="allow-origins=*">. Вместо звёздочки можно ограничить список разрешённых источников. После изменения содержимого новый размер передают вызовом window.requestResize().

В Firefox и Safari поддержки пока нет. Приём подойдёт как улучшение для встраиваемых форм и виджетов, где вы контролируете обе стороны и можете сохранить запасной вариант изменения высоты.
100
Go to post Open in MAX Report an inaccuracy
Loading image…
Как спрятать декор, когда он начинает перекрывать контент

Картинка рядом с карточками меняет размер и положение вместе с контейнером. Фиксированный брейкпоинт не всегда попадёт в момент, когда между ними закончится место. Ахмад Шадид показал, как привязать скрытие к реальному расстоянию средствами CSS.

Через anchor positioning он растягивает вспомогательный элемент между краями декора и секции. Внутри лежит псевдоэлемент шириной 20 px: когда зазор становится меньше, появляется переполнение. Scroll timeline переключает CSS-переменную, а style container query убирает декор. Пользователю ничего прокручивать не нужно.

Приём требует поддержки anchor positioning, scroll-driven animations и запросов к стилям контейнера. Для проекта я бы оставил безопасную базовую вёрстку, а такое поведение добавил как улучшение.
92
Go to post Open in MAX Report an inaccuracy
Loading image…
Как не потерять языковые страницы из-за слеша в URL

Китайские страницы сайта исчезли из поиска, хотя канонические адреса указывали на них правильно. Причиной оказалось расхождение в одном символе: в canonical стоял завершающий слеш, а в sitemap его не было. Cloudflare дополнительно переписывал адреса, поэтому Google объединял китайскую страницу с английской. После синхронизации URL число ошибок в Search Console упало до нуля примерно за три дня. Весь разбор сбоя и исправления пригодится при запуске многоязычного сайта.

Перед релизом сравните canonical, перекрёстные ссылки hreflang и записи sitemap посимвольно: регистр, завершающий слеш и обработка параметров запроса должны совпадать. Затем проверьте правила нормализации URL в Cloudflare и плагинах, которые меняют атрибуты href. Такую сверку лучше добавить в сборку и останавливать её при первом расхождении.
91
Go to post Open in MAX Report an inaccuracy
Loading image…
Как собирать демо продукта на React вместо записи экрана

Remotion превращает видео в React-композицию: useCurrentFrame() задаёт текущий кадр, interpolate() меняет значения по ходу ролика, а Sequence размещает сцены на временной шкале. Результат рендерится в MP4 через Chrome без интерфейса и FFmpeg.

В разборе рабочего процесса с Remotion интерфейс пришлось отделить от состояния: компоненты получают данные через props, а действия пользователя заменяет сценарий с номерами кадров. Начальная настройка заняла около 85 минут, зато следующие ролики используют те же компоненты, тестовые данные и временную шкалу.

Такой подход пригодится для повторяемых обзоров функций и списков изменений: обновляете объект с данными, запускаете npx remotion render и получаете новый ролик без повторной записи кликов.
92
Go to post Open in MAX Report an inaccuracy
Loading image…
В 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. Так можно проверить, исчезли ли повторы и не потерялись ли новые фрагменты ответа.
74
Go to post Open in MAX Report an inaccuracy
Loading image…
Как связать TanStack Router и Query для загрузки данных до рендера

Если одни и те же данные нужны на нескольких маршрутах React-приложения, кэша отдельного маршрута может быть недостаточно: загрузка остаётся привязана к странице, а результат сложнее переиспользовать.

Связка разделяет обязанности. loader вызывает ensureQueryData до рендера и заранее заполняет общий кэш TanStack Query. Компонент читает подготовленные данные через useSuspenseQuery. Маршрут определяет момент загрузки, Query хранит результат, а компонент занимается отображением.

Практическую схему интеграции Router и Query стоит открыть, когда один запрос обслуживает несколько экранов и загрузку нужно отделить от рендера.
74
Go to post Open in MAX Report an inaccuracy
Loading image…
Как отменять устаревшие fetch-запросы в автодополнении

Быстрый ввод запускает несколько запросов. Если ранний ответ придёт позже нового, он перезапишет актуальную выдачу. AbortController убирает эту гонку: его signal передают в fetch, а перед следующим запросом вызывают abort() у предыдущего контроллера.

В React схему можно собрать в useEffect: поставить задержку на 250 мс, после паузы отправить запрос, а при очистке эффекта сбросить таймер и отменить запрос. Задержка сокращает число обращений, отмена не даёт запоздавшему ответу дойти до отрисовки. AbortError при этом обрабатывают отдельно от остальных ошибок.

Я сохранил себе ключевое ограничение: отменённый контроллер одноразовый, для следующего запроса нужен новый. Проверить весь сценарий можно на демо автодополнения с готовым кодом.
74
Go to post Open in MAX Report an inaccuracy
The full feed — after free sign-up
VKontakte Telegram Odnoklassniki
Favorites at datool.ru

Follow the channel in your account

Sign up at datool.ru to add the channel “Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html” to favorites and track its metrics.

Sign up For channel owners

Verify your channel

Sign in or sign up at datool.ru, then add our bot to the channel following the instructions in your account. Once ownership is verified, the lock disappears and channel management becomes available.

Sign in or sign up

Report an inaccuracy

Describe what needs fixing. If you have a source, add a link.

You are leaving datool.ru

The link leads to an external website. datool.ru is not responsible for its content — check the address before entering passwords or payment details.

Redirecting in 10 s

Go