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

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