tarihinde Fatih Hayrioğlu

fatihhayrioglu.com sitesini github pages üzerinde barındırıyorum. Alan adı godady’de kayıtlı. Bir arkadaşımın önerisiyle sitemi cloudflare’e ekledim. HTTPS, güvenlik ve performans yetenekleri nedeniyle tercih etmiştim.

Geçenlerde github pages HTTPS desteği vermeye başlayınca cloudflare’i sorgulamaya başladım. HTTPS yoksa performans etkisini çok görmedim, zaten güvenlikle ilgili sıkıntı çıkacak bir site değil. Ben en iyisi bu cloudflare’den kurtulayım dedim.

Benim gibi devamlı alan adı işleri ile uğraşmayan biriyseniz. Neyin ne olduğunu çabuk unutuyorsunuz. Amacım cloudflare’de olan yönlendirmemi bitirip alan adını direk github pages’e eklemek ve HTTPS’i aktifleştirmek.

İlk yaptığım şey cloudflare.com‘a gidip sitemi buradan silmek oldu. Duraklatmak değil silmek tüm bağlarınızı koparıyor cloudflare’den.

İkinci adım olarak alan adım yöneticinize gidip DNS Nameservers’larını normal değerine döndürmek.

manage domain

Alan adını yönet(manage) butonuna tıkladıktan sonra gelen sayfada aşağı inerek DNS yönet linkine tıkladım.

DNS Yönet

Custom olan seçme kutusundaki değeri default’a çektim. Artık alana adım godady tarafından yönetiliyor.

Aynı sayfayı yenilediğimizde sayada artık DNS yönetimi alanları geliyor.

Burada bir kaç değişiklik yapmamız gerekiyor.

  • CNAME satırını “www” github pages website sitenizin adresi ile değiştirmeniz gerekiyor (Benim için fatihhayri.github.io)
  • A tipi satırını github pages ip’siyle değiştirmemiz gerekiyor. 185.199.108.153 (HTTPS sonrası değişerek bu ip yi vermeye başladı.)
  • Sonra aşağıdan ekle(add) diyerek 3 kere sırasıyla 185.199.109.153, 185.199.110.153, 185.199.111.153 iplerini girmek yeterli. İlk kaydettiğimizde altta görünüyor ama sonra godady ekran göründüğü gibi üste alıyor bunları :)

godady ip ekleme

Sonuç olarak godady DNS yönetimi ekranınınz aşağıdaki gibi bir görünüme kavuşacak. Yarım saat yazsa da 5 dak sonra güncelledi.

godady DNS yönetimi son

Eğer CNAME dosyanız yoksa root’a ekleyip kendi domainizi içine yazıp github pages’e eklemeniz gerekiyor. Ben bunu daha önce eklediğim için tekrar eklemedim.

Son olarak Github Pages ayarlar sayfasına gidip

github ayarlar

Aşağıdaki HTPS kutucuğunu aktifleştirerek bu işe son veriyorsunuz.

github pages https aktifleştirme

Kalın sağlıcakla.

Kaynak

tarihinde Fatih Hayrioğlu

Mobilde overflow-x: auto veya overflow-y: auto uyguladığımız alanlardaki kaydırma işlemlerinde Android’lerde akıcı bir şekilde çalışırken iOS telefon ve tabletlerde akıcılığını kaybediyor. Süründürüyor resmen.

ios iphone kaydırma

Stackoverflow’da çözümünü buldum ve sizlerle paylaşmak istedim.

* {
    -webkit-overflow-scrolling: touch;
}

şeklinde tüm elemanlara uyguladığımız gibi sadece istediğimiz elemana da uygulayabiliriz.

ios düzeldi

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

Geçenlerde bir makaleye denk geldim. https://jamie.build/last-2-versions sitenin ardalan rengi kadar dikkat çekici bir konuyu ele almıştı. Özetle şöyle: Autoprefixer ve Babel gibi araçlar tarayıcı listesi bilgisini browserlist kütüphanesinden alıyorlar. Desteklenen tarayıcı listesine göre bir çıktı oluşturuyorlar. Autoprefixer mesela oluşan listeye göre prefix oluşturuyor. Eğer listeniz eski kalmış ise hala eski tarayıcılar için kod üretiyor olabilirisiniz. Bu da kod boyunuzun artmasına neden olabilir. Babel kullanıyorsanız sonuçları daha kötü olabilr.

Bizim projede biz Autoprefixer kullanıyoruz. Bizdeki tarayıcı listesi şöyle kalmış:

...
"config": {
    "autoprefixerBrowsers": ["Android >= 5", "Chrome >= 43", "Firefox >= 44", "iOS >= 8.4"]
}

browserlist

Sadece tarayıcı listesinin olduğu eski ve eksik bir liste. Bu kullanımın şöyle bir dezajavantajı var; hızlı otomatik güncellenen tarayıcılar nedeniyle listeniz eski kalıyor. Ayrıca sizin sitenize gelen tarayıcı listesine yeni giren tarayıcıları kodun dışında tutmuş oluyorsunuz.

Daha aktif bir liste için tarayıcıların güncel son 2 sürümünü dikkate alacak şekilde kodu değiştirelim.

...
"config": {
    "autoprefixerBrowsers": ["last 2 versions"]
}

browserlist son 2 sürüm

Bu kullanımda da sizin projenizin kapsamında olmayan tarayıcılar listenize girebilir.

  • Firefox for Android
  • QQ Browser1.2
  • Android Browser67
  • Android Browser4.4.3-4.4.4
  • Baidu Browser7.12
  • Blackberry Browser10
  • Blackberry Browser7
  • IE Mobile11
  • IE Mobile10
  • Opera Miniall
  • Opera Mobile46
  • Opera Mobile12.1

Bu listeyi daha dinamik ve kendi projemize uygun hale getirmek için aşağıdaki yöntemi kullanmalıyız.

...
"config": {
    "autoprefixerBrowsers": [">0.50%"]
}

browserlist yüzdeli

Kullanım yüzdesi %0.5’in üstünde olan tarayıcı listesini kullan demek. Yüzde değerini projemize göre arttırıp azaltabiliriz. Buradaki sorunlardan birisi de bu tarayıcı kullanım oranı dünya geneli için olan kullanım oranıdır. Biz kendi projemizdeki kullanım oranına göre bu listeyi şekillendirmeliyiz.

Yukarıdaki kodu yazınca bizim proje kapsamında olamayan aşağıdaki tarayıcılarda listeye girdi.

  • Android Browser4.4
  • Opera Miniall
  • IE11
  • Opera52
  • Safari11.1

Browserlist kütüphanesi dokümanından yardım alarak istemidiğimiz tarayıcıları bu listenin dışına atabiliriz. Ben koda etki eden iki tarayıcıyı listeden çıkarıp listemi son haline getiriyorum.

...
"config": {
    "autoprefixerBrowsers": [">0.50%", "not android 4.4", "not ie 11"]
}

browserlist yüzdeli ve kullanılmayan tarayıcı çıkar

Bu tarayıcı listesinin autoprefixer’a girince nasıl bir çıktı üreteceğini https://autoprefixer.github.io/ sitesinden test edebiliriz. Autoprefixer için güzel bir test aracı.

autoprefixer test sitesi

Tarayıcılar arayüz geliştirme ekiplerinin önemli bir parçası. Tarayıcılar konusundaki her gelişmeyi iyi takip etmeli ve projelerimizi bu gelişmelere göre güncel tutmalıyız.

Sağlıcakla kalın.

Kaynaklar