Görseller için Öncesi&Sonrası Karşılaştırma

Bu yazımda da yukarıda hızlı kod yazımı videosunu izleyebileceğiniz başka bir örnekten bahsedeceğim. İki görseli üst üste koyacağız ve en üste koyacağımız bir element ile bu görselleri birbiri ile karşılaştırabileceğiz. Örneğin kodlarına buradan ulaşabilirsiniz. Öncelikle HTML elementlerimizi yerleştiriyoruz. ba-wrap sınıfında bir div oluşturup diğer elementlerimizi bunun içine yerleştirelim. Bu div içine left ve right sınıflı … Okumaya devam et Görseller için Öncesi&Sonrası Karşılaştırma

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 … Okumaya devam et Yarım Saatte Web Tabanlı TIC-TAC-TOE Oyunu Geliştirme

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 … Okumaya devam et HTML, CSS ve Javascript ile Matrix Wall Yapımı

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.

Buradaki painter parametresi için kullanacağımız CustomPainter’a genişletilmiş bir sınıfımız olmalı. … Okumaya devam et Flutter’da CustomPaint Widget ve Curve

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 … Okumaya devam et Flutter’da Fizik Bazlı Animasyonlar (Physics-based animation)

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. … Okumaya devam et Flutter’da Tween Animasyonları

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 … Okumaya devam et LAMP Üzerinde “Failed to open stream: No space left on device” Hatası

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 … Okumaya devam et Angular 5.0

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;

Soru bu kodun konsola çıktısı nedir? Javascript’e aşina olmayan biri için ilk bakışta basit bir for döngüsü gibi durabilir. Ama setTimeout ve Javascript için Event Loop … Okumaya devam et Popüler Bir Javascript İşe Alım Sorusu

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 … Okumaya devam et Javascript’te Promise Kullanımı