Beberapa javascript library di bawah ini bukan merupakan library javascript yg besar seperti jQuery, tetapi lebih kecil dan lebih spesifik.
1. Memperbaiki PNG di IE6 dengan DD_BelatedPNG
DD_belatedPNG diciptakan untuk tujuan tunggal memungkinkan PNGs alpha-transparan untuk digunakan dalam IE6 tanpa menggunakan filter AlphaImageLoader milik Microsoft.
Penggunaan :
<!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <![endif]-->
ditambah
<script type="text/javascript">
DD_belatedPNG.fix(".linkButton");
</script>
2. Gunakan font dengan Cufon
Script ini semacam script yg berguna untuk melakukan perubahan font di element yg dapat kita tentukan, seperti CSS. Namun, kelebihannya yaitu browser akan dapat langsung menampilkan jenis font Cufon
.
Penggunaan :
<script type="text/javascript" src="cufon.js"></script> <script type="text/javascript" src="Breip_500.font.js"></script>
cara memanggilnya :
<script type="text/javascript">
Cufon.replace('h1.replacedFont');
</script>
dengan Cufon kita juga bisa menggunakan multiple font
.
3. Gunakan Firebug di Browser apapun
Firebug merupakan plugin yang sangat bermanfaat bagi pengembang web. Plugin ini bisa membuat penyelesaian masalah tentang CSS bug menjadi sia-sia. Penyelesaian masalah tentang compatibility browser pun menjadi mudah. Plugin ini bisa diinstall di browser, bisa jg versi Lite yg tidak harus didownload dan diinstall.
Penggunaan :
<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
4. Render Interactive 3d Shapes dengan Raphael JS
Menggunakan elemen SVG, jadi kita bisa langsung membuat rounded corner tanpa gambar, create faded reflections for any images, rotate the images dynamically, dll. Selain itu, kita juga bisa attach JavaScript events to them so that people can interact with the images on mouseover or click (or any other JS events).
Penggunaan :
<script type="text/javascript" src="raphael.js"/>
Contoh :
<script type="text/javascript">
var canvas = Raphael(50, 50, 620, 100);
var shape = canvas.rect(0, 0, 500, 100, 10);
shape.attr("fill", "#fff");
canvas.text(250, 50, "Using Raphael to create custom shapes\ndrawn on the fly is extremely easy").attr("font", "20px 'Arial'");
</script>
5. Modernizr
Modernizr digunakan untuk membantu browser yang tidak mendukung fitur HTML5 & CSS3 menjadi bisa menerjemahkannya. Sehingga, apabila seorang web developer sudah menggunakan HTML 5 & CSS3, tetapi browsernya belum support, maka dengan library Modernizr masalah akan teratasi.
Penggunaan :
<script type="text/javascript" src="modernizr-1.0.min.js"></script>
tambahkan CSS :
.no-audio #audioContainer { display:none; }
coba tambahkan elemen audio di elemen web.
<div id="audioContainer">
<audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg" controls"true"></audio>
</div>
<a id="linkToAudio" href="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg">Link to the audio</a>
di browser yg tidak support, elemen itu tidak bisa ditampilkan. cara mengatasi :
if (Modernizr.audio) {
var audioLink = document.getElementById("linkToAudio");
audioLink.style.display = "none";
}
That’s all. Selamat Mencoba


