JavaScriptでlocalStorageを使う方法を調べました。 localStorageとは Window.localStorage - Web API | MDN ブラウザにデータを保存させる機能。 保存期間に制限が無い セッションに似ている セッションはブラウザを閉じたらデータは消去される 保存領域はU…

Sinatraのメモアプリの終了条件であるXSS対策について調べました。 結論 文字コード指定とエスケープ(サニタイジング)を行うとXSS対策できる XSSとは 悪意あるクライアントサイドのコードをウェブサイトに挿入するセキュリティ攻撃です。 引用: Cross-site s…

Sinatraを使ったメモアプリを作成中に新規投稿、投稿編集時にformタグ内のinputが未入力でPOST、PATCHで送信できないようにしたかったので調べてみました。 結論 required 属性を使うことでクライアント側(ブラウザ)でフォームが未入力時に警告を表示できる …

CSSがとても苦手です。ここ数日、CSSが苦手な理由とその対策について色々と考え、対策を試してきました。結果的に以前よりもCSSに対する苦手意識をある程度克服することができたのでその方法を記しておきます。 結論 CSSに必要な周辺知識の整理、ツールと情…

またまたHTMLネタです。 セクション要素(sectionやarticle等)をちゃんと使ってマークアップするようになった(当たり前やろ！というツッコミは無しでお願いします笑)のですが、次から次に疑問が湧いてくるので忘れないようにメモです。 結論 hタグは必ずしもs…

HTMLのセクション要素の使い方への理解が曖昧だったので復習です。 恥ずかしながらブロック要素にCSSを当てる際は今までは脳死状態でdivで囲っていました。 セクション要素(sectionやarticle等)にCSSを適応して良いのかなかなか判断できなかったので調べまし…

Sinatraのメモアプリを開発中にマークアップを行っていたところHTMLのアウトラインを意識したマークアップへの理解がとても曖昧だったのでタグの選び方にとても時間が掛かってしまった。 別にHTMLを舐めていた訳じゃないけどFBCのプラクティスでもあまり深く…

Sinatraを使ったメモアプリの開発時にerbがフォーマットされなかったので設定しました。 結論 vscodeの拡張機能のBeautifyを使う。 なぜBeautifyなのか 似たようなフォーマッタとして拡張機能のPrettierがあるがerbファイルが上手くフォーマットされないらし…

Sinatraを使ったメモアプリの開発で久しぶりにCSSを書くことになりました。 リセット系のCSS、normarize.cssを読み込ませる手順を全く覚えていなかったので調べました。 ノーマライズCSSとは normarize.cssとはブラウザ間の差異を統一調整したCSSのことです…

フィヨルドブートキャンプの課題としてSinatraを使ったメモアプリの開発に取り組んでいます。 CRUD処理の実装でform タグを使ってHTTPメソッドのdeleteとpatch を送信する方法を調べました。 結論 _method パラメータを使いHTTPメソッドを指定する 実装例 fo…