jsPerf: JavaScript performance playground
jsPerf — JavaScript performance playground What is jsPerf? jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. For more information, see the FAQ. Create a test case Login with GitHub to Create Test Cases
Chrome DevTools.next
2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ！」での講演資料です。
Frontred vol.4に参加してきました | STUDIO KINGDOM
サイバーエージェントさんが主催するフロントエンド向けの勉強会「Frontrend vol.4」に参加してきました。 前回のvol.3に引き続きの参加で、今回のテーマは「javaScript」でした。 この記事では個人的にピックアップしたい内容だけを紹介しています。全体を通した内容は下記リンク先が非常に参考になります。 Frontrend/04 – Toggeter Frontrend Vol.4に行って来ましたメモ – < /gecko > 「JavaScript Development Tools – JavaScript開発の効率アップ」 Crhrome Developer Tools まずはChromeのデベロッパーツールですが、同じくサイバーエージェントの吉川さんが既に発表(下記スライド)されていたので、それをふまえつつ、おさらい＋追加情報的な感じ。 Chrome DevTool
一部のAndroid4.x端末でtouchstartでe.preventDefault()してもclickイベントが発火する - しるてく
Galaxy Nexus(Android 4.2.2)とか他のAndroid4.1.2の端末で、e.preventDefault()しているにも関わらずclickイベントが呼ばれてしまうバグ？ 背景 iScrollを使用しているサービスを一部のAndroid 4.2.2, 4.1.2端末で見ると、clickイベントが2回呼ばれてしまう。 どうも、iScroll内では、touchstartでe.preventDefault()して、touchendでclickイベントを発火しているのだが、デフォルトのclickと、iScrollのclickの二回呼ばれるらしい。 問題の端末 Galaxy Nexus(android4.2.2) SO-01E(android4.1.2) Nexus S(android 4.1.2) 対象のブラウザ WebView, 標準ブラウザ (Chromeは問題なし) 使
Knockout : Home
Simplify dynamic JavaScript UIs with the Model-View-View Model (MVVM) pattern Declarative Bindings Easily associate DOM elements with model data using a concise, readable syntax Automatic UI Refresh When your data model's state changes, your UI updates automatically Dependency Tracking Implicitly set up chains of relationships between model data, to transform and combine it Templating Quickly gene
[javascript] javascript で大文字、小文字を無視して文字列比較答えを知りたい | 答えを知りたい
javascript で大文字、小文字を区別しないで文字列比較がしたい時は、そういう演算子は用意されてないので toLowerCase() で全部小文字にして比較しちゃいましょう。 こんな感じ。 function check(){ foo="ABC"; bar="abc"; if(foo.toLowerCase() == bar.toLowerCase()){ //大文字小文字を無視 alert("ok!!"); }else{ alert("NG!"); } }
JavaScriptの配列の要素を削除する(delete演算子とspliceメソッド)
delete演算子を使うと、削除した要素の値が「undefined」になる。 要素の数は変わらない。 numbers = ['zero','one','two','three']; delete numbers[2]; //3番目の要素を削除 //numbersは['zero','one',undefined,'three']; delete演算子で削除すると、配列に穴が開いてしまう。 この動作が期待した動作ではないことが多い。 要素を削除したら、インデックスを詰めてほしいはずだ。 spliceメソッドを使うと、削除した要素のインデックスを詰める。 要素の数は減少する。 numbers = ['zero','one','two','three']; numbers.splice(2, 1); //3番目の要素を削除 //numbersは['zero','one','three']; spl
3つの簡単便利Javascriptテンプレートエンジン。Mustache.js, Handlebars.js, Microtemplating | codechord
Posted 7月 13th, 2013 by codechord. 0 Comments Tweet Tweet 多忙きわまりない2013年初夏でございます。 最近あんまりコードらしいもの書けてなくって、vagrantとかshefとかpjaxとかnodeとか理解するために時間つくりたい、コード書きたい！ってなってます。今回ちょっとajaxまわりのものの実装でjavascriptのテンプレートエンジンに調べる必要あったので、javascriptのテンプレートエンジンに触れてみようかなと。 phpのテンプレートだとsmartyだとか、rubyだとERBとかなんかそういうのですけど、javascriptのテンプレートエンジンについて知らなかったんで。 目次 – Table of Contents Javascriptのテンプレートエンジンの候補 1. John ResigさんのJavaScri
So you need a template engine..
Template-Engine-Chooser! This tool is not being updated — more info Is this for use on the client or the server? client server both How much logic should it have? the entirety of JS just the basics none at all Does it need to be one of the very fastest? yes no Do you need to pre-compile templates? yes no Do you need compile-time partials? yes no Do you want a DOM structure, or just a string? DOM s
Happy Elements Labs: 世界平和とAndroid
エンジニアの草苅です。 スマートフォンを扱うエンジニアの皆さんは、日々Android のバグに悩まされているのではないかと思います。弊社も類に漏れず様々な Android のバグと戦っています。 特にあんさんぶるガールズ！ではアニメーションはすべて Canvas を利用していることもあり、Android の Canvas 絡みのバグに、頭を痛めています。 Android のバッドノウハウは悩んでいる人みんなで共有した方が、世のため人のためになるのではと思い立ったので、世界平和を願っていくつかまとめてみたいと思います。 1. GPUレンダリングの設定によって Canvas で不具合が発生する Android は OS のバージョンや、WebView のレンダリングエンジンの違いによって、GPUレンダリングOFFの場合に、Canvas が正常に表示できない端末、もしくはGPUレンダリングONの
HTML5 canvas でピクセル処理
canvas の各ピクセルに対して処理を行って、さまざまなエフェクトを実現するには、 getImageData(x0,y0,x1,y1) を使います。 例えば、 var image = ctx.getImageData(0,0,w,h); とした場合、image にはピクセル単位の集合体がオブジェクトとなったもの（イメージデータ）が返ってきます。 このオブジェクトは、「data」というプロパティを持っていて、ここでピクセルデータを保持しています。 「data」プロパティの配列には、各ピクセルのRGBAデータが {R, G, B, A, R, G, B, A, ...} の順番で格納されています。(R = Red, G = Greed, B = Blue, A = Alpha) これがピクセル分だけ続きます。つまり配列の要素数は ピクセル数 x 4 になります。 例えば、Alpha を徐々に
[javascript]canvasのgetImageData関数でSECURITY_ERRにはまる
●getImageDataについてはこちら createImageData, getImageData, putImageData メソッド - Canvasリファレンス - HTML5.JP http://www.html5.jp/canvas/ref/method/getImageData.html ●解決にはここが参考になりました canvas の getImageDataが少しめんどくさい（特にローカルで動かす場合） - 地平線に行く http://d.hatena.ne.jp/chiheisen/20100815/1281885412 「SECURITY_ERR: DOM Exception 18」というメッセージはChromeのもので、FireFoxだと「Security error code: 1000」というメッセージがでるようです。 要するに、getImageData関数
単語前方一致・単語後方一致・単語完全一致 String.indexOfの魔力 - ぶれすとつーる
indexOfにはあまり知られてない裏技的な使い方がある。 よく知られてるString.indexOf indexOf 構文 indexOf(searchValue[, fromIndex]) パラメータ searchValue 検索する値を表す文字列。 fromIndex 呼び出す文字列内の検索を始めるための位置。0 とその文字列の長さの間にある整数を指定できます。デフォルトの値は 0 です。 概要 呼び出す String オブジェクト 中で、指定された値が最初に現れたインデックスを返します。fromIndex から検索を始め、値が見つけられない場合、-1 を返します。 indexOf - MDC Doc Center 概要からわかるように、文字列の出現インデックスを取るものだが、肝心なのは見つからない場合-1を返すことだ。 これを利用してとある条件の下で以下の三つの正規表現ライクなこと
String.prototype.indexOf() - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback indexOf() は String 値のメソッドで、この文字列を検索し、指定した部分文字列が最初に出現するインデックスを返します。 オプションで開始位置を取り、指定した数値以上のインデックスで指定した部分文字列が最初に出現するインデックスを返します。 const paragraph = "I think Ruth's dog is cuter than your dog!"; const searchTerm = "dog
ready() [jQuery]|Ajax入門|Ajaxの基礎と応用の学習|StudyNet
Ajax入門|Ajaxの基礎と応用の学習 Ajax入門 Web2.0を代表する技術であるAjax JavaScriptの基本からAjaxの基礎・応用までサンプルを使って紹介 ready()は、DOMツリーが構築されたら、即関数を実行するjQueryのメソッドです。ready()メソッドは、HTML読み込み後にDOMツリーが構築されたのを検出して、JavaScriptを実行させます。DOMツリーが構築されるタイミングは、ブラウザによって異なってくるので、クロスブラウザ対策が必要ですが、jQueryは、ブラウザの違いを吸収し、簡単に表記できるようにしています。 ページが読み込まれたのを検出するには、loadイベントを通常使うのですが、この場合、DOM構築後、画像などの読み込みが完了しないと、loadイベントが発生しないので、重い画像が有る場合には、JavaScriptの実行が遅れてします。こう
「JavaScript＠Keynavi.Net」 ページ全体に対するイベントハンドラの登録
ページ全体にイベントハンドラを設定することを考えます。 HTMLで記述する場合、<body onload="処理内容"> などと <body>タグ中に書くのが普通です。 一方、JavaScriptで行う場合 onLoadでは「window.onload=ハンドラ関数;」 とするのがもっとも一般的です。 ちょっと混乱しやすいのですが マウスが押された場合には「window」ではなく「document」を使い 「document.onmousedown=...」とします。 これらはイベントハンドラの登録：kl_addhandler() を使うと 「kl_addhandler(window,"onload",ハンドラ関数)」 「kl_addhandler(document,"onmousedown",ハンドラ関数)」となります。 以下に よく使われるイベントハンドラとその一般的な登録先を列挙しま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
作業効率が10倍アップする Chrome Developer Tools の使い方
HTML 5 FIRE
clearRect() メソッド - Canvasリファレンス - HTML5.JP
http://www.hp-stylelink.com/news/2013/10/20131008.php
