はてなブックマーク

レスポンシブイメージとは 画面幅や端末（パソコン、スマホなど）に応じて表示するイメージを切り替えること なぜ重要なのか スマホみたいな小さな画面で表示する時に5000x2500みたいな巨大画像を送りつけてしまうと、意味もなく通信時間がかかり、ユーザが可哀想 逆にスマホ用の小さな画像をPCで開くと、画像がボケる なので表示端末に応じて画像を切り替える必要がある そのために何を理解する必要があるのか HTML5でimgに追加されたsrcset属性, sizes属性 ブラウザがどうやって画像を選択しているのか Retinaについて 凄まじく短いですが、今回の記事用にGitHubのレポジトリ作っときました 早速実装してみよう サイズが異なるフラミンゴの画像を4つコチラから拝借しました。 普通にimg srcを指定して表示する まずは普通にimgにsrcを設定します。

YouTubeに公開した動画「独学エンジニアほどlintを使うべきだ！ESLintとJavaScriptで解説するlintの必要性」の台本です。 動画の補足にご活用ください。 今日はlintを説明しよう！ Lintってのは静的解析ツールの一種で、 要は「汚ないコードを自動的に掃除してくれる」 自動お掃除ロボット、 つまりルンバみたいなもんだ。 今日はlintが何をしてくれるものなのか、 そして、どうしてlintを使うといいのか説明しよう。 Lintと一口に言っても、 言語ごとにいろんなlintが存在するから 今日は多分みんなが一番よく 使うであろう言語JavaScriptのlint、 ESLintについて説明しよう。 まず、lintは何をしてくれるのか。 一言で言うと、 エンジニアのミスを掃除してくれる。 例えば、 importしてるのに使っていないモジュールとか、 定義したのに使われてい