Событие Apart 2022 Денвер завернули вчера. И хотя в этот раз я не смог успеть на все три дня, я все же поймал вчерашний экшн — и это было удивительный. Я не очень общительный или общительный, но это была первая конференция, на которой я был по крайней мере за пару лет, и личное знакомство с людьми было невероятно освежающим.
Я взяла на заметку, конечно! Я подумал, что опубликую их здесь, потому что делиться — значит заботиться. По крайней мере, так мой шестилетний сын сказал мне на днях, когда вчера вечером попросил кусочек моего десерта.
Я разобью это по динамикам. Справедливое предупреждение: Я все о рукописных заметках и симпатичном визуальном парне, поэтому мои заметки, как правило, менее… структурированы, чем большинство. И эти заметки — это то, что мне особенно запомнилось. Пусть они и не являются основной идеей ведущего, но они привлекли мое внимание!
Крис Койер: Веб-сайты сейчас хороши
Крис говорил об этом раньше (мы связали это только на прошлой неделе), но на этот раз существенно расширил его, особенно с подробностями о относительные единицы контейнера который в сочетании с clamp(), чтобы обеспечить более точную реакцию, поскольку значения относятся к контейнеру, а не к области просмотра. Итак, вы знаете, как мы часто используем ширину области просмотра (vh) единиц для типа жидкости?
font-size: clamp(1rem, 1rem + 2vw, 2rem);Ну, мы можем использовать относительную единицу контейнера, например встроенный размер запроса контейнера (cqi) вместо этого, где 1cqi равен 1% встроенного размера контейнера (вот проект спецификации на это):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Крис также немного рассказал о преимуществах производительности хостинг на границе. Наверное, неудивительно, потому что он письменный об этом здесь более чем в несколько раз. Даже будучи человеком, который уже читал эти статьи, я, честно говоря, не понимал всей концепции вычислений на периферии.
Идея обманчиво проста: глобальные CDN могут обслуживать активы быстро, потому что они размещают их географически близко к пользователю. Это довольно стандартная практика для обслуживания растровых изображений. Но он распространяется и на статические файлы, такие как те же файлы HTML, CSS и JavaScript, которые обеспечивают работу сайта — создавайте их заранее и обслуживайте уже скомпилированные и оптимизированные файлы из быстрой глобальной CDN. Вот и вся концепция Jamstack!
Но что, если вам все же требуется от него ответ сервера? Это не очень остроумно, не так ли? Что ж, теперь у нас есть обработчики, способные работать с одним URL-адресом, заранее извлекая данные и вводя их перед рендерингом — прямо из CDN. Конечно, в фоновом режиме происходит дополнительная работа. Тем не менее, тот факт, что мы можем динамически извлекать данные, вводить их, предварительно создавать их, обслуживать их статически и услуги Эстонии, а географически ближе к пользователю сделать это невероятно быстро.
Толу Адегбите: как победить в ARIA и повлиять на доступность в Интернете
Господи, это была отличная презентация! Толу Адегбите так усердно обучала меня WAI-ARIA, что мне было трудно записать все жемчужины, которыми она поделилась — роли! Состояния! Маркировка! Описания! Все было необычайно хорошо освещено, и я знаю, что буду возвращаться к этому снова и снова.
Но одна конкретная вещь, которая привлекла мое внимание, — это доступность встроенного SVG. Несмотря на то, что SVG связан с другими типами ресурсов дизайна, тот факт, что в конце концов это разметка, выделяет его, потому что это не всегда идентифицируется как изображение.
Вспомогательные технологии с большей вероятностью будут читать встроенный SVG как изображение, присвоив ему надлежащую доступную роль и метку:
Мириам Сюзанна: Каскадные слои !важности
Эй, еще один выпускник CSS-Tricks! Мириам потратила кучу времени и усилий на Спецификация каскадных слоев. Она также написала большой старый путеводитель по ним здесь, в CSS-Tricks, и рассказали о них на An Event Apart.
Что меня больше всего зацепило, так это то, насколько велик этот ментальный сдвиг. Сама по себе концепция не сложна. Объявить @layer в верхней части документа CSS перечислите слои в порядке специфики, затем напишите стили в этих слоях. Но для такого старого динозавра, как я, который некоторое время писал CSS, мне придется привыкнуть к тому факту, что каскадные слои позволяют простому селектору классов превзойти то, что обычно обладает более высокой специфичностью. как удостоверение личности.
🤯
Мириам также напомнила аудитории, что каскадные слои — это всего лишь один из инструментов, который есть в нашем наборе инструментов для управления специфичностью, в дополнение к селекторам, влияющим на специфичность (например, :is(), :where()и :has()).
О, а это интересный момент. Проходя историю специфичности в CSS, Мириам вспомнила, что !important изначально был разработан как инструмент для переопределения пользовательского агента и авторских стилей. Но в какой-то момент мы приняли его, чтобы вывести авторские стили на первое место. Каскадные слои помогают удалить оправдание нужно использовать !important потому что они дают нам возможность «расставить приоритеты слоев и защитить наследство".
Красиво сказано, Мириам!
Дэйв Руперт: разблокировка вашего бэклога специальных возможностей
Представьте, что однажды вы проснулись и увидели сотни уведомлений GitHub о проблемах на вашем сайте. С чего вы вообще начинаете? Может быть, закрыть свой ноутбук и вместо этого получить корневой канал? Это случилось с Дэйвом! Автоматизированный аудит доступности выдал огромное количество ошибок и назначил их Дэйву в качестве заявок на исправление.
Но он заметил закономерность после того, как взял электронную таблицу Excel с этими проблемами, переместил их в Notion для лучшего просмотра, скрыл ненужные столбцы, классифицировал все и отобразил результаты в логических группах. Многие проблемы, о которых сообщалось, были одной и той же проблемой, повторяющейся на нескольких страницах. Тот факт, что автоматический тест возвращает несколько ошибок, не означает, что все они уникальны. Это уменьшило хороший кусок билетов.
Далее он показал, как — при относительно небольших усилиях — накопившиеся проблемы сократились почти на 50%.
Там есть что почерпнуть, особенно в отношении того, как мы обрабатываем и организуем нашу работу. Самый важный вывод для меня — слова Дейва, которые сказали, что мы должны делать акцент на людях и взаимодействиях, а не на процессах и инструментах. Такие инструменты, как сканирование на наличие ошибок доступности, полезны, но они могут не рассказать всей истории. Вместо того, чтобы верить им на словах, стоит задать вопросы и получить больше информации, прежде чем погрузиться в беспорядок.
В качестве бонуса реорганизация проблем в Notion позволила Дейву сгруппировать проблемы таким образом, чтобы четко показать, какие нарушения его продукт активно дискриминирует, что дало ему больше сочувствия к этим промахам и тому, как расставить их по приоритетам.
Еще одна виртуальная сессия Хуэй Цзин Чена завершила день, но, по общему признанию, я пропустил примерно половину из них, потому что вел разговор в коридоре. Разговор того стоил, хоть я и расстроен, что пропустил презентацию. Я посмотрю это видео, когда оно будет опубликовано!
