do7be.exports

エッセンシャルガチ草ﾄﾒｨﾄｩ

cssnanoをrequireしたらローカルだけSyntaxErrorが発生

追記(16:22)

同僚に聞いてわかった。Content-EncodingがUTF-8になってないせいっぽい。

つまり <meta charset="UTF-8"> を追加すればOK。

なんてこったい。

現象

src/index.jsでrequireしただけでSyntaxErrorが起きた

var cssnano = require('cssnano')

でWebpack buildして実行すると

f:id:do7be:20161217160115p:plain

でもgh-pagesだとエラーが発生しない。

https://do7be.github.io/cssnano-test/

Nodeでもエラー起きないし、ローカルでhtml開いたときだけ起きてるっぽい。

エラー内容

エラーを見ると cubicСontrolPoint という変数を初期化しているところで起きている。JSだと動きそうなもんだけど、実際に実行すると本当にSyntaxErrorになった。

f:id:do7be:20161217160514p:plain

どうやら ¡ という文字がいけないらしい。

Babelのせいなのかcssnanoのせいなのかcssnanoのdependenciesのせいなのか謎なのでIssuesもどこに立てればいいのか謎。

github.com

SugarSSのtransformデモツールをつくった

CSS CSS Modules SugarSS React 寿司

Stylusっぽく書けるPostCSSパーサーのSugarSSが良い感じなので最近使ってる。

でもDocument全然ないしDEMOページすらないので辛酸なめまくってて厳しい。

そこでSugarSSを入力するとtransformしてくれるDEMOページを作ってみた。

https://do7be.github.io/sugarss-demo/

コードは↓

github.com

まとめ

  • SugarSS良い
  • React良い
  • CSS Modules良い
  • Tabキーハンドラきつい
  • Reactのハイライトめんどい
  • 最近また行ったけどソラマチのトリトンくそうまいし安いから今月も行きたい

f:id:do7be:20161208230413p:plain

夏場に1ヶ月間クーラーをつけっぱにしてみた

以前書いたとおりアクアリウムをやっており、夏場の心配事の一つに水温がありました。

家を出ている間にでも室温が30℃を超えてしまうと…なんと水温も30℃を超えてしまい帰宅したら全滅…なんてこともあるわけです。

そこで、家にいる間も出ている間も寝ている間も常にクーラーをつけてみました。

結果

先日、ついにドキドキの請求書が届いていました…

まずは参考までにクーラーを使っていない5月分の料金

3,050円

つづいて7月中旬～8月中旬の電気代

4,096円

なんと、1,000円程度しか増していませんでした！

ついでにちょっと寒くて何回かエアコンをつけただけの3月分

4,315円

なんと暖房とはいえほとんどつけた覚えのない月よりも安くあがりました！

節約のメソッド

まずは前提として部屋とエアコンのスペックですが、

  • 部屋
    • 軽量鉄骨アパート最上階
    • 太陽をもろに浴びる(エアコンないと外の気温よりあがる)
    • 7畳
  • エアコン
    • 10数年前製
    • 定格能力2.2kW
    • 定格消費電力450W
    • 室外機は日陰です。

そして以下のルールを守りました。

  • 28℃固定
  • 除湿自動モード
  • カーテンを締め切る

これだけです。ちなみに一度も電源を消していません。

まとめ

今までエアコンつけっぱだと電気代で殺されると思っていましたが、やってみると意外と安くて逆に驚いてしまいました。

夜も熱帯夜…なんて思いはしなくていいですが、28℃だと若干暑いため寝間着や掛け布団にはそれなりに気をつける必要がありました。

まあデメリットなんてこれくらいなんで、たかが1000円で夏場を快適に過ごせるのでオススメな感じです。

※部屋にもよると思うので自己責任でお願いしますｗ

非表示時にfocus出来ないフェードイン・アウト要素をCSSで実装する

Qiitaに書いておきました。

qiita.com

よくjQuery animateかなにかでopacityをいじってアニメーションが終わったらdisplay:noneとかやってるサイトとか見かけるので、そういうのが主流なのかこういう簡単な実装が主流なのかどうなんでしょうね。

画像がキャッシュされてjQuery.on('load')が効かない場合

画像のロードが既に終わっていて、再度同じ画像を含むDOMをappendしてloadイベントやerrorイベントハンドラを貼りたい場合、ブラウザでキャッシュされた画像が返されるとloadイベントが発火されない。

// 何度も下記処理が走る場合
const url = httpRequestHoge() // 何度も同じ画像が返ってくる可能性あり
imgTag = $(`<img src="#{url}">`)
$('body').append(imgTag)

imgTag
.on('load', function () {
  $(this).css('height', 0)
})

だとloadイベントが発火されない場合がある。

const url = httpRequestHoge()
imgTag = $('<img>') // ここではsrcに入れない
$('body').append(imgTag)

imgTag
.on('load', function () {
  $(this).css('height', 0)
})
.attr('src', url) // イベントハンドラを貼ってからsrc指定

loadはdocumentに存在しないDOMにはハンドラが貼れないらしいのでめんどい。