- HTML, JavaScript ve CSS’yi tek bir dosyada birleştirip çalıştıran HTML tools üretme deneyimine dayanarak tekrar eden tasarım kalıpları derleniyor
- 2 yıl içinde 150’den fazla üretilen küçük araçların gerçekte nasıl yapıldığı ve sürdürüldüğü somut örnekler üzerinden anlatılıyor
- Derleme adımı olmayan yapı ve CDN kullanımı sayesinde kopyala-yapıştır tabanlı geliştirme akışı doğal biçimde oluşuyor
- URL,
localStorage, dosya açma, indirme, Pyodide ve WebAssembly’ye kadar yalnızca tarayıcı özellikleriyle mümkün olan alan genişliyor
- Promptlar ve sonuç kayıtları ile mevcut araçların yeniden birleştirilmesi sayesinde araç koleksiyonunun bizzat geliştirme temeli haline geldiği akış güçleniyor
HTML tools kavramı ve örnekler
HTML tool’un temel yapısı
- JavaScript ve CSS’nin inline olarak gömülü olduğu tek bir HTML dosyası yapısı
- JSX derleme adımı gerektiren React kullanılmadığı için kopyalama ve yeniden dağıtım basitleşiyor
- Gerekli kütüphaneler CDNjs veya jsDelivr gibi CDN’lerden doğrudan yükleniyor ve bağımlılıklar minimumda tutuluyor
- Kod boyutu birkaç yüz satır seviyesinde tutularak bakım yükü azaltılıyor; LLM’in hızlıca okuyup düzenleyebileceği bir yapı korunuyor
Canvas ve Artifacts tabanlı prototipleme
- ChatGPT Canvas, Claude Artifacts ve Gemini Canvas kullanılarak HTML aracının anında çalıştırılıp ilk formunun çıkarılması yaklaşımı
- “No React” koşulu eklenerek derleme adımı olmadan hemen çalışan kod üretiliyor
- JSON yapıştırıldığında YAML’a dönüştüren örnek
Daha karmaşık hale gelince kodlama ajanına geçiş
- Claude Code veya Codex CLI kullanıldığında Playwright gibi araçlarla tarayıcı testleri içeren tekrar eden işler otomatikleştirilebiliyor
- Daha karmaşık araçlarda (ör. Bluesky başlık görüntüleyicisi) bu tür ajanlara “yükseltme” yaklaşımı kullanılıyor
- Aracı eklemek veya güncellemek için doğrudan simonw/tools deposuna PR oluşturuluyor
- Web tabanlı ajanlarla çalışma süreci Claude Code for web kullanım videosunda görülebilir
CDN tabanlı bağımlılık yönetimi
- Ek kütüphaneler kullanılacaksa CDN üzerinden yükleniyor
- LLM’in Artifacts/Canvas ortamlarının izin verdiği bir CDN allow-list bulunduğundan, “PDF.js kullan” gibi bir talimat URL yapılandırmasını oluşturabiliyor
- Gerekirse cdnjs veya jsDelivr üzerinde URL bulunup sohbete yapıştırılıyor
- npm kurulumu veya derleme süreci olmadan her şey tek bir HTML dosyasıyla çalışıyor
- npm + build step yaklaşımı, tek tek araçları hızlıca hack’leme ve self-host etme verimliliğini düşürüyor
- CDN URL’lerine sürüm bilgisi dahil edildiği için uzun vadeli yeniden üretilebilirlik korunuyor
Harici statik barındırma
- LLM platformlarının kendi iç barındırması sandbox kısıtları nedeniyle dış URL verilerini/görsellerini yüklemeyi veya dış bağlantı özelliklerini engelleyebiliyor
- Kullanıcı deneyimi açısından uyarı mesajları, ek yükleme adımları veya platform tanıtımları araya girebiliyor
- “No React + CDN” birleşimi sayesinde build olmadan neredeyse her yere yüklemek kolaylaşıyor
- HTML dosyası GitHub Pages’e yüklenirse sabit bir URL üzerinden hemen erişilebiliyor
- Araçların çoğu simonw/tools deposunda yönetiliyor ve tools.simonwillison.net üzerinden sunuluyor
Kopyala-yapıştır merkezli giriş/çıkış
- Birçok araçta yapıştırılan girdiyi dönüştürüp sonucu yeniden panoya kopyalama yaklaşımı temel mekanizma olarak kullanılıyor
- Mobilde kopyala-yapıştır zor olduğu için sık sık “Copy to clipboard” düğmesi ekleniyor
- İşletim sistemi panosu birden fazla formatı birlikte taşıyabiliyor ve JavaScript
paste olayı üzerinden bu tür “zengin” verilere erişmek mümkün
- Temsilî araçlar
Hata ayıklama araçları
- Tarayıcıda işlenen gerçek veri yapılarını incelemek için özel araçlar üretiliyor
- clipboard-viewer: Metin, zengin metin, görsel ve dosya dahil tüm pano verisini gösterir
- Ek araçlar
Durumu URL’de saklamak
- Sunucu veritabanı olmadan da URL içinde oldukça fazla durum saklanabiliyor
- Yer imi ve paylaşım odaklı araçlarda bu kalıp tercih ediliyor
- icon-editor: 24×24 ikon düzenleme durumunu doğrudan URL içinde korur
localStorage kullanımı
localStorage, veriyi kullanıcının cihazında kalıcı olarak saklayan ve sunucuya açığa çıkarmayan bir tarayıcı API’sidir- URL’ye sığdırılması zor büyük durumlar veya API anahtarı gibi gizli değerler burada tutulur; amaç statik host sunucu loglarına sızma riskinden kaçınmaktır
- word-counter: Yazılmakta olan metni otomatik kaydeder
- render-markdown: Markdown yazarken içeriği korur
- haiku: API anahtarını
localStorage içinde tutup webcam görseline göre haiku üretir
CORS’a açık API’lerden yararlanmak
- CORS (Cross-origin resource sharing), başka bir alan adındaki API’lerin tarayıcı JavaScript’i tarafından çağrılıp çağrılamayacağını kontrol eden mekanizmadır
- CORS başlıkları açık API’ler HTML tools için çok elverişli kaynaklardır; zamanla böyle bir listenin biriktirilmesi değerlidir
- iNaturalist, PyPI, GitHub (açık depo içeriklerine
raw.githubusercontent.com üzerinden anonim erişim mümkün), Bluesky ve Mastodon gibi servisler kullanılıyor
- Araç örnekleri
LLM API’lerini doğrudan çağırmak
- OpenAI, Anthropic ve Gemini JSON API’leri tarayıcıdan CORS üzerinden doğrudan çağrılabiliyor
- API anahtarı HTML içine gömülürse ele geçirilme ve ücretlendirme riski doğduğundan,
localStorage içinde saklanan bir “secrets kalıbı” kullanılıyor
- Kullanıcı deneyimi açısından API anahtarı alma ve yapıştırma süreci sürtünmeli olsa da işe yarıyor
- Örnek araçlar
Dosya açmaktan çekinmemek
<input type="file"> ile dosyayı sunucuya yüklemeden de doğrudan tarayıcıda okuyup kullanmak mümkün- ocr: PDF.js ve Tesseract.js kullanarak PDF’yi sayfa görsellerine dönüştürür ve tarayıcı içinde OCR çalıştırır
- social-media-cropper: Görsel açtıktan/yapıştırdıktan sonra sosyal medya oranlarına göre (ör. Twitter/LinkedIn 2:1, Substack 1.4:1 vb.) kırpma sağlar
- ffmpeg-crop: Video kırpma için ffmpeg komutu üretir
İndirilebilir dosya sunmak
- Sunucu olmadan da tarayıcı içinde dosya üretip indirilebilir hale getirmek mümkün
- JavaScript ekosisteminde çok sayıda format üretim kütüphanesi bulunuyor
- Örnek araçlar
- svg-render: SVG’yi render edip PNG/JPEG indirilebilir çıktısı sunar
- social-media-cropper: Kırpılmış görselin indirilmesini sağlar
- open-sauce-2025: Program oluşturur ve takvime eklenebilecek ICS dosyasını indirilebilir olarak sunar
Pyodide ve WebAssembly
- Pyodide, Python’u WebAssembly’ye derleyip tarayıcıda çalıştıran bir dağıtımdır
- CDN üzerinden temiz biçimde yüklenebildiği için HTML tools içinde kullanmamak için neden yok
micropip aracılığıyla CORS üzerinden PyPI’daki saf Python paketleri ek olarak yüklenebiliyor- Araç örnekleri
WebAssembly ile daha da genişletmek
- Pyodide’ın mümkün olmasını sağlayan temel teknoloji WebAssembly’dir; başka dillerle yazılmış yazılımlar da böylece tarayıcıda yüklenebilir hale gelir
- Squoosh.app, çeşitli görsel sıkıştırma kütüphanelerini tarayıcı içinde sunar
- Araç örnekleri
Önceki araçları yeniden birleştirmek
- Tek bir açık koleksiyonda 100’den fazla araç bulunmasının başka bir avantajı, LLM’in bu araçları kolayca yeniden birleştirebilmesi
- Bazen eski araç doğrudan bağlama kopyalanıyor; bazen de kodlama ajanında adıyla referans veriliyor veya örnek aratılıyor
- Çalışan araçların kaynak kodu, düzenleme kütüphanelerini kullanma kalıplarını da içeren bir belge işlevi görüyor ve LLM’in başarı olasılığını artırıyor
- pypi-changelog’un üretim sürecinin tam kaydı: prompt transkripti
- Promptta önce “pypi package explorer” aracına bakması söyleniyor; ardından zip-wheel-explorer kaynağını okuyup PyPI API’sinden wheel alarak sürümler arası diff render eden ve Copy düğmesi sunan yeni bir araç üretmesi isteniyor
- Tarayıcıda OCR çalıştırma yazısı da ayrıca incelenebilir
Prompt ve transkript kayıtları
- LLM kullanım kayıtlarını saklama ve yayımlama alışkanlığı, kişinin kendi kullanım becerisini geliştirmesine yardımcı olabilir
- Sohbet tabanlı LLM platformlarında üretilen araçlarda share özelliği kayıt yöntemi olarak kullanılıyor
- Claude Code veya Codex CLI gibi ajanlar kullanıldığında, terminalin tamamı kopyalanıp terminal-to-html ile HTML loguna dönüştürülüyor ve Gist olarak paylaşılıyor
- Tamamlanan araç depoya kaydedilirken commit mesajına transkript bağlantısı ekleniyor - kayıt arşivi: tools.simonwillison.net/colophon
Sonuç
- Son bir buçuk yılda bu yöntemle LLM’ler ve HTML araçları üzerine yapılan keşif süreci oldukça keyifli olmuş; HTML ile nelerin yapılabildiğini ve LLM yeteneklerini anlamaya ciddi katkı sağlamış
- Kendi araç koleksiyonunu başlatmak için bir GitHub deposu açıp GitHub Pages’i etkinleştirerek
.html dosyalarını kopyalayıp bırakmak yeterli
- Bonus olarak Claude Code ve shot-scraper kullanılarak bu yazının ekran görüntülerinin eklendiği transkript bağlantısı da paylaşılıyor
3 yorum
HTML kalıpları
İlginç görünüyor.
Harika görünüyor.