遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
透過PNGをSVGを利用して軽くするテクニック
透過PNGは現状では唯一に近いフルカラーの透過画像を作成する手段だが、ファイル・サイズが大きくなりがちだ。対してJPGはファイル・サイズという点で大きく優るが、透過することは出来ない。このあちらを立てればこちらが立たずの問題をSVGのマスク機能を使って透過だけを受け持つPNGとJPGを組み合わせることで両立させるテクニックを知った。 透過させた画像をまず普通に作る。それから透過してないJPG画像と、透過を反転させてマスクに使うPNG画像を生成する。それらをHTMLでSVGのmask要素をインラインに書くことで組み合わせる。ベースとなるJPG画像が一般的にファイル・サイズに優れ、マスクに使うPNGは空白が多いこと、SVGの記述はごく短いもの、というわけで最終的に低ファイル・サイズが実現できる。 SVGのセキュリティ上の制限により、HTMLにインラインで記述するケースでしか使えないのでCSSの
wildfire.vimでVim力を下げる
wildfire.vimという、カーソルがある辺りのテキストオブジェクトをなんとなく選択してくれるVimプラグインを使い始めた。Vim力が下がる代わりに魂の平穏が得られる。ような気がする。 デフォルトではノーマル・モードで<Enter>を押すとカーソルのある辺りのテキストオブジェクトを選択してくれる。HTMLファイルを編集中なら属性値の上で発動させると、クオートの間を選択してくれる。その状態でもう一回<Enter>を押すとその上位にあるテキストオブジェクトをなんとなく選択してくれる。属性値のクオートの間を選択した状態だと、HTMLタグで括られた全体(など)まで拡大される。 逆方向に縮小することも出来るので、適当にタカタカ<Enter>を押して拡大しつつ、広げ過ぎたら<BS>で狭めるみたいな感じで使えて、とてもいい加減に使える。僕は狭める方だけを<S-Enter>に変えて、サクサク感を上乗せ
GitHubで今開いているコミットをmasterの最新と比較する
GitHubには任意の二点間のスナップショット差分を見るためのCompareというビューがある。各リポジトリのページからこの機能にアクセスするUIがないのでマイナーな気がするけど、アクティビティーとかでちょっと使われてたりするので見たことはあるはず。CompareビューにはリポジトリのURLの最後に/compareと付けるだけで入ることができ、開かれるダイアログで任意のタグやブランチ、SHA1ハッシュを入力すると差分がズラッと並んでくれる。特定のコミットのページからは特にUIはないのだけどURLをちょっと書き換えるだけでmasterの最新との差分を見ることができる。 具体的には https://github.com/hail2u/normalize.scss/commit/58d8597e5b6df43e9ad6023ac68f10e7ec47e139 というような特定のコミットを参照して
Git Cheat Sheets JP
設定 基本 ブランチ リモート・リポジトリ git-stash git-svn 参考 修正履歴 設定 Git には様々なオプション設定がある。中には挙動を大きく変えるものもあるので注意が必要である。 設定をすべて表示する $ git config --list システム (/etc/gitconfig) の設定 $ git config --system --list や、ユーザーごと (~/.gitconfig) の設定 $ git config --global --list など表示する対象を絞ることもできる。 ユーザ名とメール・アドレスを設定する $ git config --global user.name "John Doe" $ git config --global user.email "john.doe@example.com" コミットする時に記録されるユーザー名とメ
Tango Vimアイコン
SVG形式のかわいいVimアイコンを見つけたので、Inkscapeを使ってPNGにラスタライズし、更にそれをIcoFXでWindows形式のアイコンファイルにしたものを作った。ライセンスはCreative Commons Attribution 3.0で配布元と同じ。 Download: vim-tango-icon.zip 含まれるアイコンは、 32bit 256*256, 128*128, 96*96, 72*72, 64*64, 48*48, 32*32, 24*24, 16*16 8bit 256*256, 48*48, 32*32, 24*24, 16*16 4bit 256*256, 48*48, 32*32, 24*24, 16*16 の19種類。無駄に多い。24bit＋アルファチャンネルのPNGファイルも同梱してある。Dockとかにはこっち使うと良い(の？)。もっと大きい(
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
git push --delete