CSS’in devamlı geliştirilmekte olmasının avantajları ve dezavantajları var. Dezavantajlara flex özelliğinin 3 kere değişmesini gösterebiliriz. Avantajları çok tabi. Bunlardan bir tanesine örnek bu makalenin konusudur. Artalan resimlerinin konumlandırmasında bazı sorunlar vardı. Bu sorunları görerek mevcut tanım geliştirildi.

Daha önce anlattığımız artalan tanımına artı özellikler eklendi.

div {
    background-position: 20px 30px;
}

yukarıdaki örnekte yaptığımız gibi sabit hizalama tanımı yaptığımızda her zaman elemanın sol ve üst köşesine göre mesafe belirtebiliyorduk. Tam işte burada yenilik geldi. Gerçi yenilik geleli bayağı zaman oluyor. Ben bu yazıyı daha önce yazmak istemiştim ama zamanım olmamıştı. Şimdiye nasipmiş.

Yeni gelen özellikten sonra artık sağ ve alttan belli mesafede artalan resmi hizalayabiliyoruz. Hemen bir örnek yapalım.

div {
    background-position: right 20px bottom 80px;
}

Gayet kullanışlı bir özellik. Zamanında çok aramışlığım vardı. Eskiden çözüm için genelde Photoshop’ta resime sağdan ve alttan belirttiğimiz mesafeyi verip saydam olarak kaydederdik.

Tarayıcı desteği konusunda da gayet güzel bir noktada.

Tarayıcı Desteği

Chrome explorer Firefox
+ 9+ +

Mobil Tarayıcılar

Android Mobil Safari Chrome
4.4+ + +

Kalın sağlıcakla.

Kaynaklar

Daha önce denediğimde bazı tarayıcıların sorun çıkardığını hatırlıyorum. Aklımda öyle kalmış. Bundan dolayı bu özelliği bugüne kadar hiç kullanmadım. Bir iş dolayısıyla kullanmam gerektiğinde çalıştığını görünce sevindim. Hatta denedeğim tüm tarayıcılarda (IE8 dahi) çalıştı.

2006’da yazdığım CSS’de Metin(Text) Özellikleri yazısından text-transform‘dan bahsetmişim. Kod yapısı basit.

HTML kodu:

<h1>Bu başlığı büyük harflerle göster</h1>

CSS kodu:

h1 {
    text-transform: uppercase
}

Tabi birde dilimizi belirtmemiz gerekiyor ki tarayıcı hangi dilde büyültme yapacağını bilsin.

HTML kodunu şöyle değiştirelim. h1‘e lang=”tr” ekleyelim.

<h1 lang="tr">Bu başlığı büyük harflerle göster</h1>

Kalın sağlıcakla

Kaynaklar

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