Vol.317

“Support Systems for Learning,” an essay by Dan Mall Jump to heading #

学習支援システム Jump to heading #

SuperFriendlyでは人々が学び、成長するのをサポートするために必要なさまざまな方法を認識し活用している。この記事では、その中でも今後投資していこうとしている重要な10個のポイントをまとめ、それがは何なのか、どのように活用されているかを紹介していく。

• 知識の伝達
• 知識の探求
• 目的
• ストーリーと例
• メンターシップ
• コーチング
• モデリング
• 方向
• 説明責任パートナー
• 練習

The Almost-Complete Guide to Cumulative Layout Shift Jump to heading #

累積レイアウトシフトについてのガイド Jump to heading #

コアウェブバイタルでは、その要素の一つとしてCLS(累積レイアウトシフト)を挙げている。この記事ではCLSについて包括的に紹介し、それが何か、どのように計測できるのか、そしてその対応策を解説していく。

Understanding Design Systems — Designing Component APIs Jump to heading #

コンポーネントAPI設計 Jump to heading #

コンポーネント自体がエンドユーザーにとって使いやすいことはもちろん重要であるが、それと同様に開発者がデザインシステムとコンポーネントライブラリに対するユーザーと考えたとき、彼らに使いやすいAPIを設計することでエクスペリエンスが大幅に改善されることが期待できる。この記事では、コンポーネントライブラリを構築する際に、どういった点に考慮すべきかポイントを紹介する。

1. どこの部分が独立しているかを考慮する
2. どういったバリエーションが提供されているかを考慮する
3. どのスタイルがカスタマイズ可能かどうかを考慮する
4. コンポーネントは将来どのように進化するか考慮する
5. どこにコンテンツが挿入可能か考慮する

The Humble img Element And Core Web Vitals Jump to heading #

画像はWebの中でも重要な部分であるが、テキストよりも非常に大きなサイズとなることが多い。つまり、画像の読み込みを最適化することでユーザー体験を大幅に改善できる可能性がある。この記事では、picture,imgタグなどで使用できる属性や値を紹介しながらどのように挙動をコントロールできるか詳細に解説していく。

The State of CSS Cross-Browser Development - Ahmad Shadeed Jump to heading #

クロスブラウザを考慮したCSSの実装について、従来の方法を紹介しながら、現代のクロスブラウザー開発がこれまでよりも優れている理由について紹介する。古いブラウザに対しては、プログレッシブエンハンスメントアプローチを使用してビルドすることを勧めている。

In Brief Jump to heading #

• Starting a TypeScript Project in 2021: 2021年にTypeScriptのプロジェクトを始めるときに参考にしたい、モダンなツールを採用したセットアップの紹介

• A Guide To Undoing Mistakes With Git: Gitで変更や操作戻したい場合に使えるテクニックを紹介する

• Two options for using custom properties — ppk: カスタムプロパティを使用した実装の設計方法を2種類紹介して、どのような特徴があるか解説する

• A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors: Selectors Level 4で定義されている、疑似クラスについて紹介していく

• A Complete Guide to Custom Properties: CSSカスタムプロパティについての非常に詳しく、網羅的に解説する