Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。
LighthouseではじめるPerformance Budget
WebサイトのPerformance Budgetとは、Webサイトパフォーマンスに影響を与える指標の上限（予算）のことです。Performance Budgetを設定することで、Webサイトパフォーマンス対策に関して具体的な計画が立てやすくなり、設定した上限の値と実際のWebサイトパフォーマンスの計測値の比較・分析ができるようになります。
Ligithouse v5.0.0からbudget.jsonを作成することでファイル容量とリソース数に関するWebパフォーマンスの予算管理ができるようになりました。今回はその方法についてご紹介します。
「LighthouseではじめるPerformance Budget」の全文を読む
Nuxt.jsとVue I18nで多言語サイトをつくろう
Nuxt.jsはVue.jsアプリケーションを構築するためのフレームワークで、シングルページアプリケーションとして構築するか、サーバサイドレンダリングを利用するか、静的サイトとしてファイルを生成するかを設定することができます。静的ファイルを生成する場合、ページごとにvueファイルを用意し、ビルドしてHTMLファイルを生成するのが基本ですが、ルーティング機能をうまく使うことで1つのvueファイルから複数のHTMLを作成することもできます。
「Nuxt.jsとVue I18nで多言語サイトをつくろう」の全文を読む
CSSとJavaScriptで円の中に文字を収める
複雑なデザインのWebサイトが増えている昨今、皆さんはすべてのデザインを再現できるという自信はありますか？
私はブロークングリッドレイアウトのような複雑なレイアウト以外であれば、とくに調べることなく再現できると自負しておりました。ですが、つい数週間前まであった新入社員研修で新入社員に下記のレイアウトはどうやって再現するのかと聞かれた際、言葉に詰まってしまいました。
その時はテキストを適度に改行させるくらいしか思いつかなかったのですが、その後、調べてみた結果「shape-outside」というプロパティを使用することによって、このレイアウトを再現できることがわかりました。
「CSSとJavaScriptで円の中に文字を収める」の全文を読む
W3CとWHATWGが共同でHTMLの仕様を策定するようです🤝🎉
みなさんこんにちは、宇賀です！🍣🍵
みなさんはHTMLの仕様を参照するとき、何のドキュメントを参照していますでしょうか？
W3CのHTML5でしょうか？WHATWGのHTML Living Standardでしょうか？あるいはその両方かもしれませんね。1つの事柄に対する仕様書が複数存在している現状は7年以上も続いており、内容の食い違いや文書自体の管理などいろいろな問題をはらんでいました。
そんな中、Twitterを見ているとこんなニュースが舞い込んできました。
「W3CとWHATWGが共同でHTMLの仕様を策定するようです🤝🎉」の全文を読む
ChocolateyとSetting Syncで開発環境をサクっと整える
皆さんこんにちは、宇賀です！🍣🍵
初夏の香りが一層強くなっている今日この頃、当社では新卒入社のみなさんも無事配属されて現場もより一層活気づいています😌✨
皆さんの中にも、年度初めのタイミングでマシン交換があったりして、エディタの設定や必要なアプリケーションの入れ直しをしている方もいらっしゃるかもしれません。
今回は、Windowsで新しく環境構築をするときに使えるChocolateyと、みんな大好き（偏見）VS CodeのエクステンションSetting Syncをゆるりとご紹介したいと思います🏃☀