tarihinde Fatih Hayrioğlu

Learning React / Alex Banks, Eve Porcello Yaklaşık 1 senedir react öğreniyorum. Bu süreçte birçok kaynaktan yararlandım. Tabi en büyük yardımı sağolsun Erdal SATIK‘tan aldım.

Bu süreçte görsel ve yazılı birçok kaynaktan faydalandım ve faydalanıyorum, bunlardan aklımda kalan önemli iki tanesi:

Burada kitaptan biraz bahsedeyim. Kitap yeni React’a başlayanlar için bence çok iyi.

React’a başlamadan önce öğrenmemiz gereken ES6 ve fonksiyonel programlama hakkında detaylı ve güzel bölümleri mevcut. ES6 hakkında çoğu kaynak bilgi verirken fonksiyonel programlama hakkında bilgi vermiyor. Fonksiyonel programlama önemli bir konu ve öğrenilmeden geçilmemesi gerekiyor. Ayrıca arayüz geliştirici dünyasının önemli giriş araçları webpack ve babel hakkında bilgiler sunuyor. React ve redux bölümleri de çok güzel.

Kitabın ana başlıkları

  • Yükselen Javascript (ES6)
  • Javascript ile fonksiyonel programlama
  • Yalın React
  • JSX ile React
  • Hata ayıklama
  • Redux
  • Komponent kullanımı
  • Komponent yaşam döngüsü (lifecycle) metotları
  • Test yazma
  • React Router

şeklinde. Bu arada kitabın 2. baskısı çıkmış.

Kitabı işe gidip gelirken metroda iki kere okudum. Sizlere de tavsiye ederim.

tarihinde Fatih Hayrioğlu

CSS’te tüm özelliklere atanan 4 değer vardır. initial, inherit, unset ve revert. Burada bu değerlere değineceğiz. unset ‘ten bir önceki yazımda bahsettik. Yaptıkları iş aynı olsa da uygulandıklarında farklı davranış sergilerler. Yaptıkları iş atamaları geri almak. Amiyane tabirle geri vites.

Bu makaledeki değerleri anlamak için CSS’te değerlerin nasıl uygulandığını hatırlamak gerekiyor. Burada genel anlamıyla bir değerin nasıl uygulandığını anlatalım.

Bu konuyu 1. kitabımdaki 4.bölümünde bahsetmiştim. Belki ileride başka bir yazıda daha detaylı bir makale yazabiliriz bu konuda.

Basamaklı (cascade) yapı

CSS değerleri atandığında eğer bu tanım ve değer tek ise direk uygulanır ancak CSS tanımlarının çakışması durumunda çözümü sağlayan Basamaklı yapıdır (Cascade).

Örneğin font-size tanımı birden fazla css dosyasında veya bir dosya içinde birden fazla tanımlanmış olabilir.

CSS’e bu tanımlar 3 ana kaynaktan gelir.

  1. Geliştiricinin eklediği değerler. Kodu yazan geliştirici.

  2. Kullanıcının tarayıcı ayarlarında tanımladığı değerler. Tarayıcıyı kullanan son kullanıcı.

  3. Tarayıcının kabul ettiği bağlangıç değeri. Tarayıcı kabulleri

Basamaklı yapı bu üç kaynağı birleştirir. Aynı tanımların atandığı durumlar için önem, etkinlik ve sıralama ölçüsünü dikkate alarak sonuç değerini bulur ve uygular.

Son kullanıcının tarayıcı ayarlar kısmından yaptığı atamalar (2. nolu seçenek) genelde göz ardı edilir.

Aşağıda tanımlayacağımız değerler bu 2 kaynaktan gelen atamaları geri alamaya yöneliktir.

initial (başlangıç) değeri

initial değeri tarayıcıların atadığı başlangıç değerini ifade eder. Atandığı elemanın özelliğinin değerini tarayıcının belirlediği değere döndürür.

Tarayıcılar HTML elemanlarını yorumlarken belirli başlangıç değerleri kabul ederek yorumlarlar. User Agent Stilleri olarak adlandırılan bu özelliklere sonradan tanımlanan CSS özellikleri ezer. Her tarayıcının kendine özel UA Stillleri vardır. CSS3 ile gelen initial değeri ile başlangıç değerine döndürme imkanımız oluyor.

Örnekte görüldüğü gibi kapsayıcı div elemanına atanan kırmızı rengi ilk paragraf için initial değeri ile tarayıcının ilk kabul değerine(siyah) döndürülmüştür.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

inherit (kalıtsal) değeri

inherit değeri ebveyn elemanların alttaki elemanlara aktardığı değeri gösterir. Ebeveyn elemanda bir tanım yoksa revert gibi davranır. Atandığı elemanın özelliğinin değerini varsa ebeveyninde bulunan değere döndürür.

Kalıtsallığı kullanarak kodlarımızı azaltabiliriz. Ancak kalıtsallık nedeni ile de birçok sorunla karşılaştığımızı da unutmayalım.

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

unset (sıfırlama)

Bir önceki makalede yazdığımız gibi unset değeri atanan bir özellik eğer kalıtsal bir değer alıyorsa kalıtsal değerine döndürür, kalıtsal değeri yoksa başlangıç değerine döndüren bir kısayoldur.

Tarayıcı Desteği

Chrome explorer Firefox
+ - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
+ + +

revert (geri alma)

Bir elemana revert değeri atandığında geliştiricinin atadığı değerleri geri alır.

unset ile revert değerlerinin farkı: unset hem browser’ın hem de geliştiricinin atadığı değeri sıfırlarken, revert ise sadece geliştiricinin atamalarını sıfırlar.

not revert ve unset önceki atamaları siler ancak kalıtsallık aktiftir. Kalıtsallığı da etkisiz hale getirmek istiyorsanız. Bir elemana geliştiricinin atama yapmadığından eminseniz, ebebeynine initial ataması yapıp, eleman da revert tanımıyla bunu sağlayabilirsiniz.

Tarayıcı desteği konusunda initial, inherit ve unset iyiyken revert blink grubunun desteği olmadığı için düşük kalmış.

Tarayıcı Desteği

Chrome explorer Firefox
- - +

Mobil Tarayıcılar

Chrome Mobil Safari Samsung Internet
- + -

Šime Vidas‘ın yazısında ki çağrısını ben de burada tekrarlıyayım. Google bug sayfasındaki yıldıza bir tıklama da siz ekleyin.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

HTML elementlerinin farklı tarayıcı ve ortamlardaki davranışlarını ortak hale getirmek için genelde reset css kodları kullanırız. meyer, normalizer vs.

Aslında bu listelerde yapılan belirtilen elemanların değerlerini bilinen ortak değer ataması yapmaktır.

CSS all: unset tanımıyla birlikte bir seçicinin tüm değerlerinin tarayıcının belirlediği başlangıç değerine veya kalıtsal değerine döndürmek çok kolay. Bu özellik aslında reset css ile yaptığımızı yapıyor. unicode-bidi ve direction hariç tarayıcıların belirlediği değerlere döndüren bir özellik. Bu özellik inherit ve initial‘ın birlikte kullanılmış halidir. Eğer kalıtsal bir değer alıyorsa kalıtsal değerine döndüren, kalıtsal değeri yoksa başlangıç değerine döndüren bir kısayoldur. CSS Değişkenlerine de etki etmez.

unset değeri tanımlanmış değerleri ve etkinlikleri (Specificity) daha düşük olan değerleri başlangıç değerine döndürür.

.dunya { color: red; font-size: 44px; margin: 40px;}
.turkiye { font-size: 32px; color: blue; }
.button { border: 3px solid red; background: yellow; font-size: 40px; color: pink; padding: 40px; display: block; }
.deneme { all: unset; color: pink; }

HTML kodu

<div class="dunya">
  <p class="turkiye">
    <span class="istanbul">
      <strong class="pendik">
        <button class="deneme button">Deneme</button>
      </strong>
    </span>
  </p>
</div>

Sonuç aşağıdaki gibi olacaktır.

Farklı tanımlardan etkilenmiş button ögesi all:unset ile sıfırlanmıştır. Tek satır kod ile bunu yapabilmek çok güzel.

İyi planlanmamış projelerde bazen bir elemana uygulanan atamaları sıfırlamak gerekiyor, bu gibi durumlar için çok süper özellik. Gönül ister ki projeler başta daha iyi planlansın ve bu tip ihtiyaçlar olmasın ama gerçek böyle olmuyor maalesef.

Firefox geliştirme aracında çok güzel bir gösterme şekli var. all:unset ile değişen ve değiştiremediği (örnek color) değerleri gösteriyor.

all unset

all özelliği bunun dışında initial, inherit ve revert değerleri alır. Bu değerler ve farklarını da başka bir makale yazsak iyi olur.

Kalın sağlıcakla.

Kaynaklar