Devtools açık/kapalı kontrolü

Merhaba arkadaşlar uzun zamandır tekrardan yazmaya başlamak istiyordum ve Tayfun’un short videosu karşıma geldi, bende bunu devtools ile bağlayıp bir konu yapayım dedim.

Devtools açık mı araştırırken Sindre Sorhus’un yazdığı bir kod parçasına denk geldim (devtools-detect). Not : Tüm tarayıcılarda çalışmıyor (explorer vs) ama güncel kullanılan tarayıcılarda çalışıyor.

const devtools = {
	isOpen: false,
	orientation: undefined,
};

const threshold = 170;

const emitEvent = (isOpen, orientation) => {
	globalThis.dispatchEvent(new globalThis.CustomEvent('devtoolschange', {
		detail: {
			isOpen,
			orientation,
		},
	}));
};

const main = function (emitEvents) {
	const widthThreshold = globalThis.outerWidth - globalThis.innerWidth > threshold;
	const heightThreshold = globalThis.outerHeight - globalThis.innerHeight > threshold;
	const orientation = widthThreshold ? 'vertical' : 'horizontal';

	if (
		!(heightThreshold && widthThreshold)
		&& ((globalThis.Firebug && globalThis.Firebug.chrome && globalThis.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)
	) {
		if ((!devtools.isOpen || devtools.orientation !== orientation) && emitEvents) {
			emitEvent(true, orientation);
		}

		devtools.isOpen = true;
		devtools.orientation = orientation;
	} else {
		if (devtools.isOpen && emitEvents) {
			emitEvent(false, undefined);
		}

		devtools.isOpen = false;
		devtools.orientation = undefined;
	}
};

main(false);
setInterval(main, 500);
console.log(
    '%caycan.net',
    'background:#cd1821; color:#fff; font-weight:bold; font-size:30px;text-shadow:0 0 5px #000;  padding:10px;'
);

console.log(
    '%cBu, geliştiriciler için tasarlanmış bir özelliktir.',
    'color:#333; font-weight:bold; font-size:20px;  padding:10px 0px;'
);

Kodun çıktısı aşağıdaki gibidir.

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:

yazdığımız fonksiyonumuz

 

Ö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;

 

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