JavaScript(jQuery)のCSS AnimationとかCSS Transitonの完了イベント

clickとかと同じ感覚でanimationendtransitionendで取得出来るっぽい。これ、知らなかった。

プラグイン発見。あとで試す。

SASS(SCSS)自分用スプライトスニペット

$SPRITE_DIR-map: sprite-map("SPRITE_DIR/*.png", $spacing:1px);
$SPRITE_DIR-img: sprite-url($SPRITE_DIR-map);

@mixin SPRITE_DIR($s) {
  background: $SPRITE_DIR-img no-repeat;
  background-position: sprite-position($SPRITE_DIR-map, $s);
  width: image-width(sprite-file($SPRITE_DIR-map,$s));
  padding-top: image-height(sprite-file($SPRITE_DIR-map,$s));
}

@each $sprite in sprite-names($SPRITE_DIR-map){
  .SPRITE_DIR-#{$sprite} {
    @include SPRITE_DIR($sprite)
  }
}
  • SPRITE_DIRは任意のディレクトリ名
  • 下記の.spriteクラスを一緒にあてる
    .sprite {
      display: inline-block;
      overflow: hidden;
      height: 0;
    }

    HTML上ではこんな感じ

    <i class="sprite spritedir-btn"></i>

    Retina(2x)対応版はこちら

SASS(SCSS)Retina対応(2x)CSSスプライトスニペット

SPRITE_DIRは任意のディレクトリ名

$SPRITE_DIR-map: sprite-map("SPRITE_DIR/*.png", $spacing:2px);
$SPRITE_DIR-img: sprite-url($SPRITE_DIR-map);

@mixin SPRITE_DIR($s) {
  background: $SPRITE_DIR-img no-repeat;
  padding-top: (image-height(sprite-file($SPRITE_DIR-map, $s)) / 2);
  width: (image-width(sprite-file($SPRITE_DIR-map, $s)) / 2);
  $ypos: (nth(sprite-position($SPRITE_DIR-map, $s), 2) / 2);
  background-position: 0 $ypos;
  background-size: auto floor(image-height(sprite-path($SPRITE_DIR-map)) / 2);
}

@each $sprite in sprite-names($SPRITE_DIR-map){
  .SPRITE_DIR-#{$sprite} {
    @include SPRITE_DIR($sprite);
  }
}

background-sizeは、スプライト画像の長辺で計算。極端に縦長のスプライト画像に対して、横サイズを基点にbackground-sizeを設定してたら画像が数ピクセルずれたりする。(これに、小一時間ハマったので備忘録)

また、background-sizeだけは、小数点が入っているとMacのChromeで見た時に画像がボケるのでfloor()で小数点を削除。

Retinaじゃない(1x)スプライトスニペットはこちら

HomebrewでNode.jsとNPMをインストール&アップデート

brew uninstall node
brew install node
sudo postinstall node

npmもアップデート

sudo npm update -g npm@latest

npmのアップデートについては、インストールやアップデート時にちゃんとメッセージ出てるとのこと

phpMyAdminでデータベースのダンプファイルのインポートがうまくいかない時によくやること

TYPEENGINEに置換。

`' に置換。
但し、これはやらなくてもいいケースが多い。

hetemlサーバーからhetemlサーバーへ引っ越ししたらWordPressがFatal error: Allowed memory 〜になった時の対処法

色々試したけど、結局、コントロールパネルphp.ini設定からmemory_limit100Mにしたらうまく行った。