iPhone’da yazdığım bir kodun çalışmadığını gördüm. Aşağıdakine benzer bir selectbox‘ın ilgili option‘ununu seçmek için kullandığım bir kod parçası.

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).attr('selected', true)

Sorunun çözümü her zaman ki gibi stackoverflow‘da

attr özelliği Safari’de çalışmıyor. Onun yerine jquery 1.6’dan sonra gelen prop özelliğini kullanmak gerekiyor.

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).prop('selected', true)

Aklınızın bir köşesinde kalsın.

Kaynak

background-attachment özelliğinden çok öncelerden bahsetmiştim. Benim bahsettiğimde iki değer alıyordu; scroll ve fixed değerleri. Ancak bunlara CSS3 ile birlikte yeni bir değer daha eklenmiş; local değeri. Gerçi ekleneli bayağı olmuş. (2009)

Benim yazdığım ilk makalede şöyle tanımlamışım bu özelliği “background-attachment özelliği zemine eklenen resmin sayfa ile
scroll etmesini veya sayfanın zeminin de çakılı kalmasını sağlar.”

Bu tanımda eksik kalan kısımları tamamlayalım. background-attachment özelliği iki farklı görünüme hitap eder: Birincisi ana kapsayıcı yani tarayıcı, ikincisi bizim oluşturduğumuz kapsayıcı diğer adı ile yerel (local).

background-attachment: local tanımı ana kapsayıcının kaydırma hareketinden etkilenmez, sadece bizim oluşturduğumuz elemanın kaydırma çubuğu hareketinden etkilenerek artalanı çakılı kalır.

Yukarıdaki örneği incelersek;

background-attachment: scroll ana kaydırma etki etmez, yerel kaydırmada artalan resmi kaydırılır.

background-attachment: fixed ana kaydırma ve yerel kaydırmada artalan resmi çakılı kalır.

background-attachment: local ana kaydırma etki etmez, yerel kaydırmada artalan resmi çakılı kalır.

Örneği inceleyerek tanımları daha iyi anlayabiliriz.

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
- 8+ +

Kalın sağlıcakla.

Kaynaklar

enter image description here

jquery’nin gelişmiş arayüz elemanları kütüphanesi jquery-ui yüksek boyutuna rağmen tercih edilen bir kütüphanedir. Ben yüksek boyutundan dolayı kullanmasam da bazen ihtiyacımı en iyi gören kütüphane olduğunda tercih ederim.

Kullanacağımız arayüz elemanına özel Jquery-ui’ı indirebiliyoruz. jQuery-ui indirme sayfasında gerekli elemanları seçip indir dediğimizde jquery-ui çekirdek kodu ve kullanılan elmanların javascriptlerini bize sunuyor. Buraya kadar her şey güzel.

Bu makaleyi yazmama sebep olan durum ise yeni arayüz geliştirme ortamlarında yoğun olarak kullanılan bower ile jquery-ui’ın kullanım kısmı. Tüm kütüphaneyi ekleyeceksek kolay.

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<script>
    $( "#projects" ).accordion();
</script>

adresini kodunuzun ilgili kısmına eklemeniz yeterli.

jquery-ui’ın tüm elemanlarını değilde sadece bir veya iki tanesini kullanmak istediğimizde ne yapmalıyız?
Klasik yöntemde indirme sayfasında ilgili elemanları seçip indir dememiz yeterli.

Peki bower ile eklerken nasıl oluyor?

Mesela sadece sıralama işi için kullanacağımız dosyaları yüklemek istediğimizde ne yapmalıyız.

Aşağıdaki gibi bir yol izlemek gerekiyor çözüm için.

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
<script>
    $( "#projects" ).accordion();
</script>

İstediğiniz elemanı eklerken hangi çekirdek koda ihtiyacımız olduğunu nasıl anlayacağız.

bower_components/jquery-ui/ui/ klasörü içindeki eklemek istediğiniz elemanın ilgili dosyasını açın. Örneğin sıralama ( sorting ) için sortable.js

(function( factory ) {
if ( typeof define === "function" && define.amd ) {

	// AMD. Register as an anonymous module.
	define([
			"jquery",
			"./core",
			"./mouse",
			"./widget"
		], factory );
....

Yukarıdaki kod kısmında ihtiyacı olan çekirdek eleman listesi var. Bunu kullanacağız.

Aynı şekilde tüm elemanlara uygulanabilir.

Kaynak

Arayüz geliştiriciler neredeyse kod yazdığı editörleriyle geçirdiği zaman kadar veya daha fazla tarayıcı konsollarında zaman geçiriyor. Tabi bu gibi durumlarda konsolların yeteneklerini öğrenmek işimizi kolaylaştırıyor. Sizlere dün yaşadığın bir sorunu ve güzel bir çözümü anlatmaya çalışacağım.

Bir yerden sonra console.log ile konsola bastığım değerler arasından bazı değerleri ayırt etmek gerekiyor. Bunun için tarayıcıların CSS yardımı ile bir çözümü mevcut.

console log

console.log('%c Şampiyon Trabzonspor', 'background: #379DE8; color: #550329; font-size: 24px');

console.log içindeki ilk virgüle kadar olan yer içeriği, virgülden sonraki kısımda konsolda görünecek alana atadığımız css kodlarını gösteriyor. CSS ile yapıyor olmak süper. Şimdi süper oldu. Dikkat edilecek husus ilk bloka %c ile başlamalıyız.

console log renkli

Kaynaklar

Açıklama satırlarının önemini tekrar anlatmaya gerek yok. Bir çok zaman unuttuğumuz veya iki kelime ile geçiştirdiğimiz açıklama satırları takım çalışmaları ve uzun süreli projelerin olmazsa olmazı. Yani tüm projelerin :)

Sass CSS’in açıklama satırı kullanımını aynen destekler.

/* Programcının kodu 
 * okuyup anlayamacağı 
 * noktalarını yazalım */
.yildiz
    display: block

Sass’ın CSS’te olmayan tek satırlık açıklama satırı desteği de vardır. Javascript’ten alışık olduğumuz iki bölme işareti ( // ) ile kullanılır.

/* Programcının kodu 
 * okuyup anlayamacağı 
 * noktalarını yazalım */
.yildiz
    // Her şeyi yazalım
    display:block

Burada şöyle bir durum var. Tek satırlık açıklama satırları CSS tarafından desteklenmediği için bu açıklama satırları derlenince silinecektir. Yukarıdaki kodun CSS çıktısı

/* Programcının kodu
 * okuyup anlayamacağı 
 * noktalarını yazalım */
.yildiz {
  display: block;
}

şeklinde olacaktır. CSS standardı olan açıklama satırları dururken tek satırlık açıklama satırı silinmiştir. Bu genelde istenen bir özelliktir.

Ayrıca sass’ınızı sıkıştırıyorsanız açıklama satırlarınız sıkıştırma sırasında silinir. Silinmemesini istiyorsanız açıklama satırınız /*! ile başlamalıdır.

/*! Programcının kodu
 * okuyup anlayamacağı 
 * noktalarını yazalım */
body
  background-color: #9ab1c7

Bu kodu derlediğimizde

sass --watch sass/deneme.sass:css/deneme.css --style compressed

CSS kod çıktısı

/*! Programcının kodu
 * okuyup anlayamacağı 
 * noktalarını yazalım */ body{background-color:#9ab1c7}.deneme{width:450px;height:250px;display:block;position:relative;top:20px}.deneme h1{color:red}
/*# sourceMappingURL=deneme.css.map */

şeklinde olacaktır.

Sass’ın bize kazandırdığı değişken tanımlarını açıklama satırı içinde kullabiliyoruz.

$developer: 'Fatih Hayrioğlu'
$version : '1.0.1'

/* Bu site #{$developer} tarafından yazılmıştır. Sürümü #{$version}. */

CSS çıktısı

/* Bu site Fatih Hayrioğlu tarafından yazılmıştır. Sürümü 1.0.1. */
body {
...

şeklinde olacaktır.

Açıklama satırı ile düzenli kod blokları oluşturmak

Açıklama satırlarını belirli tiplere ayırarak kodlarımızı daha düzenli hale getirebiliriz. Bootstrap 4. sürümündeki örnekleri incelersek.

Giriş açıklama kodu.

/*!
 * Bootstrap v4.0.0-alpha (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

Tanımın başında /*! ile Sass derlemesinde yorumların silinmemesi için eklenmiş.

Genel dosya yapısını incelediğimizde örneğin _variables.scss dosyasına bakalım.

Ana başlıklar

// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
...
...
// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.

$btn-padding-x: 1rem !default
$btn-padding-y: .375rem !default
$btn-font-weight: normal !default

Yukarıdaki standarda baktığımızda ana başlıklar bir boşluk sonrasında bir açıklama alanı içeriyor.

İçindekiler tablosu

// Table of Contents
//
// Colors
// Options
// Spacing
// Body
// Links
// Grid breakpoints
// Grid containers
// Grid columns
// Fonts
// Components

İçeriği büyük dosyalarda içerik tablosu kullanmak mantıklı.

Standart açıklama satırı

Kod aralarındaki açıklamalar için tek satırlık açıklama satırı eklenir.

// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
$font-size-root: 16px !default

Bootstrap güzel bir örnek ancak başka örneklerde mevcut onlarıda inceleyip benzer bir yapıyı kendi projelermize entegre edebiliriz.

Kalın sağlıcakla.

Kaynaklar