読者です 読者をやめる 読者になる 読者になる

メモを揉め

お勉強の覚書。

button要素にはflexboxを使わないほうが良さそうです

CSS HTML Tips プログラミング Stylus Jade

<button>要素にflexboxを適用したところ、ChromeSafariFireFoxでそれぞれ表示が違った。
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: flexflex-flow: row nowrapは効いてるっぽいが、justify-contentが効かない。
FireFoxだとそもそもdisplay: flexが効かない。

looks_one looks_two

// 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

各ブラウザのスクリーンショットこんな感じです。

Chrome
f:id:alluser:20160724074231p:plain

Safari
f:id:alluser:20160724074236p:plain

FireFox
f:id:alluser:20160724074224p:plain

chokidarを使ってファイルの変更をwatchする

npm JavaScript chokidar Riot Babel Stylus プログラミング 正規表現 Tips

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。

github.com

みんなつこてる。

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アプリにした

CSS HTML JavaScript npm Circle CI Github Releases Electron プログラミング アニメーション

前の投稿で作ったデモをElectronで包んでアプリにしてみた。

memowomome.hatenablog.com

Circle CIとGithub Releasesを連携させて、releaseブランチをプッシュするとリリースされるようになっている。
(超優秀な同僚が組んだ物を流用している)

アカベコマイリさんが作ったcross-conf-envというnpmパッケージの記事を読んで、npm-scripts内から環境変数を使えることを知ったので使ってみた。

リリースできるようにすることで一杯一杯で、アプリの内容としてはブラウザのデモをそのままぶちこんだだけの状態でリリースしている。
パッケージも今の所OSXだけ。

github.com

テストが通ったらリリースされるようにはなっているが、テストはまだない。

{
  "script": {
    "test:ci": "exit 0"
  }
}

SpectronDevtronも触ってみたかったがまだ触れていない。

少しづつ触っていきたい。