Vanilla JavaScript ile DOM manipülasyonuna tamamen hakim olmak

 (phuoc.ng)
6 puan yazan GN⁺ 2023-11-07 | 1 yorum | WhatsApp'ta paylaş
  • Bu yazı, vanilla JavaScript kullanarak Document Object Model (DOM) manipülasyonunda ustalaşmayı ele alıyor.
  • Angular, VueJS, React, Solid ve Svelte gibi modern araçların kullanımına rağmen, web geliştirme için tarayıcı DOM API’lerini anlamanın önemini vurguluyor.
  • Yazar; temel tarayıcı API’leri, anlaşılması kolay örnekler, canlı demolar, ipuçları ve en iyi uygulamalar, gerçek kullanım senaryoları ve modern tarayıcılarla Internet Explorer uyumluluğunu içeren bir kaynak derlemesi sunuyor.
  • Bu kaynaklar üç seviyeye ayrılıyor: temel, orta ve ileri.
  • Temel seviyede, kullanıcının renk şeması tercihine göre favicon’u dinamik olarak değiştirme, bir web sayfasının okuma süresini hesaplama ve CSS kök değişkenlerini dinamik olarak güncelleme gibi işler yer alıyor.
  • Orta seviyede, Shift+Tab tuş kombinasyonuyla bir metin alanındaki girintiyi kaldırma, tam ekran moduna geçme ve spin input oluşturma gibi konular bulunuyor.
  • İleri seviyede ise özel imleç oluşturma, HTML dizelerini sanitize etme ve özel kaydırma çubuğu oluşturma gibi çalışmalar var.
  • Yazar ayrıca, bir modal açıldığında düzenin kaymasını önleme ve metin düğümlerinin sınır dikdörtgenini alma gibi ipuçları da paylaşıyor.
  • Yazı, frontend teknik içerikleri üzerine yazarın bültenine abone olma davetiyle sona eriyor.

İlgili okumalar

1 yorum

 
GN⁺ 2023-11-07
Hacker News yorumları

  • Örnek listesi harika; yalnızca birkaçına göz atınca bile özen ve ayrıntı düzeyi şaşırtıcı geliyor
    React gibi platformlardan daha küçük ve minimal uygulamalara geçerken, standart JS ile karmaşık kalıpları nasıl ele alacağım konusunda sık sık takılıyorum; ama koda bakınca bazen “devasa bir kütüphaneye tonla özellik geçirmekten çok daha kolaymış” diye düşünüyorum

    • RiotJS’in 3-4 büyük güncellemesini yaşadıktan sonra benzer bir farkındalık kazandım
      Minimal JS framework’leri bile masum görünen özellik istekleri biriktikçe sonunda hook’lar, olaylar ve yan etki yamalarından oluşan bir canavara dönüşmeye yatkın
      Artık jQuery bile kullanmıyorum; ES modülleri gibi şeyleri kodu düzenlemek için kullanıyorum ama illa bir npm komutu çalıştırmam gerekmiyor. Bu, vendor olarak içeri çekilmesi gereken bir şey değil; tarayıcıda global bir standart
      Bugünlerde MDN’e kutsal kitap gibi bakıyorum. Güvenip izlerseniz sizi neredeyse sonuna kadar götürüyor; framework’ler ise bir noktadan sonra aksine ayağa dolanıyor. 5 yıl önce durum bu kadar iyi değildi ama tarayıcı API’leri modüller, flexbox ve grid gibi güçlü ve tutarlı temel öğelere hızla yakınsadı
    • Yazıdaki örnekler web istemci framework’leriyle rekabet eden şeyler değil. Framework’lerin çözdüğü genel sorun durum yönetimi ve durum değiştiğinde UI’ın güncellenmesidir
      Örneğin yazıdaki örneklerin çoğu, React kullansanız bile doğrudan yazmanız gereken koda daha yakın

  • Yan proje olarak henüz adı olmayan, “web tasarımcıları için vim” gibi bir şey yapıyorum. Webflow gibi tarayıcıda web sitesi ya da bileşen oluşturuyor, ama her şey komut dili ile çalışıyor
    Başta bunu framework olmadan yapmaya karar vermiştim. 2009’dan beri bu işi yapıyorum ve framework’lere dokunmadan önce de uzun süre JS yazdım; bu yüzden yerel DOM API’sinin yeterli olacağını düşünmüştüm
    Ama veriyi DOM’un içine ve dışına taşımak o kadar sıkıcı ve hataya açık hale geldi ki, akıl sağlığım için sonunda kendi mini framework’ümü yazmaya başladım. Ancak o zaman başta neden framework kullanmaya başladığımızı hatırladım. Sonuçta bir şekilde framework kullanıyorsunuz; fark yalnızca kendi yaptığınız özel bir şey mi, yoksa topluluğun yaptığı sektör standardı mı olduğu
    Etkileşimi az olan sitelerde yerel DOM gayet iyi; React kullanan sitelerin çoğunda aslında buna ihtiyaç olmayabilir. Ama üründe azıcık bile nüans ya da karmaşıklık varsa framework kullanıp angaryadan kaçınırım. Sonunda Svelte’e geçtim ve çok daha memnunum

    • Aşırı minimal projeler sonunda jquery’nin ya da lodash’in yarısını yeniden uygulamaya dönüşüyor. Tree shaking’i iyi olan ramda gibi iyi bir kütüphane bulup ölçülü kullanmak çok daha kolay
    • “Framework seçmezseniz, kendi framework’ünüzü yazarsınız” sözü tam isabet
    • Bu bir uygulama geliştirme örneği olduğu için, yalnızca açıklamadan bile DOM etkileşimini sarmalamanın daha iyi olacağı tahmin edilebilir
      Etkileşim gerektiren bir web sitesi söz konusuysa DOM manipülasyonu; daha temel ve evrensel bir teknik kullanması, derleme sürecinin hafif ya da hiç olmaması, hızlı çalışması ve açık olması nedeniyle daha iyi bir tercih olabilir
      Elbette çok sayıda gri alan var, ama bu örnek framework’ün avantajlı olduğu kategoriye tam oturuyor
    • Günümüzde SvelteKit SSR odaklı ve Svelte’in kendisinde varsayılan bir istemci tarafı router yok. CSR tek sayfa uygulamasında Svelte kullanmayı denedim ama vazgeçtim

  • Yalnızca value.startsWith('javascript:') kullanmak açık oluşturur. URL’nin başına rastgele boşluk gelebileceği için en azından value.trim().startsWith('javascript:') gerekir
    Yine de engelleme listesindense izin listesi daha iyi bence. Yalnızca http:, https: ve gerekirse mailto:, ftp:, sftp: gibi protokollere izin verip, / ile başlayan göreli URL’lere belki izin verilebilir
    Ancak gerçekten URL olabilecek tüm öznitelikleri doğru ele almak gerektiğinden, sonunda yalnızca birkaç etikete ve onların özniteliklerine izin veren bir yaklaşım daha iyi olur

  • Bilmekte fayda olan bir liste gibi görünüyor; hepsine bakmadım ama şu ana kadar iyi görünüyor
    İlk örneğe tıklayınca window.matchMedia('(prefers-color-scheme: dark)')’i gereksiz yere iki kez çalıştırdığını gördüm
    setFavicon bir olay dinleyicisi callback’i olarak kullanılacaksa, callback’e geçirilen event parametresindeki event.matches kullanılabilir
    Kişisel olarak bunu HTML tarafında halletmeyi tercih ederim. Çünkü JS’i kapalı olan kullanıcıları da destekler
    https://phuoc.ng/collection/html-dom/change-the-favicon-dyna...

    • HTML’de halletmek, diğer temaya ait içeriğin kısa süreliğine parlayıp görünmesini de önleyebilir. Aynı yaklaşım theme-color meta etiketine de uygulanabilir; ayrıntılara önem veren PWA geliştiricileri için pek kullanılmayan ama harika bir özellik

  • “textarea otomatik genişletme” tekniği, yeni CSS özelliği form-sizing nedeniyle eskimeye başlıyor
    https://chriscoyier.net/2023/09/29/css-solves-auto-expanding...
    Bu yeni CSS özelliğini kullanmasanız bile, öğenin height değerini ayarlama yöntemi ideal değil ve takılmalara yol açabilir
    Daha iyi yaklaşım, gizli bir ayna öğe kullanmak
    https://css-tricks.com/the-cleanest-trick-for-autogrowing-te...

  • Buradakilerden epeyce bir kısmı, daha iyi yerel API’ler varken eski ve hantal API’ler kullanıyor
    Örneğin “öğe değiştirme” ele.parentNode.replaceChild(newEle, ele); şeklinde verilmiş; ama Chrome 54 altı, Firefox 49 altı, Safari 10 altını hedeflemiyorsanız sadece ele.replaceWith(newEle) kullanabilirsiniz
    replaceWith, tek bir düğümü birden fazla düğümle ya da metinle değiştirmeye de olanak tanır
    Benzer şekilde “NodeList üzerinde dönme” için de diziyi açıp forEach kullanmayı söylüyor, ama sadece for (let ele of nodelist) ... yeterli

    • NodeList’in canlı bir nesne olabileceğini unutmamak gerekir. Üzerinde dönerken o listeyi değiştirirseniz beklenmedik sonuçlar çıkabilir

  • Güzel. Yer imlerine ekledim. Benzer çizgide iyi bir kaynak olarak https://youmightnotneedjquery.com/ da var
    Web işleriyle sık uğraşmıyorum, ama her uğraştığımda bu alandaki framework aşırılığı moralimi tamamen bozuyor. Yeni bir React projesinin yüzlerce bağımlılıkla başlaması kontrolden çıkmış durumda; bu karmaşıklığın ağırlığı şaşırtıcı
    Buna karşılık, yerleşik gelen çapraz platform tarayıcı teknolojileri her zamankinden güçlü ve yaygın işleri yapmak için gereken kod miktarı da o kadar fazla değil
    Frontend geliştiriciler, iyi misiniz?

    • React’i ya da npm’i hiç sevmiyorum, ama bazı framework’lerin saf DOM API’nin sunmadığı yararlı şeyler sağladığı için hâlâ bir yeri olduğunu düşünüyorum
      Örneğin uygulama durum yönetimi ve routing, yalnızca saf DOM API kullanırsanız kendiniz uygulamanız gereken büyük parçalar
      Uygulamanın karmaşıklığına göre çok mesele olmayabilir, ama temel bir uygulamanın ötesine geçtiğiniz anda bu ek özelliklerin değeri hızla artıyor. Yine de NPM gerektiren bir şey kullanıyorsanız işler baş ağrısına dönüşüyor
    • Aynı çizgide bir başka harika kaynak da müthiş https://javascript.info/
      Temel platformu ve sunduğu özellikleri seven bir frontend geliştiricisi olarak, iç içe CSS, container query’ler ve ES6 sonrası genel olarak iyileşen JS deneyimi gibi iyi şeylerin gelmesine seviniyorum
      Aynı zamanda düğme ya da kalın yazı gibi önemsiz şeyler için bile component kullanan bu kadar çok insan olmasına şaşırıyorum
      Framework’lerin kendisini seviyorum, ama birçok framework ve kütüphane pazarlaması; CSS ve saf DOM manipülasyonunun delicesine zor olduğu, NPM’den rastgele bir paket çekmenin ise yalnızca hızlı ve kolay değil aynı zamanda profesyonelce olduğu inancına dayanıyor
    • Kontrolden çıktığına katılıyorum. Ama son bir yılda platform ekibine geçip ilk kez DevOps tarafındaki araçlarla uğraşmaya başladım; oradaki karmaşıklık da frontend’den aşağı kalmıyor
      Sadece Kubernetes, Helm, Terraform, CircleCI gibi şeylere bakınca bile katman katman yığılmış terim miktarı saçma derecede fazla
    • “Güçlü çapraz platform teknolojileri” ile önemsiz olmayan bir iş yapıp yapmadığınızı merak ediyorum. Ayrıca React tek seçenek değil

  • Birçok DOM fonksiyonunun otomatik güncellenen live HTMLCollection döndürdüğünü öğrendiğimde gerçekten şaşırmıştım
    Framework furyasından önce ya da tekrar framework’süz geliştirme akımı biraz popülerlik kazanmadan önce/sonra, bu özelliğin gerçek production kodunda ne kadar etkin kullanıldığını merak ediyorum

  • Eski olan yeniden yeni oluyor. İlk frontend rolüm 1999’da web uygulaması geliştirmekti
    Treeview drag and drop, tıklayıp düzenleme, fiilen single-page app sayılabilecek havalı özelliklerin hepsini “Vanilla” JS ile yapmıştık
    En zor kısım Netscape ile Internet Explorer arasındaki farkları uzlaştırmaktı

    • Durumu ve durum değişikliklerini nasıl yönettiklerini merak ediyorum
      Neden artık böyle şeyleri yapmayı bilmiyormuşuz gibi görünüyor ;]

  • Son zamanlarda en sevdiğim saf JavaScript özelliği, Chrome 1.0 ve IE döneminden beri var olan Element.insertAdjacentHTML
    Özellikle backtick kullanılan çok satırlı string’lerle birlikte kullanıldığında “yararlı” demek az kalır. Bu kadar eskiden beri var olmasına rağmen ancak yaklaşık bir yıl önce öğrenmiş olmama inanamıyorum
    insertAdjacentHTML(position, text), verilen metni HTML ya da XML olarak ayrıştırır ve ortaya çıkan düğümleri DOM ağacında belirtilen konuma ekler
    Normalde yalnızca DOM ile li öğesi oluşturmanız, a öğesi oluşturmanız, onu çocuk olarak eklemeniz, href özelliğini ayarlamanız, metin değerini koymanız ve ardından ul içine eklemeniz gerekirdi. Ya da büyük bir string biriktirip innerHTML ile koymanız gerekirdi; mevcut listeyi değiştirmek ise daha da zahmetli ve laf kalabalığı olurdu

    1. https://developer.mozilla.org/en-US/docs/Web/API/Element/ins...