OpenReplay ブログ
Shaders.comでUIにWebGPUエフェクトを追加する
Shaders.comは、React、Vue、Svelte、Solid向けに90以上のWebGPUエフェクトを提供し、ビジュアルエディタとブラウザ用フォールバックも備えます。
HTTPリクエストにおけるリンクとフォームの違い
HTTPリクエストでのリンクとフォーム: <a>、GETフォーム、POSTフォームの使い分けと、method=linkが無効な理由を解説。
JavaScriptでオンライン・オフライン状態を検出する方法
JavaScriptでオンライン/オフライン状態を判定。navigator.onLine、online/offlineイベント、fetchで接続確認まで解説。
CSSのcross-fade()を使った画像のブレンド
CSS cross-fade() は画像を1つの宣言で合成します。割合指定、旧 -webkit 構文、@supports のフォールバック、対応状況を解説。
人気のJavaScriptゲームエンジンを比較
Phaser、Babylon.js、PlayCanvas、Excalibur、melonJSを比較し、2D・3Dブラウザゲームに合うJavaScriptゲームエンジンを選べます。
Canvas を使用した画像の Base64 への変換
Canvasで画像をBase64に変換。toDataURLとtoBlobの違い、PNG/JPEG/WebP対応、CORSでtainted canvasを避ける方法を解説。
JavaScript開発者のためのセキュアコーディング
ブラウザー向けJavaScriptの安全な書き方: DOM XSSを防ぎ、eval()を避け、CSPを使い、トークンを守り、postMessageと依存関係を強化する。
WebTransportによる低レイテンシブラウザ通信
ブラウザ向けWebTransport: WebSockets、datagram、streamを比較し、HTTP/3で低遅延通信を実現する仕組みを解説。
開発者が知っておくべき5つのGit Dotファイル
Gitの主要なdotfile 5つを解説。.gitconfig、.gitignore、.gitattributes、.git-blame-ignore-revs、.mailmapで作業を整理。
TypeScript 6.0の新機能
TypeScript 6.0の既定値変更、旧オプションの非推奨化、ES2025対応、Temporal型、TypeScript 7.0移行の要点を解説します。
ネイティブWeb APIでアニメーションライブラリを置き換える
GSAPやFramer Motionを、Web Animations API、CSS Scroll-Driven Animations、View Transitionsで置き換える方法を解説します。
Linux ファイルパーミッションの解説
Linuxのファイルパーミッション、所有権、chmod、chown、umask、setuidやスティッキービットなどを解説し、システムのセキュリティ設定を網羅する。
CSS `zoom` を使用した UI 要素のスケーリング
CSS の zoom と transform scale をレイアウトフロー、ブラウザサポート、UI スケーリングの実用例で比較し、適切な手法を選択するための指針を解説する。
開発環境でローカルHTTPSを有効にする方法
mkcertを使って信頼済みのローカルHTTPSを構築し、ViteやNext.jsの開発サーバーを設定して、自己署名証明書の警告を回避する方法を解説する。
SolidJSを使った開発のベストプラクティス
SolidJSの細粒度リアクティビティ、シグナルスコープ、props処理、store活用、createResourceによる非同期パターンの落とし穴と対策を解説。
Turso:RustベースのSQLiteの進化形
TursoとlibSQLを比較し、Rust・非同期API・MVCCがエッジデプロイメントとモダンなアプリケーションアーキテクチャ向けにSQLiteを拡張する仕組みを解説する。
Vue 3アプリケーションでのPDF表示
Vue 3でPDFを表示する方法として、ネイティブ埋め込み、PDF.js、Vueラッパーコンポーネントを比較し、CORS・workers・バンドルサイズのトレードオフを解説する。
リレーショナルデータベース設計の基礎
主キー、外部キー、正規化、制約を活用して信頼性の高いリレーショナルデータベーススキーマを構築し、テーブルを適切に構造化してデータ異常を防ぐ方法を解説する。
CMSとしてMarkdownを使用することの良い点と悪い点
CMSとしてMarkdownを使う際のトレードオフを、Gitワークフロー、MDX、Tina CMS、そして構造化ヘッドレスCMSが適切な場面を踏まえて解説する。
Node.jsミドルウェアによるリクエストのログ記録
Morgan、Pino、AsyncLocalStorageを使いExpressに構造化HTTPリクエストログを追加し、相関IDの追跡と機密データの除外を実現する方法を解説。
5 モダンフレームワークが無償で提供するセキュリティ機能
Next.js、SvelteKit、Djangoなどのモダンフレームワークは、XSSエスケープ、CSRFトークン、サーバーサイドのシークレット分離をデフォルトで自動的に提供する。
ダッシュボード構築に最適なJavaScriptライブラリ
Chart.js、Apache ECharts、Recharts、AG Grid、TanStack Tableを比較し、最適なダッシュボードライブラリを選ぶ指針。
新しい HTML Geolocation 要素
新しいgeolocation要素はHTMLに宣言的なロケーションアクセスをもたらし、navigator.geolocationのコールバックを簡潔なパーミッション処理に置き換える。
モダンCSSで要素を中央揃えする方法
CSS Flexbox、Grid、autoマージンを活用し、各レイアウトの文脈に合った方法で要素を水平・垂直方向に中央揃えする手法を紹介する。