[B! 設計] waviaeiのブックマーク

デザインとエンジニアリングをつなぐコンポーネントの運用設計

# ThinkAtomicDesign でお話した資料です。 https://thinkatomicdesign.connpass.com/event/115574/

waviaei 2020/06/19

Gutenberg-era の WordPress を使った構築はまさにこれだなと思ったり。

リンク

CSS設計全盛期に学ぶフロントエンド設計

FROKAN x UIT #1 登壇資料

waviaei 2019/12/04

css
設計

リンク

Manage large CSS projects with ITCSS

Harry Roberts introduces Inverted Triangle CSS, and explains how to use it to create, manage and scale your large-scale CSS projects. Harry Roberts will be speaking at Generate Bangalore on 2 December. Don't miss his talk on refactoring CSS without losing your mind, in which he'll share his tips and techniques for dealing with legacy CSS. Book now to become a Generate founding member and get 50% o

waviaei 2019/07/11

リンク

ITCSS: Scalable and Maintainable CSS Architecture - Xfive

So why a methodology with high user satisfaction isn’t more popular? IT CSS rem ains partially proprietary and there isn’t any open source documentation available. While this prevents IT CSS wider adoption, we respect Harry’s intellectual property. The best way to learn IT CSS is his Skillshare class. Once you are familiar with the basic ideas, this article helps you gain a wider perspective on IT CSS

waviaei 2019/07/11

リンク

ITCSSまとめ - Qiita

IT CSSは、OOCSSやBEM、SMACSSのようなCSS methodology(方法論)の１つでInverted Triangle CSS(逆三角形CSS)の略称。提唱したのは、csswizardryのHarry Roberts氏。 IT CSSに関するドキュメントはあまり多くない。セルビアでIT CSSについて紹介している動画がYoutubeにあがってる。そのときのスライドがManaging CSS Projects with IT CSS // Speaker Deck。 IT CSSは、プロジェクトのCSSをより良く管理していくのに、以下のことが必要としていて、 A sane environment that is accessible to lots of people. To tame and manage source order and the cascade. To cr

waviaei 2019/07/11

リンク

[CSS設計] ITCSSをプロダクトに利用した所感

詳細度の広い順に定義をしていくため、下のレイヤーに行くにつれ詳細度は上がっていく。 Settingsプリプロセッサなどで利用するグローバル変数や全体の設定を置く。ここではプロジェクト内のグローバルな設定を記述する。（SASS 変数や CSS Variables の定義） $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; $white: #fff !default; $black: #000 !default; $gray: #f8f9fa !default;

waviaei 2019/07/11

リンク

技術者よ、設計しよう、仕様書を書こう | 宇宙科学研究所

私は、昨年度、工業標準化事業に対する貢献により経済産業大臣から表彰を受けました。編集委員会から私に与えられたテーマは、それについて解説せよというものです。しかし、その技術的な内容については既に本ニュースの2004年6月号において「宇宙開発における標準化と情報化」という題名で執筆しています。そこで、今回は、私が標準規格などの文書の作成に力を入れている理由についてお話ししたいと思います。なぜならば、その理由をお話しすることは、「人工衛星のような複雑なシステムをいかに効率的に開発するか」という私のシステム工学的な研究の成果を解説することになるからです。人工衛星のような複雑なシステムの開発は、必然的に大人数のチームで行うことになるのですが、効率的に開発を行うための一つの原則は、「チーム構成員の誰もが何かしら具体的な作業を担当し、その作業結果を文書などにまとめ、プロジェクトの中で機能させること」だ

waviaei 2018/11/24

リンク

Web制作の流れをもう一度おさらいしてみる。20のステップ

「新しく会社を作った」「ウェブサイトが古くリニューアルしたい」「サイトをスマートフォンに対応させたい」などウェブサイトを作る理由はさまざまです。大体の流れはわかっているのですけど、詳細にはわからないというのが、web制作の流れ（ワークフロー）ではないでしょうか？ここでは、もう一度、おさらいしてみましょう。大まかな流れは次の通りです。できるだけ初心者にもわかりやすい言葉を使ったつもりですが、ウェブサイトを作る上ではぜひ覚えておいて欲しい専門用語はあえて括弧書きで説明を加えています。業者によっては、若干異なる事があると思いますが、基本的な流れは以下の20のステップです。競合サイトや参考サイトを調べるアクセスログを解析する新しいサイトのペルソナを作る新サイトの他社に対する差別点や強みをまとめる新サイトが伝えたいメッセージを考える新しいサイトのコンセプトをまとめるスマホへの対応、C

waviaei 2017/01/10

リンク

サイトに適したリソース配置とasync/defer完全マスター – レンダリング優先のグッド・プラクティス | ゆっくりと…

タイトル、少し変えました 😉 。第1部「サイト高速化の「戦略」と「戦術」- GradeAのその先へ」では、YSlow や PageSpeed がアドバイスする Tips のうち、HTTP リクエストの削減を優先すべしという「戦略」の話をしました。また css や js を束ねて結合し、HTTP リクエストを削減する時の「戦術」の話もしました。今回は、「サイトの特性に適したリソースの配置を行う」ために、「束ねたリソースをドキュメント中にどう配置するのが適切か」を見い出したいと思います。またそのポイントとなるブラウザの基本的な挙動についても言及します。ブラウザごとの挙動が確かめられる、実験サイト contentloaded.com を立ち上げたので、以下、同サイトから幾つかの例を引きながら話を進めたいと思います。リソース配置を決める戦術基本的な戦術第1部では、css や js