Destek olmak ister misin?

Kodlamayı çok seviyorum, ondan daha çok sevdiğim bir şey varsa o da bildiklerimi anlatmak 🙂 Ancak her sene en fazla 20-30 video hazırlayabiliyorum. Bunun sebebi, hayatımı devam ettirebilmek için freelance olarak çalışıyor olmam.

Ancak çok uzun zamandır hedefim, tamamen eğitim alanına yönelmekti. Tabi bunu yapabilmek için farklı seçeneklerim vardı, örneğin udemy’de eğitim videoları hazırlamak gibi. Ancak bu sadece belli konularda belli kez yapabileceğim bir şey ve amacıma çok ulaşabileceğim bir durum değil. Bazıları gibi ardı ardına 5-10 video atabilecek potansiyelde birisi değilim çünkü bana çok doğru bir politika gibi gelmiyor.

İşte bu yüzden sizin desteğinize ihtiyacım var, yanlış anlamayın benim paraya ihtiyacım yok, ben her şekilde ayakta durabiliyorum ancak tamamen eğitime yönelmek istersem ve freelance hayatından uzaklaşıp bu konuda içerikler üretmeye başlayacaksam sizin desteğiniz olmadan bunu yapamam.

Bu yüzden patreon’da bir destek başlattım. Birkaç seçenek var, kendinize ve bütçenize uygun olanı seçerek hem bana destek olabilir hem de bu aboneliklerin getirdiği avantajlardan yararlanabilirsiniz.

Eğer düşündüğüm hedeflere ulaşabilirsem, dünyanın en mutlu insanı olarak bu işi yapmaya devam edebileceğim.

Peki ya ulaşamazsam ne olur? Önemli değil, ben de dünyada yaşamak için gerekeni yapanlardan olup kendime yeni hedefler koyarım. Pes etmek zayıfların işi, ve biz zayıf değiliz biliyorsunuz 🙂

Eğer siz de destek olmak isterseniz Patreon’a bir gözatın;

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”