switch と case のインデントレベル - hogehoge @teramako
主に2種類あると思う。 switch (expr) { case expr1: break; case expr2: break; default: // ... } と switch (expr) { case expr1: break; case expr2: break; default: // ... } ボクは、前者がお勧めだと思っている。jslint ？ そんなの知りません。 vim のデフォルトがインデントするから ブロック文を生成した時の整合性 1番目はいいや、単にボクの使用エディタがvimだってだけだから。 2番目。 switch内の最後の句で、微妙にインデントレベルが合わなくて気分が悪くなるわけだが、下記のようにブロック文にするとすっきりさせることができる。 switch (expr) { case expr1: break; case expr2: break; de
Firefox 17 から Map と Set がイテラブルになった件について - hogehoge @teramako
Firefox 17.0 リリースノート さて、Firefox 17 がリリースされました。そのリリースノートに、以下の様なのがあります。 JavaScript の Maps と Sets がイテラブル (反復可能なオブジェクト) として利用できるようなりました。 これはどういうことなのかを少し解説。といっても、内部のECMAScript仕様に詳しいわけではないので、その辺りは、Constellationさんに譲りたいと思います（ぉ あくまでMozilla実装での使い方ということで。 var map = new Map([ ["a", "A"], ["b", "B"] ]); map.set("c", "C"); console.log( map.get("a"), map.get("b"), map.get("c") ); // "A B C" ここまでは今までの基本です。 イテラブルと
flexible ボックスメモ - hogehoge @teramako
Firefox 18.0a(Nightly) で CSS Flexible Box Layout Module が実装されつつある。 その辺りは、FirefoxのFlexbox実装、進行中 - fragmentary 辺りを参照ってことで。 まぁともかく、about:config の値 layout.css.flexbox.enabled を true にすれば、少し試すことができる。 んで、Using CSS flexible boxes - CSS | MDN を読みつつ勉強。そのメモをば。 flex containerdisplay: flex; な要素。その子要素がflex itemとなり、フレキシブルなレイアウトを実現する。 レイアウトには主軸(main axis)となる方向がある。上図では横方向(row)のレイアウトになっている。この方向を決めるのが、flex-directio
constructor プロパティについて - hogehoge @teramako
説明をつけておくと、constructor プロパティは、オブジェクト作成時に自動的に生成されるプロパティで、そのオブジェクトが生成されたときに使われたコンストラクタが参照されています。 ミックスインパターン new this.constructor() の利用 - わからん たまたま見つけたので引用するけど、何処か別のところでも似たような勘違いが書かれていたように思う。もしかすると、このように勘違いしている人は多いのかもしれない。 正しておきたいと思う次第。 間違っているのはconstructor プロパティは、オブジェクト作成時に自動的に生成されるプロパティという部分。 constructor プロパティが生成されるのは、Function オブジェクトが生成されたときです。 以下は、Function オブジェクトが作られる時の処理の流れの一部です。 Let proto be the r
CSPとグローバルオブジェクトの取得 - hogehoge @teramako
グローバルオブジェクト、通常のWeb上のJavaScriptではwindowオブジェクトのことになるが、最近のJavaScriptではWeb上で動くものとは限らないこともあって、汎用的に取れる手段が確立されている。 まぁ、通常は var global = this; で良い。 (function(global) { "use strict"; // ... }(this)); という書き方の方が一般的かもしれない。 ただし、ECMAScript5th の Strictモード環境下では、this がグローバルオブジェクトを指すことはなく undefined になってしまう。その場合、以下の様にすれば取得は可能だ。 "use strict"; var global = new Function("return this")() この書き方が一番汎用性があると思っていたのだが、一つ問題が浮上した
about:newtab に背景画像を仕込む - hogehoge @teramako
えーと、こんな感じ。 @-moz-document url(“about:newtab”) { #newtab-vertical-margin { background-image: url("file:///G:/image/madoka_magika/mami_5.jpg"); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } } userChrome.css とかに書くと良いじゃないかな。urlは変えてね（あたりまえ） とか、書こうと、準備してたら、Wallpaper your Firefox new tab page • Mozilla Linksに既に書かれてたorz
jscomplete-vim ちょっと賢くした(Addtive, Multiplicative Operator編 + α) - hogehoge @teramako
jscomplete-vim teramako/jscomplte-vim - GitHub ちょっとずつ賢くしてます。 +-*/%の演算子の演算を少し加えた。 ただし、数値の演算はかなり適当というか、Vim script に NaN がなく、演算が失敗する時は 0 が返る仕様っぽいため、JavaScriptでは NaN が返るような演算でも 0 を返す仕様(バグ)になっている。数値の演算はプライオリティが低いと見なして現在は放置。 よって、 var o = { NaN: "OK", }; o[10 * "a"]._ // ↑カーソル位置 の様なのは現状はまだ無理。 +αの修正 まず、jscomplete-vimがどんなことをやっているか書こう。 目標は適切なプロパティ名の補完にある。んで、プロパティ名が必要そうな場面は、.か[がある時になる。最終的にはグローバルオブジェクトのプロパティも
jscomplete-vim - hogehoge @teramako
https://github.com/teramako/jscomplete-vim 既存のvimに入っているautoload/javascriptcomplete.vimがアレだったので、もう少し賢そうなのを作りたいと思い、作り始めた。 初めてのVim scriptなので拙いコードだと思うけど。ある程度目的は達成できてきたと思うので、GitHubにアップしてみた次第。 .や[後のプロパティ名を補完することが目的。 そのために、ある程度の式をパースし、どんなオブジェクトが返るかを判断する。 "a,b,c,d" .split(",") .map(function(c){ return '"' + c + '"'; }) .join("\n") ._ // ↑カーソル位置 とある場合は、 "a,b,c,d" .split(",") .map(function(c){ return '"' +
ECMAScriptで提案されている arrow function について - hogehoge @teramako
ECMAScript6では、functionの代わりに=>を使えるようになる http://css.dzone.com/articles/exciting-future-javascript-0 ES6、だいぶドラスティックな変更に傾きつつあるよう。ES4の二の舞にならないといいのですが・・ 2012/04/03 BBCがレスポンシブデザインを採用 - 本日のHTML5とか最新情報 - IT-Walker on hatena HTML5のMLにECMAScript全快な話を広げるのはアレな気がしたので、こちらでヒッソリと書こうと思う。 まず、本当に『ES4の二の舞にならない』ことを願う。 んで、arrow functionこと=>に関して、まだECMASCript6thに入ることが決まっているわけではないと思う。記事でも ECMAscript, 6th edition might brin
メソッド実行時の引数に関数代入の挙動 - hogehoge @teramako
不思議な挙動だね。 Firefox 8.0 var o = {}; o.hoge(o.hoge = function(){ console.log("hoge"); }); // TypeError: o.hoge is not function o.hoge(); // "hoge" o.hoge(o.hoge = function(){ console.log("HUGA"); }); // "hoge" Opera 11.52 var o = {}; o.hoge(o.hoge = function(){ console.log("hoge"); }); // TypeError: o.hoge is not function o.hoge(); // "hoge" o.hoge(o.hoge = function(){ console.log("HUGA"); }); // "ho
cat コマンドでネコを走らせる - hogehoge @teramako
というツイートが昨日RTで流れてきたので、面白いなと思ってやってみている。 https://github.com/teramako/scripts/blob/master/shell/cat.sh cat コマンドは本来 concatenate をするコマンドである。ということで、これに反した場合にネコを出して矯正させようという趣旨である。単なる bash スクリプトである。~/bin/catとして放り込むのが良かろう。 C言語版、Perl版等のもうちょっと高級な言語での書き直しを望みます。（僕はCもPerlも得意じゃないので...） 標準入力がない、かつ、ファイルが2つ以上指定されていない 標準入力がある、かつ、ファイルが1つ以上指定されていない 「標準入力がない、かつ、ファイルが指定されない」に修正 場合にネコがでる。 ずさーーーーとネコが流れてきて 最後に と注意される仕様。 因みに
ECMAScript 6th, Harmony と JS++ - hogehoge @teramako
Web Reflection: ES6, Harmony, and JS++ http://www.3site.eu/JSNext.pdf [PDF] 内容がとても面白い。 Mozilla JavaScripterなら知っているものは多そうだが。 SpiderMonkeyで独自に採用されているものが将来的にECMAScriptに採用されて仕様に載ると良いなと思う。 ということで内容を紹介と個人的メモ ブロックスコープ let JavaScriptで変数宣言というと、var一択で、これは関数ブロックに対するスコープとなり、真のブロックスコープは存在しない。 ということでletってのが登場。 for文、ifのブロック内でのスコープを提供できるよ。 for (let i = 0; i < 3; i++){ // ...; } typeof i; // undefined iはfor文内のみのスコ
Feedボタンをステータスバーに移動 - hogehoge @teramako
vimperatorを使っているオイラはURLバーを表示していない。でも、そうするとフィードアイコンが表示されない。それは少々不便なのでステータスバーに移動させてみた。 HOME/.vimperatorrc" Show feed-button to statusbar :javascript <<EOF (function(){ var feedPanel = document.createElement('statusbarpanel'); var feedButton = document.getElementById('feed-button'); feedPanel.setAttribute('id','feed-panel-clone'); feedPanel.appendChild(feedButton.cloneNode(true)); feedButton.parentNo
地雷地帯だって、もう何もこわくない - hogehoge @teramako
やっていることはuserChrome.css でパノラマの背景を設定する - hogehoge @teramakoとほぼ同じ。画像さえあればCSSでいろいろ工夫は可能。 今回はグループの要素に3パターンの画像を用意して背景にしてみている。以下の様な感じね。:nth-of-type便利！ html|div.groupItem { background-size: cover; background-position: top left; } html|div.groupItem:nth-of-type(3n) { background-image: url(file:///G:/image/madoka_magika/mami_1.jpg); } html|div.groupItem:nth-of-type(3n+1) { background-image: url(file:///G:/i
Node.compareDocumentPositionが素晴らしい - hogehoge @teramako
と呟いていたら、 id:caisui さんが と教えてくれた。 広範囲にイベントを取得して、イベント発生元がどの要素に含まれるかで処理を変えたい時があって、そんな時は親ノードを辿って調べるという面倒なことをしていた。これとはおさらばしたいということで、compareDocumentPositionについて調べてみた。 Node.compareDocumentPosition - MDC Doc Center The return value is a bitmask with the following values: DOCUMENT_POSITION_DISCONNECTED = 0x01; DOCUMENT_POSITION_PRECEDING = 0x02; DOCUMENT_POSITION_FOLLOWING = 0x04; DOCUMENT_POSITION_CONTAINS
求む。インスタンスをArrayで拡張する方法 - hogehoge @teramako
Arrayインスタンスを拡張したい。 prototype汚染はさせない Array.prototypeの上書き禁止 Arrayオブジェクトと同じ挙動 という条件。 下記、EXArrayというコンストラクタをArrayの様な扱いにしたいわけだ。 テストコードでも書いているが instanceof obj instanceof Array // true であること obj instanceof EXArray // true であること 配列要素は hasOwnProperty で true が返ること toStringが配列っぽく返ってくること までは実現できている。しかし、 JSON.stringify(obj) が Arrayっぽくない obj.toSource()がTypeError: Array.prototype.toSource called on incompatible O
Scriptish （Greasemonkey フォーク版） キタ━━━ヽ(ﾟ∀ﾟ)ﾉ━ - hogehoge @teramako
Scriptish Beta! A New Greasemonkey - Erik Vold's Blog Scriptish :: Add-ons for Firefox Home - scriptish - GitHub ついにというべきか何というべきか、Greasemonkeyのフォーク版が登場した。 因みに対象は Firefox 4.0beta5 〜 4.0beta7 彼曰く、 Greasemonkeyは大好きだ が、Firefox 1.5 をサポートするために新機能の追加ができなかった JavaScriptコードモジュール(JSM)とかね 複数ウィンドウを立ち上げる時や起動時にメモリを少なくパフォーマンス向上につながる 次のメジャーリリースである Greasemonkey 0.9 でやっとサポート対象の最小バージョンが 3.0 に上がる が、メンテナたちはバグフィックスとか最小限
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
getEventListeners(node) - hogehoge @teramako
gitのコミットログなんて"fixed"だけで十分だろ！エンジニアならコード読め！ - hogehoge @teramako
in 演算子と obj.hasOwnProperty() はどちらが早い！？ - hogehoge @teramako
