Genel
Arayüz geliştiricileri (Front-end) dünyası çok hızlı bir şekilde güncelleniyor. Her gün birçok kütüphane ve araç çıkıyor ve bazıları kendilerini sonlandırıyor. Arayüz geliştiriciler için bu yeniliklerin takibi önemli bir konu. Kendini güncel tutmak için yenilikleri takip etmek olmazsa olmaz. Çıkan yenilikleri çalışma hayatımızı kolaylaştıran yenilikler, bunlardan haberdar olmak bizim iş yükümüzü
CSS Dersleri
Ardalan resimler için uyguladığımız background-size ve background-position özelliklerine benzer bir kullanımı <img> ve <video> etiketleri içine uygulamamızı sağlayan özellikler. Bu özelliğe ihtiyacımız çok eksilere dayanır. Görsel içeriğin kullanıcı tarafından girildiği sitelerde gelen resim boyutlarını istenen tasarımdaki içerik kutusuna sığdırma isteklerini karşılamak için bu özellikleri kullanırız. Bu
DOM (Belge Nesnesi Modeli) HTML ile javascript'i birbirine bağlar. DOM, HTML dokümanındaki tüm elamanları ağaç yapısı mantığıyla nesneye çevirir ve javascript'in erişebileceği hale getirir. Böylelikle dinamik olarak HTML elemanına ekleme, çıkarma ve biçimini değiştirme imkanı elde etmiş oluruz. HTML'in yapısını etiketler (tag), attribute (öznitelik)
CSS Dersleri
Daha önce bu özelliği kullanacaktım ancak Chrome desteğini kaldırdığı için kullanım oranı çok düşüktü. Chrome 56'dan itibaren tekrar desteklemeye başladığı için artık kullanabiliriz. position:sticky tanımlanan eleman kaydırma çubuğu gelene kadar position:relative gibi davranır, kaydırma çubuğu geldikten sonra position:fixed gibi davranır. Örnek ile daha iyi anlayacağız.
DOM ilişkili seçiciler İlk yazımda genel seçicilerden bahsetmiştim bu yazımda ise DOM üzerinden ilişkilendirilen seçicilerden bahsedeceğim. DOM'daki elementler bir ağaç yapısı ile aile bağlarına benzer bir şekilde bir birlerine bağlıdır. Bu ilişkiden yararlanılarak oluşturulan seçicilere DOM ilişkili seçiciler denir. Örnek bir HTML kodu verelim; <div> <
jQuery'nin en büyük avantajlarından birisi seçici kullanımının basitiliğidir. CSS seçicilerini javascript'e kazandıran bu kullanım kolaylığı sizzle kütüphanesinden gelir. Javascript bu konuda daha sığ ve beceriksiz kaldı. Tabi sonra işler değişti ve artık aynı yeteneklere sahip. Seçicilerdeki bu büyük atılımı sağlayan iki özellik var querySelector ve querySelectorAll.
jQuery'de en çok kullandığımız özelliklerinden birisi de sınıf tanımlama, silme, varlığını kontrol etme ve toggleClass. Peki bunların normal javascript'te karşılığı var mı ve bu kadar kolay kullanabiliyor muyuz? Elbette. Sırası ile inceleyelim. Sınıf (class) ekleme Seçtiğimiz elemana bir sınıf tanımlamak istediğimizde jQuery ile $el.addClass('
Uzun seneler web siteleri kodlarken nimetlerinden yararlandığımız jQuery, mobilin yükselişi ile gündemin ana maddesi olan performans sonrası yerini sorgulatıyor. Acaba normal javascript ile ben jquery'nin yaptıklarını yapamaz mıyım. Aslında Javascript'in hızlı yenilenmesi ile birlikte bir çok özelliği, metodu, fonksiyonu normal javascript ile yapabiliyoruz. Bu yazı dizisini
HTML nesneleri üzerinde veri taşıma alışkanlığımız HTML5 öncesine dayanıyor. HTML5 bunu standart hale getirdi ve kullanımı yaygınlaştı. Bir ögeye ait verilerin ögenin üzerinde taşıması bize bazı durumlarda çok büyük katkı sağlıyor. İşi abartmamakta yara var :) Hemen örnek ile devam edelim. <ol> <li data-length="2m11s">
CSS ile birlikte çok fazla medya kontrolünü kullanıyoruz. /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { } Peki bu kontrolleri javascript tarafında nasıl yaparız diye araştırınca window.matchMedia ile karşılaştım. Bildiğimiz
CSS Dersleri
Başlığa bakınca sanki bir aile olayına dair bir yazı geçecek anlamı çıkarmayın. HTML'deki elemanların birbiriyle olan ilişkilerini anlatmak için soyağacı benzetmesi yaparız ve birçok yerde kullanırız. Ebeveyn, çocuk, kardeş seçicileri gibi. Bu yazımın konusunda CSS'in seçicileri ile ilgili olacaktır. CSS ile aynı seviyedeki elemanların ilişkilerini kullanarak
Genel
Arayüz geliştiriciler için yeniliklerin takibi çok önemlidir. Yeniliklerin takibi içinde İngilizce önemlidir. İngilizce seviyeniz yeniliklerin takibinde belirleyici etkendir. Bu işe yeni başlayan bir çok insanda bu sorunlara neden oluyor. Google Çeviri hizmeti daha önce çok iyi sonuçlar vermiyordu. Genelde İngilizce - Türkçe sözlük için kullanıyorduk. Yenilenen Google Çeviri hizmeti artık