HAM MEDIA MEMO

2014年10月月26日（日）に、CSS Nite in SAPPORO Vol.15 「先どりWebトレンド2015」が開催されました。

CSS Nite in SAPPORO Vol.15「先どりWebトレンド2015」

全部で９セッションと長丁場で様々な分野盛りだくさんだったので、参加者はかなりお腹いっぱいになったのではないかと思います。

今回は私も登壇をさせていただきました。

自分は技術寄りの話として CSS3アニメーションをお話をさせていただいたのですが、25分の持ち時間だったこともあり、かなり話を絞った内容になっています。

私のフォローアップというわけではないですが、私のセッションで話さなかったところ、JavaScriptでの連携について、ここで少し書いておこうと思います。

配列をシャッフルする際は、 Fisher–Yates shuffle というアルゴリズムがあって、それを利用するとかなり速いシャッフルが可能とのことで、毎回利用しているのですが、毎回必要になるたびに調べている一つだったりするので、メモエントリー。

JavaScript の配列からランダムで要素を取り出して扱いたいということがあるのですが、安易にやろうとしたら重複した値がでてきたり、 splice でその要素を除いたりしてやっていたのですが、どうも動作安定していない感じだったので、自分の中で再度見直しとしてのメモエントリー。

先日のエントリーで 『max-width がイメージと違う動きをする？ width と max-width と float を理解する』 というのを書いたのですが、２カラムで片方が横幅固定、もう一方が可変幅で作りたい時には別の作りが必要と書いていたとおりに、もう少し工夫が必要となります。

今回は、そのカラムで片方を横幅固定、もう一方を可変幅にする方法を確認してみます。

タスクランナーでどれを使うかをいろいろ模索中ですが、今は gulp.js を勉強しておこうと、いろいろと使ってみています。

gulp で Sass をコンパイルする時に使うプラグインはいろいろとあるのですが、今回使ってみるのが gulp-sass です。同じ Sass でも LibSass が使われているものの方がかなり早いですからね。

gulp-sass

この gulp-sass を利用している時に、 Sass のコードでエラーとなる記述をしてしまいますと、 gulp の watch などが止まってしまいます。一度止まってしまうと、 watch が強制終了的な動きをしてしまうので、気づかないでコードを書いていると、表示が変わってない〜と困惑してしまう状況に。

そんな gulp-sass のエラーで処理を止めない方法についてメモとして記載。