はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

npm install -D babel babel-register babel-preset-latest babel-preset-react babel-plugin-espower mocha power-assert enzyme react-addons-test-utils jsdom jsdom-global npm install -S react

※will-changeは編集時点(2016/07/27)でCandidate Recommendationの状態です。仕様変更による挙動差異などがあれば適宜コメントを頂けるとありがたいです。 TL;DR 使いどころ JavaScriptでアニメーションを行う際 CSS animation, transitionを:hover等で遅延実行する際 などの、初期値として変形やアニメーションの値を持たない要素を特定の要因で実行する際に効果を発揮する ユースケースによって、常に指定するか、動かす直前から指定して終了時に解除するかを判断する 最適化はUAごとに異なっており、かつ指定したからといって必ず恩恵が得られるものではない "おまじない"的な使い方も有りだが、本当にパフォーマンスが必要な場面で有効かどうかはブラウザの実装を調べるのがてっとり早い 前提知識 Webブラウザのレンダリングの仕組み ブ

Chrome Rendering 利用方法 Developer Toolsの下部、ハンバーガーボタンから"Rendering"を選択すると表示される。 項目 Paint Flashing 表示中のDOM要素内でリペイントを行う必要がある要素を緑色のボックスのオーバーレイで示す Layer Borders Compositing Layerとtileを表示する Compositing Layer: オレンジ/オリーブ色 tile: シアン FPS Meter 現在のFrame RateとGPUラスタライズの有効状況、GPUメモリの状況を表示する Scrolling Performance Issues スクロールのレスポンスを阻害するようなEvent Listenerやスクロールの度に再描画される要素があれば画面内に表示する Emulate CSS Media CSSのMediaタイプをpr

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 事前知識: ブラウザ毎の差異 Android 2.x, 3.x 2.x, 3.x では伝統的に TouchEvent がまともに使えません。 経験上、一部端末でdocument.createEvent('TouchEvent')するとNOT_SUPPORTED_ERRを吐くなどの現象が見られ、seleniumのこのコードでも、MouseEventsを利用して無理矢理回避しています。 4.x (Stock Browser & WebView) 4.x では、やっと TouchEvent が利用できるようになります。 が、 イベントの初期化

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

AngularJS で controller, service などが定義された JavaScript ファイルを遅延ロードした場合、通常のような書き方では Injector から対象のオブジェクトが取得できない。なので、以下のようにする。 ※公式的にこれでいいのかどうかは不明だけどメソッドが生えてるってことはこれでいいのかしら。ちなみにソースはこれ メインのファイル var app = angular.module('sample', []); // Config で、遅延ロード(定義)する対象のプロバイダーを config 内で app へ alias をはっておく app.config(['$provide', '$controllerProvider', '$animateProvider', '$filterProvider', '$compileProvider', funct

https://github.com/angular-ui/ui-router/wiki のおおざっぱな訳と公式の記事に少しだけサンプルを追加しました。 記事内のリンク先は、直接元コンテンツの URL に飛びます。(いずれ訳したい) このガイドは UI-Router のコンポーネントとそのオプションへ深く関わるための記事です。もし、クイックリファレンスガイドを見たい場合は API Reference を参照してください。 State Manager angular-ui router の提供する $stateProvider は AngularJS v1 のルータを元に、純粋な状態(ステート)へ注力して動作します。 状態は、全体的なUIとナビゲーションの観点から、アプリケーション内の「場所」に対応しています。 状態は、（コントローラ/テンプレート/ビューのプロパティを介して）UIがその場所

// HogeResource は $resource で生成したクラスオブジェクト var HogeResource = $resource('path/to/api', { /* params */ }, { /* actions */ }); // hoge はクラスオブジェクトから生成されるデータオブジェクトのインスタンス var hoge = HogeResource.get(function() { // do something }); で、今回はこのデータオブジェクトのインスタンスに対してメソッドを生やしたい、というわけです。 色々なサンプルで見られるのがデータバインディングした view 上で変更した値をそのまま save とか、controller で値を変更して save とかそういうのが多いですが、実際のユースケースとして煩雑なデータへのビジネスロジックを書きたい場

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

忙しくない人は、公式のチュートリアルを頭から全部やると良いです。めんどくさくてそっちはやってないので分かりません。 とりあえずここを開いてジャッヴァスクリプトを眺める モジュールについて 基本中の基本。特に推奨セットアップのところを見ておけば良い。 DI(依存性注入)について こっちを読んだ方が幸せになれるかも。 どんなサンプルを読むにあたっても、DI の仕組みを知ってないと辛くなる。仕組み自体はよくできているが取っつきづらい。 特に 引数名で渡される実体が変わる 部分は慣れるまで気持ち悪い気がするし、ぼくは気持ち悪い。もっと言うと、minify した場合などで変数名が変わると動作しなくなるため基本的には変数名を指定して、実体を捕捉する必要がある。 var sampleApp = angular.module('sampleApp', []); /** たとえば、Controller で

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 調べつつ社内向けに書いたけど別に競争的な内容(わらい)を含んでないのでインターネットの皆様でお役立てください。 いわゆる情報量が低い記事となっておりますので、各位共々よろしくお願いいたします。 追記 この記事はネタをネタとして楽しめる子供のインターネットとしてお楽しみください dis られたので、真面目に考えてみた。 幸せになりたいソーシャルゲーム系Webフロントエンドエンジニアが本気で考える HTML GUI ツール第一回 よーけんてーぎー HTML + CSS の職人技を軽減させる 視覚的に HTML の構築と CSS のスタイリン

FlashCC でパブリッシュした CreateJS ファイルで callback 付きの gotoAndPlay を実現するJavaScriptflashCreateJS ご世間様はアレに夢中な中で、CreateJSさんのニッチな話題です。 簡単な機能要件 必須 TARGET_LABEL を再生したとき、TARGET_LABEL_end まで辿り着いた瞬間に callback が発火すること Flash 内のスクリプトの動作に影響を及ぼさないこと CreateJS 本体の改造は出来る限りしないこと。ただし、後から prototype を拡張したり弄ったりするのは OK とする（した） Flash 内スクリプトでも、外部のスクリプトからでも呼べるようにすること 努力目標 再生中、任意のタイミングで gotoAnd(Play|Stop) もしくは同メソッドが呼ばれた場合は、callback

Web フォントがレンダリングされるタイミングを得ようとすると、そのやんちゃな挙動を制御するため人類は今まで下記のような対策をしてきた。 Web FontsをHTML Canvasで使う canvas要素にwebフォントを確実に描画する方法 typekit/webfontloader 無知な僕は同様の事象にハマり、一通り調べた後、下記の答えにたどり着いた。 canvas に WebFont を指定するとき、一回どこかの DOM で使う WebFont をレンダリングしておかないと死に至る現象を発見したので皆様もお気を付けください — ダメレオン (@damele0n) April 10, 2014 要するに DOM もしくは canvas 上で、そのフォントが指定されていて一度そのフォントがレンダリングされてからでないと canvas 上はレンダリングされない、ということだ。 (ちなみに

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?