Ara 27

Js ve css dosyalarının browser tarafından cache’lenmesini engelleme

CSS, HTML/DOM, Javascript, php Yorum Yok »

Browser’lar varsayılan olarak javascript, css ve resimler gibi harici dosyaları önbelleğe (cache) alırlar. Genellikle bunu sayfa yeniden açıldığında daha hızlı yükleyebilmek amacıyla yaparlar. Bazen css veya javascript dosyalarımızın browser tarafından ön belleğe alınmasını istemeyiz. Bu sorunu aşağıdaki gibi kolayca halledebilirsiniz.

<link href="/stylesheet.css?<?php echo time(); ?>" rel="stylesheet" type="text/css" />

Aşağıdaki gibi bir sonuç alırsınız. time() fonksiyonu sonucunda elde edilen değer sürekli değişeceği için bu şekilde tanımlanan css veya javascript etiketi browser tarafından farklı bir dosya olarak algılanıp yeniden yüklenecektir.

<link href="/stylesheet.css?1293444465" rel="stylesheet" type="text/css" />
Eki 14

Zen Coding / Zen Kodlama

CSS, HTML/DOM Yorum Yok »

Zen kodlama kullandığınız editörde, html kodlarını ve CSS kodlamada sıkça kullandığımız id, class ve style gibi tanımlamaları çok kolay bir şekilde, çok ciddi bir zaman kazancı sağlayacak şekilde yazmamızı sağlayan bir eklenti/araç. Bir çok editör doğal olarak veya eklentilerle zen kodlamayı destekliyor. Yakın zamanda da tüm editörlerin destekleyeceğini düşünüyorum.

Peki nasıl bir şeydir bu zen kodlama ?

html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

Yukarıdaki satırı editörümüze yazıp zen kodlamayı tetikleyecek kısayolu kullandığımızda (genellikle Ctrl+,) aşağıdaki gibi bir html kodu elde ediyoruz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
	<div id="header">
		<div id="logo"></div>
		<ul id="nav">
			<li class="item-1"><a href=""></a></li>
			<li class="item-2"><a href=""></a></li>
			<li class="item-3"><a href=""></a></li>
			<li class="item-4"><a href=""></a></li>
			<li class="item-5"><a href=""></a></li>
		</ul>
	</div>
</body>
</html>

Süper değil mi! :)

Bir de bunu izleyin :

Zen kodlamayı doğal olarak destekleyen editörlerden bazıları : Aptana/Eclipse, TextMate (Mac), Coda (Mac), Komodo IDE, NotePad++, PSPad.

Eklenti kurarak kullanabileceğiniz editörlerden bazıları: Dreamweaver, Gedit, Ultra Edit, Visual Studio, NetBeans.

Örneği görmek ve denemeler yapmak için online demo adresine bakabilirsiniz. Projenin web sitesi için burdan, kullanımını öğrenmek için burdan.

Lampforweb 2007 Tüm hakları saklıdır. Tema N.Design Studio
İçerik RSS Yorum RSS Giriş