CSS ile İnternet siteleriniz için Filigran yapmak (pointer-events)

Merhaba arkadaşlar,

Özel ürettiğiniz yazılımlar/bilgi sistemleri için demo sürümlerinde projenin resminin dağıtılmaması veya kullanıcıya demo kullandığını hatırlatmak için filigran eklemek gerekebiliyor. Benden bu iş istenildiğinde ilk fikrim, css’de herşey katman katman’dır en üstte görünecekse tıklanma sorunu olur dedim ama sonra araştırdım ve pointer-events’i buldum. (Dinazor kafalı olmamakta fayda var.)

pointer-events:none;

1	pointer-events:none;

pointer-events: Bir element için fare’nin click/hover olayların da tepki verip/vermemesi ayarlamamızı sağlayan ve CSS3 ile gelen property.

See the Pen CSS ile İnternet siteleriniz için Filigran yapmak (pointer-events) by Aycan BÜLBÜL (@AycanB) on CodePen.

Tarayıcı uyumluluğu

Tarayıcı uyumluluğu da gayet güzel, özel yazılımlarda kullanıcılara demo sunarken tarayıcıya yönlendirebiliyoruz. o yüzden IE Edge haricini pek takmıyorum.

Kaynaklar

Arkadaşlar pointer-events’in alabileceiği diğer değerleri(auto, none, visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all) öğrenmek için sizi aşağıdaki kaynaklara yönlendiriyorum.

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

Sayfa yüklenirken çirkin duran transition’ları engellemek

Merhaba arkadaşlar,

Artık yaptığımız işlerde transition kullanıyoruz, bazı elementleri rotate yapıyoruz veya kaydırma işlemlerinde kullanıyoruz.

Bu efekt sayfa yüklenirken aynı işlemi yapıyor ve kötü görüntü oluşturuyor.

Örnek :

Bunu engellemek için body’ye bir class veriyoruz

<body class="preload">

1	<body class="preload">

CSS’e aşağıdaki kodu ekliyoruz

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.preload * {

-webkit-transition: none !important;

-moz-transition: none !important;

-ms-transition: none !important;

-o-transition: none !important;

transition: none !important;

}

Şimdi sitedeki tüm transition’ları iptal etmiş olduk. Şimdi sayfa yüklendikten sonra Jquery ile body’ye eklediğimiz preloader class’ını sileceğiz.

$(window).on("load", function (e) {
  $("body").removeClass("preload");
});

$(window).on("load", function (e) {

$("body").removeClass("preload");

});

Sorun çözüldü 🙂

Kaynak : https://css-tricks.com/transitions-only-after-page-load/

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.

Doğa Bebek, Erzuruma Veda, Bir buçuk yıl sonra MERHABA

Merhaba arkadaşlar,

Sizlere “merhaba” 1.5 yıl oldu. Bloğa yazmayı özlüyorum ama nedense 1.5 yıl içinde denk gelemedik, yazamadım.

Hayatımda çok köklü değişiklikler oldu

Doğa

2017.07.12 tarihinde kızım doğdu (Tarihi Y.m.d formatında yazma sebebimi hepiniz anladınız umarım, yazılımda tarih convert işlemleri hem zevkli hemde belli bir yerden sonra insanı yoruyor, o yüzden bende standart formatı seçiyorum artık.), ben hiç çocuk sevmeyen ben şuan ondan başka birşey görmüyorum (Allah dileyen herkese nasip etsin bebek sevgisini.) Okumaya devam et Doğa Bebek, Erzuruma Veda, Bir buçuk yıl sonra MERHABA