Ana içeriğe geç
Web Geliştirme

Drawably el çizimi arayüz bileşenleri kütüphanesini tanıttı

Öne çıkanlar

  • Sıfır bağımlılığa sahip kütüphane, yaklaşık 9 KB boyutunda JavaScript kodu ile çalışıyor.
  • Bileşenler orijinal HTML etiketlerini koruduğu için klavye ve ekran okuyucu uyumluluğu bozulmuyor.
  • CSS tabanlı üç karelik çizgi döngüsü, her 1200 milisaniyede animasyonlu el çizimi etkisi veriyor.

Geliştiriciler için hazırlanan Drawably adlı açık kaynak kütüphane, el çizimi ve animasyonlu kullanıcı arayüzü bileşenleri sunmaya başladı. Sıfır harici bağımlılıkla çalışan araç, gzip sıkıştırmasıyla yaklaşık 9 KB JavaScript ve 3 KB CSS boyutuyla tarayıcılara yük getirmiyor. Proje, bileşenlerin her ekrana gelişinde rastgele tohum değerleri üzerinden yeni bir çizim katmanı üretiyor.

Sistem, düğmeler, onay kutuları, açılır menüler ve metin alanları gibi standart HTML öğelerini doğrudan DOM üzerinde tutarak çalışıyor. Çizim efektleri, erişilebilirlik standartlarını bozmamak adına form elemanlarının altına SVG formatında yerleştiriliyor. Bu sayede ekran okuyucular, klavye kontrolleri ve yerel etiketler işlevlerini kaybetmeden kullanılabiliyor.

Kütüphane ayrıca React çatısı için doğrudan sarmalayıcılar ve çizgi titreşimi animasyonları barındırıyor. Hareket azaltma tercihi açık olan kullanıcılarda animasyonlar otomatik olarak tek karelik sabit bir çizime sabitleniyor. İsteyen kullanıcılar için kütüphanenin kendi çizgi yapısıyla üretilen 31 KB boyutunda özel bir el yazısı yazı tipi de sunuluyor.

Kaynak

Bu özet yapay zekâ ile hazırlanmıştır; ayrıntılar ve doğrulama için orijinal kaynağa başvurun.