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

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…

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…

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;

…

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…