Vol.210
Design Systems Architecture Diagrams by Nathan Curtis Jump to heading
デザインシステムアーキテクチャダイアグラム Jump to heading
Nathan Curtis氏は、多くの企業が、「1つのデザインシステムに対して、すべてのプロダクト」といったエコシステムではなくなり、より複雑になってきていると指摘する。この記事では、ブランド、システム、プロダクトの関係性をビジュアルで表す方法を提案する。前半では、シンボルの形、意味の定義をし、後半では具体的なケースを想定し、そのシナリオに基づいて作図を行う。
Bandwidth or Latency: When to Optimise for Which by Harry Roberts Jump to heading
帯域幅と応答速度: いつどちらを最適化するか Jump to heading
ネットワークパフォーマンスに関しては大きく帯域幅(Bandwidth)と、応答速度(Latency)の
2つの要素が関連している。この記事では、それらをどのように計測し、どのように改善するかについて紹介する。覚えておくべきルールは、通常のWebブラウジングでは、応答速度の改善は帯域幅の改善よりも効果的であり、帯域幅の改善は、大きなファイルを扱う場合に有効となると解説している。
Diving Deeper in JavaScripts Objects by Arfat Salman Jump to heading
JavaScriptオブジェクトを深く理解する Jump to heading
フロントエンド開発では、必ずといっていいほど使用されるJavaScriptオブジェクト。この記事では、そのオブジェクトに備わっている便利な機能について解説する。この記事を読んだあと、以下のことができるようになる。
- プロパティを削除不可能にする方法
- アクセサプロパティとは何かと、その機能について
- イミュータブルや隠蔽されたプロパティの作り方
- Object.keysで表示されるプロパティと表示されるプロパティの違いについて
- オブジェクトを修正から守る方法
- 次ようなコードを理解する方法
obj.id = 5;
console.log(obj.id)
// => '101' ( 5 in binary )
Exploring a back/forward cache for Chrome by Addy Osmani Jump to heading
Chromeチームではユーザーが遷移したときに、ページの内容をメモリ内にキャッシュするための新しいキャッシュ機構である、 back/forward cache(bfcache)について検討をしている。実験段階の実装のデモ動画も紹介されており、bfcacheが実装されている場合に、非常に高速にページを表示していることが分かる。
Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need by Eric Bailey Jump to heading
サイバーボールと呼ばれる心理学の実験では、ボールを他の参加者と投げ合う事によって楽しみを感じ、それができなくなることで、疎外感を感じるということを証明している。Webの世界では、このキャッチボールをナビゲーションに転じて考えることができるのではとEric氏は考える。UIを変更することによって、一部のユーザーにとって使い勝手を良くすることができるかもしれないが、それと同時に、他のユーザーを阻害してしまう可能性があるかもしれない。この記事ではいくつかのUIを例に、それがユーザーにどのように提供されるべきかについて解説する。
In Brief Jump to heading
- Try GraphQL! Interactive GraphQL Tutorial by Ryan Chenkie: GraphQLのフロント側のチュートリアル。実際にエディタを使って記述していきながら学ぶ
- BEM: 4 Hang-Ups & How It Will Help Your CSS Organization by Philip Zastrow: BEMでの命名についての解説。つまづきがちなポイントを抑えて、どのように解決するかのヒントを教えてくれる
- How I document — 7 tips for starting, writing and maintaining your documentation by Curtis Stanier: ドキュメンテーションを作成し、メンテナンスし続けるために必要なポイントを解説する
- To Grid or to Flex? by Michelle Barker: CSS gridとflexboxをどのように使い分けるかについて。それぞれの特徴を学び、どういった場面でどちらを採用すべきかについて解説する
- A Guide To Prototype-Based Class Inheritance In JavaScript by JavaScript Teacher: JavaScriptのプロトタイプ継承についての解説。一般的な継承との違いを交えながら紹介していく