Vol.352

Context-Aware Web Components Are Easier Than You Think Jump to heading #

Webコンポーネントのライフサイクルフック Jump to heading #

Webコンポーネントはページに追加、またはページから削除されるたびにJavaScriptの関数が呼び出される。この記事では、このライフサイクルフックに関して詳しく説明する。

• connectedCallback：カスタム要素が要素にアタッチされたときに呼び出される
• disconnectedCallback：要素がドキュメントから削除されたときに呼び出される
• adoptedCallback：要素が新しいドキュメントに追加されたときに呼び出される
• attributeChangedCallback：属性が監視されている限り、属性が変更、追加、または削除されたときに呼び出される

Building a newbie-friendly codebase Jump to heading #

初心者に優しいコードベースの構築方法 Jump to heading #

ソフトウェアエンジニアリングの仕事がますますリモートで非同期になるにつれて、同僚と同期的なコミュニケーションをする機会が減っている。初心者が独立して自走できるようになるためには、コードベースを初心者に優しいものにすることが重要である。この記事では、誰もが簡単に理解し、維持できるコードベースを構築をするための簡単なヒントを紹介していく。

• すべてを規則に沿って書く
• データのフローを一方通行にする
• マジックナンバーを使わない
• データ設計をする
• テストを書く
• コメントも良いが、良いコードを書くことを心がける
• 頭文字語を控える
• リファクタリングの機会を伺う

Metaphors We Web By Jump to heading #

Webのメタファーの歴史 Jump to heading #

Webは"紙の文書"のメタファーに始まり、今は"スペース"というメタファーの側面を持ち合わせている。Webが歴史的経緯により様々なレイヤーが重なり合ってできていることなど、Webの歴史について触れながら、どういった変遷を遂げてきたのかについて紹介している。

More to give than just the div: semantics and how to get them right Jump to heading #

Webのセマンティクスについて、セマンティクスとは何か、そしてそれらを正しくする方法について紹介する。

• HTML標準知り、調べて使用することが重要
• Webをセマンティクスにすることにはメリットが多くある
• CSS、ARIA、アクセシビリティがセマンティクス、エンドユーザーにどのように影響するか注意する

know how your org works (or how to become a more effective engineer) Jump to heading #

仕事で成功するためにできる最も効果的なことの1つは、組織がどのように機能しているかを理解することである。この記事ではその重要性とそれをどのように培うかについて言及している。

In Brief Jump to heading #

• A preview of CSS Container Queries trivago tech blog: CSSコンテナクエリについてブラウザのサポート状況とその仕様について解説する

• Design system versioning: single library or individual components?: デザインシステムのバージョン管理について、ライブラリ全体と個々のコンポーネントの観点で、それぞれのバージョン管理について考察する

• How to Create a UX-Vision Statement: UXビジョンステートメントを作成する方法を紹介する

• Fancy CSS Borders Using Masks: CSSのマスク機能を利用して複雑なボーダーを実装する

• Creating a Schema-Based Form System: Formikを利用したフォームシステムを実装する方法