Şu an için iddalı bir blog yazarı değilim. O yüzden site içerisinde dolaşırken pek bir şey bulamayacaksınız. Umarım blog yazma konusunda ilerleyen zamanda daha fazla heyecan duyar ve daha sık içerik girerim. 

Yazılım ile ilgilenen insanların muhtemelen yaşadıkları her sorunu veya yaptıkları her işi algoritma olarak kafasında planladığını düşünüyorum. En azından bu benim için böyle. Yaptığım bir işi nasıl bilgisayara yaptırabilirim veya nasıl bunu daha hızlı yapabilirim şeklinde düşünmeden duramıyorum. Bu yönde saatlerimi harcayarak keyif aldığım araştırmalar sonucu belli bir bilgi birikimi sağladığımı düşünüyorum. 

Neyse, gelelim asıl konumuza. Çalıştığım kurumda personelin zamanını ciddi anlamda tüketen manuel olarak yapılan birçok iş mevcut. Bunlardan biri de personele tebliğ edilmesi gereken evrağa dair tebliğ ve tebellüğ belgesi hazırlanması. Aslında hazırlanacak olan bu belge her ne kadar çok fazla zaman alacak bir iş gibi görünmese de personel sayısının artması yapılacak olan düzenleme için harcanan zamanı artırmaktadır. Konuya hakim olan okurlar ne demek istediğimi daha iyi anlayacaktır ancak kısaca anlatmak gerekirse: Remi yazışma kurallarına uygun olması, personelin aralarındaki rütbe veya sicile göre sıralanması ve tebliğ edilecek olan belli personelin olması durumunda bu evrakın tekrar düzenlenmesi aşamasında gereksiz bir zaman kaybı yaşanmaktadır. 

Bu projede daha önceden json formatında hazırlanan ve personel bilgilerini içeren listenin basit bir şekilde işlenerek birkaç tıklama ile herhangi bir düzenleme yapmaya gerek olmadan, çıktı almaya (yazdırmaya) hazır tebliğ ve tebellüğ belgesinin tanzim edilmesini amaçladım ve bence hem görsel anlamda hem de işlevsel olarak gayet başarılı bir uygulama ortaya çıktı. Bu uygulamayı çalıştığım kurumda her ne kadar kullanamıyor olsam da react.js'i öğrenmem aşamasında bana çok faydası oldu. Bir yazılım dilini veya öğrenme aşamasında olduğunu herhangi bir konuyu öğrenmenin en iyi yolu kesinlikle onu uygulamaktır. React üzerinde kendini geliştiren arkadaşlar için de incelemeleri için bir kaynak olabilir. Eğer projeyi inceleyecek olursanız olumlu veya olumsuz görüşlerinizi lütfen benimle paylaşın. Teşekkürler.

GITHUB REPO BAĞLANTISI

UYGULAMANIN EKRAN GÖRÜNTÜLERİ:

 

Bir çok web sayfasına giriş yaparken sayfanın yüklenmesi esnasında karşınıza çeşitli tasarımlarda hazırlanmış yükleniyor sayfası görmüşsünüzdür.

Front-end geliştirme yapan arkadaşlar bu konudan bihaber değillerdir ancak kimi sayfalarda fake preloading çalışmaları gördüm. Yani şu yapılıyor: sayfanın browserda yüklenmesi durumu kontrol edilmeden belirlenen bir süre boyunca preloading ekranı gösteriliyor. Bu yöntem yanlış mı? Değil tabiki, ancak bu işin doğru yöntemi varken neden kaçak yöntemle amatör bir iş yapılsın ki?

Şimdi gerçek zamanlı preloading sayfasının yapılma mantığını kısaca şöyle anlatayım:

  • Tasarımını zevkinize göre yaptığınız preloading sayfasını ilk olarak ziyaretçinin karşısına getiriyoruz
  • Javascript ile browser'ın sayfayı yüklemede ne aşamada olduğunu kontrol ederek (readyState), complete durumunda preloading sayfasını gizliyoruz.

Çok basit ve kısa bir yöntem. Hemen html, css ve javascript kodlarımıza geçiyoruz.

Öncelikle preloading ekranı için bir div tag'ı yazıp içerisine beğendiğiniz bir spinner gif'i, svg'si yerleştirelim. Konuyu hızlı bir şekilde anlatmak için ben, SpinKit üzerinden bir spinner seçtim. Bu spinner konusu hayal gücünüze kalmış arkadaşlar.

<div id="preLoading">
	<!-- Spinner | Start -->
	<div class="sk-cube-grid">
  		<div class="sk-cube sk-cube1"></div>
  		<div class="sk-cube sk-cube2"></div>
  		<div class="sk-cube sk-cube3"></div>
  		<div class="sk-cube sk-cube4"></div>
  		<div class="sk-cube sk-cube5"></div>
  		<div class="sk-cube sk-cube6"></div>
  		<div class="sk-cube sk-cube7"></div>
  		<div class="sk-cube sk-cube8"></div>
  		<div class="sk-cube sk-cube9"></div>
	</div>
	<!-- Spinner | End -->
	
</div>

Id'si “preLoading” div etiketini body tag'ından hemen sonra yerleştirebilirsiniz. HTML kodlarıyla işimiz bitti. 

preLoading div etiketimizin sayfanın tamamını kaplamasını istiyoruz ki arka planda imajların yüklenmesi veya cdn olarak kullanılan pluginlerin çeşitli sebeplerle yüklenmesi sırasında kademeli yüklenmeyi ziyaretçiye göstermeyelim.

div#preLoading{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color:#333 ;
  display: flex;
  align-items: center;
}

CSS kodumuz ile preLoading div'imizin position özelliğine absolute değerini atadık ve sayfanın tamamını kaplaması için left, top, width ve hight değerini belirledik. Şu haliyle sayfayı açarsanız arkaplanına #333 renk kodu atanmış koyu gri bir sayfa göreceksiniz. Sayfanın yüklenmesi bitinceye kadar bu ekran ziyaretçiye gösterilecek. 

Seçtiğimiz spinner için css kodlarında değişiklik yapabilir veya istediğiniz/beğendiğiniz farklı bir spinner kullanabilirsiniz. Kullandığım spinner'a ait css kodlarını codepen de bulabilirsiniz.

Şimdi gelelim son aşamaya. Sayfamıza istek gönderildi ve ziyaretçinin karşısına direk preLoading  ekranı geldil. Bundan sonra bu ekranı gizleyen javascript kodumuz ekte sunulmuştur :)

document.addEventListener('readystatechange',function(){
	if(document.readyState=='complete'){
		document.getElementById('preLoading').style.display = 'none';
	}
});

Kodu açıklayacak olursam eğer: browser'ın document nesnesinin “readystatechange” özelliğini olay dinleyici ile dinliyoruz ve readyState özelliğinin sayfanın yüklendiğini bildiren “complete” değeri döndürmesi sonucu “preLoading” div'imizi gizliyoruz. 

See the Pen preLoading by Vehbi PEKPAK (@vehbycom) on CodePen.

 

Konu bu kadar arkadaşlar. Blog yazısı yazmak gerçekten kolay değilmiş. İçerisinde bulunduğum işlerde karşılaştığım sorunların çözümlerini veya yeni öğrendiğim gelişmeleri hem kendime not defteri olması açısından hem bu alanda araştırma yapan geliştiriciler için elimden geldiğince yazmaya çalışacağım.

Bu konu hakkında fikirlerinizi paylaşırsanız sevinirim. Sizin farklı yöntemleriniz varsa öğrenmeyi çok isterim.  
Zaman ayırdığınız için teşekkürler.