azukiazusa のテックブログ2
パスキーによる認証をブラウザで実装してみる
パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、またフィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。この記事
すべて
azukiazusa のテックブログ2
React Server Components を手軽に扱うフレームワーク react-server
react-server は Node.js で JavaScript ファイルを実行するかのように React Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小
azukiazusa のテックブログ2
Bun v1.2 では package.json にコメントを書ける
`package.json` は JSON フォーマットのファイルであるため、コメントを書くことができません。`package.json` に定義したスクリプトの説明を書いておくことは重要です。別のファイルに説明を書いたり、`//` で始ま
azukiazusa のテックブログ2
TypeScript 5.8 で追加される erasableSyntaxOnly フラグ
TypeScript 5.8 で `erasableSyntaxOnly` フラグが追加される予定です。このフラグは `enum` や `namespace`、`Class Parameter properties` などの「消去可能ではな
blog.jxck.io
"Less Password" 時代のアカウント防災訓練
震災の直後、復興のさなかに水害が起こり、再び全てが流される。能登の人々にとっては大変な 2024 年だったと思う。首都直下型や南海トラフはいつ起こってもおかしくないと言われ、戦火すら他人事ではなくなっている。家に災害用の備蓄を用意するのと同
@sakupi01.com blog
Customizable Select ElementにおけるParser RelaxationのアップデートとShipの背景
長年の議論を経て、ようやく仕様が固まった、CustomizableなSelect要素の現状について、Parser Relaxationのを軸に解説します
azukiazusa のテックブログ2
型安全にクエリパラメーターを扱う nuqs
フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があ
blog.jxck.io
Web 技術年末試験 2024 講評 #web_exam2024
2024 年の Web 技術を振り返る試験として、「Web 技術年末試験 2024」を実施した。その問題と想定解答、平均点などを公開する。
azukiazusa のテックブログ2
ダイアログの Light dismiss を有効にする `<dialog closedby>` 属性
`` 属性はダイアログの外側をクリックした際にダイアログを閉じる Light dismiss 機能を実現するための属性です。closedby 属性は `any`, `closerequest`, `none` の 3 つの値を受け付けます。
azukiazusa のテックブログ2
React の `<ViewTransition>` コンポーネントで宣言的にページ遷移アニメーションを追加する
`` コンポーネントは React の実験的なバージョンとして導入されました。これは View Transition API を 宣言的な方法で使用できるようにするものです。
azukiazusa のテックブログ2
MPA でページ遷移アニメーションを行う `@view-transition` CSS アットルール
View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。SPA では `document.startViewTransition()` メソッドを DOM が変更される前に呼び出すことで
azukiazusa のテックブログ2
scroll-state() CSS コンテナクエリを使用して sticky で張り付いたときに境界線を出す
scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。
azukiazusa のテックブログ2
ユーザーにヒントを表示するための `popover=hint` 属性
ポップオーバー API は 2024 年の Baseline に組み込まれており、主要なブラウザでサポートされています。Chrome Beta 133 では 3 番目の値として `hint` が追加されました。`popover=hint`
blog.jxck.io
Cookie Theft 対策と Device Bound Session Credentials
Chrome チームより提案された Device Bound Session Credentials の実装が進み、Flag 付きで試すことができる。この提案の背景と、解決する問題、現時点での挙動について解説する。
azukiazusa のテックブログ2
Node.js で TypeScript を直接実行できるようになった
Node.js v23.6.0 から `--experimental-strip-types` フラグがデフォルトで有効になりました。これにより、Node.js でTypeScript を直接実行できるようになります。
azukiazusa のテックブログ2
AI エディター Cursor を試してみる
AI エディター Cursor は GitHub Copilot と同様にコードの補完やチャットによるコードの生成をサポートしてくれます。Cursor は VS Code をフォークして作られており、既存の VS Code の拡張機能やキー
stin's Blog
2025年の目標
あけましておめでとうございました。すでに 6 日が経過してしまいましたが、2024年の振り返りと2025年の目標を立てます。 2024年の振り返り 2024年の目標は以下の通りでした。 https://blog.stin.ink/artic
azukiazusa のテックブログ2
GitHub Actions で再利用可能なワークフローを作成する
GitHub Actions で CI/CD 環境を構築する際に、同じような処理を複数のファイルで記述するようなことがよくあります。この記事では、GitHub Actions で再利用可能なワークフローを作成する方法と、実際に再利用可能なワ
stin's Blog
ハロー！プロジェクトファンクラブのデジタル会員証があまりに杜撰なので、正しい実装を考える
ハロー！プロジェクトのファンクラブ(以下FC)サイトが2024年11月にリニューアルされました。 https://www.upfc.jp/helloproject/news\_detail.php?@uid=s32dbjT7VpPSK55H
@sakupi01.com blog
2024 In Review
2024年の振り返り