2ミニッツスターターやるページをつくった

https://gyazo.com/08e47f7fee91a6ff98d83017d251e41e

オリジナルはタイマーを2分にセットして課題に取り組む、アラームが鳴ったら

1. 制限時間なしに作業を継続する

2. 同様にタイマーをセットして別の作業をはじめる

3. 休憩する

の3択を選ぶというもの

オヴシアンキーナー効果というものを利用しているらしい

こういうのを知ると、ついツールみたいなのを作ってしまう癖がある

2020年はこういうちょっと手を動かす、みたいなことをあんまりしてなかった気がしてて、今年は少し積極的に取り組んでいる

状態を持たないイミュータブルなアプリなので、最小限のスタックで作ることを考えてつくった

最初は素の html に素の css と素の javascript をガガッと書いてミニマルな素組みはできたが、脳が react のような単方向データバインディングに冒されているので DOM が状態を持ってゴニョゴニョするのがうざったくなってしまった

html にベタ書きしてると、vue や svelte はこういうのを書いて動くことを目的にしているんだなーと改めて感じたりした

仕方ないので preact と htm でパパッと書き直して、preact/hooks も使ってイイ感じに

こいつらは unpkg から es modules として読んでくるので特にバンドラは必要なかったが、なんとなくで snowpack を採用した

@snowpack/plugin-optimize をかけると全てのアセットがミニファイされてラクだった

css は Tailwind を入れるまでもなかったので、tailwind ライクなスタイルをササッと書いてあっさりめに仕上げた

デプロイ先はもちろん Netlify をチョイスしたんだけど、Netlify も流れ作業感あるのでなんか別のを触ってみたい機運があるけど、なんかないかなあ

wmr 試してもよかったかも、swc とか