2012/04/26

Google HTML/CSS Style Guideの俺にとって使えそうな箇所


■プロトコルは省略
http:とかhttps:とかは省略する
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
.example {
  background: url(//www.google.com/images/example);
}

■必要に応じてコメントを書く

■TODOは大文字 + コロン
<!-- TODO: remove optional tags -->

■type属性はいらない
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<script src="/js/js.js"></script>

■URL属性はクォーテーションを使わない
url(//www.google.com/css/go.css);


■並び順はアルファベット順にする
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

■CSSのグループごとにセクション名をコメントに書く
/* Header */
#adw-header {}

/* Footer */
#adw-footer {}

/* Gallery */
.adw-gallery {}


参考:Google HTML/CSS Style Guide

2012/04/23

[JavaScript] 例外の原因。HIERARCHY_REQUEST_ERR: DOM Exception 3


JavaScriptのある処理で例外が出た。
Chromeのコンソールで確認したところ、エラー文は「HIERARCHY_REQUEST_ERR: DOM Exception 3」
変数の中身など処理を確認しながら調べてみても、いまいちつかめない。
そもそもこの例外が意味するものもわからなかった。これは自分の英語力の足らなさが原因なんだけど…日本語で説明してくれているページが少なかったので困った。

原因を説明してくれているページ→付録A.2 DOMパーサの動作の差異
前述のページには「あるノードに対して,そのノードまたは祖先ノードを引数newChildとして,appendChildメソッドまたはinsertBeforeメソッドを実行した場合」が原因と書いてある。
コードを見返したところ、DOMを取得する部分でセレクターを書き間違えていたことに気づいた。
//間違いコード
$('#wrapper ul:last').append(liElement);

//正解コード
$('#wrapper > ul:last').append(liElement);
間違いコードで取得したul要素はappendしようとしたliの子要素だったため例外が起きていた。 ただの凡ミスなんだけど、原因がわかるのにちょっと時間がかかってしまった。

つまりは親を子の中に入れようとしてた。
それは社会的にもJavaScript的にもタブーだよってことみたい