PHPStorm bu güne kadarki en eli yüzü düzgün PHP IDEsi

Çıktığından itibaren kullanmaya başladığım ve son 3 yıldır tüm web geliştirme işlerimi PHPStorm IDEsini kullanıyorum.

Java tabanlı NetBeans’i modifiye ederek bir IDE (Integrated Development Environment) yani Entegre Geliştirme Ortamı oluşturdular.

PHP’de en büyük problem entegre bir geliştirme ortamı olmaması. Yani derleyiciyle iyi konuşan, iyi bir hata yakalama, test ortamı veya kod ve yazım zekası na sahip bir editör bulmak çok kolay değil. Bunları, kullandığınız işletim sistemine uygun ayrı ayrı araçlarla sağlayabiliyorsunuz tabii ki, fakat entegre şekilde çalışmalarını sağlamak çok da kolay değil.

PHPStorm ilk çıktığında minimal bir konfigürasyon sunarak kod yazım zekası ile bazı temel yazılım geliştirme araçlarını sunuyordu fakat çok hızlı bir şekilde birçok modern web geliştirme dilini (less, sass, haml) ve birçok uygulama geliştirme çatısını destekler hale geldi. Minimal ayarlarla gelişmiş bir editörden ek farkı yok fakat aşağıda kısaca sıraladığım entegre araçları aktif hale getirildiğinde gerçekten çok güçlü bir geliştirme ortamına dönüştürebiliyorsunuz. İşte benim çok sık kullandığım ve sizin de yüksek ihtimalle işinize yarayacak bazı özellikler ve araçlar.

Gelişmiş kod yazım zekası sadece php’de değil php tabanlı bir web projesinde kullanabileceğiniz olası tüm kodları (html, javascript, css, xml) geliştirmek için kullanabilirsiniz. Ek olarak bu altyapılardaki tüm popüler uygulama çatılarını (framework) kod yazım zekasında kullanılabilir şekilde bulabilirsiniz.

Eş zamanlı hata yakalama, xdebug ile çalışan web uygulamanızı editörünüzle entegre ederek eş zamanlı uygulama analizi yapıp hata yakalayabilirsiniz.

Versiyon kontrol sistemi entegrasyonu ile kodunuzu subversion, git gibi depolardan indirip yönetebilirsiniz.

Veritabanı bağlantılarınızı sadece editörünüzden veritabanınıza erişmek için değil kodunuzda yazdığınız SQL’leri kodu yazarken çalıştırıp test edebilir, SQL geliştirirken kod yazım zekası kullanabilirsiniz.

Bunların dışında otomatik yayınlama (deployment), otomatik ftp yüklemesi, zen coding, kod template’leri vs vs gibi bir ton diğer özelliği var.
3 yılda 6 ana sürüm çıkartarak çok kararlı ve güçlü bir php geliştirme ortamı sunuyor jetbrains. Malesef paralı olan ide diğer profesyonel idelere göre çok ucuz, ilk aldığınızda 100 dolar sonasında her yıl ana sürüm güncellemelerini almak için 50 dolar ödemek zorundasınız fakat yaptığınız yatırımı kesinlikle karşılıyor.

Jetbrains PHPStorm’daki birçok aracı Ruby, Python için geliştirdikleri IDE’ler için de sunuyor. Eğer Python veya Ruby yazıyorsanız kesinlikle PyCharm ve RubyMine’a göz atmanızı tavsiye ederim.

PHPStorm’un sayfası için: http://www.jetbrains.com/phpstorm/

CSS çatısı kullanmanın faydaları

Uzun bir süre bütün arayüzlerimi hiç bir framework veya arayüz kütüphanesi kullanmadan kendim yazdım. Özellikle mobil cihazların kullanımının yaygınlaşmasından dolayı, aynı html içeriğini farklı ekran çözünürlüklerine uygun arayüzlerde gösterme ihtiyacı çoğaldı. Hala mfyz.com’daki arayüzü tamamen sıfırdan yazılmış bir css ile çizdiriyorum. Evet herşeyi sıfırdan yapmanın avantajları var fakat avantajları kadar belki daha fazla dezavantajları ve daha derin bilgi birikimi gerektirmesi gibi yanları da var.

Her kodu tamamen elde hazırlamanın en büyük dezavantajı, kararlılıgını korumak ve çok popüler olan, bilinen hataları gidermek için zaman harcamak zorunda olmanızdır. Yani çok basit bir IE hatasını düzeltmek için gereksiz zaman kaybeder daha da tehlikelisi bu küçük şeyler için ayırdığınız zaman sizin genel motivasyonunuzu kırması gibi tehlikeleri göze almış olursunuz. Özellikle tek geliştiricinin bulunduğu projelerde (ki bir freelancer’in elinin altında her zaman tek başına yürürttüğü proje olur) büyük bir motivasyon bozukluğuna neden olabilir. Dolayısıyla hazır yapılar, kütüphaneler sadece zaman kazanmak şeklinde görülmekten çok, birçok geliştiricinin katkıda bulunduğu ve aslında birçok hammallık işini yapmak zorunda kalmamanız olarak algılanmalıdır. CSS veya başka bir dil farketmeksizin bu geçerli diyebiliriz.

Şimdi gelelim arayüz dillerindeki çatılara. Birkaç yıl öncesine kadar CSS için çok yaygın kullanılan veya birçok geliştiricinin ürettiği bir arayüz çatısı yoktu. Nedeni ise hem css3’den önceki versiyonlarda bir çatı gerektirecek genel ihtiyaçlar yoktu bir diğer nedeni de farklı çözünürlüklerdeki ekranlar bu kadar farklı varyasyonlara sahip değildi.

Bir CSS çatısına ihtiyaç duymanızı gerektirecek en büyük bir başka neden ise özellikle standartlara kabul edilmemiş css3 özelliklerinin (animasyonlar vs) hala tarayıcı spesifik on ekler istemesi olabilir. Örneğin, standartlara kabul edilmesi çok eskilere dayanmayan border-radius özelliğini kullanmak ve bütün tarayıcılarda çalışmasını sağlamak için aynı satırı -moz -webkit -o ve -ms gibi on eklerde kullanmak zorunda kalıyorduk. border-radius çok basit bir özellik ve tek parametre gerektirdiği için bunu örneklemem, bu problemin gözünüzde çok canlanmasını sağlamayabilir ama başka bir örnek olarak, bir elemanınızın arka plan rengini doğrusal geçiş (linear gradient) ile şekillendirmek isterseniz uzun bir satır yazmanız ve bunu 4-5 tekrarda css dosyanızın içine koymanız gerekecektir.

Malesef, bu özellik, standartlara geçene kadar bu şekilde kullanılmak zorunda. Yukarıdaki kodda aslında standartlara başvurulan model ilk satırdaki linear-gradient ile başlayan modelidir. Ancak daha standartlara kabul edilmediği için tarayıcılar kendi on eklerini diretmektedir. Çok basit bir geçiş için bu kodları ezberlemek veya tekrar tekrar kodlamak çok anlamsız. Aynı durum birkaç css3 özelliği için de söz konusu.

Peki bir css çatısı kullanmak bunu önleyecek mi? Eğer bir yorumlanan özel bir dil değilse hayır önlemeyecek ama muhtemelen buna benzer hazır geçişleri veya on tanımlı bazı kolay yollar sunacaktır. Eğer yorumlanan bir yapı kullanıyorsanız evet kesinlikle bu kodu çok kısaltmanın yolu var. Bunun için LESS veya SASS’i inceleyebilirsiniz.

Bir çatı kullanmadaki bir diğer fayda da on tanımlı bir çok uygulama eklentisi sunmasıdır. Yani bir web uygulamasında muhtemel olarak kullanacağınız her element için düzgün bir kozmetik hazırlık bulabilirsiniz. Size bunu bir css çatısı önererek anlatmaya çalışacağım.

Twitter bootstrap

Twitter deyince hemen bunun arayüzle ne ilgisi var diyebilirsiniz. Twitter ekibi, twitter’da kullandıkları arayüz kozmetiği ve bazı jquery eklentilerini paketleyerek açık kaynak kodlu bir çatıya dönüştürmüşler. Su an 2+ sürümüne sahip twitter bootstrap aslında bir web uygulaması için başlangıç arayüzleri oluşturmak için tasarlanmış. Yani ufak bir web uygulamanız var ise bunu twitter bootstrap kullanarak çok kolay şekilde şekillendirebilir, eklentilerini kullanarak zenginleştirebilir ve html yapınızı biraz oynayarak arayüzünüzü farklı cihazlarda ve ekran çözünürlüklerinde düzgün görüntülenebilir bir şekle getirebiliyorsunuz.

Örnegin bir RSS kaynağından aldığınız müzik dosyalarını işleyerek bir web arayüzü hazırlamak istiyorsunuz. Sunucu tarafını php ile yazdığınızı düşünürsek, php ile yazacağınız şeyleri yazdıktan sonra, sunucu tarafına ayırdığınızdan belki katlarca daha fazla zamanı arayüzü kodlamakla harcama ihtimaliniz var. Twitter bootstrap kullanarak formlarınızı, butonlarınızı, gridlerinizi, tab veya fare imlecine göre görünüp kaybolan ipuclari ile uygulamanızı zenginleştirebilirsiniz. Farklı tarayıcı uyumlulukları, farklı çözünürlükler gibi şeylere kafa yormanıza genel konular dahilinde gerek kalmıyor.

İstediğiniz özel stilleri, varolan stillere eklemeler yapacağınız gibi varolan stilleri de değiştirebiliyorsunuz. Hatta kaynak koda girip tüm yapıyı da oynama seçemediğiniz var. Ancak twitter bootstrap size sadece önceden kodlanmış bir arayüz sunuyor, yaptığınız eklentilerde veya değişikliklerde yine css3’un hammal yanını göreceksiniz.

CSS Çatıları (framework) tek seçenek mi?

Hayır, çatılar birçok işinizi kolaylaştırsa da temeldeki css dilinin getirdiği yapıyı değiştiremeyeceği için tekrar eden kodlardan kurtulamayacaksınız ayrıca matematiksel çarpanlı yani mimari arayüzler hazırlamanızda size daha önce tanımlı olduklari değerler kadar esneklik sağlayacaktır.

CSS’i dil olarak daha öteye taşıyan ve birbirine benzeyen birkaç yapıdan bir tanesini kısaca anlatarak bahsedeceğim.

Ben, kişisel olarak projelerimde LESS kullanıyorum. Less, css dökümanlarınızda iç içe tanımlamalar yapabilmenizi, fonksiyonlar tanımlayıp fonksiyonları kullanarak renk değişimleri, matematiksel işlemler yapabilmeyi ve benzer programatik şeyler yapabilmenizi sağlıyor, yabnı kısaca css’e bazı programsal özellikler ekliyor. Birkaç farklı method ile kullanılabiliyor. En yaygın kullanımı bir javascript dosyası ile css’inizi tarayıcıda derleyebiliyorsunuz. En pratik kullanımı bu. Fakat tarayıcıdaki ön bellek, geliştirme esnasında baş ağrısı yapabildiği için kodunuzu yazdığınız gibi css dosyalarına derleyerek kullanmanızı tavsiye ediyorum. LESS hakkında biraz daha detaylı yazdığım su yazıyı inceleyebilirsiniz: http://mfyz.com/less-ile-hiyerarsik-ve-fonksiyonel-css-yazmak

Benzer şeyleri yapan ve çok derinlerine inmediğim SASS’i da deneyebilirisiniz. http://sass-lang.com/

Neden sadece twitter bootstrap ve less’den bahsettim?

Çünkü twitter bootstrap kaynak kodlarında less ile yazılmış. Yani kaynak kodunu indirip less kodlarındaki kuralları değiştirerek esnek bir grid’i isteğinize göre üretebilirsiniz, renk kurallarını veya kenar boşlukları, gibi bir çok şeyi less ile çok daha kolay şekilde değiştirebilirsiniz.

İster bir çatı kullanın ister sadece LESS, SASS gibi diller kullanın, yazdığınız css’lerinizi daha hızlı üretmenizi sağlayacak çok güzel araçlar var.

LESS dosyalarınızı anlık css’e çevirin

Less dosyalarıyla çalışıyorsanız ve eğer arayüz geliştiriyorsanız yazdığınız kodu tarayıcıda anlık olarak görmek isteyeceksiniz. Less dosyalarını kaydettiğiniz gibi derleyen aşağıdaki araçlarla hangi platformda çalışıyor olursanız olun otomatik olarak derletebilirsiniz.

Less derleyicilerini toparladığım ufak bir yazı hazırladım: https://mfyz.com/tr/less-dosyalarinizi-anlik-csse-cevirin

LESS dosyalarınızı anlık css’e çevirin

Css yazmayı bırakıp Less ile çalışmaya başlamadınız mı? O zaman şu bökümandan devam edin ve less’in avantajlarına göz atıp size ne fayda sağlayabileceğiniz basitçe anlayabilirsiniz.

Less dosyalarıyla çalışıyorsanız ve eğer arayüz geliştiriyorsanız yazdığınız kodu tarayıcıda anlık olarak görmek isteyeceksiniz. Less dosyalarını kaydettiğiniz gibi derleyen aşağıdaki araçlarla hangi platformda çalışıyor olursanız olun otomatik olarak derletebilirsiniz. Hatta bazıları, açık olan tarayıcılarda, lokal geliştirme ortamınıza ait bir URL açıksa onu da otomatik yeniliyorlar. Dolayısıyla sadece tarayıcınızı kontrol etmeniz yetebiliyor değişiklikleri görmek için.

Bu derleyiciler aynı zamanda less kodunuzu denetleyerek hataları bildiriyorlar. Sonuç olarak yazdığınız less dosyalarınız da css dosyalarınız da geçerli css çıktısı olarak sitenizde yayınlanıyor.

Less.app

Sadece MacOSX’de çalışan bu uygulamaya çalıştığınız projeleri, klasörleri sürükleyip bırakarak otomatik tarattırıp proje olarak ekliyorsunuz. Size o projede bulduğu bütün less uzantılı dosyaları listeliyor. Dosyalar güncellendiği anda da dosyaları css dosyalarına derleyip growl uyarısı ile bildiriyor. http://incident57.com/less/

Simple Less

Bu uygulama biraz daha basit bir arayüze sahip ve tüm platformlarda çalışıyor. Çok platformda çalışan geliştiriciler için oldukça ideal. http://wearekiss.com/simpless

Winless

Sadece Windowsta çalışan, klasik Windows arayüzüne sahip ufak bir araç. http://winless.org/

LESS ile hiyerarşik ve fonksiyonel css yazmak

LESS bir çeşit css derleyicisi ve aslında css sytax’ı üstüne ek özelliklerin eklenmiş olduğu bir araç. Çıktığı dönemden beri bütün projelerimde less dosyaları ile çalışıyorum ve son dönemdeki birkaç uygulama sayesinde çok daha kolay kullanılabilir olmasından dolayı herkese öneriyorum.

Neden LESS kullanmalısınız?

Aslında LESS kullanmak için genel ve çok önemli ihtiyaç yok bana kalırsa. Fakat artık web uygulamaları eskisi gibi basit veya küçük css dosyaları ile şekillendirilen uygulamalar olmaktan çıktılar. Güçlü css seçicileri olsa bile her (grup) element için bir sınıf tanımladığınızı düşünürseniz orta ölçekli bir stil dosyası binlerce satıra ulaşması çok normal.

Dosyanızın uzunluğundan çok iç içe tanımlı grup tanımlaları arasında kaybolmak çok kolay. Dolayısıyla css dosyanızı hiyerarşik bir şekilde organize edecek bir araca sahip olmak her zaman bir artı. Sadece bu ihtiyacınızı kullandığınız gelişitirici uygulamayı degiştirerek sağlamak da mümkün.

Örneğin çok basit bir css dosyanızda

Böyle bir CSS yapısı sık sık yazdığınız bir navigasyon kodu olabilir. Böyle bir yapı, tipik hiyerarşik modele uygun bir örnek. Böyle bir yapıyı LESS ile daha anlaşılır yazmak mümkün:

Gördüğünüz gibi herşey doğru şekilde indent edilmiş ve & gibi referanslar ile bütün css kurallarınızı hiyerarşik hale getirmeniz kolay. Böyle bir yapının sınıf isimlerinden bağımsızlaşması da işinizi kolaylaştıracaktır.

LESS’in diğer birkaç özelliği gercekten alışkanlık yapmaya yeterli. Eğer bir arayüz tasarımcısıysanız genelde matematiksel veya mimari modellere, gridlerle calışıyor olmalısınız. Aynı şeyler tipografi kuralları için de geçerli. Görsel her öğe bir şekilde birbirleriyle çok doğru orantılılar. Font boyutları, renkler vs.

Mesela font boyutunuz 16px iken satır aralığınız bunun 1.5 katı, padding’leriniz 1.5 katı belki koyduğunuz arayüz kuralına göre de kenarlıklarınız 0.2 katı olabilir veya ürettiğiniz grid arayüzünde bir grid genişliğini tanımlayıp sidebarınızı 2 kolon, ana içerik alanınızı 10 kolon olarak ayarlamış olabilirsiniz. Bunları düz CSS’de hesaplayıp tanımlamak durumundasınız.

Kuralların bu kadar net belirlenebildiği bir ortamda CSS’de statik renk kodlarına, sürekli hesaplama yaparak font boyutu, padding, margin, border radius hesaplamak zorunda kalıyor olabilirsiniz. LESS size bu matematiği LESS dosyanız içinde yapmanızı sağlıyor. Bir rengi belli bir contrast değeriyle daha açık veya daha koyu bir renge dönüştürebilir, matematiksel değerleri formülasyona sokabilir veya başka sınıfları kendi sınıfınıza dahil edebilirsiniz.

Örnek vermek gerekirse siteniz için genel bir oran ve başlangıç rakamı belirleyebilirsiniz, veya 3-4 renkten oluşan bir renk paletiniz var olabilir. Düz CSS’de her varyasyonu hesaplayarak yazmak zorunda kalabilirisiniz:

Yorumlarda kurallari yazmaya çalıştım ve normalde bir arayüz tasarımcısı böyle arayüzler geliştirirken bu tarz kurallara sahiptir, en büyük örnegini Apple arayüzlerinde görebilirsiniz. Mimari bir ürün gibidir.

Böyle kurallarla donatılmış bir arayüzün css’lerini yazarken her değeri hesaplamak zorunda kalabilirsiniz fakat LESS ile bu işlemlerin hepsini matematiksel olarak hesaplatmanız mümkün. Yukarıdaki örnek çok küçük bir örnek ama büyük bir css dosyasını düşünürseniz başa çıkılamaz bir iş haline gelebilir.
Ayrıca kuralları matematiksel yazmanın ikinci avantajı, bütün parametreleri birkaç değişken ile yönetip değiştirebilme olanağına sahip olmanızdır. Yukarıdaki örneğin LESS ile yazılmış hali:

Bu özellikleri çok kullanabilirsiniz fakat daha hiyerarşik bir yapıda ortak kullanılan parçaları gruplamak isteyebilirsiniz hatta bazı grupları parametrik olarak değiştirebilmeyi isteyebilirsiniz.

Örneğin bir kutu modeli ürettiniz, kenarları köşeli, içindeki h1 başlığını şekillendirdiniz ve bu kutu modelinin farklı boyutlarını ve renklerini üretiyorsunuz sürekli. Genel kutu modelinizde kullandığınız tipografik tanımlamaları, kenar boşluğu kurallarını tekrar tekrar yazmak istemiyorsunuz.

Ya da CSS3 kurallarının farklı tarayiıcılarla çalışması için yazmanız gereken 4 farklı kuralı farklı değerlerle sürekli tekrarlamak yerine fonksiyon şeklinde tanımlayıp LESS’e ürettirebilirsiniz.

Bunu açıklamak için CSS örnegi yazacağım son olarak.

Bu ornegin LESS ile hazirlayabileceginiz versiyonu.

Bu örnek yukarıdaki CSS’i üretecektir. Gördüğünüz gibi borderRadius tanımlarını da bir fonsiyon olarak tanımlayıp kullandım. Bunu yapmadan doğrudan kutu tanımlaması içinde de kullanabilirdim. Fakat uygulamanız içindeki tüm border radius kullanımınızı bu fonksiyon üzerinden ürettirebilirsiniz.

Son olarak, yazdığınız LESS dosyalarınızı css’e render ettirmenin bir çok yolu olduğunu unutmayın. Bunun için kullanıcının tarayıcısında javascript ile derletebilir, php veya diğer sunucu taraflı kütüphanelerle sunucunuzda derletip css’leri sunabilir veya LESS.app gibi uygulamalarla masaustünüzde yazarken eş zamanlı olarak css’lere derletip kullanabilirsiniz.

Less CSS

LESS CSS ile çalışmak oldukça keyifli. Kesinlikle herkese öneririm. Özellikle de sürekli php veya javascript gibi dillerle çalışan programcılar bunu seveceklerdir. Çünkü CSS yazarken değişken, kontroller gibi program yapıları kullanamıyorsunuz. Eğer sistematik bir css geliştiriyorsanız, mesela gridlerle çizilen, belli bir paleti olan veya pozisyon, kenarlıklar gibi değerleriniz sürekli tekrar eden değerler ise LESS CSS kullandığınız zaman aradaki farkı çok daha iyi hissedeceksiniz.

Örnek veriyorum, CSS3 ile daha çok tekrar etmeye başladığım border-radius için aynı değeri 3 satırda giriyorsunuz, eğer aynı radius değerini mesela 4 sınıf için tanımlamanız gerekiyorsa 12 kere bu satırları tekrar etmeniz gerekiyor. Less’de sadece border radius için parametrik çalışan fonksiyon tanımlayarak her yerde bu fonksiyonu çağırabilirsiniz.

Çok basit bir şekilde tek javascript dosyasıyla çalışıyor, eğer isterseniz sunucunuzda da less dosyalarınızı derleyip javascript bagımlılığı olmadan css olarak sunabilirsiniz.

Kesinlikle denemeye değer: http://lesscss.org/