enter image description here

Arayüz geliştiricileri olarak yoğun bir şekilde javascript kullanıyoruz. Birçok javascript kütüphanesini kullanıyoruz, peki sunucu taraflı kodlama da javascript kullanılsa nasıl olur? Bu soruya cevap zaten nodejs var diyenlere aferin :D Peki ama Nodejs sunucu taraflı javascript biz arayüz geliştiriyoruz ne işimiz olur? Demeyelim, okumaya devam.

Sonuçta kullandığımız bir dilin farklı bir yanı nodejs, farklı kabiliyetleri var. Tabi size derinlemesine öğrenin demiyeceğim tabiki daha önce bahsettiğim gibi her arayüz geliştiricisi etkileşimde olduğu bölümlerin kabiliyetlerini bilmeli, bu yapılan işin kalitesi ve hızı için önelidir. Zaman bulursanız derinlemesine de öğrenmekte fayda var.

Yükleme

İlk olarak bilgisayarımıza nodejs’i yükleyerek başlayalım. Windows ve Mac kullanıcıları için nodejs.org sitesinde kurulum dosyası mevcut, linux kullanıcılar ise alışık oldukları yol ile komut satırından sudo apt-get update ve sonra sudo apt-get install node kod ile bu işi halledebilirler.

“Nodjs; Google’un geliştirdiği ve Chrome’da javascript derlemekte kullandığı C/C++ ile geliştirilmiş V8 motoru üzerinde çalışmaktadır. Nodjs, olay tabanlı olarak sunucu üzerinde javascript çalıştırmayı sağlayan bir yapıdır. I/O ve ağ işlemlerini bloklamadan(asenkron) olarak yaptığı için kaynak yönetimi gibi konularda diğer yazılım dillerine ve platformlarına göre daha farklı bir konumdadır ve bu özellik NodeJS’in temelini oluşturan bir yapıdır. Bu da NodeJS için performans odaklı olmasını sağlar.” - nodejstr.com

Nodejs’in yüklendiğini kontrol etmek için genelde sürüm kontrolü kodu kullanılır.

node -v

komutu ile nodejs’in yüklenip yüklenmediğini ve aynı zamanda sürümünü kontrol edebiliriz.

v0.12.0

Sonucu bize nodejs’in kurulduğunu ve kurulan sürümün 0.12.0 olduğunu gösterir.

Paket Yönetimi (NPM)

Paket yönetimi açık kaynak kullanıcılarının yabancı olmadığı bir konu. Paket Yöneticisi; Bağımlılıkları takip ederek paket inşa etme, kurma, kaldırma, yükseltme vd. işlevleri yerine getirir. Nodjs’in paket yöneticisi NPM’dir. NPM üçüncü parti modülleri yüklemek için birebirdir.

Paket sözcüğü biraz sunucu taraflı bir tanım gibi geliyor bana. Arayüz geliştiricileri için genelde npm eklenti yönetimi için kullanılıyor. grunt ve eklentilerinin eklenmesi, güncellenmesi ve silinmesi işlemlerini yoğun olarak npm ile yaparız.

Nodejs’in paket yönetimi dosyası proje içindeki package.json yapılandırma dosyası ile sağlar. Bu dosyayı kendimiz oluşturabildiğimiz gibi;

npm init

Komutu yardımıyla sorulan soralara cevap vererek de oluşturabiliriz.

enter image description here

Sırası ile bize;

  • Projenin adı -name- (yeni-proje):
  • Projenin sürümü - version - (1.0.0):
  • Projenin Tanımı - description - :
  • Başlama dosyası - entry point - (index.js):
  • Test Komutu - test command - :
  • Git deposu - git repository - :
  • Anahta kelimeler - keywords :
  • Yazar - author - :
  • Lisansı - license (ISC) - :

sorularını soruyor. Kendi cevaplarımızı yazarak package.json dosyamızı oluştururuz. Bu yöntemi izlemek zorunda değiliz kendimizde bu dosyayı oluşturabiliriz. Standart bir json dosyası.

enter image description here

İzin sorunları yaşadığınız durumlarda kodlarınızın başına sudo komutunu eklemeyi unutmayın. (Mac ve Linux kullanıcıları için)

Modül yüklemek

Npm ile paket yüklemek basit bir işlemdir.

npm install -g grunt-cli

Şeklinde grunt’ı projemize ekleyebiliriz. Burada şöyle bir ayrıntı var, eğer yüklenen modülleri aynı zamanda package.json’a da eklemek istiyorsak;

npm install -g grunt --save-dev

Bu konmutu yazdıktan sonra node’da kayıtlı grunt paketini sunucudan indirecektir. Proje dosyalarının olduğu klasöre node_modules klasörünün eklendiğini görceksiniz. package.json dosyasını açtığımızda

"devDependencies": {
  "grunt": "^0.4.5"
}

Satırının eklendiğini göreceksiniz.

Yüklü Modül Listesi

Projede yüklü modüllerin listesi almak için

npm list

Komutu yeterlidir.

yeni-proje@1.0.0 /Users/fatih/Documents/yeni-proje
└─┬ grunt@0.4.5
  ├── async@0.1.22
  ├── coffee-script@1.3.3
  .....

Şeklinde kurulu olan modülü ve o modülün gereksinimleri alt kırılım şeklinde listelenir. Alt kırılımların listelenmesini istemezsek;

npm list --depth=0

Kodunu yazmalıyız.

Yüklü Modülü Kaldırmak

Bir modülü kaldırmak için

npm uninstall grunt --save-dev

Komutunu yazmalıyız. Sondaki –save-dev parametresi yine package.json’ın otomatik güncellenmesi içinidir. Bu komut sonrasında package.json’dan grunt satırı silinecektir.

Modülü Güncellemek

Projemizde ekli olan modülleri durumlarını öğrenmek için;

npm outdated

Komutu ile güncellemesi gelen modüllerin adı, mevcut sürümü, istenen sürümü, son sürümü ve yeri bilgilerini verir.

enter image description here

Güncellemek istediğimiz modülü

npm update grunt-contrib-cssmin --save-dev

Kodu ile modülü güncelleyebiliriz.

Daha önce oluşturulmuş projelerde package.json dosyası görürseniz, yapacağıznı ilk iş

npm install

yapmak olmalı. Böylece projedeki gereksinimleri tek satır kod ile yüklemiş oluruz.

Kalın sağlıcakla.

Kaynaklar

Bir önceki makale paylaştığım Angularjs ipucunda kullandığım kodları renklendirmek ve kod bloku olduğunu göstermek için jekyll’de kullandığım kodlar sorun oluşturdu.

Kodları göstermek yerine yorumladı. Bunu engellemk için aşağıdaki şekilde yazmam gerekti.

Jekyll ve Angularjs kullananların işine yarar.

Kaynaklar

Angularjs’in şablonlar (HTML) üzerindeki hakimiyetini seviyorum. Basit bir konu ama yazmakta yarar var.

Javascript ve diğer dillerden aşina olduğumuz ikili operatörleri AngularJs ile şablonlarda kullanabiliyoruz.

Kullanımı çok basit.

{{ Kosul && "koşul doğru ise" || "koşul yanlış ise" }}

Bunu html üzerinde kullanmak çok güzel oluyor. Örneğin bir resim alanımız var ve bu resim alanında resim olması halinde resim görünsün ama resim yoksa da bizim standart tasarladığımız resim yok tasarımımız görünsün dediğimiz alanlarda.

<img ng-src="{{resminKaynagi && 'resim.png' || 'resim-yok.png'}}"/>

Kodu basit ve hızlı bir çözüm oluşturuyor.

Kalın sağlıcakla.

Kaynaklar

CSS’de değişken kullanmak şu an için mümkün değil. Eğer CSS Önişlemcilerini kullanıyorsanız o başka. currentColor değerini bir değişken olarak kabul edebiliriz. Tarayıcı desteğine baktığımızda tüm yeni nesil tarayıcılar destekliyor, ayrıca ie9+, gayet güzel.

currentColor değeri; Mevcut elemanın color değerini referans alan bir değişkendir. inherit değerine benzerdir, inherit değerinin genişletilmiş kullanımı gibi düşünelim. Renk değerinin tanımlandığı her yerde( kenar çigilerinin renkleri, kutu gölgelerinde, dış hat çizgilerinde, ardalan renklerinde) kullanılır. Eleman ve alt elemanlarına uygulanır.

Kalıtsallık(inherit) değerinin geliştirilmiş halidir. Kalıtsallık tüm değerler için kullanılırken currentColor sadece renkler için kullanılır.

Bir iki kullanım örneği ile daha iyi anlayacağımızı düşünüyorum.

SVG içeriğine renk tanımlama

SVG içeriğine CSS ile müdahale edebiliyoruz. Mesela bir ikon yaptık bunun rengini CSS ile değiştirebiliyoruz.

Renk geçişinde kullanımı

Bir sitenin farklı temaları için renk tanımları yaparken renk geçişlerin de ve renk tanımların da kullanılabilir.

background-image: linear-gradient(to bottom, currentColor, #fff);

Tarayıcı Desteği

Chrome explorer Firefox
+ 9+ +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

Kalın sağlıcakla..

Kaynaklar

Daha önce yazacaktım ama desteği çok düşüktü. Webkit’in %82(mobil + web) desteğinden sonra uygulanabilirliği arttı. Ben Firefox’tan destek bekledim ama ondan ses çıkmadı.

Tasarımcıların form elemanlarını tasarlama sevdası hiç bitmedi, bitmeyecek de :D Tüm ihtiyaçları CSS ile halledebilsek sorun yok da işin içine javascript girince durum değişiyor. Çünkü CSS işin işlevsel kısmını yine doğal haline bırakıp görselliğine yönelirken; javascript ile yapılan çözümler işin işlevselliğine de müdahale ediyor. İşin doğallığı bozulunca da tonla sorun çıkıyor.

Neyse biz gelelim kendimize özel kaydırma çubuğu(scroll) yapmaya;

Bu kadar basit bir kod ile özel kaydırma çubuğu elde ettik. Biz yukarıda 3 adet sahte(pseudo) kaydırma çubuğu elementi kullandık. Ancak toplamda yedi tane element vardır.

Özel Scroll Sahte(Pseudo) Elemanları

enter image description here

  1. ::-webkit-scrollbar Kaydırma çubuğu alanını tanımlar. Genelde diğer elemanları kapsar
  2. ::-webkit-scrollbar-button Yön tuşlarını seçmeye yarar.
  3. ::-webkit-scrollbar-track Kaydırma çubuğunun altta kalan boş kısmını seçmeye yarar.
  4. ::-webkit-scrollbar-track-piece Kaydırma çubuğunun tutamacı dışında kalan boşluğu seçmemize yarar.
  5. ::-webkit-scrollbar-thumb Kaydırma çubuğunun tutamacını seçmemize yarar.
  6. ::-webkit-scrollbar-corner Yatay ve dikey kaydırma çubuğunun köşesini seçmemizi sağlar.
  7. ::-webkit-resizer Yatay ve dikey kaydırma çubuğunun köşesinde boyutlandırma çıkması durmunu seçmemizi sağlar.

Öze Kaydırma Çubuğu Sahte(Pseudo) Sınıfları

Farklı durumları yakalayabilmemiz için kaydırma çubuğunun sahte(pseudo) sınıfları vardır. Bu sınıflar kaydırma çubuğu elementinin parçalarına özel seçimin yapmamızı sağlar.

:horizontal, :vertical, :decrement, :increment, :start, :end, :double-button, :single-button, :no-button, :corner-present, :window-inactive

Bu sözde sınıfları tanımlamak yerine örnekleri incleyerek daha iyi anlayacağımızı düşünüyorum.

Tarayıcı Desteği

Chrome explorer Firefox
+(-webkit) - -

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ (-webkit) +(-webkit) +(-webkit)

Kaynaklar