CSS yazarken hayatımızı kolaylaştıran bazı fonksiyonlar var. Bazı durumlarda kullanılan genişlik, font-size gibi değerlerin dinamik olarak hesaplanmasına ihtiyacımız olabiliyor. Örneğin, bir kart sayfada 70% yer kaplasın fakat 300px’den küçük olmasın gibi bir senaryomuz varsa, bu durumda şöyle bir CSS yazılmasını bekleriz;
.card {
width: 70%;
min-width: 300px;
}CSS min() fonksiyonu bu kodu tek satırda çözmeyi sağlıyor;
.card {
width: min(300px, 70%);
}Her iki kodda kartın 300px’den küçük olmayacak şekilde bulunduğu kapsayıcıya 70% sığacak şekilde hesaplama yapar. Aynı şeyi max-width değeri içinde kullanıp, kısa yazımını max() fonksiyonu ile kullanabiliriz.
.card {
width: 70%;
max-width: 1000px;
}.card {…
Bu makalede, arka plan rengine bağlı olarak yazı rengini değiştirmeyi göreceğiz.
CSS tarafında bir yazıya color: #fff verdiğimizi düşünelim. Koyu arka plan renklerinde bu yazı okunabilirken, açık tonlu renk üzerinde okunamaz olacaktır. Burada dinamik olarak arka plan rengi koyu ise beyaz yazı, arka plan açık tonlar ise siyah renkte yazı yazmamız sorunu çözecektir. Peki bunu nasıl yapabiliriz?
Brian Suda isimli bir geliştiricinin geliştirmiş olduğu şu kod işimizi görüyor;
function getContrastYIQ(hexcolor){
var r = parseInt(hexcolor.substr(0,2),16);
var g = parseInt(hexcolor.substr(2,2),16);
var b = parseInt(hexcolor.substr(4,2),16);
var yiq = ((r*299)+(g*587)+(b*114))/1000;
return (yiq >= 128) ? 'black' : 'white';
}- Bu kodu biraz okuyalım. Öncelikle…
2019 Kasım ayında gösterime girmiş olan, dünya rekortmeni Naim Süleymanoğlu’nın filmini çokça görmeme rağmen yeni izleyebildim. Ben Naim Süleymanoğlu’nu Türkiye topraklarında doğmuş, büyümüş ve madalyalar getirmiş birisi olarak düşünüyordum. Filmin başında Naim’in Bulgaristan adına yarıştığını görünce şaşırdım.
Dizi Hakkında
Gerçek hayat hikayesinden uyalanan film, Todor Jivkov liderliğindeki Bulgar Komünist Partisi iktidarı altında 1984 sonunda uygulamaya konan, Bulgaristan Türklerinin isimlerinin devlet zoruyla Bulgar isimleriyle değiştirilmesini konu alıyor; Naim Süleymanoğlu’na ise Naum Şalamanov adı veriliyor. Bu durumdan oldukça rahatsız olan Naim, Dünya’ya bu durumu anlatabilmek adına eski cumhurbaşkanımız Turgut Özal’ın bizzat yardımıyla ülkeye getiriliyor ve Türkiye adına olimpiyatlarda yarışmaya başlıyor.
Küçük yaşta haltere ilgi…
Web site geliştirirken varsayılan olarak yazı dilimiz soldan sağa (Left to Right — LTR) kullanıyoruz. Arapça gibi sağdan sola doğru okuma yönü olan diller için site geliştiriyorsak, <html> etiketinize dir özelliği ekleyerek yazı dilinin sağdan sola olacağını belirtmelisiniz (<html dir="rtl">).
CSS mantıklar özelliklerin temel fikri, CSS özelliklerinde fiziksel yönleri kullanmayacak olmamızdır. Bunun yerine HTML belgesinin yazım yönüne bağlı olan özellikleri kullanacağız. Bu özelliklere mantıksal özellik deniyor ve tarayıcı desteği oldukça iyi (tarayıcıların CSS Logical Properties desteği).
Mantıksal Özellikler Olmadan Önce
Basit bir tasarımla neyi kastettiğimizi daha iyi anlayalım. …
Tam hatırlamıyorum ama sanırım ortaokulun son zamanlarından beri gözlük kullanıyorum, yani neredeyse tüm gençliğimi gözlüklü geçirdim. Havuz/denize gittiğinde etrafındaki insanları görememek, halı saha maçta gözlükle oynamak zorunda kalmak, metrobüse bindiğinde camlarının buharlaşması, şu korona günlerinde maskeyle beraber etrafını göremiyor olmak; gözlük kullanmanın zorluğunu gözlük kullananlar biliyor ve uzunca bir süredir ameliyat olma konusunda kendimi ikna etmiştim.
Bu makalede anlatılacak olanlar kendi tecrübelerim. Hastaneye, doktorunuza ve göz numaranıza göre sizlerde farklı bir sonuç doğurabilir.
19 Mart tarihinde gözümün ameliyata uygun olup olmadığını öğrenmek için Dünyagöz Bağcılar hastanesinde Prof. Dr. Sıtkı Samet Ermiş‘e muayene olup, 20 Mart‘a ameliyat günü aldım.
Muayene
Öncelikle gözlük…
Apple Kasım 2020 itibari ile kendi üretimi olan M1 işlemcisini duyurdu; Macbook Air/Pro/Mini modellerini de M1 CPU ile baştan geliştirildi. Duyurulduğu ilk günden beri çok sıkı takip ettim. Gerek makaleler ve inceleme videoları olsun, gerek olası uyumsuzluk ve ilk olmasının acemiliği ile kötü bir ürün çıkma ihtimallerini araştırdım. Mağazalardan satın alma sürecine, program uyumsuzluklarından kullanım deneyimlerime bir çok konudan bahsedeceğim.
Gürgençler — Troy Mağaza Deneyimlerim
Siparişi vermeden önce bu zaman zarfında Apple, Gürgençler ve Troy Apple ile sürekli iletişim halindeydim. Olası indirim, kampanya, sipariş süreci, ödeme gibi bir çok senaryoyu görüştüm.
Japonya, teknolojisi ve çalışkanlığıyla her zaman gönlümde taht kuran ülkelerden birisidir. Japonya imparatorunun makam odasını gördükten sonrada minimalizme verdikleri önem dikkatimi çekmişti. Bu kültürü detaylıca incelemek adına Erin Niimi Longhursthurst‘ın yazmış olduğu (Çeviri: Sevinç Seyda Tezcan) Japonizm adlı kitabı okuma kararı aldım ve 2021 yılında bitirdiğim ilk kitap oldu.
Kitap 3 ana başlıktan oluşuyor; Kokoro (Kalp ve zihin), Karada (Beden) ve Şukanka (Alışkanlık edinmek). Doğal olarak kitapta çok fazla Japonca kelime geçiyor, yazar bunların her birisine farklı başlıklar açarak güzelce detaylandırmış. Hikayeli ve detaylı açıklamalar barındıran bir Japonca sözlüğü olarak düşünebiliriz. …
Site geliştirirken sağ tarafta çıkan scroll bar’ları her zaman gizlemeyi tercih ettim. Çok sağlıklı bir yol olmayabilir fakat sayfanın tasarımını bozması beni çok rahatsız ediyordu. Ardından bir süredir düşündüğüm tasarımı koda dökerek yuvarlak bir progress bar geliştirdim. Son olarakta bunu bir paket haline getirip npm’e atmaya karar verdim. Bu makalede ise adım adım bu işlemleri anlatacağım.
React Npm Template
İlk olarak Chan Jing Hong’ın geliştirdiği React Npm Template’ini klonluyoruz. Bu paket bize React’ı build etmemize sağlayacak en temel gereksinimleri sağlıyor.
React Component’inizi Eklemek
İkinci aşamada geliştirdiğiniz React componentini /src klasörünün içerisine taşıyoruz. İhtiyaç duyacağınız tüm .css yada .js dosyalarını burada tutuyoruz.
Yeni bir yıl, yeni hayaller, yeni hedefler…
2021 yılı için yeni hedefler belirleyip kendime bir liste oluşturmak istiyorum. Genelde bu tür listelere bir heves çok madde eklenir ve bir çoğu hiç başlanılmaz yada unutulur. Ben bu listeleri her yıl düzenli olarak hazırlayıp, belirli aralıklarla dönüp incelediğim için şahsım adına bir itici güç oluyor ve motive oluyorum. Bu yüzden bu makalede çokta uçmadan, çeşitli konularda kendime hedefler koymak istiyorum.
🛒 Alınacaklar Listesi
Bu yıl alınacaklar listem oldukça kalabalık. İlk olarak, laptop ve oyun bilgisayarımı sattığım için acil bir bilgisayara ihtiyacım var. İlk fırsatta Macbook Pro satın almak istiyorum. Bununla birlikte çalışma masamı baştan dizayn…
Her yıl gelenek haline getirdiğim biten yılın değerlendirmesi ve yeni yıl hedefleri makaleme bu senede devam ediyorum.
Blog sitemin teknik alt yapısını sürekli değiştirmemden ötürü bazı eski makalelerime maalesef ulaşamıyorum. En azından bundan sonrasının düzenli olacağını garanti edebilirim.
😷 2020’nin Kısa Özeti
2020’yi tek kelime ile özetlemek gerekirse, tüm dünya adına ortak bir kelimemiz çıkacaktır; korona .
Çin’in Wuhan kentinden tüm dünyaya hızla yayılan ve hayatı felç eden COVID-19 virüsü herkesin planlarını bozdu. İlk zamanlarda her dışarıdan eve geldiğimizde uzun uzun el yıkamamız, gözlükleri buhar yapan ve nefes almayı zorlaştıran maskeler, arkadaş çevremizle görüşememek vb iyice bunalttı herkesi. …
Ömer Gülçiçek
Frontend Developer
