MANA-DOT

PIXEL ART, PROGRAMING, ETC.

レスポンシブなCSSスプライト

レスポンシブなCSSスプライト

よく知られたCSSスプライトはボックスの幅・高さをスプライト画像と同じに指定し、background-position をずらすことで複数のスプライト画像を含むスプライトシートの中から対象画像だけを表示します。 この方法だと表示できる画像のサイズは固定なのですが、 background-sizeとbackground-positionを % で指定し、ボックスの幅によって可変サイズな (レスポンシブ、あるいはフレキシブルな)CSSスプライトの表示法を紹介します。

続きを読む

babelのasyncで遊んでみたメモ

babelのasyncで遊んでみたメモ

ES7から利用可能な async/await は非同期プログラミングの際に非常に魅力的な構文です。 babelを用いることによりES5の環境でもコードを実行可能です。

babelで非同期処理がどのように変換されるのか興味があったので、いろいろ遊んでみました。

続きを読む

direnvを使って複数のgitコミッタ名を切り替える

direnvを使って複数のgitコミッタ名を切り替える

例えば会社のPCでこっそり個人的なリポジトリで作業してgithubにpushする場合、 うっかり会社用のgitコミッタ名(本名@会社名.co.jp みたいなアドレスとか)で commit/pushしてしまい、紐付けるつもりのなかったネットの人格と本名/会社名が紐付いてしまう というのは皆が恐れるところであると思います。

そこで、direnv を利用するといい感じに切り替えられることができたので、共有いたします。

続きを読む

Hubot-slack で絵文字でアニメーションする8パズルゲームができるbotを作った

Hubot-slack で絵文字でアニメーションする8パズルゲームができるbotを作った

社内のSlackで後輩がSlackの絵文字にでかい絵を分割して登録し、パズルだとか言っていたので、なんとなく作りたくなってしまいHubot上で8パズルが出来るbotを作ってしまいました。

続きを読む