Gridless benefits:

Mobile First Design Approach

Yes. It is very suitable for mobile first design approach which adapt to device width. If you are good enough, you can use it with 320 and up framework or turn Gridless into your own HTML framework.

Cross Browser Compatible

Gridless is compatible with Firefox 3.5+, Opera 11+, Chrome 11+, Safari 5+ and Internet Explorer 6.

Agnostic starting point

Gridless is extremely simple and straightforward. It doesn’t come with any predefined grid systems or non-semantic classes. Gridless is meant to be a starting point, which should be edited, tweaked and overwritten to suit each project’s design requirements.

As the quote implies, you need sort out the grid by yourself. Don’t worry about the font, image and video styling, just focus creating your layout then you’ll be success.

Not satisfied? Just see the Gridless demo. Fork Gridless at Github.

Cheers.

Besides that,  Designers Toolbox also has standard sizes for envelope, postcard, business card and much more. Plus, this site also has useful iPhone GUI Elements in PSD.

Hope to share with you guys out there. Cheers!

GoGadgetGiveaway is excited to giveaway the New Ipad released 2012. Not much to say, I would like to create my own apps for ipad and share them for the people across the globe.

May the best win. Cheers.

I trying my luck to enter Grow Up Geek’s April 2012 Giveaway Ipad . Not much to say, I just want to enter this contest, thats all.

May the best win.

Tiba-tiba dalam bulan 12 ni, tergerak pulak aku nak check PR. Tau-tau dapat PR2. Aku fikir jugak kenapa aku dapat PR2. Nak kata update blog selalu, mustahil. Nak kata backlink banyak, ciput je. Nak kata follower ramai, 30 orang pun tak sampai.

Dalam masa 9 bulan, aku banyak selidik pasal responsive theme, adaptive theme dan juga mobile theme. Dah banyak testing aku buat, aku banyak fokuskan kepada kelajuan blog. Blog mesti laju tak kira surfing guna dekstop atau handphone.

Bagi aku, aku sasarkan kelajuan blog pada 5 second. Kalau blog 5 second, dah kira teramat laju dan confirm boleh dapat score Google Pagespeed 90. Aku banyak testing guna theme seperti Twenty Ten, Twenty Eleven dan juga framework lain macam Bones, Thesis dan lain-lain. Kalau nak kata theme premium laju, tak ada laju mana pun, 8 second ke atas dah confirm.

Aku benar-benar tak sangka PageSpeed tu penyumbang PageRank. Dari PR kosong melonjak kepada PR2. Terima kasih banyak-banyak Google PageSpeed dan juga Google PageRank. Adios…

Entah sejak kebelakangan ini, aku asyik dapat link spam melalui Facebook Chat. Kalau nak kata aku ni kuat chatting kat facebook, sekali-sekala tu adalah sikit-sikit. Biasanya, aku on Facebook pun setakat nak tengok updates dari member-member je.

Aku sendiri tak boleh tahan sebab aku dah terima spam link tu sampai 5 kali dalam setengah jam yang lalu. Aku terima spam link melalui Facebook Chat macam gambar ni.

Jadi? Puncanya macam mana? Korang refer link ni sebab aku sendiri malas nak jelaskan.

http://techworldsz.blogspot.com/2011/03/facebook-spam-chat-messages-facebook.html

Dimudahkan ceritanya macam ni.

if you click on that link the same message will be automatically send to all your friends in chat.

Penyelesaian? Cuma offkan facebook chat. (Bagi aku ini cuma penyelesaian sementara.) Terima kasih untuk Junaidey sebab dia ada tulis Cara Mudah Hentikan Spam/Virus Chat Facebook. (Sebenarnya aku malas nak taip sebab takde mood)

Komen RG

Aku rasa teknik spam biasanya digunakan IM (Internet Marketer) untuk melariskan jualan diorang dan mendapatkan lebih hits. Aku tau la teknik ni sebenarnya teknik viral (aku sebenarnya tak terer pun bab-bab viral link) tapi teknik ni disalahgunakan untuk kepentingan individu tertentu. Penyelesaian yang ada di atas boleh digunakan buat sementara tetapi kalau buat jangka masa panjang, macam tak kena je sebab bagi kaki facebook chat tegar rasanya diorang tetap akan set kepada chat online.

Andaian RG

Kalau spam link ni berpunca daripada virus, just update antivirus.

Kalau berpunca daripada web browser macam Firefox, Chrome, Opera atau sebagainya, kasi clear semua history, cache and what ever, kemudian uninstall dan reinstall balik web browser.

Kalau berpunca daripada facebook account, report kepada facebook developer. RG dapat rasakan database facebook adalah puncanya sebab tidak mementingkan privacy. Bila sorang kena, yang lain kena.

Jadi RG sendiri minta maaf bagi sesiapa telah add RG kat facebook kalau RG sendiri ada keluarkan link spam dari facebook chat. Honestly, RG jarang sangat FB chat dan pendek kata FB chat sekali-sekala, itupun orang-orang tertentu sahaja.

Buatlah apa-apa yang patut.

Penggunaan kod TEMPLATEPATH dan get_template_part adalah sama iaitu mengloadkan atau menyertakan satu file php di dalam satu file php yang lain yang berada di dalam folder yang sama. Biasanya kedua-kedua kod ini digunakan di dalam sebuah theme WordPress.

Biasanya TEMPLATEPATH digunakan untuk theme option dan kurang sesuai untuk digunakan diletakkan ke dalam theme secara direct. Sebabnya TEMPLATEPATH digunakan secara force, sekiranya file php itu gagal loading maka error 404 akan dihasilkan.

Get_template_part adalah coding terbaru sejak WordPress 3.0 yang digunakan secara besar-besaran dalam Twenty Ten Theme. Salah satu kelebihannya kita mampu memanggil file php yang mengandungi conditional tag loop seperti loop.php malah kita mampu apply kod get_template_part ke dalam child theme untuk memanggil child loop.php seperti loop-index.php, loop-category.php dan sebagainya.

Bagi saya, kod get_template_part memang best. Kod ini diloadkan secara parallel atau synchronous (serentak), bagus untuk loading page. Jika file yang diload gagal dipaparkan atau gagal dipanggil oleh server, page tersebut tidak akan memaparkan error 404 sebalik jadi page kosong berwarna putih seperti kertas A4.

Nik ada bagi saya satu rujukan yang agak baik dan saya akan tunjukkan rujukan itu sebagai contoh.

Berdasarkan rujukan itu, saya simplify kod itu jadi seperti di bawah. Kod di bawah ini menggunakan kod TEMPLATEPATH.

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>

Berdasarkan kod tadi, saya ubah kod tersebut mengikut kod get_template_part.

<?php get_template_part('sidebar1.php'); ?>
<?php get_template_part('sidebar2.php'); ?>

Harap dapat membantu.

Rujukan: How Does get_template_part Works In Twenty Ten Theme

Ini adalah respond kepada Madlut dari entrinya Tutorial Twenty Ten : Menjadikan Header Sebagai Link Homepage.

Coding Bahagian A

Ini adalah code yang mengandungi coding header di dalam Twenty Ten Theme.

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

Perhatikan <!–?php endif ?–> . Ini adalah code fallback bagi sesuatu function dibuat. Tanpa code ini, coding akan break dan theme akan gagal berfungsi.

Ceraian Coding Bahagian A Lebih Mendalam

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );

Coding di atas ini menyatakan condition di mana gambar thumbnail (Diset melalui Featured Image ketika membuat post/entry) akan mengantikan gambar header pada homepage. Gambar thumbnail akan dipaparkan pada halaman single.php atau page.php. Coding di atas berakhir boleh diakhiri endif tetapi coding di atas diakhiri else: yang bermaksud sekiranya coding di atas ini gagal, wordpress akan memproses coding yang berada selepas else: dan coding sebelum endif. Coding di bawah ini adalah coding di antara else: dan endif:

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

Coding ini pula adalah coding yang memproses image header yang sering kita lihat pada setiap halaman page dalam Twenty Ten Theme. Image header dipilih melalui paparan Header Image pada panel Appearance.

Coding Bahagian B

Untuk membuat header sebagai header yang clickable yang boleh terus link ke homepage, saya akan gunakan coding yang sedia ada dalam header.php Twenty Ten Theme.

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>

<?php bloginfo( ‘name’ ); ?> dalam Coding Bahagian B akan digantikan dengan Coding Bahagian A tetapi tidak semudah itu. Akan tetapi, kita akan gantikan dengan Ceraian Coding Bahagian A.

Untuk Coding Pertama Ceraian Bahagian A

Kita perlu berhati-hati untuk menyumbat Coding Bahagian B ke dalam Coding Pertama Ceraian Bahagian A supaya coding berfungsi. Memandangkan coding ini adalah conditional tag, kita akan letak pemula tag <a> selepas if (is_singular && …..): . Hasil akhir jadi seperti ini.

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image! ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );?>
</a>

Untuk Coding Kedua Ceraian Coding A

Cara ini lebih mudah berbanding sebelum ini, cuma kita perlu berhati-hati dengan conditional tag iaitu else: dan endif. Coding berakhir seperti ini.

<?php else : ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
</a>
<?php endif; ?>

Kita sudah siap edit semuanya. Kita refresh balik coding asal dan lihat hasil akhir.

Coding Sebelum Edit

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

Hasil Akhir

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image! ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );?>
 </a>
<?php else : ?>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
</a>
<?php endif; ?>

Sekian sudah tutorial Membuat Header Twenty Ten Theme Sebagai Link ke Homepage. Harap maaf kalau tutorial ini terlalu panjang. Saya sudah pastikan coding ini berfungsi dan ada fungsi fallback.
Akan datang saya akan buat tutorial header dengan hover image effects.

Actually, I’m a big fan of SyntaxHighlighter Evolved Plugin. I had used this plugin quite long, about a year ago.  I see that this plugin loads on every page that I used, so I don’t want this thing happen. Hence, I want this plugin only loads on single.php. I’m using Twenty Ten Theme, so I will show you how to disable plugin so that this plugin only loads in single.php

A Flashback….

I found this code from [Plugin: SyntaxHighlighter Evolved] Script Loads When Not Needed. This code was recommended by its plugin developer, Alex M. (Viper007Bond).

<?php
if ( is_home() ) {
	global $SyntaxHighlighter;
	$SyntaxHighlighter->usedbrushes = array();
}
?>

So, I test out this code in Twenty Ten Theme, I put this code in Twenty Ten Theme’s footer.php just before wp_footer. But first, let see the wp_footer code in footer.php.

<?php
	/* Always have wp_footer() just before the closing </body>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to reference JavaScript files.
	 */

	wp_footer();
?>

Based on the code above, there is comment tag that recommend to put code inside there. By omitting <?php and ?> tags, I put in the codes and the codes become like this.

<?php
	/* Always have wp_footer() just before the closing </body>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to reference JavaScript files.
	 */
if ( is_home() ) {
	global $SyntaxHighlighter;
	$SyntaxHighlighter->usedbrushes = array();
}
	wp_footer();
?>

I test it out and its works. But, in Twenty Ten Theme, that code only works in your homepage, that means Syntax Evolved Plugin is only disable in homepage page. I also try on other pages suchs page.php and etc. Unfortunately, this plugin also loads in tag page (tag.php) and also author page (author.php).

So the finalize code should be like this.

<?php
	/* Always have wp_footer() just before the closing </body>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to reference JavaScript files.
	 */
if ( is_home() || is_tag() ||is_author ()) {
	global $SyntaxHighlighter;
	$SyntaxHighlighter->usedbrushes = array();
}
	wp_footer();
?>

Enjoy your codings and have fun!

Ada sesiapa pernah guna theme Twenty Ten Weaver atau 2010 Weaver? Sebenarnya nama theme ini sama sahaja cuma bezanya Twenty Ten Weaver dihostkan di WpWeaver.info manakala 2010 Weaver dihostkan di WordPress Theme Directory.

Bagi mereka yang tidak mengetahui Twenty Ten Weaver ini rupanya macam mana, rupa design theme ini memang sebijik macam kat WpWeaver.info. Twenty Ten Weaver theme ni tak banyak beza Twenty Ten theme dari segi design tapi dari segi function, Twenty Ten Weaver lebih advance dari Twenty Ten.

Sekarang ni, Twenty Ten Weaver telah ditukarkan nama kepada Weaver. RG rasa pun bagus gak sebab bila selalu bukak forum kat WordPress.org cari pasal Twenty Ten theme, Twenty Ten Weaver yang keluar. Satu lagi, bila Weaver dah tukar nama, hilanglah rasa salah sangka newbie yang selalu ingat Twenty Ten Weaver tu theme default WordPress.

Pros

• Weaver bagus untuk newbie dan tidak perlukan kepakaran yang tinggi.
• Function Weaver sama seperti Twenty Ten Theme malah lebih advance dari Twenty Ten Theme dari segi pemilihan sub theme.
• Banyak option seperti memasukkan nilai color, tukar jenis font, tukar layout column.
• Weaver dianggap theme yang advanced sebagai theme yang percuma.

Cons

• Weaver kurang sesuai untuk pengguna advance yang selalu inginkan modification yang canggih.
• Weaver kurang sesuai untuk optimization seperti speed optimization sebab file Weaver terlampau banyak.
• Size style.css yang agak besar iaitu 29kb kurang sesuai. Style.css kalau kurang dari 20kb lebih bagus.
• Weaver ada banyak function tetapi tiada function SEO. Agak menghampakan tetapi inilah realiti theme percuma.
• Advanced Options Page mempunyai banyak sangat teks dan agak crowded.
• Pemilihan warna secara manual memerlukan pengalaman dan penyelidikan mengenai warna supaya pemilihan warna lebih teratur dan kemas.
• Disebabkan Weaver mempunyai banyak option, database WordPress seperti WP_Options akan jadi lebih berat apabila selalu tukar nilai color dan font. Setiap perubahan nilai akan disave ke dalam table database WP_Options.

Konklusi

Twenty Ten Weaver atau 2010 Weaver telah bertukar nama kepada Weaver. Weaver didapati di WordPress Theme Directory (Weaver).

Weaver atau Twenty Ten lebih bagus? Terpulanglah pada diri masing-masing.