やったこと

モーダルの中のプログレスバーが、モーダルが開いてからアニメーションするように
モーダルをログ作成した結果レベルアップした時に表示するようJavaScriptで制御
console.logで動作を確認するのを思い出して、console.logデバッグする
レベルアップした時に表示、という条件をJavaScriptの中に書き込む
そのため、JavaScriptタグ内にRubyの変数を渡して使えるようにする
oldLevelがいつまでも残っていてoldLevel=0と判定されてしまい、無限にレベルアップウィンドウが出てきちゃうのを修正

Landingページの実装
float-rightで画像の横に文章を回り込ませられるけど、画面幅を変えるとぐちゃぐちゃになるので全部センター寄りに戻した
max-width:50%を設定して、親要素にtext-align:centerを設定することで画像の中央寄せを実現
親要素に高さをもたせることで背景色をもたせて白と水色の2色でランディングのレイアウトする
メーラーの設定をすっかり忘れていたのでherokuでSendGridを導入してメールを送れるように
そのメーラーのアドレス設定をdevise.rbに書く
新規登録時のフォームで、バリデーションエラーが出た時の英語メッセージの日本語化
herokuに環境変数設定
herokuに自動デプロイ設定

わかったこと

slimのjavascriptタグ以下ではRubyの変数をそのまま使うことは出来ない、ので以下のように記述する必要がある

  var oldLevel = #{@oldLevel}
  var currentLevel = #{current_user.level}

このようにJavaScriptで定義しなおしてあげることでJavaScriptの式の中で使うことができる。

  if (oldLevel === currentLevel) {
  } else if (oldLevel !== 0) {
    console.log("false")
    $('#exampleModal').modal();
    $('#exampleModal').on('shown.bs.modal', function(){
      bar.animate(1.0); 
    });
    } else {

    };

modalを開くJavascript、$('#exampleModal').modalが動かなくて困っていたけど、後ろにカッコがないのが原因だった。
$('#exampleModal').modal();これで動く。
JavaScriptタグ内のデバッグはconsole.logでデバッグできる

Landingページ、TechCommitのLandingページを参考に実装しようとするも最初の文章の部分以外うまくいかない。
改行を含むテキストをpタグでまとめる時は以下のような書き方が出来る

  p.main-text
    |
      学習を習慣化するための、<br>
      YWT記録アプリ

親要素にtext-align: center; 中央揃えしたい画像にmax-widthで画像の中央揃え出来る。

.content-1 {
  text-align: center;
  .index-image img{
    max-width: 60%;
    margin: 0 auto;
  }
}

親要素に高さをもたせることでbackground-colorがその高さの分効く
SendGridの設定をしないと本番環境じゃメールが送れない
環境変数のセットとheroku addonsの追加で使えるようになる
またGoogle Oauthで許可するURL、URIの設定をしないと本番環境でSNS認証できない
Oauth用の環境変数もherokuでセットする必要がある
バリデーション失敗時のアラートメッセージ、日本語化するのにgemの中身を書き換えたけど、herokuじゃ環境構築をherokuのサーバーの中でやるので、意味がなかった

次やること

JavaScriptのコードが汚すぎるので条件分岐考え直す
タグ付けの説明（ヒント文）を追加
過去つけたことのあるタグを候補として表示する？