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" />
Ara 27

PHP ile css dosyalarının daha hızlı yüklenmesi

CSS, php Yorum Yok »

Web sitenizde birden fazla css dosyası kullanıyorsanız sayfanızın yüklenmesi uzun sürebilir. Aşağıdaki php örneğini kullanarak css dosyalarınızı sıkıştırıp tek bir dosyada birleştirebilirsiniz. Hem tek dosya olması hem de gereksiz boşlukların ve yorumların temizlenmesi css dosyalarınızın daha çabuk yüklenmesini sağlayacaktır.

<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) 
{
	/* yorumlar temizleniyor */
	$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
 
	/* tablar, boşluklar, satırlar temizleniyor */
	$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
	return $buffer;
}
 
/* css dosyalarınız */
include('stylesheet.css');
include('typography.css');
include('grid.css');
include('print.css');
include('ozel.css');
 
ob_end_flush();
?>

Sitenizin header bölümünde css dosyalarınız yerine oluşturduğunuz bu php dosyasından istekte bulunanız yeterli.

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.

Şub 13

Her Konuda Kopya Kağıtları (Cheat Sheets)

Apache, CSS, Javascript, ajax, linux, mysql, php Yorum Yok »

Scott Klarr isimli bir arkadaşımız hemen hemen her konuda cheat sheets diye tabir edilen kopya kağıtlarını bir araya toplamış. Programlama, bilgisayar sistemleri ve tasarım konularında çok sayıda kopya kağıdı mevcut. Elimin altında her konuda özet bir belge olsun diyenler için bire bir.

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