Bitbucket ile statik websitenizi host edebilirsiniz

Bu yazida, github’da cok sevdigim, statik website host etme ozelliginin, bitbucket tarafindan taklit edilmis halini kisaca aciklayacagim.

Bu ozellik sadece, statik web dosyalarini destekliyor, yani render edilmis html, js, css, imajlar gibi dosyalari bir domain altinda goruntulemenizi saglayacak. Sunucu tarafli kodlari desteklemiyor ama statik site ortaya cikaran icerik yonetim sistemlerini kullanarak tum sitenizi buradan sunabilirsiniz.

Bunu yapmak cok basit. Birkac adimda ustunden gecelim. Benim bitbucket kullanici adim “mfyz” ve bitbucket her hesap basina 1 tane statik website host edebilmenizi sagliyor. Malesef birden fazla site host edemiyorsunuz tek hesapta. Eger “mfyz.bitbucket.io” yeni bir repository olusturursaniz ve icine index.html koyarsaniz, tarayicinizda “http://mfyz.bitbucket.io” adresiyle ulasabilir olacaksiniz.

Grunt nedir? Bir web geliştiricisinin neden görev çalıştırıcısına ihtiyacı var?

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. Projeye https://github.com/mfyz/grunt-release-boilerplate adresinden erişebilirsiniz.

Grunt hakkinda daha fazla bilgiye sitesinden erişebilirsiniz: http://gruntjs.com/

Minimalist PHP Çatısı Slim

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 🙂

Slim’e istediğiniz şablon motorunu entegre edebilirsiniz.

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

MongoDB ile Flörtleşme ve MongoLab ile Bulut Veritabanı

NoSQL vertiabanı motorları son yıllarda çok popülerleşti, çünkü yapısız olmalarından dolayı daha kolay mimari değişiklik yapabileceğiniz veri yapıları olduğu için tercih edilmeye başladı. Ölçeklenebilirlik de klasik sql veritabanlarının sınırlı ve geleneksel kaldığı konulardı.
NoSQL çıkışı kesinlikle modern bir çözüm olarak görülebilir.

İnternette bir çok karşılaştırma, performans analiz yazıları bulabilirsiniz sql ve nosql veritabanları hakkında. Ancak her yere uyan mükemmel bir çözüm yok. Benim gördüğüm kadarıyla, hibrid ve akıllıca kurgulanarak dengelenmiş ve dağıtılmış sistemler en yaygın kullanımlar. Yani bazı şeyleri nosql ile daha zor ve daha çok kodlama zamanı harcayarak yapabilir, bazı şeyleri de sql ile yönetemez ve yapamazsınız.

Daha teknik konulara giriyorsanız zaten bu yazıdan daha çoğuna ihtiyacınız var 🙂 Bu yazı daha çok mongo’ya giriş ve flörtleşme dönemi hakkında.

Eğer MongoDB’yi denemek istiyorsanız, mongodb sunucusunu bilgisayarınıza yüklemek zorunda değilsiniz. Kurulumu da çok zor değil fakat sadece denemek için sunucu kurulumu konfigurasyonu gibi şeylerle uğraşmak zorunda değilsiniz. Sadece istemci sürücülerini kurmanız yeterli. Bu konu hakkında mongodb dökümantasyonundaki http://docs.mongodb.org/ecosystem/drivers/php/ sayfasını inceleyebilirsiniz.

MongoLab adında bağımsız bir servis sayesinde ücretsiz bir mongo veritabanı oluşturabilir ve denemelerinizi onun üstünde yapabilirsiniz. MongoLab veritabanı ve kullanıcınızı oluşturduktan sonra açık erişim izni veriyor. Dolayısıyla php’den veya herhangi diğer bir ortamdan doğrudan erişebiliyorsunuz.

Tabi ki servisin amacı mongo denemek isteyen insanlara servis sunmak değil. MongoLab bulut veritabanı servisi. Veri dosyalarının saklanmasını istediğiniz alt servisi (Amazon, Rackspace, Windows Azure vs…), hatta yüzeysel de olsa bölge seçebiliyorsunuz (Amerika veya Avrupa veya uzak doğudaki bir veri merkezi şeklinde).

MongoLab 500mblık bir alanı ücretsiz sağlıyor. Diğer sınırlamalarını bilmiyorum fakat ufak projeleriniz için veya deneme yapmak için ideal. Eğer uygulamanız çok veri kullanmaya başlarsa küçük, büyük paketleri veya kurumsal hizmetlerinden faydalanabilirsiniz.

MongoLab ile tamamen php mongo eklentisi bağımlılığından da kurtularak doğrudan servisin basit REST apisini kullanabilir ve tek başına çalışan bir uygulama yazmanız da mümkün.

Konumuz mongo iken, birkaç php-mongo interaksiyonunu denediğim bir php dosyasının kodunu doğrudan vermek istiyorum.

İlk satırlarda göreceğiniz dsn’i mongolab’den edineceğiniz sunucu adresi ve portunu (tahminimce her kullanıcı için farklı olma durumu var), veritabanı kullanıcı adınız ve şifrenizi belirterek tek parça string şeklinde belirttiginiz takdirde bağlantı sağlayabileceksiniz.

Mongo, küçük uygulamalarda veri düzeni zorunluluğu olmadığı için kullanması çok keyifli, fakat verinizi dökümante etmeyi unutmayın. Yoksa neyin ne olduğunu unutur veya ipin ucunu kaçırarak karmaşık bir veri yığını elde edebilirsiniz günün sonunda.

MongoDB dökümantasyonunu inceleyerek indeksleme, sorgulama ve veri yönetimi nasıl yapılıyor fikir edinebilirsiniz. Ayrıca php manual’daki bazı SQL örneklerinin php ile mongo sınıfında nasıl yapıldığını gösteren bu sayfayı: http://php.net/manual/en/mongo.sqltomongo.php incelemekte fayda var.

MongoLab servisinin adresi https://mongolab.com

CSS ile radio butonlardan segmented control yapmak

Bu form elementinin diğer ortamlardaki adını bilmiyorum ama cocoa’daki (macosx işletim sistemini doğal arayüz kütüphanesi) adı segmented control. Bu yüzden, yazının devamında segmented control olarak kullanmaya devam edeceğim.

iOS arayüzlerindeki on/off swtich’lerini biliyorsunuzdur, geçtiğimiz 2 yılda web’deki implementasyonları o kadar artti ki, artık her yerde basit bir javascript kütüphanesi olarak bu form elementini bulmak mümkün. Sadece javascript değil css implementasyonları da var. Bu yazıda, bu elementin teorisine biraz değineceğim. Ayrıca benim kullandığım method, javascriptin çalışmadığı tarayıcılarda da sorunsuz çalışacak (fallback) hatta css desteklemeyen taryıcılarda dahi fonksiyonalitesini bozulmadan koruyacak standart input, label elementleri ile bunu nasıl yapabileceğinizi anlatacağım.

Ama görsel olarak neyden bahsettiğimi göstermem gerekirse:

Gördüğünüz gibi aslında standart bir çoktan seçmeli tek cevap sorularından bahsediyorum. Bunun için standart form elementlerinden radio butonu kullanarak cevapları tek grup altında label ve input elementleriyle bir formda toplayalım. Okumaya devam et “CSS ile radio butonlardan segmented control yapmak”

SequelPro: MacOSX kullanıcıları için PHPMyAdmin alternatifi

MacOSX’de php geliştirme ortamı kurmak, diğer işletim sistemlerine göre çok daha kolay. MAMP ile neredeyse tek drag & drop ile apache, php, mysql üçlüsünü çalışır hale getirmek mümkün.

Eğer *AMP kullanan bir web geliştiricisi iseniz muhtemelen tüm veritabanı yönetiminizi phpmyadmin ile yapıyorsunuzdur. PHPMyAdmin kuşkusuz taşınabilir ve esnek yapısıyla istediğiniz gibi özelleştirebileceğiniz bir yönetimsel araç. Fakat bazı noktalarda bazen bir masaüstü aracının sunacağı özellikleri sunamayabiliyor.

Sequel Pro, adından paralı bir yazılım gibi bir çağrışım yapsa da ücretsiz bir yazılım. Basit ve minimalist bir arayüze sahip Sequel Pro’nun kullanımı oldukça kolay.

Okumaya devam et “SequelPro: MacOSX kullanıcıları için PHPMyAdmin alternatifi”

Sitenizi Twitter Cards ile tweet arkadaşı yapın

Web sayfanızı SEO taranabilirliği için meta ve belki facebook için de düzenlediniz diyelim. Amacınız sayfanızı tarayan google ve benzeri örümcekler/tarayıcıların sayfanız hakkında topladığı özet bilgisi tanımlamak. Çünkü google ve facebook sayfanızda ne çözebildiğini değil, sizin onlar için, sayfanızın ne anlama geldiğini söylemenizi istiyorlar. Bunun için de standart sayfa tanımlaması meta etiketlerine ek olarak facebook opengraph meta etiketlerini kullanarak, facebook örümceklerinin, özel olarak sayfa içeriğiniz hakkında daha detaylı bilgi almasını sağlayabiliyorsunuz. Facebook opengraph içerik (nesne) tanımlamalarını yıllar önce kullanıma sundu ve şu an bir çok popüler web sayfası bu meta etiketleri ekleyerek sayfalarının facebook’da nasıl göründüğünü bir nebze de olsa kontrol edebiliyorlar.

Twitter da birkaç ay önce “Twitter Cards” adında bir grup meta tanımlaması kullanmaya başladığını yayınladı. Bunun asıl amacı, tweet’lerdeki linklerin ne anlama geldiklerini daha iyi çözebilmekti. Eğer twitter card meta etiketleriyle sayfa kimliği belirlenmiş bir sayfa url’i tweet ederseniz, o tweet genişletilebilir (expand) hale geliyor ve web sitesinde ve twitter’ın mobil uygulamalarında görüntülendiğinde tweet metni içindeki url’e ait sayfa detaylarını twitter card meta etiketleri aracılığıyla gösteriyor.

Yani insanlar sayfanızı tweetlediklerinde siz twitter’a sayfanız hakkında daha detaylı bilgi sunabiliyorsunuz ve twitter bunu daha zengin içerik olarak kullanıcılarına sunuyor.

Twitter card adını verdikleri bu link açıklayıcı meta etiketleri, opengraph’e benzer şekilde başlık, açıklama ve açıklayıcı görsel ile bir linki özetleyen bir bilgi sunuyor. Aşağıda twitter card destekleyen bir link paylaşılmış bir tweet’in web’de nasıl göründüğünü görebilirsiniz.

Twitter card detayları tabi ki varsayılan biçimde görüntülenmiyorlar ancak kullanıcı, mobilde tweet’e dokunursa veya web’de expand butonuna basarsa twitter card detayları görüntüleniyor.

Sitenizin tüm sayfalarını twitter card ile desteklemek zorunda değilsiniz. Ancak blog yazısı gibi çoğunlukla metin ağırlıklı bir içerik, video veya fotoğraf gibi bir içeriğiniz var ise bu içeriğin paylaşılma ihtimali daha yüksek olacağından bu sayfalara twitter card metaları eklemek daha anlamlı olacaktır. Zaten twitter içerikleri bu üç kategoride grupluyor ve bunu da twitter card türü olarak tanımlamanızı istiyor.

Twitter Card’ınızı hazırlamak için önce içeriğinizi özetleyecek 3 elementi tanımlamanız gerekiyor.

  • İçerik tam adresi (url)
  • İçerik başlığı
  • İçerik özeti – kısa metin
  • İçerik görseli (görselin tam url’i)

Bu öğeleri hazırladıktan sonra bu sayfalarda aşağıdaki meta etiketi grubunu head etiketi içine eklemeniz, sayfanızın twitter card’a sahip olmasına yetecektir.

Yukarıdaki kod genel bir metin ağırlıklı içeriğe sahip sayfayı özetleyen twitter card kodu. Dökümantasyonda fotoğraf yani tekil görsel ağırlıklı bir sayfa veya video tipi medya sunumu yapan bir sayfanın nasıl bir twitter card’a sahip olması gerektiğini ve bu türlere özel etiketlerin açıklamalarını ve örneklerini görebilirsiniz. https://dev.twitter.com/docs/cards adresinden erişebileceğiniz twitter card dökümantasyonu ayrıca twitter card meta etiketlerinin tüm listesini ve gerekli detaylı açıklamalarını veriyor.

https://cards-dev.twitter.com/validator adresinden de hazırladığınız twitter card’i sayfanızın url’ini girerek önizlemesini görüntüleyebilirsiniz. Bu araç aynı zamanda hataları görmenizi ve sayfanızın twitter card’ında bir sorun olup olmadığınızı anlamanıza yardımcı olacaktır.

HTML ve CSS Başlangıç Rehberi

@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 de http://learn.shayhowe.com/advanced-html-css/ adresinden ulaşabilirsiniz.

MAMP ile MacOSX’de PHP tabanlı web geliştirme ortamı hazırlamak

MacOSX üzerinde php ile geliştirme yapmak istiyorsanız ilk yapmanız gereken şey geliştirme ortamınızı hazırlamak olacaktır.

MacOSX üzerinde halihazırda kurulu bir apache ve php sürümü bulunuyor zaten. Bunları basitçe aktif hale getirebilir ve geri kalan ayarları elle yapmak isteyebilirsiniz fakat macosx ile yüklü gelen php, apache sürümü ve eklentileri, standart ihtiyaçlara bile cevap veremeyebilir. Basit bir wordpress kurulumu bile gd, zip, iconv ve benzeri php eklentilerine ihtiyaç duyacaktır. Dolayısıyla bir noktada php kurulu php sürümünü güncellemeye ihtiyaç duyabilirsiniz. Apache için de durum aynı. Ayrıca sadece eklentiler değil, mysql gibi birkaç sunucu uygulaması da kurmak zorunda kalacaksınız. Bunları tek yerden başlatıp durdurabilmek için de başka araçlar bulmanız veya geliştirmeniz de gerekebilir.

Varolan apache ve php kurlumunu kullanmak dışında en hızlı kurlumu, MAMP (MacOSX Apache MySQL PHP) ile yapabilirsiniz. Bir çok genel eklentiyle beraber universal olarak derlenmiş ve paketlenmiş bir uygulama diyebiliriz MAMP için. MAMP ile birkaç dakika içinde standart bir web geliştirme ortamını ayağa kaldırabilirsiniz.

http://www.mamp.info/ adresinden indirebileceğiniz MAMP, basit bir şekilde kurulabiliyor. Applications klasörünüzde MAMP adında bir klasör içinde herşeyi toplu bir şekilde bulabileceğiniz MAMP, birçok ayar dosyasını da barındırıyor. Dolayısıyla Web root dizininizi kolayca değiştirebilir, php.ini veya my.cnf’i modifiye ederek istediğiniz eklentileri aktifleştirebilir pasifleştirebilirsiniz.

http://www.mamp.info/en/mamp/index.html adresinden MAMP ile beraber gelen tüm kütüphane / eklenti ve sunucu yazılımlarının listesini görebilirsiniz. MAMP’in standart sürümü ücretsiz ve basit bir yönetim arayüzü sunuyor.


Eğer vhost, dns, email sunucusu ayarlarınızı görsel bir arayüzde yönetmek istiyorsanız tek seferlik satın alabileceğiniz bir lisans ile MAMP PRO yani sadece yönetimsel arayüz uygulaması satın alarak varolan MAMP kurulumunuzu kolayca yönetebilirsiniz.


Birkaç ipucu vermem gerekirse, MAMP PRO’da çok göz önünde olmasa da “File > Edit Template > …” menüsünden php.ini, my.cnf, httpd.conf gibi ayar dosyalarınıza hangi dizinde olduklarını çözmeye gerek kalmadan ulaşabilirsiniz.

Web root klasörünüzü (kullanıyorsanız) Dropbox’unuzda bir dizini belirterek tüm web geliştirme dosyalarınızı ve projelerinizi dropbox’da tutarak anlık yedekleme sağlayabilirsiniz.

iOS’de otomatik yenilenen abonelikleri doğrulamak

Baştan belirtmek zorundayım, iOS uygulamalarına otomatik yenilenen abonelikleri entegre etmek tam bir baş ağrısı. Her ödeme yönetminin zor yanları olabilir, ancak iOS uygulama mağazası üstünden yapılan otomatik tekrar eden abonelikleri yönetmek çok daha karışık bir mevzu.

Baştan başlamak gerekirse, otomatik ödeme yönetime ile yapılan abonelikler diğer tür ödemelerden farklı. “iOS uygulama içi satış entegrasyonu ve ödemeleri doğrulamak” yazısında iOS uygulama mağazası ödemelerini entegre etmek ve ödeme türleri üzerine bir yazı yazmıştım. Otomatik tekrar eden abonelik dışındaki diğer ödeme türlerinin entegresyonunu o yazıdan inceleyebilirsiniz. Ancak bu konuda bilginiz yoksa önce o yazıdaki bilgilere ihtiyacınız olacak, önce o yazıyı incelemenizi tavsiye ederim.

Otomatik tekrar eden abonelikler sayesinde, kullanıcınızın iznini aldıktan sonra iTunes aracılığıyla, 1 haftalık, 1 aylık, 2, 3, 6 veya 12 aylık periyodlarla otomatik şekilde ödemelerini sağlayabiliyorsunuz. Bir ürün için kullanıcıyı elde tutmak açısından diğer, tek seferlik satın almalardan çok daha değerli. Kullanıcınız ödemeyi ilk sefer yaparken satın almayı yapıyor ve sonrasında servisi iTunes üstünden iptal edilene kadar ödemeler otomatik tekrarlanıyor. Siz kazancınızı Apple’dan alıyorsunuz.

Okumaya devam et “iOS’de otomatik yenilenen abonelikleri doğrulamak”