SPA на контентных сайтах

Не понимаю, зачем делать обычные сайты, документацию, блоги и другие content-first проекты на фреймворках в виде SPA с JS-роутингом? Чтобы работало без перезагрузки с анимациями? Так ведь нет, на средних и слабых устройствах фризы, а анимаций на большинстве проектов нет. Что вообще плохого в перезагрузке? Если грамотно использовать современные возможности нативного HTML и CSS, не подключать npm-пакеты на клиент по любому чиху, не подключать десяток трекеров и оптимизировать ресурсы, то перезагрузка будет почти мгновенной.

А красивые переходы скоро можно будет делать при помощи View Transition API (уже можно в Chrome). На контентные сайты люди приходят за контентом, в документацию за примерами кода и описанием API. Для этого не нужны фреймворки, JS-роутинг, рантайм вебпака и сотни кб JS-а.

Тред навеян несколькими твитами из ленты. В одном показано, что в документации Vue router и Pinia в Firefox не работал сайдбар с ссылками. Другой про миграцию сайта на Angular. Кроме того, я участвую в разработке нескольких сайтов на Angular и не вижу там необходимости в нем.

Нативная изоляция стилей в CSS

@scope (.card) {
  .noscript { /* ... */ }
  .image { /* ... */ }
  .link { /* ... */ }
}

В CSS всегда была проблема с изоляцией стилей, особенно на больших проектах. Её решают по-разному: префиксы, конвенции по именованию классов (БЭМ), CSS-modules, scoped styles (Vue) и т.д. Все это - попытки решить проблему. На самом деле решение есть - Shadow DOM, который обеспечивает изоляцию разметки и стилей в отдельном поддереве DOM. Причём Shadow DOM это не эксклюзивная возможность веб-компонентов. Её можно использовать и для обычных элементов. Однако в таком виде не прижилось. Нужен более простой механизм для создания областей видимости, который был бы доступен в CSS. Этим механизмом в скором времени станет директива @scope. Поддержка этой директивы будет добавлена в Chrome 117. Safari и Firefox идею поддержали и обсуждают детали реализации.

Директива @scope позволяет задать селектор элемента, который будет создавать область видимости. Внутри @scope можно указывать стили, которые будут применяться только в этой области видимости. В примере стили применятся только к тем img, которые находятся внутри .media-block:

<style>
  @scope (.media-block) {
    img { 
      border-radius: 50%;
    }
  }
</style>
<div class="media-block">
  <!-- стили применяются -->
  <img src="..." alt="...">
</div>

<!-- стили не применяются -->
<img src="..." alt="...">

Если @scope указан в HTML и при этом не указан селектор, то ближайший родитель элемента <style> будет использоваться как корень для создания области видимости:

<div> <!-- корень области видимости -->
  <style>
    @scope {
      p { 
        color: red;
      }
    }
  </style>
  <p>Красный</p>
</div>

<p>Не красный</p>

Опционально можно указать второй селектор после ключевого слова to. Это задаёт границу области видимости. Таким образом, можно задавать область видимости не на все дочерние узлы, а только на конкретную часть поддерева:

<style>
  @scope (.media-block) to (.content) {
    img { 
      border-radius: 50%;
    }
  }
</style>
<div class="media-block">
  <!-- стили применяются -->
  <img src="..." alt="...">
  <div class="content">
    <!-- стили не применяются -->
    <img src="..." alt="...">
  </div>
</div>

Специальный псевдоселектор :scope позволяет обращаться к корню области видимости и стилизовать сам корень или его дочерние элементы в зависимости от контекста:

<style>
  @scope (.media-block) {
    :scope { /* .media-block */ }
    :scope img { /* .media-block img */ }
    aside:scope { /* aside.media-block */ }
  }
</style>
<div class="media-block">
  <img src="..." alt="...">
</div>

Эта штука вполне может вытеснить БЭМ и различные библиотеки, когда появится полноценная поддержка. Ждём. А пока подробнее про @scope с примерами и нюансами можно почитать в черновике спецификации.

PS. Поддержка @scope была добавлена в Chrome 117 за флагом, а в 118 включили полную поддержку для всех. Также поддержку добавили в Safari TP 185

Никто не знает HTML

Как мы дошли до того, что фундаментальную технологию веба никто не знает и не валидирует? Ана Тюдор изучила демки челленджа на кодпене и поделилась результатами.

В докладе Андрея Смирнова с YLF2023 была серия слайдов с результатами опроса "какие темы интересны разработчикам на конференции Frontendconf". В целом HTML и CSS практически никому не интересен.

На сайте Йенса Мейерта говорится, что в 2022 году у 0 из 100 популярных сайтов валидный HTML. В 2021 году этот показатель был 2 из 100. Среднее количество ошибок - 125.63. И это сайты многомилионных компаний.

Я сейчас работаю на финтех проекте, где занимаюсь внедрением доступности. На проекте много опытных фронтов. Однако из раза в раз приходится делать правки в HTML: недопустимая вложенность, отсутствие ориентиров, неправильная семантика, переизбыток элементов и т.д.

Как так получилось? Ну да, ведь интересно говорить про типы, микрофронтенды, фреймворки, сборщики, архитектуры, всякие модные аббревиатуры. Какое дело до этого вашего HTML...

Главное ИИ затащить в проект

Под любым видом, в любое место, главное наличие ИИ. MDN, но вы то куда? Мировой технический справочник по вебу. Должна же быть какая-то социальная ответственность?

https://github.com/mdn/yari/issues/9208

Про поля ввода

Читал комментарии под одной из статей на хабре. И я чертовски согласен с мнением пользователей nronnie и Fines_Unes. Каких только извращений в простых текстбоксах не встретишь на просторах интернета...

Например, селект с флагом страны и телефонным кодом. Сервису действительно нужен выбор среди 213 кодов? Много ли жителей с кодом Конго покупают билеты в кинотеатры РБ? Да сервис, скорее всего, даже СМС не обработает и не вышлет на номер с таким кодом. Зачем? А все эти маски ввода и префиксы с кодом, которые нельзя удалить? Хочешь зарегистрироваться? Нет, сначала купи симку с номером на +7. А ещё это ломает автодополнение браузера, вставку номера из телефонной книги, вставку из буфера обмена. Зачем ломать стандартные функции?

Бывает, ставишь курсор в поле, ещё не начал вводить, а все уже красное, ошибка! Да я ещё не ввёл ничего, какая ошибка? А ошибка "Неверный ввод". Почему неверный? Сделайте задержку валидации, выведите информативные сообщения об ошибках, приведите пример ожидаемых данных. А ещё календари для ввода даты рождения, которые начинаются с текущего дня текущего года и не имеют возможности ввода с клавиатуры. Сиди и отлистывай пару десятков лет. Посмотрите метрику и поставьте начальную дату исходя из среднего возраста основной ЦА.

На мой взгляд лучшее решение:
- обычное текстовое поле с нужным типом и/или клавиатурой
- отдельный лейбл к нему (сверху или сбоку)
- placeholder с примером данных
- небольшой раскрывающийся блок или тултип с пояснением по формату данных и особенностям ввода. Простое поле. Без масок, селектов с кодами, автокорректировок, валидации по странным правилам и тд. Пользователь, которому важно, чтобы ему пришло СМС с кодом, прислали счёт на почту или перезвонили для уточнения деталей сам заинтересован в том, чтобы ввести корректные данные.

Советую доклад Виталия Фридмана про формы, а также другие его доклады про UX. И в целом подписаться на него в соц. сетях, если вы занимаетесь пользовательскими интерфейсами.

Видео на ютубе. Автор сталкивается с проблемой: при клике по кнопке происходит отправка формы вместо нужного действия. Решение: добавить preventDefault() на клик по кнопке или на отправку формы. А можно просто добавить type="button" в HTML и никакие preventDefault() и js не понадобятся.

Твит с кодом: кнопка с плавной прокруткой к элементу. Решение: <button> с onClick, в обработчике вызов scrollIntoView с ref элемента. А можно добавить элементу id, сделать <a href="#element">, а в CSS добавить scroll-behavior: smooth. И не нужны клики, ref и вызовы прокрутки.

Задача: нужно хранить кусок разметки в HTML для дальнейшего использования. Решение: <noscript> с разметкой, чтение строки и парсинг при помощи DOMParser. А можно положить разметку в <template>, из которого можно сразу достать фрагмент DOM без парсинга.

И т.д. Многие задачи могут быть легко решены при помощи простых элементов, атрибутов и CSS-свойств вместо скриптов.

WordPress moment

Небольшой сайт на Elementor, несколько страниц, ничего сложного, минимум плагинов, минимум контента, нет сложных интерактивных элементов, немного анимаций. На главной странице больше 200 запросов за ресурсами! Это на странице из 5 экранов. Из них более сотни - стили и скрипты хрен пойми чего, что не используется на странице. Ну и задачка - оптимизировать метрики PageSpeed. Ага. Лучшая оптимизация метрик PageSpeed для сайта на WordPress это удалить WordPress и сделать нормально... За эту тему для WordPress клиент заплатил около 80 баксов, а в рекламе заявляется про high performance. Вижу я, какой там хай перформанс...

CSS vs SCSS

Мне кажется, что миксины - это та фича, из-за которой многие все ещё предпочитают использовать препроцессоры вместо нативного CSS. Все остальные фичи, можно сказать, уже есть в платформе.

Переменные ✅

С нами уже очень давно. Причём они гораздо мощнее переменных SCSS, потому что работают в рантайме, наследуются, проникают в Shadow DOM и позволяют делать разные динамические штуки. Но и как хранилище для переиспользуемых токенов тоже хорошо работают.

Вложенность ✅

Вложенность (nesting) уже поддерживается во всех актуальных браузерах. Да, там есть нюансы, вложенность работает не совсем так, как в препроцессорах. В этом есть как плюсы, так и минусы. Лично мне вложенность не особо нужна, но она есть в платформе.

Цветовые функции ✅

Функции color() и color-mix() в сочетании с переменными и новыми цветовыми пространствами позволяют конвертировать цвета, смешивать их, работать с прозрачностью, яркостью, насыщенностью и т.д. Таким образом в CSS можно реализовывать динамические палитры.

Математика ✅

Представлена в CSS функцией calc(), а также min(), max(), clamp(). Не так давно список пополнили тригонометрические функции и на подходе функции round(), mod(), rem(), abs(), sign() и куча других (уже доступны в Safari 15.4 и Firefox 118). Это позволяет реализовать любую математику.

Условия и циклы ❌

Пока что в CSS этого нет, но ходят обсуждения и есть черновики с предложениями. Я не знаю, насколько это вообще нужно. Видел в функциях SCSS, но крайне редко. Тут лучше ждать внедрения Houdini API и возможности создавать свои функции для CSS.

Миксины ❌

Этого тоже пока нет и вот пошли обсуждения. Хотя вопрос добавления нативных миксинов поднимался году в 2016. На мой взгляд это то, чего не хватает в CSS, чтобы перейти с SCSS. Ждём.

Вопросы с собеса

Человек в твиттере опубликовал некоторые вопросы про HTML, которые ему задавали на собеседовании. Я постарался на них ответить без использования каких-либо источников.

как сказать пользователю, что js выключен?

Чтобы сообщить пользователю о неработающем js можно использовать элемент <nonoscript>. Его содержимое отображается только тогда, когда js отключён или недоступен по каким-либо причинам.

что будет если убрать тег DOCTYPE?

Если удалить DOCTYPE, то браузер будет парсить страницу с неким DOCTYPE по умолчанию, который, вроде бы, включает режим совместимости со старыми версиями HTML.

какие теги могут быть в head и зачем?

В <head> могут быть:
<noscript> - заголовок окна браузера
<base> - базовый адрес
<meta> - метаданные
<link> - гиперссылка на ресурс
<style> - инлайн-стили
<noscript> - скрипты, как инлайном, так и внешние

какие атрибуты у тега noscript?

У <noscript> есть следующие атрибуты:
src - путь к файлу
type - тип скрипта, module или importmap
nomodule - скрипт не нужно обрабатывать как модуль
async - загружать скрипт асинхронно, выполнить при загрузке
defer - загружать скрипт асинхронно, выполнить в конце
integrity - хэшсумма для проверки файла
crossorigin - управление междоменными запросами
глобальные атрибуты - все другие атрибуты, которые можно указать у любых элементов

как с помощью тега span вывести подсказку?

Не совсем понял, что имеется ввиду под подсказкой. Но допустим первый способ - добавить атрибут noscript, второй способ - добавить кнопку и использовать Popover API для отображения подсказки.

"Доступность — это определённый уровень вашего сервиса. Это не бонус, не особые потребности и не то, что можно предложить по запросу — так просто должно быть."

Полностью согласен с этим тезисом.

https://habr.com/ru/companies/rtlabs/articles/741906/

Invokers API

Новое предложение от группы OpenUI - Invokers. Это декларативный способ привязать кнопку к какому-то элементу на странице и указать действие, которое будет вызвано при взаимодействии с этой кнопкой. На самом деле это довольно частая задача, чтобы при клике на кнопку с другим элементом что-то происходило. Примеров много: бургер-меню, модальное окно, выпадающее меню, переключение вкладки, смена слайда в галерее, отображение подсказки и т.д.

OpenUI предлагает добавить кнопкам (<button>, <input type="button"> и <input type="reset">) два новых атрибута:
1) invokertarget - цель действия, принимает id элемента, с которым что-то должно произойти.
2) invokeraction - название действия, которое необходимо выполнить.

<button invokertarget="my-video" invokeraction="playpause">Play/Pause</button>
<button invokertarget="my-video" invokeraction="toggleMuted">Mute/Unmute</button>

<video id="my-video" src="video.mp4"></video>

invokeraction можно не указывать, тогда подразумевается значение auto, при котором вызываются стандартные действия в зависимости от элемента. Для <dialog> и [popover] это будет открытие или закрытие, для <audio> и <video> - пауза и воспроизведение.

<button invokertarget="my-dialog">This opens a dialog</button>

<dialog id="my-dialog">This is the dialog</dialog>

Также можно указать действие в виде ключевого слова, которое будет соответствовать (скорее всего) названию метода элемента. Например, кнопке-крестику внутри <dialog> можно указать invokeraction="close", что будет вызывать метод close() у <dialog>.

<button invokertarget="my-dialog">Open dialog</button>

<dialog id="my-dialog">This is the dialog
  Hello world!

  <button invokertarget="my-dialog" invokeraction="close">Close</button>
</dialog>

А что, если метода нет? Тогда ничего не произойдёт. Но можно подписаться на событие invoke, в обработчике которого можно прочитать действие из invokeraction и предпринять какие-то действия с элементом. Это также может быть хорошей альтернативой для делегирования событий.

<button invoketarget="my-custom">Invoke a div... to do something?</button>
<button invoketarget="my-custom" invokeaction="frobulate">Frobulate</button>

<div id="my-custom"></div>

<noscript>
  document.getElementById("my-custom").addEventListener("invoke", (e) => {
    if (e.action === "auto") {
      console.log("invoked an auto action!");
    } else if (e.action === "frobulate") {
      alert("Successfully frobulated the div");
    }
  });
</noscript>

Событие вызывается при клике мышкой, нажатии клавиш Enter или Space, касании пальцем на тач-устройствах. А если хочется не по нажатию, а по наведению? Для этого предусмотрены атрибуты interesttarget и interestaction. Работают так же, как и invoker*, но только по ховеру.

<button interesttarget="my-popover">Open Popover</button>

<div id="my-popover" popover="hint">Hello world</div>

Для консистентности эти атрибуты в скором времени должны заменить атрибуты из Popover API, такие как popovertarget и popoveraction, поскольку они повторяют логику invoker* и interest*. Какое-то время будут работать оба, после чего popover* объявят deprecated.

С точки зрения accessibility, у кнопки с этими атрибутами будет неявно установлены соответствующие aria-атрибуты: aria-controls, aria-details и aria-expanded в зависимости от типа целевого элемента.

Более подробно и с примерами можно ознакомиться в черновике предложения OpenUI. Когда этого ждать? Chrome и Firefox уже взяли это в работу, со временем остальные браузеры должны подтянуться.

Alpine.js, Qwik, Lit и Stencil

Краткий обзор:

Alpine.js

Это, скорее, библиотека, нежели фреймворк. Коротко описал бы как Vue на минималках для улучшения готовой разметки и добавления в неё интерактивности за счёт атрибутов, очень похож на petite-vue. Часто используется в связке с Laravel и Livewire.

Qwik

Базируется на идеях React, имеет по сути тот же синтаксис, но иначе работает под капотом и предлагает делить приложение на маленькие чанки и динамически подгружать их только при взаимодействии с компонентами. Тем самым предлагает улучшенный load performance.

Lit

Фреймворк для веб-компонентов и приложений на их основе, предлагает удобные абстракции и DX. Вырос из Polymer. Максимально базируется на веб-стандартах. На Lit разрабатывают YouTube, Chrome DevTools и разные библиотеки компонентов.

Stencil

Компилятор веб-компонентов от команды Ionic. По своей идее похож на Lit, но фокусируется именно на создании отдельных веб-компонентов, а не на разработке веб-приложений. Активно использует ts и декораторы. Может быть интегрирован в React, Angular и Vue.

Semantics for newbies

Базовые понятия о семантике HTML для новичков. Я принял небольшое участие в этом проекте, предложив ряд правок и уточнений.

https://zavsievich.github.io/semantics-for-newbies/

Веб-компоненты

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

Google вкладывается в веб-компоненты с самого их появления. Началось все с библиотеки Polymer, из которой вырос Lit. При помощи Lit сейчас разрабатывается YouTube, DevTools и интерфейс Chrome в целом, а недавно веб-компоненты добавили в Maps API. Кроме того, Angular имеет хорошую поддержку. Можно как использовать сторонние веб-компоненты, так и создавать свои при помощи Angular Elements. Также Google разрабатывает 3ю версию Material Design с использованием веб-компонентов.

Microsoft так же делает ставку на веб-компоненты. Они разработали свою библиотеку FAST и дизайн-систему Fluent UI. Сейчас они используются на таких проектах, как MSN, Bing, VS Code, Edge и некоторых других.

Adobe активно использует веб-компоненты в Photoshop Web. Кроме того, они разработали дизайн систему Spectrum на основе веб-компонентов и используют её в некоторых своих проектах.

Salesforce предлагает партнёрам разрабатывать UI для своих решений при помощи собственной разработки - библиотеки Lightning Web Components, построенной поверх веб-компонентов.

IBM добавила поддержку веб-компонентов в свою дизайн-систему Carbon. Аналогично поступили SAP в своей дизайн-системе UI5. Другие компании тоже используют веб-компоненты: Red Hat, Nord, Siemens, Clever Cloud, GitHub, Netflix и тд.

Некоторые компании строят бизнес на веб-компонентах. Так, финская компания Vaadin предлагает одноимённый фреймворк для разработки enterprise-приложений, в основе которого Java и веб-компоненты.

Стоит упомянуть также и независимые библиотеки веб-компонентов. Одна из таких - Shoelace. Она предлагает хорошо проработанные, доступные и кастомизируемые компоненты.

Веб-компоненты используются более чем активно. Поэтому утверждение, что они никому не интересны - не верно. Просто их активно не рекламируют, как фреймворки. Это браузерный стандарт, который просто берут и используют.

CSS4 быть!

Как и CSS5. Идея добавить "версию" к CSS была выдвинута ещё в 2020 году. С тех пор периодически обсуждалась. Но не так давно прошло собрание рабочей группы CSS, на котором было принято решение об утверждении CSS4, CSS5 и CSS Next.

Немного истории

На данный момент у HTML и CSS нет версий. Стандарты являются "живыми" и развиваются постоянно, вместо того, чтобы накапливать фичи и раз в некоторое время делать релиз новой версии. Например, стандарт HTML обновлялся сегодня (14 января 2024). Отсутствие версий позволяет постоянно развивать фичи и делать это параллельно. Так, CSS разделён на модули (Grid Module, Display Module, Font Module и т.д.), которые развиваются независимо и имеют свой уровень. Уровень отражает доработки предыдущего и новые фичи.

Возвращаясь к версиям

Последними стандартами с версиями были HTML5 и CSS3. После сосредоточились на развитии живых стандартов. Но релиз новых версий оказал огромное влияние на веб. Если гуглить HTML и CSS, то увидите знакомый оранжевый логотип с цифрой 5 и синий с цифрой 3. W3C даже сделали целый сайт и рекламную кампанию для HTML5. В это время появилось старое и новое, многие задумались о том, чтобы переписать свои сайты на свежие версии. HTML5 и CSS3 появились в вакансиях и резюме и стали уже нарицательными.

С тех пор в HTML и CSS появилось много нового, но нововведения растянуты по времени и внедрены в рамках живых стандартов. То есть у нас всё ещё HTML5 и CSS3. И вот разработчики стандартов решили заняться техномаркетингом и добавить "новые версии" для привлечения внимания. И так:
- CSS3 - последняя версия (~2009-2012)
- CSS4 - фичи, которые мы уже используем: custom properties, flexbox, grid, calc и т.д. (~2013-2018)
- CSS5 - новые фичи: container queries, цветовые пространства, has, view transition, nesting, и т.д. (~2019-2024)
- CSS Next - будущее.

Это ни коим образом не влияет на то, как разрабатываются сами стандарты. Они по-прежнему будут живыми, без версий. CSS4 и CSS5 - это брендинг для новых фич, чтобы стимулировать сообщество их изучать и внедрять, обновлять сайты и учебные программы. Так что готовимся править CV.

CSS Wrapped 2023

Вышел CSS Wrapped 2023 с обзором фич, которые появились за этот год. На мой взгляд это огромный прогресс в развитии CSS. Не все фичи получили кроссбраузерную поддержку, но в Chrome и Edge последних версий все они доступны, а это большая доля рынка.

Радиокнопки на градиентах

София Валитова в своём блоге рассказывает про стилизацию <input type="radio"> при помощи градиентов, без лайфхаков с псевдо-элементами и <label>.

https://ru.ariarzer.dev/2023/tutorials/gradient-radio/

Доступность и торты

Забавная мультипликация про торты и доступность от команды Microsoft Bing 🎂

https://www.youtube.com/watch?v=HE2R86EZPMA

Вас уже больше сотни! 💯
Всем огромное спасибо!

Пользуясь случаем, напоминаю, что весь контент, который выходил до этого, был из архива моих публикаций в твиттере. И этот архив закончился. Поэтому далее будет выходить новый контент, но уже не так часто. В связи с этим предлагаю опрос ⬇️

Предотвращение потери данных в формах

Представьте ситуацию: вы заполняете большую форму, например, оформляете заказ в интернет-магазине, покупаете билет на концерт, пишете запрос в техническую поддержку продукта или отзыв на услугу. И вот, вы хотите ввести что-то и случайно вместо цифры на клавиатуре нажимаете F5, задеваете тачпад и нажимаете на ссылку, свайпом от края экрана вызываете действие "назад" на мобильном. В результате данные потеряны. Те, кто писал курсовые и дипломные работы в Word, понимают всю боль, когда "Приложение Word не отвечает".

Если вы разрабатываете форму, особенно большую, то примите ряд мер по предотвращению потери введённых данных. Тем более, эти меры достаточно простые.

Запрос на перезагрузку страницы.

Подпишитесь на событие beforeunload, функция-обработчик которого возвращает строку. Из-за приватности, это можно сделать только если пользователь взаимодействовал со страницей (клики, прокрутка). Подробнее со сниппетом кода можно ознакомиться в заметке Криса Койера.

Таким образом, при попытке обновить страницу или закрыть вкладку, браузер покажет системное диалоговое окно и предупредит о потере данных, а процесс перезагрузки/закрытия будет отложен до тех пор, пока пользователь не подтвердит или не отменит это.

Сохранение введённых данных.

При вводе данных в форму подпишитесь на одно из событий (input, change), считывайте все текущие данные с полей и сохраняйте их в локальное хранилище (LocalStorage, IndexedDB). При использовании <form> и стандартных полей ввода, вы можете получить объект FormData, сериализовать его в JSON-строку и сохранить.

При случайном обновлении страницы сообщите пользователю, что в браузере есть сохранённые ранее данные, которые можно восстановить, и добавьте в начале формы кнопку, при клике на которую достаньте данные из хранилища и заполните ими форму.