Firebug, şuanda bir web tasarımcının neredeyse tüm ihtiyaçlarını karşılayabilecek bir Firefox eklentisidir. Herşeyden önce benim en sevdiğim yanı; sayfayı kaynak kodu düzenlemeden düzenleyebilme imkanı sunmasıdır. Tabîi sadece bu küçük bir özellik… Diğerlerini kaba taslak anlatmaya çalışacak olursam:

Konsol :

Konsol ismini aslında ben “konsol”a yakıştıramasam da, Konsol’da javascript hata ve uyarılarını görebilme, css, xml uyarıları ve kaynak kodda geçen ama erişilemeyen (varolmayan) dosyaları gösterme gibi basit özellikleri var. Ayrıca AJAX işlemleri için sıkça kullanılan, parametre ve geri bildirimi görme özelliğiyse en favori ve işlevsel özelliğidir.

Biraz daha gelişmiş özelliğinden bahsedecek olursam, konsola isteğiniz doğrultusunda birşey yazdırabiliyorsunuz.

Örneğin:

console.log("Herhangi bir yazi");
console.debug("Debuglama islemi icin tanimlanmis kayit");
console.info("Bilgi icin kullanilabilecek, 'information' simgesine sahip bir kayit");
console.warn("Uyari simgeli kayit");
console.error("Ve son olarak hata kayit girdisi");

Bence bu özelliği Javascript ve jQuery coder’ları için ideal bir debug yöntemi… Bunun haricinde gruplama vs işlemleri de var, detaylı bilgi için buraya bakabilirsiniz.

HTML :

HTML paneli aslında 1 + 4 bölümden oluşmakta. 1 diye adlandırdığım genel HTML kaynak kod kısmı ve 4 adet tab. Bunlar sırayla, Style, Panel-computed, Yerleşim ve DOM tabları…

Kaynak Kod Bölümü :

Firebug Kaynak Kod

Yukarıdaki resimden anlatamaya çalışacak olursam; Sarı ile işaretlediğim simgecik Javascript ile bir nesne değişimi esnasında size Script panelini açıp, adım adım debug yapma olasılığı sunuyor.

Kırmızı ile seçili olan butoncukta ise, alttaraftaki kaynak kodunsen seçeceğiniz elemanı sanki not defterindeymişsiniz gibi düzenlemenizi ve anlık değişikliklerinizi önizlemenizi sağlıyor.

Alttaki kaynak kodlarındaki özellikleri de çok kolay bir şekilde düzenlemeniz ve değişiklikleri görmeniz mümkün. Sadece paneli açın ve birşeyleri değiştirin, bırakın gerisini size Firebug göstersin…

Style Tabı :

Style tabında seçtiğiniz nesnenin inline (satıriçi, yani style=’….’ özelliği) veya CSS class veya IDlerinde atanan, üstnesneden alınan ve üste basılan özellikleri görmenizi ve düzenlemenize yardımcı olur. CSS’in hangi dosyadan alındığını dosya ve satır ismi ile görebilir ve o satıra gidip CSS panelinden de düzenleyebilirsiniz.

Firebug HTML Style Tabı

Panel-Computed Tabı :

Bu tab nesneye ait tüm özellikleri alan -> veri olarak bir tablo olarak listeler, yani bir nevi özet ekran…

Firebug Panel-Computed Tabı

Devamı yakında sizlerle ;) Herkeze iyi firebuglamalar…

For 32 Bit :

• HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\AeDebug\Debugger
• HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\.NETFramework\DbgManagedDebugger

For 64 Bit :

• HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Windows NT\CurrentVersion\AeDebug\Debugger
• HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\.NETFramework\DbgManagedDebugger

Find this nodes and delete them…

Working in Windows XP and Windows Seven, I didn’t test in Windows Vista…

Regards ;)

Aşağıda jQuery kullananların ilgisini çekebilecek küçük ipuçları bulunmaktadır…

1) Mümkün olduğunca class ile seçim yapmayın

Doğal jQuery’de 2 tip seçim türü vardır: document.getElementByTagName (tagler için) ve document.getElementById (id için). Gördüğünüz gibi class için birşey yok, varsa da ek bir fonksyonla oluşturuluyor ve javascriptin kendi doğasında yok…

Ayrıca işin mantığına bakacak olursak eğer önce regex ile elementlerde class var mı diye bakılır, varsa class’lar boşluk ile ayrılır vs vs. ID veya tagdeki gibi tek hamlede bulunamayacak bir işlem.

2) Selector’lerinizi (seçici) kaydedin ya da bağlayın

$("div#elementID").hide();
$("div#elementID").css("width","200");
$("div#elementID").show();

Yukarıdaki kodlar aslında yanlış değildir fakat aslında çok büyük bir yanlışlık vardır; performans!.. Bu şekildeyken her seferinde elementID’yi tekrar tekrar arar ve işlem yapar. 100 satırlık bir sayfada herhangi bir hız farkı göze çarpmaz ama Facebook‘ta ya da aklınıza gelebilecek efektlerle yüklü bir sitede böyle birşey asrın hatası denebilecek kadar büyüktür… Bunu yerine elementi bir değişkene atamak daha makûldür:

var elementID = $("div#elementID");
elementID.hide();
elementID.css("width","200");
elementID.show();

ya da böyle bir örneği bağlayabilirsiniz de :

$("div#elementID").hide().css("width","200").show();

3) İçeriksel bilgi

Eğer selectorünüz daha fazla bilgi verebiliyorsanız verin. Örneğin :

$(".sinif").hide();

yukarıdaki şekilde çalışır fakat:

$("div.sinif").hide();

şekilde daha hızlı çalışır.

Son olarak…

Özetle: elinizden geldiğince nesne tek ise ID, değilse – ve eğer mümkünse – element tagiyle birlikte class’ıyla seçmeye çalışın. Eğer o nesneyi birden çok kez kullanacaksanız eğer değişkene atayın.

Kolay gelsin ;)

Mozilla Firefox 4.0 Beta 1  ilk kez görücüye çıktı ve test için hazır… Ben biraz kurcaladım, kendi yorumlarımı yazıyorum. İsteyenler listeye yazının sonundaki kaynaktan bakabilir…

Performans : Firefox 3.x’teki ilk açılma yavaşlığı artık yok ve tablar arasındaki geçişler de biraz daha rahatlamış görünüyor. Eski versiyonlar ram’i daha fazla yoruyordu fakat şuanlık 7-8 tab açıp test ettiğimde sadece 120 k ram harcatabildim…

Görünüm : – ne yazık ki – tasarım artık neredeyse tag=”Google chrome; google”]Google Chrome‘dan ilham alınarak yapılmış. Tab‘lar (sekmeler) en tepede ve butonlar da dahil olmak üzere neredeyse herşey Chrome’u andırıyor. Bookmarks (yer imleri) butonu, yer imleri araç çubuğunun en sağında geliyor (değiştirilebilir)…

Eklenti Yöneticisi : Eski eklenti yönetim penceresinin yerini tam ekran bir eklenti yöneticisi almış. Sanırım burdaki düşünceleri eklenti ya da temanın daha detaylı bir şekilde gösterimi olabilir ??

Kaynak : http://blog.mozilla.com/blog/2010/07/06/firefox-4-beta-1-tell-us-what-you-think/

TypeRacer adındaki bu site gayet güzel düşünülerek yapılmış ve eğlenceli bir site olmuş. Siteye üye olmadan da kendinizi test edebilir, başkalarıyla yarışabilirsiniz… İyi yazışlar ;)

İçerisinde HTML 5′te yeni gelmiş tagler, taglerin attributeleri ve artık kullanılmayan tagler gibi küçük özellikleri hızlı bir şekilde listelenmiş olarak bulabilirsiniz.

Buradan indirebilirsiniz…

$mime_types = array("323" => "text/h323",
"acx" => "application/internet-property-stream",
"ai" => "application/postscript",
"aif" => "audio/x-aiff",
"aifc" => "audio/x-aiff",
"aiff" => "audio/x-aiff",
"asf" => "video/x-ms-asf",
"asr" => "video/x-ms-asf",
"asx" => "video/x-ms-asf",
"au" => "audio/basic",
"avi" => "video/x-msvideo",
"axs" => "application/olescript",
"bas" => "text/plain",
"bcpio" => "application/x-bcpio",
"bin" => "application/octet-stream",
"bmp" => "image/bmp",
"c" => "text/plain",
"cat" => "application/vnd.ms-pkiseccat",
"cdf" => "application/x-cdf",
"cer" => "application/x-x509-ca-cert",
"class" => "application/octet-stream",
"clp" => "application/x-msclip",
"cmx" => "image/x-cmx",
"cod" => "image/cis-cod",
"cpio" => "application/x-cpio",
"crd" => "application/x-mscardfile",
"crl" => "application/pkix-crl",
"crt" => "application/x-x509-ca-cert",
"csh" => "application/x-csh",
"css" => "text/css",
"dcr" => "application/x-director",
"der" => "application/x-x509-ca-cert",
"dir" => "application/x-director",
"dll" => "application/x-msdownload",
"dms" => "application/octet-stream",
"doc" => "application/msword",
"dot" => "application/msword",
"dvi" => "application/x-dvi",
"dxr" => "application/x-director",
"eps" => "application/postscript",
"etx" => "text/x-setext",
"evy" => "application/envoy",
"exe" => "application/octet-stream",
"fif" => "application/fractals",
"flr" => "x-world/x-vrml",
"gif" => "image/gif",
"gtar" => "application/x-gtar",
"gz" => "application/x-gzip",
"h" => "text/plain",
"hdf" => "application/x-hdf",
"hlp" => "application/winhlp",
"hqx" => "application/mac-binhex40",
"hta" => "application/hta",
"htc" => "text/x-component",
"htm" => "text/html",
"html" => "text/html",
"htt" => "text/webviewhtml",
"ico" => "image/x-icon",
"ief" => "image/ief",
"iii" => "application/x-iphone",
"ins" => "application/x-internet-signup",
"isp" => "application/x-internet-signup",
"jfif" => "image/pipeg",
"jpe" => "image/jpeg",
"jpeg" => "image/jpeg",
"jpg" => "image/jpeg",
"js" => "application/x-javascript",
"latex" => "application/x-latex",
"lha" => "application/octet-stream",
"lsf" => "video/x-la-asf",
"lsx" => "video/x-la-asf",
"lzh" => "application/octet-stream",
"m13" => "application/x-msmediaview",
"m14" => "application/x-msmediaview",
"m3u" => "audio/x-mpegurl",
"man" => "application/x-troff-man",
"mdb" => "application/x-msaccess",
"me" => "application/x-troff-me",
"mht" => "message/rfc822",
"mhtml" => "message/rfc822",
"mid" => "audio/mid",
"mny" => "application/x-msmoney",
"mov" => "video/quicktime",
"movie" => "video/x-sgi-movie",
"mp2" => "video/mpeg",
"mp3" => "audio/mpeg",
"mpa" => "video/mpeg",
"mpe" => "video/mpeg",
"mpeg" => "video/mpeg",
"mpg" => "video/mpeg",
"mpp" => "application/vnd.ms-project",
"mpv2" => "video/mpeg",
"ms" => "application/x-troff-ms",
"mvb" => "application/x-msmediaview",
"nws" => "message/rfc822",
"oda" => "application/oda",
"p10" => "application/pkcs10",
"p12" => "application/x-pkcs12",
"p7b" => "application/x-pkcs7-certificates",
"p7c" => "application/x-pkcs7-mime",
"p7m" => "application/x-pkcs7-mime",
"p7r" => "application/x-pkcs7-certreqresp",
"p7s" => "application/x-pkcs7-signature",
"pbm" => "image/x-portable-bitmap",
"pdf" => "application/pdf",
"pfx" => "application/x-pkcs12",
"pgm" => "image/x-portable-graymap",
"pko" => "application/ynd.ms-pkipko",
"pma" => "application/x-perfmon",
"pmc" => "application/x-perfmon",
"pml" => "application/x-perfmon",
"pmr" => "application/x-perfmon",
"pmw" => "application/x-perfmon",
"pnm" => "image/x-portable-anymap",
"pot" => "application/vnd.ms-powerpoint",
"ppm" => "image/x-portable-pixmap",
"pps" => "application/vnd.ms-powerpoint",
"ppt" => "application/vnd.ms-powerpoint",
"prf" => "application/pics-rules",
"ps" => "application/postscript",
"pub" => "application/x-mspublisher",
"qt" => "video/quicktime",
"ra" => "audio/x-pn-realaudio",
"ram" => "audio/x-pn-realaudio",
"ras" => "image/x-cmu-raster",
"rgb" => "image/x-rgb",
"rmi" => "audio/mid",
"roff" => "application/x-troff",
"rtf" => "application/rtf",
"rtx" => "text/richtext",
"scd" => "application/x-msschedule",
"sct" => "text/scriptlet",
"setpay" => "application/set-payment-initiation",
"setreg" => "application/set-registration-initiation",
"sh" => "application/x-sh",
"shar" => "application/x-shar",
"sit" => "application/x-stuffit",
"snd" => "audio/basic",
"spc" => "application/x-pkcs7-certificates",
"spl" => "application/futuresplash",
"src" => "application/x-wais-source",
"sst" => "application/vnd.ms-pkicertstore",
"stl" => "application/vnd.ms-pkistl",
"stm" => "text/html",
"svg" => "image/svg+xml",
"sv4cpio" => "application/x-sv4cpio",
"sv4crc" => "application/x-sv4crc",
"t" => "application/x-troff",
"tar" => "application/x-tar",
"tcl" => "application/x-tcl",
"tex" => "application/x-tex",
"texi" => "application/x-texinfo",
"texinfo" => "application/x-texinfo",
"tgz" => "application/x-compressed",
"tif" => "image/tiff",
"tiff" => "image/tiff",
"tr" => "application/x-troff",
"trm" => "application/x-msterminal",
"tsv" => "text/tab-separated-values",
"txt" => "text/plain",
"uls" => "text/iuls",
"ustar" => "application/x-ustar",
"vcf" => "text/x-vcard",
"vrml" => "x-world/x-vrml",
"wav" => "audio/x-wav",
"wcm" => "application/vnd.ms-works",
"wdb" => "application/vnd.ms-works",
"wks" => "application/vnd.ms-works",
"wmf" => "application/x-msmetafile",
"wps" => "application/vnd.ms-works",
"wri" => "application/x-mswrite",
"wrl" => "x-world/x-vrml",
"wrz" => "x-world/x-vrml",
"xaf" => "x-world/x-vrml",
"xbm" => "image/x-xbitmap",
"xla" => "application/vnd.ms-excel",
"xlc" => "application/vnd.ms-excel",
"xlm" => "application/vnd.ms-excel",
"xls" => "application/vnd.ms-excel",
"xlt" => "application/vnd.ms-excel",
"xlw" => "application/vnd.ms-excel",
"xof" => "x-world/x-vrml",
"xpm" => "image/x-xpixmap",
"xwd" => "image/x-xwindowdump",
"z" => "application/x-compress",
"zip" => "application/zip");

jQuery ile e-posta adresinin doğru olup olmadığını kontrol etmek için küçük bir fonksyoncuk:

function IsEmail(input) {
	var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
	return pattern.test(input);
}

Örnek Kullanımı:

if(IsEmail("amadertem@gmail.com")) {
	alert("E-posta adresi gecerli");
} else {
	alert("E-posta adresi gecersiz");
}

Samsung’un 3D için yaptığı reklamı gerçekten de mükemmel olmuş :) Yukarıdaki resme veya buraya tıklayarak izleyebilirsiniz.