Yaklaşık 4 senedir Mac ve aynı zamanda terminal kullanıyorum. Mac’in kendi terminali yerine biraz daha özellikli diye Mustafa Paltun‘un önerisi ile iTerm kullanmaya başladım.

iTerm Kurmak

iTerm açık kaynak bir program. Kurulumu http://iterm2.com/ sitesinden indirip yapabilirsiniz.

Kısayol kullanımın önemi

Bir programı kullanıyorsanız hız için kısayolların kullanımı önemlidir. Bence kullandığınız programların kısayollarını öğrenmek kod yazan insanın olmazsa olmazı olmalı. iTerm’ün belli başlı kısayollarını sıralayalım.

  • Cmd(⌘) + , iTerm Özellikler penceresini açar
  • Cmd(⌘) + T Yeni Sekme(Tab) açmak için
  • Cmd(⌘) + → ve Cmd + ← Sekmeler arasında geçiş için
  • Cmd(⌘) + D Ekranı dikeyde ikiye bölerek pencereyi çoklar.
  • Cmd(⌘) + Shift(⇧) + D Ekranı yatayda ikiye bölerek pencereyi çoklar.
  • Cmd(⌘) + Alt(⌥) + →, Cmd(⌘) + Alt(⌥) ←, Cmd(⌘) + Alt(⌥) ↑ ve Cmd(⌘) + Alt(⌥) ↓ Pencereler arası geçiş sağa, sola, yukarı ve aşağı
  • Cmd(⌘) + Shift(⇧) + Enter(↵) Mevcut pencereyi geçici olarak genişletir. İkinci kez aynı tuşlar eski haline getirir.
  • Cmd(⌘) + W Ekranı kapatır
  • Cmd(⌘) + F Arama kutusunu açar
  • Cmd(⌘) + G Arama sonuçları arasında geçiş
  • fn + ← Satır başı (Bu mac’in kısayolu galiba)
  • fn + → Satır sonu (Bu mac’in kısayolu galiba)
  • Cmd(⌘) + - Metinleri küçült
  • Cmd(⌘) + kntrl + - Metinleri büyüt

Özel kısayol tanımı

iTerm’de kendimize özel kısayollar da ekleyebiliyoruz.

Özellikler penceresini açalım (Cmd(⌘) + ,) Keys sekmesinden mevcut kısayollara kendi istediklerimiz ekleyebiliyoruz.

Örnek yapalım. Örneğin tek kelimeyi silmek ve tüm satırı silmek için Alt(⌥) + Backspace(⌫) ve Cmd(⌘)+Backspace(⌫) tanımlarını yapalım.

enter image description here

  • Alttan artı(+) işaretine basıp yeni bir ekleme yapıyoruz.
  • Keyboard Shortcut‘a ekleyeceğimiz kısayolunu tuşluyoruz.
  • Action kısmından Send Hex Code seçiyoruz
  • Alttaki girdi alanına kelime silmek için 0x17
  • Aynı yolu tekrar uygulayarak satır silmek için 0x15 giriyoruz.

Kısa yol tanımlarımız tamam, artık kullanabiliriz.

Bulunan kelimenin satırına gitmek

Bu özellikte süper. Bu özelliği kullanmak için önce iTerm’den Sublime Text açmak için subl ayarını yapmamız gerekiyor. Detaylı bilgiyi buradan alabilirsiniz. Bu ayarı yaptıktan sonra; Profiles > Advanced > Semantic History

Semantic History sekmesinde girdi alanına aşağıdaki kodu yazalım.

/usr/local/bin/subl \1:\2

Ayar tamam. Şimdi bu özelliği uygulamak için git grep -n ile arama yaptıktan sonra Cmd(⌘) + click ile dosyaya tıkladığımızda ilgili satıra gideriz.

enter image description here

Cmd(⌘) basıp metnin üzerine gelince el işareti çıkıyor, ekran görüntüsünde gözükmemiş.

Özellik süper değil mi?

Karakterler arasında gezmek

Örneğin bir satır kod yazdık ve ortada bir yerde yanlışlık yaptık o kelimeye gitmek istiyoruz. Bunu yapmak için genelde o kelimeye kadar silip yeniden yazarız, ancak şimdi yapacağımız tanımlama ile daha basit bir çözüm bulacağız.

  • iTerm Özellikler penceresini açalım(Cmd(⌘) + ,) ve Keys sekmesine gidelim.
  • Alttan artı(+) işaretine basıp yeni bir ekleme yapıyoruz.
  • Keyboard Shortcut‘a ekleyeceğimiz kısayolu tuşluyoruz. Alt(⌥) + ← ve Alt(⌥) + →
  • Action kısmından Send Escape Sequence seçiyoruz
  • Ecs+ alanına önceki karaktere gitme kısayolu için b
  • Aynı yolu izleyip sonraki karaktere geçme kısayolu için f giriyoruz.

Sonra Alt(⌥) + ← ile önceki kelimeye Alt(⌥) +→ ile sonraki kelimeye geçebiliyoruz.

jekyl serve --config _config_dev.yml

jekyl yanlış yazmışım mesela bunu düzeltmek için satır başına(fn + ←) gidelim, sonra kelimeler aradına gezmek için kısayollara gidip aşağıdaki gibi bir tanım yapmalaıyız.

enter image description here

Geçmiş kodların listesi

Önceki yazdığımız kodların listesini görmek için Cmd(⌘) + Shift(⇧) + H kısayolunu kullanıyoruz.

enter image description here

Daha efsane olan. Cmd(⌘) + Alt(⌥) + B ile altta çıkan bardan “oynat Uğurcum” yapabiliyoruz.

enter image description here

Otomatik tamamlama

Bir kaç karakter girdikten sonra Cmd(⌘) + Shift(⇧) + ; basarak daha önce kullandığınız ve girdiğiniz karakterlere uyan öneriler sunuyor. Burada şöyle bir şey var ilgili panelin geçmişinde arama yaptığı için daha faydalı oluyor.

enter image description here

Ayrıca https://iterm2.com/features.html göz atmanızı öneririm.

Kaynaklar

HTML5 API’leri, mobil uygulamalarda olup web sayfalarında kullanamadığımız özellikleri API olarak ekleyerek eksikleri gideriyor. Bunlardan bir tanesi de Web Notification API. Mobil uygulamlarda kullanıcıya anlık bildirimler göndermek için kullanılan bilgileri bu API sayesinde web sayfalarımızdan da yapabiliyoruz.

HTML5 ve CSS3 özellikleri hala geliştirilmekte olduğu için zamanla değişim gösterebiliyor. Bu özellikte ilk çıktıktan sonra güncellendi ve 19 Nisan 2014’de onaylanarak kararlı hale geldi.

Kullanıcıyı bilgilendirmek için çok güzel bir yöntem.

Bu işi nasıl yaptığımıza bakalım.

Tarayıcı desteği kontrolü

İlk olarak kullanıcının tarayıcısı bu özelliği desteliyormu kontrolünü yapalım.

// İlk kontrol tarayıcının bu özelliği destekleyip desteklemediğini sorgulamak
if (!("Notification" in window)) {
  alert("Bu tarayıcı web bilgilendirme özelliğini desteklemiyor.");
}

Burada uyarı vermek yerine desteklemeyenler için çözüm üreten sistemler entegre edilebilir. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#notification-api

Kullanıcıdan izin alma kısmı

HTML5’in yeni API’lerinde bir özelliği kullanıcıya sorupta kullanma pratiği yaygınlaşıyor. HTML5 Bildirimlerinde de aynı durum söz konusu. Kullanıcıya bildirim almak istermisin diye soralım.

// Daha önce kullanıcı izin verdi ise
else if (Notification.permission === "granted") {
    // Bilgilendirme popup'ını çıkaralım.
    var notification = new Notification("Merhaba dünya!");
}

Eğer onay yoksa tekrar onay isteme ve bildirim oluşturma kısmı

// Eğer onay yoksa
else if (Notification.permission !== 'denied') {
// Kullanıcıdan onay ise
Notification.requestPermission(function (permission) {
  // Kullanıcı onaylamadı ise tekrar soralım
  if (permission === "granted") {
    // onaylarsa bilgilendirme popup'ı aç
    var notification = new Notification("Merhaba dünya!");
  }
});
}

Kod kısmı bu kadar basit. Daha detaylı bildirimlerde oluşturabiliyoruz.

Başlık, içerik, ikon, etiketleme, metin başlangıç yönü ve dil seçeneklerini tanımlayabiliyoruz.

HTML5 bilgilendirme

Tarayıcı Desteği

Chrome explorer Firefox
22 - 22

Mobil Tarayıcılar

Android Mobil Safari Chrome
- - -

Mobil tarafında sadece Firefox(onunda desteği az) destekliyor. Diğer mobil tarayıcılar da desteklerse süper olacaktır.

Kaynaklar

Herkesin dilinde olan responsive web tasarımı nedir? Farklı çeviri önerileri var, ben Uyumlu web çevirisini beğendim ve bundan sonra Uyumlu web diye kullanacağım.

Uyumlu web; kısaca farklı çözünürlükler için tasarlanan ve kodlanan web sayfalarına denebilir. Burada şöyle bir yanlış anlaşılma var; farklı araçlar için değil farklı çözünürlükler için sayfa üretmeye uyumlu web diyoruz.

Uyumlu web çıkış noktası mobil cihazların yaygınlaşması ile oldu. Aslında mobil cihaz değilde akıllı telefonların yaygınlaşması ile ihtiyaç haline geldi desek daha doğru olacak. Çünkü ilk nesil mobil araçlar pekte internete girilesi telefonlar değildi. Zamanında Siemens S 35(Bende vardı :) ile internette dolaşmak bir hayaldi. Ne zamanki bilgisayara benzer mobil araçlar çıkmaya başladı, yani telefonlar akıllandı, işte o zaman web siteleri için bir ihtiyaç doğdu. Artık insanlar bir çok ihtiyacını mobil aracı(akıllı telefon, tablet vs.) ile hallediyor.

Sahibinden.com sitesine mobil araçlar ile giren kullanıcı oranı %32(Aralık 2014 verileri) civarında. Bu siteyi gezenlerin neredeyse 1/3’ünün mobil üzerinden geldiğini gösteriyor.

Durum böyle olunca masaüstü için tasarlanan ve kodlanan web siteleri mobil cihazlar için nasıl uyumlu hale getiririz konusuna yoğunlaşan kod yazarlarının imdadına uyumlu web yetişti. Her ne kadar mobil uygulamanın yerini tutmuyor diyenler olsa da, bence gayette tutar. Yeter ki baştan iyi projelendirilip kodlansın.

Bir arada masaüstü için farklı mobil için farklı site tasarlanıp kodlamayı seçenler olsa da, bu işten yavaş yavaş vaz geçiliyor.

Uyumlu Web

Yukarıdaki resimdeki örnekte görüldüğü gibi tarayıcınızın genişliğini değiştirdiğinizde farklı tasarımlar görmektesiniz. Bu sayede siteniz farklı araçlara aynı kaynak üzerinde uyumlu hale gelmiş oldu. Tabi web sitelerini uyumlu hale getirmek emek isteyen bir çalışma gerektirmektedir. Üç liraya beş köfte olmuyor maalesef. Projelenmesinden tasarımına ve kodlanmasına kadar eski alışkanlıklarınızı değiştirmemiz gerekiyor.

Niçin Uyumlu web sayfaları yapmalıyız

Tamam iyi güzel de web sitelerimizi niçin uyumlu hale getirmeliyiz? Bu soru aslında avantajları sıralamak için bir başlık. Yani uyumlu web sayfaları kodlamanın avantajları nedir?

Tüm platformlarda web siteniz düzgün görünür

Uyumlu web sayfaları kodlayarak farklı platformlar için kodlanan sayfalar tüm platformlarda aynı standartta ve görsellikte kullanıcıya görünecektir. Benzer kullanıcı deneyimi ile sitenize kullanıcıların aşinalığını bozmadan farklı mecralardan gezmelerini sağlamış oluruz.

Daha az çalışma zamanı

Uyumlu web sayfası hazırlarken bir site üzerinden tüm platforma ait işler yapılırken. Diğer seçeneklerde akıllı telefonlar için ayrı, masaüstü için ayrı, tabletler için ayrı kodlama yapmak gerekir. Bu da çok büyük bir zaman kaybına neden olur.

Uyumlu web ile tüm platformlar için tek elden site yönetimi sağlanır. Websiteniz her platformdan erişilebilir olur. Doğru bir yapı kurarak ileride ortaya çıkabilecek farklı araçlar için otomatik çözüm üretmiş olursunuz.

Bakım kolaylığı

Web sitenizin birden çok farklı sürümünü oluşturmak hantal bir yapı ve yavaş bir içerik yönetimine neden olur. Bir güncelleme yapmak için her platform(iphone, ipad vd.) için ayrı ayrı iş yapmak gerekir. Uyumlu web sayfalarında ise tek bir yerden yapılan güncelleme ile tüm platformlar aynı anda güncellenmiş olur. Uyumlu web sayfalarında farklı sürümler ve bunların güncelleme sorunları ile uğraşmazsınız.

Daha az para

Farklı platformlar için uygulama veya site yaptırmak fazladan para harcamasına neden olacaktır. iPad uygulaması için ayrı emek ve para, iphone için ayrı emek ve para, Android uygulaması için ayrı emek ve para, masaüstü site için ayrı emek ve para harcaması bir çok şirket için büyük bir gider kalemi olarak görülebilir.

Uyumlu web sayfaları ile tek bir site ile bu farklı araç ve platformlara tek yerden çözüm ve tek ödeme yapma imakanımız var. Patronlar, kulağa hoş geliyor değil mi?

Arama motorlarında daha iyi sonuç

Arama motoru deyince akıllara hemen google geliyor. Google web sayfası geliştirenlere uyumlu sayfalar oluşturmaları yönünde destek vermektedir. Aramalarda daha değerli olacağını söylemektedir. Arama sonuçlarında mobile uygun ibarelerini koyuyor artık google.

Tek bağlantı üzerine içeriği zenginleştirmek size büyük avantaj sağlar. Diğer seçeneklerde farklı araçlar farklı url’leriniz olduğu için her biri için tek tek seo çalışmanız gerekecektir.

Ayrıca aynı içeriğin tekrar tekrar farklı adreslerden yayınlanması google’un istemediği bir durumdur. Tekrarlanan içerikten dolayı google’un cezalandırmasına uğrayabilirsiniz.

İleriye dönük uyumluluk

Uyumlu web sayflarının esnekliği sayesinde yeni çıkacak olan araçlar ve platformlara hemen uyum sağlama imkanı sağlıyor. Yeni yeni filizlenen giyilebilir teknolojiler için ayrı bir site yapmak yerine mevcut sitenizi giyilebilir araçlara uyumlu hale getirmek için ufak bir iki değişiklik yapmak yeterli olacaktır.

Paylaşıma tek çözüm

Paylaşım yapılan bir sayfamızın farklı platformlardan erişiminde sorun yaşamayız. Diğer seçeneklerde iki farklı url’leden dolayı sorun yaşanır. Örneğin akıllı telefondan bakarken paylaşılan bağlantıya masaüstü kullanıcı açtığında karşısına mobil için tasarlanmış sayfa gelir. Buda güzel bir deneyim olmaz.

Yüksek tarayıcı destek oranı

Uyumlu web sayfaları kodlarken kullandığımız @media sorgularını ie8 hariç tüm tarayıcılar desteklemektedir. Şu an ki orana baktığımızda tarayıcı destek oranı %97’dir. Bu oran çok yüksek bir oran.

Sonuç

Sonuç olarak baktığımızda arkasına aldığı rüzgar ile eksiklerinide yakın zamanda gidereceğini düşünürsek web sitelerinin uyumlu web dünyasına hızlıca gireceğini tahmin etmek çok büyük bir kehanet değildir. Resim ve performans sorunları için üretilen çözümler ile ihtiyaçları tam karşılayan bir yapı olarak önümüze çıkıyor uyumlu web.

Kalın sağlıcakla.

Kaynaklar

HTML sayfalarına CSS, Javascript, resim video, ses vd. dosyaları ekleyebilirken diğer html dosyalarını eklemek için iframe, ajax isteği ile veya çakma script dosyası gibi gösterilmiş html dosyaları ile ekleyerek yapıyorduk/yapıyoruz. HTML import ile artık html dosyalarımızı html içine ekleyebileceğiz.

HTML kodlama yapımızı değiştirecek bu yapıyı henüz sadece Chrome ve Chrome alt yapısını kullanan tarayıcılar(Opera ve Chrome mobil) destekliyor.

HTML içine HTML’i eklerken normal CSS ve Javascript ekler gibi ekliyoruz. Bir iki farklı yanı var. İlk fark rel=”import” kısmı. İkinci fark ise direk HTML içine eklenmiyor içerik. Bu kod ile tarayıcı yüklüyor, sahne arkasında saklanarak kulanıma hazır hale geliyor. Biz kullanmak istediğimizde javascript ile bu içeriği ekliyoruz.

Kullanımı;

<head>
  <link rel="import" href="/sablonlar/ekmek.html">
</head>

Önemli bir not: Bu yöntem ile aynı domain altındaki dosyaları ekleyebiliyoruz. Farklı domain’den çağıralacak dosyalar için CORS özelliğinin açılması gerekmektedir.

Daha sonra işin içine javascript giriyor.

<link rel="import" id="sablon" href="ekmek.html">

İlk olarak javascript ile daha kolay erişmek için import koduna bir id=”sablon” ekleyelim. Daha sonra ayrı html dosyası oluşturalım mevcut HTML’in içine ekleyeceğimiz.

ekmek.html;

<section id="icerik">Ekmke 1 TL</section>

Mevcut HTML’in body kısmında javascript ile import elemanını yakalayalım.

var ekmekAl = document.querySelector('#sablon');

Sonra içe aktracağımız HTML’in içindeki elemanı yakalayalım.

var ekmekIci = ekmekAl.import.querySelector('#icerik');

Son olarakta aldığımız bu içeriği mevcut HTML içine ekleyelim.

document.body.appendChild(document.importNode(ekmekIci, true));

Sonuç aşağıdaki ekran görüntüsündeki gibi olacaktır.

HTML import

Örnek bir dokümanı oluşturup, kendi bilgisayarınızda açtığınızda yukarıdaki sonucu göremeyeceksiniz. Görmek için bir Server’a ihtiyacınız olacak. Örneğin http://localhost gibi bir urlde erişmeniz gerekecek.

Eklenen html dosyası CSS ve Javascript dosyaları gibi mevcut HTML’in yüklenmesini bloklayacaktır. Bunu engellemek için async özniteğini eklemek yeterlidir.

<link rel="import" id="sablon" href="ekmek.html" async>

Desteklemeyen tarayıcılar için

Bu özelliği başta belirttiğim gibi sadece Chrome tabanlı tarayıcılar desteklemektedir. Peki desteklemeyenler için bir çözüm yokmudur derseniz. İlk olarak bu özelliği taracının destekleyip desteklemediğini kontrol etmek için

if ('import' in document.createElement('link')) {
    // HTML imports destekleniyor
} else {
    // HTML imports desteklenmiyor.
}

böyle bir javascript kodu var. Ayrıca Polymer grubunun ürettiği HTMLImports adlı bir çözüm var.

Sonuç

Bir çok alanda kullanılabilecek güzel bir yapı. Benim ilk duyduğumda sadece html ile yapılan bir yapı olduğunu düşünmüştüm. Sonra işin içine javascript girdiğini öğrendiğimde biraz soğudum, ama buda iyidir. Sadece html ile yapmak daha güzel olurdu.

Sonuç olarak güzel bir özellik ama bazı sorunlarıda beraberinde getiriyor. Örneğin sonradan javascript yardımı ile eklenen html arama motorlarının tarama alanı dışana çıkması sorunu oluşturacaktır. Google’un javascriptleri yorumlayacağı durumda bu sorun olmaktan çıkacak gibi. Ama henüz erken.

Kaynaklar

HTML’de bir dokümanı kullanıcıya indirtmek için bir bağlantı verdiğimizde parantez içinde “sağ tılayın ve çıkan menüden farklı kaydet’e basın” ibaresini yazardık. Bu konuda farklı çözümler var; tarayıcıya eklenti kuranlar, .htcacces’den ayar yapanlar filan. Tabi kullanıcılar için çok iyi bir deneyim değil ve kod yazanlar için ayrı bir uğraş gerektiren çözümler. W3C bunu fark etmiş olmalı ki bize basit ve güzel bir çözüm üretmiş.

HTML5 download özniteliği

Kullanımı çok basit;

<a href="dersin_dokumani.pdf" download>Dersi indir</a>

Yukarıda görüldüğü gibi gayet basit bir çözüm var.

Ayrıca bu özniteliğe bir değer atayıp indirilen dosya ismini belirleyebiliyoruz.

<a href="dersin_dokumani.pdf" download="html5">Dokümanı indir</a>

Dinamik üretilen bağlantılar için güzel bir çözüm bence;

<a href="rapor_20141223.pdf" download="rapor">Raporu indir</a>

Ayrıca inidirilecek dokümanın formatını değiştirebiliyoruz.

<a href="http://fatihhayrioglu.com/last-child-secisi/index.html" download="last_child.txt">last-child seçicisi makalesini indir(txt)</a>

Örnek: last-child seçicisi makalesini indir(txt)

Dosya eğer bağlantı ile aynı domain değilse Firefox eski indirme alışkanlıklarına dönüyor.

Tarayıcı Desteği

Chrome explorer Firefox
14 - 20

Mobil Tarayıcılar

Android Mobil Safari Chrome
4.4 - 39

Kaynaklar