Kod yazarken mümkün olduğu kadar hatasız kod üretmek isteriz. Ancak bu işin kaçınılmaz sonucudur hatalar. Hatasız kod olmaz. Amaç en az hata çıkaracak kod yazmak ve bunu sağlayacak süreçleri oturtmaktır.

Bu süreçlerin ilk başı kodu yazarken hataları ayıklamaktan geçer. Bunun için yazılan kod parçalarına linter, yapılan işe linting denir. Türkçe tam karşılığını bulamadım. Biz size burada Sublime Text’e linter nasıl kurulur ve çalıştırılır onu göstereceğiz.

Linter nedir?

Linter, kodu stil veya programlama hataları için kontrol eden küçük programcıklardır. JavaScript, CSS, HTML, Python vb. gibi birçok dil için kullanılabilir. Örnek olarak ESlint, JSLint, CSSLint, JSHint, Pylint verilebilir.

Biçimlendirme tutarsızlıklarını, kodlama standartlarını, belirli kuralları ve bazı mantıksal hataları düzeltmek için linter kullanılır.

Sublime Text’e Linter eklenmesi

Sublime Text’e linter eklemek için SublimeLinter kurmak gerekiyor. SublimeLinter; linter kütüphanelerini Sublime Text üzerinde çalıştırmamızı sağlayan anaçatıdır.

SublimeLinter’ı Sublime Text Paket Kontrol (Package Control) yardımıyla kolayca kurabiliriz.

  • Komut penceresini açalım (cmd+shift+p Mac OS, ctrl+shift+p Linux/Windows).
  • install yazın gelen listeden listeden Package Control: Install Package seçin. Tıkladıktan sonra tepki süresi 2-3 saniyeyi bulabilir.
  • Kullanılabilir paket listesinden SublimeLinter seçin.
  • Birkaç saniye sonra yükleme işlemi başlayacak ve Sublimelinter yüklenecektir.
  • Yüklendi mesajı geldikten sonra Sublime Text’i kapatıp açın.

Linter eklentileri eklemek

SublimeLinter ekledikten sonra sıra linter eklentilerini eklemeye geldi. SublimeLinter’ın desteklediği linter eklentileri listesine https://github.com/SublimeLinter bu bağlantıdan erişebilirisiniz. Bunların dışında bir çok eklentiye Sublime Text paket yöneticisinden erişebilirsiniz.

Ben bu makalede size javascript hatalarını yaklamak için kullanılan ESLint eklentisinin kurulumunu ve çalışmasını göstereeceğim. Javascript hatalarını yakalamak için birden fazla lint eklenetisi vardır. ESLint, JSLint, ve JSHint. Son zamanlarda ESLint popülerlik kazandı. ESLint’in geliştiricisi Nicholas C. Zakas. ESLint dokümantasyonu da gayet başarılı.

Sublime Text’e ESLint eklenmesi

1.adım : ESLint’i yüklemek için ilk başta bilgisayarımıza ESLint’i global olarak yüklememiz gerekiyor.

npm install -g eslint

İsterseniz proje bazlı da ekleyebilirsiniz.

2.adım : ESLint yapılandırma dosyasını oluşturmalıyız. Projemizin ana dizininde .eslintrc isminde bir dosya oluşturmalıyız. Kendi yapılandırma ayarlarımızı da yapabiliriz veya hazır yapılandırma dosyasını kullanıp üzerine ekleme yapabiliriz. Biz zingat’da airbnb’nin yapılandırma dosyasının üzerine kurduk .eslintrc dosyasını.

Başka örnek alınacak kodlar da var ama biz projede airbnb’kini kullandığımız için için onu örnek vereyim. Kullanacağımız yapılandırma dosyasının kodunu indirip

npm install --save-dev eslint-config-airbnb-base [email protected]^#.#.# [email protected]^#.#.#

terminalden yazıp paketi indirelim. Sonra .eslintrc dosyası şöyle olur.

{
"extends": ["airbnb-base"]
}

3.adım : Sublime Text pkaet yönetiminden ESLint paketini yükleyelim.

  • Komut penceresini açalım (cmd+shift+p Mac OS, ctrl+shift+p Linux/Windows).
  • install yazın gelen listeden Package Control: Install Package seçin. Tıkladıktan sonra tepki süresi 2-3 saniyeyi bulabilir.
  • sublimelinter-contrib-eslint aratalım. Gelen seçeneği yükleyelim.
  • Yüklendi mesajı geldikten sonra Sublime Text’i kapatıp açın.

Artık Sublime Text javascript hatalarını göstermeye başladı.

Örnek olması için javascript dosyasında 1431. satırın sonundaki noktalı virgülü sildim. 1-2 sn sonra Sublime Text hatayı gösterdi.

Sublime Text linter

Sağda satır sayısı yanında kırmızı yuvarlak bir uyarı, kod satırının içinde de kırmızı alt çizgi ile bie hatayı gösteriyor Sublime Text.

Sublime Text linter statusbar

Alt durum çubuğunda hatanın satır ve kolonu belirtiliyor. Ayrıca hatayı nasıl düzelteceğimizin bilgisini veriyor. (Bende kurulu pretier eklentisi mi yapıyor bunu emin olamadım)

Sublime Text linter console

Sublime text konsolunda hatalar ve ikazlar liste halinde gösteriliyor. Uzun satırlı dosyalarda hataların takibi zorlaşıyor. Sublime Text konsolda hepsinin listesini görmek güzel oluyor.

Benzer şekilde CSS ve HTML hatalarımızı da görebiliriz.

Sonuç

Kod yazarken hataları görmek ve daha derlenmeden, tarayıcıya gitmeden düzeltmek süper bir kolaylık.

Bizim gibi mevcut büyük bir projeniz varsa linter eklemek mevcut kodları düzeltmek için sıkıntılı oluyor. Biraz zaman alsa da linter hatalarını düzelttikten sonra sonuç güzel oluyor. Büyük projelerde ESLint yapılandırma dosyası biraz kabarabiliyor. ESLint dosyası hakkında daha detaylı bilgiyi belki Doğan Öztürk yazar.

Hatasız kod yazmak dileğiyle. Hadi kalın sağlıcakla.

Kaynaklar

zingat.com’da yaklaşık 4-5 aydır jquery yerine javascript ile yazmaya başladık. Çalışma arkadaşlarımın da yardımıyla jQuery’yi siteden çıkarma hedefimize doğru ilerliyoruz. Bu süreçte gördüklerimi sizlerle paylaşıyorum. Bu makalemde javascript ile elementlere nasıl stil atarız ve atanmış stil bilgisini nasıl okuruz sorularının cevabını bulacağız.

Hesaplanan değer (Computed values) ve çözümlenmiş değer (resolved values) kavramları

Değerler konusunda CSS’de iki farklı anlayış vardır.

1- Hesaplanan değerler: Bir elemana tanımlanmış değerler ve kalıtsal gelen değerlerin hepsinin olduğu değerlere denir. Örneğin line-height: 1.3em veya font-size: 120%.

2- Çözümlenmiş değerler: Elemana uygulanmış değerlerin son halidir. Yukarıdaki örneklerde line-height: 1.3em ve font-size: 120% değerleri göreceli değerlerdir. Tarayıcı bu değerleri uygulamadan önce mutlak değerlere çevirerek atar. Örneğin line-height: 16px ve font-size: 18px olarak çevirir ve uygular.

Standart oluşturucular başlangıçta getComputedStyle metodu hesaplanan değerleri almak için oluşturdu ancak sonra çözümlenmiş değerlerin alınmasının daha avantajlı olduğuna karar verip değiştirdi. Bundan dolayıdır ki getComputedStyle metodu çözümlenmiş değerleri bize verir.

Stilleri okumak

Stilleri okumak için getComputedStyle metodunu kullanırız.

var stiller = window.getComputedStyle(elem);

Bu elemana atanmış tüm stilleri aldık.

var renk = window.getComputedStyle(elem).color;

Bu kod ile de elemana atanmış renk değerini alırız. Atanmış diğer stilleride aynı şekilde alabiliriz.

var padding = window.getComputedStyle(elem).padding;

Elemanın padding değerini aldık.

Elemente stil atamak

elem.style objesi style özniteliğine karşılık gelen bir nesnedir.

elem.style.color = 'red';

kodu

<div id='deneme' style='color:red'></div>

şeklinde uygulanacaktır.

Dikkat etmemiz gereken bir ayrıntı da birden fazla kelimeden oluşan tanımların CSS ile kebap-case şeklinde birleştirilirken, javascript ile birleştirilirken camelCase şeklinde yazarız. Örneğin background-color tanımını elem.style.backgroundColor şeklinde tanımlarız.

Çoklu stil tanımlamak

Birden fazla stil tanımlamak için cssText özelliğini kullanırız.

elem.style.cssText = 'background-color: red; color: white';

Bu özelliğin şöyle bir dezavantajı var. Mevcut tanımların üzerine yeni stilleri yazar, yeni ekleme yapmaz. Bunu çözmek için bir kaç yöntem var. Çoklu tanım için yarımcı bir metot yazmak, ikincisi ise global bir css dosyasını oluşturup ona tanımlamak.

Kalın sağlıcakla.

Kaynaklar

Normal şartlarda kodlarımızın küçük bloklar halinde farklı dosyalarda olduğu bir dünya düşünürken genelde projelerimizde 2000, 3000 satırlık kod blokları olur.

Hayaller Hawaii hayatlar Sanayii:)

Uzun sayfalarda editörde belli bloklar arasında yukarı aşağı gezinmek sorun oluyor. Bu durumu çözecek bir özellik editör yerimi (Bookmarking) özelliği.

sublime text bookmarking

Yerimi ekleme kısayolu (MacOS için) kntrl + shift + r tekrar bastığınız da ise kaldırıyor.

sublime text bookmarking

Yerimim eklendiğini satır numarası yazan yerin solunda yerimi ikonu çıkıyor. Yerimleri arasınra gezinmek için kısayol olarak fn + F2 kullanıyoruz. Bu tuş kombinasyonuna her bastığımızda yerimleri arasında geziniyoruz.

CSS’de Uyumlu web geliştirmeleri yaparken normal kod ile media tanımları arasında gezinirken de yardımcı olur.

Kalın sağlıcakla.

Kaynaklar

Node.js projeleri ile çalışırken birden farklı sürüm ile çalışmamız gerekebiliyor. Her projenin gereksinimleri farklı oluyor. Farklı sürümleri yönetmek için nvm (Node Version Manager - Nodejs Sürüm Yöneticisi) gibi güzel bir çözüm var. İşimizi kolaylaştıran ve bizi birçok dertten kurtaran güzel bir araç.

Nasıl kurulur

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

MacOS için yukarıdaki kodu terminale eklemek yeterli. Diğer işletim sistemler için nvm github sayfasında kurulum kısmına bakınız. Sonra terminali kapatıp açınca nvm kullanıma hazır.

Peki ihtiyacımız olan sürümü nasıl kuracağız. Kurabileceğimiz sürüm listesini

nvm ls-remote

komutunu terminale yazarak görebiliriz. Sonra buradan istediğimiz sürümü

nvm install 8.9.3

Yazmanız yeterli. Hemen nodejs sürümü yükleniyor ve kullanıma hazır hale geliyor.

Peki yüklü sürümler arasında nasıl geçiş yapıyoruz.

nvm use 6.9.4

Hop geçtik. Süper değil mi?

Yüklü nodejs sürümleri görmek için

nvm ls
v4.4.2
-> v8.9.3
system
default -> 8.9.3 (-> v8.9.3)
node -> stable (-> v8.9.3) (default)
stable -> 8.9 (-> v8.9.3) (default)
iojs -> N/A (default)
lts/* -> lts/carbon (-> v8.9.3)
lts/argon -> v4.8.7 (-> N/A)
lts/boron -> v6.12.2 (-> N/A)
lts/carbon -> v8.9.3

Peki her projeler arası geçişte böyle kod mu yazacağız? Onun içinde çözüm var.

Her proje klasörüne hangi nodejs sürümünü kullandığınıza dair bir nvm konfigürasyon dosyası eklemeniz yeterli.

/ .nvmrc (dosya adi)
6.94

Terminali kapatıp açın artık bu projede nvm use ile her geçişti nodejs sürümünü yazmanıza gerek yok.

Sonuç

Daha önce defalarca ismini duymama rağmen nvm ile bir sorunun çözümünü ararken kurma gereği duydum. Parceljs kurarken yaşadığım bir problemi çözmek için, sorunun çözümüne ilaç gibi geldi.

Kalın sağlıcakla.

Kaynaklar

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

Can I Use css-backgroundblendmode? Data on support for the css-backgroundblendmode feature across the major browsers from caniuse.com.

Kalın sağlıcakla.

Kaynaklar