アン イベント アパート 2022 デンバー 昨日締めました。 今回は XNUMX 日間すべてに参加できませんでしたが、昨日のアクションはキャッチできました。 素晴らしい. 私はあまり社交的でも外向的でもありませんが、これは私が少なくとも数年で行った最初の会議であり、人々に直接会うのは信じられないほど新鮮でした.
もちろんメモは取りました！ 共有は思いやりがあるので、ここに投稿すると思いました。 少なくとも、昨夜私のデザートを一口頼んだとき、私のXNUMX歳の子供が先日私に言ったことです.
これをスピーカーごとに分けて説明します。 公正警告： 私は手書きのメモとかなり視覚的なフェラが大好きなので、私のメモは他の人よりも構造化されていない傾向があります. そして、これらのメモは私にとって際立っていたものです。 それらはプレゼンターの主なアイデアでさえないかもしれませんが、私の注意を引きました!
Chris Coyier: ウェブサイトは今では良いものになっています
Chris は以前にこの講演を行いました (私たちはそれを結びつけました 先週）、今回は大幅に拡大し、特に詳細については コンテナー相対単位 これと組み合わせると clamp()、値はビューポートではなくコンテナに相対的であるため、より正確な応答性が得られます。 ビューポートの幅 (vh) 流体タイプの単位?
font-size: clamp(1rem, 1rem + 2vw, 2rem);さて、次のようなコンテナ相対単位を使用できます コンテナー クエリのインライン サイズ (cqi)代わりに、 1cqi コンテナのインライン サイズの 1% に等しい (これがそのドラフト仕様です):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris は、パフォーマンスの利点についてもかなり話しました。 エッジでホスティング. 彼は 書かれた それについて こちら 数回以上。 これらの記事を読んだことがある私でも、正直なところ、エッジ コンピューティングの完全な概念を理解していませんでした。
アイデアは一見シンプルです: グローバル CDN はサービスを提供できます 資産 地理的にユーザーの近くでホストされているためです。 これは、ラスター イメージを提供するための非常に標準的な方法です。 しかし、サイトを強化するのと同じ HTML、CSS、JavaScript ファイルなどの静的ファイルに拡張されています。それらを事前に構築し、高速なグローバル CDN から既にコンパイルおよび最適化されたファイルを提供します。 それが Jamstack のコンセプトです。
しかし、それでもサーバーからの応答が必要な場合はどうでしょうか? それは非常にエッジの効いたものではありませんよね？ これで、単一の URL で実行して事前にデータを取得し、レンダリングの前に CDN から直接注入できるハンドラーができました。 確かに、バックグラウンドで余分な作業が行われています。 それでも、データを動的に取得し、注入し、事前に構築し、静的に提供できるという事実 オンデマンドで地理的にユーザーの近くで実行すると、これが非常に高速になります。
Tolu Adegbite: ARIA で勝ち、Web アクセシビリティに影響を与える方法
これは素晴らしいプレゼンテーションでした。 Tolu Adegbite は WAI-ARIA について熱心に教えてくれたので、彼女が共有してくれたすべての宝石 — 役割を書き留めるのに苦労しました! 州！ ラベリング！ 説明！ すべてが非常によくカバーされていて、私が知っていることは何度も何度も戻ってきます.
しかし、私の注意を引いたのは、インライン SVG のアクセシビリティです。 SVG は他の種類のデザイン アセットに関連していますが、最終的にはマークアップであるという事実が SVG との違いを際立たせています。 常にイメージとして識別されるわけではありません.
支援技術は、適切なアクセス可能な役割とラベルを与えることで、インライン SVG を画像として読み取る可能性が高くなります。
Miriam Suzanne: !importance のカスケード層
ねえ、別の CSS-Tricks ミョウバン! ミリアムは多くの時間と労力を費やしてきました カスケードレイヤー仕様. 彼女はまた書いた それらについての大昔のガイド ここCSS-Tricksで、An Event Apartでそれらについて話しました。
私が最も頭に残っているのは、これがどれほど大きな精神的変化であるかということです。 コンセプト自体は複雑ではありません。 宣言する @layer CSS ドキュメントの上部に、具体的な順にレイヤーをリストし、それらのレイヤーにスタイルを記述します。 しかし、しばらく CSS を書いてきた私のような古い恐竜の場合、カスケード レイヤーを使用すると、単純なクラス セレクターが、通常はより高い特異性を使用するものを打ち負かすことができるという事実に慣れる必要があります。 IDのように。
🤯
Miriam はまた、カスケード レイヤーは、特異性に影響を与えるセレクター (例: :is(), :where(), :has()).
ああ、これは興味深い一口です。 ミリアムが CSS の特異性の歴史をたどったとき、彼女は次のことを思い出しました。 !important は当初、ユーザーがユーザー エージェントと作成者のスタイルをオーバーライドするためのツールとして設計されました。 しかし、どこかで、作成者のスタイルを最優先にするためにそれを採用しました。 カスケード層は、 言い訳 使用する必要があります !important 彼らは私たちに力を与えてくれるからです。レイヤーに優先順位を付ける および 継承を保護するに設立された地域オフィスに加えて、さらにローカルカスタマーサポートを提供できるようになります。」
それは見事なことだ、ミリアム！
Dave Rupert: アクセシビリティ バックログのブロックを解除する
ある日、あなたのサイトで報告された問題に関する何百もの GitHub 通知に目を覚ますことを想像してみてください。 どこから始めますか？ ラップトップを閉じて、代わりに根管を取得しますか? それはデイブに起こりました！ 自動化されたアクセシビリティ監査は大量のエラーを返し、それらを Dave が修正するチケットとして割り当てました。
しかし、それらの問題の Excel スプレッドシートを取得し、見やすくするためにそれらを Notion に移動し、不要な列を非表示にし、すべてを分類し、結果を論理グループに表示した後、彼はあるパターンに気付きました。 報告された問題の多くは、同じ問題が複数のページで繰り返されていました。 自動化されたテストで少数のエラーが返されたからといって、それらがすべて一意であるとは限りません。 これにより、チケットのかなりの部分が減少しました。
彼は続けて、比較的少ない労力で、問題のバックログが 50% 近く減少したことを示しました。
特に私たちがどのように仕事を処理し、組織化するかに関して、そこには収集すべきことがたくさんあります。 私にとって最大の教訓は、プロセスやツールよりも個人や相互作用を重視する必要があると Dave が言ったときです。 アクセシビリティ エラーをスキャンするツールのようなツールは役に立ちますが、すべてを説明できるわけではありません。 彼らの言葉を鵜呑みにするのではなく、混乱に飛び込む前に質問をして、より多くの文脈を得る価値があります。
おまけに、Notion で問題を再編成することで、Dave は問題をグループ化して、彼の製品がどの障害を積極的に識別しているかを明確に示すことができ、それらのミスに共感し、優先順位を付ける方法を知ることができました。
Hui Jing Chen によるもう XNUMX つの仮想セッションが XNUMX 日を締めくくりましたが、確かに、廊下で会話をしていたので半分ほど逃してしまいました。 プレゼンテーションに参加できなかったのは残念ですが、会話はそれだけの価値がありました。 動画公開されたら見ます！
