`object-fit` nedir? nasıl kullanılır?

Merhaba arkadaşlar, eskiden belirli bir orana sahip kutular içinde resmin en/boy oranını bozmadan göstermek için türlü türlü şeyler yapardık ama şuanda object-fit var.

Kısaca `object-fit` : img veya video gibi en/boy oranına sahip bir öğenin, onu kapsayan kutuya istenilen şekilde yeniden boyutlandırılması sağlar.

object-fit özelliğinin alabileceği değerler

fill: Görüntü, konteynırın tamamını dolduracak şekilde boyutlandırılır. Oranlar korunmaz, bu nedenle görüntü bozulabilir.

contain: Görüntü, konteynırın içine sığacak şekilde boyutlandırılır. Oranlar korunur, bu nedenle görüntü konteynırın içinde tamamen görünür, ancak boşluklar olabilir.

cover: Görüntü, konteynırı tamamen kaplayacak şekilde boyutlandırılır. Oranlar korunmaz, bu nedenle görüntü konteynırın içinde tamamen görünmez, ancak tamamen kaplar.

none: Görüntü, boyutları değiştirilmeden konteynır içinde yerleştirilir. Oranlar korunmaz ve görüntü istenilen boyuta sığdırılır, ancak oranlar bozulabilir.

scale-down: contain ile benzer şekilde davranır. Ancak, görüntü oranı konteynır oranından büyükse, contain gibi davranır. Görüntü oranı konteynır oranından küçükse, none gibi davranır.

Codepen ‘de en son transformla nasıl img en boy oranı korunarak kutuya sığdırılır onu da custom adı altında gösterdim

See the Pen css object-fit by Aycan BÜLBÜL (@AycanB) on CodePen.

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.

babam

Babamla alakalı bir çok şey yazmak istiyorum ama kimse üzülmesin diye yazmıyorum, bu seferde içimde patlıyor.

babam hep cevizlik ile uğraştığı için 1 saatte bir telefondan sıcaklık ve yağmur değerine bakardı: “aycan bak bugün %80 yağış var” yağış olacak, veya bugün %60 gösterdi ama yağmur yağmadı derdi.

Bugün öğrendim ki o yüzdeli değer o ilçenin %80’ine yağmur yağacak anlamındaymış. Bunu radyoda duyar duymaz birden babamı arayıp babama bunu anlatmak istedim ve kalbim göğüs kafesime sığmadı…

Hergün 40-45 dk konuştuğun en yakın arkadaşını kaybetmek çok zormuş..

Ve yetmez gibi aylardan kasım ve 20 kasım doğum günüm, 34 yaşıma gireceğim ve babam kutlayamayacak…

Canım babam elbet bir gün kavuşacağız elbet…

Youtube kanalı açmak (yutıbır aycan)

Uzun bir aradan sonra merhaba arkadaşlar,

Sektör çok hızlı geliştiği için sürekli kendimi blog/youtube ‘da buluyorum ve bu mükemmel bir şey yani aradığın bir kaynağı Türkçe bulmak.

Buraya kadar her şey çok güzel ama bazı blog veya videoları açtıktan 30 saniye sonra kapatıyorum, videolar veya yazı iyi olmadığı için değil, yanlış başlangıç yaptığı için anlatmak istediğini etkili ve verimli bir şekilde anlatamadığı için.

Öğretmenlik okuduğum için ;

1- Bir konu en iyi nasıl öğretebilirim bunu öğrendim,
2- “Eğitimde Materyal Tasarımı ” dersini aldığım için bu hazırlayacağım materyalde konumlandırma nasıl olur hedefler/kazançlar/özet bunları iyi kullanabilirim
3- Uzun içeriklerde kişilerin odağını belli bir noktadan sonra nasıl tekrar toplar ve heyecanlandırırım
4- Kişilerin seviyelerine göre içerik hazırlama (geçen bir videoda izlemiştim adam sıfırdan bir şey anlatıyor ama plaza dilini o kadar çok kullanıyor ve gereksiz noktalara o kadar değiniyor ki bildiğini de unutuyorsun.) konuyu gereksiz yere büyütmeden sadece öğretmek istediğimi öğretirim.

Bu maddeler böyle uzar gider o yüzden hiç yapmayacağım mesleğimi biraz olsun Türkiye deki yazılım sektörü ile birleştirerek güzel materyaller hazırlamak istiyorum.

Bir yandan da bu Youtube kanalını biraz da kişiselleştirmek kızımla oyunlarımızı yayınlamak ve Kızıma yani Doğa’ya hatıra kalmasını istiyorum.

Uzun zamandır düşünüyorum inşallah bu yazı bir şeylerin başlangıcı olur.