Jshint Tercihlerim

Sublime Text için tercihlerimden sonra aklıma JSHint tercihlerimi de paylaşmak geldi.

JSHint nedir?

JSHint, javascript kodlarınızı belirli bir standartta ve düzgün bir formatta tutmak için denetleyicidir. Daha önceden bu işi yapmak için ortaya çıkan ve oldukça popüler olan JSLint’i temel alan ancak kendi isteğinize göre tercihler yapabileceğiniz bir halidir. JSHint ile geçmişten geleceğe belirli bir düzende tutabilirsiniz kodlarınızı, yazarken hatalarınızı fark edebilirsiniz. Daha da iyisi birden çok yazılımcı tek projede çalışıyorsa o projenin kod stilini belirli bir standartta tutabilirsiniz. Kesinlikle tavsiye ediyorum.

Nasıl kullanılır?

Birden fazla kullanım biçimi var. Node Package Manager ile kurup konsolunuz üzerinden erişebilirsiniz. Sublime Text ve başka editörler için eklentiler kullanabilirsiniz (Ben SublimeLinter kullanıyorum).

Burada yazacaklarım zamanla geçerliliğini yitirebileceği için bu adresten kullanım detaylarını incelemeniz daha doğru olur.

.jshintrc nedir?

.jshintrc adında oluşturacağınız ve proje dizininizde tutacağınız bir dosya ile JSHint ayarlarınızı JSON formatında tutabilirsiniz. Ayarlarınızı yapmanın aslında birden fazla yolu var, örneğin herhangi bir javascript dosyasında en üstte comment satırında da belirtebilirsiniz ama ben dosyalarda yer kaplamamasından yanayım.

Benim .jshintrc dosyam

Sublime Text Tercihlerim

Yeni Başlayanlar (Asıl konuya geçmek isteyen ST kullanıcıları aşağı insin)

Bir ara vim efsanesine kaptırsam da, Sublime Text, kullandığım açık ara en iyi editör. Daha önce ST hakkında yazmadığım için  öncelikle benim neden tercih ettiğimi açıklayayım. Bu liste çok uzar ama ilk 5 sorarsanız:

  • İnanilmaz hızlı olması. (Gerçekten inanılmaz)
  • Cmd(Ctrl) + (P, R) ile direkt dosya ve methodlara anında ulaşabilmek.
  • Package Control. Gerçekten eklentileri kurmak ve kullanmak daha kolay olamazdı. Ayrıca çok güçlü bir eklenti listesi var onu da belirteyim.
  • Çoklu imleç ile aynı anda birden fazla noktayı düzenleyebilmek. Bu kadar basit bir özelliğin bu kadar fark yaratacağını düşünmezdim.
  • SublimeLint. PHP ve Javascript için kullandığım eklenti başka birçok dili destekliyor.

Sublime Text Tercihlerim

İlk kısım yeni geçmeyi düşünenler içindi. Şimdi de Sublime Text’e aşina olanlar için, yazının asıl konusuna dönüyorum. ST’i uzun süre ve farklı farklı ortamlarda kullandıktan sonra stabil bir hal alan tercihlerimi paylaşmak isterim.

Olmazsa Olmaz Eklentiler:

  • Emmet (Eski Zen Coding)
  • Git
  • Github Tools
  • JSHint
  • SCSS
  • SublimeLinter
  • Theme: Soda
  • Composer

Arayüz Ayarlarım

Eklenti listesinde de göreceğiniz üzere tema olarak “Soda” kullanıyorum. Gerçekten çok sade ve başarılı buluyorum bu tercihi. Ancak sadece bu eklentiyi kurmak istediğim sonuca ulaştırmıyor. Soda’nın folder_icons özelliğini açık tutuyorum.

Soda’ya uyumlu (yine Soda’nın Github sayfasından indirilen) kod renklendirme düzeni kullanıyorum. Kurulumu şöyle:

  1. http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip adresinden indirdiğiniz dosyanın içindeki .tmtheme uzantılı dosyaları ST’nin kurulu olduğu klasördeki Packages/User içine atın.
  2. Preferences -> Color Scheme -> User altından aktifleştirin.

Arayüzde font olarak Meslo Font kullanıyorum. MacOS’un Menlo fontunun küçük düzenlemelere uğramış hali. Fazlasıyla okunaklı ve kodlamaya uygun. Font boyutunu 9px tutuyorum biraz büyüğü veya küçüğü gözümü yoruyor. (Notepad++’da Verdana ile çalışabilenlere selam :)

Bunun dışında birkaç kişisel tercih daha var aşağıda bulabilirsiniz.

Son Olarak Ayar Dosyam:

Bu tercihleri kopyalayıp “Preferences -> Settings – User” ile ulaştığınız sayfaya kaydedebilirsiniz.

Google’ın yeni bombası: Blink

Web developerlar veya konuya birazcık merakı olanlar Webkit, Trident ve Gecko isimlerini duymuştur. Bunlar belli başlı tarayıcıların kullandıkları rendering engineler(doğru düzgün bir çeviri bulamadım bulan varsa söylesin). Çoğu developer bunların nasıl çalıştığını merak etme gereği duymadan işlerini yapıp geçse de aslında biraz detaya inmek daha geniş bir bakış açısı sağlayabilir.

Konumuz -en azından bugünlük- bu değil. Konumuz Google’ın WebKit tabanlı kendi rendering engineini bize sunması! İsmi “Blink”.

İlk tepkiler

İlk tepki genelde budur: “Test yapmamız gereken bir engine daha, harika!”. Ama biraz daha düşününce aslında o kadar da kötü olmadığını anlayabiliriz. Google bunu hep yapıyor. Browser pazarına girişi, V8 JS motorunu çıkartışı hep webi gereksiz dallandırıp budaklandıracak gibi geldi ama hepsi de rekabeti, inovasyonu arttırıp; çıtayı yükseltmekten başka bir şey yapmadı. Yani Blink özünde güzel haber.

Blink ile ilgili detaylar?

Öncelikle yazının başında da belirttiğim gibi Blink WebKit tabanlı bir engine. Bayağı bir kısmını yeniden yazacaklar veya iyileştirecekler ama yine de eski yapısından çok da kopamayacak bu sayede. Daha hızlı, daha güvenli olması gibi vaatler var ve bununla ilgili yapacaklarının bir kısmını da sunmuşlar.

Örneğin; DOM’i JS’in içine taşımayı düşünüyorlarmış, böylece DOM’e erişimde çok ciddi bir hız artışı yakalanabilir. Çok da mantıklı, IE bunu yıllardır yapıyor ve sonucunu alıyor. İkinci örneğim daha da sevindirici: Blink bugünden itibaren vendor prefix kullanmayacak! (Geçmişten kalan bazıları hariç.)

Konuyla ilgili yazılacak çok fazla şey var ama haber çok yeni, beklentiler çok fazla. Sıkı bir takiple bekleyip görmekten başka çaremiz yok. Developerlar için fazlasıyla önemli bir konu olduğu için dikkatimi çeken gelişmeleri blogda yazmaya çalışacağım her fırsatta.

Son olarak, bir bilgi daha vereyim. Kısa süre önce Chromium tabanına geçeceğini açıklayan Opera da Blink kullanacak ve Blink’e katkıda bulunacak.

Konuyla ilgili okuyabileceğiniz kaynaklar

http://www.chromium.org/blink/developer-faq (Resmi SSS sayfası)
http://ericbidelman.tumblr.com/post/47054222305/blink-chromes-new-rendering-engine
http://infrequently.org/2013/04/probably-wrong/

Firefox OS Tespiti

Hali hazırdaki web sitelerinde mobili yakalamak için iPhone/Android/Blackberry OS gibi bilinen işletim sistemlerini kontrol ediyoruz. Firefox da mobil işletim sistemleri arasına katıldığı için onu da tespit etmeye ihtiyaç var artık. Bunun için user agent kullanacağımızı söylemeye gerek yok, örnek bir Firefox OS user agentı verirsem yeterli olacaktır.

Yazılımlarınızı buna göre güncelleyip bir adım daha öne geçebilirsiniz.

Mozilla/5.0 (Mobile; rv:18.0) Gecko/18.0 Firefox/18.0

CSS3′le gelen @supports’un kullanımı

CSS3′ün kattıkları saymakla bitmez, bu gerçek. Bugün güzel bir haber aldım: bir süredir Firefox’un desteklediği CSS.supports() özelliği bu yazıyı yazdığım tarihten 5 gün önce webkit’e de geldi. Bir süredir aklımda olan bu yazıyı da böylece yazmamam için engel kalmadı.

Supports özelliğinin genel kullanım amacı -isminden de anlaşılacağı üzere- şudur: Bir css özelliğinin desteklenip desteklenmediğini test edip duruma özel stiller belirleyemek. Bir nevi Modernizr‘ın javascripte ihtiyaç duyulmayan şekli gibi. Çok fazla anlatacak şey yok aslında, örneklerle detaya girersem daha doğru olur.

Bu arada Modernizr, H5BP‘in de kullandığı, müthiş yaygın bir open-source javascript kütüphanesidir. Faruk Ateş tarafından yaratılmış, şuan da Paul Irish‘ın başında olduğu ekip tarafından geliştirilmektedir. Browserın hangi özellikleri destekleyip desteklemediğini çok güzel bir şekilde bize sunar. Hakkında çok fazla yazı var diye yazmaya gerek duymuyorum ancak bilmeyenlerin kesinlikle incelemesi gerek.

@supports‘un kullanımınna dönelim… Mesela, CSS transform özelliğini destekleyen browserlara özel stil belirtmek istersek:

@supports ( transform: rotate(45deg) ) {
    /* Stil */
}

Örneklerde gördüğünüz üzere syntax(sözdizimi demek garip geliyor) media querylerle aynı.

Daha gelişmiş bir kullanım biçimi için yapabileceğimiz şey sorguları geliştirmek olacaktır. Burada and, or ve not operatörlerini kullanabiliriz. Mesela CSS Transform özelliğini desteklemeyen browserlara özel kod yazmak istersek:

@supports not ( transform: rotate(45deg) ) {
    /* Stil */
}

Daha da geliştirelim. Hem CSS transform hem de Radial Gradient’ı destekleyen browserlara özel kod yazmak istersek:

@supports ( transform: rotate(45deg) ) and ( background-image: radial-gradient(#333,  #555) ) {
    /* Stil */
}

Aynı sorguyu or ile kullanırsak iki özellikten birini desteklemesi durumunda kodumuz geçerlilik kazanacaktır.

Bundan sonrası yaratıcılığınıza kalmış.

iOS’a Özel Meta Tagler

Yaptığımız sitelerin iPhone, iPad sürümlerini yapmak artık bir lüks olmaktan çıkıp ihtiyaç halini aldı. Apple da bu konuda web sitemizi iOS işletim sistemli cihazlarda daha fazla özelleştirebilmek için bazı imkanlar veriyor. Bunları meta taglerde Apple’ın belirlediği değerler girerek yapıyoruz. Mesela sitenizin web app olarak kaydedilebilmesini istiyor olabilirsiniz, veya iTunes’da satışta olan uygulamanızın reklamını yaptırabilirsiniz.

Açıklamaya başlıyorum:

Ayar: apple-mobile-web-app-capable
Ne işe yarar? Sitenizin uygulama olarak ana menüye eklenebilmesini sağlar. Böylece kullanıcılar Safari’nin üst ve alt barı olmadan sitenizi bir uygulama gibi tam ekran açıp kullanabilirler.
Hangi değerleri alabilir? yes ve no

Kod:

<meta name="apple-mobile-web-app-capable" content="yes" />

Ayar: apple-mobile-web-app-status-bar-style
Ne işe yarar? apple-mobile-web-app-capable ile uygulama olarak kaydettirdiğimiz uygulamanın üstündeki bar stilini ayarlayabilirsiniz. Bahsettiğim bar en üstte saatin, şarj göstergesinin bulunduğu ince alan. Tasarımınıza göre bu barı siyah, beyaz veya yarı transparan siyah yapabilirsiniz.
Hangi değerleri alabilir? black, white, default ve black-translucent

Kod:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Ayar: format-detection
Ne işe yarar? iPhone’da siteleri gezerken yazı içerisindeki telefon numaraları tıklanabilir hale gelir otomatik olarak ve bunlara tıklayınca direkt telefon uygulamasına geçiş yapıp bu numarayı arar. Bu özelliği kapatmak kullanabilirsiniz.
Hangi değerleri alabilir telephone=no

Kod:

<meta name="format-detection" content="telephone=no">

Ayar: apple-touch-icon
Ne işe yarar? Web-appiniz kaydedildiğinde görünecek ikonu belirleyebilirsiniz. Ayrıca bu meta taginde sizes attributeu ile boyut belirleyebilirsiniz.

Kod:

<link rel="apple-touch-icon" href="ios-icon.png" />

Ayar: apple-touch-startup-image
Ne işe yarar? Kullanıcı sitenizi app olarak kaydettiğinde onu açmak için menüden tıklandığında uygulama online olduğu için yüklemesi birkaç saniye sürecektir. Bu sırada kullanıcıya istediğiniz bir resmi gösterebilirsiniz. Böylece native uygulamalara daha yakın bir deneyim sunabilirsiniz.

Kod:

<link rel="apple-touch-startup-image" href="ios-startup.png" />

Ayar: apple-itunes-app
Ne işe yarar? Bazı sitelere girdiğiniz zaman iPhone uygulamamızı indirip deneyin! tarzı uyarılar görüyoruz -ve genellikle çirkin oluyorlar-. Apple bu yazının yayınlandığı günlerde yeni bir özelliği daha devreye aldığını duyurdu. Bu özellik ile uygulamanızın ID’sini belirtince sitenin üstünde Apple sizin yerinize uygulamanızın tanıtımını yapıyor. Hem daha güzel hem de indirme oranını arttıracak bir özellik bu, kolaylıkla yaygınlaşacağını tahmin etmek zor değil. Sitenin üstünde oluşacak örnek görüntü:
iOS Smart Banner Örneği

Kod:

<meta name="apple-itunes-app" content="app-id=UrunAppStoreIDsi, affiliate-data=AffiliateNumaraniz, app-argument=NativeUygulamanizaOzelUrl">

Not: affiliate-data ve app-argument özellikleri isteğe bağlıdır.

Normalize.css nedir? Nasıl kullanılır?

Reset.css neydi? Neden yetmedi?

Normalize.css’in ne olduğunu merak ediyorsanız muhtemelen yolunuz daha önce reset.css’e düşmüştür. Genel mantık şuydu: browser ayrımlarını ortadan kaldırabilmek için tüm default stilleri sıfırla ve sıfırdan başlayarak tüm browserlarda aynı etkiyi oluşturabil. (En mehşuru Eric Meyer’in reset.css’idir.) Burada sorun şuydu: her şeyi sıfırlamak derken ciddilerdi ve şunu bile yapmamız gerekiyordu her başlangıçta: 

strong { font-family: bold; } 

Çok saçma değil mi? Bu yüzden en azından benim açımdan ciddi bir antipati vardı ve bunun gerçek çözüm olmadığına emindim kullandığım zamanlarda.

Normalize.css’in farkı nedir?

Normalize.css olaya biraz daha farklı bir bakış getirdi: Tüm browserları tamamen sıfırlamaktansa hepsini belirli bir zemine indirgeyelim, sıfırlanmasınlar ama aynı hizaya gelsinler; yani hepsi normalleşsinler. Çok doğru bir yaklaşımın sonucunda ortaya kodlar döküldü ve müthiş bir küçük kod yığını ortaya çıktı. Ayrıca tek fark genel mentalite değil tabii ki. Normalize.css HTML5 uyumlu, tarayıcı desteğinde mobili de kapsayan geniş bir yelpazeyi kapsıyor ve modüler yapısı ileri düzey kullanımda işinizi çok kolaylaştırıyor. Twitter Bootstrap, HTML5 Boilerplate, Guardian ve CSS Tricks‘in de normalize.css kullandığını söylersem herhalde anlattıklarımı yeterince kanıtlamış olurum.

Normalize.css’i nereden indirebilirim?

http://necolas.github.com/normalize.css/

Not: Verdiğim indirme linkinde iki farklı sürüm var, yeni sürüm IE8+ destekliyor sadece. Yani IE 6 ve 7′ye de destek vermek gibi gereksiz bir niyetiniz varsa lütfen v1.0.2′yi kullanın.

Normalize.css’i nasıl kullanırım?

Kullanımı son derece basit. Normalize.css dosyasını sitenize eklemeniz. Bunun için iki yol var:

1. Yol: HTML içerisinde:

<link rel="stylesheet" href="normalize.css" />

2. Yol: CSS içerisinde

@import url( "normalize.css" );

Resetlerin normalizeların ve prefixlerin olmadığı günleri heyecanla bekliyoruz…

 

Windows’tan Ubuntu’ya Geçiş

  • Yaklaşık bir hafta önce Windows 7 kurulu laptopımda Ubuntu kullanmaya başladım. Mevcut sürümüm 12.10 ve bundan yaklaşık 5 sene kadar önceki Ubuntu deneyimime göre vasatın altındaki işletim sistemi, yerine tam bir rekabete imkan veren bir işletim sistemine bırakmış.

Neydi beni cezbeden noktalar?
* Arayüzünün Windows’tan daha kolay ve bence şık olması.
* Karmaşanın az olması.
* Elim kolum olan uygulamaların Ubuntu için sürümlerinin olması (ki hepsinden fazlasıyla memnunum)
* Genel olarak terminal kullanmayı seven bir insan olduğum ve sunucu yönetimine de bir ucundan ilgim olduğu için Linux biraz daha yakın geliyordu bana. Terminal hastalığım ileri seviyede, ki bu başlı başına bir konu…
* Kısayolları daha aktif kullanabilme, kısacası mousea minimum düzeyde ihtiyaç duyma.
* Windows yüklü bilgisayara Ubuntu kurmanın-kaldırmanın hızı ve kolaylığı. (Yaklaşık 10dk sürüyor kurulum) Windows installer için buradan buyrun.

Eskileri de yok değil:
* Photoshop, Illustrator… Buraya tüm Adobe ürünlerini yazabiliriz ama benim için eksikliği hissedilenler bunlar.
* Dosya sistemi Windows’tan daha yavaş, en azından benim laptopımda.
* Her istediğiniz türden programı öyle ha diyince bulamazsınız.

Ubuntu’ya geçmemdeki asıl amaç ise web development için daha odaklanmış ve daha seri olabileceğim bir ortam sağlayabilme ihtimaliydi. Nitekim haklı çıktım, çünkü sürekli açık olan programların Ubuntu sürümleri stabil çalışıyorlar ve genel olarak daha derli toplu bir sistemde çalışmak verimi ister istemez arttırıyor. Dikkat dağıtıcı unsurlar çok daha az. Bunun yanına LAMP ortamı için bir şeyler üreten bir yazılımcı olarak Linux’ta işler biraz daha kolay. Windows sürümünün getirdiği çilelerle uğraşmıyorsunuz her şey olması gerektiği yerde. Ayrıca sunucu yönetimini de bu bahaneyle daha iyi öğreniyorum.

Kısacası, Ubuntu’yu kim beğenir kim beğenmez bilemem ama ben web developer olarak Windows 7′den Ubuntu’ya geçişi mantıklı görüyorum. (Zaten dual boot ile iki sistemi birlikte de kullanabilirsiniz.) Tabii Mac OS X’in tahtı henüz sarsılmış değil ancak elinizdeki Apple ürünü olmayan bilgisayarları da daha işlevli hale getirebilir, daha uygun çözümler geliştirebilirsiniz.

Neden “Italic”?

Neden “Italic”?

Internetle haşır neşir olmaya pek de gerek yok, bilgisayar kullanan hemen herkes bold, italic, underline, strike terimlerini devamlı görüyorlar. Bu kelimeler genel olarak işlevlerini tanımlayan kelimeler, yani bolden, underline ve strike için geçerli bu. Ancak az önce aklıma takılan şu oldu: “Neden eğik yazıya italic deniyor?”

İlk olarak aklıma tabii ki Pizza Kulesi geldi ve açıkçası bir aklıma da yattı da bu bir anda uydurulmuş teori.

İnternette şu esprinin bir klonuyla da karşılaşmış olabilirsiniz:

Pizza Kulesi - Italic

 

Daha sonra Wikipedia’ya baktım ve gerçekten tarihi sebepleri olduğunu öğrendim ancak asıl sebep kaligrafik yazı tipleri 15. ve 16. yüzyılda İtalya’da yazılmaya başladığı için “italic” deniyormuş. Hatta gereksiz bilgi olarak bu işin başlangıcını yapan adamlar Ludovico Arrighi ve Aldus Manutius imiş. Bu da benim Pizza Kulesi teorimi çürütmüş oldu :)

Orijinal dilinde okumak isteyenler için: http://en.wikipedia.org/wiki/Italic_type

WordPress Fonksiyonlarına ve Classlarına Dışarıdan Erişim

WordPress için eklenti veya tema geliştirenler iç kaynaklarının ne kadar iyi olduğunu bilirler. Bütün sisteme erişebileceğiniz ve gereken tüm müdahaleleleri yapabileceğiniz müthiş bir mimarisi var yazılımın. Ancak bazen alakasız bir php dosyası içerisinden aynı sunucudaki wordpress sitenize müdahale yapmak istersiniz ve wp’in kendi classlarını kullanabilmek mükemmel olacaktır. Çözümü çok basit. Kullanmak istediğiniz sayfaya şu kodu yerleştirmeniz yeterlidir:

1 2  Scroll to top