azukiazusa のテックブログ2
GIF アニメーションの使用を控える
技術記事を書く際に、GIF アニメーションを使用することがあるかと思います。しかし、GIF アニメーションを使用することはアクセシビリティ上問題となります。この記事では、GIF アニメーションを使用することを避けるべき理由を説明します。
すべて
blog.jxck.io
URL バーの表示の変遷
ついに URL バーから EV 証明書の組織表示が消されるアナウンスが、Chrome から発表された。思えば、URL バーの見た目も、だいぶ変わってきたように思う。URL バーの表示の変遷を 1 度まとめておく。
stin's Blog
localStorage に同期する React State を作るカスタムフック
React の useState と似た使い方で localStorage に保存されるカスタムフック useLocalStorage の実装を紹介します。このブログサイトのソースコードで使用しています。 react-use に同じ目的同じ
azukiazusa のテックブログ2
list-style: none スタイルを指定した ul 要素には list ロールを指定すべき
WAI-ARIA における role 属性を使用する際のプラクティスとして、暗黙のロールを明示しないというものがあります。しかし、` ` 要素は暗黙のロールとして `list` ロールを持っていますが、明示的に `list` ロールを宣言す
blog.jxck.io
IETF RFC における ABNF と Parsing Algorithm の関係
HTTPBis では、RFC 8941: Structured Field Values (以下 SFV) の更新作業が行われている。RFC 8941: Structured Field Values for HTTPhttps://www
stin's Blog
ブログサイトを Next.js App Router に移行したので学びを書く
このサイトを Next.js App Router で実装し直しました。Server Components が扱えてなんか便利なやつです。 移行にあたって学んだことや App Router の嬉しいポイントなどを書いておきます。 スタイリン
azukiazusa のテックブログ2
Vitest のブラウザテスト
Vitest は実験的な機能として、ブラウザモードをサポートしています。ブラウザテストは Node.js 上で jsdom を用いてテストを実効するよりも信頼性の高い方法ですが、テストのセットアップに時間がかかるといったデメリットも存在しま
azukiazusa のテックブログ2
Next.js の Server Actions について
Next.js の Server Actions はサーバーサイドのデータのミューテーション、クライアント JavaScript の削減、プログレッシブエンハンスメントなフォームを実現します。
blog.jxck.io
技術書籍をシンタックスハイライトする話
「連載するけど、代わりにコードはハイライトさせてほしい」それが Web+DB Press 編集長に俺が出した条件だった。
azukiazusa のテックブログ2
SvelteKit のフォーム操作
SvelteKit のフォームは Web 標準の機能のみで完結しています。つまり、クライアントサイドでは JavaScript を一切使用せずにサーバーにデータを送信できるのです。さらに、JavaScript を利用できる環境であるならばリ
azukiazusa のテックブログ2
Array.prototype.with() とは
`Array.prototype.with()` は、非破壊的に配列の要素を置き換えるためのメソッドです。非破壊的とは、元の配列を変更せずに新しい配列を返すということです。`arr` に対して `with()` を実行しても、`arr` は
azukiazusa のテックブログ2
Tailwind CSS のダークモードで System, Light, Dark を切り替える
ダークモードの設定では、OS の設定と同期させるか、ライトモードまたはダークモードに手動で切り替えるかの 3 つの選択肢が用意されていることがあります。手動でライトモードとダークモードを切り替える場合に比べて、OS の設定を自動で反映できる
azukiazusa のテックブログ2
Next.js の Interception Routes について
Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上
azukiazusa のテックブログ2
Cloudflare Workers のためのフルスタックツールキット Superflare を試してみた
Superflare は Cloudflare Workers 用のフルスタックツールキットです。D1 Database 向けの ORM や R2 Storage 向けのユーティリティなどの機能を提供しています。Superflare 自体は
azukiazusa のテックブログ2
HTML の仕様に search 要素が追加された
HTML Standardに新しい``要素が追加された。これまで、ARIAには``に相当するHTML要素がなかったため、` `しか代替要素がなかった。新たに``要素を使用することにより、WAI-ARIA を使用せずともsearchランドマー
blog.jxck.io
OpenAI API を用いた文書校正(誤字脱字検出)
OpenAI の API を用いて、長年の課題だった文書校正を VSCode 上で実現するプラグインを修作したところ、思った以上の成果だった。
azukiazusa のテックブログ2
ChatGPT3 で出力の形式を固定したい場合には例を提示してあげるとよさそう
ChatGPT は毎回異なる出力を返すことがあるため、APIやアプリ開発にとって不都合が生じる。そこで、出力の例を提示することで固定した形式の回答を得やすくすることができる。提示するためのプロンプトは区切り文字を使用して区切ることが推奨され
azukiazusa のテックブログ2
TypeScript で網羅性をチェックする
パターンマッチを備えている言語では、コンパイル時に網羅性が検査され、網羅的でない場合にはコンパイルエラーとなります。例えば Rust では match 式は網羅性を検査します。列挙型が取りうる値をすべて網羅していない場合にはコンパイルエラー
azukiazusa のテックブログ2
SvelteKit で環境変数を使う
SvelteKit プロジェクトは Vite を使用しているので、`import.meta.env` から環境変数を参照できます。単に環境変数を参照するだけならば十分です。ですが SvelteKit により提供されている環境変数の仕組みを使
blog.jxck.io
誇りを被った仕様の針に意図を通す
Interop 2022 の目覚ましい成果の 1 つとして :has() の存在がある。これまでの CSS の限界を突破する、革新的な仕様であり、多くの開発者が期待を寄せる機能の 1 つだろう。こうした仕様策定の裏には、必ずと言って良いほど