four.htmx.org 2日前

Htmx 4.0

htmxチームがhtmx 4.0.0をリリース。内部実装をXMLHttpRequestからfetch()へ移行し、属性継承がデフォルトで明示的(:inherited指定)になった、イベント名がhtmx:phase:action形式に統一された、履歴機能がlocalStorageを使わなくなったという3つの大きな変更を実施。新機能としてmorphスワップの標準サポートと<hx-partial>タグを追加し、hx-preloadやhx-live(Alpine.js風のスクリプティング)など多数の拡張機能も提供。移行支援としてCLIアップグレードチェッカーとLLM向けskillsファイルも用意されている。2.xは引き続きnpmのlatestタグを維持し、4.0系は2027年初頭までnextタグで提供予定。

htmxチームがhtmx 4.0.0をリリース。内部実装をXMLHttpRequestからfetch()へ移行し、属性継承がデフォルトで明示的(:inherited指定)になった、イベント名がhtmx:phase:action形式に統一された、履歴機能がlocalStorageを使わなくなったという3つの大きな変更を実施。新機能としてmorphスワップの標準サポートと<hx-partial>タグを追加し、hx-preloadやhx-live(Alpine.js風のスクリプティング)など多数の拡張機能も提供。移行支援としてCLIアップグレードチェッカーとLLM向けskillsファイルも用意されている。2.xは引き続きnpmのlatestタグを維持し、4.0系は2027年初頭までnextタグで提供予定。
↗ 元記事を開く
www.datadoghq.com 2日前

Reduce sensitive data exposure with build-time allowlists

Datadogのブラウザ向けRUMで、ビルド時に静的文字列を抽出してアクション名のallowlistを生成する仕組みを解説。defaultPrivacyLevelをmask-unless-allowlistedに設定すると、ビルドプラグイン(ESBuild/Rollup/Rspack/Vite/Webpack対応)が抽出した静的テキストのみ表示され、実行時に生成された値は自動的にマスクされる。読みやすいアクション名とプライバシー保護を両立し、CI/CDパイプラインに組み込める。

Datadogのブラウザ向けRUMで、ビルド時に静的文字列を抽出してアクション名のallowlistを生成する仕組みを解説。defaultPrivacyLevelをmask-unless-allowlistedに設定すると、ビルドプラグイン(ESBuild/Rollup/Rspack/Vite/Webpack対応)が抽出した静的テキストのみ表示され、実行時に生成された値は自動的にマスクされる。読みやすいアクション名とプライバシー保護を両立し、CI/CDパイプラインに組み込める。
↗ 元記事を開く
zenn.dev 3日前

なぜ sessionReplaySampleRate はアプリごとに効かないのか? Datadog RUM の仕様と解決アプローチ

マイクロフロントエンド構成でDatadog RUMのsessionReplaySampleRateをアプリごとに設定しても、セッション開始時に決まるrum Cookieの仕様により意図通りに機能しない問題を検証。force:trueによる強制録画は永久Retention Filterで全件課金対象になるため使えず、最終的に全アプリでsessionReplaySampleRate:100%+手動録画開始+Retention Filterのfirst-match仕様を踏まえた並び替えで、録画対象とコストを両立する設計にたどり着いた記事。

マイクロフロントエンド構成でDatadog RUMのsessionReplaySampleRateをアプリごとに設定しても、セッション開始時に決まるrum Cookieの仕様により意図通りに機能しない問題を検証。force:trueによる強制録画は永久Retention Filterで全件課金対象になるため使えず、最終的に全アプリでsessionReplaySampleRate:100%+手動録画開始+Retention Filterのfirst-match仕様を踏まえた並び替えで、録画対象とコストを両立する設計にたどり着いた記事。
↗ 元記事を開く
zenn.dev 6日前

最近育てているフロントエンド開発用テンプレートの話

フロントエンド開発用テンプレートリポジトリ next-template の設定紹介。pnpm のサプライチェーン攻撃対策(minimumReleaseAge 等)、TypeScript 7.0 strict 追加設定、Oxlint/Oxfmt、ls-lint、Knip、Lefthook、GitHub Actions の SHA 固定、Dependabot cooldown、Next.js 16 の Cache Components、Playwright、AGENTS.md でのエージェント運用ルールなど、AI コーディングエージェント時代を意識したツールチェイン構成をまとめている。

フロントエンド開発用テンプレートリポジトリ next-template の設定紹介。pnpm のサプライチェーン攻撃対策(minimumReleaseAge 等)、TypeScript 7.0 strict 追加設定、Oxlint/Oxfmt、ls-lint、Knip、Lefthook、GitHub Actions の SHA 固定、Dependabot cooldown、Next.js 16 の Cache Components、Playwright、AGENTS.md でのエージェント運用ルールなど、AI コーディングエージェント時代を意識したツールチェイン構成をまとめている。
↗ 元記事を開く