Текстовые альтернативы для эмодзи в скринридерах

Наткнулся на старую заметку Стива Фолкнера про то, как звучат в скринридерах эмодзи. Забавно, что одни и те же эмодзи где-то smiling (улыбающийся), где-то grinning (ухмыляющийся), а где-то beaming (сияющий). То есть визуально это одно и то же, но если интерфейс слушать — это разные смыслы.

Мораль: подбирайте эмодзи аккуратно, чтобы нечаянно не ухмыльнуться вместо доброй улыбки ?

https://html5accessibility.com/stuff/2022/01/17/short-note-on-emoji-text-alternative-variations/

State of HTML 2024

Ещё один опрос про состояние веба, на этот раз про HTML. Можете повлиять на то, какие новые возможности работы с элементами появятся в будущем. И заодно узнать про те, что уже есть — вопросы составлены таким образом, что можно чему-то научиться в процессе.

Набрал 340 баллов. Из 49 фичей, упомянутых в опросе, применял на практике 25, слышал о 18. Не зря в подкасте смотрим в релиз-ноуты браузеров, мало какая новинка прошла мимо.

https://survey.devographics.com/en-US/survey/state-of-html/2024

State of HTML 2024

Take the State of HTML survey

TypeScript 5.6

Очередные приятные новинки. Почитал релиз-ноуты, нашёл для себя много поводов обновиться.

1. Проверки на nullish и truthy. Грубо говоря, в TS завезли аналог проверки no\-constant\-binary\-expression из ESLint, хотя это не совсем так. Представьте, что вы где-то опечатались и внутри if написали код, который всегда true. Линтеры умеют такое подсвечивать, теперь умеет и TypeScript. За исключением явного задания if (true), потому что такое вы скорее всего пишете осознанно, например, для дебага или вебпака.

2. Методы Iterator Helper. В ECMAScript на 3-м уровне пропозала появились методы map, filter, reduce, take и другие для итераторов. TypeScript готовится к ним заранее. Не только поддержали новые методы, но и добавили новые встроенные типы IteratorObject и AsyncIteratorObject, которые позволят типизировать то, с чем работает итератор.

3. Строгая проверка итераторов \-\-strictBuiltinIteratorReturn. Раньше было сложно определить, что вернёт итератор, поэтому по сути TS работал с типом any, а это убивает сам смысл типизации. В строгом режиме проверок теперь TS умеет определять типы умнее и начнёт выдавать полезные ошибки в случае неправильного использования результатов итераторов.

4. Поддержка Arbitrary Module Identifiers. В JavaScript можно сначала в модуле написать export { banana as "***?***" };, а потом в месте подключения модуля написать import { "***?***" as banana } from "./foo" — и это будет работать. Я не очень понимаю, для чего это нужно, кроме как для каких-то специфических способов именовать методы вроде MyLib::MyMethod, для совместимости по имени с бекендом, например. Но теперь в TS это поддержали, можно давать странные имена импортируемым сущностям.

5. Опция \-\-noUncheckedSideEffectImports. Раньше TS мог игнорировать файлы, которые подключаются через import "some\-module";, но не существуют. Такие подключения как раз называют импортами сайд-эффектов, потому что обычно оно нужно, чтобы выполнить какой-то код внутри модуля, но не импортировать ничего именованного. И так часто подключают CSS-файлы внутри компонентов. С включённой опцией TS теперь начнёт ругаться, если файл найти не может. Выключить конкретные маски можно, в статье есть пример.

6. Опция компилятора \-\-noCheck. Убирает ненужные проверки типов для вывода новых файлов. По сути если у вас так настроен запуск tsc, что какие-то файлы с типами не нужны, то их и не будет проверять, экономя время. То есть если вы хотите просто быстро сгенерировать JS, не проверяя типы — осторожно, но можно.

7. \-\-build без учёта ошибок зависимостей. Раньше если при билде TS находил ошибку типов в зависимостях, то падал и не давал сборке продолжаться. Теперь он постарается завершить сборку любой ценой, но начнёт всегда создавать файл .tsbuildinfo, куда будет писать информацию об ошибках. Чтобы вернуть старое поведение, нужно добавить в запуск опцию \-\-stopOnBuildErrors.

8. Для быстрой работы в редакторах кода добавили языковому сервису TS возможность анализировать не весь файл целиком, а его видимые регионы. При редактировании огромных файлов сервису на каждый ввод символа нужно быстро реагировать, но это не всегда возможно, если анализировать весь файл сразу. По тестам над файлом checker.ts из самого TS время анализа первого региона из файла стало 143ms, а раньше полная диагностика файла занимала 3330ms.

9. Починили поведение override. Теперь проверки стали строже, требуют наличие перезаписываемого метода в базовом классе.

https://devblogs.microsoft.com/typescript/announcing-typescript-5-6/

Microsoft News

Announcing TypeScript 5.6

Today we’re excited to announce the release of TypeScript 5.6! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by adding syntax for types. Types describe the shapes we expect of our variables, parameters, and functions…

display: contents

Очередной подробный гайд от Ахмада Шадида по тому, как пользоваться некоторыми особенностями CSS. На этот раз про свойство display: contents.

Напомню, display: contents — это указание браузеру вынести элемент выше по дереву для учёта в потоке. Самый частый пример, который приводят, это списки. Например, если нужно поднять элементы списка выше в дереве, чтобы они с другими элементами лежали в одном флекс-контейнере.

Ахмад приводит много полезных примеров, когда избавляться от контейнеров полезно для более простой вёрстки. Интересно применение для адаптивности. Например, на десктопе у вас действительно есть контейнер со сложными отступами внутри, но на мобилке содержимое контейнера встраивается в список рядом. Или когда у вас нет доступа ко всей разметке страницы (привет, Wordpress), но каким-то образом в родителя встроиться нужно.

Важно, display: contents может ломать доступность в списках, таблицах и прочих значимых для скринридеров элементах. Так что применяйте осторожно.

https://ishadeed.com/article/display-contents/

Ishadeed

CSS display contents

Learn how to use display contents to build more fluid layouts.

Состояние ES5 в вебе

Филип Уолтон ещё в 2017 году показал технику, которая позволяет для старых браузеров загружать отдельный транспилированный в ES5 код, а для современных — свежий модный ES6. В этом году он решил проверить, используют ли популярные библиотеки до сих пор ES5 как дефолт, когда как будто в этом уже нет нужды.

- Babel превращает строчку console.log([1, 2, 3].at(\-1)) в 11217 байт кода, используя при этом 71 зависимость.
- Из популярных современных бандлеров только Babel и TypeScript используют транспиляцию в ES5 по умолчанию. Остальные сборщики всё-таки опираются на «современные браузеры».
- Популярные библиотеки тоже постепенно переходят на подход с современным синтаксисом в коде по умолчанию, без поставки ES5-версии. Хотя React и Lodash всё ещё содержат только ES5-код при подключении как зависимость.
- При этом Филип проанализировал топ популярных сайтов через HTTP Archive и обнаружил, что 89% сайтов подключают хотя бы один файл, где есть ES6+ фича без транспиляции. То есть в старых браузерах всё равно что-то сломается.
- То, во что превращается исходный код, должен решать пользователь, а не библиотека. Если мне зачем-то всё ещё нужно превращать мой код в ES5-бандл, я могу настроить сборку сам.
- На сборщик надейся, а сам тестируй. Какая бы сборка у вас ни была, собирайте клиентские ошибки, тестируйте приложения в популярных браузерах, не бойтесь автотестов с настроенными браузерными фермами.

https://philipwalton.com/articles/the-state-of-es5-on-the-web/

Philipwalton

The State of ES5 on the Web

Should web developers and JavaScript library authors still transpile their code to ES5? This post looks at what the data suggests based on what popular libraries, tools, and websites are doing

CLI для caniuse

Брамус собрал консольную утилиту, чтобы смотреть на данные caniuse прямо из терминала. Причём можно ещё и подключить автодополнение для bash/zsh/fish.

Поигрался — выглядит интересно. Если надо быстро посмотреть поддержку, без деталей, то экономит время. Но полноценной заменой caniuse, конечно, эта утилита не станет. Уж слишком я люблю с фильтрами разными на сайте играться. И не всегда помню правильное название CSS-фичи, ищу по ключевым словами, а утилита от Брамуса не всегда понимает, что я от неё хочу.

https://github.com/bramus/caniuse-cli

GitHub

GitHub - bramus/caniuse-cli: Command line tool for “Can I Use …” and MDN Browser Compat Data

Command line tool for “Can I Use …” and MDN Browser Compat Data - bramus/caniuse-cli

TypeScript 5.5

Подъехал сочный релиз. Безусловно, надо вчитываться в код в анонсе, чтобы понять детали, но вот, что меня радует из новинок.

1. Inferred Type Predicates. TypeScript становится всё умнее и учится понимать из контекста, с какими типами мы работаем. Например,

```

const definedEntities = entities
.map(e => allEntities.get(e))
.filter(e => e !== undefined);

definedEntities.forEach(e => e.doSomething());

```

Раньше такой код выдавал бы '' is possibly 'undefined'. Сейчас TS понимает, что выше по коду все undefined уже ушли. Можно будет убрать столько as из кода!

1. Проверка синтаксиса регулярных выражений. И на опечатки укажет, и подсветит, когда с именованными группами вы работаете не так, как надо. Экономия времени полезная получится.

2. Поддержка новых методов Set из EcmaScript. Там добавили всякие пересечения, исключения и прочие полезные операции не так давно. Теперь оно и в TS будет валидно обрабатываться.

3. Новый флаг \-\-isolatedDeclarations, который будет приучать вас более явно задавать типы для экспортируемых сущностей. Особенно полезно, если вы генерируете .d.ts для ваших библиотек.

4. В конфиге теперь можно пользоваться переменной ${configDir}, чтобы ссылаться на папку, в которой конфиг находится. Если у вас разные конфиги в разных папках, проще будет эти самые папки перемещать по проекту.

5. Сам пакет TypeScript «схуднул» на 30%. CI/CD станут быстрее.

6. Больше нельзя написать type undefined = any;. Честно говоря, не знал, что раньше было можно, как-то не было необходимости такие подлянки в проекты вставлять. Но теперь совсем нельзя.

И ещё всякое разное. Скидывайте команде, чтобы был повод завести тикет на обновление TS в проекте.

https://devblogs.microsoft.com/typescript/announcing-typescript-5-5/

Microsoft News

Announcing TypeScript 5.5

Today we’re excited to announce the release of TypeScript 5.5! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent…

Скорее всего у вас была похожая задачка: при показе всплывающего окна сделать так, чтобы за ним не скроллился контент. Обычно для такого при открытии модалки при помощи JavaScript на body добавляют overflow: hidden. Но у такого подхода есть пара недостатков:
- Нужен JavaScript там, где он как будто не должен быть.
- Контент за модалкой начинает прыгать, потому что скроллбар убирается, а это влияет на ширину страницы.

Крис Койер делится простым рецептом, как на современном CSS эти недостатки убираются:
- Вместо JavaScript можно использовать body:has(dialog[open]). Если модалки сделаны при помощи dialog, то такого селектора достаточно.
- На html можно добавить scrollbar\-gutter: stable;, чтобы при открытии модалки скроллбар прятался из-за overflow: hidden, но место под него оставалось. То есть контент прыгать не будет.

https://frontendmasters.com/blog/scroll-locked-dialogs/

Frontendmasters

Scroll-Locked Dialogs – Frontend Masters Boost

I just wrote about the <dialog> element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has().…

Что нового в браузерах за месяц

Ох, как же мне теперь удобно станет статистику для докладов собирать!

Патрик Броссет собрал страничку, которая берёт данные из пакета web\-features (большой сборник веб-фич), склеивает это с browser\-compat\-data и раз в сутки самообновляется. В итоге можно не просто смотреть, какие фичи есть в браузерах, а отслеживать, что появляется в каждом отдельном браузере каждый месяц. Эдакий общий сборник релизов. Очень удобно.

Например, с мая text\-wrap: balance работает во всех свежих версиях Interop-браузеров. А с апреля везде есть popover.

https://web-platform-dx.github.io/web-features-explorer/monthly/

Тестирование HTML при помощи CSS

Ох, как я люблю такие элегантные решения. Хейдон Пикеринг рассказывает, как реализована библиотека REVENGE.CSS (именно капсом, иначе она не работает).

Суть в том, что многие HTML-конструкции можно легко проверить банальной проверкой атрибутов. А в CSS для этого всё есть. Ещё часть можно проверить вложенностью, и тут нас радует :has(). Когда видим конструкцию, которая нас смущает, делаем две вещи:

1. Прямо в интерфейсе жутким шрифтом Comic Sans на розовом фоне выводим текстом предупреждение.

2. В DevTools в CSS-переменную записываем информативное сообщение об ошибке, чтобы его было видно при разработке.

Хейдон дополнительно использует новомодную директиву @layers, чтобы создать слой tests в проекте. Подключает его в самый низ слоёв, чтобы тестовые стили наверняка применились.

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

https://heydonworks.com/article/testing-html-with-modern-css/