Kısaca Grunt

Grunt bir görev çalıştırıcısı. Web geliştirme sürecinde ihtiyacınız olan operasyonları otomatize etmenize yarayacak bir araç. Daha çok platforma dönüşmüş olan grunt, yüzlerce eklentiyle istediğiniz forma sokabileceğiniz bir yapılandırma aracı. Hızlıca bir örnek vereceğim. Basit bir web sitesi hazırlıyorsunuz ve stillerinizi css yerine less ile yazdınız, javascriptlerinizi cosnole.log debug satırlarıyla ve bir sürü yorum ile yazdınız. Sitenizi her yayına alacagınızda bir toparlama ve paketleme işi yapmanız gerekiyor, lessilerinizi css'lere derlemek, belki cssmin gibi ufaltma operasyonuna sokmak, imajlarınızı sıkıştırmanız, javascriptlerinizi temizleyip küçültmeniz belki birden fazla kaynağı tek dosyada birleştirmeyi isteyeceksiniz. Her değişiklik yaptığınızda bu işlemleri tekrarlamanıza imkan yok. İşte bu noktada grunt devreye giriyor.

Grunt ile neler yapabilirsiniz?

Sonu yok çünkü kendi eklentilerinizi yazarak node.js yeteneklerini kullanarak yapamayacağınız şey yok. Ama eklenti veritabanından erişebileceğiniz o kadar çok şey var ki.
- Less, Scss, Sass vb... herhangi bir css derleme işinizi
- Kod validasyonu (css, js, html)
- Imaj optimizasyonu
- Birden fazla javascript veya css kaynağını birleştirme
- Css veya javascript sıkıştırma
- Kodunuzdaki yorumları, debug için geriye kalan artıkları temizleme
- Kaynak versiyonlama

Daha sayamadığım bir çok operasyonu grunt ile farklı kombinasyonlarda hazırlamanız mümkün.

Örnek

Versiyonlamayı denemek için kendime bir örnek kod hazırladım ve github'da paylaştım. Basit bir css javascript projesinde kodumu yayınlamadan önce bütün css ve javascript kaynaklarımı sıkıştırıp adlarını versiyonlamarak yayındaki tüm dosyaların en taze kodu kullanmasını sağlamak için grunt kullandım. Projeyehttps://github.com/mfyz/grunt-release-boilerplate adresinden erişebilirsiniz.

Grunt hakkinda daha fazla bilgiye sitesinden erişebilirsiniz:http://gruntjs.com/
CDN: Content Delivery Network'ün kısaltması ve İçerik Dağıtım Ağı olarak Türkçe'ye çevirebilecek bir kavram. CDN'ler, statik içeriklerinizin normalde daha hızlı tarayıcıya ulaştırılması için düşünülmüş bir dağıtım yapısıdır.

Statik içerik nedir?

Statik içerik grubuna, javascript, css, görseller, statik html dosyaları gibi, bir sunucu programlama dili ile dinamik şekilde oluşturulmayan tüm içerikleri dahil edebilirsiniz. Bir kere hazırlanıp sunucuya konduktan sonra değişmeyeceği planlanan içerikleri, farklı coğrafyalardaki veri merkezlerine dağıtarak, kullanıcılara daha hızlı iletmeyi amaçlayan içerik dağıtım ağları sadece bulut servis sağlayıcıları tarafından sağlanıyor.

Basitçe, iki tür CDN vardır, biri genel amaçlara yönelik tasarlanan, herkese açık ve dökümante edilmiş CDN'ler, diğeri de özel tasarlanmış ve genellikle kapalı kullanım için tasarlanmış olanlardır.

İkinci model, ileri aşamada yapacağınız bir geliştirme olacağı için şu an detaylarına girmeyeceğim. Size bu yazıda, özetle ilk model açıklayıp örnekleyeceğim. İlk modeli kullandığınız kütüphane bazlı projeler (örnegin jQuery, twitter bootstrap, angular, backbone...) kendi networkleri aracılığıyla sağlıyorlar veya google, microsoft gibi büyük bulut servis sağlayıcıları, birden fazla projeyi içeren herkese açık CDN servisleri sağlıyorlar.

Nasıl çalışıyor?

Bir websitesi hazırladınız; arayüzü twitter bootstrap ile şekillendirdiniz; jQuery kullanan birkaç kütüphane ile sitenizi interaktifleştirdiniz ve fontwesome kullanarak da elementlerinize semboller ekleyerek arayüzünüzü güçlendirdiniz. Bu kütüphanelerden bazısı sadece tek bir javascript dosyası, bazısı da css ve başka formatlarda dosyalar kullanmanızı gerektiriyor. Normalde, bütün bu dosyaları geliştirme ortamınızda sitenizin asıl dosyaları ile beraber sunmanız ve öyle kullanmanız gerekiyor.

Sitenize giren kullanıcı, tarayıcıda bir sayfa bile ziyaret etse hem sayfanızı istiyor hem de bütün javascriptleri, kütüphaneleri, görselleri, css stil dosyalarını istiyor. Sayfanızı her halükarda sunmak zorundasınız ancak sayfanızda kullandığınız statik dosyaları bu CDN servislerinden adresleyerek tarayıcıların o kütüphaneleri o servislerin domainlerinden indirmesini sağlayabilirsiniz. Bu servisler bu statik dosyaları olabilecek en hızlı şekilde sunmak üzere tasarlandıkları için her zaman sizden daha iyi çalışacaklardır. Ayrıca fakrlı bir domainde oldukları için daha önce yüklenmeye başlayacaklar (parallel download) ve muhtemelen başka bir sitede kullanıcı o dosyayı daha önce indirdiği ve uzun cache periyodlarıyla kullanıcının bilgisayarında saklandıkları için de muhtemelen tekrar indirilmeden doğrudan tarayıcıya yükleneceklerdir. Sitenizde belirli bir kutuphane icin CDN kullanmak için:
<script src="js/jquery-2.0.2.min.js"></script>
yerine
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
kullanmanız yeterli olacak. Gördüğünüz gibi bu jquery'e özel tanımlanmış bir CDN adresi. Herkese açık ve birden fazla kütühane içeren ortak CDN servislerini tercih etmeniz daha iyi performans almanızı sağlayabilir.

Sonuç olarak bu servisler sadece bu amaca hizmet etmek için çalıştıkları için siz sitenizi veya bu statik içeriklerinizi ne kadar optimize ederseniz edin en iyi ihtimalle onlara yakın, çoğu zaman daha düşük bir performansta çalışacağı için CDN'leri kullanarak zaman ve performans kazanabilirsiniz.

Peki, hangi servis?

Ufak bir araştırma ile herkese açık bir çok CDN servisi bulabilirsiniz hem de kafanızı karıştıracak miktarda. Aralarından en çok kütüphaneyi bir arada bulabileceğiniz bir tanesini tavsiye edip bitireceğim. Cloudflare'in bir çok popüler kütüphaneyi içeren herkese açık CDN servisini kullanarak büyük dağıtma ağına sahip performansından yararlanabilirsiniz.

http://cdnjs.com adresinden kullanmak istediğiniz kütüphaneyi seçip kullandığınız sürümüne ait adresini kodunuzdaki adreslemeyle değiştirebilirsiniz.
4 Eylül Çarşamba ´13   —   5 Yorum
Yeni bir web projesine başlarken Twitter Bootstrap'ı kullanmamak, artık zaman kaybı anlamına gelmişken, her gün, bootstrap'ın uzantısı olan bir çok ufak proje, arayüz eklentisi, tema vs çıkıyor.

Bootstrap ekibi de, çoğunlukla mobil ve responsive özellikleri geliştirilmiş olarak, görsel olarak da son dönemdeki flat design akımına uyarak yeni bir sürüm çıkardılar.

Görsel olarak hâlâ flat design akımının günümüze hazır olmadığını düşünsem de, fonksiyonellik açısından iyi bir gelişme olarak görüyorum. Bootstrap da buna uygun doğru bir hamle yaptı diyebiliriz. Beni en sevindiren tarafı ise, daha mobil dostu olması. Önceki sürümleri de mobile uyumlu idi fakat sitenizi hem mobil hem masaüstü için uyumlu yaparken, birçok ufak düzeltme yapmak durumunda kalıyordunuz. Bu sürümde ise mobil, öncelik haline gelmiş ve masaüstü ikincil planda desteklenmiş.

Yeni sürümü şuradan deneyebilir ve yeniliklerini görebilirsiniz:http://getbootstrap.com

Güncelleme: Şuradaki:http://www.designshock.com/bootstrap-3-psd Photoshop UI Kit'ini kullanarak tasarımları da bootstrap ile şekillendirebilirsiniz kodlamadan önce.
16 Nisan Salı ´13   —   8 Yorum
Artık kimse bir çatı (framework) kullanmadan web uygulaması yazmıyor. Kim hammaliye işlerle boğuşarak zaman kaybetmek ister ki. Bütün çatıların odağı yapacağınız işleri kolaylaştırmaktır, daha az kod daha çok iş. Çoğunlukla da bir ton güzellikle gelirler, vertiabanı katmanları, imaj işleyiciler, dosya yöneticileri, şablon motorları vs.

Basit bir web uygulaması hazırlıyor ve topu topu 3-5 farklı varış noktası olan bir uygulama yazıyorsanız, tek ihtiyacınız olan şey bir kod navigasyonudur, gerisi işinizi kolaylaştıracak kütüphanelerdir fakat bir çatının tüm elementlerini kullanmak istemeyebilirsiniz veya sadece ufak bir yardımcı kütüphane yetecek bir uygulama yazıyor olabilirsiniz. Örnegin sadece xml işleyen bir api hazırlıyorsunuz. Tek ihtiyacınız genel kod navigasyonunu halledecek bir yardımcı ve xmlinizi işleyeceğiniz bir kütüphane.

Bu yazıda Slim adında minimalist bir php çatısını kısa bir örnek kod ile tanıtacağım. Slim, altı üstü, hata ayıklama, oturum yönetimi ve çok basit bir şablon mekanizmasından oluşuyor. Şablon motoru bile değil, sadece yardımcı. Aşağıdaki kodda ikinci varış noktası tanımlamasında görebilirsiniz şablon kullanımını.

Çok detaya girmeye gerek yok kod zaten kendini anlatıyor :-)
$app = new \Slim\Slim();

$app->get('/hello/:name', function ($name) {
    echo "Hello, $name";
});

$app->get('/books/:id', function ($id) use ($app) {
    $app->render('books.php', array('id' => $id));
});

$app->notFound(function () {
	die("We couldn't find what you looking for.");
});

$app->run();
Slim'e istediğiniz şablon motorunu entegre edebilirsiniz.

Slim'ehttp://www.slimframework.com adresinden ulaşabilirsiniz. Dökümantasyonu çok detaylı değil fakat zaten çok detaya da ihtiyacınız olmayacak.

Popüler Etiketler

tebrik jquery javascript plugin optimization html media screen facebook connect api mobile startups twitter meta share kontrol yapıları if switch dokuman portfolio js date tarih ubuntu ntfs fstab css3 css social blog rss lifestream ios iphone ipad apple app store store in-app purchase purchase subscription verification storekit itunes connect itunes html5 form input xml export sosyal medya editor coding örnek kod cache mfyz table linux spam wanda iOS framework proje firefox logo mdb2 pear sql injection radio button wordpress textarea select gimp howto nasıl ui ux icons konsol login icon ikon grafik download banner calendar php widget bootstrap mysql session macosx query db code integration service network nedir mail newsletter box database mssql pgsql digital language ie browser mootools ajax xmlhttprequest wireless music less compile compiler windows app on-the-fly kurulum job developer sitemap generator google while tool signature imza development style htaccess url internet explorer apache route router mod_rewrite ruffles oyun open source lisans workspace internet statistics free parse doritos terminal object optimizasyon analyse procedure webkit web app regex chart search support prepare execute cookie osx player pharma hack seo browsers svn subversion git version control deployment kitap design phpstorm jetbrains ide ipucu www subdomain redirect crossdomain applications istatistik graph auth http diff server assets insanlar laptop notebook xhtml link cms kampanya opengraph fql tytz license zaman