メモ用サブブログ

子曰わく學びて時にこれを習う。

CSS attr(hoge)

CSSってattr()なんていう関数なんてあったんだ…
これ知ってればCSSだけでかなり表現の幅が広がりそう

これはcontentの時以外でも使えるんだろうか

HTML

<a href="#"><span data-title="Text Link">Text Link</span></a>

CSS

a span:after {
  content: attr(data-title);
}

ネタ元

コピペでできる!CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックス

JavaScript 引数を設定してない関数でもargumentsという変数で引数が取れる

> test = function(){
... console.log("0:%s, 1:%s, 2:%s", arguments[0], arguments[1], arguments[2]);
... }
[Function]
> test()
0:undefined, 1:undefined, 2:undefined
> test(1,2,3)
0:1, 1:2, 2:3
> test("wan","nyaa","wahaa")
0:wan, 1:nyaa, 2:wahaa

知らんかった、js柔軟すぎるよjs…

ネタ元:https://github.com/patrickkunka/easydropdown/blob/master/src/jquery.easydropdown.js

JavaScript Math.floorを使わずにビット演算で小数点を切り捨て

> Math.random()*16777216
1032588.9140625
> Math.random()*16777216<<0
15867770

Math.floorより高速ということかな?

ネタ元:https://github.com/patrickkunka/easydropdown/blob/master/src/jquery.easydropdown.js

開眼!  JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

Dynatable.js のCustom Queryで文字列を検索する

Dynatable.js - jQuery plugin for HTML5+JSON interactive tables and more というとても高機能で便利なテーブル関連のjQueryプラグインがあるのだが、その中のとても目ぼしい機能であるCustom Query

サンプルを見ていただければわかるが

inputs: {
    queries: $('#search-year')
  }

のような、簡単な指定をセレクトボックスに行うだけで簡単にカスタムなフィルタリングができるという代物なのだが、試しててちょっとうまくいかなかった。
クエリーの文字列とテーブルにある文字列が合致してるはずなのだがヒットが0件になってしまう。おかしい。

よく考えるとサンプルのは数字だけフィルタリングしてる。
もしやと思ってさらに試した。自分のやつもセレクトボックスのほうを数字に、そしてテーブルのほうも数字にしたらうまくいった。

どうやら数字だけでしかこの機能はうまく行かないらしい。

ということで以下のようなイベントバインドをした。これはjsのindexOfを使ってクエリの文字列がターゲットの文字列の中にあるのかという判定をする関数である。
返り値には真偽値を返せばtrueになったものだけフィルタリングしてくれるようなので、indexOfの仕様で文字列がなかった場合は-1が返ってくるので0より大きいかどうかという論理判定をした。

$('#target').bind('dynatable:init', function(e, dynatable) {
                dynatable.queries.functions['targetElement'] = function(record, queryValue) {
                    return record.targetElement.indexOf(queryValue) > 0;
                };
            }).dynatable({ ... });

これをバインドしたらうまく文字列でも動いてくれた。

これくらいはデフォルトでできてほしかったが、このようにイベントバインドしてカスタマイズできるので中々に柔軟である。

Javascript 小数点足し算

> 1+2 === 3
true
> 0.3 === 0.3
true
> 01+0.2 === 0.3
false
> 0.1+0.2
0.30000000000000004

Why does this happen? 0.1 +0.2 is equal to 0.30000000000000004. What you need to know is that all JavaScript numbers are floating points represented internally in 64 bit binary according to the IEEE 754 standard. For more explanation, take a look to this blog post.

You can use toFixed() and toPrecision() to resolve this problem.

45 Useful JavaScript Tips, Tricks and Best Practices | Flippin' Awesome

JavaScript 配列内の最大、最小の値を抽出

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

JavaScript ランダムな英数字を生成ワンライナー

> Math.random().toString(36)
'0.fyhg9kuze4su4n29'

全文

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);
}

45 Useful JavaScript Tips, Tricks and Best Practices | Flippin' Awesome