HN Tanıtımı: Tarayıcıda %100 uygulanan HTMX Playground

HTMX Playground

• HTMX Playground, HTMX kullanarak basit bir kod sandbox ortamında denemeler yapabileceğiniz bir araçtır.
• Ek bir kurulum gerektirmeden hemen kullanılabilir ve doğrudan htmx.org örneklerinden alınmış demoları inceleyebilirsiniz.
• Tarayıcı içinde backend benzeri bir ortamda kod yazabilir, server.js içinde endpoint'ler tanımlayabilir ve kendi şablonlarınızı render edebilirsiniz.
• HTMX'ten çıkan istekleri yakalayan sahte bir sunucu çalıştırır ve Django kullananlara tanıdık gelecek istek işleme ile şablon motoru sunar.
• Bu proje yalnızca HTMX ile sınırlı değildir; başka kütüphaneleri de rahatça deneyebilirsiniz.

Kaydetme ve paylaşma

• Sağ üstteki "Copy as JSON" düğmesine basarak JSON biçiminde kopyalayabilirsiniz.
• Kopyaladığınız içeriği Gist'e yükleyip "Load Playground" alanına raw URL'yi girerseniz, o sayfanın URL'si güncellenir ve paylaşabilirsiniz.
• Kod GitHub üzerinden de kullanılabilir.

Dikkat edilmesi gerekenler

• Sayfa navigasyonu özelliği yoktur.
• Mobil destek sınırlıdır.
• server.js durum tutabilir; ancak on.get("/") görünümünde durumu güncellerseniz, ilk sayfa yüklemesinde ayrı bir iframe üzerinden getirildiği için durum güncellemesi kaybolabilir.

Kullanılan kütüphaneler

• Svelte
• Ace (kod editörü)
• PollyJS (sahte sunucu)
• Nunjucks (şablon motoru)

GN⁺'un görüşü

• HTMX Playground, web geliştiricilerinin HTMX kullanarak etkileşimli web uygulamalarını hızlıca prototiplemesi için yararlı bir araçtır.
• Django gibi backend framework'lerine aşina geliştiricilerin kolayca yaklaşabileceği bir ortam sunarak, frontend ve backend geliştirme deneyimini birleştirmeye yardımcı olur.
• Bu araç, kodu kolayca kaydetme ve paylaşma imkanı sunduğu için iş birliği veya eğitim amaçları açısından da oldukça faydalı olabilir.

[GN⁺]

Hacker News yorumları

• htmx yaratıcısından teşekkür mesajı

  • htmx yaratıcısı: htmx'i yapan kişiden bir teşekkür mesajı iletiliyor. Kendi projesine gösterilen ilgi ve kullanımın çok teşvik edici olduğunu ifade ediyor.

• htmx kullanımıyla ilgili endişeler ve sorular

  • Geliştirici havuzu endişesi: Bir kullanıcı htmx kullanmayı düşünmüş, ancak geliştirici havuzunun küçük olması nedeniyle işe alımda zorlanmış. Özel framework'lere aşina uzman frontend geliştiricileri işe almanın, uzman full-stack geliştiriciler bulmaktan daha kolay olduğu deneyimini paylaşıyor. Geliştiricilerin karmaşık kodlarla uğraşmaktan kaçındığını ve backend geliştiricinin darboğaz haline gelmesini istemediğini söylüyor. htmx'in bu sorunun farkında olup olmadığını ve bunu nasıl çözmeyi planladığını soruyor.

• htmx ve mobil uygulama desteği üzerine düşünceler

  • Mobil uygulama desteği: htmx yaklaşımını sevdiğini ve ilgili kitabı okumaya başladığını, ancak mobil uygulama desteği gerektiğinde frontend ve backend'i büyük ölçüde yeniden yazmak gerekeceğini düşünerek tereddüt ettiğini söylüyor. hyperview.org'u bildiğini, ancak ilgilendiği kullanım senaryoları için react-native uygulamasının uygun olmadığını belirtiyor.

• Editör seçimi ve hata çıktısı hakkında görüşler

  • Editör ve hata çıktısı: Bir kullanıcı mobil desteğin sınırlı olduğuna dikkat çekerek Ace Editor yerine Monaco Editor kullanılması gerektiğini savunuyor. Ancak Monaco'nun mobilde bilerek çalışmadığı, bu yüzden Ace kullanıldığı açıklanıyor. Bunun için GitHub issue bağlantısı da dayanak olarak gösteriliyor.

• htmx ve Django'yu birlikte kullanma deneyimi

  • htmx ve Django kullanımı: Bir kullanıcı maplibre, Django ve htmx'i birlikte kullandığını, başkalarıyla paylaşmak için bir örnek yayımlamayı planladığını söylüyor.

• htmx kullanım deneyimi ve geri bildirim

  • htmx kullanımı ve geri bildirim: Bir kullanıcı htmx'i işte kullandığını ve iyi çalıştığını söylüyor. İleride de kullanmayı planlıyor, ancak PHP tabanlı bir sürüm de yapabilir. JSON'u URL yükleme alanına yapıştırırken birkaç kez çalışmasının kaybolduğunu ve ağ istekleri tarayıcısını temizleyememe sorununu (bir özellik isteği) yaşadığını paylaşıyor.

• Teknik destek hakkında soru

  • ActiveX desteği: Bir kullanıcı htmx'in ActiveX'i destekleyip desteklemediğini soruyor.

• Geliştirme aracı seçimi üzerine alaycı bir yorum

  • Svelte kullanımı: Bir kullanıcı htmx'in Svelte ile mi yapıldığını soruyor. MPA (Multi-Page Application) safçılarının nerede olduğunu ve buna nasıl tepki vereceklerini merak eden alaycı bir yorum yapıyor.

• Çevrimdışı uygulama geliştirmeye dair merak

  • Çevrimdışı uygulama geliştirme: Bir kullanıcı, htmx ve HTML ile istek-yanıt yaklaşımını kullanarak çevrimdışı uygulama yapıp service worker içinde sanal sunucu tanımlayan biri olup olmadığını merak ediyor.

• Web sitesi açıklamasındaki yazım hatasına dikkat çekme

  • Yazım hatası uyarısı: Bir kullanıcı web sitesinin ana sayfasındaki açıklamada yazım hatası olduğunu belirtiyor. "intersepts" yerine "intercepts" yazılması gerektiğini söylüyor.