時々とおまわり

プログラミング雑記

HTML

XSSとその対策

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

HTMLのフォーム内で空文字でのデータ送信時に警告を出す

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

CSSの苦手意識を克服するためにやったこと

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

hタグはsectionやarticleタグで必ず囲まなければいけないのか

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

HTMLのセクション要素にCSSを適応しても良いのか

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

迷いやすいHTML タグのまとめ

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

vscodeでerbファイルをフォーマットする

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

nomarize.css の導入

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

form タグにGET/POST以外のHTTPメソッドを指定する

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