AngularJS ile geliştirdiğim bir sayfa, Chrome’da sorunsuz çalışırken, Internet Explorer’ın son sürümünde saçmalıyordu. Bunun sebebini araştırırken ilginç bir bilgi edindim: AngularJS’de dizi içindeki bir nesneyi güncellerken klasik değişken atamasını kullanmak doğru bir yaklaşım değil! Yani normalde aşağıdaki şekilde güncelleme yaparız: var dizi = [ { /* birinci nesne */ }, { /* ikinci nesne */ } ]; var […]
Kategori / Arayüz Geliştirme
Pure CSS3 Fade In Dropdown Menu
Artık web projelerinde mümkün olan tüm animasyonlar için CSS3 geçişlerini kullanıyoruz (CSS3 Transitions). Eğer IE8 ve 9 için destek vermemiz gerekirse, Modernizr ve jQuery kullanarak fallback uyguluyoruz. Ben bu örnekte fallback olayına girmedim fakat tekrar fırsat bulduğumda yazıyı güncelleyeceğim.
Yazının konusu olan, sadee CSS3 kullanarak fade in menu yapmanın püf noktasını geçtiğimiz günlerde, Barcin.com’u kodlarken tam olarak kavradım. Aylardız zaten CSS3 menü kullanıyordum fakat bunu Javascript ile menü elemanlarına mouseenter/mouseleave anında class vererek/kaldırarak yapıyordum ve timeout kullanmam gerektiği için de %100 verimlilikte çalışmıyordu. Şimdi sizinle paylaşacağım ipucu sayesinde, Javascripte gerek kalmadan, menünüzü sadece CSS3 kullanarak stabil bir şekilde çalıştırabileceksiniz. Devamını Oku
Javascript Loglarını Yönetmek
Projelerin geliştirme aşamasında sıklıkla console.log deyimini kullanıp, sonucu izleyerek çalışmamızı sürdürürüz. Hataları daha çabuk farketmek ve kademe kademe ilerlemek için oldukça elverişli bir yöntem.
Bunun yanında console.info, console.warn, console.error, console.clear gibi metodlarından da faydalanırız. Hata yakalarken, aradığımızı daha kolay görelim diye ya da sırf renkli bir görüntü oluşması için :)
Ve projenin sonunda bu logları tek tek arayıp yoruma alırız. Herkes böyle yapmıyordur muhakkak ama yapanlarınız var, biliyorum, ben de sizden biriydim çünkü :)
Temelde iki sebeple yaparız bunu:
- Javascritp console desteği olmayan tarayıcılarda javascript hatası almamak için
- Son kullanıcı bu logları görmesin diye
İlki daha önemli olmakla beraber, ikisi de makul sebepler. Devamını Oku
translate3d vs translateY
Modern tarayıcılara göre CSS kodu yazıp IE8 gibi arayıcılarda gerekli düzenlemeleri yapma yaklaşımını benimsediğimden beri HTML elemanlarını dikeyde ortalamak için aşağıdaki kodu kullanıyorum: top: 50%; @include transform(translateY(-50%)); Bugün güncel ön yüzünü kodladığım güncel bir projenin fancybox’una baktığımda ileri geri oklarının, fareyi hareket ettirdikçe ya da fare ile okların üzerine gelindiğinde aşağı/yukarı 1pxlik bir kıpırdama yaptığını gördüm. Büyük […]
Cross Browser: CSS Hacks vs. Javascript Methods
IE 9 ve altı için <!–[if IE 9]> vb. tanımlamalarla tarayıcıya özel css yüklenebiliyordu. Fakat IE 10 ile birlikte bu tanımlamalar devre dışı bıraklıdı.
bkz. http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/
IE 10 ve üstü için spesifik tanımlamalar yapma ihtiyacı doğduğundan bununla ilgili bir araştırma yaptım.
Diğer tarayıcılar için bu tarz bir tanımlama bulunmuyor. Arayüz geliştiriciler genelde CSS Hack kullanarak tarayıcılara özel çözümler üretiyorlar.
Ancak Javascript kullanarak <html> tagına tarayıcı adı, tarayıcı sürümü ve işletim sistemi class’ı yazdırmak ve/veya html dokümanına tarayıcıya özel sitil dosyası yazdırmak mümkün. Devamını Oku
Responsive Web Siteleri Geliştirilirken Dikkat Edilmesi Gerekenler
Merhaba, Son bir yıl içinde 15 tane Responsive Front-End Kodlama yaptım. Bunlar genellikle, ilgili projenin arayüz tasarımını geniş ekranlarda sağlıklı bir şekilde çalışır hale getirdikten sonra, “deneysel olarak” mobil uyumlu hale getirmek şeklinde oldu. Genel kullanımın da bu yönde olduğunu düşünüyorum ama belki de yanılıyorumdur; çünkü Elegant Themes‘ten satın aldığım bir temanın (bkz. nimble) psd […]
Google Chrome’da yazı tipi sorunu!
Chrome’da bazen sadece kendi bilgisayarınızda yazı tipi sorunu olabiliyor; tespit ettiğiniz yazı tipi hatasını, başka bir bilgisayarda test ettiğinizde aynı hatayı almadığınızı görüyorsunuz. Bunu sebebi “Yazı Tipi”dir. Localde yüklü olan fontu kullanmaya yönelik aşağıdaki gibi bir css kullanımı yaparız:
font-family: 'Helvetica Neue', Helvetica, sans-serif; Devamını Oku
Wookmark jQuery plugin does not work on the iPhone! [solved]
I had such a problem. Annoyed me a bit.
Then I noticed that the problem is list items’ width! Devamını Oku
How to Get Mobile Device Width for CSS @media Queries
Very useful website for this: http://responsejs.com/labs/dimensions/
Placeholder Fix for Internet Explorer
Unfortunately, placeholders don’t run versions of IE9 and down. But we can solve this problem easily is a small jQuery code: if( $.browser.msie && parseInt($.browser.version, 10) < 10 ) { if( $( '[placeholder]' ).length ) { $( '[placeholder]' ).focus(function(){ if( $(this).val() == $(this).attr('placeholder') ) { $(this).val(''); } }).blur(function(){ if( $(this).val() == '' ) { $(this).val( […]