NEW BOT Телеграм, страница

Gulp 5.0

Как-то раз я делал пост про Gulp, в котором рассказывал, что он давно не обновлялся, многие зависимости и плагины устарели и предлагал варианты для замены. Но на днях, спустя почти 5 лет, у gulp произошёл релиз версии 5.0.

Так как это мажорная версия, то не обошлось без breaking changes. Отказались от поддержки Node <10.13, унифицировали механизм работы с glob, удалили старые флаги, уменьшили количество зависимостей и обновили оставшиеся, изменили библиотеку для работы со стримами и кучу всего другого.

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

В общем gulp жив, внезапно. Другой вопрос к экосистеме плагинов, за которую команда gulp не отвечает. Многие плагины тоже стоило бы обновить. Также вопрос в актуальности: функционал gulp практически полностью замещается parcel или CLI-инструментами, не говоря уже о сборщиках вроде Vite.

Про Gulp 🥤

Посмотрел один видео-гайд от автора с 70к подписчиков. Утверждается, что это полный гайд по gulp 4 с современным синтаксисом. Я понимаю, что контент для новичков и подаётся простыми словами, но гайд не соответствует заявленному и вводит в заблуждение.…

👍9

378 viewsedited 16:44

Статья про семантику

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

Семантическая вёрстка — особый подход к написанию HTML-разметки страниц. При этом подходе разработчик опирается не на содержание сайта, а на смысловое предназначение каждого блока и логическую структуру страницы.

Это не особый способ разметки, а стандартный, страницы должны правильно размечаться. Смысловое содержание и предназначение блока — это одно и то же. Семантика элемента буквально несёт информацию о смысле контента, который в нём находится и как он связан с другим контентом.

<aside> — тег для дополнительного контента, используется для создания «сайдбара» или бокового меню на сайтах.

Один из самых распространённых стереотипов, наряду с картинкой о разметке классической страницы. <aside> — это не боковая колонка! <aside> — это второстепенный контент, который связан с окружающим контентом. Кажется мне стоит сделать отдельный, более подробный пост про этот элемент.

<nav> — контейнер для навигации со ссылками на другие страницы и разделы сайта

В спецификации есть примечание, что в <nav> не стоит заворачивать любую навигацию, а только основную. Если на странице несколько <nav>, то каждому из них нужно задавать имя.

Теги вроде <header> и <footer> — ориентиры.

Это верно только в том случае, когда они относятся к основному разделу страницы <body>. То есть между <body> и этими элементами нет других секционных элементов (<section>, <article>, <aside>, <nav>).

Уровень доступности сайта сам по себе — один из факторов ранжирования в поисковых системах.

Доступность не является фактором ранжирования. В официальных источниках от Google и Yandex такой информации нет. Core Web Vitals оказывает небольшое влияние. Оценка доступности хоть и отображается в Lighthouse, но это информационный показатель, он не входит в Core Web Vitals.

Семантическая вёрстка помогают и самим поисковым движкам. Они не понимают сам текст, его контекст и то, насколько он важен.

Роботы понимают текст и контекст, причём в первую очередь. Иначе куча сайтов с вёрсткой на <div>-ах бы не оказалась в топах поисковой выдачи. Качество текста, его смысл, связь с другим текстом на странице — один из решающих показателей при ранжировании. Об этом достаточно много упоминается в документации Google Search.

Семантические теги дают поисковым системам нужный контекст, помогают понять содержимое сайта и проиндексировать его относительно других со схожей тематикой.

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

Например, в Google под название сайта попадают заголовки второго уровня, если используете тег <h2>.

Семантические элементы действительно влияют на построение сниппетов, но больше влияния на это оказывает микроразметка.

Если тянет добавить к <div> классы вроде header, sidebar, content, post и footer, лучше использовать теги <header>, <aside>, <main>, <article> и <footer>.

Этот совет работает не всегда. sidebar не всегда <aside>, content не всегда <main>, post не всегда <article>. Иногда лучше написать <div> с одним из этих классов, чем использовать созвучный с классом элемент.

Дока

Что такое семантика? — HTML — Дока

Как работает семантика в HTML и зачем она вообще нужна.

👍13❤7

384 views15:03

Фронтенд-фантазии

Наткнулся в твиттере на пост, что в следующей версии Bun можно будет писать комментарии в файле package.json и Bun не будет выдавать ошибок. На самом деле возможность хорошая, иной раз хочется добавить комментарий к npm-скрипту или пакету. Но, всё-таки, это формат json, со своей спецификацией и правилами, комментарии там запрещены синтаксисом. Bun мог бы реализовать поддержку существующих форматов json5 или jsonc, где комментарии разрешены.

Также недавно Рич Харрис, автор Svelte, был крайне удивлён: оказывается, конструкция <div /> не является валидной в HTML и не является сокращением для <div></div>. При этом в Svelte такая конструкция работает и было принято решение это исправить и привести парсер в соответствие со стандартом. А ещё подобная конструкция есть в JSX, наряду с бесполезными слешами в конце тегов.

Это всё натолкнуло меня на одну мысль: во фронтенде очень много придуманного "синтаксического сахара", который не является стандартизированным и валидным для того языка, в котором используется. И этот синтаксис придуман и внедрен авторами инструментов. В итоге получается забавная ситуация: мы вроде бы пишем код на HTML, CSS и JS, но в то же время пишем какой-то придуманный синтаксис, используем надмножества языков.

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

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

👍7

410 views09:04

Нативные поповеры! В Chrome 114, который вышел в конце мая 2023, завезли Popover API. Firefox и Safari поддержали этот API и должны выкатить в ближайшее время. И это крутая новость! <button popovertarget="note"> Подробнее </button> <div id="note" popover>…

Шнурки

Последнее время на многих проектах я использую библиотеку UI-компонентов shoelace.style. Поэтому хочу поделиться опытом.

Библиотека построена на базе веб-стандартов и под капотом использует Lit. Каждый UI-компонент поставляется в виде веб-компонента. Это делает библиотеку независимой от фреймворков, что отличает её от таких решений, как MUI, Vuetify, Angular Material и т.д. При этом компоненты Shoelace можно использовать во Vue и Angular. С 19 версии React их полноценно можно будет использовать и там, а пока автор предоставляет для React компоненты-обёртки.

Другой особенностью Shoelace является устройство стилей. Библиотека предоставляет базовую светлую и тёмную темы. Это CSS-файлы, в которых содержатся токены в виде пользовательских свойств CSS (палитра, отступы, размеры, закругления, тени и т.д.) и несколько служебных классов. В остальном там нет никаких других стилей.

Все необходимые стили содержатся в Shadow DOM у каждого UI-компонента. Эти стили изолированы от внешнего воздействия, но по правилам Shadow DOM они наследуют значения наследуемых свойств и видят внешние пользовательские свойства CSS. Если подключена тема, то компоненты будут использовать объявленные в ней свойства. Если тема не подключена, компоненты будут работать, но потеряют свой внешний вид.

Можно создать свою тему, подключив CSS-файл со своими значениями пользовательских свойств. Такой вариант подойдёт, когда библиотека используются в качестве UI kit, то есть интерфейс приложения будет полностью построен на компонентах этой библиотеки.

Но можно использовать компоненты точечно. Если в проекте нужна только карусель и диалоговое окно, библиотека позволяет взять только эти компоненты и не тянуть лишнее. Самый простой способ — воспользоваться автозагрузчиком. Он ищет на странице компоненты и сам подгружает нужные для их работы модули. Можно подключить нужный компонент самостоятельно через <noscript>, как в старые добрые времена, или импортировать модуль в JS при помощи import или import().

Библиотека также поставляет API к каждому компоненту в виде атрибутов, свойств, методов, событий, пользовательских свойств CSS, слотов и частей (CSS Shadow Parts). Благодаря этому компоненты можно стилизовать практически как угодно. Это большой плюс, потому что некоторые библиотеки крайне сложно кастомизировать.

В основном над Shoelace работает один человек — Cory LaViska. Он активно развивает библиотеку и выпускает новые версии. Одни раз я столкнулся с багом и создал issue на github, которое было решено в течении нескольких дней. Также автор уделяет большое внимание доступности. При разработке компонентов он опирается на рекомендации WCAG и ARIA практики. В общем рекомендую взглянуть на эту библиотеку.

shoelace.style

Shoelace: A forward-thinking library of web components.

Hand-crafted custom elements for any occasion.

👍7🔥5🐳1

437 viewsedited 13:04

You don't know HTML

В рамках этого канала я запускаю новую рубрику под названием You don't know HTML. Название вдохновлено серией книг You don't know JS Кайла Симпсона, рекомендую к прочтению.

Посты будут выходить с хештегом #ydkhtml и будут посвящены разным тонкостям и интересным моментам из спецификации HTML. Я считаю, что HTML недооценён, его часто считают чем-то простым и базовым, уделяют мало времени для изучения и быстрее двигаются дальше, к CSS и Javanoscript. В итоге качество разметки в интернете в целом очень плохое.

Между тем, HTML является фундаментальной технологией веба, она содержит в себе множество возможностей, которые порой позволяют решать задачи максимально простым и декларативным способом. Ну и, в конце концов, надо как-то оправдывать то время, которое я когда-то потратил на изучение спецификации WHATWG HTML 😁

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

🔥17👍7❤5

337 viewsedited 15:04

You don't know HTML: download

Иногда нужно сделать ссылку для загрузки файла: отчёт, документ, фото, счёт, инструкция и т.д. В HTML для этого есть атрибут download у элементов <a> и <area>:

<a href="report.pdf" download>
  Скачать отчёт
</a>

При клике по такой ссылке начнётся загрузка файла, указанного в href. Если в href указан адрес страницы, то будет загружен html-файл этой страницы.

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

<a href="b3f7be5pc3b8w24q6g.pdf" download="Заказ №5241836">Скачать детали заказа</a>

Также можно загружать небольшие файлы, встроенные через data URL:

<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA..." download="Логотип">Скачать логотип</a>

Загрузить файл можно и без атрибута download. Если в href указать ссылку на файл, который браузер не может отобразить, то автоматически начнётся загрузка.

<a href="prices.xlsx">Прайслист</a>

#ydkhtml

👍8🔥6🗿2

317 views11:03

О валидности разметки

На хабре вышла статья про отрисовку таблиц при помощи Symbiote.js. Это фреймворк, который базируются на веб-стандартах и активно использует API веб-компонентов. За это авторам отдельный респект, потому что мне нравится идея максимально близких к платформе инструментов, полагающихся на стандарты.

В статье описывается работа с таблицами при помощи этого фреймворка. Всё бы хорошо, но приводятся примеры итоговой сгенерированной разметки:

<my-table>
  <table>
    <table-row>
      <td>Row number: 1</td>
      <td>Date: 1714405915233</td>
    </table-row>
    <table-row>
      <td>Row number: 2</td>
      <td>Date: 1714405915233</td>
    </table-row>
    <table-row>
      <td>Row number: 3</td>
      <td>Date: 1714405915233</td>
    </table-row>
  </table>
</my-table>

Этот фрагмент разметки не является валидным. Дело в том, что по спецификации внутри <table> разрешено вкладывать только <caption>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>, <noscript> и <template>. Причём не просто вкладывать в произвольно порядке, а по определённым правилам.

В примере кода из статьи внутрь <table> вкладываются кастомные элементы <table-row>, что недопустимо. На этом этапе валидатор бросает критическую ошибку и прекращает дальнейший разбор разметки.

Фреймворк добавляет таким элементам свойство display: contents, которое делает кастомный элемент "прозрачным" при построении раскладки и не учитывает его. Но физически элемент всё равно остаётся в DOM и AOM, поэтому свойство проблему не решает.

Чем такая невалидная разметка чревата? Страница будет невалидной, валидатор не сможет полностью проверить страницу, ассистивные технологии, парсеры и поисковые роботы не распознают данные из таблицы, перестанут работать API-методы таблиц (добавление строк, получение данных и т.д.).

Как в этой ситуации поступить? Раз инструмент полагается на кастомные элементы, то всю таблицу стоит делать при помощи них и добавлять дополнительную семантику при помощи ARIA-атрибутов как рекомендуется в WAI-ARIA практиках для таблиц.

<my-table role="table" aria-rowcount="3" aria-colcount="2">
  <table-row role="row">
    <table-cell role="rowheader">Row number: 1</table-cell>
    <table-cell role="cell">Date: 1714405915233</table-cell>
  </table-row>
  <table-row role="row">
    <table-cell role="rowheader">Row number: 2</table-cell>
    <table-cell role="cell">Date: 1714405915233</table-cell>
  </table-row>
  <table-row role="row">
    <table-cell role="rowheader">Row number: 3</table-cell>
    <table-cell role="cell">Date: 1714405915233</table-cell>
  </table-row>
</my-table>

Web Accessibility Initiative (WAI)

Table Example

Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).

❤8👍5

318 views18:04

Новости веб-компонентов

На днях прошли ежеквартальные встречи членов комьюнити группы веб-компонентов (WCCG). Среди них люди из разных компаний и независимые эксперты, которые вместе определяют направление развития веб-компонентов.

На этот раз обсуждались следующие темы:
- Scoped Element Registries
- ARIA Reference Target
- Open Stylable Shadow Roots
- DOM Scheduler API
- Declarative Custom Elements
- HTML Modules

Из интересного, показали презентацию с примером веб-компонента, который демонстрирует возможности Declarative Custom Elements (кастомные элементы, создаваемые в HTML без Javanoscript). Вполне возможно, что в похожем виде в будущем это заедет в браузеры.

Демонстрируемый компонент <stampino-element> позволяет определять новый пользовательский элемент, добавлять стили через Constructed Stylesheet, определять шаблон с выражениями (как планируется в API Template Instantiation), определять атрибуты и свойства, наследоваться от других элементов и добавляет новые методы жизненного цикла.

Это хороший пример того, как при помощи веб-компонентов можно создавать демонстрационные решения, полифилы и proof of concept для будущих решений.

Google Docs

Declarative Custom Elements with Stampino

Stampino Element @justinfagnani

🔥5

338 views11:04

Сброс стилей

Довольно частое явление в интерфейсах — псевдокнопки. Я думаю, что многие могли видеть подобный код:

<div role="button" tabindex="-1">Button</div>

Конечно, так делать не стоит, это плохая практика. Для кнопок существует элемент <button>. У него есть встроенная роль, семантика, скринридеры правильно озвучивают, есть встроенная реакция на нажатие Enter и Space и много чего ещё.

Почему же тогда делают <div>? Одна из причин — встроенные браузерные стили: рамка, фон, внутренние отступы, шрифт и т.д. Причём в каждом браузере свой набор этих встроенных стилей и кнопки выглядит по-разному.

В итоге нужно либо подключать reset, либо переопределять стили. Тащить reset не всегда хочется, к тому же это лишний CSS. А при переопределении стилей есть риск забыть про какие-то частные случаи. Поэтому проще взять стилистически нейтральный <div> и сделать из него кнопку.

Но есть другое решение — свойство all. Это псевдоним для всех свойств CSS, кроме direction и unicode-bidi. Эти два свойства, прямо скажем, редкие гости, поэтому можно считать, что all — синоним для всех свойств. Поэтому можно сделать так:

button {
  all: unset;
  /* далее нужные стили кнопки */
}

Что тут происходит? Ключевое слово unset сбрасывает значение всех CSS-свойств до inherit (если свойство наследуемое) или initial (если не наследуемое). Иными словами, приводит их к значениям по умолчанию. Получаем кнопку, у которой все свойства имеют значения по умолчанию, прямо как у <div>. А далее уже можно определять нужные стили.

А таким образом можно в 3 строки сделать сброс всех свойств для всех элементов:

* {
  all: unset;
}

Но как в этом примере, сбрасывать все стили для всех элементов, всё-таки, я не рекомендую. А вот с кнопкой вполне себе вариант.

🔥13👍7❤2

341 views11:03

Результаты State of HTML

После длительного затишья опубликованы результаты опроса State Of HTML 2023. Напомню, что это опрос для разработчиков на тему использования различных фич HTML, DOM и других браузерных API. Цель этого опроса — выявить проблемные моменты и болевые точки, с которыми сталкиваются разработчики.

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

Stateofhtml

State of HTML 2023

The 2023 edition of the annual survey about the latest trends in the HTML ecosystem.

🔥2

280 viewsedited 11:04

Делать разбор результатов State of HTML?

Final Results

89%

Да

Нет

Не знаю/смотреть ответы

38 voters267 views11:04

Global Accessibility Awareness Day 2024

Сегодня третий четверг мая — всемирный день информирования о доступности (Global Accessibility Awareness Day). Так как моя деятельность в том числе сосредоточена в этом направлении и тематика канала соответствует, не могу пройти мимо.

Предлагаю посмотреть видео про введение в доступность от W3C и видео приложения Be My Eyes.

Второе видео я несколько лет назад увидел в одной из презентаций Виталия Фридмана, автора проекта Smashing Magazine. И этот ролик лично меня растрогал.

Wikipedia

Global Accessibility Awareness Day

The purpose of GAAD is to get everyone talking, thinking and learning about digital (web, software, mobile, etc.) access/inclusion and people with different disabilities.

❤7👍2🥰2

310 viewsedited 15:03

Обновлённые Easy Checks

Ко всемирному дню информирования о доступности, команда WAI (Web Accessibility Initiative) опубликовала черновик обновленного чеклиста Easy Checks.

Этот набор базовых проверок доступности предназначен для сайтов и разработан таким образом, чтобы быть понятным и доступным для нетехнических специалистов и тех, кто не знаком с тонкостями доступности. Все проверки достаточно просты, и в новой версии каждая из них представлена на отдельной странице с описанием и примерами. Кроме того, эти проверки снабжены скриптами, которые можно сохранить в закладки (букмарклеты).

Easy Checks включает в себя следующие проверки:
- Проверка наличия текстового описания у изображений (атрибут alt)
- Проверка наличия заголовка страницы (<noscript>)
- Проверка структуры и иерархии заголовков
- Проверка контрастности цветов
- Проверка наличия ссылки для перехода к основному контенту (Skip link)
- Проверка отображения рамки фокуса при использовании клавиатуры
- Проверка указания языка страницы (атрибут lang)
- Проверка возможности масштабирования страницы и ее реакции на это
- Проверка наличия субтитров для видео
- Проверка наличия транскрипции для аудио/видео
- Проверка наличия описания для аудио
- Проверка наличия меток у полей ввода
- Проверка наличия обязательных для заполнения полей ввода

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

Если вы хотите обратить внимание на доступность своего сайта, но не знаете, с чего начать, то Easy Checks — отличная отправная точка. Он не сложный и не требует специальных знаний в области доступности и инструментов для проведения аудита. Кроме того, Easy Checks может быть полезным руководством для внедрения в работу команды QA.

Web Accessibility Initiative (WAI)

Easy Checks – A First Review of Web Accessibility

Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).

🔥5❤4👍2

560 views11:04

Контент на ближайшее время

Этот месяц оказался богатым на события: Google I/O, результаты State of HTML, встречи WCCG, митап W3C AC, GAAD и т.д. Поэтому я готовлю много контента по итогам этих мероприятий, который в ближайшее время будет на канале.

Оставайтесь на связи! 🤙

👍8❤6🔥2

347 views11:03

UX + Dev = a11y

Контролируйте размер подсказок для картинок Кто-то сделал так <body> <img src="eiffel-tower.webp" alt="Эйфелева башня расположена рядом с рекой, через которую перекинут мост. Вдоль моста выстроились лодки"> </body> Я предлагаю делать так <body> <img…

Длина alt

Не стоит писать слишки длинный текст в alt. Почему — объясняет Стас в своём канале UX + Dev = A11y. Если вам интересна тема доступности, то рекомендую подписаться.

UX + Dev = a11y

Контролируйте размер подсказок для картинок

Кто-то сделал так

<body>
<img src="eiffel-tower.webp" alt="Эйфелева башня расположена рядом с рекой, через которую перекинут мост. Вдоль моста выстроились лодки">
</body>

Я предлагаю делать так

<body>
<img…

👍3🔥3

271 views18:16

Edge WebUI 2.0

Команда Microsoft Edge поделилась статьёй и коротким роликом о проекте под названием WebUI 2.0. Это внутренний проект, направленный на переработку архитектуры пользовательского интерфейса Edge и улучшение его производительности.

Не секрет, что интерфейс браузеров (вкладки, поисковая строка, панель настроек, главный экран, DevTools и т.д.) разрабатывается при помощи веб-технологий HTML, CSS и Javanoscript. Я как-то писал, что можно проинспектировать DevTools в DevTools.

Команда Edge использует React для разработки некоторых частей интерфейса браузера. В рамках внутренних экспериментов, с целью улучшения производительности, они опробовали новую архитектуру и получили прирост показателей. Новая архитектура основана на принципе markup-first и веб-компонентах.

Начиная с Edge 122, те части интерфейса, которые были переписаны под новую архитектуру, стали в целом на 42% быстрее для пользователей и на 76% быстрее для пользователей со слабыми устройствами (без SSD и менее 8гб оперативной памяти). В Edge 124, панель Favorites станет на 40% быстрее.

WebUI 2.0 полагается на рендрениг обычной разметки HTML, библиотеку веб-компонентов, новые браузерные API и паттерны на их основе. Целью было получить сопоставимый опыт с фреймворками, но быть ближе к веб-платформе и использовать меньше стороннего кода. И, кажется, у них это получилось.

Microsoft Edge Blog

An even faster Microsoft Edge

Over the past month, you may have noticed that some of Edge's features have become faster and more responsive. That's because Edge is on a journey to make all user interactions in the browser blazing fast starting with some of our newest features and

🔥4❤2🤓1

250 viewsedited 11:05

Google I/O 24: The state of CSS and Web UI (часть 1)

14 мая прошла ежегодная конференция Google I/O. В секции про Web, Уна Кравец рассказала, что нового уже появилось и появится в скором времени в HTML и CSS в рамках браузера Google Chrome. Фич на самом деле очень много и некоторые из них уже прям хочется затащить на проекты. Уж очень они крутые и полезные.

Условно, фичи можно разделить на 3 группы:
- Интерактивный опыт и анимации
- UI-элементы и примитивы
- Фичи для DX

Видео-презентация доступна на ютубе, ну а я предлагаю кратко рассмотреть каждую фичу по группам с ссылками на дополнительные материалы.

⬇️

YouTube

The latest in Web UI (Google I/O ‘24)

Get a rundown of all the things developers should know that landed in the browser for UI development since the last I/O, plus what's on the product roadmap.

Speaker: Una Kravets

Watch more:
Check out all the Web videos at Google I/O 2024 → https://goo.gle/io24…

👍3

251 viewsedited 11:04

Google I/O 24: The state of CSS and Web UI (часть 2)

Начнём с новых фич, связанных с анимацией. И тут действительно много интересного.

Scroll-driven animations

Представьте сайты, где при прокрутке летают и появляются элементы. Для подобных задач обычно используются библиотеки, вроде GSAP Scrolltrigger. Так вот, Scroll-driven animations — это встроенный способ делать анимации, привязанные к прокрутке или появлению в области просмотра. Причём делать это можно как в CSS, так и в Javanoscript (Web Animations API). Подробнее про Scroll-driven animations, небольшой видео-курс по Scroll-driven animations, примеры на сайте scroll-driven-animations.style, полифилл. Доступно в Chrome и Edge 115+ и Firefox Nightly.

Same-document View Transitions

Одна из горячо обсуждаемых новинок. View Transitions — это API для анимации переходоа между страницами, правда пока только для SPA. При помощи этого API можно реализовать бесшовные переходы между экранами приложения, как на мобильных устройствах. Подробнее про Same-document View Transitions. Доступно в Chrome и Edge 111+.

View Transition Classes

View Transition продолжает развиваться. Новая фича добавляет возможность применять одну анимацию к группе однотипных элементов с указанным классом. Например, можно анимировать изменение порядка карточек в результате сортировки, фильтрации, добавления или удаления их из списка. Подробнее про View Transition Classes. Доступно в Chrome и Edge 125+.

View Transition Types

Другое улучшение для View Transition API — типы, чтобы задавать разные анимации для перехода со одной страницы на другую и обратно. Например, переход с главной на каталог происходит как slide-left (главная уезжает влево, каталог выезжает справа). А обратная анимация slide-right (каталог уезжает вправо, главная выезжает слева). Подробнее про View Transition Types. Доступно в Chrome и Edge 125+.

Cross-document View Transition

А вот это вообще киллер-фича — анимированные переходы между страницами обычных многостраничных сайтов. И для этого не нужно делать SPA. Кстати, похожее умел делать ещё Internet Explorer 5.5 🌚, а Chrome вот-вот научится. Подробнее про Cross-document View Transition. Доступно в Chrome и Edge 126+.

Scoped transitions, Gesture-driven transitions, Navigation matching in CSS

Всё это про будущие доработки и улучшения View Transition API. Интеракция с частями страницы во время анимации, основанные на жестах анимации (переключение страниц свайпами влево-вправо на телефонах, удаление элементов смахиванием вверх) и полное управление анимацией через CSS.

Animate display and content-visibility on a keyframe timeline

Свойства display и content-visibility не анимируются. Приходится использовать костыли, чтобы красиво показать диалоговое окно. Так вот, появляется возможность анимировать свойство display внутри @keyframes. Свойства применятся в самом начале или конце таймлайна анимации. Подробнее про анимацию display и content-visibility. Доступно в Chrome и Edge 116+ и Safari TP.

transition-behavior: allow-discrete

А если нужно анимировать display при помощи transition? Добавляется новое свойство transition-behavior: allow-discrete, которое включает режим анимации дискретных свойств (в том числе display). Подробнее про transition-behavior. Доступно в Chrome и Edge 117+ и Safari 17.4.

@starting-style

А если хочется анимировать какие-то свойства при появлении элемента? Для этого добавлена директива @starting-style. Она позволяет задавать стартовые значения свойств, которые будут анимированы к новым значениям, указанным для элемента. Подробнее про @starting-styles. Доступно в Chrome и Edge 117+ и Safari 17.5.

overlay

С внедрением <dialog> и Popover API, в браузерах появился отдельный слой top-layer и псевдо-элемент ::backdrop. Есть необходимость как-то это анимировать. overlay даёт возможность делать плавные анимации появления и исчезновения диалогов и попапов в сочетании с @starting-style и allow-discrete. Подробнее про overlay. Доступно в Chrome и Edge 117+.

🔥4

260 views11:05

Google I/O 24: The state of CSS and Web UI (часть 3)

Тут рассмотрим новые возможности, связанные с UI-компонентами и примитивами для их создания.

Popover API

Новый API позволяет делать различные выпадающие элементы при помощи кнопки, ряда новых атрибутов и псевдо-классов в CSS. Про это я уже рассказывал ранее и ещё расскажу в ближайшем будущем. Подробнее про Popover API. Доступно в Chrome и Edge 114+, Firefox 125+ и Safari 17+.

Anchor Positioning API

Если вы когда-нибудь делали элементы, которые должны быть привязаны к другим элементам (тултипы, например), то вы использовали что-то вроде Popper или Floating UI. Новый API Anchor Positioning предлагает встроенный в браузеры функционал привязки элементов друг к другу без Javanoscript. В сочетании с Popover API это предоставит возможность реализовывать многие интерфейсные паттерны в простом декларативном стиле без лишних библиотек. Подробнее про Anchor Positioning API и песочница для экспериментов с разными вариантами позиционирования. Доступно в Chrome и Edge 125+.

interesttarget

Доработки Popover API продолжаются. Сейчас для переключения поповера нужна кнопка и клик по ней. Новый атрибут interesttarget даст возможность вместо клика вызывать поповер по ховеру или фокусу на кнопке. Также рассматривается возможность добавить этот атрибут для ссылок. Popover API с interesttarget и Anchor Positioning API позволит создавать тултипы. Подробнее про interesttarget в предложении OpenUI. Фича в разработке, пока не доступна ни в одном из браузеров.

Invokers API

Продолжение идей, заложенных в Popover API. Почему декларативно, при помощи кнопки, можно только скрывать/показывать поповер? Как на счёт других частых действий, для которых пишется Javanoscript? Invokers API добавляет кнопке новые атрибуты, при помощи которых можно декларативно вызывать действия с другими элементами. Например, открыть <dialog> без Javanoscript или поставить <video> на паузу. Подробнее про Invokers API в предложении OpenUI. API доступно в Canary-версиях всех браузеров.

Stylable <select>

Наконец-то появляется решение для давней проблемы — стилизации <select>. Суть в том, чтобы доработать парсер HTML и позволить вкладывать внутрь <select> такие элементы, как <button> и <datalist>, а также вкладывать в <option> любую произвольную разметку. Это даст возможность стилизовать <select>, его шапку, выпадающий список и опции. Подробнее про Stylable Select Element в предложении OpenUI. Доступно в Chrome и Edge Canary.

Exclusive Accordion

Расширение для существующего элемента <details>, которое добавляет ему новый атрибут name. При помощи него можно объединить несколько <details> в группу, где только один элемент может быть раскрыт одновременно. Самый настоящий нативный аккордеон! Подробнее про Exclusive Accordion. Доступно в Chrome и Edge 120+ и Safari 17.2+.

:user-valid и :user-invalid

У полей ввода есть псевдо-классы :valid и :invalid. Проблема в том, что они срабатывают сразу, даже если пользователь ещё не успел провзаимодействовать с полями ввода. Это приводит к плохому пользовательскому опыту. Новые псевдо-классы :user-valid и :user-invalid сработают только если пользователь уже взаимодействовал с полями ввода. Подробнее про эти псевдо-классы. Доступно в Chrome и Edge 119+, Firefox 88+ и Safari 16.5+.

field-sizing: content

Новое свойство CSS для управления размером полей ввода. Представьте задачу: нужно сделать так, чтобы при вводе текста в <textarea>, её размер увеличивался по мере ввода текста. Свойство field-sizing: content как раз решает эту задачу без лишних скриптов. Подробнее про field-sizing. Доступно в Chrome и Edge 123+.

<hr> внутри <select>

Внутрь <select> можно вкладывать только <option> и <optgroup>, другие элементы будут игнорироваться. Если нужно визуально разграничить опции, то применялись различные хаки. Теперь в <select> можно вкладывать элемент <hr>, который будет создавать разделитель между опциями. Мелочь, а приятно. Подробнее про <hr> в <select>. Доступно в Chrome и Edge 119+, Firefox 122+ и Safari 17+.

🔥6👍1

250 viewsedited 11:11

Google I/O 24: The state of CSS and Web UI (часть 4)

Последняя и заключительная часть про новинки HTML и CSS с Google I/O. В этой части посмотрим на различные фичи, улучшающие DX.

CSS Nesting Lookahead

В CSS появилась вложенность, к которой многие привыкли в препроцессорах. В базовой реализации было неудобно добавлять & перед вложенными элементами. Это исправили и теперь писать & не обязательно. Подробнее про Nesting Relaxed Syntax. Доступно в Chrome и Edge 120+, Firefox 117+ и Safari 17.2+.

align-content в блочных элементах

Фича, которая вызвала дикий восторг у аудитории. Мы привыкли к свойству align-content внутри flex и grid. И если нам нужно что-то вертикально выровнять, мы делает контейнер flex или grid только ради того, чтобы применить align-content. Теперь свойство align-content будет работать и внутри block. Подробнее про align-content в блочных элементах. Доступно в Chrome и Edge 123+, Firefox 125+ и Safari 17.4+.

text-wrap: balance и text-wrap: pretty

Новые значения для выравнивания и переноса текста. text-wrap: balance балансирует текст, чтобы длина всех строк в блоке была как можно более равной. Это полезно для заголовков. Подробнее про balance. Доступно в Chrome и Edge 114+, Firefox 121+ и Safari 17.5+. text-wrap: pretty переносит текст таким образом, чтобы в конце текста на новой строке не оказалось одно слово. Подробнее про pretty. Доступно в Chrome и Edge 117+.

word-break: auto-phrase

Ещё одно улучшение для работы с текстом в CSS. Новое значение word-break: auto-phrase позволяет управлять автоматическим переносом и правильно переносить фразы для CJK-языков (Китайский, Японский, Корейский и подобные). Подробнее про auto-phrase. Доступно в Chrome и Edge 119+.

text-spacing-trim

В типографии CJK-языков принято разделять знаки препинания небольшими отступами для лучшей читаемости. Свойство text-spacing-trim как раз включает режим, при котором отступы автоматически добавляются. Фича будет по умолчанию включена в браузерах, которые поддерживают это свойство. Подробнее про text-space-trim и его полное описание в черновике спецификации. Доступно в Chrome и Edge 123+.

Relative Color Syntax

Продолжается работа над цветами в CSS. Relative Color Syntax позволяет изменять компоненты цветов в разных цветовых пространствах и форматах. Например, можно взять цвет в формате oklch и изменить параметры (l - lightness, c - chroma, h - hue), сделать цвет чуть ярче или тусклее, изменить оттенок. Ещё это позволяет конвертировать цвета из одного формата в другой. Подробнее про Relative Color Syntax. Доступно в Chrome и Edge 119+ и Safari 16.4+.

light-dark()

Новая CSS-функция light-dark() принимает два цвета. Первый будет применён для светлой темы (prefers-color-scheme: light), второй — для тёмной темы (prefers-color-scheme: dark). Сейчас это же можно реализовать при помощи Custom Properties и prefers-color-scheme. Но с light-dark() это удобнее. Подробнее про light-dark() и плагин для PostCSS. Доступно в Chrome и Edge 123+, Firefox 120+ и Safari 17.5+.

:has()

:has() — родительский селектор, с помощью которого можно стилизовать элемент в зависимости от его дочерних элементов и их состояний. Вариантов применения уже придумано огромное количество. Интерактивный гайд Ахмада Шадида по :has(). Доступно в Chrome и Edge 105+, Firefox 121+ и Safari 15.4+.

Container Queries

Container queries позволяют менять внешний вид элемента в зависимости от ширины контейнера, а не ширины всего экрана. Можно будет создавать универсальные компоненты, которые будут адаптироваться в зависимости от места использования. Подробнее про Container Queries, Интерактивный гайд Ахмада Шадида по Container Queries. Доступно в Chrome и Edge 106+, Firefox 110+ и Safari 16+.

property

По умолчанию все Custom Properties — строки. Браузер сам преобразует их в нужные типы. Но браузер не понимает, как анимировать из строки в строку. @property решает эту проблему. Директива позволяет указать тип, значение по умолчанию и наследуемость для Custom Properties. Подробнее про @property. Доступно в Chrome и Edge 85+, Firefox 128+ и Safari 16.4+.

🔥5👍3

290 viewsedited 11:04

Результаты State Of HTML 2023 (часть 1)

Опубликованы результаты опроса State Of HTML. С цифрами и выводами можно ознакомиться на сайте опроса. Я сосредоточусь на отдельных моментах.

Опытные разработчики

28% участников — разработчики с опытом 11-20 лет, 24% — с опытом 6-10 лет, 16% — с опытом более 20 лет. Аудитория достаточно опытная.

Нарушения здоровья

20% отметили те или иные нарушения здоровья: когнитивные, проблемы со зрением, проблемы со слухом и нарушения, связанные с мобильностью. Это примерно согласуется со всемирной статистикой. Так что доступность важна.

Список для чтения

В ходе опроса можно было сохранять фичи в список для чтения. Больше всего в список добавляли:
- <datalist>
- <selectlist>
- Popover API
- input.showPicker()
- HTML Media Capture
- inert
- <search>
- Badging API
- Exclusive Accordion
- autocomplete

Сделаю отдельные посты про каждую из этих фичей.

Формы

Главными претензиями к формам, как были, так и остаются — стилизация и проблемы с полями ввода. Также у разработчиков вопросы к механизму валидации, браузерной поддержке, обработке данных форм, доступности, обработке ошибок, contenteditable, управлению состоянием форм и лейблам.

Интерактивность

Разработчики примерно в равной степени используют Javanoscript без фреймворков (89%) и фреймворки (87%) для создания интерактивности. Основные болевые точки: браузерная поддержка, манипуляции DOM, образовательные материалы, зависимость от Javanoscript, обработка событий, веб-компоненты, доступность, управление состоянием, реактивность и стилизация.

Контент

Разработчики активно используют Intl API для форматирования дат, чисел и т.д. Главные боли с контентом: SVG, менеджмент изображений, <iframe>, интернационализация, браузерная поддержка, стилизация, безопасность и приватность, работа с датами, образовательные материалы и проблемы с <input>.

👍3🤓1

273 viewsedited 11:06

About

Blog

Apps

Platform