インライン SVG がうまく表示されない
インライン SVG というのは HTML に直接記述できる SVG です。こんな感じ。
<body> <svg> <path /> </svg> </body>
そのインライン SVG が HTML 圧縮ツールのせいでうまく表示されませんでした。というのも input タグのような閉じタグのないタグは HTML ではスラッシュがいりません(あってもよい)。そのため HTML 圧縮ツールは文字数を減らすためスラッシュを消していました。
しかし SVG は XML であり XML はスラッシュが必須です。 HTML 圧縮ツールが SVG のスラッシュを消していてうまく表示されなかったのです。
対応策
プリミティブ型や構造体の FirstOrDefault
とてもよい本でした。
C#ショートコードプログラミング第2版 【▲→川俣晶の縁側→技術関連執筆情報】
この本に null 許容型を使えばプリミティブ型のデフォルトと区別をつけられるよーって書いてありました。
var v = (new int?[] { 1, 2, 3 }).FirstOrDefault(p => p == 0); if(v == null) { } else { // v にごにょ }
そんな都合よく null 許容型に変えられるわけないでしょ(笑
どちらも一長一短ありますが私ならこうします。
var v = (new int[] { 1, 2, 3 }).Where(p => p == 0); if(v.Count() == 0) { } else { // v.First() にごにょ }
LINQ というか関数型大好きマンになってしまった。もう少し純粋度の高い関数型で大きなプログラム書きたい。
gulp-slim が日本語を含むファイルのコンパイルに失敗する
結論から書くと、私の環境は Windows で gulp-slim は Slim のコンパイルに Ruby 実装を使っていた。 Windows で Ruby を使うときの文字コードの問題で失敗していたようだ。
環境変数 RUBYOPT に -EUTF-8 を設定すれば成功する。
WindowsでEncoding.default_externalをUTF-8にするには - すがブロ
gulp-slim がエラーメッセージを握りつぶしていたことと、 Node.js 上で走る gulp-slim を表面的に使っている限りは Ruby が走っているなど知るところではないので原因の特定に時間がかかった。
Ruby 書くのではなく使う人にこの手の問題を意識させないで欲しいよね。
Stylus ではまった点
CSS プリプロセッサというと Sass と Less の2強という感じですが Stylus もおすすめですよ。
Stylus は文法も覚えやすく1日もあれば使いこなせますが2点だけはまったのでメモ。
割り算をするときはかっこでくくる
margin (500px / 3)
font プロパティや border-radius プロパティなどは CSS でも /
を使うプロパティがあるのでそれと区別をつけるためでしょう。
calc() 関数の中の変数は展開されないので % 演算子でフォーマットする
container-margin = 500px margin 'calc(%s / 3)' % container-margin
Bug when using CSS calc function · Issue #687 · LearnBoost/stylus · GitHub
ここに書いてありました。
CSS3 の calc() 関数はどんなプロパティにでも使えるわけじゃない
calc() 関数を使っていて動かなくても時間を無駄にせぬようメモ。
font-size: calc(36px / 2);
なぜか動きませんでした。
css3 - CSS - calc() on font-size - changing font size based on container size - Stack Overflow
英語は読めないけど駄目だよーって書いてありそう。
クロージャではまったのでメモ
クロージャではまるのは C# に続き CoffeeScript で2度目なのでメモ。
やりたかったこと
4つのクロージャに0、1、2、3のそれぞれを束縛したかった。
間違い
f() for f in ((-> console.log i) for i in [0...4]) # 4 # 4 # 4 # 4
CoffeeScript の性質上仕方のないことで変数のスコープが大変わかりづらいが、すべてのクロージャが同じ変数を束縛している。そのため同じ数が束縛されてしまった。
正解
f() for f in ((do (i) -> -> console.log i) for i in [0...4]) # 0 # 1 # 2 # 3
クロージャを作るときに即時関数を使って変数を新たに宣言し、その変数を束縛している。うまくいった。
まとめ
- クロージャは変数のスコープに注意
- ループでクロージャを作るときは要注意
- CoffeeScript でクロージャを作るときも要注意
グリッドレイアウトを見やすくする小技
グリッドレイアウトやカードレイアウトが流行っていますよね。でも縦と横のマージンを安易に同じにしていませんか?
縦と横のマージンが同じ場合は、まず右に読み進めて下に右に読み進めて下に…なのか、下に読み進めて右に下に読み進めて右に…なのかわかりません。そのためユーザは読み進める方向がわからず無意識にストレスを感じてしまいます。
そこで縦と横のマージンに差をつけ読み進める方向をユーザに暗に示すことによって、ユーザのストレスをなくすことができます。
ユーザに読ませたい方向がある場合はそれに合わせてマージンに差をつけましょう。 もしユーザに読ませたい方向がなくても必ずマージンに差をつけましょう。