Başlığa bakınca sanki bir aile olayına dair bir yazı geçecek anlamı çıkarmayın. HTML’deki elemanların birbiriyle olan ilişkilerini anlatmak için soyağacı benzetmesi yaparız ve birçok yerde kullanırız. Ebeveyn, çocuk, kardeş seçicileri gibi. Bu yazımın konusunda CSS’in seçicileri ile ilgili olacaktır.

CSS ile aynı seviyedeki elemanların ilişkilerini kullanarak bazı seçme işleri yaparız. Bu durumlar için iki adet seçicimiz vardır. Bitişik kardeş seçicisi (+) artı işareti ile kullandığımız ve genel kardeş seçicisi (~) tilda işareti ile kullandığımız. Gayet kullanışlı seçiciler olan bu kardeş kökenli seçicilerimizin bir sorunu var. Sorunu yine soyağacı benzetmemiz üzerinden tanımlarsak, büyük kardeşe erişememe sorunumuz vardır. Belirlediğimiz bir elemanın öncesindeki kardeşi seçecek bir CSS seçicisi yoktur. Sorunu anladığımıza göre benim bu sorunu tekrar hatırlamama neden olan durumu da açıklayayım size.

zingat.com kutular

zingat.com anasayfasındaki büyük resmin üzerindeki gri kutuların hepsi gri yani pasif görünüyordu. Üzerine gelince büyüyor, rengi değişiyor. Yeni istek ise, ilki aktif gözüksün, diğerlerinin üzerine gelince ilki pasif olsun. İş küçük bir iş gibi görünse de ilk olarak aklıma CSS ile bunu yapmanın imkanı yok javascript ile yapmak lazım dedim. Sonra işi flex ve order yardımı ile yapabileceğim fikri aklıma geldi ve bu yazı ortaya çıktı.

Mantık şöyle; CSS önceki elemana erişemiyorsa bende ilk elemanı sona atarım ve CSS ile işimi çözerim.

flex tanımlı bir kapsayıcı içindeki kutuları order ile sona atarsam artık CSS ile erişilebilir hale getirmiş oluyorum. Kod örneği aşağıdaki gibi.

Belki sizin de işinize yarar.

Kalın sağlıcakla.

CSS ile birlikte çok fazla medya kontrolünü kullanıyoruz.

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
}

Peki bu kontrolleri javascript tarafında nasıl yaparız diye araştırınca window.matchMedia ile karşılaştım. Bildiğimiz CSS medya kulanımının aynısını yapabiliyoruz.

var ms = window.matchMedia("SORGU");

SORGU yazan kısma CSS’de yazdığımız kısmı birebir yazıp kontrol edebiliyoruz.

var ms = window.matchMedia("screen and (min-width:720px)");

Sonra kontrolümüzü yapalım.

if (ms.matches) {
  // ekran genişliği en az 720px
} else {
  // ekran genişliği 720px den büyük olanlar.
}

Tarayıcı desteğinin %100’e yakın olması da ayrı bi güzellik.

Kaynaklar

Arayüz geliştiriciler için yeniliklerin takibi çok önemlidir. Yeniliklerin takibi içinde İngilizce önemlidir. İngilizce seviyeniz yeniliklerin takibinde belirleyici etkendir. Bu işe yeni başlayan bir çok insanda bu sorunlara neden oluyor.

Google Çeviri hizmeti daha önce çok iyi sonuçlar vermiyordu. Genelde İngilizce - Türkçe sözlük için kullanıyorduk. Yenilenen Google Çeviri hizmeti artık daha iyi sonuçlar veriyor. Google’un Nöral Makine Çevirisi olarak tanımladığı yeni çeviri hizmeti gayet anlaşılır sonuçlar veriyor.

Nöral sistem, bütün cümleleri birer birer çevirmek yerine bir defada çevirerek bu kapsamlı içeriği, en yakın çeviriyi bulabilmek için uygun bir dilbilgisi ile insan konuşmasına benzer şekilde yeniden ayarlıyor. Böylece her cümleyi anlamak daha kolay olduğundan çevrilmiş paragraflar ve makalelerin okunması çok daha kolay hale geliyor.

Benim açımdan çok güzel bir gelişme. Okuma hızımın yavaş olması nedeni ile bazı makaleler tarayıcımın bir sekmesinde haftalarca bekliyordu. Artık Google Çeviri sayesinde daha hızlı okuyarak bu sorunu azaltmış oldum.

Bir örnek vereyim.

“Of course, there’s real value in using widely-adopted design patterns. If a symbol like the hamburger icon is familiar to your users because they’ve used it elsewhere, it can lower the barrier of entry, and make your navigation more intuitive to them. And that’s not something we should devalue lightly: the familiarity of an element can be a powerful benefit, both to our sites and to our audiences. However, we shouldn’t evaluate the utility of design patterns on their ubiquity alone. Patterns are, after all, just patterns: they’re not rules or defaults. In fact, there are some rather novel alternative navigation patterns out there. Let’s take a look at a few of them.” - Responsive design patterns principles

Eski çeviri “Tabii ki, çok benimsenen tasarım kalıplarını kullanarak gerçek değer var. onlar başka bir yerde kullandım çünkü hamburger simgesi gibi bir sembol kullanıcılarının aşina ise, giriş bariyer düşük ve onlara navigasyon daha sezgisel yapabilirsiniz. Ve biz hafifçe devalüasyon gereken bir şey değil: Bir elemanın aşinalık güçlü bir yararı olabilir, bizim sitelere ve kitlelere hem. Ancak, yalnız kendi aynı anda her yerde tasarım desenleri yararını değerlendirmek gerekir. Desenler sadece desen, tüm sonra,: bunlar kurallar veya varsayılan değiliz. Aslında, orada bazı oldukça yeni bir alternatif navigasyon desenler vardır. onlardan bir kaç bir göz atalım.”

Yeni çeviri “Elbette, yaygın olarak benimsenen tasarım kalıplarının kullanılmasında gerçek bir değer var. Hamburger simgesi gibi bir simge, kullanıcılarınıza başka yerlerde kullandıklarından dolayı tanıdıklarsa, giriş engelini azaltabilir ve gezinmeyi daha sezgisel yapabilirsiniz. Bu hafifçe devalüasyon yapmamız gereken bir şey değildir: Bir unsurun aşinalık olması hem sitelerimize hem de izleyicilerimize güçlü bir fayda sağlayabilir. Bununla birlikte, tasarım modellerinin tek başına her yerde kullanımını değerlendirmemeliyiz. Sonuçta, kalıplar sadece kalıplardır: kurallar veya varsayılanlar değildir. Aslında, orada oldukça yeni alternatif gezinti modelleri var. Şimdi bunlardan birkaçına bir göz atalım.”

Gayet başarılı bence. Ayrıca kendini geliştme özelliği sayesinde ileride mükemmele yakın çeviriler alacağımızı ümit ediyorum.

Tek sıkıntı 5000 karakter limiti olması. Ben Chrome’un translate eklentisini kullanıyorum. Normalde tooltip ile hızlıca çeviriye erişme imkanı tanısa da 5000 karakterden sonrası için sağ üstteki eklenti ikonunu tıklamamı istiyor. Umarım ilerde bu sınır kaldırılır.

Kalın sağlıcakla.

Kaynaklar

Daha öncede birkaç kere aynı soru ile karşılaştım.

Soru: Çıktı alırken web sitemin belirlediğim yerden sayfalara ayrılması için ne yapabilirim?

CSS ile bunun çözümü kolay. Örneğin tablolardan oluşan bir web sayfanız var. Çıktı alırken bu tabloların ortadan bölünmesini istemiyoruz. Belirlediğimiz yerde sayfanın sonu gelsin istiyoruz.

Aşağıdaki gibi bir sayfamız olsun.

enter image description here

Bu sayfanın çıktısı almak istediğimizde

enter image description here

İki tabloyu çıktı alırken ayırsak iyi olur.

@media all {
  .page-break { display: none; }
}

@media print {
  .page-break { display: block; page-break-before: always; }
}

Sayfayı bölmek istediğimiz yere

<div class="page-break"></div>

ekliyoruz. Sonuç

enter image description here

Benzer mantıkla çıktı alırken sayfalama ayrımı yapabiliriz.

Kalın sağlıcakla.

Kaynaklar

Son zamanalarda ismini çok fazla duyduğum ve nispeten daha fazla Türkçe bilgi bulduğum bir kütüphane Vuejs.

Hızlı gelişen javascript dünyasında her sene bir kütüphane popülerleşiyor. Backbone.js, Angularjs, React derken VueJs geldi. Takip etmesi zor süreçler. Ben sağolsun Murat Çorlu’nun sayesinde sahibinden.com’da Angularjs ile bir tecrübe yaşamıştım. Angularjs ile daha sonra ufak tefek projelerim oldu. Ancak bir türlü Angularjs 2’ye adapte olamadım. React’ın her şeyi javascript’te halletme yapısı nedeni ile ısınamadım. Ancak VueJs’de Angularjs’deki o ilk an görünce beni kendine çeken yazım kolaylığı ve yetenekli özellikleri dikatimi çekti.

VueJs’de AngularJs’in tersine daha fazla Türkçe kaynak bulmak sevindirici. Hele Fatih Acet’in video’ları efsane. Emeğine sağlık.

Bulduğum Türkçe Kaynakları paylaşayım.

Benim gördüklerim.

Ben de vuejs ile bir proje yaparsam deneyimlerimi burada paylaşırım.

Kalın sağlıcakla.