jsonparser.js – İç içe JSON verilerileri görüntüleme

Merhaba arkadaşlar,

Ne zamandır yazmıyordum, böyle anlık lazım olan yazdığımı kod parçacıklarını projeler içinde arayacağıma bloğuma yazıyım dedim ve karşınızda “jsonparser.js”

Genelde log tutarken json içeriği hoop diye veritabanına kayıt ediyoruz hatta bir projede birden fazla kişi çalışıyorsa bazen ipin ucunu kaçıyoruz json içinde string şekilde kayıt edilmiş obje -> onun içinde dizi -> bunun içinde string dizi vs vs böyle iç içe devam edebiliyor. Okumaya devam et jsonparser.js – İç içe JSON verilerileri görüntüleme

Dizi içindeki tekrar eden “string” elemanları sayı adedine göre sıralama

Merhaba arkadaşlar,

Proje geliştirirken ufak ufak kodlar lazım oluyor, ya ben bunu hangi projede kullandım falan filan derken dedim ki “aaa benim mükemmel bir bloğum var, neden bloğuma koymuyorum” 🙂

Konuya gelecek olursak, bir dizi içindeki tekrar eden birden çok tekrar eden ifadenin sayısnı öğrenip sıralamak için ufak birşeyler yazdım.

İçerisindeki tekrar eden ifadelerin sayısını almak ve sıralamak için kullanacağımız dizi:

var fruits = ["Karpuz","Armut","Ekşi elma","Limon","Armut","Çilek","Çilek","Karpuz","Kiraz","Greyfurt","Beyaz üzüm","Muz","Greyfurt","Karpuz","Muz","Portakal","Nar","Karpuz","Armut","Kara üzüm","Greyfurt","Çilek","Greyfurt","Beyaz üzüm","Muz","Muz","Greyfurt","Muz","Greyfurt","Çilek","Muz","Armut","Nar","Çilek","Armut","Karpuz","Çilek","Elma","Portakal","Nar","Nar","Karpuz","Greyfurt","Karpuz","Greyfurt","Çilek","Beyaz üzüm","Karpuz","Nar","Ekşi elma","Ekşi elma","Nar","Ekşi elma","Ekşi elma","Ekşi elma","Muz","Karpuz","Limon","Nar","Armut","Ekşi elma","Greyfurt","Beyaz üzüm","Armut","Kara üzüm","Muz","Ekşi elma","Portakal","Muz","Karpuz","Muz","Beyaz üzüm","Karpuz","Kara üzüm","Kiraz","Çilek","Elma","Beyaz üzüm","Beyaz üzüm","Beyaz üzüm","Armut","Elma","Portakal","Kara üzüm","Kiraz","Limon","Kiraz","Nar","Ekşi elma","Karpuz","Çilek","Çilek","Ekşi elma","Kiraz","Elma","Greyfurt","Çilek","Kara üzüm","Armut","Karpuz"];

var fruits = ["Karpuz","Armut","Ekşi elma","Limon","Armut","Çilek","Çilek","Karpuz","Kiraz","Greyfurt","Beyaz üzüm","Muz","Greyfurt","Karpuz","Muz","Portakal","Nar","Karpuz","Armut","Kara üzüm","Greyfurt","Çilek","Greyfurt","Beyaz üzüm","Muz","Muz","Greyfurt","Muz","Greyfurt","Çilek","Muz","Armut","Nar","Çilek","Armut","Karpuz","Çilek","Elma","Portakal","Nar","Nar","Karpuz","Greyfurt","Karpuz","Greyfurt","Çilek","Beyaz üzüm","Karpuz","Nar","Ekşi elma","Ekşi elma","Nar","Ekşi elma","Ekşi elma","Ekşi elma","Muz","Karpuz","Limon","Nar","Armut","Ekşi elma","Greyfurt","Beyaz üzüm","Armut","Kara üzüm","Muz","Ekşi elma","Portakal","Muz","Karpuz","Muz","Beyaz üzüm","Karpuz","Kara üzüm","Kiraz","Çilek","Elma","Beyaz üzüm","Beyaz üzüm","Beyaz üzüm","Armut","Elma","Portakal","Kara üzüm","Kiraz","Limon","Kiraz","Nar","Ekşi elma","Karpuz","Çilek","Çilek","Ekşi elma","Kiraz","Elma","Greyfurt","Çilek","Kara üzüm","Armut","Karpuz"];

yazdığımız fonksiyonumuz

function listArray(arr,order){

	// dizideki tekrar eden elemanları sayı adedine toplayıp yeni obj olusturuyoruz
	var itemCount = [];
	arr.forEach(function (x) { itemCount[x] = (itemCount[x] || 0) + 1; });
	
	// olusturdugumuz objeyi ters siralamak icin diziye donusturuyoruz.
	var countsSortable = [];
	for (var i in itemCount) {
		countsSortable.push([ itemCount[i],i])
	}
			
	countsSortable.sort(function (a, b) {
		if(order === 'desc')
		{
			return b[0] - a[0];
		} else {
			return a[0] - b[0];
		}
	});
	
	return countsSortable;
		
}

function listArray(arr,order){

// dizideki tekrar eden elemanları sayı adedine toplayıp yeni obj olusturuyoruz

var itemCount = [];

arr.forEach(function (x) { itemCount[x] = (itemCount[x] || 0) + 1; });

// olusturdugumuz objeyi ters siralamak icin diziye donusturuyoruz.

var countsSortable = [];

for (var i in itemCount) {

countsSortable.push([ itemCount[i],i])

}

countsSortable.sort(function (a, b) {

if(order === 'desc')

{

return b[0] - a[0];

} else {

return a[0] - b[0];

}

});

return countsSortable;

}

Örnek :

See the Pen Dizi içindeki String elemanları sayı adedine göre sıralama by Aycan BÜLBÜL (@AycanB) on CodePen.

Google PageSpeed Insights puanlarını yükseltmek

Merhaba arkadaşlar,

Google’ın PageSpeed aracında artık yeşil puanları görmek biraz zorlaştı, bunun sebebi yapacağımız işlemlerin çeşitli alanlarda olması.

|Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın

(bkz: google oluşturmayı önleyen JavaScript…)
Burada google Okumaya devam et Google PageSpeed Insights puanlarını yükseltmek

Readmore.Js – Devamını oku eklentisi

Merhaba arkadaşlar, geçen bir işte kullandığımız güzel bir eklenti.

See the Pen Readmore.js by Aycan BÜLBÜL (@AycanB) on CodePen.

Kullanımı gayet basit uzayan yazıları kesmek için kullanılan küçük ama kullanışlı bir eklentidir.

Standart çalıştırma kodunu aşağıdaki gibi tanımlamamız mümkün;

$('.article').readmore({
  speed: 75, //Açılma Hızı
  collapsedHeight: 100, // 100px sonra yazının kesileceğini belirtir.
  moreLink: '<a href="#">devamı..</a>', // açma linki yazısı
  lessLink: '<a href="#">kapat</a>', // kapatma linki yazısı
});

$('.article').readmore({

speed: 75, //Açılma Hızı

collapsedHeight: 100, // 100px sonra yazının kesileceğini belirtir.

moreLink: '<a href="#">devamı..</a>', // açma linki yazısı

lessLink: '<a href="#">kapat</a>', // kapatma linki yazısı

});

Readmore.js : http://jedfoster.com/Readmore.js/

Resimleri oran orantısını bozmadan bir alan içinde ortalamak / jQuery img load

Merhaba arkadaşlar,

Birkaç yıl olmuştur bu kodu yazalı ama arada gidip alıp kullanıyorum, sizinle de paylaşmak istedim umarım işinize yarar. Buraya tıklayarak aşağıdaki kodun ne işe yaradığını anlayabilirsiniz // Sayfada büyük resim olduğu için yüklenmesi uzun sürebilir.

$('img').load(function() 
{
    var parentH = $( this ).parent().outerHeight();
    var parentW = $( this ).parent().outerWidth();
    var iH      = $( this ).outerHeight();
    var iW      = $( this ).outerWidth();

    var  rate, newRate = 0;
    rate  = parentW / iW;
    newRate = rate * iH;

    if(parentH > newRate)
        rate = parentH / iH;

    $( this ).css({
        width       : rate*iW,
        height      : rate*iH,
        position    : 'absolute',
        top         : -( ( ( rate*iH ) - parentH ) / 2 ),
        left        : -( ( ( rate*iW ) - parentW ) / 2 )
    });
}).each(function() {
  if(this.complete) $(this).load();
});

$('img').load(function()

{

var parentH = $( this ).parent().outerHeight();

var parentW = $( this ).parent().outerWidth();

var iH = $( this ).outerHeight();

var iW = $( this ).outerWidth();

var rate, newRate = 0;

rate = parentW / iW;

newRate = rate * iH;

if(parentH > newRate)

rate = parentH / iH;

$( this ).css({

width : rate*iW,

height : rate*iH,

position : 'absolute',

top : -( ( ( rate*iH ) - parentH ) / 2 ),

left : -( ( ( rate*iW ) - parentW ) / 2 )

});

}).each(function() {

if(this.complete) $(this).load();

});

Burada asıl önemli olan kısım resmin yüklenip yüklenmediğini kontrol etmek (jquery img load). Burada kullandığım resim yüklenme kodunu stackoverflow‘dan buldum ( Nick Craver )

$('img').load(function() 
{

// Yuklenince yapilacak islemler

}).each(function() {
  if(this.complete) $(this).load();
});

$('img').load(function()

{

// Yuklenince yapilacak islemler

}).each(function() {

if(this.complete) $(this).load();

});

Resimlerin kesin yüklendiğini anladıktan sonra, resmin orjinal boyutlarını alıyorum, ondan sonra resmi kapsayan element’in boyutlarını alıp oran / orantı yapıp resme yeni boyutunu ve pozisyonunu veriyorum. Burada img’i kapsayan elementin width, height ve overflow:hiden değerinin olması gerekir.