Çok güzel bir şey buldum, Google!

İlkokul yıllarında ödevlerimi yapmak için Ana Britannica kullanıyordum. Daha doğrusu ailem onu kullanıyor ve ben de okuyarak defterime geçiriyordum. Aynı dönemde okuduğum tüm arkadaşlarım da aynı akışı gerçekleştiriyordu tabii.

Sonra büyüdük, Google’ın varlığı ile birlikte artık ansiklopedi kullanmaya ihtiyaç duymuyor, Vikipediye giriş yapabildiğimiz zamanlarda bir “copy-paste” ile ödevimizi tamamlayıp ödev dışı etkinliklerimize daha çok zaman ayırabiliyorduk. Evet çoğumuzun ödevinde altı çizgili bir bağlantı ya da madde işaretçisi vardı tabii ama en azından Google’a arayacağımız metni, onunla bağlantılı olacak kelimeleri yazabilme zahmetine giriyorduk.

Üniversiteye geçtiğimde ve bunu takip eden iş hayatımda ise olayların rengi değişmiş, etrafımda Google’a birkaç kelime yazmaya üşenen ya da yazdığı kelimelerle arama sonucuna ulaşamayıp, “Aaa! Bulamadım” diyen insan sayısı artmaya başladı. Bu çevrenin büyük bir kısmının Bilgisayar Mühendisliği öğrencisi olduğu düşünülürse durumun vahameti daha da iyi anlaşılacaktır.

-Google’da aradım ama bulamadım.

-Hadi canım!

Sonuç olarak araştırdığınız şeyi aradığınız kelimelerle bulamıyorsanız, kelimeleri değiştirin.

Javascript ile JSON Array içerisinde arama işlemleri

Eğer web geliştiriciliği yapıyor ya da bir API ile çalıştıysanız, JSON ile haşır neşir olmuşsunuzdur. Front-end ya da nodejs ile back-end tarafında JSONlardan oluşan bir array içinde arama yapmak istiyorsanız ECMAScript6 ile gelen find(), findIndex() ve filter() metodu sizin için çok uygun demektir.

find metodu, dizi içindeki aradığınız şartı sağlayan ilk değeri size geri döner. Eğer bir değer bulamaz ise undefined dönecektir. (MDN)

findIndex metodu, dizi içerisinde aradığınız şartı sağlayan ilk değerin index yani sırasını size dönecektir. Eğer değer bulumaz ise -1 dönecektir. (MDN)

filter metodu, dizi içerişinde aradığınız şartı sağlayan değerleri içeren yeni bir array dönecektir. Eğer şartları sağlayan bir obje bulunmaz ise boş dizi dönecektir. (MDN)

Amaç

Verilerimizin bulunduğu JSON dizisi içinden, istenen değere sahip veriyi bulmak.

Örnek

Örneğin elimizde aşağıdaki gibi bir dizi olsun. Bu dizi içerisinde kullanıcı adı Pete Lau olan kullanıcıyı bulmaya çalışalım. Bu arada merak edenler için Pete Lau kimdir?

var jsonArray  = [
  {
    ID: '199',
    Username: 'Alperen Özlü',
    Website: 'http://aozlu.com'
  },
  {
    ID: '200',
    Username: 'Larry Page',
    Website: 'http://google.com'
  },
  {
    ID: '201',
    Username: 'Pete Lau',
    Website: 'https://twitter.com/petelau2007'
  }
]

Eğer yazı boyunca anlatacağımız metodları kullanmayacak olsaydık, muhtemelen yazacağımız kod şöyle olacaktı.

var searchResult;
for(var i = 0; i < jsonArray.length ; i++){
  var current = jsonArray[i];
  if(current.Username == "Pete Lau"){
    searchResult = current;
  }
}

Fakat veri büyüdükçe ve karmaşıklaştıkça bunu yapmak gitgide zorlaşacağı için, bir de find metoduna bakalım.

 var searchResult = jsonArray.find(s=> s.Username == "Pete Lau");
 var searchResult = jsonArray.find(s=> s.Username == "Alperen Özlü" && s.ID == "199");
 var searchResult =  jsonArray.find(s=> s.Username == "John Doe");

Eğer bu dizi içerisinde aradığımız özelliğe sahip birden fazla veri var ise, ECMAScript5 ile gelen filter() metodunu kullanabiliriz.

Örneğin, websitesi bulunan kayıtları çekmek istersek aşağıdaki kodu yazabiliriz.

var searchResults = jsonArray.filter(s=> s.Website != "")

Yazının başında findIndex metodu ile ilgili de bahsettiğim için, onunla ilgili de örnek yazalım.

var searchResult = jsonArray.findIndex(s=> s.Website == "http://google.com")

Sonuç olarak,
Dizi içerisinde bir döngü başlatarak, döngünün sonucunda çıkan değeri bir değişkene atamak ya da diziye eklemek biraz eski ve zahmetli bir iş gibi duruyor. Bunun yerine yazıda bahsettiğim metodları kullanabiliriz.

Uyumluluk

Maalesef uyumluluk konusunda ufak bir problemimiz var :). find ve findIndex metodları, sadece Chrome, Firefox, Edge, Safari 7.1, Safari Mobile 8 ve Firefox Mobile tarafından destekleniyor.

Filter metodu ise modern tarayıcılar, IE9 ve üzeri destek veriyor.

Fakat geriye yönelik destek verebilmek için tarayıcılar ve nodejs için pollyfill kullanabilirsiniz. Pollyfill jsleri için bağlantılar,

  1. https://github.com/paulmillr/Array.prototype.find (tekil)
  2. https://github.com/paulmillr/Array.prototype.findIndex (tekil)
  3. https://github.com/paulmillr/es6-shim (es6 için çoğul)
Regex

C# ve PHP | E-posta adresinin bir kısmını gizlemek

Şifremi unuttum sayfalarında genellikle e-posta ya da kullanıcı adınızı yazın şeklinde bir uyarı görürsünüz, bu alanlarda eğer kayıtlı kullanıcı varsa genelde mail adresinize şifreniz gönderildi gibi bir mesaj görürsünüz. Peki üyeniz kullanıcı adını yazdıysa ve e-posta adresini hatırlamıyorsa ne yapmanız gerekiyor?

Kullanıcı adı girildiğinde cevap olarak e-posta adresini döndürmek pek güvenli bir yöntem değildir, çünkü brute force ile kullanıcı adları denenerek sisteminize üye olan kişilerin e-posta adresleri ele geçirilebilir. Bazı e-posta sağlayıcılar şifremi unuttum kısmında ikincil mailinizi a*********o@gmail.com şeklinde gizleyerek sizin güvenliğinizi sağlamaktadır. İşte vereceğim regex ve örnek program kodları sizin bu gizlemeyi yapmanızı sağlayacak.

string regex = @"(?<=.).(?=.*.{1}@)";

Örnek programlar

C# ile E-posta Regex

using System.IO;
using System;
using System.Text.RegularExpressions;

class Program
{
    static void Main()
    {
        string regex = @"(?<=.).(?=.*.{1}@)";

        Console.WriteLine(Regex.Replace("johndoe@hotmail.com", regex, "*"));
        Console.WriteLine(Regex.Replace("lastsamurai@gmail.com", regex, "*"));
        Console.WriteLine(Regex.Replace("alperen@eposta.com", regex, "*"));
        Console.WriteLine(Regex.Replace("john@okul.edu.tr", regex, "*"));
        Console.WriteLine(Regex.Replace("joe@gmail.com", regex, "*"));
        Console.WriteLine(Regex.Replace("jn@gmail.com", regex, "*"));
    }
}

PHP ile E-posta Regex

   $regex = '/(?<=.).(?=.*.{1}@)/u';
   echo preg_replace($regex,'*','johndoe@hotmail.com');

*preg_replace -> PHP 4+ üzerinde çalışmaktadır.
Örnek çıktılar:

j*****e@hotmail.com
l*********i@gmail.com
a*****n@eposta.com
j**n@okul.edu.tr
j*e@gmail.com
jn@gmail.com

Regex yazımı ve fikir için Fikri Abi’ye teşekkürler 🙂

Javascript İle Ekran Görüntüsü Almak

html2canvas tarayıcı üzerinden ekran görüntüsü almanızı sağlayan javascript kütüphanesi. Kütüphane tüm işlemleri istemci üzerinde yani tarayıcı üzerinde gerçekleştiriyor.

Kullanım

Kütüphanenin kullanımı oldukça basit, çağırdığımız fonksiyon element ve seçenekler şeklinde 2 değer alıyor. Element olarak hangi alanın ekran görüntüsünü almak istediğinizi geçebilirsiniz, seçenekler içinse şu sayfayı kontrol edebilirsiz.

html2canvas(element, options);

Örneğin önce tüm sayfanın ekran görüntüsünü alalım,

html2canvas(document.body, {});

Şimdi aldığımız bu ekran görüntüsünün yükseklik ve genişliğini ayarlayalım, (sol üstten kırpma işlemi gibi çalışır)

html2canvas(document.body, {
  width: 500,
  height: 500
});

Son olarak bu ekran görüntüsünü alarak sayfaya ekleyelim,
onrendered özelliğine geçeceğiniz fonksiyon ile, ekran görüntüsünden sonra ne işlem yapacağınızı belirtebilirsiniz.

html2canvas(document.body, {
  width: 500,
  height: 500,
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

Tarayıcı Desteği

  • Firefox 3.5 +
  • Google Chrome
  • Opera 12+
  • IE9 +
  • Safari6

Örnek Uygulama

Eklenti Sayfası : http://html2canvas.hertzen.com/

HTML5 İle Telefon Titreştirmek

HTML5 Vibration API ile, tarayıcı üzerinden telefonu istediğiniz aralıklarda titretebilirsiniz. Bu yazımda size API hakkında biraz bilgi vereceğim.  HTML5 tabanlı oyunlar yazıyorsanız kullanıcı etkileşimini arttırabilirsiniz.

Continue reading →