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.

Image for post
Image for post
MacBook Pro

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.

Image for post
Image for post

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.

Image for post
Image for post
React Npm Template

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.

Image for post
Image for post
Bobby Fischer

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.

Image for post
Image for post
MJML

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;

Image for post
Image for post
https://mathiasbynens.github.io/rel-noopener/#hax


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;
}
Image for post
Image for post
:focus input örneği

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…


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

Ömer Gülçiçek

Frontend Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store