ブラウザで何分後に通知するサイトを作ったときに使ったライブラリや環境

ブラウザで何分後に通知するサイトを作ったときに使ったライブラリや環境:

たまにブラウザで何分後に通知してほしいなとか思ってたのですが、見つからなかったので作りました。

(よく探してないので普通にありそう)

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はスゴイ