A post for icha…

AdeLicha Poetry Permata Sari

Maaf baru bisa post, sekitar 2 hari yang lalu salah seorang adik dari teman kami di plurk telah diculik oleh 2 orang ibu-ibu di sebuah mall di jakarta, untuk lebih jelasnya klik gambar diatas. terima kasih.

Advertisements

Hightlight Source Code with SyntaxHighlighter

Beberapa programmer yang membuat blog mereka sendiri terkadang ingin berbagi sesuatu tentang programming. Mereka terkadang menuliskan source code programming yang mereka gunakan untuk membuat sebuah tampilan tertentu. Dan biasanya mereka berbagi souce code secara mentah. Alih-alih menuliskan secara indah biar mudah dibaca, beberapa progammer menuliskannya agar mudah di-copy. Tidak salah sih, tetapi kadang agak sulit untuk memisahkan antara source code dengan tulisan sang programmer.

Mereka (beberapa programmer menuliskan seperti ini) :

<html>

<head><title>judul<title></head>

<body><?php echo ‘isinya’; ?></body>

</html>

Tidak seperti ini :


<html>

<head><title>judul<title></head>

<body><?php echo 'isinya'; ?></body>

</html>

Nha menurut anda (pembaca) bagaimana? Enakan dibaca yang ke-2 kan? Di contoh kedua kita bisa membaca dan membedakan dengan mudah, membaca line number, membaca code-nya, untuk copy juga mudah tinggal klik view plain maka akan tampil code-nya dalam bentuk plain, dan tinggal kita copy. Selain itu tampilan web kita jadi semakin cantik dengan adanya highlighting ini, sehingga bisa jadi semakin banyak pembaca web kita.

Jadi bagaimana menerapkannya?? Bagi mereka yang blogging di wordpress tinggal menggunakan

isi code

Untuk yang blogging di situs lain misal blogspot (setau saya belum mencantumkan highlighter ini), atau weblog yang dibikin sendiri caranya :

  1. Download SyntaxHighlighter di sini atau sini.
  2. Extract file hasil download dan upload file-file tersebut ke sebuah hosting, misal http://www.example.com/
  3. Udah deh tinggal pakai, caranya include file yang dibutuhin misal :
    <script type="text/javascript" src="scripts/shCore.js"></script>
    	<script type="text/javascript" src="scripts/shBrushBash.js"></script>
    	<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
    	<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
    	<script type="text/javascript" src="scripts/shBrushCss.js"></script>
    	<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
    	<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
    	<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
    	<script type="text/javascript" src="scripts/shBrushJava.js"></script>
    	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    	<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
    	<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
    	<script type="text/javascript" src="scripts/shBrushPython.js"></script>
    	<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
    	<script type="text/javascript" src="scripts/shBrushScala.js"></script>
    	<script type="text/javascript" src="scripts/shBrushSql.js"></script>
    	<script type="text/javascript" src="scripts/shBrushVb.js"></script>
    	<script type="text/javascript" src="scripts/shBrushXml.js"></script>
    	<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
    	<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
    
    • Pada baris pertama merupakan core script yang akan dipakai.
    • Pada baris kedua merupakan script yang akan mengatur untuk penulisan Bash.
    • Pada baris ketiga merupakan script yang akan mengatur untuk penulisan C++.
    • Pada baris selanjutnya merupakan script yang akan mengatur untuk penulisan bahasa-bahasa lain.
    • Pada 2 baris terakhir merupakan core style dan style tiap bahasa.
  4. Setelah itu tuliskan fungsi javascript yang akan membuat efek source code kita jadi ter-highlighting :
    	<script type="text/javascript">
    		SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
    		SyntaxHighlighter.all();
    	</script>
    
    • Dua baris diatas merupakan script konfigurasi yang akan membuat efek source code kita menjadi ter-highlighting.
  5. Terakhir tuliskan syntax source code anda dengan cara dimasukkan ke dalam tag <pre class:”brush [bahasa]”> syntax</pre>
    misal :

    function test() : String
    {
    	return 10;
    }
    

Udah deh selese….

Semoga bermanfaat….
Nb:

  • tag pre bisa diganti dengan tag lain, untuk lebih jelasnya baca di sini.
  • untuk yang make wordpress.com seperti saya bisa di liat di sini untuk lebih jelasnya.
  • kode yang otomatis terhighlight adalah kode dalam situs http://www.example.com (dalam contoh ini), kalau di subfolder href dan src harus diganti sesuai lokasi.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.

Opera 10.00 Beta First Run

Setelah beberapa waktu aku mencoba opera 10.00 Alpha, ternyata sekarang telah keluar versi betanya. Dalam klaimnya versi Beta memiliki banyak kelebihan dibanding browser lain. Bahkan diklaim lebih cepat dari browser-browser lain (saya telah coba sekitar 2 harian tanpa turbo mode dan memang bener). Beberapa fitur yang opera baru ini unggulkan antaranya :

  1. Turbo Mode
    Dari awal walaupun tanpa turbo mode emang opera sudah termasuk browser yang cepat terutama buat download-download, ini dikarenakan di dalam engine browsernya terdapat engine downloader terutama downloader torrent. Sedangkan pada versi 10.00 ini mereka menggunakan engine baru + presto rendering engine (milik opera) yang diklaim bisa membuat koneksi beberapa kali lebih cepat inilah yang disebut turbo mode. Untuk mengaktifkannya tinggal munculin status bar (view >> toolbar >> status bar), abis tu klik kanan di pojok kiri status bar muncul menu, pilih configure turbo mode. Nah tinggal kita setting turbo modenya :

    • Automatic
      Berarti bahwa opera akan secara otomatis akan mengaktifkan turbo mode jika koneksi kita melambat.
    • On
      Berarti bahwa opera akan mengaktifkan turbo mode baik koneksi kita melambat maupun tidak.
    • Off
      Berarti bahwa opera akan menonaktifkan turbo mode.
  2. Elegan Tabbed Browsing
    Ya, tampilan tab browsernya keliatan keren. Lebih elegan dibanding versi-versi sebelumnya.
  3. Better Speed Dial
    Better speed dial? Bener banget, soalnya sekarang kita bisa setting banyaknya square untuk speed dial serta kita juga bisa ubah background speed dial-nya sesuka kita.

Dan masih ada beberapa fitur baru lainnya. Tapi disamping banyaknya kelebihan yang ada, ada satu hal yang bener-bener membuat saya ga begitu suka versi ini. Di laptop saya (ga tau tempat yang lain), saat saya menutup opera dalam keadaan masih terkoneksi dan setelah itu saya buka lagi lain waktu, halaman-halaman yang dulu saya buka seakan-akan minta untuk di save sebagai txt. Padahal kalau browser lain halaman yang lalu akan langsung muncul sebagai halaman normal.

Semoga bermanfaat….

Nb:

  • Opera 10.00 Beta adalah  100 % ACID compliance (sangat sesuai standar)
  • Opra 10.oo Beta saya adalah Build 1551, dengan Identification : Opera/9.80 (Windows NT 5.1; U; en) Presto/2.2.15 Version/10.00

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.

.htaccess URL Rewriting

setelah pada post sebelumnya saya bercerita sekilas tentang URL rewriting dengan file .htaccess, maka pad post saya kali ini saya akan focus pada contoh file .htaccess yang akan digunakan sebagai URL  rewriting.

Langsung saja saya akan kemukakan beberapa contoh URL rewriting dengan file .htaccess :

  1. Rewrite product.php?id=12 ke product-12.html
    Untuk mengubah ekstensi sebuah file (dalam contoh saya .php) dari address bar dengan ekstensi lain merupakan sesuatu hal yang tidaklah begitu sulit. Begitu pula parameter dari dinamyc URL (?id=12) dapat kita sembunyikan dengan mudah, sehingga user yang mengakses web kita tidak menyangka bahwa sesungguhnya kita memakai skrip php. Adapun isi file .htaccess-nya untuk melakukan hal ini adalah :

    RewriteEngine on
    RewriteRule ^product-([0-9]+)\.html$ product.php?id=$1
    

  2. Rewrite product.php?id=12 ke product/ipod-nano/12.html
    Dalam menulis URL kita sangatlah disarankan untuk mencantumkan keyword ke URL kita, sehingga kemungkinan untuk mendapatkan rangking dalam pencarian lebih tinggi (baca page-rank search engine akan naik). Untuk melakukannya berikut ini contoh isi file .htaccess-nya :

    RewriteEngine on
    RewriteRule ^product/([a-zA-Z0-9_-]+)/([0-9]+)\.html$ product.php?id=$2
    

  3. Rewrite site.com/user.php?username=xyz ke site.com/xyz
    Selain poin 1, ada lagi cara agar user pengunjung web kita tidak mengetahui skrip yang kita pakai. Hal ini juga bisa juga sebagai salah satu langkah pengamanan terhadap data kita. Misal url kita user.php?id=123 dan di sit kita bisa edit user dengan id=123, kalau ada pengguna jahil dan memasukkan angka  selain id-nya dia bisa berabe kita (contoh ini hanya buat web yang pembuatnya belum tahu pembatasan akses) . Untuk itu kita perlu rewriter yang akan menghilangkan user.php?id dan dalam hal ini file .htaccess yang digunakan akan berisi :

    RewriteEngine On
    RewriteRule ^([a-zA-Z0-9_-]+)$ user.php?username=$1
    RewriteRule ^([a-zA-Z0-9_-]+)/$ user.php?username=$1
    

Demikian sekelumit tutorial pengetahuan yang bisa saya bagi, mungkin lain kali akan saya jelaskan mengenai format dan arti penulisan dari file .htaccess.

Semoga berguna….

Sumber : google.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.

Irene in My Head

Akhirnya setelah beberapa lama ga nyambangin situsnya ELI, kemarin aku mampir ke sana. Ternyata mereka udah ngeluarin album kedua, yang secara suka rela mereka bagikan kepada kita. ELI atau everybody loves irene merupakan sebuah band indonesia, namun dengan kebanyakan lirik lagu mereka berbahasa inggris. Untuk alirannya sepertinya mereka lebih suka menyebut diri mereka Trip Hop, ini bisa dilihat dari bagian header website mereka yang bertuliskan Trip Hop Band from Indonesia.

Mereka telah mengeluarkan dua album yang bisa di download gratis, untuk album pertama mereka ada beberapa lagu yang bagus bahkan masuk OST dari film Gerbang13 – ‘Crop Circle Me’, DTK (Dunia Tanpa Koma) – Memento Mori dan Re-Evolution. Untuk album kedua ini saya cuplik track pertamanya :

Title : No One Here’s Alone

We all live and will die so don’t you cry
Nothing you have to hide coz I’m here by your side

We all live and will die so don’t you cry
Let’s take a ride till you satisfied don’t just keep it inside your heart

We all live and will die so don’t you cry
Nothing you have to hide coz I’m here by your side

We all live and will die so don’t you cry
Let’s take a ride till you satisfied don’t just keep it inside your heart

They can’t punish us only god we trust
So grab my hand we’ll fight till end

We all live and will die so don’t you cry
Don’t just sit and feel the pain and shall our memory will remain

Untuk bisa mendapatkannya lagu-lagu mereka, kunjungi :

Semoga bermanfaat….

Nb: Judul post aku buat gitu soalnya setelah ngedenger lagu mereka kata-kata irene sang vokalis, menginspirasi ide-ideku.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Regard, 

 

Quantro a.k.a Royyan Azizi..

Tinggalkan IE 6 demi kenyamanan bersama

Beberapa hari ini aku coding beberapa aplikasi web dengan css standar v 2.1 (belum css3). Semua style berjalan baik di beberapa web browser, Opera 9.2, Firefox 3.08/v2 juga lolos, chrome 1.x. Tapi di Internet Explorer v6, yang notabene masih banyak digunakan malah tampilannya jadi acakadul. Aku merasa codingku sudah standar semua termasuk cssnya sudah standar (v 2.1). Tapi ternyata si IE 6 ini ga mau make css v2.1, yang mana sekarang merupakan standar versi css di dunia web programming.

Setelah itu selidik, punya selidik browser IE yang notabene punya raksasa software Microsoft, merupakan sebuah web browser yang sama sekali tidak mau mengikuti standarisasi yang ada. Kok bisa saya bilang gini?? Bisa donk, versi terbaru IE yaitu versi 8 (saat tulisan ini ditulis), sangat jauh dari standarisasi ACID. Apa itu ACID? ACID disini bukan ACID database, tapi ACID yang merupakan sebuah test page untuk web browser yang digunakan untuk mengetahui apakah sebuah web browser sudah sesuai dengan standarisasi yang ada.

ACID sampai saat ini sudah mencapai versi 3 yang meliputi uji :

DOM Level 2 Traversal (subtests 1-6)
DOM Level 2 Range (subtests 7-11)
Content-Type: image/png; text/plain (subtest 14, 15)
<object> handling and HTTP status codes (subtest 16)
DOM Level 2 Core (subtests 17, 21)
DOM Level 2 Events (subtests 17, 30-32)
CSS Selectors (subtests 33-40)
DOM Level 2 Style (subtest 45)
DOM Level 2 HTML (subtest 60)
DOM Level 2 Views
ECMAScript GC (subtests 26-27)
Unicode 5.0 UTF-16 (subtest 68)
Unicode 5.0 UTF-8 (subtest 70)
HTML 4.0 Transitional (subtest 71)
HTML 4.01 Strict
SVG 1.1 (subtests 74, 78)
SVG 1.1 Fonts (subtests 77, 79)
SMIL 2.1 (subtests 75-76)
ECMAScript Conformance (subtests 81-96)
Data URI scheme (subtest 97)
XHTML 1.0 Strict (subtest 98)
HTTP 1.1 Protocol
  • DOM Level 2 Traversal (subtests 1-6)
  • DOM Level 2 Range (subtests 7-11)
  • Content-Type: image/png; text/plain (subtest 14, 15)
  • <object> handling and HTTP status codes (subtest 16)
  • DOM Level 2 Core (subtests 17, 21)
  • DOM Level 2 Events (subtests 17, 30-32)
  • CSS Selectors (subtests 33-40)
  • DOM Level 2 Style (subtest 45)
  • DOM Level 2 HTML (subtest 60)
  • DOM Level 2 Views
  • ECMAScript GC (subtests 26-27)
  • Unicode 5.0 UTF-16 (subtest 68)
  • Unicode 5.0 UTF-8 (subtest 70)
  • HTML 4.0 Transitional (subtest 71)
  • HTML 4.01 Strict
  • SVG 1.1 (subtests 74, 78)
  • SVG 1.1 Fonts (subtests 77, 79)
  • SMIL 2.1 (subtests 75-76)
  • ECMAScript Conformance (subtests 81-96)
  • Data URI scheme (subtest 97)
  • XHTML 1.0 Strict (subtest 98)
  • HTTP 1.1 Protocol

Sedang pada ACID versi 2 yang diuji :

  • Alpha transparency in PNG-format image.
  • The object element.
  • data URIs.
  • Absolute, relative, and fixed CSS positioning.
  • The CSS box model.
  • CSS table formatting.
  • CSS generated content.
  • CSS parsing.
  • Paint order.
  • Hovering effects

Pada versi 1 yang diuji hanyalah soal kemampuan browser dalam menangani CSS versi 1.

Cukup bicara soal ACID, sekarang kembali ke IE 6. Sesuai judul yang saya cantumkan, saya menyarankan pengguna internet untuk meninggalkan IE 6, kenapa?? Ya tadi, sang browser dari microsoft ini hanya mampu melewati uji ACID1, adiknyaitu v7 juga hanya mampu melewati ACID1, untuk ACID2nya belum sempurna. Sedangkan yang terbaru v8, hanya mampu memberi persentase 20 dari standar. Tau deh microsoft maunya apa browsernya gitu semua.

Untuk itu saya tekankan sekali lagi, mari tinggalkan IE 6 demi kenyamanan bersama. Kenyamanan yang saya maksud adalah agar kita dapat menikmati semua fitur dan tampilan website secara maksimal. Kasihan juga jika suatu saat anda masih memakai IE6, padahal web yang anda kunjungi menggunakan CSS v2. Iya ga masalah soal tampilan, tapi bagaimana kalau ada tombol yang hilang (kalau tombolnya ga penting si ga masalah, tapi kalau tombol transaksi??) gara-gara tidak kompatibelnya CSS dengan browser?? Mau menyalahkan programmer, bisa. Tetapi biasanya sang programmer dah mewanti-wanti dengan tulisan “Best view with x browser in AxBpx”. Jadi salah siapa??

Nb: Untuk programmer juga harus tahu cara mengatasinya, salah satunya dengan conditional css, suatu saat insyaallah saya akan bahas.

Semoga bermanfaat…

~~~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.

######################################################

Referensi :

Search Engine Friendly URL

Search engine friendly url adalah sebuah metode untuk membuat URL atau alamat website yang kita miliki menjadi sebuah alamat yang mudah untuk di-index oleh mesin pencari semacam google, sehingga rangking web yang kita miliki bisa berada di atas. Metode search engine friendly url (SEF) ini hanyalah salah satu cara untuk meningkatkan peringkat website kita dalam daftar pencarian, masih ada metode lain seperti backlink, meta, atau yang lainnya.

Dalam SEF seperti yang telah saya utarakan sebelumnya metodenya adalah dengan mengubah alamat web kita yang tadinya susah untuk di-index, menjadi semakin mudah di-index oleh search engine. Pada prinsipnya kemampuan search engine dalam membaca tidaklah jauh beda dengan manusia. Walau tak sesempurna manusia tetapi beberapa faktor pembacaan oleh search engine hampir sama dengan manusia. Misalnya pada url, search engine dan manusia sama-sama bakal lebih mudah membaca url seperti ini :


http://www.contoh.com/aksi/metode/parameter

daripada seperti ini :


http://www.contoh.com/index.php?act=aksi&met=metode&par=parameter

Nah, pada contoh pertama merupakan contoh SEF, sedang contoh kedua bukan merupakan url SEF. Metode yang digunakan untuk membuat SEF istilahnya adalah url rewriting, untuk melakukannya dibutuhkan sebuah file .htaccess file ini adalah sebuah file yang otomatis akan me-redirect atau menolak suatu request [utamanya http request] yang menuju website kita. File .htaccess ini hanya bisa berjalan saat mod_rewrite [apache] dari web server aktif. Untuk melihat apakah mod_rewrite [apache] aktif atau tidak caranya mudah. Yaitu buat sebuah file php dan isi file tersebut dengan kode dibawah ini :


<?

phpinfo();

?>

setelah itu simpan file tersebut misal dengan nama info.php, dan disimpan di (misal)


/path/to/file [root folder atau folder apa saja yang merupakan bagian kita ]

kemudian buka file tersebut lewat browser, misal


http://www.path.com/to/file/info.php

dan lihat disitu apakah ada mod_rewrite, kalau ada, selamat anda bisa memakai SEF dengan .htaccess. Adapun contoh file .htaccess adalah :


Options +FollowSymLinks
Options -Indexes
DirectoryIndex index.php
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L,QSA]

isi file .htaccess ini merupakan serangkaian command kepada server yang biasanya juga terdapat di httpd.conf.

Semoga berguna….

~~~~~~~~~~~~~~~~~~~~~~~

Regard,

Quantro a.k.a Royyan A.