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年の振り返り
blog.jxck.io
2024 年を振り返る
例年通り 2024 年を振り返る。
stin's Blog
指定したWebページを動く状態でクローンする方法
ふと、指定したURLのWebページをクローンして別の環境で再現する方法がないかと考えました。 HTMLとそれが参照するCSS, JavaScript, 画像ファイルなどをダウンロードして保存しておき、静的ファイルとして配信すれば同じWebペ
azukiazusa のテックブログ2
2024 年に読んでよかった本
私は今年 1 年間でおおよそ 300 冊の本を読んだようです。その中から、特に印象に残った本をいくつか紹介します。
@sakupi01.com blog
🎄Open UI Advent Calendar: Day 25 / Epilogue
OpenUI Advent Calendar エピローグ
@sakupi01.com blog
🎄Open UI Advent Calendar: Day 24 / Global Design System Part2
Open UIが提唱するデザインシステム、Global Design Systemとその未来
@sakupi01.com blog
🎄Open UI Advent Calendar: Day 23 / Global Design System Part1
デザインシステムの開発を加速させる、堅牢で柔軟なGlobal Design Systemの提唱
@sakupi01.com blog
🎄Open UI Advent Calendar: Day 22 / Customizable Select Element Ep.20
Customizable Select Elementのまとめ
azukiazusa のテックブログ2
カード UI の入れ子のリンクの問題を解決する Link Area Delegation の提案
多くのウェブサイトではリンクを入れ子にしたカード UI が利用されています。しかし、このような UI では HTML 仕様に違反していたり、ハッキーな手法で実装されていることがあります。Open UI コミュニティでは Link Area
@sakupi01.com blog
🎄Open UI Advent Calendar: Day21 / Customizable Select Element Ep.19
Customizable Select Elementの関連仕様: `` - 子Node変更検知タイミングの仕様決定（現時点で）
@sakupi01.com blog
🎄Open UI Advent Calendar: Day 20 / Customizable Select Element Ep.18
Customizable Select Elementの関連仕様: `` - 「同期タイミング」でクローンを作成の方針で決定。`cloneNode()`の制限が浮き彫りになる