Gulp ile İşlerinizi Kolaylaştırın

Merhaba arkadaşlar, front-end çalışmalarında gulp kullandığım şu dönemde bilmeyenler için bir makale yazmaya karar verdim. Öncelikle ne nedir bundan başlayalım ve neden kullanmamız gerek anlayalım.

Gulp nedir?

Gulp, geliştirme yaparken iş akışımızı yavaşlatan işlemleri otomatik yapmamızı sağlayan bir araçtır.

Gulp hangi durumlarda kullanılır?

CSS, HTML, JavaScript ya da Resim dosyalarınızla ilgili işlemler için kullanılabilir.

Ben kısaca CSS’de SASS ve LESS dosyalarımı çalıştırdım, minify ettim, tek dosya haline getirdim. Görselleri sıkıştırarak daha küçük boyut haline getirdim. HTML’leri herhangi bir template engine sisteminde otomatik çıkarttım. Javascript’te minify edip tüm js dosyalarını tek bir js dosyasına çevirdim. Ve bunları yaparken gulp dosyamı ayarladıktann sonra hiçbir şey yapmadım 🙂 Okumaya devam et “Gulp ile İşlerinizi Kolaylaştırın”

JavaScript localeCompare()

Merhaba, bu yazıda sizlere JavaScript’te bulunan localeCompare() metotundan bahsedeceğim. Öncelikle neden ihtiyaç duyup kullandım;

Bir objemi isme göre sıralamak istedim. Bu obje içerisinde türkçe karakterlerde vardı ve sıralama düzgün şekilde gerçekleşmiyordu. Hemen bir örnek verelim;

var data = [
  {
    'id': 1,
    'name': 'İstanbul'
  },
  {
    'id': 2,
    'name': 'Çanakkale'
  },
  {
    'id': 4,
    'name': 'Ümraniye'
  },
  {
    'id': 3,
    'name': 'Ankara'
  },
  {
    'id': 5,
    'name': 'Van'
  }
];

data = data.sort(function(a,b){
  if(a.name < b.name) return -1;
  if(a.name > b.name) return 1;
  return 0;
});

data.forEach(function(key){
  var node = document.createElement("LI"),
      textnode = document.createTextNode(key.name);
  node.appendChild(textnode);
  document.getElementById('test').appendChild(node);
});

Bu kodların çıktısı şu şekilde oluyordu;

See the Pen JavaScript Array Sort -1 by Tayfun Erbilen (@tayfunerbilen) on CodePen.

Yukarıdaki kodlarımda, sort fonksiyonu içerisindeki kodumu şu şekilde değiştirirsem;

return a.name.localeCompare(b.name);

O zaman sorunumuz çözülüyor ve aşağıdaki gibi başarılı bir sıralama oluşuyor 🙂

See the Pen JavaScript Array Sort -2 by Tayfun Erbilen (@tayfunerbilen) on CodePen.

ARtık birgün bir yerde işinize yararsa ne ala, benim bugün ihtiyacım oldu yarında sizin olabilir 🙂

Zincirleme (Chain) Metodu

Bir çoğunuz yazılmış sınıfları incelediğinizde şu şekilde bir yazım tarzıyla karşılaşmış olabilirsiniz.

$text = new Text();
echo $text->write('Tayfun Erbilen')->color('red')->fontSize('20px')->show();

Bu örneğe ait sınıfımızı oluşturalım hemen.

class Text {
    
    private $text;
    private $style;

    public function write($text)
    {
        $this->text = $text;
    }

    public function color($color)
    {
        $this->style .= 'color: ' . $color . ';';
    }

    public function fontSize($size)
    {
        $this->style .= 'font-size: ' . $size . ';';
    }

    public function show()
    {
        return '<div style="' . $this->style . '">' . $this->text . '</div>';
    }

}

Ancak bu örnek hata verecektir. Çünkü bu şekilde bir yazım tarzı için yapmanız gereken $this objenizi geriye döndürmek. Yani sınıfımızı şu şekilde düzenlersek eğer;

class Text {
    
    private $text;
    private $style;

    public function write($text)
    {
        $this->text = $text;
        return $this;
    }

    public function color($color)
    {
        $this->style .= 'color: ' . $color . ';';
        return $this;
    }

    public function fontSize($size)
    {
        $this->style .= 'font-size: ' . $size . ';';
        return $this;
    }

    public function show()
    {
        return '<div style="' . $this->style . '">' . $this->text . '</div>';
    }

}

Artık bu şekilde bir kullanımı yapmaya hazırız.

Chain (zincirleme) metodu aynı zamanda jQuery içinde aynı mantıkta çalışır. Muhtemelen her dil için bu mantıktadır. Örneğin jQuery’de bir örnek vermem gerekirse, basit bir eklenti hazırlayalım.

$.fn.Text = function(text){
  $(this).html(text);
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

Bu şekilde bir zincirleme kullanımda çalışmayacaktır. Çünkü bir this objesi döndürmedik eklentimizde geriye. Eğer geriye this’i döndürürsek geriye kalan jQuery metodlarını da zincirleme olarak kullanabilirsiniz. O halde buna göre düzelttiğimizde son kod parçamız şöyle olacak;

$.fn.Text = function(text){
  $(this).html(text);
  return this;
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

JavaScript Object Length Kullanımı

Bir dizinin boyutunu öğrenmek için length özelliğini kullanabilirsiniz. Örneğin;

var arr= ['Tayfun', 'Murat'];

alert(arr.length); // Output: 2

Ancak bunu bir object için yapmak istediğimizde biraz daha farklı şekilde kullanıyoruz;

var obj = new Object();
obj['name'] = 'Tayfun';
obj['surname'] = 'Erbilen';

alert(Object.keys(obj).length); // Output: 2

Kaynak: http://stackoverflow.com/a/6700

jQuery Touchswipe Eklentisi ile Parmak Hareketlerini Yakalamak

Telefon ve Tabletlerde ekrana parmak ile dokunduğumuzda bunu yakalayıp işlem yapmamızı sağlayacak güzel bir eklenti tanıtacağım size.
Ben bu eklentiyi kullanarak parmak ile kaydırarak açılıp kapanan bir yan menü örneği hazırladım videoda.
Umarım işinize yarar, zira ben responsive dökümlerde bu eklentisi sıkça kullanıyorum.
Okumaya devam et “jQuery Touchswipe Eklentisi ile Parmak Hareketlerini Yakalamak”