Katashin
LightNews LightNews
ktsn.dev
Katashin
@ktsn.dev
11 followers 13 following 35 posts
Posts Replies Media Videos
ktsn.dev
UI 大喜利用に作ったネタつまみが、タッチデバイスで触ると思った以上に気持ちいい
December 2, 2025 at 1:16 PM
ktsn.dev
この記事がわかりやすいかも。example コードの Vue コンポーネントをデモで使ってたり、[at]filename でファイル名つけて import してたりする。
katashin.info/posts/ios-me...
長押しドラッグを活用した iOS のポップオーバーメニューインタラクションを Vue.js で実装する - Katashin .info
長押しドラッグを用いて iOS のようなポップオーバーメニュー項目を選択するインタラクションの Vue.js を使った実装方法について解説しています。また、絵文字選択のポップアップの実装例を提供し、指が下側にずれていても選択できるようにする工夫についても触れています。
katashin.info
December 2, 2025 at 11:10 AM
ktsn.dev
そういえば某懇親会で話したけど、僕のブログは eleventy-plugin-code-demo を魔改造して、任意のコード変換を挟めるようにしたり、コードブロック間で ESModule の import ができるようにしてる。
github.com/ktsn/elevent...
GitHub - ktsn/eleventy-plugin-code-demo: Add interactive HTML/CSS/JS code demos to an Eleventy site using Markdown code blocks.
Add interactive HTML/CSS/JS code demos to an Eleventy site using Markdown code blocks. - ktsn/eleventy-plugin-code-demo
github.com
December 2, 2025 at 11:08 AM
ktsn.dev
「パワポみたいに画像を置ければいい」から始まった地獄（Web UI 実装勉強会 #2） #web_ui_devs - Katashin .info
katashin.info/slides/word-...
「パワポみたいに画像を置ければいい」から始まった地獄（Web UI 実装勉強会 #2） - Katashin .info
Web UI 実装勉強会 #2 で行った LT のスライドです。テキストエディターの中に画像を自由に配置できる実装をするため、色々な工夫をしたことについて話しました。
katashin.info
November 13, 2025 at 12:29 PM
ktsn.dev
今回の Web UI 実装勉強会、僕からは地獄の UI の話をお届けします
November 8, 2025 at 7:30 AM
ktsn.dev
型システムについて語る勉強会的なものやりたい
November 7, 2025 at 11:52 PM
ktsn.dev
型システム再入門してる
November 4, 2025 at 1:43 PM
ktsn.dev
「チューリング完全ユーザー」が使うことを前提にしてあいまいさを大事にするという考え方、目からウロコだった
baku89.com/turing-compl...
“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
October 30, 2025 at 1:54 PM
ktsn.dev
TypeScript に Algebraic Effects がほしい（Mita.ts #8） - Katashin .info katashin.info/slides/ts-al...
TypeScript に Algebraic Effects がほしい（Mita.ts #8） - Katashin .info
Mita.ts #8 で行った LT のスライドです。もし TypeScript に Algebraic Effects の構文があったらどうなるかの予想をし、Algebraic Effects を実装しているライブラリを紹介しています。
katashin.info
October 22, 2025 at 1:37 PM
ktsn.dev
全体的に explicit で比較的冗長なのも、裏を返せばソースコード上になにが起こってるか全部書いてあるというわけで、それが Context Engineering と相性がいいという感じなのかな
October 13, 2025 at 8:39 AM
ktsn.dev
Remix 3、今の時代に手動再描画は不便そうではあるけど、リアクティブシステムなどに依存しない描画の仕組みにして、状態管理やモジュール化から依存を排除したいモチベーションを感じられて、めっちゃ気持ちわかる～ってなってる
October 13, 2025 at 8:18 AM
ktsn.dev
Algebraic Effects and Handlers の実装に必要で限定継続について勉強してるのだけど、自分にとってまったく新しい概念でおもしろい
pllab.is.ocha.ac.jp/~asai/cw2011...
pllab.is.ocha.ac.jp
October 13, 2025 at 1:37 AM
ktsn.dev
background-clip を使った border へのグラデーション付与とか、animation-play-state を使ってホバー状態↔通常状態のアニメーション遷移を自然にするテクニックとか。勉強になった。
youtu.be/8NfafU1BgaY?...
2 reasons you should be using single color gradients in CSS
YouTube video by Kevin Powell
youtu.be
October 1, 2025 at 1:19 PM
ktsn.dev
Rust でプログラミング言語を作りはじめた｜Katashin
sizu.me/ktsn/posts/e...
Rust でプログラミング言語を作りはじめた｜Katashin
624字
sizu.me
September 18, 2025 at 12:11 PM
ktsn.dev
マイクロインタラクションに View Transition API を使おう！（Web UI 実装勉強会 #1） - Katashin .info katashin.info/slides/micro...
マイクロインタラクションに View Transition API を使おう！（Web UI 実装勉強会 #1） - Katashin .info
Web UI 実装勉強会 #1 で行った LT のスライドです。View Transition をページ全体ではなく一部に適用してマイクロインタラクションを実現する方法について発表しました。
katashin.info
September 8, 2025 at 11:56 PM
ktsn.dev
view-transition-name の値や view transition 関連の擬似クラスを Vue の scoped css みたいにグローバルで衝突しないようにしたいのだけど、似たようなことやってる人いないのだろうか。
September 6, 2025 at 8:18 AM
ktsn.dev
デザインにブレーキをかけないエンジニアの動き方（DIST.51） - Katashin .info katashin.info/slides/colla...
デザインにブレーキをかけないエンジニアの動き方（DIST.51） - Katashin .info
DIST.51 「モダンWebデザインワークフロー」で行った LT のスライドです。デザイナーにベストなアウトプットをしてもらうためにエンジニアとして心がけている動き方について話しました。
katashin.info
August 23, 2025 at 1:44 AM
ktsn.dev
Vue Fes Japan 2025 に参加します！
チケットを購入してネームカードを作成しよう！

vuefes.jp/2025/ticket/...

#vuefes
Katashinさんのネームカード
Vue Fes Japan 2025 のネームカードページです。チケットを購入して、あなたのネームカードを作成しましよう！
vuefes.jp
August 1, 2025 at 5:01 AM
ktsn.dev
UI の実装に関する勉強会をやりたい｜Katashin
sizu.me/ktsn/posts/t...
UI の実装に関する勉強会をやりたい｜Katashin
572字
sizu.me
July 23, 2025 at 3:33 PM
ktsn.dev
タッチデバイスで pointercancel イベントによるドラッグ中断を回避する方法 - Katashin .info katashin.info/posts/touch-...
タッチデバイスで pointercancel イベントによるドラッグ中断を回避する方法 - Katashin .info
実用的ですぐに開発に役立てることができる Web フロントエンドの話題を書いている Katashin の個人ブログです。
katashin.info
July 7, 2025 at 3:15 AM
ktsn.dev
Scope Hoisting + Code Splitting で実行順が変わるの意識したことなかったけど、確かにそこが維持されないのは問題になるのか
devongovett.me/blog/scope-h...
JavaScript scope hoisting is broken
Modern JavaScript bundlers commonly implement two optimizations: scope hoisting, and code splitting. In this post, I'll discuss how these are fundamentally at odds with each other.
devongovett.me
July 7, 2025 at 1:57 AM
Reposted by Katashin
ztrehagem.dev
喋りました
docs.google.com/presentation...
[2025-06-30] DPRと画像圧縮
DPRと 画像圧縮
docs.google.com
June 30, 2025 at 11:56 AM
ktsn.dev
JavaScript の暗黙の型変換とそれを制御するメソッド - Katashin .info katashin.info/posts/implic...
JavaScript の暗黙の型変換とそれを制御するメソッド - Katashin .info
JavaScript の暗黙の型変換の仕組みと、Symbol.toPrimitive、toString、valueOf を使った型変換のカスタマイズ方法を解説します。
katashin.info
July 1, 2025 at 1:07 AM
ktsn.dev
NoInfer 知らなかった。地味に使いそう。
typescriptbook.jp/reference/ty...
NoInfer<T> | TypeScript入門『サバイバルTypeScript』
型推論を防ぐ
typescriptbook.jp
June 25, 2025 at 11:44 PM
ktsn.dev
Skyline アルゴリズムで実現するグリッドを超えた柔軟なレイアウト - Katashin .info katashin.info/posts/skylin...
Skyline アルゴリズムで実現するグリッドを超えた柔軟なレイアウト - Katashin .info
CSS Grid や Flexbox では実現が難しい柔軟なレイアウトを、Skyline アルゴリズムで実装する方法を解説しています。さらに効率的で美しい配置のために、先読みと配置制約による拡張も提案しています。
katashin.info
June 23, 2025 at 1:20 AM