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. …

Netflix yapımı The Queen’s Gambit, toplam 7 bölümden oluşan bir mini dizi; yani devamı gelmeyecek. Türkçeye kraliçenin gambiti olarak çevriliyor olsa da, dilimize vezir gambiti olarak geçmiş durumda. Bu makalede çok az bir spoiler var, diziyi izlemediyseniz bile tadınızı kaçırmaz.

The Queen’s Gambit dizisi gerçek bir hikaye değil, fakat Rus Boris Spassky’i mağlup ederek Dünya Satranç Şampiyonası’nı kazanan ilk Amerikalı olan satranç dehası Bobby Fischer’ın hikayesinden esinlenilmiş. Bobby Fischer, satrançseverlerin yakından tanıdığı 2785 elo (satranç puanına) sahip bir oyuncuydu. Halen günümüzde de oynanan Chess360'ı bulan kişi.

Chess360

Kısaca değinmek gerekirse Chess360, piyonların arkasındaki taşların yerlerinin rastgele dizilmesiyle oynanıyor. Taşların nasıl dizileceğini iki oyuncuda bilmediği için, oyun için ön hazırlık yapılamıyor ve doğaçlama oynanıyor. …

Frontent Developer’ların en büyük baş belası sanırım mail template kodlamaktır. Hem her CSS koduna izin vermiyor, hemde e-posta servisleri (Gmail, Outlook, Yandex Mail vb.) arasındaki destek uyumsuzlukları başınızı ağrıtıyor. Hele birde kodlayacağınız arayüzün responsive olması istendiyse vay halinize!

Neyse ki MJML var; MJML responsive mail arayüz kodlamayı oldukça kolay hale getiriyor. Templates sayfasında oluşturdukları hazır şablonları kullanabilir yada sıfırdan mail template’inizi geliştirebilirsiniz.

Kısa Bir MJML Eğitim Turu

Getting started sayfasına girdiğinizde kısa bir eğitim veriliyor.

Eğitim özeti şu şekilde;

• Responsive e-postalar tasarlamak için <mj-section></mj-section> ile tasarımınızı bölümlere ayıracaksınız. background parametresi alabiliyor.
• Ardından resim, metin yada butonları kapsayacak olan <mj-column></mj-column> etiketi ile section'ımızı kolonlara böleceğiz.
• Bir yazıyı <mj-text></mj-text> etiketleri arasında yazmalıyız; align="left/right/center" parametresi alabiliyor. …

HTML geliştirme yaparken bir linki yeni sayfada açılmasını istediğimizde linke attribute olarak target="_blank" ekleriz.

<a href="..." target="_blank">Link</a>

React geliştirme yaparken eğer yukarıdaki kodu kullanırsanız, bunu rel="noopener noreferrer" ile beraber kullanmanız gerektiği konusunda konsolda bir uyarı görürsünüz.

Bunun sebebi, target="_blank"ın ortaya çıkardığı güvenlik açığıdır. Bağlandığınız sayfa, geldiğiniz siteye erişim sağlayabiliyor.

Test etmek için Mathias Bynens’in konuda hakkında yazmış olduğu makaleyi inceleyin.

Click me!!1 (same-origin) ve Click me!!1 (cross-origin) linklerine gittiğinizde açılan sayfa bizi "Why don’t you go back to the previous tab? (Neden önceki sekmeye geri dönmüyorsun?)" yazısıyla karşılıyor. Önceki sayfaya gittiğimizde ise daha önce sayfada olmayan şu yazı ile karşılaşıyoruz;

Aynı makalede Click me!!1 (now with rel=noopener) veya Click me!!1 (now with rel=noreferrer-based workaround) linklerine girdiğimizde ise karşımıza "The previous tab is safe and intact. window.opener was null; mischief not managed! …

CSS’te :link, :visited, hover, :active gibi bazı pseudo class'lar (sözde sınıf) vardır. Bugün pseudo class'lardan :focus ve :focus-withinin farkını göreceğiz. Makale sonunda iki farklı örnek bulunmakta.

CSS’te Focus Özelliği

:focus özelliği, sayfada tab tuşu ile gezdiğimizde linklerin ve form alanlarının sırasıyla üzerine gelindiğinde çalışan bir pseudo class'tır.

Google Chrome tarayıcısı, varsayılan olarak bir input’un üzerine geldiğinde, inputun etrafını bir kenarlık ile sarar.

:focus {
  outline: -webkit-focus-ring-color auto 1px;
}

Varsayılan olarak gelen bu :focus özelliğini beğenmediğimden dolayı, outline kodunu kaldırıp, box-shadow ile daha hoş bir görsellik sunmak adına aşağıdaki kodu projelerime dahil etmeyi tercih ediyorum.

:focus {
  box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.25); …

Web sitenizde Google Font kullanıyorsanız, basit birkaç adım ile daha hızlı yükleme sürelerine ulaşabilirsiniz.

Öncelikle bu sitede kullandığım Inter yazı stilini HTML’e eklediğimizde olanları inceleyelim.

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

Bağlantı bir yazı tipi dosyası değil bir stil sayfası için gibi görünüyor. Bu kodda bulunan hrefini tarayıcımızda açarsak Google Fonts'un @font-face ile her karakter setinde istediğimiz tüm yazı tipleri için bir sayfa yüklediğini görüyoruz.

Ardından her @font-face tarayıcıya, dosyayı fonts.gstatic.com'dan indirmeye çalışmadan önce, eğer varsa yazı tipinin localden kullanılmasını söyler.

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v2/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2) …

HTTP Arşivine göre, tipik bir mobil web sayfasının ağırlığı 2.6 MB’nin üzerindedir ve bu ağırlığın üçte ikisinden fazlası resimlerdir. Resimleri en iyi şekilde optimize edersek, çok iyi bir performans kazancı elde edebiliriz.

Resimler sayfa genişliğinden daha büyük olmamalıdır. Resimleri farklı breakpoint’lere göre birden çok kaydedin ve tarayıcının en uygun olanı seçmesini sağlamak için `srcset` özelliğini kullanın.

srcset’in içinde `w` değeri, tarayıcıya her resmin genişliğini söyler.

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

Resimleri Doğru Çözünürlükte Kaydedin

Aşağıdaki 2 resim neredeyse aynı görünüyor. Fakat birinin dosya boyutu diğerinden 10 kat daha büyük.

İlk resmin dosya boyutu çok daha büyüktür. Eğer kullanacağımız resim sayfada 300px genişliğinde görüntülenecek ise bu resmi 1000px olarak sayfaya çağırmamız gereksiz yük oluşturacaktır. …

Bir frontend geliştirici olarak, kişisel sitenizin portfolyo sayfasında müşterilerinizin logolarını listelediğiniz bir bölüm oluşturmuş olabilirsiniz. Kolay gibi görünse de, logoların hizalama ve ortalama ile ilgili bazı zorlukları beraberinde getirir; logoların farklı boyutlarda olması bir yana, yatay ve dikey olmaları sağlıklı bir çıktıya ulaşmanızı zorlayabilir.

Bu makalede, farklı boyut ve şekillerdeki logoları CSS ile göze hoş şekilde nasıl hizalayacağımızı göreceğiz.

Birbirinden farklı 8 farklı logo; dikey/yatay, büyük/küçük.

Öncelikle bu logoları CSS Grid layout’u kullanarak hizalamaya başlayalım.

<ul class="brands">
  <li class="brands__item">
    <a href="#">
      <img src="img/logo.png" alt="logo">
    </a>
  </li>
  <li> <!-- diğer logolar --> </li>
</ul>.brands {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.brands__item {
  background: #eee;
}

.brands__item img {
  display: block;
  max-width: 100%…