Окрема подія 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. Звичайно, у фоновому режимі виконується додаткова робота. Тим не менш, той факт, що ми можемо динамічно отримувати дані, вводити їх, попередньо створювати, обслуговувати статично на вимогу, а його географічне розташування ближче до користувача робить це неймовірно швидким.
Tolu Adegbite: Як виграти в 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 дозволила Дейву групувати проблеми таким чином, щоб чітко показувати, які порушення активно дискримінував його продукт, що дало йому більше співчуття до цих промахів і способів їх пріоритетності.
Ще одна віртуальна сесія Хуей Цзін Ченя завершила день, але, правда, я пропустив приблизно половину, тому що розмовляв у коридорі. Розмова була варта того, хоча я й засмучений, що пропустив презентацію. Я подивлюсь відео, коли воно буде опубліковано!
