CSSのコーディング設計について考える事 – YATのBLOG
CSSの設計は人によって様々で、これが正解というものは無いのですが、何も考えずに作っていくと命名の重複で悩んだり、定義したクラスの使い回しがしづらかったりといった悩みが多くなってきます。これらを防ぐためには、CSSの設計を考えながらコーディングすることが大切です。 目次 CSSで大切なこと ドキュメントの作成 CSS構成について 様々な設計手段 SASS、SCSS コードリファクタリング 最後に CSSで大切なこと CSSで大切なことは CSS Architecture でPhilip Walton氏が述べているように 予測しやすいこと 再利用しやすいこと 保守しやすいこと 拡張しやすいこと で、これらはページが多くなれば多くなるほど重要度が高くなります。 予測しやすいということは、命名規則のルールにより、どのクラスがどういった挙動するかが掴みやすく、修正作業が必要な時にソースコードを追う
Design It!
Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. Book description Don't engineer by coincidence-design it like you mean it! Filled with practical techniques, Design It! is the perfect introduction to software architecture for program
大規模プロダクトにおけるフロントエンドの1年間の変化 - Qiita
プロダクトに関わるエンジニアは40人近くいて、弊社ではフロントエンド/サーバーサイドといった明確な線引きがないため全員がフロントエンドに触れる機会が有りえます。開発チーム・コード共にそれなりに大規模と言えるのではないでしょうか。 やったこと モジュール間の依存解決 もともとRailsのSprocketsに沿ってjsを書いていたため、classは全て一つのグローバル変数に格納され、全てのjsが結合された巨大なapplication.jsをロードしている状態で、メンテナビリティやパフォーマンスに大きな問題を抱えていました。そこで去年よりWebpackを導入し、各モジュールの依存関係を整理してjsファイルを適切な単位に分割するようにしました。ファイル数が多いため段階的に作業をつづけ、今年ようやく全てのファイルの依存解決が完了することができました。 過渡期はWebpackとSprockets両方か
ストリーム処理とは何か？＋2016年の出来事 - Qiita
この記事で書いている内容は？ ストリーム処理とはそもそも何かからはじまり、必要になる検討ポイントなどの情報を振り返り用にまとめたものです。 あとは、今年個人的にこの分野に影響が大きかったと思ったイベントをまとめています。 他の方へ説明する際のベースとするためにまとめているため、 既にこの分野を知っている方にとっては冗長な内容も多いかもしれませんが、 その場合は適宜読み飛ばしていただけると。 あと、私の他記事からも内容引っ張ってきているのでかぶりはあると思います。 特にGoogleが考えるストリームデータ処理とは？とは目的もかぶっているので相応に被りがあるかと・・・ 出来るだけよく出てくる固有の言葉を最初から使用せずに書いているつもりですが、 何かわかりにくい場所あればコメントいただけるとありがたいです。 「ストリーム処理」とだけ書くと微妙にストリーミング配信等とも混同しやすいですが、 デー
Sagas - Airplanes. Cloud Computing. And Alien Abductions.
Football. Cloud. Tech. Politics. Pictures. Principal Architect for Messaging/Eventing at Microsoft. Today has been a lively day in some parts of the Twitterverse debating the Saga pattern. As it stands, there are a few frameworks for .NET out there that use the term "Saga" for some framework implementation of a state machine or workflow. Trouble is, that's not what a Saga is. A Saga is a failure m
高速ファイル/メッセージ転送 K2HFTFUSE の紹介
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Technical Yahoo の中谷です。 今回は、Yahoo! JAPANからオープンソースとして公開した高速ファイル/メッセージ転送システムの K2HFTFUSE の紹介をします。 K2HFTFUSEは、確実で高速なファイル/メッセージ転送を低コストで実現するために開発されたシステムです。 K2HFTFUSE（K2Hash File Transaction by FUSE-based file system）とは、FUSE（Filesystem in Userspace）によるユーザースペースでのマウント機能を利用したファイル/メッセージ転送システムです。 K2HFTFUSEは、仮想ファイルシステムを提供し、マウ
新しめのCSS設計まとめ 〜2016年冬〜 - Qiita
最近新たに色々なCSSの設計が提唱されているので、学習を兼ねて簡単にまとめました。 どれも実際に実践してないものばかりなので、表面を舐めたいなくらいの気持ちで読んでください。 ググればもっと詳しく解説してくれている良記事があります。 以降のCSS設計へ影響を及ぼした３大アーキテクチャ 派生したCSSの設計たちは、ほぼこれらの考え方に影響を受けている。 はじめに簡単におさらい。 OOCSS 米Yahoo!のNicole Sulivan氏提唱。 構造と見た目を切り分けて考える。オブジェクト指向型CSS。 .box { width: 100px; height: 100px; } .box-red { background-color: red; } .box-blue { background-color: blue; }
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Kubernetesでの性能解析 ～なんとなく遅いからの脱却～（Kubernetes Meetup Tokyo #33 発表資料）NTT DATA Technology & Innovation
関数の仕様を正しく実装していることをどう保証するのか - $shibayu36->blog;
静的型チェックがあったらテストはあまり書かなくて良いのか - $shibayu36->blog; で静的型チェックがあったとしても、テストをあまり書かなくて良いわけではないという話を書いた。するとブコメでいろいろ意見をもらえた。これらの意見から、関数の仕様を正しく実装していることをどう保証するのかについてもう少し深く考えてみようと思い、その考えがまとまってきたので、ブログに書いておく。 一応前提として、今回の話は自分の経験とこれまでの本を読んだ知識を元に自分で考えたものであり、何かの理論に則って話しているわけではない。この部分が違うなどあれば突っ込みを受けたい。 今回考える仕様 このようなことを考える時、非常にシンプルに考えたほうが理解がしやすいので、以下の様な仕様を持つ関数addNaturalIntを考える。 関数addNaturalIntは正の整数を二つ受け取り、足しあわせて正の整数を
What is Amazon's approach to product development and product management?
Answer (1 of 15): There is an approach called "working backwards" that is widely used at Amazon. We try to work backwards from the customer, rather than starting with an idea for a product and trying to bolt customers onto it. While working backwards can be applied to any specific product decisio...
SAM - State | Action | Model
How does SAM work? SAM is built on one of the most robust foundation of computer science (TLA+). SAM recommends factoring application state management along three building blocks, actions, model, and state that are invoked in well defined "steps". Actions are triggered by events, their role is to translate events into proposals to mutate the model The Model is solely responsible for the decision o
ReduxでReducerとInitialStateを分けるためのbetterCombineReducers - Qiita
要約 ReduxのReducerは、特にcombineReducersを使うときには初期状態を含むように書く必要がある。それでは数学的に美しくないし、実際に都合の悪いケースもある。そこで、初期状態を別途与えることができるbetterCombineReducersを提案したい。それは下記に公開されており、利用することもできる。 GitHub: shinout/better-combine-reducers 導入 ReduxとDFA(決定性有限オートマトン) Reducerの定義を見て欲しい。 Reducerは、StateとActionから、新しいStateを返す。 このようなシンプルで美しい設計は、離散数学の一分野である決定性有限オートマトン(DFA)にそのヒントを得ていると考えられる。その中で出てくる「状態遷移関数」こそがReducerだ。 DFAの考え方に従えば、状態機械というのは 状態
エラーメッセージは 2W1H がいいんじゃないか
良くあるダメなエラーメッセージ エラーが起きたときは、以下のようにエラーメッセージをどこかしらに出力すると思います。 $c->log->error('something wrong!'); ただ、このエラーメッセージって、実際に発生したときには意味がわからないことが多いのです。 $c->log->error('error!'); 本気でこういう「error!」とだけ吐くメッセージだと、エラーが起きたことしか伝わってきません。程度の差はあれ意味のわからないエラーメッセージはこの世にあふれているかと思います。 機械的なエラー情報 そういうわけで、たいていは Exception クラスや Logger クラスで多くの補助が受けられるようになっていると思います。 発生時刻 発生場所 stack trace 変数の状態 ただ、このような機械的な情報だけだと、結局、運用上は対応が難しい場面ってのが多か
私がMVCフレームワークをもはや使わない理由
数ヶ月前、私はなぜここにたどり着き、何が可能かを理解する旅に出ました。この旅は、私にアプリケーションアーキテクチャ、MVCという強烈な宗教に対する疑いをもたらしました。そして、リアクティブ、関数型プログラミングの真の実力に触れたのです。また、シンプルさに集中する旅でもあり、私たちの産業はうまくやっているという考えを捨てる旅でもありました。どんなことを見つけたか興味がある方もいるでしょう。 私たちの見ている画面の背後にあるパターンはMVC –Model-View-Controllerです。まだウェブがなくソフトウエアアーキテクチャも分厚いクライアントが単一のデータベースに原始的なネットワークでアクセスするのがせいぜい、という時代にMVCは生まれました。そして数十年後、MVCはまだ現役であり、衰え知らずでオムニチャネルアプリケーションの開発に使われています。 Angular2のリリースの前にM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jareware/css-architecture: 8 simple rules for a robust, scalable CSS architecture
GitHub - onmyway133/awesome-ios-architecture: :japanese_castle: Better ways to structure iOS apps
CSS for Software Engineers for CSS Developers
From Mixins to Object Composition
良いデバッグログはプロジェクトの資産である
HugeDomains.com
