はてなブックマーク

1日目は、まずデザインシステムとは何かを整理。 デザインシステムとは何か。いくつかの資料に目を通した上で、主要要素と考えるのは以下の点。 プロダクトにおけるデザインのSingle Source of Truth 従来のスタイルガイドがプロダクトのコードベースの中でプロジェクトとして扱われていたのに対して、デザインシステムはそれ自体がプロダクト 他のプロダクトにデザインのエコシステムを提供するプロダクト この点を踏まえて詳細。 共通言語 / Single Source of Truth A DESIGN SYSTEM CONTAINS WHATEVER YOUR ORGANIZATION NEEDS TO COMMUNICATE DESIGN DECISIONS Designing a Design System // Speaker Deck “A design system is…”,

npm installやyarn installで追加したcssを@importするとき、../../node_modules/normalize.css/normalize.cssのようにnode_modulesまでのディレクトリを辿っていくのは面倒。 stackoverflow.com So using the prefix ~ at the start of the path tells the Webpack loader to resolve the import “like a module”. ~をパスの先頭につけると、node_modules配下のパスを解決してくれる。 @import "~normalize.css/normalize.css"; なので、このように~付きにすればnormalize.cssがimportできるようになる。

3日目はInterface Inventoryについて見ていく。 An interface inventory is a comprehensive collection of the bits and pieces that make up your interface. Interface Inventory | Brad Frost Interface Inventoryとは、プロダクトのUIを作り上げている部品の包括的な収集のこと。UIパーツをカテゴリー分類することでプロダクト全体のUIパーツを俯瞰することが目的で、これによって全体のUIパーツの中で最新のデザインが反映されてないパーツや、共通化できてないコンポーネントなどを見つけ出すきっかけにできる。 Interface Inventoryのメリット Interface Inventory | Brad Frostによると、Int

デザインシステムについて学ぶ1人advent calendarを以下の予定で進める。 日付 内容 12/01 デザインシステムとは何か 12/02 デザインシステムの構成 12/03 Interface Inventory 12/04 Design Tokens 12/05 カラーパレット 12/06 タイポグラフィ 12/07 スペース 12/08 アイコン 12/09 モーション 12/10 A11y 12/11 Voice & Tone 12/12 ドキュメント 完全に継続できてない状態で年越しちゃったので、12日で断念。 日付 内容 12/13 運用 12/14 CSS設計 12/15 lighting design system 12/16 Atlassian Design 12/17 Carbon Design System 12/18 Photon Design System

stackoverflow.com $ bundle update hoge だと依存関係を持ったgemも含めて更新する。 bundler v1.13以前だと、他のgemと依存関係があっても特定のgem以外更新したくない場合、--sourceオプションを使う。 --sourceオプション自体がそういう用途で用意されてる訳ではなさそう。 $ bundle update --source hoge bundler v.1.14以降では--conservativeオプションが用意されてる。--conservativeを使うと依存関係があるgemの更新はしないようになる。 $ bundle update --conservative hoge Bundler: bundle update