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

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

Почему горизонтальная прокрутка мешает закрепить заголовок таблицы Таблице задали overflow-x: auto, первой колонке — left: 0, заголовку — top: 0 и position: sticky. Колонка закрепилась, а заголовок не держится у верхнего края страницы. Контейнер фактически стал прокручиваемым по обеим осям. В разборе одноосевых scroll containers показано новое поведение overflow: auto clip. Обёртка отвечает за горизонтальную прокрутку, а sticky-заголовок по вертикали ориентируется на прокрутку документа. Для проверки поддержки нужен @supports named-feature(single-axis-scroll-container): проверка одного синт…

Давайте сыграем в айтишную каламбурю! Правила простые: берём любой термин, название компании или имя известного айтишника и делаем из него каламбур. Я начинаю — вы подхватываете: Ада Лавпринглс

iframe научился подстраивать высоту под встроенную страницу Форма внутри iframe переходит на следующий шаг, становится выше и получает собственную полосу прокрутки. В Chrome 154 для этого появился `frame-sizing`: например, content-height позволяет подбирать высоту по содержимому встроенного документа. Одного CSS у родителя недостаточно. Страница внутри iframe должна разрешить передачу размера через <meta name="responsive-embedded-sizing" content="allow-origins=*">. Вместо звёздочки можно ограничить список разрешённых источников. После изменения содержимого новый размер передают вызовом windo…

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

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

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

В Safari Technology Preview 253 исправили повторное озвучивание текста В Safari Technology Preview 253 исправили сбой: VoiceOver мог снова и снова произносить одно и то же содержимое live region, пока текст поступал на страницу. Такие области используют aria-live, чтобы скринридер сообщал об обновлениях без перевода фокуса, например в ответах веб-чата. Исправление доступно только в тестовой сборке для macOS Golden Gate и macOS Tahoe. Переносить результат на стабильный Safari пока нельзя. Если поддерживаете чат или другой интерфейс с потоковым текстом, сравните одну и ту же область aria-live…

Как связать TanStack Router и Query для загрузки данных до рендера Если одни и те же данные нужны на нескольких маршрутах React-приложения, кэша отдельного маршрута может быть недостаточно: загрузка остаётся привязана к странице, а результат сложнее переиспользовать. Связка разделяет обязанности. loader вызывает ensureQueryData до рендера и заранее заполняет общий кэш TanStack Query. Компонент читает подготовленные данные через useSuspenseQuery. Маршрут определяет момент загрузки, Query хранит результат, а компонент занимается отображением. Практическую схему интеграции Router и Query стоит…

Как отменять устаревшие fetch-запросы в автодополнении Быстрый ввод запускает несколько запросов. Если ранний ответ придёт позже нового, он перезапишет актуальную выдачу. AbortController убирает эту гонку: его signal передают в fetch, а перед следующим запросом вызывают abort() у предыдущего контроллера. В React схему можно собрать в useEffect: поставить задержку на 250 мс, после паузы отправить запрос, а при очистке эффекта сбросить таймер и отменить запрос. Задержка сокращает число обращений, отмена не даёт запоздавшему ответу дойти до отрисовки. AbortError при этом обрабатывают отдельно о…