tarihinde Fatih Hayrioğlu

Büyük çaplı projelerde bir elemana çok fazla olay tanımı yapılıyor. Sonra bir hata yakalamak için uğraşırken o elemana tanımlanmış olayları bulmak zaman alıyor bazen çile oluyor. Ben daha önce Firebug kullanırken bu iş için jQuery olaylarını yakayan bir eklenti kullanıyordum. Bazen iş görse de çok iyi çalışmıyordu.

Chrome Dev Tools’da keşfettiğimden beri bu özelliği severek kullanıyorum. Aşağıdaki gibi bir eleman seçip Event Listeners sekmesini açınca (cmd+shift+p gelen panelde show Event Listeners) o elemana ve yukarıda doğru tüm elemanlara tanımlı olan olayları görüntüler.

tüm olaylar

Sadece seçtiğim eleman tanımlı olayları görmek istiyorum derseniz. Ancestors işaretini kaldırmanız yeterli.

sadece seçili elemanın olayları

Sadece elemana tanımlı olayı görüyoruz. Listelenen olayın solundaki oka basarak elemanı ve bu elemana tanımlı kodun hangi dosyada ve hangi satırda olduğunu görebiliriz.

jquery sorunu

jQuery kullanıyorsanız veya başka kütüphaneler içinde geçerli aynı durum size jQuery veya kullandığınız kütüphanenin olay tetikleyen kodunun yerini gösterir. Ancak bizim istediğimiz kendi kodumuzu bulmak. Bunun içinde Framework listeners işaret kutusunu işaretlememiz yeterlidir.

son olay listesi

Dosya ismi ve satır numarasını gösteren kısıma tıklayınca bizi aradığımız kod blokuna götürecektir.

kodu bulduk

Google Dev Tools ipuçları hakkında Umar Hansa‘nın sitesi güzel bir kaynak takip etmenizi öneririm.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Daha önce bu konuda bir makale yazmıştım. 100% Genişlik ve 100% Yükseklite Sayfa İskeleti Hazırlama bağlantısını tıklayarak makaleye erişebilirsiniz. Aynı yapıyı flex ile yapsam nasıl olur bir bakalım.

Bu yapının bize sağladıklarını listelersek.

  • Esnek iç alan ve sabit yan kolonlarımız var
  • Eşit kolon yüksekliğimiz var
  • Sticky footer özelliği var

Flex ile bu işi yapalım.

HTML kodu;

<header>Üst alan</header>
<div class="kapsayici">
  <main class="iceri-alani">There are many variations of passages of Lorem Ipsum available, but the majority...
  </main>
  <nav class="menu">Sol Menü</nav>
  <aside class="reklam">Sağ alan</aside>
</div>
<footer>Alt Alan</footer>

Flex ile sayfa dibine yapışık alt alanlar (sticky footer) yapmak yazısında gördüğümüz gibi orta alanın tam sayfayı kaplaması ve alt alanın dibe yapışması için:

body {
  display: flex;
  margin: 0;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}

.icerik-alani-kapsayici {
  display: flex;
  flex: 1;
}

Tanımlarını yapıyoruz.

Menü ve reklam alanlarını eşit kolonlu yapmak ve menü kısmını sol tarafa koymak için:

.icerik-alani {
  flex: 1;
}

.menu, .reklam {
  flex: 0 0 12em;
}

.menu {
  order: -1;
}

Uyumlu web kısmını ve mobili önceliklendirdiğimiz de şöyle bir kod ortaya çıkıyor.

.kapsayici {
		display: flex;
 	flex: 1 0 auto;
		flex-direction: column;
}

.menu {
 	order: -1;
 	background-color: #449fdc;
}

@media (min-width: 768px) {
  .kapsayici {
  	flex-direction: row;
  }
  .iceri-alani {
    flex: 1;
    padding: 20px;
    margin: 0;
  }
  .menu, .reklam {
    flex: 0 0 12em;
  }
}

Sonuç

Eski koda göre flex ile kodladığımız sayfanın eskiye göre çok fazla avantajı var.

  • Daha az kod
  • Daha sade kod
  • Uyumlu web desteği ve mobil önceliği
  • SEO açısından daha avantajlı kod

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

zingat.com listeleme sayfalarının mobil görünümünde kullandığımız Filtrele butonunun daha fazla dikkat çekmesi için bir animasyon uygulayalım diye karar verdik.

Animasyon olarak kalp atışı (pulse) şeklinde bir animasyona seçtik. Animasyon 3 kere tekrarlayacak ve bitecekti. İstek güzel hoş örnekleri de var. Yapalım dedik ve yaptık. Animasyon mantığı şöyle; Butona bir box-shadow tanımlayalım ve bu box-shadow‘u yayılan bir dalga gibi büyütelim.

Sonra bu animasyon 3 kere tekrar etsin dursun 5sn sonra tekrar 3 kere tekrar etsin isteği geldi. Aklıma çoklu animasyon desteği geldi. Aynı animasyonu çoklu olarak tanımlarsam olur dedim.

chrome devtools amination

İkinci animasyon tanımında ilk animasyon süresi ve 5sn ekleyip tanımlarsam gayet güzel ve temiz bir çözüm olur dedim. Bu arada Chrome DevTools’un Animation sekmesi bu konuda çok yardımcı oldu.

Yaptım oldu herşey ta ki Safari’de örneğe bakana kadar. Safari’de aynı isimde iki animasyonu ard arda çalıştırmıyor. Bunun için aynı animasyonu farklı isimle tekrar oluşturdum. Çok çakma bir çözüm ama benim işime yaradı.

Not: Ben başka bir sorun daha yaşadım ama tekrarlayamadığım için ve sadece zingat.com’da olduğu için buraya yazmadım. Animasyon normalde çalışmadı, javascript ile sayfa yüklendiğinde ilgili elemana bir sınıf tanımladım ve CSS’te bu sınıf varsa animasyonu uygula dedim.

Safari can sıkıyor.

Kalın sağlıcakla.

Kaynak