Mari kita putar!

Posted by mkhairul

Dulu masa Google+ baru launch, bila tambah user ke circle, dia ada putar itu circle. Time tu aku macam, kenapa ada animation ni? perlukah? Rasanya saja nak buat gempak kot.
So dari dulu lagi nak buat animation macam tu, saje je la, kalo korang letak kat Final Year Projek korang mesti lecturer atau rakan sekelas anda kagum, tapi kalo putar je tak buat apa tak guna jugak. Sebab tu post ni, aku akan tunjukkan macam mana nak putar! Kita putar icon tu, kita putar gambar ni! Kita putar Halim! Tapi aku hanya akan menurunkan hikmat putaran ni saja, yang lain tu kena guna kreativiti sendiri.

Nak tengok benda tu beraksi, http://jsfiddle.net/mkhairul/pmuEw/

Mula start ngan html biasa, aku pi straight to the point.

<div class="container">
    <img src="http://sembangprogramming.com/gplus-icon.png" alt="" />
</div>

CSS nya sikit je, kasi image tu position: relative

.container img{ position: relative; }

Pastu include jQuery dan juga plugin yang bernama jqueryrotate.
Javascript ni aku amik sikit dari page jqueryrotate tu.

$('.container img').click(function(){
    var move;
    var rotate;
    if($(this).css('left') == '100px')
    {
        move = '0px';
        rotate = -360;
    }
    else
    {
        move = '100px';
        rotate = 360;
    }
    
    var rotation = function (el){
        $(el).rotate({
            angle:0, 
            animateTo:rotate,
            callback: rotation,
            easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
                return c*(t/d)+b;
            }
        });
    }
    rotation(this);
    var self = this;
    
    $(this).animate({left:move}, 1000, 'easeOutCubic')  
})

Apa javascript ni buat adalah, bila click image, dia putar dan gerak 100px ke kanan. Kalau klik lagi, dia gerak 100px ke kiri lak, balik ke tempat asal.
Ni warmup post, jadi tak berat sangat. Kasi ringan dan simple.
Lagi satu, code akhir kat javascript tu, ada easing function “easeOutCubic” memerlukan jQuery UI. Kalo malas nak download buang je bahagian tu jadikan dia

$(this).animate({left:move}, 1000)  

Post baru dalam beberapa hari..

Posted by mkhairul

Agak lama dah tak post, baru baru ni ada seorang insan yang contact aku melalui contact form site ni dan mintak post baru. Membara sikit semangat nak buat post baru.
Sejak kebelakangan ni aku banyak terlibat ngan projek-projek yang menarik. Jadi, nantikan beberapa post menarik.

Antaranya adalah teknologi-teknologi baru seperti macam mana nak buat aplikasi chat menggunakan websocket, user experience dalam login/registration (dan pelbagai jenis form) dan pelbagai lagi yang akan diceritakan pada post yang akan datang.

Menghasilkan klon (add more files, etc)

Posted by mkhairul

Dah lama tak post. So, untuk menjinakkan diri untuk kerap post balik, kali ni post yang agak ringkas.

Katakan aku ada input field macam ni,

Link kat bawah input file tu bila click, dia akan tambah lagi satu input file yang sama pastu jadi macam ni pulak dan seterusnya.

Ok, kita guna cara simple dulu lah. Takyah nak plugin atau auto-detect, dsbnya.
Mula-mula, html dia rupa macam ni (ignore class-class yang banyak tu)

<div class="image">
  <span><span>Select file</span><input type="file" value="" name="catalogue[]"></span>
  <small><strong>Filetype:</strong> (*.jpg, *.png) <strong>Max file size:</strong> 2MB</small>
</div>
<a href="#" class="add_more_image">Add Another Image</a>​

Javascript dia pulak,

$('.add_more_image').click(function(){
    var cloned = $('.image:first').clone();
    $(cloned).insertBefore($(this));
})​

Kenapa ada :first? Kerana bila kita click Add Another Image, dia akan guna class “image”. So kalau ada 2 element pakai class image, kita click lagi sekali Add Another Image dia akan berganda.. mula-mula 2 pastu 4 pastu 8.. lama lama sejuta pastu crash browser. Aku rasa tak sampai sejuta pun dah crash, aku tak test sebab ada banyak benda lagi nak buat.. mungkin suatu hari nanti boleh la nak test, but Not Today.

Kalau nak tengok code tu beraksi, gi usha jsFiddle nih.
Jadi setakat tu je la yang dapat aku tulis. Next post aku improve kod nih, jadi plugin ke ape ke.. contohnya bila kita letak class add_more, dia akan carik element sebelum dia untuk clone.

Folder sedang digunakan, tak boleh delete! (Folder in use)

Posted by mkhairul

Kerap kali bila nak delete folder, ada la pulak problem. Macam ni

Jadi, macam mana nak delete folder ni? Nak kene restart ke? (Kalau restart confirm boleh). Tapi kalau restart kita tak tau apa punca sebenar benda ni jadi. Ni yang aku nak bagitau ni, punca nya adalah, ada la anasir yang dok tengah pakai folder tu yang tak reti nak let go. Usah dikenangkan perkara yang silam, teruskanlah dengan kehidupan wahai process yang dok pegang folder ni.

Untuk paksa process ni meneruskan kehidupannya, kita perlukan satu tool yang agak menarik. Banyak lagi benda dia boleh buat, tool tersebut dipanggil Process Explorer. Haaaa, aku dah guna menatang ni sejak tahun 1980an. Hahaha..  Rupa dia lebih kurang macam ni.

Nak free kan folder tersebut, click kat Find -> Find Handle or DLL (tekan Ctrl + F pun boleh). Bila keluar kotak untuk diisi, taip la nama folder tu macam ni,

Pergh, banyak nya process yang takmo lepaskan folder ni. Kalo tengok process process tu, tu semua firefox punya angkara. Tapi kenapa firefox buat macam tu pulak? Confirm la dalam folder tu ada html file yang baru sahaja dibukak ataupun yang dah lama (tapi firefox takmo lepaskan). Jadi click kat tiap tiap process tu dan matikannya!

Setelah menutup dua-dua process yang dok pegang folder tu, barulah boleh delete folder.

Ok lah, jumpa lagi pada post yang akan datang.

Manipulasi kandungan didalam elemen

Posted by mkhairul

Post kilat.. Katakan ada elemen macam ni..

<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue augue, 64GB-DDRAM scelerisque vitae convallis consequat, fringilla quis urna.</a>
<a href="#">Nullam consequat molestie metus, vel fermentum mauris molestie eu. Aenean ornare lectus quis turpis congue condimentum.</a>

Dan katakan pulak kandungan anchor ni kita takleh nak tukar awal-awal (dari service lain ataupun dari database). So, kita hanya boleh tukar bila page tu dah generate. Apa nak buat sekarang ialah nak letak 64GB-DDRAM atau perkataan seangkatan dengannya dalam elemen .

Guna javascript macam ni.. jangan lupa include jQuery!

$(document).ready(function(){
  pattern = new RegExp(/[A-Za-z0-9]*[-]+[A-Za-z0-9]*/)
  $('a').each(function(v){
    tmp = $(this).html().match(pattern);
    if(tmp)
    {
      str = $(this).html().replace(pattern, '<span class="something">' + tmp + '</span>');
      $(this).html(str);
    }
  })
})

Nak explain ke tak, aku rasa agak simple kod ni untuk difahami. Kalo ade soklan tanya la dalam comment.

Ni kita guna sihir regex sikit. Untuk cari pattern yang match 64GB-DDRAM. Nak cari pattern lain pun boleh, mahir-mahirkan lah diri dalam regex. Nanti leh jadi superhero macam ni..

REGEX HERO

Error apabila terdapat kod console.log di IE 7 dan 8

Posted by mkhairul

Platform utama aku untuk web development, sudah tentu si musang berapi, Firefox bersama dengan serangga setia dia (lipas atau kutu), Firebug. Jadi kadang-kadang aku terbawak bila guna console.log() ni ke IE 7 dan 8 (IE 9 ok, dia takde problem), tapi memang bagus pun pakai console.log() nih, senang nak menjalankan proses menyahpejat (debug). IE 7/8 ni tak suka bila ada pembolehubah yang terus pakai, yang tak assign apa apa. Undefined variable ni dia campak error.. nampak macam ni..

Kod problem dia lebih kurang gini,

// ... bla bla bla
console.log('jadi ke tak?')

$.functionPentingYangMestiRun();

Bila kat Firefox dan seangkatan dengannya, ok je benda ni. Function penting tu run. Tapi bila IE 7/8, dia stop! Dia campak error, pastu dia takmo run dah, setakat tu je.

Maka takmo la jadi macam tu, kena la letak condition.

if(window.console)
{
  console.log('jadi ke tak?');
}

// ataupun

if(typeof console != 'undefined')
{
  console.log('jadi ke tak?');
}

Tak pun letak console.log tu dalam function.

function habaq_kat_console(msg)
{
   if(window.console)
   {
      console.log(msg);
   }
}

// Bila nak pakai

habaq_kat_console('Tak leh la..');

Setakat ni saja.. ada lagi beberapa post dalam pipeline. Akan ku usahakan untuk post!

Lama menghilang..

Posted by mkhairul

Post terakhir adalah pada 4 bulan lepas. Agak lama juga tu. Kerjaya aku pun dah bertukar, dari jadi developer sekarang dah jadi web designer (tukar angin sikit). Banyak benda yang perlu dipelajari dimana perjalanan ini akan aku catitkan dan dikongsikan sebagai topik didalam sembang programming!

Mungkin post yang akan datang akan lebih menghala ke arah UX (User Experience) dan UI..

Form Validation: jQuery + CodeIgniter (validation engine codeigniter)

Posted by mkhairul

Post kali ni nak kasi demo sikit, form validation guna jQuery dan juga CodeIgniter. Komponen untuk server side,

Kali ni, kod overload. Kalau ada rasa loya-loya sikit bila tengok kod banyak sangat, sila undur ke belakang perlahan-lahan dan cari beg plastik sebagai persiapan untuk muntah, pastu teruskan membaca.

Untuk makluman semua, kod dibawah digunakan bersama dengan Validation Engine 1.6.3. Untuk version 2.0 ni, tak berapa pasti, tapi mengikut firasat aku, takde beza kot (nanti la aku test).

So kalau nak tengok demo untuk validation engine tu, gi la ke demo page dia.

Validation Engine
Plugin ni ada client-side validation, tapi aku ni, malas sikit nak buat client side validation ni kerana server-side validation kena buat jugak. Oleh kerana aku lebih suka meluangkan masa di reddit daripada buat client-side validation, aku buat server-side je lah.

Kalau nak buat client-side validation, kat site dia ada cerita, dalam docs tu dan bila invalid data, dia keluar pop-up macam ni,

Amacam? Menarik? Hehehe.

Oh, benda ni bukan limit pada codeigniter je, kalau php biasa pun leh guna. Sebab aku guna codeigniter, aku kasi spotlight la kat CodeIgniter. Hehehe.

Ok, first sekali kena set jquery form plugin.

var options = { 
  beforeSubmit:  loading,  // pre-submit callback
  dataType: 'json',
  success: cleanup  // post-submit callback 
};
$('#nama_form').ajaxForm(options);

Form dia, aku kasi contoh, gini la rupa dia

<?php echo form_open('register/create', array('id' => 'registration_form')); ?>
	<h3>Account Info</h3>
	<div>
		<label>Email Address<span class="required">*</span></label>
		<input type="text" class="email-address text" id="username" name="username" value="" />
		<span class="field_info">Type in your email address, an email will be sent afterwards</span>
	</div>
</form>

Ha, simple je. Pastukan, kita taruk ni pulak
Continue reading »

Mana post bulan ni?

Posted by mkhairul

Oleh kerana dah makin sibuk pada bulan ni. Post berbentuk pembelajaran dan tips dikurangkan. Post berbentuk pengalaman dan pencerminan diri. Woah, pencerminan.

Ada banyak draft berkaitan rounded corners, Node.js, HTML5, Checklist dalam pembikinan laman web dan lain lain. Jadi, terpaksa la korang tunggu ya. Bersabar, jadi macam beruang ni,

Datang la melawat gak, nanti saya post pengalaman dan pandangan ya. Hehehe.

Cheat Sheet untuk Blueprint CSS Framework

Posted by mkhairul

Cheat sheet terbaru untuk blueprintcss dah dikeluarkan. Aku ni pengguna setia framework ni. Memudahkan kerja, tak perlu fikir implementasi grid pada browser yang berlainan dan pelbagai lagi.

Cuma jenis font je sekarang ni citarasa dah agak berubah. Lebih gemar “baskerville,palatino,’palatino linotype’,georgia,serif” untuk Title dan Header text, macam website jontangerine.com.