2015-08-05

CSS wii-change

CSS will-changeプロパティについての記事を読んだので早速試験中。

1will-change: transform;

簡単に言えばtranslate3dsなどのハックでGPUアクセレーションを有効化していたけど、それ以外の適切な手法でブラウザさんに最適化していただこうというものらしい。

ちょっと試してみてもあまり違いはわからなかったが、重い描画や低スペックマシンだと違いがでてくるのかも。
何より最適化の意図を明確にすることができるので、設計に盛り込みやすい。

しかし現時点でSafariの実装はまだまだなので、しばらくは従来通りtranslate3dsを使うか、併用していくのがよさそう。

その他参考記事

2015-06-11

npm-check-updates

npm-check-updatesが便利という発見。

モジュールのリリース情報を確認して、必要ならば更新というくだりは難儀。
npm outdatedしてpackage.jsonを書き換えてnpm installを行うのが通常の流れであるが、回数を重ねるとこれを行うのがおっくうになってくる。

npm-check-updatesはこのへんの手間を省いてくれる。

今回はコマンドが短くてよりよさげな開発版をインストール。

1$ npm install -g npm-check-updates@unstable

これで更新確認から実行まで3ステップで行える。

1# 更新を確認 2$ ncu 3 4# package.jsonを更新 5$ ncu -u 6 7# 更新を実行 8$ npm install

フロント開発でgulpを使用していると割と頻繁にupdateする必要がある。

マイナーバージョンアップであればあまり後先考えずガンガン上げていきたい性分なので、その作業の簡略化ができ素晴らしい。

2015-05-25

gulp-imagemin

gulp-imageminで画像の最適化を突き詰める。

sindresorhus/gulp-imagemin

標準API

  • gifsicle
  • jpegtran
  • optipng
  • svgo

gif、jpeg、png、svgと主要なフォーマットは標準搭載されているので、導入後すぐに試すことができる。

拡張モジュール

拡張モジュールを用いることも可能。
webpなども最適化することができる。
全てを試してはいないが、pngquantやmozjpegは標準搭載のそれよりも圧縮効率がいい。

ただ、モジュールがでかくてインストールに時間がかかる。
各プロジェクトにこれを導入していくと、なぜか申し訳ない気持ちになってくる。

2015-05-21

Style Guide Boilerplate

Style Guide Boilerplateがいい感じ。

DoccoとかKSSとか、ジェネレーターを使った運用を目指していたが、生成するドキュメントがいまいちシンプルさに欠け、結局自前で書いていたが、こーゆーのが今回はマッチしそう。

2015-05-17

node-redis入門

Redisの修行を進めている。
Nodeアプリ内で使う分には下記を参考に学習を進めていけばいい様子。

やはりセッション管理などはRedisで行いたい。
Koaではkoa-redisを使えば容易に実装できた。

よりRedisをよりアプリケーションの広範囲で活用する際は下記で理解を深めるとよさそう。