HTML Importsで読み込まれたドキュメントからの相対パスを得る - Webtech Walker
x-sushiyukiというsushiyukiを表示するためのWebComponentsの要素を作ったんだけれども、importされたファイルからの相対パスでsushiyukiの画像パスを指定するのにちょっと苦戦した。 たとえば、 /index.html から以下のように x-sushiyuki.html を呼び出す。 <link rel="import" href="bower_components/x-sushiyuki/x-sushiyuki.html"> この x-sushiyuki.html に CustomElement で<x-sushiyuki>を登録する処理などがかかれているので、 /index.html では次のように<x-sushiyuki>が使えるようになる。 <x-sushiyuki type="uni">うに</x-sushiyuki> このようなコンポーネント
Node.jsのFiberを使って非同期処理を同期っぽく書く - Webtech Walker
FirefoxのJavaScriptではバージョンを1.7以上に指定するとyieldが使えて非同期処理を同期っぽく書くことができるようになる。 適当な例だけどこんな感じ。 function run(f) { var g = f(function(x) { g.send(x) }); g.next(); } run(function(next) { var result = []; result.push('foo'); // ここで1秒待つ yield setTimeout(function() { result.push('bar'); next(); }, 1000); // ここで1秒待つ var baz = yield setTimeout(function() { // nextの引数がyieldの返り値になる next('baz'); }, 1000); result.push
iOSのSafariで特定のfont-sizeのときの謎の隙間 - Webtech Walker
iOSのSafariでなぜか特定のfont-size（11px、10px、9px）のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれるという件。 DEMO これをiPhoneで見るとこんな感じになる。 こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-sizeのときだけなぜか隙間が空くんです。8pxは大丈夫なので11px以下というわけではないみたい。さらにマルチバイトでなければ隙間はできない。謎。 ちなみにiOS4.3でも直ってなかった。Androidは大丈夫。 解決方法知ってる人がいたら教えてほしい。 追記：letter-spacing: -0.001em; で直るっぽい
history.pushStateでページ遷移するjQueryプラグイン書いた - Webtech Walker
history.pushStateでのページ遷移をやりやすくするためにjQueryのプラグインとしてjquery.smarthistory.jsというのを書いてみました。 jquery.smarthistory.js history.pushStateをサポートしてるブラウザではhistory.pushStateを使って、サポートしてないブラウザでは何もしません（普通に遷移する）。今だとchrome、safari、iOS、Firefox4で動くと思います。 こんな感じで使います。 $('a').smarthistory({ defaultData: $('html').html(), target: function() { return $(this).attr('href') }, before: function() { // ajax前の処理 }, change: function
最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker
Twitter / tacamy: { word-wrap: break-word; } ... ということなのでJSを使わずにCSSだけでやれるみたいです。しかもこれだけ。 .word_wrap { word-wrap: break-word; } IE6、7、8、Firefox3.6、Safari4、Chrome、Opera10.52で確認しましたけどこれだけで全部いけます。ブラボー。 <div class="word_wrap">http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3</div> <div class="word_wrap">aaaa
hasLayoutプロパティがtrueで発生するバグ - Webtech Walker
hasLayoutがfalseのときに起こるバグは多数ありますがここでは触れません。hasLayoutプロパティをtrueにするにはwidthやheightを指定する方法の他に、IE独自実装の「zoom」を使うことも多いです。下記のように「zoom:1」と指定すれば、他のレイアウトに害が少ないからです。 div#foo { zoom: 1; } ただし、この「zoom」はW3CのCSSバリデータでエラーになるのでそれが嫌な人は使わないほうがいいかもです。 hasLayoutプロパティがtrueのときの問題点 では本題です。hasLayoutプロパティがtrueのときに、以下のようなバグが発生します。 IEでリストマーカーが壊れる IE7のズーム機能で拡大、縮小した際に文字が重なる IEでリストマーカーが壊れる これはul,ol,liのhasLayoutがtrueだとリストマーカーが壊れます
img要素のwidth、height属性について再考してみた - Webtech Walker
img要素にwidth、height属性を指定するかどうかは常に悩んでいて、以前にもブログでみなさんに質問したりもしましたが、自分なりの一つの答えにたどり着きました。 画像の幅、高さの情報というのは以下の2通りの情報があると思います。 画像の大きさを構造上表すメタデータとしての情報 見た目の大きさを表す情報 それぞれについて考えてみます。 画像の大きさを構造上表すメタデータとしての情報 以前書いた質問のエントリーにいただいたコメントで以下のようなものがありました。 静止画像である写真や絵画は、IT化以前の歴史上、サイズを表記してきました。美術館に行くとわかりますが、絵の説明は「題名、作者名、発表年、画材、所有者（収蔵美術館）名、『サイズ』」になっています。もちろんここで表記するサイズはピクセルではなくキャンバスの号数かセンチ単位ですが。このことから考えると、現実世界において画像の大きさは重
CSSのデバッグ方法 - Webtech Walker
CSSはプログラムみたいに、エラーがあるからといって、動作が止まったりしません。また、CSSのソースにエラーがなくても思うように動作しないことがあります。そういう場合にどうやって原因を突き止めて修正するか、僕なりのやり方を紹介します。 要点はこんな感じ。 borderを指定してみる display:noneを指定してみる !importantを指定してみる xml宣言を取ってみる（IE6で標準モードにする） widthを指定してみる（hasLayoutをtrueにする） ソースを削除してみる ネットで調べてみる borderを指定してみる 背景やborderをしなければ、基本的にボックスは無色透明なので、どこからどこまでが該当するボックスなのか、わからなく場合があります（僕だけ？）。 ボックスの領域を確認するときは下記のようにborderを指定して確認します。僕の場合、目立つように赤線を表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
