button要素にはflexboxを使わないほうが良さそうです
<button>要素にflexboxを適用したところ、Chrome、Safari、FireFoxでそれぞれ表示が違った。
IEではまだ試していない。
調べてみるとどうやらこういう事らしい。
stackoverflow: Flexbox not working on <button> element in some browsers
The problem is that the
<button>element cannot be a flex container (in some browsers).Certain HTML elements, by design, do not accept display changes. Three of these elements are:
<button><fieldset><legend>The idea is to maintain a level of common sense when styling HTML elements. For instance, the rule prevents authors from turning a fieldset into a table.
button要素はflex containerにはなれないと。
上記三つの要素はCertain HTML elements（用途が明らかな要素？）なので、displayの値は変えられないよ、というような事が書いてあるような気がします。
デモ
Chromeだと他の通常のブロック要素と同じようにflexboxが適用される。
Safariだとdisplay: flex、flex-flow: row nowrapは効いてるっぽいが、justify-contentが効かない。
FireFoxだとそもそもdisplay: flexが効かない。
// jade button i.material-icons looks_one i.material-icons looks_two .button i.material-icons looks_one i.material-icons looks_two
// stylus
@import 'nib'
button,
.button
size 200px 50px
padding 10px
margin 20px
text-align center
box-sizing border-box
display flex // FireFoxで効かない
flex-flow row nowrap
justify-content space-around // Safariで効かない
outline none
border none
background-color #3399aa
.material-icons
size 30px auto
line-height 30px
background-color #bbb
各ブラウザのスクリーンショットこんな感じです。
chokidarを使ってファイルの変更をwatchする
Riot.jsの話。
カスタムタグが増えるにつれ、Riot CLIによるコンパイル時間がバカにならなくなってきた。
特にwatchの立ち上げ時に時間がかかる。
コンパイルオプションとしてBabelとStylusを使用しているので、最初これらを疑ったが、buildのみだとさほどかからないので、Riotのwatchオプション内で何かまずい事が起きていると思われる。
そこで、私の上長がファイル変更の監視をchokidarで行う方法に書き直したところかなり改善された。
ソース全体のビルドはnpm run buildのみで行い、npm run watchでは初回ビルドを行わないようにした。
{
"scripts": {
"build": "riot --type babel src/tags lib/tags",
"watch": "SHELL=/bin/bash chokidar 'src/tags/**/*.tag' -c 'OUTPATH=`echo {path} | sed -e \"s/^src/lib/\" -e \"s/\\.tag$/.js/\"` && mkdir -p $(dirname $OUTPATH) && riot --type babel {path} $OUTPATH'"
}
}
こういう時、sedの正規表現が分からなくて、大体いつもここを見に行っている。
chokidar
chokidarは指定した対象の変更をフックして、任意の処理を実行する事ができるnpm package。
みんなつこてる。
It is used in brunch, gulp, karma, PM2, browserify, webpack, BrowserSync, socketstream, derby, and many others. It has proven itself in production environments.
使い方
-cまたは--commandに続けてフックさせたい処理を渡す。
$ chokidar '監視したい対象をglobで指定' -c '実行したいコマンドを渡す; この中では{event}で変更の種類、{path}で変更のあったファイルのパスが参照できる'
ライブカメラと時計のやつをElectronアプリにした
前の投稿で作ったデモをElectronで包んでアプリにしてみた。
Circle CIとGithub Releasesを連携させて、releaseブランチをプッシュするとリリースされるようになっている。
（超優秀な同僚が組んだ物を流用している）
アカベコマイリさんが作ったcross-conf-envというnpmパッケージの記事を読んで、npm-scripts内から環境変数を使えることを知ったので使ってみた。
リリースできるようにすることで一杯一杯で、アプリの内容としてはブラウザのデモをそのままぶちこんだだけの状態でリリースしている。
パッケージも今の所OSXだけ。
テストが通ったらリリースされるようにはなっているが、テストはまだない。
{
"script": {
"test:ci": "exit 0"
}
}
Spectron、Devtronも触ってみたかったがまだ触れていない。
少しづつ触っていきたい。
