Reaktif HTML Notebook

 (maxbo.me)
1 puan yazan GN⁺ 2024-11-19 | 1 yorum | WhatsApp'ta paylaş

  • Duyarlı HTML notebook

    • HTML’i bilimsel yayıncılık platformu olarak kullanmanın önemini vurguluyor.
    • HTML dosyalarının veri keşfi, analiz, görselleştirme ve yayınlamanın tüm aşamalarında kullanılabilme olasılığını ortaya koyuyor.
    • Mevcut farklı araç ve platformları kullanmak yerine, HTML üzerinden birleşik bir iş akışı sunulabiliyor.

  • Hücreler

    • CSS sınıfı echo kullanılarak stil ve betik öğelerinin satır içinde nasıl gösterileceğini açıklıyor.
    • contenteditable niteliği kullanılarak temel bir kod düzenleyici oluşturuluyor.
    • Betiklerin blur olayında yeniden değerlendirilmesi sağlanıyor.

  • Observable kütüphanesi ve runtime

    • Observable standart kütüphanesi ve runtime içe aktarılıp window’a bağlanıyor.
    • cell fonksiyonu üzerinden hücreler tanımlanıyor ve Observable Inspector ile hücre çıktıları gösteriliyor.

  • Hücre örnekleri

    • counter hücresi tanımlanarak her saniye bir sayı çıktılanıyor.
    • fizzbuzz hücresi oluşturularak counter değerine göre farklı çıktılar üretiliyor.
    • silent fonksiyonu kullanılarak çıktıyı göstermeyen hücreler oluşturuluyor.

  • Karmaşık çıktılar

    • Hypertext Literal kullanılarak counter değeri biçimlendiriliyor.
    • Observable Plot kullanılarak counter değeri bir grafikte kullanılıyor.

  • TeX, Markdown, Graphviz

    • Hücrelerin DOM öğeleri döndürmesiyle farklı formatlarda çıktılar üretiliyor.
    • TeX, Markdown ve Graphviz kullanılarak formüller, tablolar ve grafikler oluşturuluyor.

  • Hücre durumu

    • Hücreler Promise veya Error döndürebiliyor; Observable Inspector da hücrenin dış div öğesine sınıflar uyguluyor.

  • SQLite

    • WASM tabanlı SQLite istemcisi kullanılarak veritabanı sorguları çalıştırılıyor.
    • SQL sorguları üzerinden parça uzunluğu dağılımı görselleştiriliyor.

  • Python ve R

    • Pyodide ve WebR kullanılarak Python ve R kodu çalıştırılıyor, görselleştirmeler üretiliyor.
    • Python’un sqlite3 modülü ve Matplotlib kullanılarak grafikler oluşturuluyor.

  • Girdi

    • Observable Inputs kullanılarak girdiler oluşturuluyor ve hücrelere bağlanıyor.
    • viewof fonksiyonu ile girdi öğeleri hücrenin üzerinde gösteriliyor.

  • Değiştirilebilirlik

    • mutable fonksiyonu kullanılarak durumu değiştirilebilen nesneler oluşturuluyor.
    • Durum her değiştiğinde yeni bir Generator değeri üretiliyor.

  • Gelecek planları

    • Tüm içeriğin bir kütüphanede birleştirilmesi ve uygun dokümantasyon sağlanması planlanıyor.
    • Kütüphanenin adı @celine/celine olarak belirlenmiş.

  • Slayt altyapısı

    • Belgeyi slayt gösterisine dönüştüren kod sunuluyor.
    • Klavye kısayolları kullanılarak slaytlar arasında gezilebiliyor.

İlgili okumalar

1 yorum

 
GN⁺ 2024-11-19
Hacker News görüşleri

  • HTML’in hesaplama not defterleri için harika bir temel olabileceğini söyleyen yazıya katılıyorum. Ancak uygulama biçimini beğenmedim. Observable hoş, ama standart JS’nin dışına çıkıyor. HTML şablonları ve custom element’lere dayanan Heximal adlı reaktif bir HTML sistemi geliştiriyorum.

    • Heximal, HTMX, Tangle, Curvenote ve Polymer karışımı gibi. Grafik düzenleme ve not defteri kullanım senaryolarına iyi uyacaktır.

  • Bu yaklaşımın kullanılabilirliğinin berbat olduğunu düşünüyorum. Keşifsel veri analizi yaparken stil öğeleriyle uğraşmak için bir neden yok. Jupyter not defterlerinin bu kadar iyi olmasının sebebi de bu. Yine de merak ve alternatif fikirlerin hayata geçirilmesine saygı duyuyorum.

  • Python ve SQLite demosu özellikle etkileyiciydi. Web üzerinden düzenleme döngüsünü başlatmış olmaları ilginç. Kalıcılık sorunu TiddlyWiki’ye benziyor ve dosya sistemi kullanılarak bundan kaçınılabilir. Gömülü script içinden export yapılamaması iyileştirilmeli.

  • Yakında Raku’da HTML not defteri desteği sağlamayı deneyeceğim. Şu anda Raku’nun not defteri çözümleri Jupyter veya Mathematica tabanlı.

  • Bu gönderinin formatını beğendim. Çok sayıda bağımlılık ve framework olmadan ilginç sonuçlara ulaşıyor. Verilen kod parçalarını kopyalayıp adım adım anlayabiliyorsunuz. Blog yazıları hazırlamak için literate programming kullanıp HTML’e export edeceğim.

  • Reaktif HTML deniyor ama neredeyse tamamen JavaScript gibi görünüyor.

  • pyodide düzenlemeyi denedim, ancak telefonda çöktü ve sayfa yeniden yüklendi.

  • Yazar soru almaya hazır.

  • Raku kod örnekleri barındırıyor ve literate programming için benzer bir şey kurmaya çalışıyorum. Jupyter Chatbooks için bir Raku eklentisi var, ancak Python gerektirmesi doğal gelmiyor. Sunucu tarafı kod kullanarak uzak dil çekirdeklerine bağlanabilen bir mesaj katmanı olsa güzel olurdu.

  • Windows XP dinozor imleci birçok anıyı geri getirdi.