wayne's Weblog

CSS hack dengan CSS Browser Selector

wayne — Fri, 25 Jul 2008 02:57:04 +0000

Pernah dengar CSS Browser Selector? Kalo belon pernah dengar, gini nih (dapet contekan dari temen) … jadi pada prinsipnya applikasi/technique ini menggunakan javascript sebagai css hack. Javascript-nya sangat simple, kurang dari 10 baris codes. Watch this out mate ….

DOWNLOAD
Current version: 0.2.7 ( May 21, 2008 )

css_browser_selector.js.txt (< 1KB)

Ubah nama file yang didownload tadi dari .js.txt menjadi .js

BAGAIMANA CARA MENGGUNAKAN

1. Copy dan paste code dibawah pada dan tag dan

2. Set CSS attributes dengan code sesuai dengan browser/os yang ingin loe hack

Contoh:

* html.gecko div#header { margin: 1em; }
* .opera #header { margin: 1.2em; }
* .ie .mylink { font-weight: bold; }
* .mac.ie .mylink { font-weight: bold; }
* .[os].[browser] .mylink { font-weight: bold; } -> tanpa spasi antara.[os] dan .[browser]

OS Codes [os] yang bisa digunakan:

* win – Microsoft Windows
* linux – Linux (x11 dan linux)
* mac – Mac OS

Browser Codes [browser] yang kompatible dengan trick ini:

* ie – Internet Explorer (Semua versions)
* ie8 – Internet Explorer 8.x
* ie7 – Internet Explorer 7.x
* ie6 – Internet Explorer 6.x
* ie5 – Internet Explorer 5.x
* gecko – Mozilla, Firefox (Semua versions), Camino
* ff2 – Firefox 2
* ff3 – Firefox 3
* opera – Opera (Semua versions)
* opera8 – Opera 8.x
* opera9 – Opera 9.x
* konqueror – Konqueror
* webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira

Trick Google Currency Converter

wayne — Mon, 14 Apr 2008 14:39:40 +0000

Tetap semangat !!!

Besok gw gajian coi…. seperti biasa, klo dah mo gajian, gw pasti ngecek berapa sih nilai gajian gw bulan ini dalam rupiah (maklum, gw gajian dalam dollar australia).
Google tetap menjadi site pave gw untuk sekedar checking currency converter.

Gw ada tips kecil untuk nge-cek currency exchange di google.
Umpamanya gw klo mo ngecek nilai tukar Australian Dollar ke Indonesian Rupiah, biasanya gw ketik ini di google search box:

aud to idr

Loe bisa ber experiment dengan nyoba mata uang yang laen, misalnya

usd to idr
eur to idr

Smoga bermanfaat dunia dan akherat…

Trik CSS yang mungkin sering dilewatkan

wayne — Thu, 10 Apr 2008 02:40:46 +0000

1. Font styling

Ketika styling font dengan CSS, mungkin seringkali loe pake:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

Hal ini bisa di pendekkan menjadi:

font: bold italic small-caps 1em/1.5em verdana,sans-serif

2. Memberi dua attribute class sekaligus

Dalam satu tag sangat dimungkinkan memberikan lebih dari satu class, sebagai contoh:

class1 class2“>…

Gunakanlah spasi sebagai pemisah (jangan gunakan comma). Jika ada rule yang overlap diantara dua class tersebut, maka rule yang akan digunakan adalah class yang terakhir (dalam hal ini class2).

3. CSS document untuk printing

Dalam css ada tag yang namanya media. Tag inilah yang bisa loe gunakan untuk print-friendly version.

4. CSS hack

Yang pasti ini sangat populer bagi mereka yang kerjaannya di web templating, karena seringkali mendapatkan tampilan yang berbeda untuk satu template apabila di buka pada beberapa browser yang berbeda.
Ini adalah beberapa css hack code yang sering gw pake:

IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}

Semoga bermanfaat bro~!

Free proxy for safe browsing

wayne — Wed, 09 Apr 2008 13:01:01 +0000

Gendeng, geblek, sok kepinteran, tidak bisa nerima kritik dan masukan. Mungkin kata itu memang pantas ditujukan ke “men/tom/info” saat ini. Kenapa youtube mesti di block? kenapa pula rapidshare mesti di block? tanyakanlah pada rumput yang bergoyang.

Apakah karena “fitna“, terus kemudian site-site yang demikian bermanfaat langsung diblock? bego loe!!!
Kalau “men/tom/info” mau sedikit saja bersikap dewasa, mungkin hal ini bisa kita hindari. Kalau Geert Wilders bisa bikin pilem fitna, kenapa juga harus di lawan dengan memblokir site yang nampilin pilem tersebut. Kalau loe merasa pilem itu tidak benar, yah loe bikin donk pilem yang menurut versi loe benar, terus submit lewat youtube atau ditempat lain yang bisa diakses oleh orang banyak. Jadi mereka akan tau kalau versi loe-lah yang benar. Atau jangan-jangan loe ga bisa bikin pilem kaleeeee??? klo gitu masalahnya, mending loe belajar sama Geert Wilders dulu deh.
Gw bukan pendukung pilem fitna, tapi setidaknya janganlah pilem ini dijadikan alasan untuk bisa bertindak arogan. Bertindaklah yang wajar-wajar saja, ikuti aturan main bro !

Gw sih ga begitu kaget ketika tahu youtube diblock, karena gw bukan penggila youtube. Tapi yang bikin gw kesel, ketika tahu rapidshare juga di block. Ini adalah site fave gw, dimana gw bisa donwload dan upload dengan kapasitas yang tidak terbatas. Apakah nanti google juga di block? kutu kupret !!!

Bagi loe loe yang pengen browse site yang sudah di block sama “men/tom/info“, mending loe masuk ke salah satu site ini dulu. Ntar dari sini loe bisa masukin url yang di block tadi, kalo istilah orang-orang pinter katanya namanya proxy. Gw juga gak tau apaan itu proxy, mungkin ada kaitannya dengan proxl. Hanya beda hurup terakhirnya doank.

Ok bro, ini beberapa site proxy tersebut:

Nah gitu dulu unek unek gw. Jadi kesimpulan gw sangatlah pantas kalo gw acungkan jari tengah gw kepada “men/tom/info“.

Resize image on the fly with PHP

wayne — Sun, 06 Apr 2008 09:05:32 +0000

Script seperti ini adalah salah satu script pave gw. Betapa tidak, sepertinya script ginian akan gw butuhkan setiap kali ada web project baru.
Gw ada beberapa stock image resize coding mulai dari bikinan sendiri sampai dengan beberapa coding opensource yang gw dapet dengan susah payah di internet.

Kali ini resize image on the fly yang di beri title TimThumb dan di release oleh Mimbo Pro. Dan yang pasti coding ini di open ke public bro…. keren kan?

Ada beberapa hal mengapa gw milih script ini diantaranya;
- Support gif dan png
- Dari sisi kecepatan/speed
- Support cropping
- Dan yang pasti caching

Cara menggunakan
Mudah saja, tinggal copy source codes-nya pada sebuah document dan beri nama ‘timthumb.php‘, kemudian taruh di folder apa saja di site kita (contoh: /scripts) dan kemudian panggil image seperti ini:

Configurasi:

Script ini butuh GD library (tau GD kan? sejenis jamu kuat dengan ramuan ginseng dan pasak bumi)
Ketika di install dan digunakan, script ini akan secara otomatis membuat folder /cache/.
Jika host server tidak mengijinkan script ini mengcreate folder, sebaiknya loe bikin folder /cache/ secara manual dan beri permission 777.

TimThumb parameter:

w: width
h: height
zc: zoom crop (0 atau 1)
q: quality (default 75 dan max 100)

Berikut adalah souce codes-nya:

// TimThumb script created by Tim McDaniels and Darren Hoyt with tweaks by Ben Gillbanks
// http://code.google.com/p/timthumb/

// MIT License: http://www.opensource.org/licenses/mit-license.php

/* Parameters allowed: */

// w: width
// h: height
// zc: zoom crop (0 or 1)
// q: quality (default is 75 and max is 100)

// HTML example:

if( !isset( $_REQUEST[ "src" ] ) ) { die( “no image specified” ); }

// clean params before use
$src = preg_replace( “/^(\.+(\/|))+/”, “”, $_REQUEST['src'] );
$src = preg_replace( ‘/^(s?f|ht)tps?:\/\/[^\/]+/i’, ”, $src );
$new_width = preg_replace( “/[^0-9]/”, “”, $_REQUEST[ 'w' ] );
$new_height = preg_replace( “/[^0-9]/”, “”, $_REQUEST[ 'h' ] );
$zoom_crop = preg_replace( “/[^0-9]/”, “”, $_REQUEST[ 'zc' ] );

if( !isset( $_REQUEST['q'] ) ) { $quality = 80; } else { $quality = preg_replace(“/[^0-9]/”, “”, $_REQUEST['q'] ); }

// set path to cache directory (default is ./cache)
// this can be changed to a different location
$cache_dir = ‘./cache’;

// get mime type of src
$mime_type = mime_type( $src );

// check to see if this image is in the cache already
check_cache( $cache_dir, $mime_type );

// make sure that the src is gif/jpg/png
if( !valid_src_mime_type( $mime_type ) ) {
$error = “Invalid src mime type: $mime_type”;
die( $error );
}

// check to see if GD function exist
if(!function_exists(‘imagecreatetruecolor’)) {
$error = “GD Library Error: imagecreatetruecolor does not exist”;
die( $error );
}

// set document root
$doc_root = $_SERVER['DOCUMENT_ROOT'];

// get path to image on file system
$src = $doc_root . ‘/’ . $src;

if(strlen($src) && file_exists( $src ) ) {

// open the existing image
$image = open_image($mime_type, $src);
if ($image === false) { die (‘Unable to open image : ‘ . $src ); }

// Get original width and height
$width = imagesx($image);
$height = imagesy($image);

// generate new w/h if not provided
if($new_width && !$new_height) {
$new_height = $height * ($new_width/$width);
}
elseif($new_height && !$new_width) {
$new_width = $width * ($new_height/$height);
}
elseif(!$new_width && !$new_height) {
$new_width = $width;
$new_height = $height;
}

// create a new true color image
$canvas = imagecreatetruecolor($new_width, $new_height);

if( $zoom_crop ) {

$src_x = $src_y = 0;
$src_w = $width;
$src_h = $height;

$cmp_x = $width / $new_width;
$cmp_y = $height / $new_height;

// calculate x or y coordinate and width or height of source

if ( $cmp_x > $cmp_y ) {

$src_w = round( ( $width / $cmp_x * $cmp_y ) );
$src_x = round( ( $width – ( $width / $cmp_x * $cmp_y ) ) / 2 );

}
elseif ( $cmp_y > $cmp_x ) {

$src_h = round( ( $height / $cmp_y * $cmp_x ) );
$src_y = round( ( $height – ( $height / $cmp_y * $cmp_x ) ) / 2 );

}

imagecopyresampled( $canvas, $image, 0, 0, $src_x, $src_y, $new_width, $new_height, $src_w, $src_h );

}
else {

// copy and resize part of an image with resampling
imagecopyresampled( $canvas, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

}

// output image to browser based on mime type
show_image( $mime_type, $canvas, $quality, $cache_dir );

// remove image from memory
ImageDestroy( $canvas );

} else {

if( strlen( $src ) ) { echo $src . ‘ not found.’; } else { echo ‘no source specified.’; }

}

function show_image ($mime_type, $image_resized, $quality, $cache_dir) {

// check to see if we can write to the cache directory
$is_writable = 0;
$cache_file_name = $cache_dir . ‘/’ . get_cache_file();

if( touch( $cache_file_name ) ) {
// give 666 permissions so that the developer
// can overwrite web server user
chmod( $cache_file_name, 0666 );
$is_writable = 1;
}
else {
$cache_file_name = NULL;
header(‘Content-type: ‘ . $mime_type);
}

if(stristr( $mime_type, ‘gif’ ) ) {
imagegif( $image_resized, $cache_file_name );
}
elseif( stristr( $mime_type, ‘jpeg’ ) ) {
imagejpeg( $image_resized, $cache_file_name, $quality );
}
elseif( stristr( $mime_type, ‘png’ ) ) {
imagepng( $image_resized, $cache_file_name, ceil( $quality / 10 ) );
}
if( $is_writable ) { show_cache_file( $cache_dir, $mime_type ); }
exit;

}

function open_image ($mime_type, $src) {

if(stristr($mime_type, ‘gif’)) {
$image = imagecreatefromgif($src);
}
elseif(stristr($mime_type, ‘jpeg’)) {
$image = imagecreatefromjpeg($src);
}
elseif(stristr($mime_type, ‘png’)) {
$image = imagecreatefrompng($src);
}
return $image;

}

function mime_type ($file) {

$frags = split(“\.”, $file);
$ext = strtolower( $frags[ count( $frags ) - 1 ] );
$types = array(
‘jpg’ => ‘image/jpeg’,
‘jpeg’ => ‘image/jpeg’,
‘png’ => ‘image/png’,
‘gif’ => ‘image/gif’,
‘bmp’ => ‘image/bmp’,
‘doc’ => ‘application/msword’,
‘xls’ => ‘application/msword’,
‘xml’ => ‘text/xml’,
‘html’ => ‘text/html’
);
$mime_type = $types[$ext];
if(!strlen($mime_type)) { $mime_type = ‘unknown’; }
return($mime_type);

}

function valid_src_mime_type ( $mime_type ) {

if( preg_match( “/jpg|jpeg|gif|png/i”, $mime_type ) ) { return 1; }
return 0;

}

function check_cache ( $cache_dir, $mime_type ) {

// make sure cache dir exists
if(!file_exists($cache_dir)) {
// give 777 permissions so that developer can overwrite
// files created by web server user
mkdir( $cache_dir );
chmod( $cache_dir, 0777 );
}
show_cache_file( $cache_dir, $mime_type );

}

function show_cache_file ( $cache_dir, $mime_type ) {

$cache_file = get_cache_file();

if( file_exists( $cache_dir . ‘/’ . $cache_file ) ) {

// check for updates
$if_modified_since = preg_replace(‘/;.*$/’, ”, $_SERVER[ "HTTP_IF_MODIFIED_SINCE" ]);
$gmdate_mod = gmdate(‘D, d M Y H:i:s’, filemtime( $cache_dir . ‘/’ . $cache_file ) );
if(strstr($gmdate_mod, ‘GMT’)) {
$gmdate_mod .= ” GMT”;
}

//error_log(“TimThumb: $gmdate_mod == $if_modified_since”);

if ( $if_modified_since == $gmdate_mod ) {
header( “HTTP/1.1 304 Not Modified” );
exit;
}

// send headers then display image
header( “Content-Type: ” . $mime_type );
header( “Last-Modified: ” . gmdate(‘D, d M Y H:i:s’, filemtime( $cache_dir . ‘/’ . $cache_file ) . ” GMT” ) );
header( “Content-Length: ” . filesize( $cache_dir . ‘/’ . $cache_file ) );
header( “Cache-Control: max-age=9999, must-revalidate” );
header( “Expires: ” . gmdate( “D, d M Y H:i:s”, time() + 9999 ) . “GMT” );
readfile( $cache_dir . ‘/’ . $cache_file );
exit;

}

}

function get_cache_file () {

$request_params = $_REQUEST;
$cachename = $_REQUEST['src'] . $_REQUEST['w'] . $_REQUEST['h'] . $_REQUEST['zc'] . $_REQUEST['q'];
$cache_file = md5( $cachename );
return $cache_file;

}

?>

Menghapus record database menggunakan ajax prototype dan php

wayne — Fri, 04 Apr 2008 11:34:11 +0000

Beberapa hari yang lalu rekan kerja gw lagi asyik dengan research ajax-nya. Aneh juga sih, dia ketawa sendiri, kadang mengumpat ga jelas, kadang juga loncat dari tempat duduknya dengan spontan (*di bumbui dikit biar lebih afdol).

Nah kebetulan dia lagi ngerjain applikasi add/remove/delete database menggunakan ajax, dan kalau ngga salah pake prototype.js
Iseng-iseng gw coba-coba untuk bikin remove scriptnya. Dan voila… ini dia coi

Langkah 1: include prototype.js
Dapatkan prototype.js dan buat satu halaman dynamic dengan nama index.php
Sisipkan prototype.js ini di sehingga akan tampak seperti ini:

Langkah 2: Menyiapkan fungsi javascript deleteUser(id)
Fungsi ini akan mengirimkan ID dari record yang akan di hapus lewat POST method ke halaman delete.php.
Bikin satu file dengan nama data.php
Sisipkan kode dibawah ini di section

Langkah 2: Menyiapkan data yang akan dihapus
Kita asumsikan kode HTML yang ada pada file data.php akan ditampilkan seperti di bawah ini:

Wayne Cakep delete

Yoki Mad Dog delete

Denden brentek delete

list tersebut sangat simple dan kalian pasti bisa melihat ada satu yang berbeda dari coding tersebut… yo i bro! disana ada deleteUser(1), deleteUser(2) dan deleteUser(3). Angka 1, 2 dan 3 ini adalah Uniq ID dari user tersebut di database (gw asumsikan kalo loe sudah bisa nampilin halaman tersebut dengan php). Kalo loe ga bisa atau masih ragu, code php untuk nampilin html diatas kira kira seperti ini:

/* Koneksi Database */
$db_host=”localhost”;
$db_name=”database_name”;
$username=”database_username”;
$password=”database_password”;
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);

/* Query */
$getUser_sql = ‘SELECT * FROM USER’;
$getUser = mysql_query($getUser_sql);
?>

)”>delete

} ?>

Step 3: delete.php
Bikin satu halaman dan kasi nama delete.php, dimana halaman ini akan berisi beberapa baris syntak untuk menghapus record di database. File ini akan menangkap ID yang di POST oleh javascript nantinya:

/* Koneksi Database */
$db_host=”localhost”;
$db_name=”database_name”;
$username=”database_username”;
$password=”database_password”;
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);

if(isset($_POST['user_id'])){
$userID = $_POST['user_id'];
$sql = ‘DELETE FROM USER where id_user_pk =”‘.$userID.’”‘;
mysql_query($sql);
} else { echo ’0′; }
?>

Sekian
Ga susah bukan, klo loe masih ga nangkep berarti IQ loe dibawah standard yang sudah ditetapkan pemerintah. Segeralah konsultasikan dengan dokter, dan TANYA KENAPA ?????

Ketika Tuhan kita mengadakan rapat di surga

wayne — Fri, 04 Apr 2008 06:09:04 +0000

Hari ini gw lagi bete abis, kerjaan dah beres semua, ga tao mo ngapain… dengan terpaksa gw menghayal tinggat tinggi neh, biar ada kerjaan.

Gw lagi menerawang tinggi jauh ke angkasa, bertemu dengan Sang Budha, Yesus, Muhammad, Dewa Siwa, dan Tuhan-tuhan yang lain. Mereka lagi main kartu sambil menonton televisi melihat manusia dan umatnya yang saling berantem satu sama lain.

Dewa Siwa: “dasar manusia, dari dulu sampe sekarang ga pernah berubah… pengennya menang sendiri”.
Sang Budha: “ho oh, padahal udah gw turunin tripitaka buat dipelajari dan diamalkan, tapi masih saja suka berantem”.
Yesus: “mereka bener2 keterlaluan, gimana Muhammad … lu ada ide ngga?”.
Muhammad: “pusing gw mikirnya, mending maen kartu daripada ngurusin mereka, tull ga?”

Mengubah tampilan Gmail

wayne — Fri, 04 Apr 2008 05:20:18 +0000

Apa sih yang tidak bisa dilakuin oleh browser firefox? tull… emang browser yang bisa diandalkan. Hari ini gw iseng-iseng browsing karena kerjaan di kantor lagi longgar. Secara tidak sengaja gw temukan extension yang bisa ubah tampilan Gmail kita jadi lebih cool dan asik “Stylish extension“.
Another beauty of the dark styles.

Kemanakah bensin pergi di Bali?

wayne — Fri, 04 Apr 2008 04:00:21 +0000

Sudah seminggu lebih gw harus beli bensin di kios pinggiran jalan. Di sepanjang jalan By Pass Ngurah Rai POM Bensin tutup bro. Entah kemana perginya si bensin ini, mungkin lagi ngumpet ato emang sengaja di umpetin sama orang-orang yang ngga punya kerjaan. Gw tau sih, baca di internet katanya kapal pengangkut BBM lagi ada masalah di selat lombok, jadi distribusi dialihkan lewat bali barat. Tapi dengan dalih apapun, disini gw tetap acungkan jari tengah ke pihak terkait karena tidak becus ngurusin cewek seksi yang bernama bensin ini.

Tanya kenapa ?????