Çalıştığım projede(vault.live) animated.css kütüphanesi kullanılıyor. Bir sorun ile kaşılaştık. animasyon uygulanan kutularda açılan menüler diğer kutuların altında kalıyordu.

Bir arama sonucu stackoverflow.com’da cevabını buldum.

.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

animation-fill-mode‘un forwards değeri ve bu değeri kapsayan both değerlerinin tanımlandığı durumlarda sorun oluyor. initial olarak tanımlamak sorunu giderdi.

.animated {
	animation-duration: 1s;
	animation-fill-mode: initial;
}

Benzer bir sorunla karşılaşırsanız aklınızda oldun.

Sağlıcakla kalın.

Kaynak

• https://stackoverflow.com/a/39495529/296373

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

+	-	+

Mobil Tarayıcılar

+	+	6+

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

Kalın sağlıcakla.

Kaynaklar

• https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
• https://gomakethings.com/a-native-vanilla-javascript-way-to-get-the-closest-matching-parent-element/
• https://gomakethings.com/checking-event-target-selectors-with-event-bubbling-in-vanilla-javascript/

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.

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

• https://asciinema.org/a/37390
• https://github.com/zsh-users/zsh-autosuggestions
• https://medium.com/@cengizhanc/mac-i%C3%A7in-zsh-ve-oh-my-zsh-kurulumu-51b70b09945f
• https://github.com/oskarkrawczyk/honukai-iterm-zsh