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