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/
28 Ocak Pazartesi ´13   —   6 Yorum


Geçtiğimiz hafta, iOS geliştiricilerimizden biri, varolan iPhone uygulamamızı iPad'e sadece birkaç ayarla oynadıktna sonra derleyerek çalışır hale getirdi, sonuç tabi ki götü başı dağılmış bir uygulama, ama fonksiyonel. Tabi ki iPhone ve iPad arasında deneyim tasarımı farklılıkları var fakat teknik olarak çok küçük problemler var. Uygulamanın uyumsuzluğunun 95%'i sadece görsel problemler ve bu problemler tasarımın özellikle iPhone ekran çözünürlüğüne göre yapılmış olmasında.

Mobil uygulamalar çok iyi örnekler değiller bu yazı için çünkü uygulamanın çalışacağı cihazlar belirli ve çözünürlükleri belirli, yazılan uygulamalar da çalışacakları cihazlara oldukça bağlılar.

Web'de ise durum biraz daha farklı, cihazları veya ekran çözünürlüklerini kontrol edemezsiniz, ayrıca web uyuglamalardan daha universal bir içerik türü, çok farklı cihazlar tarafından okunabilen çok daha geniş bir kitleye hitap edebildiginiz bir içerik dağıtım türü. Bu yazıda size bu farklılıkların bazı çıkış noktaları anlatacağım ve farklı bir arayüz geliştirme yaklaşımdan bahsedeceğim.

Az önce mobil uygulamalar bu problemin açık şekilde görüleceği ortamlar olmayabilir demiştim fakat Android işletim sistemi üsütnde çalışan uygulamalar bu yazıya daha yakın örnekler olabilirler çünkü piyasadaki farklı ekran çözünürlüğüne sahip cihaz sayısı oldukça yüksek, dolayısıyla web örneğine daha yakınlar.

Farklı çözünürlüklere sahip kullanıcı kitlesine üretilen klasik bir tasarım senaryosunda, kullanıcı analitikleri analizi yapılıp en çok kullanılan ekran çözünürlüğü belirlenir. Vazgeçilebilecek ekran çüzünürlüklerinden kurtulduktan sonra kabul edilebilecek minimum ve maksimum ekran çözünürlüğü tanımlandıktan sonra buna göre bir tasarım çalışması yapmak genel yaklaşımdır. Kullanıcı deneyimi tasarlandıktan sonra arayüz tasarımı yapılır ve arayüz tasarımı bittikten sonra tasarlanan asset'ler (resimler, ikonlar, butonlar, arka plan grafikleri vs) çoğu zaman arayüz geliştiricisinin ekran çözünürlüğünde test edilir ve az sonra belirteceğim deneyler yapılmaz.

Devamını Oku →
24 Ocak Perşembe ´13
@shayhowe tarafından hazırlanan HTML ve CSS'e giriş rehberi çok derin olmasa da HTML ve CSS'i genel hatlarıyla özetlemiş. Hem güzel bir sunum ile hazırlanmış hem de güncel bilgilere yer verilmiş.http://learn.shayhowe.com/html-css/ adresinden ulaşabileceğiniz rehber 10 başlıkta toplanmış güzel bir kaynak.

Shay Howe'un daha derin HTML ve CSS konularını topladığı hatta halen yazmaya devam ettiği, gelişmiş HTML ve CSS rehberine dehttp://learn.shayhowe.com/advanced-html-css/ adresinden ulaşabilirsiniz.
28 Kasım Pazartesi ´11   —   4 Yorum
Bir suredir yavas da olsa yeniden duzenledigim mfyz.com kodlarini sonunda arayuz kismiyla daha cok zaman harcayip oynayabilecegim bur sekle soktum. Ozellikle tum arayuz parcalarini phptal, less ustune oturtmaya baslamistim. Simdi herhalde su ana kadarki en buyuk degisikligi yaptim ve giris sayfasini yeniledim.



Su an giris ve sifre hatirlatma sayfalari basit bir arayuzle goruntuleniyor, birkac adim sonrasinda bunu lightbox ile normal sayfalarin uzerinde cikacak sekile getirebilirim veya bu sayfalar javascripti olmayan insanlar icin failsafe sayfalar olarak da kalabilir.

Bol bol css3 ve webkit ozellikleri kullanarak hazirladim, sadece kapat tusundaki ikon imaj olarak bir sprite'dan geliyor, gerisi tamamen css3. Tabi less ile cok daha hizli yazip derliyorum css'leri.

Simdi tum bolumleri tek tek sadelestirip eski arayuze ait kodlari temizlemeye calisiyorum. Bitirdigimde artik UX, fonksiyonaliteye odaklanabilirim. Tabi icerigi de ihmal etmemeye calisacagim.

Popüler Etiketler

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