フロントエンド/Node.js エンジニアの mizchi です。plaid では新しい分析エンジンのフロントエンド側の技術的な仕様を考えたり、それを実装したりしています。趣味として社内の他のプロダクトのパフォーマンスを勝手に測って、貼り付けていくこともあります。 plaid のエンジニア組織には「組」という制度があって、メインとなるプロダクト以外にも、そのテーマで会社横断で活動するグループがあ

No Class CSS Museumという No-Class CSS フレームワーク比較サイトを作りました。 簡単な demo 用のコードに何かスタイル当てたいけど、そんなに時間かけたくないしそもそもデザインセンスないしどうしようかなってときに No-Class CSS フレームワークが便利です。 たとえば昨日公開したFirebase の存在をフロントエンドから隠蔽するためにのデモサイトもそういった No-Class CSS フレームワークであるnew.cssを使いました。 これは CSS ファイルを読み込んだだけ(タグにクラスを割り振ったりしていない)なのですが、それだけでいい感じにスタイルが当たってちょっと感動しました。 以前の記事であるブログの 1 ヶ月を振り返るに書いた通り、このブログは書いた内容のサンプルコードやデモをどんどん公開していく方針で運営しています。 ただ、なにもスタ

概要 CSS で実装する要素の移動（アニメーション）に関しての簡単な説明から、パフォーマンスに関連する事象を深掘って説明していきます。この辺りの話はややこしいので、自身でも整理をつけるためにまとめました。 長い記事になりますが、CSS のアニメーション（パフォーマンス関連）を深く理解するための手助けになれば幸いです。 既にご存知の方はどこか間違っている点などあればご指摘宜しくお願いいたします。 要素の移動について 要素を縦横にアニメーションを伴って動かしたい場合 transition を適応させた要素に対して right, left, top, bottom や transform: translate(X,Y) のプロパティーを追加、またはその値を変更することで実現させることができる。 移動には right, left, top, bottom よりも transform: transl

はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS

明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするようになりました(とても正直に言うとあまりに激しめなことされると今でも「えぇ…」とはなります)。 この記事ではあるアニメーション要求がある時に、どうやってそれを実装に落とし込むか、その考え方を私なりに整理したものをまとめてみました。アニメーションに抵抗がある方や、