closest() metodu seçtiğimiz elemanın belirttiğimiz seçici kuralına göre en yakın olan ebeveynini (kendisi de bu kontrole dahildir) bulur ve bize döner. Eğer bulamazsa null değeri döner.

<ul>
    <li>Üst Menü
        <ul>
	        <li class="urunler">
		        <a href='#' class='selected'>Ürün 1</a>
		    </li>
	        <li class="urunler">
		        <a href='#'>Ürün 2</a>
		    </li>
        </ul>
    </li>
</ul>

selected sınıfı tanımlı bir bağlatının DOM sıralamasına göre yukarıya doğru ilk ul elemanını yakalamak gibi bir amacımız olsun.

Bunun için closest öncesi şöyle bir iş yapıyorduk.

const seciliEleman = document.querySelector('.selected');

seciliEleman.parentNode.parentNode.classList.add('hayde');

closest sonrası ise çok basit:

const seciliEleman = document.querySelector('.selected');

seciliEleman.closest('ul').classList.add('hayde');

Eski yöntemde daha yukarılarda bir eleman yakalamak istediğimizde iş çığırından çıkıyordu. Bazı durumlarda dinamik oluşan yerlerde yakalayacağımız elemanın hangi seviyede olduğuda belli değilse çık işin içinden. closest bu konuda çok büyük rahatlık getirdi.

Ebeveyn bulmanın dışında closest’ı tıklanan elemanın belirlediğimiz seçiciyle uyumlu bir eleman veya içindeki herhangi bir eleman olup olmadığını kontrol etmek için de kullanabiliriz.

if (!event.target.closest('.adamim')) return;

Tıkladığımız eleman adamim sınıflı elemansa işine devam edecektir.

jQuery’den kurtulmayı kolaylaştıran metotlardan birini daha öğrenmiş olduk.

Tarayıcı desteği konusunda gayet iyi noktada.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + 6+

Eğer hala IE11 desteğini dert ediyorsanız aşağıdaki linklerde Polyfill kodu var.

Kalın sağlıcakla.

Kaynaklar

Yeni işe başlayınca tüm ihtiyaçlarını tekrar kurmak gibi bir iş çıkıyor. Tabi yeni şirketin ihtiyaçlarını kurmakta gerekiyor derken bir yenilenme yaşıyor insan. Bu arada şunu fark ettim ki ben iterm’i güzelleştiren ve geliştiren oh-my-zsh kurulumunu ve sonra terminali güzelleştirme ve yeteneklerini arttırma konusunda buraya çok birşey yazmamışım. Tabi böyle olunca yaptıklarımı yeniden keşfetmek zorunda kalıyorum. Neyse hemen konuya geçeyim.

En azından Cengizhan kardeş “Mac için Zsh ve Oh My Zsh kurulumu” adlı bir makale yazmışta beni işin o kısmından kurtardı. Ben üzerine özel yazı tipi ekleme, tema ve otomatik tamamlama eklentisini kurmayı anlatacağım.

Terminalin yazı tipini değiştirmek

Daha önce bahsetmiştim. Sublime Text ve terminalde Adobe’un geliştirdiği ve ücretsiz olarak yayınladığı özel yazı tipi Source Code Pro‘yu kullanıyorum. Hemen işe koyulalım.

  1. https://www.fontsquirrel.com/fonts/source-code-pro adresinden yazı tipini indirebilirsiniz.

  2. Daha sonra terminali (iTerm) açıp Preferences > Profiles > Text sekmesini açın.

  3. Change Font butonuna tıklayıp bilgisayarınıza indirdiğiniz Source Code Pro Regular yazı tipi seçip sonrada yazı boyutunu 16pt (benim gözler bozuldu siz kendinize göre ayarlayın :) seçip kapatın.

İlk adım tamam.

Terminalin temasını değiştirmek

Bir sonraki adım terminalin (iTerm) temasını değiştirmek. Ben Sublime Text’te kullandığım temayı (Monakai) beğendiğim için terminale de yakın bir tema (honukai) yüklemeyi tercih ettim. https://github.com/oskarkrawczyk/honukai-iterm-zsh Dosyaları buradan indirin.

Sırasıyla

  1. Github’dan indirdiğiniz kalsördeki honukai.zsh-theme dosyasını ~/.oh-my-zsh/custom/themes/kalsörüne atın.

  2. oh-my-zsh’a bu temayı artık kullan demek için. ~/.zshrc dosyasını editörde açıp ZSH_THEME ksımını bulup ZSH_THEME="honukai"şeklinde değiştirin.

  3. Sekmeyi kapatıp tekrar açın tamam.

Renkleri değiştirmek için

  1. iTerm Preferences > Profiles sekmesini açın.

  2. Alttaki renkler açılır menüsünden import seçip yukarıda indirdiğimiz dosyadaki honukai.itermcolorsseçin.

Bu kadar. Son görünüm aşağıdaki gibi olmalıdır.

Honukai Tema Görüntüsü

Ben burada kendi göz zevkime göre bir tema yükledim siz isterseniz internette bulabileceğiniz farklı seçenekleri aynı yolu izleyerek yükleyebilirsiniz.

Terminale otomatik tamamlama eklentisi yükleme

Termina ile çok iş yapınca bazı eklentiler çok iş görüyor. Bunlardan bir tanesi Doğan kardeşin kullandığı zsh-autosuggestions eklentisi. Bu eklenti daha önce yazdığınız komutlardan beslenen bir otomatik tamamlama eklentisi. Çok iş görüyor.

Kurulumu

1- cd ~/.zsh ile zsh kalsörüne geçip

git clone https://github.com/zsh-users/zsh-autosuggestions.git

adresinden dosyaları kopyalayalım.

2- Sonra terminale

source ~/.zsh/zsh-autosuggestions/zsh-autosuggestions.zsh

yazıp aktifleştirelim.

Sonra istediğinizi yazın.

https://asciinema.org/a/37390 Adresindeki video daha güzel gösteriyor nasıl kullanıldığını.

Şimdilik bu kadar. Tema yüklerken normal indir / kopyala / yapıştır yöntemini kullandık. Otomatik tamamlama da ise git clone ile indirme yöntemi kullandık. Farklı seçenekler her zaman elimiz güçlendirir.

Kalın sağlıcakla.

Kaynaklar

İBeyond jQuery - Nicholus, Ray jQuery’den kurtulup normal javascript ile kod yazmak için yola çıktığımda kaynak yönünden çok fazla sorun yaşamasam da bu kitap herşeyi derli toplu bir arada sunması bakımından güzel bir kaynak.

Kitap jQuery kullanan ve normal javascript’e geçmek isteyenler için güzel bir kaynak.

Her bölümde işin jQuery ile nasıl yapıldığını gösteriyor sonra normal javascript ile bunun nasıl yapılacağını gösteriyor. Kullanılan yöntemlerin tarayıcı deteği konusunda IE8’a kadar çözümlerini sunuyor.

Kitap bir bakıma normal javascript’e geçişte nasıl bir düzen kuracağımızı da gösteriyor bize. Örneğin bazı çok kullanılan metotlar için normal karşılığı çok yeterli değilse yardımcı bir foksiyon ile bu metotları jQuery kolaylığına getirmemizi gösteriyor.

Normal javascript’e geçişteki sorunlarınıza çözüm olacak bir kitap.

Benim gördüğüm bir iki eksiği var. İlki kitap benim aldığımda (daha doğrusu şirkete aldırdığımda 40$ idi. Şimdi indirimde 24$) pahalı geldi. Türkiye için ciddi bir ücret e-kitabını alacaktım sonra şirketin kitap alım bütçesinden yararlanarak aldık.

İkincisi biz şirkete kitabı aldığımızda IE11’e destek veriyorduk, kitap ise IE9 hatta IE8 desteğine göre konulara çözüm sunduğu için bazı konularda daha güncel çözümler aramak durmunda kaldık.

Üçüncü sorun kitabın basılı halindeki yazı tipi, yazı boyutu ve satır aralıkları rahatsız edici geldi bana. Gerçi Apress’in tüm kitapları aynı sayfa planında galiba. Benim hoşuma gitmedi.

https://www.apress.com/br/book/9781484222348