普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
Gitのfetch/pullサブコマンドで--pruneオプションをデフォルトにする
Gitではbranch -aでリモート・リポジトリーも一覧できる。この一覧には既にリモートでは消されたリモート・リポジトリーも表示される。この一覧を更新するにはfetch --pruneを使うわけだが、いちいちそうするのは面倒くさい。どうやらfetch.pruneをtrueにするとデフォルトで--pruneを付けてfetch(及びpull)を実行してくれるようだ。 $ git config --global fetch.prune true $ git fetch From https://github.com/hail2u/example x [deleted] (none) -> origin/deleted-branch グローバルに設定して良い場合はこれで常に--prune付きでfetchとpullが実行されるようになる。この設定はプロジェクト・ローカルで特定のリモートに対してのみ
git grepをVimで使う
Gitのgrepサブコマンドは通常Gitリポジトリーでしか使えない。しかし--no-indexオプションを付けると、Gitリポジトリーではないディレクトリーでも検索できる(もちろんGitリポジトリーでも)。Vimからももちろん使えるので、ackちょっと遅い、ag入れるのが面倒くさい、MSYS上で使ってるとjvgrepの出力が稀におかしい、などの理由でgrepに戻ったりしてる人はgit grepを使うのも良さそう。 set grepprg=git\ grep\ --no-index\ -I\ --line-number grepformatを編集しないで済ませるためには--line-numberオプションを追加して、行番号を表示させる必要がある。僕はバイナリ・ファイルを無視する-Iオプションも合わせて追加しておいた。パフォーマンスをあげるために--no-colorオプションを付けるのも良さそ
Vimのdiffモードを自動的に終了させる - Weblog - Hail2u.net
Vimでdiffsplitなどで差分を見た後、片方のバッファーを閉じるとdiffモードのままなので、手動でdiffoffしないといけない。僕はdiffモードやQuickfixの時しかウィンドウ分割を使わないみたいな感じのライトなVimユーザーなので、片方閉じたら自動的にdiffモードを終了させたい。そういう設定は特になさそうなので、自動コマンドでやってやった。 augroup DiffAutocommands autocmd! " Turn off diff mode automatically autocmd WinEnter * if (winnr('$') == 1) && (getbufvar(winbufnr(0), '&diff')) == 1 | diffoff | endif augroup END バッファーを閉じて他のウィンドウへ移動した時、ウィンドウの数(winnr(
HTTPSへ
宣言通りHTTPSに移行した。まずはCloudflareの無料HTTPSを利用している。Cloudflareでは設定でHTTP Secure Transport Securityも有効にできるので、HTTPのままであろう旧URLからもスムーズに移行されるはずだ。RSSリーダー等で全部新着になったなどがあったら申し訳ないが諦めてほしい。 移行にはなおかなり不安が残る。しかしCORESERVER.JPが無料でHTTPSを有効にできるようになったので、いざという時の避難場所は確保できるだろうと考えている。他のいくつかのホスティング・サービスでも無料だったり、年1000円程度で提供されていることは確認したので、もしCORESERVER.JPがダメでもなんとかなるだろう。 このままCloudflareが無料で提供し続けてくれると楽でよいが、そう楽観視することも難しいと感じる。明らかに金のなる木であり
CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能
前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 Demo: Scroll Smoothly with CSS Transition デモのページにはダミーテキストの各セクションの最後にそれぞれ⇑ Back to Topというリンクがある。それをクリックすると1秒かけてスムーズにスクロールしながらトップに戻る。トリガーとスクロール自体はJavaScriptで行っているが、スクロールのアニメーション自体はCSS Transitionで行っている。具体的には以下のような処理
CSSできれいな斜め線
CSSで斜めに線を引くようなことをするには多少なりとも工夫が必要だった。つまりCSSで作る吹き出し(もう5年前の記事だ)のようにborderプロパティーを使って頑張るしかなかったわけだ。今はlinear-gradient()があるので直観的に作ることができるようになった。しかしきれいに引くとなるとまだ工夫が必要そうだ。 Demo: CSS Diagonal Line borderプロパティーを使ったもの、linear-gradient()を背景で使ったもの、Data URI化したSVGを背景に使ったもの、以上の計3つのデモを作った。 .lg { background-image: linear-gradient( to right bottom, transparent 50%, #f0f 50% ); background-repeat: no-repeat; background-si
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
wildfire.vimでVim力を下げる
wildfire.vimという、カーソルがある辺りのテキストオブジェクトをなんとなく選択してくれるVimプラグインを使い始めた。Vim力が下がる代わりに魂の平穏が得られる。ような気がする。 デフォルトではノーマル・モードで<Enter>を押すとカーソルのある辺りのテキストオブジェクトを選択してくれる。HTMLファイルを編集中なら属性値の上で発動させると、クオートの間を選択してくれる。その状態でもう一回<Enter>を押すとその上位にあるテキストオブジェクトをなんとなく選択してくれる。属性値のクオートの間を選択した状態だと、HTMLタグで括られた全体(など)まで拡大される。 逆方向に縮小することも出来るので、適当にタカタカ<Enter>を押して拡大しつつ、広げ過ぎたら<BS>で狭めるみたいな感じで使えて、とてもいい加減に使える。僕は狭める方だけを<S-Enter>に変えて、サクサク感を上乗せ
Vimでメタ構文変数を簡単入力
メタ構文変数とか呼ばれてるらしいfooとかbarとかのアレがまったく覚えられない。のでVimに一般的なメタ構文変数のリストを覚えさせておいて、fooの上で<C-a>するとbarに、barの上で<C-a>するとbuzに、と順に次の(<C-x>だと前の)を選択してくれるように関数とマッピングを書いて使うことにした。 " Cycle metasyntactic variables function! s:CycleMetasyntacticVariables(num) if type(a:num) != type(0) return endif let vars = ['foo', 'bar', 'baz', 'qux', 'quux', 'corge', 'grault', 'garply', 'waldo', 'fred', 'plugh', 'xyzzy', 'thud'] let i =
Vimスクリプト用Google Code Prettifyの言語ハンドラー
重い腰を上げてGoogle Code PrettifyでVimスクリプトのコードを構文強調できるようにする言語ハンドラーを書いた。あんまり頑張らないので、コメントとクオート文字列、Expression evaluationにあるコマンドをキーワードとして強調くらい。 Demo: Test page for lang-vim.js 注意としてはendiとかfuとかコマンドの省略形がハイライトされないこと。あんまり追加する気はない。.vimrc向けにsetやautocmd、map系あたりは追加しても良いかも。 追記 set等の.vimrcでよく使われる設定向けのキーワードの追加と、コメントと引用符絡みでちょっとおかしかったところを直して、GitHubに作った言語ハンドラーのリポジトリに突っ込んだ。だいたいOKな気がする。
たった一行で人生が変わった.vimrcでの設定とその意味 - Weblog - Hail2u.net
僕はVimを使うまでは秀丸エディタを長いこと使用していました。両者の間に設定の項目数やキーバインドに割り当てられる機能に大きな差があるとも思わなかったので、使い始めた当初は「そんな言うほど高機能でもないよなー」とか思っていました。しかし色々なプラグインを試したり、様々な設定を.vimrcに書いているうちに、Vim (やEmacs)がその他エディタと決定的に違うのは設定の豊富さではなく、設定の自由さがもたらすアプローチの多様性なのではないかと考えるようになりました。というわけでそういう設定の自由さを最初に実感した話をVim Advent Calendar 2011の6日目のエントリーとして書かせてもらいます。 昨今のWebサイトではCMSなどを利用することが多く、共通のHTMLコードはテンプレートとして作成されます。その場合そのテンプレートの利用されるパスが様々な場所や階層になりうるので、例
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
VimのCSS3シンタックス・ファイルみたいな何か
VimでCSSを書いていると、最近のCSS3プロパティでもやもやした感じになるのはまぁしょうがないかな……と見ないふりをしていた。が、@mediaでブロックを作った時に最初のセレクタのハイライトに失敗するのとかにムキーとなって、もうこれは駄目だと思ったので、既存のCSSシンタックス・ファイルをCSS3に対応させた感じにする追加シンタックス・ファイルを作成した。はじめてのVimシンタックスファイル(もどき)。 Media Queriesでブロック化した時に以下のような感じで最初の行のハイライトが失敗する。 最初のセレクタだけなのだけど、どうも落ち着かない。これを、 とMedia Queriesの条件式も含めてちゃんとハイライトされるようにする。 他はHTML5の新しい要素やCSS3のプロパティや、値のキーワード、calc()やhsla?()などの関数などになんとなく対応させただけ。確認は十分
HTTPエラーページに意味を持たせよう
Translation of: Adding meaning to your HTTP error pages! by Stuart Colville This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license はじめに ウェブ上で何かを検索しようとすると、既に存在しないページしか検索結果になく、それらへのリンクをクリックすることはよくあるだろう。その開いたページにデフォルトのエラー・メッセージの他に何も情報が載っていなかった場合、多くの人々は戻るボタンを押し次の検索結果を開こうとするだろう。 サイト製作者である我々はもっと訪問者に意味のあるエラーページを作成することができる。そうすればたとえエラーページであっても訪問者をサイトに留まらせ、彼ら
CSSグラデーションのちょっとしたテクニック #1
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
スマートキーワードは後ろが良い
IE5(やそれを利用したタブブラウザ)を利用していた頃からロケーション・バーで検索していたので、特に操作性が優れているわけでもない検索バーなどはまったく使う気になれずスマートキーワードしか使ってない。最近はロケーション・バーで履歴やブックマークの絞込みも可能なので、ますます重要度が上がった。このスマートキーワード機能自体に特に不満があるわけではないのだけど、キーワードは前に付けるのではなく後ろに付けるのが良いのじゃないかと、履歴やブックマークの絞込み機能が付いて以降は考えるようになった。「g foobar」じゃなくて「foobar g」というように。 上述の通り、今の多くのブラウザは履歴やブックマークをロケーション・バーから手軽に検索できるので、 とりあえず探したい情報に関係ありそうな単語をロケーション・バーで入力する 見つかった: そのままドロップダウンから選択して開く 見つからなかった
CSSのプロパティをソートするPerlスクリプト
CSSを書く時に「セレクタ内でCSS仕様書でのプロパティの出現順序に従ってソートする」という個人的なルールを守っている。何かコーディングにおいて便利な理由があるからというわけではなく、第三者に説明する時に「仕様書の出現順で書いてます！」とかで済ませられるから。今まではファイル全体を処理するオレオレPerlスクリプトで適当にやっていたのだけど、Vimで選択範囲だけをソートとかやりたくなったので、普通に標準入力を読んで結果を標準出力に吐くように書き直した。ついでにCSS3のプロパティとFirefox(Mozilla)やSafari(WebKit)、Opera(Presto)、Internet Explorer(Trident)の独自拡張などへも対応させたりとか。 #!/usr/bin/perl # Author: Kyo Nagashima <kyo@hail2u.net>, http://h
CSS color previewをrgb()に対応させた
VimでCSSを編集中に色をインライン・プレビューしてくれるCSS color previewというスクリプトをrgb()に対応させてみた。一応rgba()にも対応しているような感じで、透明度を無視してプレビューされる。hsl()とかも対応しようと思ったのだけどRGBからHSLへの変換が面倒になってすぐに諦めた。hsl()とか使わねーよ。 Download: rgb()/rgba()に対応したCSS color preview インストールは$HOME/.vim/after/ftplugin(Windowsでは$HOME/vimfiles/after/ftplugin)にcss.vimとしてコピーするだけ。インストールしてCSSファイルを開くと、 というように背景色でインライン・プレビューされる。プレビューの通りrgba()の透明度は反映されない。matchlist()で書こうとしたのだけ
Pure CSSな吹き出し
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
