Katashin

「パワポみたいに画像を置ければいい」から始まった地獄（Web UI 実装勉強会 #2） - Katashin .info Web UI 実装勉強会 #2 で行った LT のスライドです。テキストエディターの中に画像を自由に配置できる実装をするため、色々な工夫をしたことについて話しました。

「パワポみたいに画像を置ければいい」から始まった地獄（Web UI 実装勉強会 #2） #web_ui_devs - Katashin .info
katashin.info/slides/word-...

今回の Web UI 実装勉強会、僕からは地獄の UI の話をお届けします

型システムについて語る勉強会的なものやりたい

型システム再入門してる

“Turing Complete User” (Japanese translation) ⌇ Baku Hashimoto This is a rough Japanese translation of Olia Lialina 's essay ”Turing Complete User” (2012). このテキストはネットアートの先駆者の一人、オリア・リアリナの2012年の論考『 Turing Complete U

「チューリング完全ユーザー」が使うことを前提にしてあいまいさを大事にするという考え方、目からウロコだった
baku89.com/turing-compl...

TypeScript に Algebraic Effects がほしい（Mita.ts #8） - Katashin .info Mita.ts #8 で行った LT のスライドです。もし TypeScript に Algebraic Effects の構文があったらどうなるかの予想をし、Algebraic Effects を実装しているライブラリを紹介しています。

TypeScript に Algebraic Effects がほしい（Mita.ts #8） - Katashin .info katashin.info/slides/ts-al...

全体的に explicit で比較的冗長なのも、裏を返せばソースコード上になにが起こってるか全部書いてあるというわけで、それが Context Engineering と相性がいいという感じなのかな

Remix 3、今の時代に手動再描画は不便そうではあるけど、リアクティブシステムなどに依存しない描画の仕組みにして、状態管理やモジュール化から依存を排除したいモチベーションを感じられて、めっちゃ気持ちわかる～ってなってる

Algebraic Effects and Handlers の実装に必要で限定継続について勉強してるのだけど、自分にとってまったく新しい概念でおもしろい
pllab.is.ocha.ac.jp/~asai/cw2011...

YouTube video by Kevin Powell 2 reasons you should be using single color gradients in CSS

background-clip を使った border へのグラデーション付与とか、animation-play-state を使ってホバー状態↔通常状態のアニメーション遷移を自然にするテクニックとか。勉強になった。
youtu.be/8NfafU1BgaY?...

Rust でプログラミング言語を作りはじめた｜Katashin 624字

Rust でプログラミング言語を作りはじめた｜Katashin
sizu.me/ktsn/posts/e...

マイクロインタラクションに View Transition API を使おう！（Web UI 実装勉強会 #1） - Katashin .info Web UI 実装勉強会 #1 で行った LT のスライドです。View Transition をページ全体ではなく一部に適用してマイクロインタラクションを実現する方法について発表しました。

マイクロインタラクションに View Transition API を使おう！（Web UI 実装勉強会 #1） - Katashin .info katashin.info/slides/micro...

Thank you for the info!

view-transition-name の値や view transition 関連の擬似クラスを Vue の scoped css みたいにグローバルで衝突しないようにしたいのだけど、似たようなことやってる人いないのだろうか。

デザインにブレーキをかけないエンジニアの動き方（DIST.51） - Katashin .info DIST.51 「モダンWebデザインワークフロー」で行った LT のスライドです。デザイナーにベストなアウトプットをしてもらうためにエンジニアとして心がけている動き方について話しました。

デザインにブレーキをかけないエンジニアの動き方（DIST.51） - Katashin .info katashin.info/slides/colla...

うらやましい… (5回戦突破)

Katashinさんのネームカード Vue Fes Japan 2025 のネームカードページです。チケットを購入して、あなたのネームカードを作成しましよう！

Vue Fes Japan 2025 に参加します！
チケットを購入してネームカードを作成しよう！

vuefes.jp/2025/ticket/...

#vuefes

UI の実装に関する勉強会をやりたい｜Katashin 572字

UI の実装に関する勉強会をやりたい｜Katashin
sizu.me/ktsn/posts/t...

タッチデバイスで pointercancel イベントによるドラッグ中断を回避する方法 - Katashin .info 実用的ですぐに開発に役立てることができる Web フロントエンドの話題を書いている Katashin の個人ブログです。

タッチデバイスで pointercancel イベントによるドラッグ中断を回避する方法 - Katashin .info katashin.info/posts/touch-...

Scope Hoisting + Code Splitting で実行順が変わるの意識したことなかったけど、確かにそこが維持されないのは問題になるのか
devongovett.me/blog/scope-h...

[2025-06-30] DPRと画像圧縮 DPRと 画像圧縮

喋りました
docs.google.com/presentation...

JavaScript の暗黙の型変換とそれを制御するメソッド - Katashin .info JavaScript の暗黙の型変換の仕組みと、Symbol.toPrimitive、toString、valueOf を使った型変換のカスタマイズ方法を解説します。

JavaScript の暗黙の型変換とそれを制御するメソッド - Katashin .info katashin.info/posts/implic...

NoInfer<T> | TypeScript入門『サバイバルTypeScript』 型推論を防ぐ

NoInfer 知らなかった。地味に使いそう。
typescriptbook.jp/reference/ty...

Skyline アルゴリズムで実現するグリッドを超えた柔軟なレイアウト - Katashin .info CSS Grid や Flexbox では実現が難しい柔軟なレイアウトを、Skyline アルゴリズムで実装する方法を解説しています。さらに効率的で美しい配置のために、先読みと配置制約による拡張も提案しています。

Skyline アルゴリズムで実現するグリッドを超えた柔軟なレイアウト - Katashin .info katashin.info/posts/skylin...

Vue 3.4 で変わった computed の再計算アルゴリズム – 処理順序の逆転による最適化 - Katashin .info Vue 3.4で実装された computed の最適化を詳細解説。"maybe dirty" 状態の導入により再計算順序を逆転させ、値が変更されない場合の不要な処理を大幅に削減。PR #5912 の実装詳細とリアクティビティシステムの改善アルゴリズムを図解とコード例で分かりやすく説明します。

2年前に出すべき記事を今更書きました。

Vue 3.4 で変わった computed の再計算アルゴリズム – 処理順序の逆転による最適化 - Katashin .info katashin.info/posts/vue-3....

Vue.js のための CSS スプリングアニメーション実装（Vue.js v-tokyo Meetup #23） - Katashin .info Meguro.css #9 で行った LT のスライドです。カスタムプロパティを活用することで実現可能なアニメーションの実装方法について発表しました。

Vue.js のための CSS スプリングアニメーション実装（Vue.js v-tokyo Meetup #23） - Katashin .info katashin.info/slides/vue-s...

position: sticky が効かない原因を CSS 仕様から読み解く – スクロールコンテナーと包含ブロック - Katashin .info position: sticky が機能しない2つの主な原因（overflow: hidden による意図しないスクロールコンテナーの生成と包含ブロックによる制限）とその解決方法を、具体的なコード例とともに解説します。

position: sticky が効かない原因を CSS 仕様から読み解く – スクロールコンテナーと包含ブロック - Katashin .info katashin.info/posts/positi...

関数型プログラミング｜Katashin 641字

このあたりみんなどうやってるんだろう。

関数型プログラミング｜Katashin
sizu.me/ktsn/posts/o...

ハイブリッドアプリの WKWebView で Service Worker を使用する方法 - Katashin .info iOS の WKWebView 内で Service Worker を動作させるために必要な App-Bound Domains と WKWebView の設定方法を解説します。

ハイブリッドアプリの WKWebView で Service Worker を使用する方法 - Katashin .info katashin.info/posts/wkwebv...

あの実装パターン 今の CSS でこう書けますよ（Meguro.css #12） - Katashin .info Meguro.css #12 で行った LT のスライドです。

あの実装パターン 今の CSS でこう書けますよ（Meguro.css #12） - Katashin .info katashin.info/slides/patte...