Refresh File CSS secara Otomatis di Browser

Bagi Anda yang sering membuat website, pastinya coding di editor kemudian melihat hasilnya di browser (dengan me-reload) sudah menjadi hal yang wajib untuk Anda lakukan. Namun, seringkali kita agak frustasi karena sering bolak-balik untuk memilih text-editor lalu CTRL+F5 di browser, dari text-editor – CTRL+F5 browser —sampai ribuan kali mungkin :D—

CSSrefresh

Apa itu CSSrefresh?

Beberapa hari yang lalu ada status update yang menarik perhatian saya dari Smashing Magazine di Facebook mengenai CSSrefresh. CSSrefresh merupakan file yang berisi javascript yang berguna untuk melakukan monitor file CSS yang telah dimasukkan ke dalam kode-kode website yang Anda buat.

Ketika Anda menuliskan kode-kode CSS kemudian menyimpannya, maka hasil perubahannya akan langsung terlihat di browser, dan Anda tidak perlu melakukan reload di browser secara manual.

Bagaimana Menggunakannya?

Pastikan file CSS yang akan Anda edit berada di server atau berada di localhost dengan WAMP/XAMPP atau yang lain, karena CSSrefresh ini menggunakan XMLHttpRequest untuk bisa bekerja. Copy-paste kode javascript di bawah ini ke text-editor Anda (Notepad++, TextMate, dll) kemudian simpan dalam ke css-refresh.js —atau terserah Anda penamaannya—.

/*
 *	CSSrefresh
 *
 *	Copyright (c) 2012 Fred Heusschen
 *	www.frebsite.nl
 *
 *	Dual licensed under the MIT and GPL licenses.
 *	http://en.wikipedia.org/wiki/MIT_License
 *	http://en.wikipedia.org/wiki/GNU_General_Public_License
 */

(function() {

	var phpjs = {

		array_filter: function( arr, func )
		{
			var retObj = {};
			for ( var k in arr )
			{
				if ( func( arr[ k ] ) )
				{
					retObj[ k ] = arr[ k ];
				}
			}
			return retObj;
		},
		filemtime: function( file )
		{
			var headers = this.get_headers( file, 1 );
			return ( headers && headers[ 'Last-Modified' ] && Date.parse( headers[ 'Last-Modified' ] ) / 1000 ) || false;
	    },
	    get_headers: function( url, format )
	    {
			var req = window.ActiveXObject ? new ActiveXObject( 'Microsoft.XMLHTTP' ) : new XMLHttpRequest();
			if ( !req )
			{
				throw new Error('XMLHttpRequest not supported.');
			}
			var tmp, headers, pair, i, j = 0;

			req.open( 'HEAD', url, false );
			req.send( null );
			if ( req.readyState < 3 )
			{
				return false;
			}
			tmp = req.getAllResponseHeaders();
			tmp = tmp.split( '\n' );
			tmp = this.array_filter( tmp, function ( value )
			{
				return value.substring( 1 ) !== '';
			});
			headers = format ? {} : [];

			for ( i in tmp )
			{
				if ( format )
				{
					pair = tmp[ i ].split( ':' );
					headers[ pair.splice( 0, 1 ) ] = pair.join( ':' ).substring( 1 );
				}
				else
				{
					headers[ j++ ] = tmp[ i ];
				}
			}
			return headers;
		}
	};

	var cssRefresh = function() {

		this.reloadFile = function( links )
		{
			for ( var a = 0, l = links.length; a < l; a++ )
			{
				var link = links[ a ],
					newTime = phpjs.filemtime( this.getRandom( link.href ) );

				//	has been checked before
				if ( link.last )
				{
					//	has been changed
					if ( link.last != newTime )
					{
						//	reload
						link.elem.setAttribute( 'href', this.getRandom( this.getHref( link.elem ) ) );
					}
				}

				//	set last time checked
				link.last = newTime;
			}
			setTimeout( function()
			{
				this.reloadFile( links );
			}, 1000 );
		};

		this.getHref = function( f )
		{
			return f.getAttribute( 'href' ).split( '?' )[ 0 ];
		};
		this.getRandom = function( f )
		{
			return f + '?x=' + Math.random();
		};

		var files = document.getElementsByTagName( 'link' ),
			links = [];

		for ( var a = 0, l = files.length; a < l; a++ )
		{
			var elem = files[ a ];
			links.push({
				'elem' : elem,
				'href' : this.getHref( elem ),
				'last' : false
			});
		}
		this.reloadFile( links );
	};

	cssRefresh();

})();

Kemudian kita panggil file css-refresh.js dengan kode berikut dan letakkan di antara <head></head>.

<script type="text/javascript" src="js/css-refresh.js"></script>

Jika sudah selesai semua, sekarang buka text-editor dan browser Anda. Edit file CSS di text-editor kemudian klik tombol Save dan amati apa yang terjadi di browser😀. Untuk lebih lengkapnya mengenai CSSrefresh ini bisa Anda buka di website resmi developernya FrebSite.

Selamat mencoba, dan Mari Belajar, Mari Berbagi Ilmu.

3 thoughts on “Refresh File CSS secara Otomatis di Browser

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s