#ссылка дня

Кому The State of CSS’2022? Держи!

https://2022.stateofcss.com/en-US/

С пылу с жару подъехало.

Фичи, фреймворки, использование новых функций и свойств, доступность… CSS-in-JS, куда же без него. Всё то, что люди используют, что стало популярным, что потеряло в популярности, что резко взлетело.

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

Ну а в целом, приятно видеть, что CSS продолжает приобретать черты полноценного декларативного языка описания интерфейсов.

#css #state

#статья дня

— Да сколько там того фронтенда?

Ну признавайтесь, слышали же хоть раз подобное высказывание, да?

Количество шуток в сторону фронтенд-разработки поражает. Да, не всегда от знающих людей, но тем не менее.

Но вопрос-то остаётся открытым. А в самом-то деле, сколько там того фронтенда? Как посчитать?

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

Начать можно с простого: а что такое, собственно, UI? В математическом смысле в последнее время пропагандируется что-то вроде: "Интерфейс это функция состояния".

И так и есть: в модных нынче декларативных фреймворках (и в CSS, кстати, тоже) вы определяете состояния, от которых потом строится интерфейс. Разные состояния — разный результат.

Кстати, вот и подошли: а сколько их, этих состояний? Их считали?

Таки да, считали! Вот, например, статья Винса Спилмана о девяти состояниях UI:

Nothing — Пустой элемент
Loading — Загрузка
None — Ничего не вернулось
One — Одна сущность
Some — Коллекция сущностей
Too Many — Сущностей слишком много, нужна пагинация
Incorrect — Ошибка, неуспех
Correct — Успех
Done — Операция завершена

Посмотрите саму статью, там с иллюстрациями и подробнее.

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

Состояние курсора, атрибуты, язык, псевдоклассы, псевдоэлементы, фокус, ARIA, размер и положение экрана, режим энергосбережения, выбранная пользователем тема, состояние сети...

В итоге, что-то получается что фронтенда-то того действительно очень много: https://daverupert.com/2024/02/ui-states/

Я настоятельно рекомендую прочитать статью. Она короткая, просто перечисление, но любой чеклист сдачи проекта обязательно будет содержать если не всё, то часть из списка.

Чем раньше вы уложите у себя в голове факт, что делать и учитывать нужно очень много — тем лучше, котаны.

#frontend #ui #state

#фишка дня

Использование position: sticky уже так-то стало обыденностью.

А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?

Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.

Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?

Или, наоборот, не прерывать просмотр рекламы? :)

Запросто: https://codepen.io/alinaki/pen/WbvMOPB

@container scroll-state(stuck: top) {
  .pip {
    width: 200px;
    transform: translate(-50%, 0%)
      translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
  }
}

Обратите внимание, translate можно складывать, получая интересную математику в итоге :)

А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).

#css #scroll #state