Javascript, HTML, CSS ile web sayfaları yapmak, frontend işler çıkarmak bence çok zevkli işler. Her ne kadar gelişmeleri takip edip adapte olup bunları uygulayarak projeler yapsakta aslında biraz tekrara düşüyoruz. Mesela daha önceleri kullandığımız (hala kullanılıyor) jQuery ile collopsed sidebar yaparken şimdi artık eskisi gibi aynı işi yapacak kodları tekrar yazmak içimden gelmiyor. Ant Design tarzı birçok framework mevcut ve işin aslı amerikayı tekrar keşfetmeye gerek yok arkadaşlar.Bu konuda da aslında oyunların yapılış sürecinde birçok karşılaşılan sorun bizleri daha iyi eğitiyor. O yüzden basitten de başlasanız browser tabanlı oyun yazarak algoritma konusunda çok daha güzel kendimizi geliştirebiliriz.

İşyerinde boş bir zamanımda aklıma gelen ikiz kartları bulma oyununu githuba yükledim. Şimdi nedir bu oyun ne işimize yarayacak derseniz. Hiçbir işinize yaramayacak. Bende zaten boş zaman eğlencesi olsun diye yazdığım bir oyun. Ama algoritmik olarak ve css ile card flip yönünden benzer bir uğraşı olan arkadaşlar için örnek teşkil edebilir veya geliştirip daha ileri seviye bir oyuna dönüştürebilir.

Bunu ortalama bir yıl önce yazmıştım aslında. Hatta böyle bir şey yaptığımı bile unutmuştum. Biraz oynayayım dedim ve 16'lık deseni biraz zor bitirdim :)
Umarım fikir verme açısından işinize yarar. Hepinize güzel günler dilerim. 

GitHub - https://github.com/vehbipekpak/card-game

Ş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.