Harmanlama kipleri (blend-mode) grafik işleme araçlarına aşina olanların bildiği bir özelliktir. İki farklı resmi veya yazıyı farklı filtreler ile harmanlayıp güzel tasarım sonuçları çıkaran bir yöntemdir. Bu yöntemi artık CSS ile yapabiliyoruz. CSS’in filter‘dan sonra blend-mode özelliği ile iyice grafik işlerini bünyesinde topladı. Harmanlama kiplerini iki farklı özellik ile uygulayabiliriz.

• background-blend-mode
• mix-blend-mode

background-blend-mode

background-blend-mode özelliği, bir öğeye tanımlanmış ardalan resminin(background-image) ardalan rengiyle(background-color) nasıl harmanlanacağını tanımlar. Grafik işleme araçlarıyla çalışanların aşina olduğu bir resim harmanlama işlemidir. Hemen bir örnek yapalım.

Yukarıdaki örnekte bir katmana atanmış ardalan resim ve ardalan rengi birbiriyle screen blend-mode‘u ile birleştirilmiş ve sonuç alınmıştır.

Yapısı : background-blend-mode: [ deger ]
Aldığı Değerler : normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
Başlangıç değeri: normal
Uygulanabilen elementler: Tüm elementler
Kalıtsallık: Yok

CSS’de 16 çeşit harmanlama kipi vardır. Tek tek aldığı değerleri tanımlamak yerine yukarıdaki örnek üzerinde her birini deneyimlemek daha anlaşılır olacaktır.

Not: Her bir resimde bu değerler farklı sonuçlar verecektir.

Çoklu ardalan resmine blend-mode uygulamak

Yukarıdaki uygulamalar ardalan resmi ile ardalan rengi arasında harmanlama yapıyor. Peki iki resmi birbiriyle harmanlamak mümkünmü? Çoklu ardalan kullanımı sayesinde bu da mümkün. Çoklu ardalan resmi eklediğimiz bir alanda harmanlama yapalım.

Bu özellik ile birçok farklı sonuçlar almak mümkündür. https://codepen.io/search/pens?q=blend-mode örneklerini incelemenizi öneririm.

mix-blend-mode özelliği ile iki elementin harmanlanması

background-blend-mode ile sadece ardalan resmi ile işlem yapabiliyoruz. mix-blend-mode özelliği ile ise herhangi bir HTML elementi ile başka bir HTMlL elementini harmanlama yapabiliyoruz. Bu kullanıma örnek olarak resim üzerine konulan yazıları harmanlama örneklerini gösterebiliriz.

Bir örnek yapalım.

Bİr resmimiz olsun ve bu resmin üzerinde absolute ile çıkardığımız bir metnimiz olduğunu düşünelim. Resim ile metni harmanladığımızda sonuç aşağıdaki gibi olur.

Bir çok farklı efektler elde edilebilir. codepen.io sitesindeki örnekler güzel. İncelemeye değer.

video örneği çok güzel. https://codepen.io/dudleystorey/pen/wavpGe

Tarayıcı Desteği

+	-	+

Mobil Tarayıcılar

+	+	+

Kalın sağlıcakla.

Kaynaklar

• https://css-tricks.com/almanac/properties/b/background-blend-mode/
• https://www.sarasoueidan.com/blog/compositing-and-blending-in-css/
• https://css-tricks.com/basics-css-blend-modes/
• https://www.webdesignerdepot.com/2014/07/15-css-blend-modes-that-will-supercharge-your-images/
• https://getflywheel.com/layout/css-blend-modes/
• https://tympanus.net/codrops/css_reference/background-blend-mode/
• https://code.tutsplus.com/tutorials/editing-images-in-css-blend-modes–cms-26058
• https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
• https://webmaster.kitchen/css-de-goruntu-duzenleme-blend-modes/
• http://thenewcode.com/1020/HTML5-Video-Effects-with-CSS-Blend-Modes

Arayüz geliştiricileri (Front-end) dünyası çok hızlı bir şekilde güncelleniyor. Her gün birçok kütüphane ve araç çıkıyor ve bazıları kendilerini sonlandırıyor. Arayüz geliştiriciler için bu yeniliklerin takibi önemli bir konu. Kendini güncel tutmak için yenilikleri takip etmek olmazsa olmaz. Çıkan yenilikleri çalışma hayatımızı kolaylaştıran yenilikler, bunlardan haberdar olmak bizim iş yükümüzü azaltıyor. Aynı şekilde eskiyen ve yayından kalkan kütüphane ve araçları sistemimizden kaldırmak ve güncellemek bizim için bir görev.

npm WARN deprecated bower@1.8.2: ...psst! 
Your project can stop working at any moment because its dependencies can change. 
Prevent this by migrating to Yarn: 
https://bower.io/blog/2017/how-to-migrate-away-from-bower/

zingat.com‘da middleware olarak nodejs kullanıldığı için client olarak tanımlanan tarafta için iki tane paket yöneticimiz vardı. npm (yarn) ve bower. Bower geliştirmeyi sonlandırdıktan sonra acaba tüm paketleri yarn’a mı geçirsek diye ara sıra konuşuyorduk. Sonra Doğan ile birikte bir gün kaldıralım bu bower’ı ne olacak dedik ve işe giriştik.

Bazı paketlerde sıkıntı yaşasakta bower kaldırma işlemi beklediğimizden daha kolay geçti.

İlk olarak bower.json dosyasındaki bağımlılıkları npm’e taşıdık.

"dependencies": {
  "bootstrap": "3.3.1",
  "highcharts": "4.1.10",
  "jquery": "1.11.2",
  "jsUri": "1.3.0",
  "bootstrap-select": "1.12.1",
  "jquery.tablesorter": "2.18.4",
  "lodash": "4.15.0",
  "jquery-validation": "1.13.1",
  "jquery-mask-plugin": "1.14.0",
  "bootbox": "4.4.0",
  "moment": "2.9.0",
  "numeral": "1.5.3",
  "notifyjs": "jpillora/notifyjs#0.3.2",
  "jquery.cookie": "1.4.1",
  "jquery-ui": "1.11.4",
  "jquery-touchswipe": "1.6.18",
  "slick-carousel": "1.6.0",
  "df-visible": "1.2.0",
  "moment-timezone": "0.5.4",
  "async": "2.0.1",
  "DOMPurify": "dompurify#0.8.4",
  "nouislider": "9.2.0",
  "Watch.JS": "watch#1.3.1",
  "multiple-circular-player":"0.0.2",
  "jquery-lazy": "1.7.5"
}

sonra nodejs ile ön tarafta kullandığımız kütüphaneleri bu listeden sildik. lodash, moment, numeral vs.

Sonra bower_component, node_modules klasörü ve .bowerrc ve bower.json dosyalarını sildik. Ayrıca zingat.com yayına alma süreçlerindeki bazı kısımlardan da sildik.

yarn cache clean

ve

yarn

diyerek tüm bağımlılıklarımızı yükledik. Burada bower’dan taşıdığımız bazı kütüphaneler uyarı verdi. Belirttiğimiz sürümlerin yerine daha yeni sürümleri var diye. Bazı bağımlılıkları da bulamadı. yarn’ın bulamadığı kütüphaneleri https://yarnpkg.com/lang/en/ sitesinden aradık. Bazılarının isimleri npm’de farklılık gösterdiği için yükleyememişti. Yeni isimlerini package.json‘a ekledik ve komut satırından yarn komutu çalıştırdık.

Sıra geldi bu kütüphaneleri koda ekleyen grunt-concat yürütücüsünde bower_component geçen yerleri düzelttik.

Sonra kendi bilgisayarımızda projeyi ayağa kaldırdığımız da bazı scriptlerin çalışmadığını gördük. Çalışmayan kütüphaneler ismini değiştirdiğimiz kütüphanelerdi, bunları yeni node_module‘deki karşılıkları ile değiştirdik.

İşlem bitti.

Bunların dışında sitenin yayına çıkma süreçlerinde bazı düzenleme işleri çıktı. Site iyi bir testten geçtikten sonra bower’sız bir şekilde yayına çıktı.

Bower’ı o kadar kullandık ama artık zamanı geçti. Ne diyelim “Toprağı bol olsun” diyelim. :)

Kaynaklar

• https://bower.io/blog/
• https://gofore.com/stop-using-bower/
• https://medium.com/netscape/bye-bye-bower-or-how-to-migrate-from-bower-to-npm-and-webpack-4eb2e1121a50

DOM (Belge Nesnesi Modeli) HTML ile javascript’i birbirine bağlar. DOM, HTML dokümanındaki tüm elamanları ağaç yapısı mantığıyla nesneye çevirir ve javascript’in erişebileceği hale getirir. Böylelikle dinamik olarak HTML elemanına ekleme, çıkarma ve biçimini değiştirme imkanı elde etmiş oluruz.

HTML’in yapısını etiketler (tag), attribute (öznitelik) ve elemanlar oluşturur.

Bir HTML belgesinin temel yapısı, içeriğini saran ve ona bir anlam katan etiketlerden oluşur. Örneğin <body> bir etikettir. Etiketler ek bilgi parçaları olan özniteliklere (attribute) sahip olabilirler. Örneğin <body id="anasayfa"> Öznitelikler iki bölümden oluşur. Öznitelik adı ve değeri. Elemanlar web sayfasını oluşturan bölümlerdir.

Bu temel bilgileri verdikten sonra asıl konumuza gelelim.

Biz bu makalede HTML öznteliklerini ve tarayıcıların yorumlaması sonucu oluşan DOM özelliklerine değineceğiz.

HTML Öznitelikleri (attributes) ve DOM özellikleri (property)

Tarayıcılar HTML dokümanını tararken DOM nesneleri oluşturur. HTML öznitelikleri bu nesnelerin özellikleri olur. Örneğin <body id="Haydaa"> tanımının DOM’daki karşılığı document.body.id dır.

HTML dokümanındaki tüm elemanlar, etiketler ve öznitelikler bu şekilde DOM nesnelerine çevrilir.

Standart öznitelikler bu şekilde DOM özelliklerine çevrilir. HTML’de standart dışı öznitelikler de tanımlanabilir. Örneğin <body id="Haydaa" sampiyon="Trabzon"> gibi bir tanım yapmak mümkündür. Ancak bu öznitelikler tarayıcı tarafından DOM özelliklerine dönüştürülmez.

document.body.sampiyon;

gibi bir kod bize undefined sonucu dönecektir.

Bir etiket için standart olan öznitelik başka bir etiket için standart olmayabilir. Örneğin <input type="text"> input için type standart iken body etiketine atanan type standart değildir.

Peki standart dışı özniteliklere javascript’ten nasıl erişeceğiz?

Bunun için hazır metotlar mevcut.

• elem.hasAttribute(name) – varlığını kontrol et.
• elem.getAttribute(name) – değerini al.
• elem.setAttribute(name, value) – değer tanımla.
• elem.removeAttribute(name) – özniteliği sil.

Örneğin yukarıdaki sampiyon tanımına erişmek için;

document.body.getAttribute('sampiyon');

bize Trabzon sonucu dönecektir.

Ayrıca elem.attributes ile de erişebiliriz. elem.attributes kodu bize tüm öznitelikleri adı ve değeri olan bir nesne koleksiyonu olarak dönecektir.

DOM Özelliği - HTML Özniteliği senkrenizasyonu

Standart bir HTML özniteliği değiştiğinde, ilgili DOM özelliği otomatik olarak güncellenir. Burada bazı istisnalar var. Sırası gelince değineceğiz.

Aşağıdaki örnekte, id bir HTML özniteliği değiştirilmiştir ve DOM özelliği de değişmiştir. Benzer şekilde DOM özelliği değiştirildiğinde HTML özniteliği değişti.

<input>

<script>
  var input = document.querySelector('input');

  input.setAttribute('id', '123');
  alert(input.id); // 123 (güncellendi)

  input.id = '456';
  alert(input.getAttribute('id')); // 456 (güncellendi)
</script>

Ancak, farklı durumlar vardır, örneğin input.value HTML özniteliği değiştirildiğinde DOM özelliği değişir, ancak DOM özelliği değiştirildiğinde HTML öznteliği güncellenmez.

var input = document.querySelector('input');

input.setAttribute('value', 'çay');
alert(input.value); // çay

// Burada değişmez
input.value = 'kahve';
alert(input.getAttribute('value')); // çay (güncellenmedi!)

Bu dikkat edilmesi gereken bir durum.

Başka bir durum, HTML özniteliği göreceli bir URL veya yalnızca #hash içerse bile, href DOM özelliği her zaman tam bir URL döner.

Örneğin:

<a id="siteLink" href="#merhaba">link</a>
<script>
  // HTML özniteliği
  alert(a.getAttribute('href')); // #merhaba

  // DOM özelliği
  alert(a.href ); // tam URL http://site.com/page#merhaba
</script>

Sonuç

jQuery’den kurtulmak için giriştiğim yolda bu tip farklılıkların olduğunu öğreniyorum. Eskiden jQuery’de sadece attr() metodu vardı. Sonra prop() metodu da eklendi. jQuery topluluğu ilk önce prop‘un attr‘nin yerini aldığını söyledi. Ancak yukarıdaki fark sebebi ile hatalarını anlayıp her iki metodu da koruma yoluna gittiler. Yukarıda anlattığım farkı jQuery ile biz attr() ve prop() metodu ile uyguluyoruz.

Ben bu ve benzer durumlarda jQuery’nin javascript gerçeklerini tam anlamama engel olduğunu düşünüyorum. Bu durum da hatalar ile karşılaştığımızda saatlerce hatta günlerce zaman kaybetmemize neden oluyor. Bu bile tek başına jQuery’den vazgeçme sebebi olur.

Kalın sağlıcakla.

Kaynaklar

• https://javascript.info/dom-attributes-and-properties#dom-properties-are-typed
• https://plainjs.com/javascript/attributes/
• http://jquery-howto.blogspot.com.tr/2011/06/html-difference-between-attribute-and.html
• https://stackoverflow.com/questions/16051491/difference-between-prop-and-attr-in-jquery-and-when-to-use-attr-and-prop
• http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/
• https://johnresig.com/blog/jquery-16-and-attr/