Vol.286

A journey to Web standards’ contribution | by Andrea Giammarchi | Sep, 2020 | Medium Jump to heading #

Web 標準に貢献する方法 Jump to heading #

Web 標準は Github 上でやりとりが進められており、誰でも Issue を立てることができる。この記事では Github 上で Web 標準に貢献していく方法を、実際に筆者が行った例を元に解説をしていく。多くの提案と様々な要素が組み合わさっているため、実際に提案が取り込まれるまでは長い時間がかかるが、ブラウザベンダーで直接に働かずとも、Web 標準に貢献することができるのだということを強調している。

Component Driven User Interfaces Jump to heading #

コンポーネント駆動 UI Jump to heading #

昨今の UI は非常に複雑になってきており、フロントエンドエンジニアやデザイナの負荷が高まっている。UI をコンポーネントに分けることで、複雑な画面においてもコンポーネントを構成していくことで様々な UI をシンプルに実装することができる。この記事では、コンポーネント駆動なデザインを行うための方法を紹介する。その方法として以下の 4 つのステップを踏むことをおすすめしている。

• UI の小さいものから作成する
• 組み合わせる
• ページを作る
• ビジネスロジックと統合させる

Introduction to systems thinking. Jump to heading #

システム思考とは何か? Jump to heading #

システム思考のメソッドについて。システム思考ではストックとフローで物事をモデル化し、問題点や改善方法を見つけやすくすることができる。この記事では具体的にエンジニアのベロシティをモデル化し、どのようにベロシティ上げるための改善をすれば良いかを導くための方法を考える。

The onion for Design Systems: atomic design and pace layering Jump to heading #

タマネギのレイヤリングからインスパイアされた考え方を取り入れたプロダクトデザインのプロセスでは、効率的に UI ライブラリの一貫性とシンプルさを保ったままを管理することを可能にする。この記事では その考えを支える、アトミックデザインとペースレイヤリングについて解説をする。

Tools should not only be for experts – they should turn us into them | Christian Heilmann Jump to heading #

この記事では、マイクロソフトで開発者ツールのプリンシパルプログラムマネージャーとして働いている Christian 氏が現状の Edge の開発者ツールについて語っている。開発者ツールは専門家が使うツールではなく、ツールを使っていると専門家になれるようなもの、であるべきと考え、そのためにどのような改善を行っているかを紹介する。Edge の開発者ツールでは、その画面の中からすぐに開発者にコンタクトできるボタンを用意しており、様々なフィードバックを送ってほしいと締めくくっている

In Brief Jump to heading #

• How to create stronger layouts with the 8pt Grid. | Marc Andrew: サイズやマージンに対して 8pt を使用することで、管理の手間を抑えつつ、様々な画面サイズ、解像度で美しく表示できる方法論を解説する

• Learn CSS Centering: CSS で中寄せをするための様々なテクニックを紹介する

• Styling Complex Labels - Cloud Four: input と label を組み合わせることで、アクセシブルなフォームを作り、また複雑なカードデザインのようなものにおいても同様に機能をさせるサンプルを紹介する

• Creating A Custom Scroll Bar In 24 Lines Of CSS - DEV: 24 行の CSS とシンプルな JS を用いて独自のスクロールバーを実装するためのアイディアを紹介する

• How to use CSS clipping: CSS の clip-path の仕様について詳しく解説する