普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ

プログラミング (iOS, JavaScript, Jenkins, Sikuli) とMacやiPhoneなどの話題が中心のブログ JavaScriptでテストとコードカバレッジ取得するためのツールやフレームワークは沢山あるので、最近ちょこちょこJavaScriptに手を出しはじめたばかりの人間にとってどれを使ったらよいのかわからなかったりします。 また、それをするためのボイラープレートコードが必要だったりして、わりと面倒そうだと思って二の足を踏んでいたのですが、GitHubにあったテンプレートを利用したら、簡単にMochaとIstanbulでテストとコードカバレッジ取得ができるようになったので、その手順を紹介します。 インストールと実行 Nodeで利用するには、件のテンプレート(nodejs-tdd-boilerplate)を導入するだけです。 これを雛形に利用するとよいでしょう。 $

これらの中で注目すべきは ‘ と ” と \ です。シングルクォート、ダブルクオートは文字リテラルを作成する為に利用され、\ でエスケープできることです。つまり、文字リテラルの最後に \ が現れると文字列の終端が無くなります。単独で不正なJavaScriptの挿入が可能になる訳ではありませんが、プログラムの構造が破壊される事を意味します。 PHPにはJavaScript文字列用のエスケープ関数が用意されていません。htmlspecialchars()やhtmlentities()で代用している場合も多いと思います。しかし、これらの関数ではJavaScript文字列のエスケープを十分に行う事ができません。 JavaScriptプログラムの構造が破壊される例 <?php $msg1 = 'test string\\'; $msg2 = ');alert(document.cookie); //

Facebookをはじめチャット系のソフトウェアで良くあるのですが、現在のタブでチャットしていると特に何も通知は出ないのに別タブを開いていると音を出したりタイトルを変化させたりする機能があります。 あれはどうやっているのかなと思っていたのですが、Ifvisible.jsを簡単に実現できそうです。ついでに（？）操作せずに放置した場合の感知も可能です。 使い方は簡単で、ifvisible.jsを読み込むだけで良いようです。 <script src="ifvisible.js"></script> デモ。何も操作をしないとタイマーがどんどん進んでいきます。 後は指定時間（デフォルトでは60秒）放置したタイミングでidleがコールされます。 ifvisible.idle(function(){ // 何か処理 }); アイドルになりました。 アイドル状態になった後マウスを動かしたり、キー入力を行う

AWS meets Android - "AWS SDK for Android"で開発を楽にしよう！SORACOM, INC

OWASP Japan、Webアプリの一般的なセキュリティ要件をまとめた文書公開：開発者にも、そして発注者にも安全なWebアプリの要件定義を OWASP Japanは2013年11月1日、Webシステム／Webアプリの開発において一般的に盛り込むべきと考えられるセキュリティ要件をまとめた「Webシステム／Webアプリケーションセキュリティ要件書」を公開した。 OWASP Japanは2013年11月1日、「Webシステム／Webアプリケーションセキュリティ要件書」を公開した。安全なWebアプリケーションを実現するため、開発を依頼する発注者側と、実際に開発を担う受注者側の双方が留意すべき要件についてまとめている。 The Open Web Application Security Project（OWASP）は、Webアプリケーションのセキュリティ改善に向けた啓発、研究活動を行う非営利団体だ

HTMLで画像とか動画とかのリソースをページが表示される前にプリロードするパターンあるじゃないですか、あれでちょっと思いついたのがあるんでメモしときます。 以前やったPOOL inc.のトップページ、例のごとく最初にビデオをある程度プリロードしてから再生してるんですが、本数が40本程あって全部の読み込みを待つのさすがにダルいよねってことで2, 3本読み込んだら再生をはじめて、残りのビデオは裏で読みってやってみたんですが、この読み込みの処理がなかなかヘビーでして、再生してるビデオがコマ落ちしてまともに再生されないんです。 どうしよう、どうしようということで読み込み処理をビデオの再生とは別のスレッドにしてみたんです。HTML5のAPI、Web Workerで。すると狙いどおりビデオがコマ落ちすることなくバックグラウンドで読み込みができるようになりました。40本同時に並列でダウンロードしても処理

Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日（日本語版は11月2日）にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ（親要素 > 子要素 ） 隣接セレクタ（要素1 + 要素2） 間接セレクタ（要素1 ~ 要素2） 属性セレクタ（[属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]） a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c