Dunia Baru 3 Student separuh masa dah

7Nov/090

Compress javascript dengan Closure Compiler

Biasanya kalau menulis aku program dalam javascript, aku akan terus pakai jer. Tak berapa nak tahu sangat yang kod javascript tu boleh pulak di compress supaya menjadi lebih ringan dan sekaligus cepat loading.

Semalam, semasa membaca news kat bahagian teknologi, aku terserempak dengan satu artikel berkenaan dengan cara-cara untuk mempercepatkan loading kod javascript. Dari situ, ada satu tool yang sangat mudah nak digunakan untuk compress kod javascript, iaitu Closure Compiler.

Tahap keberkesanan compress oleh compiler ni boleh dikatakan ok. Misalnya, kod asal 50KB, kalau di compress boleh menjadi sekecil 25KB! Impresif!

Bila kita compress, dia akan:

  • buang segala whitespace & komen
  • tukar variable name yang panjang menjadi satu huruf, misalnya, "var Data" jadi "var a"

Aku tak pasti kalau-kalau ada compiler lain yang ada kat internet yang juga boleh compress macam ini. So, kalau korang ada, share-share lah yer :)

  • Share/Bookmark
25Nov/080

jquery: checking checkbox

dalam javascript, kerja-kerja checking ni memang rumit. tapi dengan menggunakan jquery, kerja-kerja tersebut dipermudahkan.

kat sini aku nak share kod yang aku sering gunakan untuk buat checking checkbox bagi memastikan user dah tick checkbox sebelum dia klik submit.

contoh: confirm dulu sebelum proceed.

semua kerja-kerja checking tersebut di buat dalam hanya beberapa baris kod jquery seperti dibawah (tak sampai 30 baris pun) :

<script type="text/javascript">
$(document).ready(function() {
//this is Jquery language.

//this function is to make sure user select query to be deleted.
$("#removeDraftQuery").click(function (){
    var _isSelected = false;

    //jquery loop each of checkboxes
    $("input[type=checkbox]").each(function(){
        var isChecked = $(this).is(":checked");
        if(isChecked) _isSelected = true;
    });

    if(!_isSelected) {
        alert('Please select query to delete.'); return false;
    } else {
        if(!confirm('Are you sure to remove selected Query?')) return false;
    }
}); // end click function
}); //end document ready       
</script>

p/s: tu yang aku suka guna jquery. library dia kecik. simple.

  • Share/Bookmark
23Nov/070

Prototype, ExtJs, Script.aculo.us

If you are web programmer, you should be know about this library already. This few days while working on the new project (which has been scrapped!), I manage to read some of the interesting trick & tips using those library.

Prototype:
This is an library used to extend DOM object plus adding some of new features to the DOM object. A real good shortcut while calling DOM object is by using $() function. Normally we are using document.getElementByID, but using $() then the result is the same. Same time for typing & copying :p Then Prototype also include AJAX library which i think quite easy to use as well.
Website: http://www.prototypejs.org

Script.acalo.us:
This is a add-on library to Prototype. Using this library you can add such effect to the DOM object which is not supplied by Prototype library.
Website: http://script.aculo.us/

ExtJS:
This is a very fine working framework! If your are serious developing Web 2.0 application, then I recommend this library. You can doing such object like Window, Message alert, drag & drop etc. Even you can develop another version of Meebo if you crazy enough about Ajax! :p
Website: http://extjs.com/

***

Personally, I do prefer all of them. Yet, I'm still learning..

  • Share/Bookmark