Gökhan Turunç

Front-End / Javascript Developer @n11.com

[gokhanturunc]

Ondalıklı Object key'lerini sort etmek

Tarayıcıların kullandıkları Javascript motorları farklı olduğundan bazılarında -- en azından Firefox ve Chrome için net konuşabilirim ( zaten geriye birşey kaldı mı ? ) -- Ondalıklı set edilen object key'lerini sort ederken sorunlar yaşayabilirsiniz. Örnek vermek gerekirse:

var variants = { 44: { title: '44 numara' }, 44.5: {title: '44 buçuk numara'}, 45: { title: '45 numara' } };

x,y ya da z şekli ile bu "variants" object'si içerisinde dönün, sıralama şu şekilde olacaktır:

44

45

44.5

Çözümü ise:

var keys = Object.keys(variants).sort();

keys.forEach(function(i) { // do anything. });

Aslında sorunu çözmüyoruz da arkasından dolaşıyoruz gibi oluyor. Object içerisinde dönmek yerine, key'lerini alıp key => value pair ile gerekli işlemleri yapıyoruz.

Not: Blog yazmada kötüyüm, kabul :/

[gokhanturunc]

undefined array elemanlarını silmek

array'den map ile yeni bir array oluşturduğunuz zamanlarda ortaya çıkar hep şu undefined elemanlar -- bu kadar çok ortaya çıkacak ne vardı ki? --

Hep başa bela olurlar. Bunlardan kurtulmanın ne kolay yolu ise yine bir Array methodu --> Array.prototype.filter

Örnek olarak:

[5, 10, 15, 20, true, false, 'Ali', 'Ayşe', 'Fatma'] diye bir array olsun. İçerisinde sadece true yani boolean değer olanlardan yeni bir array oluşturmak istediğimizi farzedelim. Bunun için:

[5, 10, 15, 20, true, false, 'Ali', 'Ayşe', 'Fatma'].map(function(i) {

     if (i === true) { return i; }

});

Çıktısı şu şekilde oluyor: 

[undefined, undefined, undefined, undefined, true, undefined, undefined, undefined, undefined]

Hayda... Ne yapayım bu kadar undefined'ı. Nereye sıçacağız??

Kolay yol şu şekilde: 

[5, 10, 15, 20, true, false, 'Ali', 'Ayşe', 'Fatma'].map(function(i ){ if (i === true) return i; }).filter(Boolean);

Hop: [true] geldi.

.filter(Boolean) ==> Boolean burada constructor method olduğundan dolayı filter içerisinde tek tek elemanları kontrol ediyor ve "true" değerini her match eden elemanı "return" ediyor.

Bu filter yönetimini daha çok mantıksal ve matematiksel değerlerin tutulduğu dizilerde uygularsanız daha sağlık olur!.

[gokhanturunc]

"Same Origin Policy" ile iki farklı Window arası haberleşme

Ola ki -- ki inşallah böyle birşey yapmaya ihtiyacınız olmaz -- iki farklı domain ile iki window arasında haberleşme ihtiyacınız doğdu; karşılacağınız hata şu olacaktır:

Uncaught SecurityError: Blocked a frame with origin "http://www.localhost.com" from accessing a frame with origin "http://dev.localhost.com". Protocols, domains, and ports must match. 

Bu örnekte her ne kadar domain'ler aynı olsa da; güvenlik açısından kullanılan protocol ve port numarasına kadar herşeyin aynı olması bekleniyor. Bu durumda en ufak bir değişiklik sonrası iletişime izin verilmiyor. Yani:

parent window:

var child = window.open('http://dev.localhost.com/set-title');

window.setTitleToForm = function(title) {

     document.getElementById('title').value = title;

};

ile diğer ekranı açtık ve açılan ekran içerisinde belirli bir durumda parent window da tanımlı olan bir fonksiyonu çalıştırıp iş akışına devam edeceğiz.

child window

window.opener.setTitleToForm('iPhone 5S'); dediğimizde alacağımızı hatayı yukarıda belirtmiştim.

Gelelim çözüme...

Bu sorunu çözmek adına "document.domain" property'sini kullanıyoruz. Aynı domain name prefixi içerisinde değişiklik yapabiliyoruz.

Yani:

document.domain = 'localhost.com';

dediğimizde artık iki window'unda ( her iki window'a da yazılması şartıyla ) domain'leri eşit oluyor ve tarayıcı iletişime izin veriyor.

NOT: Aslında iki window arası haberleşme için HTML5 postMessage daha güzel bir örnek olurdu ama vakit bulamadım...

[gokhanturunc]

client-side ile screenshot

Şuan çalıştığınız projede önünüze bir ekran görüntüsü ile ilgili bir feature koysalar ne düşürdünüz? "acaba ne ile screenshot alsam?" dimi? Heh, bende yaklaşık olarak aynı sebepten ötürü bu konuda biraz araştırma yaptım ( poc amaçlı ). Bu tür konularda önünüze iki seçenek çıkıyor:

Client-side screenshot almak

Server-side screenshot almak

Server-side teknolojilere çok bakmadım. Ancak aklıma ilk olarak PhantomJS geldi. PhantomJS, aslında sadece screenshot almak değil ancak yapısı itibariyle bu işi gayet şukela bir şekilde yapabiliyor. PhantomJS kullanmakta işimi görüyordu, ancak server-side bu işi yaparsam kullanıcının etkileşimlerini çok yakalamıyordum. Yani; bir lightbox açıldığında, tab değiştiğinde vb.

Bunun içinde bu işi client-side yapmak daha mantıklıydı. Bunun içinde html2canvas diye bir library buldum. Bu arkadaş HTML5'n nimetlerinden son derece faydalanıyor diyebiliriz. 

html2canvas(element, options);

element: HTMLElement sınıfından türeyen herhangi bir obje verilebilir. Bu sayede screenshot alınmak istenilen nesne / alan belirlenir. 

"options" tarafını anlatmaya gerek yok zaten documentation içerisinden çok rahat bakılabilir ve araştırabilir. Burada sıkça kullanacağımız "onrendered" methodu var. Buraya bir fonksiyon tanımlayıp, screenshot sonucu oluşan base64 data'yı kullanıp, istersek sayfa üzerinden gösterim yapabilir istersekte veriyi back-end'e paslayıp işleyebiliriz.

Not olarak şunu belirtmem gerekiyor ki eğer çakallık yapayım "abi ben body element'ini verip ekranın komple görüntüsünü alayım" derseniz sorun yaşarsınız. Çünkü sadece visible alan üzerinden işlem yapıyorsunuz -- eğer sayfada scroll varsa --. Bu sorun üstüne çok durmadım. Belki bir çözümü vardır yada ben becerememişimdir.

[gokhanturunc]

nedir bu "void"?

Javascript 1.1'den itibaren kullanımda olan bu void fonksiyonunu genellikle <a> element'ine tıklanıldığında herhangi bir işlem yapmaması için kullanılır.

<a href="javascript: void(0);">yav he he</a>

Void, parametre olarak expression alır ve undefined olarak geri döner. Expression'dan kastım herhangi bir javascript kodu. İyi de o zaman eval ile ne farkı var?

Eval, tamamen Javascript kod bloğu içerisinde string tipinde yer alan expression / code evaluate eder.

Void'i ise HTML içerisinde yukarıda verdiğim örnek gibi kullanırız. For example:

<a href="javascript: void(document.body.style.backgroundColor='green');">yeşil renk</a>

Atladığım / yanlış bilgilendirdiğim birşey olduysa dürtün efenim.