azukiazusa のテックブログ2
OpenTelemetry Collector の Connector を使ってログをメトリックに変換する
OpenTelemetry には、メトリック、トレース、ログの 3 つの形式があります。これらの形式はそれぞれ別のパイプラインで処理されます。ある形式のデータを別の形式に変換し、あたかも 1 つのパイプライン上でデータを処理したい場合に C
すべて
azukiazusa のテックブログ2
最小限のコードで動く最も汚いコードから始める
コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラ
azukiazusa のテックブログ2
OpenTelemetry を使用して Node.js アプリケーションを計装する
OpenTelemetry は Observability のフレームワークであり、トレース・メトリクス・ログなどのテレメトリーデータを作成、管理するためのツールキットです。OpenTelemetry はベンダーに依存しない形で標準化された
azukiazusa のテックブログ2
await は Promise 以外のオブジェクトでも値を取り出せる
await キーワードは `then()` という名前のメソッドを持つオブジェクトに対して使用できます。このようなオブジェクトを thenable object と呼びます。await キーワードが Promise オブジェクトではなく t
blog.jxck.io
Cookie2 とは何か
タイトルを見て「Cookie の新しい仕様か、キャッチアップしよう」と思って開いたのなら、以降を読む必要はない。
azukiazusa のテックブログ2
【React】メモ化したコンポーネントに children を渡すと効果がなくなる
React.memo は Props が変更されないかぎり、コンポーネントを再レンダリングしないようにする関数です。この関数はコンポーネントの余分なレンダリングを防ぎ、パフォーマンスを向上させる目的で使用されます。しかし、React.mem
azukiazusa のテックブログ2
アニメーションの無効設定は prefers-reduced-motion に任せるか、アプリケーションの設定で制御するか
prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに設定できます。ユーザーがアニメーションを無効にできることは、アクセシ
azukiazusa のテックブログ2
【書評】RustとWebAssemblyによるゲーム開発は Rust 開発における設計を学べる良書
本のタイトルは「Rust と WebAssembly によるゲーム開発」となっていますが、反して WebAssembly についての話題はほとんど出てきません。主に Rust における開発の設計についての話題が中心となっています。
azukiazusa のテックブログ2
グラフのアクセシビリティについて考える
`` や `` 要素で描画されたグラフは、スクリーンリーダーを使用するユーザーにとって内容を正しく理解することが難しいです。この記事では、グラフの内容をスクリーンリーダーを使用するユーザーに伝える方法について考えてみます。
blog.jxck.io
Compression Dictionary Transport (Shared Brotli) によるコンテンツ圧縮の最適化
Chrome で Compression Dictionary Transport の Experiment が行われている。Intent to Experiment: Compression dictionary transport wi
azukiazusa のテックブログ2
React.memo でメモ化したコンポーネントはモック関数が使えない
テストにおいて子コンポーネントをモックしたい場合には通常のテストと同様に jest.mock() を使います。しかし、React.memo() でメモ化したコンポーネントはモック自体には成功するものの、mockImplementation
azukiazusa のテックブログ2
Document Picture in Picture で任意の要素を Picture in Picture する
Document Picture-in-Picture は、`` 要素に限らず任意の要素を PiP できるようにする提案です。これにより、動画以外の要素を PiP できるようになります。主なユースケースとして、カスタムのメディア・コントロー
azukiazusa のテックブログ2
スナップショットテストとアサーションテスト
この記事では、スナップショットテストとアサーションテストの違いを説明します。また、それぞれのアプローチでテストを書いたときのメリットとデメリットを見ていき、どちらのアプローチを採用すべきか考えていきます。
azukiazusa のテックブログ2
pnpm でパッケージにパッチを当てる
`pnpm patch` コマンドを使うと、依存パッケージのコードを直接書き換えることができます。
azukiazusa のテックブログ2
aria-label を使いすぎない
aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。aria-label 属性は手軽に使えますが、できる限り一般的
azukiazusa のテックブログ2
スクリーンリーダーに配慮したテキスト表記
文字を機械的に判断するスクリーンリーダーでは、人間の目によって判断できる文字について異なる解釈をするおそれがあります。そのような場合、利用者に正しい文章の意図を伝えられません。スクリーンリーダーに配慮したテキストの表記法を紹介します。
blog.jxck.io
Cookie Store API による document.cookie の改善
JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。
azukiazusa のテックブログ2
ポップオーバー API で JavaScript を使わずにポップアップを表示する
Chrome 114 から追加されたポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示することができます。
azukiazusa のテックブログ2
Vue.js でジェネリックコンポーネントを使う
Vue.js 3.3 から `` 構文を使用してコンポーネントを記述する際に、型引数を指定することができるようになりました。TypeScript で関数に型引数を指定するのと同じように、コンポーネントの props の型を指定することができ
blog.jxck.io
AbortSignal.any(), AbortSignal.timeout(), そして addEventListener() の Signal
最近 AbortSignal.any() が提案され、急速に実装が進んでいる。すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装