Laravel MixでTailwindとSassをビルドする設定ハンズオン新着!!
Laravel Mix は webpack を薄くラップしたアセットビルドツールで、webpack.mix.js に数行書くだけで JS/CSS のトランスパイル・バンドル・ハッシュ付与ができます。本記事では、1つのプロジェクトで Tail…
Laravel MixとViteの違いを理解する：フロントビルド移行の判断材料新着!!
Laravel 9.19 以降、新規プロジェクトのフロントエンドビルドツールのデフォルトが Laravel Mix から Vite に切り替わりました。既存の Mix ベースのプロジェクトはそのまま動き続けるため、「移行すべきか・そのままに…
PostCSSとpostcss-importでCSSの構成を分割管理する新着!!
CSSファイルが1枚で数千行に膨れ上がると、どこに何を書いたか分からなくなり、修正のたびに影響範囲の調査に時間を取られます。
CKEditor 4から5への移行で押さえるべきポイント
CKEditor 4 はすでに公式のサポート終了（End of Life）を迎えており、セキュリティ更新を受け続けるには有償の延長サポートに頼るか、CKEditor 5 へ移行するかの二択になります。
Stylelintのプロパティ並び順config（recess-order / rational-order）を比較して選ぶ
Stylelint でCSSを整える際、「プロパティの宣言順」をチーム内で揃えたくなる場面があります。margin が上にあったり下にあったり、position と display の順がファイルごとにバラバラだと、差分レビューのたびに本質…
webpackの画像最適化：image-minimizer-webpack-pluginで配信サイズを削減する
画像はフロントエンドの転送量の大半を占めることが多く、ビルド時に圧縮をかけるだけで配信サイズを大きく減らせます。本記事では webpack 5 で image-minimizer-webpack-plugin（内部で sharp / ima…
Tailwind CSSの導入と設定：ユーティリティファーストの考え方
Tailwind CSS は、flex・pt-4・text-center のような小さな「ユーティリティクラス」を HTML に直接並べてスタイリングする CSS フレームワークです。本記事では、ユーティリティファーストという設計思想を整理…
Twig と Smarty、PHPテンプレートエンジンの選び方を考える
PHP でビューを組み立てるとき、生の PHP を埋め込む方式のほかに、専用のテンプレートエンジンを使う選択肢があります。代表的なのが Twig と Smarty です。どちらも「ロジックとビューを分離する」という同じ目的を持ちながら、設計…
gulpとPostCSSで組むフロントエンドのCSSビルドパイプライン
Sass だけに頼らず、PostCSS のプラグインエコシステムを軸にした CSS ビルドパイプラインを gulp で組む方法をハンズオン形式でまとめる。
WordPress5.5 でカテゴリーが選択できないを解決
WordPress5.5 でカテゴリーが選択できないを解決 今体験した事です。 久しぶりに記事を書いて投稿したらカテゴリにチェックが付かない...。 原因はWordPress5.5.1の更新でjquery-migrate […]