OpenReplay ブログ
Tailwind CSS プラグインでアニメーションを追加する
Tailwind CSS のアニメーション追加方法を、組み込みユーティリティからプラグイン、v4 のカスタムキーフレームまで、アクセシビリティを考慮しながら整理する。
Node.jsにおける安全なユーザー入力の取り扱い
Zodとパラメータクエリ、明示的な引数を用いた安全なNode.js入力処理により、SQLインジェクション、プロトタイプ汚染、マスアサインメント攻撃を防ぐ。
HTML Sanitizer APIの初見レビュー
HTML Sanitizer APIはXSS対策をブラウザに組み込む仕組みで、安全なメソッドとDOMPurifyのフォールバック比較、許可リストの設定方法を解説する。
モダンWebアプリに最適なCDN
Cloudflare Workers、Fastly Instant Purge、AWS CloudFront、Akamai Ionを比較し、適切なCDNを選ぶ際の指針を解説。
テキストでDOM要素を検索する方法
querySelector フィルタリング、TreeWalker、XPath と document.evaluate を使ったテキストベースのDOM要素選択方法を解説する。
Laravel Livewireを始める
PHPコンポーネントとBladeテンプレートを記述し、フォームバリデーションやリアクティブなDOM更新を自動処理するLivewireで動的なLaravel UIを構築する。
CSS random() 関数の探求
CSS random() 関数はスタイルシートでネイティブな数値を生成し、構文・キャッシュキー・フォールバックを用いてJavaScriptなしに視覚的なバリエーションを実現する。
htmx SSE拡張機能によるリアルタイムUX
htmx SSE拡張機能とserver-sent events、HTML属性を使い、JavaScriptフレームワーク不要でリアルタイムUIを実装する方法を解説。
モダンCSSによるSelect要素のスタイリング
appearance:noneとbase-selectでselect要素をスタイリングし、clip-pathやfocusスパンの適用とブラウザ間の段階的拡張を紹介する。
TypeScriptにおける`!`の使用に注意すべき理由
TypeScriptの非nullアサーション演算子はコンパイラの警告を抑制するだけで実行時の保護を追加しないため、コンパイル時のエラーが追跡困難なnullクラッシュに変わる。
CSSにおける相対カラー構文の解説
CSSの相対カラー構文を使うと、OKLCHなどのモダンなカラー関数で、単一の基準色からtint、shade、透明度のバリアントを導出できる。
Promise.tryでより明瞭な非同期チェーンを書く
Promise.tryは同期的な例外をrejectionとして捕捉し、非同期チェーンをクリーンに保つ。代替手法との比較や、条件付きデータ読み込みパターンへの応用を解説する。
Babylon.jsとは？簡単な紹介
Babylon.jsはWebGLとWebGPU上に構築されたオープンソースのJavaScript製3Dエンジンです。Three.jsとの比較や、実現できる開発内容を紹介します。
CSSにおける動的ビューポート単位の理解
CSSのビューポート単位svh、lvh、dvhは、ブラウザUIによるモバイルレイアウトのクリッピングを解消し、レスポンシブやフルスクリーンレイアウトに適した単位選択を可能にする。
WordPressサイトを保護する方法
プラグインの更新、2FAの有効化、ファイルパーミッションの適切な設定、CloudflareやWordfenceなどWAFの導入でWordPressサイトを保護する。
フレームワークよりもバニラJavaScriptを選ぶべき理由
バニラJavaScript、Web Components、ESモジュール、ネイティブブラウザAPIがReactやVueより有効なケースをプロジェクト要件ごとに評価する。
HTTPレスポンスの中身とは?
HTTPレスポンスはステータスライン、ヘッダー、ボディで構成される。各部分を理解することで、DevToolsでのデバッグやfetchの結果処理をより効果的に行える。
Chrome DevToolsの隠れた機能
CSS Overview、Logpoints、Coverageタブ、Layout Shiftデバッグを活用し、パフォーマンスとワークフローを改善する方法を解説する。
UnJS: フレームワーク非依存のJavaScriptツール群
UnJSエコシステムの概要と、Nitro・h3・ofetch・unpluginが複数ランタイムでJavaScriptインフラを扱う仕組みを解説する。
OpenUIがWebコンポーネントをどのように形作っているか
OpenUIはPopover API、Invoker Commands API、select CSSの標準化によりカスタムJavaScriptの負荷を軽減する。
すべての開発者が知っておくべき必須npmコマンド
npm CLIを活用した依存関係の監査、スクリプト実行、推移的依存関係のピン留めについて解説する。依存関係ツリーのデバッグと脆弱性修正に役立つコマンドを紹介する。
'Cannot use import statement outside a module' エラーの解決方法
Node.js、ブラウザ、Jestで発生する'Cannot use import statement outside a module'エラーの原因となるモジュールシステムの不一致を正しく診断して解決する方法を解説。
Svelteでコンポーネントを遅延ロードする方法
動的インポートと条件付きレンダリングを使い、SvelteKitやViteベースのプロジェクトで初期バンドルを軽量に保つSvelteコンポーネントの遅延ロード方法を解説する。
Chrome の Local Network Access (LNA) パーミッションの解説
Chrome の Local Network Access パーミッションの仕組み、LNA プロンプトの発生条件、Web アプリでの対応方法を解説する。