Kod Parçacıkları – aycan.net

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

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.

jQueryEasing ile .animate() efektleri

Merhaba arkadaşlar, jQuery’nin verdiği swing , linear artık güzel görünmüyor o yüzden sık kullandığım ama fırsat bulamadığım bir kod parçasını paylaşacağım.

Öncelikle yazarına teşekkür edelim : gdsmith

jquery.easing.js jQuery .animate() fonskiyonu biraz renklendirmek diyebiliriz ancak html5 de de bu animate’leri verebiliyoruz.

Js kodlarda select’den gelen veriyi çağırmak ve sürekli tetiklemek için birkaç şey yaptım kafanız karışmasın, dikkatli incelerseniz anlarsınız.

calistir(($('.saniye').val().replace(/\D+/g,'')*1));

$('select').change(function ()
{
    $('.deneme').finish();
    clearInterval(zaman);
    calistir(($('.saniye').val().replace(/\D+/g,'')*1));
});

$('input').keyup(function ()
{
    $('.deneme').finish();
    clearInterval(zaman);
    calistir(($('.saniye').val().replace(/\D+/g,'')*1));
});



function calistir(saniye)
{
    zaman = setInterval(function()
    {
      var randomEffect =   $('select').val();
        $('.deneme').finish();
        $('.deneme').html(randomEffect);

        $('.deneme').animate
        (
            {
                  width : 600,
                  height: 300,
                  marginLeft :0,
                  marginTop : 0,
                  lineHeight : 300
            },
            (saniye / 2),
            randomEffect,
            function()
            {
                $('.deneme').animate
                (
                    {
                        width : 150,
                        height: 150,
                        marginLeft :300,
                        marginTop : 100,
                        lineHeight : 150
                    },
                    (saniye / 2),
                    randomEffect
                  );

            }
        );

    },saniye);
}

calistir(($('.saniye').val().replace(/\D+/g,'')*1));

$('select').change(function ()

{

$('.deneme').finish();

clearInterval(zaman);

calistir(($('.saniye').val().replace(/\D+/g,'')*1));

});

$('input').keyup(function ()

{

$('.deneme').finish();

clearInterval(zaman);

calistir(($('.saniye').val().replace(/\D+/g,'')*1));

});

function calistir(saniye)

{

zaman = setInterval(function()

{

var randomEffect = $('select').val();

$('.deneme').finish();

$('.deneme').html(randomEffect);

$('.deneme').animate

(

{

width : 600,

height: 300,

marginLeft :0,

marginTop : 0,

lineHeight : 300

(saniye / 2),

randomEffect,

function()

{

$('.deneme').animate

(

{

width : 150,

height: 150,

marginLeft :300,

marginTop : 100,

lineHeight : 150

(saniye / 2),

randomEffect

);

}

);

},saniye);

}

Yarın birgün rastgele animate efekt isteyeceksiniz o yüzden dizi halinedede veriyorum efektleri

var effects = [
            'swing', 'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic',
            'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart',
            'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInExpo', 'easeOutExpo',
            'easeInOutExpo', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInCirc',
            'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeOutElastic',
            'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'
];

var effects = [

'swing', 'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic',

'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart',

'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInExpo', 'easeOutExpo',

'easeInOutExpo', 'easeInSine', 'easeOutSine', 'easeInOutSine', 'easeInCirc',

'easeOutCirc', 'easeInOutCirc', 'easeInElastic', 'easeOutElastic', 'easeOutElastic',

'easeInBack', 'easeOutBack', 'easeInOutBack', 'easeInBounce', 'easeOutBounce', 'easeInOutBounce'

];

Random seçtirme

effects[Math.floor( ( Math.random() * ( effects.length ) ) + 1 )]

1	effects[Math.floor( ( Math.random() * ( effects.length ) ) + 1 )]

Ön izleme

See the Pen jQueryEasing ile .animate() efektleri ~ www.aycan.net by Aycan BÜLBÜL (@AycanB) on CodePen.

Aycan.net Ön izleme -> http://calismalar.aycan.net/jQueryEasing/

jQuery ile rastgele renk

Geçenlerde ruh halimi yansıtan bir kod diye bişiyler yazdım, sizlerlede bunu paylaşmak istiyorum.

Kodun yaptığı iş, her 1 saniyede random bir renk seçiyor.

Css (geçişler yumuşak olsun diye.)

body{transition: all ease-in .4s;}

1	body{transition: all ease-in .4s;}

zaman = setInterval(function()
{

  var renk = Math.floor((Math.random()*255) + 1) + ',' +Math.floor((Math.random()*255) + 1) + ','+ Math.floor((Math.random()*255) + 1) ;
  $('body').css('background-color','rgb('+ renk+')');

},1000);

zaman = setInterval(function()

{

var renk = Math.floor((Math.random()*255) + 1) + ',' +Math.floor((Math.random()*255) + 1) + ','+ Math.floor((Math.random()*255) + 1) ;

$('body').css('background-color','rgb('+ renk+')');

},1000);

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

Bu kodu paylaşırkende bu müziği dinliyorum, sizede tavsiye ederim
http://www.youtube.com/watch?v=mrziYF6bVAE