たまにブラウザで何分後に通知してほしいなとか思ってたのですが、見つからなかったので作りました。
(よく探してないので普通にありそう)
URLは以下です。
https://browser-alert.netlify.com/
この記事では使ったライブラリや環境の紹介です。
本番環境
Netlify
https://www.netlify.com/
静的サイトをめちゃめちゃ簡単にデプロイできます。
GitHubとの連携やデプロイ時にビルドする設定などができます。
簡単な個人サイトレベルなら無料で使えるのがスゴイ
サイトのURLも好きな文字列に変えることが可能です。やり方は以下に載せてあります。
https://malicia.hatenablog.com/entry/2018/12/19/010626
開発環境
docker & docker-compose
使ってみたかったdocker
nodeとnginxを組み合わせて使えばwebpack-dev-serverを使わずにローカルサーバー立てながら開発できるという楽さ。
フロントエンド
webpack & babel
babelでes6のjavascriptを古代のブラウザ用に翻訳し、webpackでファイルを1つにまとめるという現代フロントエンドの必須技術です。
htmlとfaviconもwebpackで一緒にまとめたいときなどは以下を参考にしてください。
https://malicia.hatenablog.com/entry/2018/12/23/004206
bulma
https://bulma.io/
最近よく聞くcssフレームワークです。
bootstrapなどと比較してcssファイル1つのみで全て完結する簡素さが売りです。
webpackと併用する場合は以下を参考にしてください。
https://malicia.hatenablog.com/entry/2018/11/27/224554
IndexedDB
今回は静的サイトだったので、ブラウザ側にアラートの時間などのデータを残す必要がありました。
Cookieやlocalstorageを使う場合が多いと思いますが、通常のRDBと同じ様な使い方ができるというIndexedDBを使ってみました。
総括
Netlifyはスゴイ