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

HTML ve CSS ile Sohbet arayüzü nasıl kodlanır?

Merhaba dostlar, CSS Flex makalesi hazırladığım konumda flex örneği verirken bir sohbet arayüzü hazırlamıştım. Daha sonra bunu bir seri haline getirmeye karar verdim ve henüz kaç haftadan oluşacağına karar vermediğim bir seriye başladım. İlk haftada ise bu sohbet arayüzünü sıfırdan başlayanlar için birlikte html ve css kodlarını yazdık. Güzel bir seri başlangıcı oldu, yeniye hitap ettiği için SASS kullanmıyorum ve çok zorlanıyorum ancak yine de eğlenceli oldu. Bakalım siz aynı keyfi alacak mısınız 🙂 İyi seyirler dilerim.

Ayrıca derste hazırlanan içeriğin kaynak kodlarını da sizlerle paylaşmak istiyorum, takıldığınız yerlerde açıp bakabilirsiniz hatalarınıza.

CSS Flex ile İlgili Her şey

Bu yazımda sizlere CSS Flex modülü ile ilgili tüm kullanımları, ipuçlarını göstermek istiyorum. Bu yazının sonunda CSS Flex nedir, nasıl kullanılır, nerelerde kullanılır gibi sorularınıza yanıt bulabileceksiniz. Hazırsanız başlayalım 🙂

Flex Yapısı Nedir?

Boyutları bilinmeyen-dinamik alanları daha kolay yönetmek için W3C bize al abicim sana flex, istediğin gibi alanını yönet demiş. Hatırlarsınız, eskiden öğeleri sağa-sola dayamak için float kullanır, dikey ortalamak için css’e takla attırırdık. Ancak flex yapısı ile, artık kapsayıcıya ve içindeki öğelerine esneklik getirebiliyoruz.

Flex’i kullanmamızın en büyük sebebi, esnek yapıları kolayca yönetmek için. Çünkü yapıya esneklik verdiği için, yatay ve dikey hizalarda nasıl görüneceğini, öğelerin kendi içinde hizalanmalarını ve sırasını belirlemek gibi güzel özellikleri bulunuyor. Ayrıca tüm çözünürlüklerde ve cihazlarda daha hızlı ve esnek bir yapı kullanmak için, flex bizim tamda ihtiyacımız olan şey.

Flex genel anlamıyla bir CSS özelliğinin adı değil, yapının adıdır. Dolayısı ile flex yapısı altında hem kapsayıcı (container) için hemde içindeki öğeler (items) için birden fazla flex özelliği bulunmaktadır. Bu makalede hepsini incelemeye ve anlamaya çalışacağız.

Okumaya devam et “CSS Flex ile İlgili Her şey”