requestAnimationFrame とタイマーの今更な比較とデモ
フレーム描画のタイミング制御モデル 今更 requestAnimationFrame() だなんて Can I use を見ても IE 10 ですら実装していて、世界の 9 割以上で動作しうるカバレッジなわけですが改めて setTimeout() との違いを表現しうるサンプルをこさえてました。 それぞれの仕様の詳細や挙動についてはそれこそ今更なのでググっていただくとして、この記事ではサンプルについて曖昧な説明を添えていきます。 CodePen - setTimeout vs requestAnimationFrame (with CSS Transitions) See the Pen setTimeout vs requestAnimationFrame (with CSS Transitions) by Ayumu Sato (@ahomu) on CodePen. 比較のポイントとシ
技術は発想やデザインの限界にならない
当時の思い違い たとえば、一般的なエンジニアが何かを作ろうとすると、その個人の「技術的な限界＝発想の限界」となりがちです。 ではデザイナーと呼ばれるような職能を持っているひとが、果たしてプロダクトを実装として理解すべきか、というと、それは分業上の実装サイドによるエゴ（こっちの都合もちゃんと考えて欲しい！的な）でしかないと思っていました。 多少、吹っ飛んだ話であっても、意図を失わずに現実的な実装に落とし込むのはコミュニケーションの問題であって、デザイナー職能の理解不足ではない、と。 コミュニケーションでも解決できる問題として、これは今も間違ってはいないはずですが。 しかし、これは適切なタイミングで、大きな青写真を描くための能力であり、デザイナー職能を全うする話とは違ったのです。 優秀とは 身の回りで優秀なデザイナーと呼ばれる諸氏は、ビジュアルを作るだけでなくステートの管理までよく考え、利用コ
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
GPUアクセラレーションとposition: relativeによるレイヤー生成について
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成＆GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ（transform3d: scale(1,1)とか）で強制的にGPUアクセラレーションを効かせたCanvasア
背景色をrgbaとrgbで2重指定するときのIE地雷
はじめに結論 CSSで背景に透過色を指定する際に，本来のrgbaとIE6-8用のrgbを2重で書いたりしますが，うっかりハマるポイントがあるので紹介． 結論から言うと背景プロパティは，background-colorではなく，backgroundを利用しましょう，ということになります． Goodパーツ こう書くことを鉄の掟としておけば，特にハマることはないとおもいます．きっと． .someClass { background: rgb(128,128,128); /* または background-color: rgb(128,128,128); */ background: rgba(128,128,128,0.8); } 両方ともbackground指定にしておけば覚えやすくて安全ですが，rgb側はbackground-colorでも大丈夫です． Badパーツ こうやるとIE6-8で背
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
