-
Yarım Saatte Web Tabanlı TIC-TAC-TOE Oyunu Geliştirme
Yukarıda videosunu izleyebileceğiniz bu örneğin kodlarına da buradan erişebilirsiniz. Bu örneği, oyunun oynandığı alanı saran bir wrapper sınıfı verdiğimiz bir div içinde başlatıyoruz. Bu wrapper içine hamleleri göstermek için kullanacağımız 9 tane cell ve bilgi göstermek için kullanılacak 1 tane info sınıflı div ekliyoruz. wrapper elementimize 300px genişlik ve 5px iç boşluk padding veriyoruz ki…
-
HTML, CSS ve Javascript ile Matrix Wall Yapımı
Yukarıda videosunu izleyebileceğiniz bu örneğin kodlarına da buradan erişebilirsiniz. Bu örnekte meşhur Matrix filminde kullanılan akan yeşil yazıları simüle etmeye çalışacağız. DOM olarak HTML tarafında bir element yazmadan tüm elementler javascript ile yönetilecek. Javascript tarafında kolon ve satır sayılarını hesapladık ve iç içe iki döngü ile elementlerimizi yerleştirmeye başladık. Burada kolon genişliğini 30px vererek…
-
Flutter’da CustomPaint Widget ve Curve
Javascript üzerinde canvas kullanarak pek çok yaratıcı işler yapılıyor. Flutter’da da benzer karmaşık animasyonları ve çizimleri yapabileceğimiz sınıf ve metotlarımız var. Aynı isimli Canvas sınıfı Flutter’da da var fakat bunu direkt olarak kullanmayacağız bunun yerine CustomWidget widget’ını kullanacağız. CustomPaint’in 5 parametresi var, aşağıda açıklamaya çalıştım. const CustomPaint({ Key key, this.painter, // CustomPainter nesnesi this.foregroundPainter, // CustomPainter…
-
Flutter’da Fizik Bazlı Animasyonlar (Physics-based animation)
Bir önceki yazıda Tween ile bir değeri değiştirerek bunu widget içinde kullanıp bir animasyon oluşturmaya çalışmıştık. Şimdi diğer bir animasyon türü olan fizik bazlı animasyonları tanıyalım. Gerçek dünya hareketlerini taklit etmeye yaran animasyon sınıfları bu gruba dahil ediliyor. Yer çekimi ya da bir yayın salınımı algısını vermeye çalıştığınızda bunların uğraştırıcı matematik hesaplarını kodumuza ekleyip karıştırmadan…
-
Flutter’da Tween Animasyonları
Başarılı bir mobil uygulama için animasyon kullanmanın kaçınılmaz olduğunu düşünüyorum. Çok basit bir renk değişimi ya da button hareketi tüm UX ve UI algısını yukarı çekebiliyor. Flutter’ın en büyük sözlerinden biri 60 FPS animasyonlar oluşturabileceğimizdi. 60 fps sözünü başka bir yazıda test edeceğim şimdi basit birkaç animasyon örneği yapalım. Flutter temel olarak animasyonları ikiye ayırıyor.…
-
LAMP Üzerinde “Failed to open stream: No space left on device” Hatası
Linux üzerinde Apache sunucu ile PHP ve MySQL kullanımı, nginx tahtını sallasa da, oldukça yaygın. Bu yapı üzerinde aldığım bir hatayı ve çözümünü paylaşayım. Hata web sayfanızda Session kullanıyorsanız “Failed to open stream: No space left on device” şeklinde görünüyor. PHP her oturum için bir dosya oluşturuyor sistem üzerinde, eğer cihazınız üzerinde yer kalmadıysa bunu…
-
Angular 5.0
Bugün Angular ekibi 5.0 sürümünü bir blog yazısı ile duyurdu. Bir ana sürüm olmasına(major release) rağmen, HttpClient ve bazı pipe’lar dışında, kod yapısına çok dokunan bir değişiklik yok. Önceden yapılmış plan gereği ana sürüm olarak dağıtılıyor. Arka planda(build işlemi gibi) pek çok düzeltme yapıldığı iddia ediliyor. Mobil için özellikle PWA’ler yapabilmemiz için bir gelişme yok…
-
Popüler Bir Javascript İşe Alım Sorusu
Medium’da denk geldiğim bir yazıyı buraya aktaracağım bu sefer. Yazıda verilen bir kod parçasının Amazon ve Google gibi büyük firmaların işe alım süreçlerinde sorulduğu söyleniyor. Hemen koda bakalım; var arr = [10, 12, 15, 21]; for (var i = 0; i < arr.length; i++) { setTimeout(function() { console.log('Index: ' + i + ', element: '…
-
Javascript’te Promise Kullanımı
Promise tanımı ES6 ile Javascript dünyasına girdi, aslında daha önce bazı kütüphaneler ile kullanılabiliyordu artık bağımsız olarak kullanılabilir oldu. Javascript’in en meşhur özelliklerinden olan asenkron çalışma yapısına çok uygundur. Bir işlemin o an bitmesini beklemeden başarılı ya da başarısız bir sonuç için girilen fonksiyonları sonuca bağlamamızı sağlar. Event‘ler ile de yapabiliyorduk aslında bu tarz bloklama…