Üç adet popüler CSS önişlemcisi var. SASS, LESS ve Stylus. Dinamik CSS yazımı ile ilgili daha önce Stylus ile ilgili bir makale yazmıştım. Stylus yazımda da belirttiğim gibi bunlardan birini tercih etmek yeterli bence. Birbirlerine olan üstünlükleri çok ayırt edici değil. Sass’ın diğerlerine göre ilk olmak ve çok fazla dokümantasyonunun olması gibi avantajları var. Buna karşı bence Stylus’un yazımı daha kolay. Bir iki nokta üst üste -:- yazmadım diye hata almak hoşuma gitmiyor.

Sahibinden.com‘da Stylus ile kod yazarken mobiwan‘da tercihimiz genelde Sass oluyor. Bende hazır Sass kodluyoruz bir makale yazmanın sırası geldi diye düşünüp bu makaleyi yazmaya başladım. Bu yazım Sass’a giriş niteliğinde olacaktır. Daha sonra zamanım olursa devamı gelir inşallah.

“CSS ile kod yazarken büyük projelerde ne kadar dikkatli olsak da sonunda normal olarak binlerce satırlık kodlar çıkabiliyor. Düzenli olmamız ve Firebug yardımı olsa da bu kodlar içinde dolaşmak ve yönetmek bazı sorunlara neden oluyor. Dinamik CSS burada devreye giriyor.

Dinamik CSS yazımında; değişken tanımı, css fonksiyonları, fazla kod işaretçilerinden kurtarma kalıtsallık ve 4 işlem gibi özellikleri ile bizlere yardımcı oluyor. Kısacası CSS’e dinamik bir yazım olanağı kazandırıyor.”

Stylus yazımdan yaptığım alıntı tüm CSS önişlemcileri için geçerlidir.

Sass Kurulumu

SASS Ruby ile geliştirildiğinden kurulumu için bilgisayarınızda Ruby ve onun paket yöneticisi Gem’in bulunması lazımdır. Mac OS’ta Ruby ve Gem kurulu geliyor. Windows için Ruby Installer indirip kurmanız gerekir. Linux için Rails Ready ‘dan kurabilirsiniz.

Sonrasında komut satırına:

gem install sass

Linux ve Mac Os’ta yetki sorunlarını aşmak için:

sudo gem install sass

yazmak yeterli, Sass’ı kurmuş olduk. Sass’ın yüklenip yüklenmediğini kontrol etmek için;

sass -v

komutunu yazarız. Sonuçta Sass ve sürümünü yazan bir cevap gelirse Sass bilgisayarımıza yüklüdür.

Sass’ın Derlenmesi

Sıra geldi Sass yazmaya küçük bir örnek yazalım ve deneme.sass olarak kaydedelim.

.deneme
      margin: 0 auto
      width: 150px

Söz dizimine baktığımızda süslü parantez -{}-, noktalı virgül -;- kullanılmıyor. Kod blokları girintiler ile belirlenir. Şimdilik bu kadar ile yetinelim. Şimdi bu kodu CSS’e çevirmemiz gerekiyor. Bunun için çeşitli yöntemler mevcut.

Komut satırından derlemek

CSS’e çevirmek için ilk yöntem komut satırından

sass --watch deneme.sass:deneme.css

yazmak yeterli. Eğer birden fazla dosya var ise ve bir klasör içinde ise;

sass --watch app/sass:public/stylesheets

komutu ile tüm app/sass klasöründeki dosyaları CSS’e çevirebiliriz.

Uygulamalar ile derlemek

Genel itibari ile bu programları sıralarsak

Sublime Text ile derlemek

Diğer editörlerinde benzer bir yetenekleri vardır muhtemelen. Ben Sublime Text kullanıyorum diye burada değinmek istedim. Sass kullanıyorsanız bir kaç Sublime Text eklentisi kurmanız gerekiyor.

Grunt ve Gulp yardımı ile derlemek

Grunt ve Gulp, Sass derlemek için biçilmiş kaftandır. Yukarıdaki çözümler seçenek olması için anlatıldı. Asıl çözüm Grunt ve Gulp ile yapılandır.

Grunt ve Gulp’dan kısaca bahsedersek; tekrarlayan işlerimizi otomatize eden Nodejs üzerinde çalışan kod betikleridir. İleride zamanım oldukça daha detaylı bahsetmeye çalışacağım.

Burada grunt’tan bir örnek vereyim. Bir kaç tane grunt sass betiği var. grunt-sass bunlarda biri ve tercih edilebilir. Grunt kurulu bir sistemde

$ npm install --save-dev load-grunt-tasks

ve

$ npm install --save-dev grunt-sass

grunt-sass betiği yüklenir. Sonra gruntfile.js

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-sass');

    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        sass: {
            compile: {
                files: {
                    'css/deneme.css': 'sass/deneme.sass'
                }
            },
            options: {
                sourceMap: true
            }
        }
    });

    grunt.registerTask('default', ['sass']);
};

Daha sonra komut satırından

grunt sass

komutu ile sass dosyaları otomatik derlenecektir. Bu işi anlık değişimi yansıtacak bir kod ile daha kullanışlı hale getirebiliriz.

$ sudo npm install grunt-contrib-watch --save-dev

ile izleme betiğini yükleyelim.

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    require('load-grunt-tasks')(grunt);

    grunt.initConfig({
        watch: {
            sass: {
                files: ['sass/deneme.sass'],
                tasks: ['sass']
            }
        },
        sass: {
            compile: {
                files: {
                    'css/deneme.css': 'sass/deneme.sass'
                }
            },
            options: {
                sourceMap: true
            }
        }
    });

    grunt.registerTask('default', ['sass', 'watch']);
};

sonrasında

grunt

komutunu yazdıktan sonra sass/deneme.sass dosyasında değişiklik yaptımız anda otomatik derlenip css/deneme.css dosyası oluşturulacaktır.

➜  yeni-proje  grunt
Running "sass:compile" (sass) task

Running "watch" task
Waiting...
>> File "sass/deneme.sass" changed.
Running "sass:compile" (sass) task

Done, without errors.
Completed in 0.428s at Tue Aug 25 2015 12:29:03 GMT+0300 (EEST) - Waiting...

Şimdilik bu kadar zamanım oldukça daha fazla Sass ve Grunt makalesi yazmayı planlıyorum.

Kalın sağlıcakla.

Kaynaklar

Nodejs ve npm’i anlattıktan sonra Bower’ı anlatmamak olmaz. Bower için npm’in arayüz geliştiriciler için olanı demek yanlış olmaz herhalde. Javascript’in sunucu tarafına geçmesi ile arayüz geliştiriciler daha çok otomatize olmaya başladı.

Birçok projemizde javascript ve css kütüphaneleri ve eklentileri kullanıyoruz. Kullandığımız bu kütüphane ve eklentileri sitemize eklemek ve güncellemek bizim için yük olmaya başladı. Burada size bir anımı anlatayım. sahibinden.com’da çalışırken jquery sürümünü yükseltmek bir dert olmaya başlamıştı. Güncellemeyi kimse göze alamıyordu. Çünkü her güncellemede bazı sorunlar çıkıyordu. En son bir iş olarak açıldı ve Sercan yaptı. Uzun ve dertli bir süreçti. Bu tip sorunlarla karşılaşmış bizim gibi arayüz geliştiriciler için bower velinimettir.

Gelelim bower’ı kullanmaya. Çeşitli editörlerden de bu işi yapabiliyoruz ama ben burada komut satırından çalıştırmayı göstereceğim.

Bower’ı yüklemek

Bower’ı yüklemek için npm’in bilgisayarınızda yüklü olması gerekmektedir. Eğer bilgisayarınızda npm yüklü değilse. Bilgi almak için Nodejs ve npm yazımızı okumanızı tavsiye ederim.

Sistemde npm yüklü ise komut satırına aşağıdaki kodu yazalım.

npm install -g bower

npm yazısından bildiğimiz gibi -g parametresi kurulacak kod blokunun genele kurulmasını sağlıyor. Kurduktan sonra bir sonraki adıma geçelim.

Paket bulmak

Npm’den bildiğimiz gibi kütüphane ve eklentiler paket olarak adlandırılıyor. Eklemek istediğimiz paketleri aramanın iki yolu var. Bower’ın arama sayfasını kullanmak ya da komut satırından aşağıdaki kodu yazarak aramak.

bower search <sorgu>

Bir örnek yapalım.

bower search bootstrap

Araması sonucundan bootstrap ile ilgili kütüphaneler listelenir.

enter image description here

Her bir satır bir paketi tanımlar. İlk mor renkli kısım ismi, ikinci beyaz kısımda paketin indireceği git adresini gösterir.

Paket yüklemek

Projemize eklemek istediğimiz paketi yüklemek için komut satırına aşağıdaki kodu yazarız.

bower install <paket_adi>

install komutundan sonra paket_adi ile yüklenebildiği gibi, github kısayolu, Git enpoint ve bir url’den de yüklenebilmektedir.

# kayıtlı paket adı
$ bower install jquery
# GitHub kısayolu
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# Herhangi bir URL
$ bower install http://example.com/script.js

Normalde yüklemek istediğimiz paketi yazdığımızda paketin son sürümü yüklenir. Ayrıca istediğimiz sürümü indirmek için araya diyez işareti (#) koymamız yeterli.

bower install bootstrap#3.2.0

enter image description here

Paket yüklendiğinde proje klasöründe bower_components klasörü oluşturur ve içine dosyaları indirir. Bower bu klasörü otomatik olarak seçer ve adlandırır, ancak konfigürasyon (.bowerrc) dosyası yolu ile bize yolu ve ismini değiştirme imkanı verir.

bower_components klasörünü incelediğimizde yüklediğimiz paket ve bağımlılıkları otomatik yüklendiğini görürüz.

enter image description here

İlk yüklemeden sonra yüklediğiniz dosyayı html dokümanınıza eklemeniz gerekir. Bower paketleri genelde javascript dosyaları içerir, bazen css ve resim dosyası içerir.

<script src="bower_components/jquery/jquery.min.js"></script>

Paket kaldırmak

Yüklediğimiz bazı paketleri kaldırmak isteyebiliriz. Bunun için yazmamız gerke komut:

bower uninstall bootstrap

Birden fazla paketi kaldırmak için araya boşluk vererek isimlerini yazmamız yeterlidir.

bower uninstall jquery modernizr sass-bootstrap

bower.json dosyası

Eğer birden fazla paket kullanacaksanız bir bower.json dosyası ile bu paketleri yönetmek daha mantıklıdır. Zaten tek kütüphane için bower kullanmakta çok mantıklı gelmiyor bana. bower.json dosyasını kendimiz elle oluşturabildiğimiz gibi

bower init

komutunu yazıp, sorulan soralara cevap verip bir bower.json dosyası elde edebiliriz.

Örnek bir bower.json dosyası

{
  "name": "yeni-proje",
  "private": true,
  "dependencies": {
    "jquery": "~2.1.1"
    "swiper": "~3.0.8",
    "waypoints": "~3.1.1",
    "jcarousellite": "~1.9.3",
    "jquery.countdown": "~2.0.5"
  }
}

Yeni bir paket ekledeğimizde bower.json dosyasını güncellemek için –save parametresini eklememiz gerekir.

bower install jquery --save

Bu kullanımı alışkanlık haline getirmekte fayda var. Her paket indirdiğimizde bower-json dosyasını ayrıca açıp güncellemek çok mantıklı değil.

Paketi güncellemek

Paketlerimizi güncellemek için aşağıdaki komutu yazmamız yeterlidir.

bower update

Tüm paketler güncellenebildiği gibi

bower update <paket_adi>

Komutu ile sadece belirli bir paket de güncellenebilir.

Yüklü paketleri listelemek

Mevcut paketleri ve güncelleme olup olmadığını görmek için

bower list

komutunu kullanırız.

➜  yeni-proje  bower list
bower check-new     Checking for new versions of the project dependencies..
yeni-proje#0.0.1 /Users/fatih/yeni-proje
├─┬ bootstrap#3.2.0 (latest is 3.3.5)
│ └── jquery#2.1.4 (3.0.0-alpha1+compat available)
└─┬ jcarousellite#1.9.3
  └── jquery#2.1.4 (3.0.0-alpha1+compat available)

Sonuç

Bu makalede twitter’ın geliştridiği bower paket yöneticisini tanıtmaya çalıştım. Bower’ın arama, yükleme, kaldırma, listeleme komutlarını anlatmaya çalıştım. Bunlar genel itibari ile yeterlidir bence.

Sunucu taraflı kod yazarlarının alışık olduğu paket yönetim araçlarına biz arayüz geliştiricilerde böylelikle kavuşmuş oluyoruz.

Kalın sağlıcakla.

Kaynaklar

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 önemlidir. 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.

“Nodejs; Google’ın geliştirdiği ve Chrome’da javascript derlemekte kullandığı C/C++ ile geliştirilmiş V8 motoru üzerinde çalışmaktadır. Nodejs, 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’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. Nodejs’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 komutu 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öreceksiniz. 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üllerin 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 yer 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ğınız ilk iş

npm install

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

Kalın sağlıcakla.

Kaynaklar