Film Tavsiyeleri

Merhaba arkadaşlar, film izlemeyi çok seven birisi olarak uzun süredir böyle bir web sayfası açmayı planlıyordum. Hazır vaktim de varken, nihayet basitte olsa bir şeyler yapmaya başladım.

Bu web sayfasına, her gün bir film tavsiyesinde bulunuyorum. Aynı zamanda tavsiye ettiğim filmleri izleme imkanınızda var, burada amaç bana göre en eğlenceli, komik, güzel vakit geçirten filmleri sizi arama zahmetinden kurtararak günlük olarak sizlere sunmak.

Bir bakıp şans vermeye ne dersiniz 🙂 Seviliyorsunuz.

CSS “rebeccapurple” Renginin Hikayesi

Eric meyer ve kızının hikayesini duydunuz mu? Eric Meyer ismini bilmiyorsanız bile eminim onun hazırladığı reset.css’i hepiniz kullanmışsınızdır.

Eric Meyer’in kızına geçtiğimiz yıllarda kanser teşhisi konmuş. Eric’de bu durumu bloğunda paylaşmaya karar vermiş. Ancak kızının durumu git gide kötüleşmiş.

Ve işin kötüsü, Eric kızını kaybetmiş. Web geliştiricileri topluluğumuz ise bu konuda onu onurlandırmak ve desteklerini göstermek için harika bir yol bulmuşlar.

CSS Çalışma Grubuna renk listesine yeni bir renk eklenmesi için sunum yapmışlar. Rebecca’nın en sevdiği renk olan #663399 rengini yeniden adlandırmak ve ismini beccapurple olarak belirlemek istemişler.

Bunun Eric’in ailesi için daha fazla acı ve sıkıntıya neden olmayacağından emin olmak isteyen CSS WG ona ulaşmış ve Eric ise şöyle bir cevap yazmış.

“Ölmeden birkaç hafta önce Rebecca bize altı yaşında büyük bir kız olduğunu ve Becca’nın bir bebek ismi olduğunu söyledi. 6 yaşına geldiğinde herkesin ona Becca diye değilde Rebecca diye seslenmesine istedi.Ve 6 yaşındaydı. En azından 12 saat için altı yaşındaydı. O yüzden Rebecca olmalı.”

Eric Meyer

Sonuç olarak Eric Meyer’in de izniyle 19 Haziran 2014’de #663399 renk kodu rebeccapurple ismiyle adlandırılmaya uygun bulundu.

Bu topluluğun bir parçası olduğum için mutluyum.

Destek olmak ister misin?

Bir süre önce youtube kanalımda KATIL özelliği açıldı. Bugüne kadar bir çok kişi sana destek olmak istiyoruz diyorlardı, ben de bana destek olmak isteyenler olabilir diye youtube kanalımda bu özelliği aktif ettim.

Belli başlı abonelikler belirledim ancak aboneliklerin hangisini seçeceğinizin bir önemi yok, hangisi size uygunsa onu seçip bana destek olabilirsiniz. Abone olan herkes, Udemy gibi platformlarda ücretli olarak yayınladığım eğitimlere youtube üzerinden erişebiliyor. Yani KATIL’ı sadece destek olmak için değil aynı zamanda ücretli kurslarıma erişmek içinde kullanabilirsiniz.

Destek olup olmamak size kalmış, ben yine de hepinizi ayrı ayrı seviyorum ve ders videolarıma, makale yazmaya ve blog tutmaya devam edeceğim. Yavaş yavaş evlilik sürecine gittiğim şu yıllarda, belki bu şekilde daha sağlıklı adımlar atabilirim diyerek sizleri de işin içine kattım. Ben iki türlüde içerik üretmekten keyif alıyorum, en büyük mutluluğum bu. Umarım hiçbir zaman bu heyecanımı ve mutluluğumu kaybetmem.

Bir şekilde destek olmak isterseniz, aşağıdaki bağlantıdan youtube kanalıma giderek KATIL düğmesine basıp gerekli adımları takip edebilirsiniz.

Teşekkür ederim hepinize dostlar.

Web fontlarını yükleme sırasında görünür kılın

Fontlar genellikle yüklenmesi zaman alan büyük dosyalardır. Bazı tarayıcılar ise yazıları font yüklenene kadar gizler. Google Page Insight’da hız testi yaparsanız, bu gibi durumlarda şöyle bir hata verdiğini görebilirsiniz.

Bu problemin çözümünü ise @font-face tanımında font-display: swap ekleyerek önüne geçebileceğimizi söylüyorlar.

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

font-display özelliği font’un nasıl görüneceğini belirlemek için kullanılıyor. swap değeri ise tarayıcıya sistem fontunun anında yüklenmesini ve özel font dosyası yüklendiğinde değiştirilmesini istediğini söylüyor.

Google Fontları

Google fontlarını kullanırken de, url’in sonuna &display=swap şeklinde parametre eklerseniz, aynı işlevi görecektir.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

Kaynak: https://web.dev/font-display

HTML5 ile Resimlere Lazy Load Ekleme

Her gün HTML5 ile birlikte yeni deneysel API’ler ekleniyor. Bu eklenen API’ler genelde dediğim gibi deneysel oluyor ve bizler tarafından teste tabi tutuluyor, günün sonunda iyi olan kazanıyor ve yeni versiyonlara eklenme ihtimali artıyor. Deneysel olmasının tek dezavantajı, tüm tarayıcıların desteklemiyor olması. Ancak bu, yeni gelişmelerin bizi heyecanlandırmasının önüne geçemez 🙂

Zira eskiden, resimlere lazy load eklemek için javascript eklentileri kullanmak durumundaydık. Bunun amacıda, resimler sayfanın açılış hızın etkilemesin diyeydi. Ancak şu an sadece Chrome ve Opera‘da çalışan native bir çözüm var.

Okumaya devam et “HTML5 ile Resimlere Lazy Load Ekleme”

Benim için 2019 nasıl geçti?

Her sene düzenli olarak yazdığım yıl sonu değerlendirmesinde bu sene de naçizane geçen yılımı değerlendirmeye çalışacağım. Geçen her sene, beni daha fazla olgunlaştırıyor, fikirlerimi değiştiriyor. 1 yıl önce emin olduğum fikirlerim, 1 yıl sonra bambaşka olabiliyor. Bazen bu konuda acaba fikirlerim yeterince güvenli değil mi diye düşünerek kendimi sorguladığım da oluyor. Yine de her senenin getirdiği yenilikleri seviyorum ve onları kabulleniyorum.

Okumaya devam et “Benim için 2019 nasıl geçti?”

Geliştirici Aracını kullanarak sayfanın ekran görüntüsünü almak

Genelde sayfanın ekran görüntünü almak için eklenti kullanılıyor. Ancak geliştirici aracı, bir çok özelliği barındırdığı gibi manuel olarak ekran görüntüsü almayı da destekliyor 🙂 Nasıl yapıyoruz? Geliştirici aracını açıp ⌘ + ⇧ + P tuşu ile komut satırı paneli açılıyor. Ya da aşağıdaki gibi ilgili paneli açın.

Buradan Screenshot diye arattığınızda 4 farklı ekran görüntüsü alma seçeneği var. Bunlardan full size olanı ile baştan aşağı tamamının ekran görüntüsünü alabilirsiniz.

Render işlemi bittikten sonra ekran görüntüsü png formatta iniyor. Eğer bir durumdan ötürü ihtiyacınız olursa aklınızda bulunsun 🙂 Capture area screenshot ilede sizin seçeneğiniz bir alanın ekran görüntüsünü kayıt edebilirsiniz. Kolay gelsin.

Algolia nedir? Nasıl kullanılır?

Arama konusu yazılımda herkesin zorlandığı konulardan bir tanesi. Önemli olan veritabanındaki veriyi alıp göstermek değil, büyük ölçekli filtreleme işlemleri ve işlem sürelerini minimuma indirerek kullanıcıya iyi bir arama deneyimi yaşatmak. Buda büyük ölçekli projelerde çokta kolay olmayan bir durum. Bu gibi durumlarda Algolia diyor ki, gönder bana verini ben sana en hızlı şekilde bu hizmeti vereyim.

Ek olarak autocomplete, instantsearch gibi konularda da hizmet veren Algolia’nın ücretli olduğunu söylememe gerek yok sanırım? Hesap açıp 14 gün boyunca ücretsiz deneyebiliyorsunuz. Eğer hoşunuzda giderse (ki adamlar şu sıralar ciddi yatırımlar alıyorlar, belli ki herkesin hoşuna gidiyor) aylık minimum 29$ ödeyerek bu servisi kullanmaya devam edebilirsiniz.

Baktığınızda bu kadar büyük ölçekli işlerde çokta önemsenmeyecek bir rakam diyebiliriz. Elbette bu 29$’lık paketin bir limiti var ancak dediğim gibi, performans istiyorsanız o zaman biraz paraya kıymanız gerek 🙂

Okumaya devam et “Algolia nedir? Nasıl kullanılır?”

Prototürk Soru & Cevap Bölümü Açıldı!

Uzman cevap’tan sonra bir daha soru & cevap sistemi hazırlamam diyordum ancak çok fazla talep geldiği için her şeyi prototürk altında birleştirmeye karar verdim. Bu sefer sunucuları kendimde tutmaya karar verdim, bu devirde kimseye güven olmuyor 🙂 Artık öyle sunucu yandı, yedekler gitti modası geçti, ölene kadar buradayız Allah izin verirse ^^

Her türlü öneri ve görüşe açığım. Ziyaret edip geri dönüşlerinizi lütfen bildirin 🙂

https://prototurk.com/soru-cevap

HTML ve CSS ile sıfırdan web arayüzü nasıl kodlanır?

Son 2 makalede başlıkları biraz SEO amaçlı yazdım gibi oldu ama yazacak daha mantıklı bir şeyler bulamadım. Biliyorsunuz #frontend serisine başladık ve 2. haftamızda benime çok severek takip ettiğim egghead.io’nun ana sayfasını sıfırdan html ve css yazarak kodladık.

Bu serinin amacı yeni başlayanlara bir şeyler öğretmek, bilenlerin bilgilerini pekiştirmek ve flex’i sevdirmek. Belki ilerisi için grid ile bir şeyler yapmaya başlayabiliriz.

Derste yazılan kodların kaynak dosyasını da paylaşıyorum, takıldığınız yerde açıp bakarsınız. Beleşe getirmeyin, az yapmaya uğraşın 🙂

Demoyu incelemek isterseniz;

http://www.erbilen.net/demo/egghead/index.html