Vim を閉じずにシェルでの操作を行う

シェルで Vim を開いてる時、Ctrl - z でシェルに戻り、fg で vim に戻るというのを人に教えてもらって覚えた。

これで Git の操作をするために Vim を閉じる手間と、操作が終わった後に再度ファイルを指定して開く手間が省ける。便利。

Ctrl - z でシェル上に戻った後、誤って exit でタブを閉じてしまうあたりがまだ慣れてない。

E:hover + E, E:hover ~ E

• E:hover + E | JSFiddle
• E:hover ~ E | JSFiddle

E:hover + E では、当たり前のことなんだけど 隣接セレクターは直後の要素にしかスタイルが適用されない ので .box2 にだけスタイルが適用されて、 .box3 の背景色は変わらない。E:hover ~ E では .box 以下の .box2 と .box3 両方にスタイルが適用される。

/* E:hover + E */
.box:hover + .box2,
.box:hover + .box3 {
  background-color: blue;
}

/* E:hover ~ E */
.box:hover ~ .box2,
.box:hover ~ .box3 {
  background-color: blue;
}

隣接セレクターが直後の要素だけに適用されることとかすぐ忘れるし、普段使わないセレクターを使うとちょっとしたことでつまづく。

Sharp Menu

細い文字に細い線、結構好みな感じ。SoundCloud のタブ ( .streamExploreTabs ) を見て真似した ( 見た目だけ ) 。

• Demo | JSFiddle

.menu {
  margin: 2em;
  padding-left: 0;
  height: 1.6em;
  border-bottom: 1px solid #eee;
  text-transform: uppercase;
  list-style: none;
}

.menu li {
  display: inline-block;
  margin-right: 1em;
  height: 1.6em;
}

.menu-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.menu-link:hover {
  border-bottom: 1px solid black;
}

.menu-link.is-active {
  border-bottom: 1px solid tomato;
}

本当は非アクティブメニューにマウスオーバーしたとき、アニメーションなんかを付けてもう少し工夫したかったんだけど上手いことできなかった。アクティブメニューの下につけてる赤線を左右に移動させたりしてみたかったんだけど難しい。

li:nth-child(1):hover + .bar-line とかやってたら余計な指定が増えたりして訳がわからなくなった。

アニメーションに残像をつける

昨日書いた左右に動く箱に残像をつけてみた。box-shadow を使ったものと linear-gradient を使ったものがあるけど、box-shadow を使ったほうが動き的にもコード的にも良い。

影で残像を表現したもの

Demo - Shadow | JSFiddle

箱が端に到着した後、残像が遅れるように消える。

箱の大きさ以上に残像の幅を伸ばすと、残像には見えなくなる。

.box {
  margin: 20px 0;
  width: 20px;
  height: 20px;
  background-color: slategray;
}

.box-move {
  -webkit-animation: move 2s infinite;
}

@-webkit-keyframes move {
  0% {
    transform: translateX(0);
  }
  25% {
    box-shadow: -6px 0 0 hsla(210,13%,50%, .5);
  }
  50% {
    box-shadow: none;
    transform: translateX(300px);
  }
  75% {
    box-shadow: 6px 0 0 hsla(210,13%,50%, .5);
  }
  100% {
    transform: translateX(0);
  }
}

グラデーションで残像を表現したもの

Demo - Gradient | JSFiddle

箱が端に到着した瞬間に残像が消える。残像幅が小さいとわかりにくいかもしれないけど、幅が大きくなるとはっきりわかる。

CSS では残像の幅を .box の幅に加えてる。これはアニメーション部分で移動距離を出すときなどに邪魔になってくるのと、残像幅を変更するときに直さないといけない箇所が多いので面倒。

.box {
  margin: 20px 0;
  width: 26px; /* ( 箱の幅 20px ) + ( 残像幅 6px ) */
  height: 20px;
  background-image: -webkit-linear-gradient(left, slategray 20px, transparent 20px);
}

.box-move {
  -webkit-animation: move 2s infinite;
}

@-webkit-keyframes move {
  0% {
    transform: translateX(0);
  }
  25% {
    background-image: -webkit-linear-gradient(left, transparent 0, hsla(210,13%,50%, .5) 6px, slategray 6px);
  }
  50% {
    background-image: -webkit-linear-gradient(right, slategray 20px, transparent 20px);
    transform: translateX(294px); /* ( 移動距離 300px ) - ( 残像幅 6px ) */
  }
  75% {
    background-image: -webkit-linear-gradient(right, transparent 0, hsla(210,13%,50%, .5) 6px, slategray 6px);
  }
  100% {
    transform: translateX(0);
  }
}

CSS Animation はじめ

使う機会に恵まれなかったから... というのは嘘で、単にプロパティや使い方を覚えるのを面倒臭がってた。

そこで、手始めに色々簡単なものを作ってみた。まずは触って見るところからということで。

• Flash | JSFiddle
• Bounce | JSFiddle
• Move | JSFiddle

まだ使ってないプロパティも多いし、思いついたことをすぐに CSS で表現するのは難しいだろうけどちょっとずつやっていこう。

参考

• CSS アニメーション | MDN
• CSS3 アニメーション
• CSS アニメーションの基礎 | Unformed Building
• Animation - アニメーション ｜PHP & JavaScript Room

Frontrend 、最初で最後 ( ? ) の参加

Frontrend Conference 行ってきた。Frontrend への参加は最初で最後になっちゃったな。

最初と最後のセッション以外は CSS のセッション側にずっといた。

簡単に一言で:

• 箱 @myakura
  • 高レイヤーと低レイヤーそれぞれに必要性があるよ、"つらい" はできるだけ自分の言葉を添えて吐き出していこう
• Web Components/Polymer, Styling Shadow DOM @hiloki
  • Web Components をこれから始める人が知っておくと便利なこと、それに lazyload-image のような使い方があることを教えてもらった
• Inline layout @takazudo
  • img 要素で画像をそのまま表示させたときの下の余白とか、何となく対処はできていても理屈が正しくつかめていなかったもの、その謎を解明 !!!
• Evaluating CSS @t32k
  • CSS の予測のしやすさや再利用のしやすさは他でも考えられてるよね。じゃあ、保守のしやすさは？StyleStats でどうよ。（ CSS Stats ってのもあるらしいけどねぇ ）

今日のスライドは後々 Frontrend のブログとかにアップされると思う。それは公式 Twitter でお知らせしてくれるでしょう。

基調講演の内容もノートにはメモを取ってたんだけど、なんかうまくまとまんなくて書けない。良いサービスを作るのも、良いコードを書くのも結局は人と人とのコラボレーションをどう加速させるかにかかってるという話なんだけど。

はてなブログ管理画面の更新数を抑えて表示

はてなブログ、今週月曜に管理画面に変更が加えられた。購読中のブログの更新数を表示するというものだけど、この管理画面のデザインにこの赤は色が強すぎて目がどうしてもそっちにいってしまう。

好きで購読した人のブログは読み逃したくないけど、自分の記事を書こうと思った時とかにちょっと邪魔かな... 。

背景の色をグレーに変える CSS を書いて、はてなブログの管理画面に貼り付けといた。

#admin-menu .badge-subscribe {
  background: #474747;
}