普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
たった一行で人生が変わった.vimrcでの設定とその意味 - Weblog - Hail2u.net
僕はVimを使うまでは秀丸エディタを長いこと使用していました。両者の間に設定の項目数やキーバインドに割り当てられる機能に大きな差があるとも思わなかったので、使い始めた当初は「そんな言うほど高機能でもないよなー」とか思っていました。しかし色々なプラグインを試したり、様々な設定を.vimrcに書いているうちに、Vim (やEmacs)がその他エディタと決定的に違うのは設定の豊富さではなく、設定の自由さがもたらすアプローチの多様性なのではないかと考えるようになりました。というわけでそういう設定の自由さを最初に実感した話をVim Advent Calendar 2011の6日目のエントリーとして書かせてもらいます。 昨今のWebサイトではCMSなどを利用することが多く、共通のHTMLコードはテンプレートとして作成されます。その場合そのテンプレートの利用されるパスが様々な場所や階層になりうるので、例
サブディレクトリ－をgh-pagesへ向ける運用
gh-pagesブランチの管理にはいくつか手法はあると思うのだけど、決定版はなさそうに思える。まともにやるとするとsubtreeを使うのが良さそうだが、パワフルすぎて役不足な印象だ。僕は公開するファイル群を吐くサブディレクトリーをmasterからは無視しつつ、gh-pagesブランチではそのサブディレクトリーをルートにするみたいな運用に落ち着きつつある。 example.com/ ├ dist/ │ └ index.html ├ src/ │ └ index.mustache ├ .gitignore ├ index.js └ package.json Node.jsでindex.jsを使ってsrc/index.mustacheを処理し、dist/index.htmlを吐くという形だ。ルートでは.gitignoreでdist/を無視し、普通にoriginを追加しておく。dist/で改めてg
Git for Windows v2.x.xのインストール
Git v2系のWindows版がGit for Windowsの方で少し前から公開され始めていたことを今さら知ったので、更新した。2015/05/05現在はv2.4.0がリリースされている。インストールから動かすまでけっこう手間取ったので、メモがてら記事に残しておく。Git v2の使い勝手とかについては特に書かない。 ~/.bashrcの読み込み このGit for Windowsでは、デフォルトで無理やり~/.bashrcを読みに行くことがなくなった。~/.bash_profileは読みに行くので、~/.bash_profileから~/.bashrcを読みに行くように、つまり普通にBashを設定してやれば良い。 if [ -f ~/.bashrc ]; then . ~/.bashrc; fi これだけ書いた~/.bash_profileを作成するのが良い。あまり関係ないイシューではそ
Vimで小数を四捨五入して置換
渡されたSVGファイルを見たらpath要素のアンカーポイントの数字が小数点以下6桁くらいから30桁まで混在していて、無駄な感じがあった。SVGOでできるのでそれでやっても良かったが、まずは単純に小数を指定桁(3から5桁)で四捨五入したいだけなので他に何かされてしまう可能性があるツールはちょっと避けたい。ということでVimの置換でどうにかした。 コマンドとしては長いがやっていることは普通なので、後述の説明が理解できればソラで打てるんじゃないかと思う。 :%s@\d\+\.\d\+@\=round(str2float(submatch(0))*1000)/1000@g 例えば、 0.12345 12.34567 0.99999 56.78999 は、 0.123 12.346 1.0 56.79 と置換される。それぞれ切り捨て、切り上げ、切り上げて余分な0を削除、切り上げて余分な0を削除と置換
git-credential-wincred.exe
WindowsのGitでパスワードをOSに覚えさせるようにするには、てっきりgit-credential-winstoreを別途インストールする必要があるのかと思っていたけど、今はgit-credential-wincred.exeが同梱されているので不要になっているようだ。 C:\> git config --global credential.helper wincred コマンド・プロンプトでこのようにして変更するだけでスムーズに乗り換えられる……はずなんだけど、Git-1.8.5.2-preview20131230.exeではうまくパスワード入力のプロンプトが出てくれないバグがある。Git-1.9.0-preview20140217.exeでは直っているので、更新すれば大丈夫。 古いgit-credential-winstoreの実行ファイルは、 %APPDATA%\Roaming
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
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オプションを付けるのも良さそ
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が実行されるようになる。この設定はプロジェクト・ローカルで特定のリモートに対してのみ
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(
VimからHTMLHintを使う
HTMLの簡単な文法チェックには長らくValidator.nuのAPIを利用していたけど、Node.jsパッケージのHTMLHintがそこそこ使えそうだったので今はこっちを使っている。ローカルで動くと気軽に使える度が増す。ただデフォルトでインストールされるCLIプログラムはリッチな感じの出力にしか対応していないので、ちょっと扱いづらい。Vimのデフォルトのerrorformatに応じた形でチェック結果を出力するだけのNode.jsスクリプトを書いて使ってる。 Download: htmlhint and htmlhint.vim あらかじめグローバルにHTMLHintをインストールしておく必要がある。htmlhintをパスの通った場所に、htmlhint.vimを~/.vim/compilerディレクトリにコピーし、~/.vim/vimrcなどで以下の様に設定してやるとインストール完了。
git subtreeの練習
Gitのサブモジュールでは面倒そうな、頻繁に更新される別のリポジトリを取り込む方法としてサブツリーマージを行うラッパーであるgit subtreeコマンドを使う練習を始めた。どちらかというと「参照する」要素の強いサブモジュールに対して、サブツリーは「切り分ける」や「取り込む」という感じなんじゃないかと理解している。全般的に間違ってそうで怖い。 「切り分ける」、つまりリポジトリのサブディレクトリを別のリポジトリにしたい場合は、単純なケースだと親にあたる方で.gitignoreや.git/info/excludeを使ってサブディレクトリを除外してやれば良い。でもこの場合、両方のリポジトリで関連した変更がある時にそれぞれのリポジトリでコミットしてやらないとならないので面倒くさい。 「取り込む」場合はサブモジュールが基本なわけだけど、他で作業して戻ってきてたりする必要があるし、サブモジュールの更新
Vimのrenderoptionsオプション
最近のKaoriYa版のWindows向けgVimではどうやらrenderoptionsオプションを適切に設定すると、DirectWriteを使った描画に切り替えられるようだ。一年ほど前からパッチとして含められるようになっていたらしい。 有効にしただけではあまり劇的な効果を上げることは出来ないようだけど、追加で細かく設定を行える。例えば上のスクリーンショットのようにブワッとアンチエイリアスをかけたい場合は~/vimfiles/gvimrcなどで以下のようにすれば良い。 set encoding=utf-8 if has('win32') set guifont=MigMix_1M:h12 set renderoptions=type:directx,renmode:5 endif わかりやすそうなのでMigMix 1Mを例にした。デフォルトのGDI下では、上のスクリーンショットの様に特に縦
入力フォームのラベルをフワッと浮かせるパターンの別解
Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 Demo: Alternative Float Label Pattern 入力フォームにフォーカスすると、左にあるラベルが斜め右上に少し移動すると同時に入力フォームが左へ拡大する。これによりFloat Label Patternと同じような結果になるが、デフォルトの状態ではラベルとプレースホルダーを両立させることができる。 ラベルを入力フォームのフォーカスと連携させるには、隣接兄弟セレクターを使うくらいしか方法はなさそうなので、マークアップは入力フォーム→ラベルの順にする必要がある。また
CSSのローディング・アイコンのコスト
今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin
Vimmers 2
手が空いた時にやってた作業が一段落したので、ペライチというかHTMLとCSSとJavaScriptを普通に書きたくなった。ので、vim-jp.orgにあったVimユーザーの一覧ページのカラフルな奴を作った。カラフル。 オリジナルのVimmersが密度が高かったので、ゆとりを持ってそれぞれをカードっぽくなるようにした。この時点で既にコンセプトを誤解してて駄目な感じだった……。 フォントはLatoを使った。x-heightが高く、ディセンダが小さめで、開きが大きいので、余白の多いカード的なものにはおさまりが良い。ウェイトも豊富なので使いやすいけど、WindowsのChromeだと一部サイズでまだガタつきがあるかも。 カラーは当初Pantoneから幾つか選定してたんだけど、青と橙がFlat UI Colorsとほぼ同じものになってしまったので、こちらをそのまま利用させてもらうことにした。赤緑橙青
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
wildfire.vimでVim力を下げる
wildfire.vimという、カーソルがある辺りのテキストオブジェクトをなんとなく選択してくれるVimプラグインを使い始めた。Vim力が下がる代わりに魂の平穏が得られる。ような気がする。 デフォルトではノーマル・モードで<Enter>を押すとカーソルのある辺りのテキストオブジェクトを選択してくれる。HTMLファイルを編集中なら属性値の上で発動させると、クオートの間を選択してくれる。その状態でもう一回<Enter>を押すとその上位にあるテキストオブジェクトをなんとなく選択してくれる。属性値のクオートの間を選択した状態だと、HTMLタグで括られた全体(など)まで拡大される。 逆方向に縮小することも出来るので、適当にタカタカ<Enter>を押して拡大しつつ、広げ過ぎたら<BS>で狭めるみたいな感じで使えて、とてもいい加減に使える。僕は狭める方だけを<S-Enter>に変えて、サクサク感を上乗せ
コードをなんとなく色付けするやつ
Coding in colorという記事を読んだ。どのようなものか、通常の構文強調とはどのように違うか、は僕が言葉で説明するよりもそのデモを見てみた方がわかりやすい。記事ではtypoに気づきやすいとかあるけど、どちらかというと読むのに向いていると感じる。 GitHubのコード・ビューワーやウェブログの記事のコード・ブロックのように、ハイライト規則を読む人が知らない(ことがある)ようなケースだと、こういう色付けの方がスタティックな色付けよりも読みやすいような気がする。 とか書きつつ、結構前からウェブログのコード・ブロックには色付けは必要ないと考えていたりもする。色付けをしないと読みづらいほど長いコードを丸々載せると、記事の文章が分断されて読みづらくなるし、短いコードなら色付けが必要になることはまずない。コメント部分のみコントラストを下げるみたいなので十分な気がする、と、そういうJavaScr
rawgithub.comへのホットリンク
ある記事でrawgithub.comを使ってJavaScriptウィジェットを配布しているのを見た。もちろんrawgithub.comが「テストなどにのみ使って！」と書いているのもあるけど、使うべきじゃない理由は他にもある。 パフォーマンス Amazon S3っぽいので、速度的に大きな問題が起こることはあまりなさそう。どちらかというと、サービス提供者のコスト・パフォーマンス。開発補助の便利ツールとして感謝して使うくらいにしとかないと大変そう。MIMEタイプの変更が行われる前までのGitHubのrawサブドメインへのアクセスが全部rawgithub.comに飛んだとすると、月額いくらになるのか見当もつかない。 ドメインの将来 ドメインの更新忘れなどで悪意のある第三者にドメインが奪われた時に、悪意のあるファイルを配信されるようになるかもしれない。rawgithub.comの用途は主にCSSファ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
