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

Kişisel web sitemi düzenli olarak değiştiriyorum ve bunları GitHub profilimde yedekliyorum. İsteyen herkes kodları forklayıp düzenleyip kullanabilir. Her seferinde farklı bir teknolojiyi denemek amaçlı kod yazardım. Bu sefer ise olabildiğince minimal bir bakış açısıyla yaklaştım.

İlk zamanlar PHP ile bir blog sitesi geliştirmiştim. (Bu halinin yedeğini maalesef almadım, o yüzden GitHub profilimde yok.)

Ardından bloglarımı Medium’da tutmaya karar verdim ve kişisel sitemi hakkımda, referanslar vb içeren bir site haline çevirdim. React ve React Router kullanarak tek sayfa olarak geliştirdim (v1.omergulcicek.com).

Bir sonraki geliştirmemde siteyi sayfalardan arındırıp tek sayfa tasarıma geçirdim (v2.omergulcicek.com).

Son olarakta daha renklerden arınmış, beyaz rengin hakim olduğu, boşlukların fazlaca bulunduğu haline güncellemiştim (v3.omergulcicek.com). Bu hali ise AMP kullanarak geliştirdim, kaynak koda bakılarak diğer sitelerden farkı anlaşılabilir. …

Sene başında 2018'in Ardından makalesi ile yeni yıl hedeflerimi belirtmiş ve 1 ay sonra 2019 Değerlendirmesi — İlk Ay makalesi ile bu hedeflerimi kısa sürede ne kadar düzene getirip getiremediğimi yazmıştım. Senenin yarısını değerlendireceğim “İlk 6 Ay” değerlendirmesini ise bu makalede yazarak, bir yandan öz eleştirilerime devam ederken, diğer yandan gelecek zamanda geri dönüp okumak için hayatımdan notlar almayı amaçlıyorum.

Önceki makalede yazdıklarımı konu başlıkları olarak tekrardan ele alacağım için aynı şeyleri tekrar yazmadan kısa kısa özet geçeceğim.

Planlı Yaşam

Yeni yılda hayatıma kattığım ve en memnun kaldığım gelişmelerden birisi not alıp planlı yaşamak oldu. Az çok bunu yapıyordum zaten ama her yapacağımı Google Takvim’e kaydetmek ve o planlara sadık kalarak yaşamak oldukça güzel ve hayatıma yeni bir alışkanlık katmış oldum. …