Dalam pengembangan web, Minify ialah teknik/cara yang digunakan untuk memperkecil atau meng-kompres ukuran file HTML, CSS dan JS. Tujuannya ialah untuk mempercepat loading sebuah website ketika diakses oleh pengunjung. Dengan teknik minify, penggunaan spasi dan komentar yang tidak diperlukan akan dihapus.
Berikut beberapa langkah untuk mempercepat web dengan teknik minify baik menggunakan tools, plugin WordPress hingga perintah PHP.
Menggunakan Tools
Anda dapat menggunakan tools online untuk meng-kompres perintah CSS dan JS. Diantaranya ialah CSS Compressor, Minify CSS untuk meng-kompres file CSS. Kemudian ada tool JS Compres, Javascript Compressor untuk meng-kompres file JS.
Menggunakan Perintah PHP
Bila Anda membangun web menggunakan PHP, Anda dapat menggunakan perintah berikut untuk meng-kompres setiap tag HTML. Perintahnya :
function minify($buffer){
$search = array(
'/\>[^\S ]+/s',
'/[^\S ]+\</s',
'/(\s)+/s'
);
$replace = array(
'>',
'<',
'\\1'
);
if (preg_match("/\<html/i",$buffer) == 1 && preg_match("/\<\/html\>/i",$buffer) == 1) {
$buffer = preg_replace($search, $replace, $buffer);
}
return $buffer;
}
ob_start("minify");
Letakkan perintah diatas dibagian awal ketika akan menulis perintah PHP sehingga fungsi minify dapat berjalan dengan baik.
Menggunakan Plugin WordPress
Apabila website yang dibangun menggunakan WordPress, Anda juga dapat meng-kompres setiap perintah HTML, CSS, dan JS dengan menggunakan plugin W3 Total Cache.
Kesimpulan
Salah satu kriteria web yang baik ialah waktu peng-aksesan web yang cepat. Untuk itu lakukan teknik minify pada perintah HTML, CSS dan JS di setiap web Anda.
Salah satu unsur penting dalam membangun web ialah icon. Icon merupakan gambar yang mewakili aksi/perintah tertentu dalam sebuah aplikasi. Dengan adanya icon sebuah aplikasi akan terlihat interaktif dan friendly.
Umumnya setiap dari kita akan menggunakan icon dalam bentuk gambar. Namun tahukah Anda sebenarnya untuk menampilkan icon di web, Anda juga dapat menggunakan font saja. Salah satu font icon yang sangat populer digunakan ialah Font Awesome. Font Awesome telah menyediakan setidaknya 470 icon yang siap di tampilakan di halaman web. Dan tentu saja icon tersebut semuanya tersedia hanya dengan file font alias bukan gambar.
Keuntungan Menggunakan Font Awesome
Beberapa keuntungan menggunakan Font Awesome :
- Font Awesome ialah jenis font (bukan gambar)
- Meningkatkan performa web Anda. Dikarenakan Font Awesome merupakan jenis font, maka setiap pengunjung yang mengakses web Anda hanya akan melakukan request HTTP ke file Font Awesome saja
- Tersedia 470 lebih icon yang siap digunakan
Meng-install Font Awesome
Ada beberapa cara yang bisa Anda gunakan untuk meng-install Font Awesome di proyek web Anda, yaitu :
Menggunakan CDN
Anda dapat menggunakan Font Awesome melalui fasilitas CDN. Letakkan link Font Awesome dari CDN di bagian head HTML web Anda. Contoh :
1
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> |
Download Font Awesome
Anda juga bisa men-download Font Awesome kemudian meletakkannya di direktori proyek web Anda. Download Font Awesome terlebih dahulu disini. Kemudian ekstrak file yang telah di download. Setelah proses ekstrak selesai akan terdapat 4 folder utama yaitu css, fonts, less dan scss. Copy folder css dan fonts kemudian masukkan ke dalam direktori proyek web Anda. Pastikan semua file yang ada di dalam kedua folder tersebut juga telah ikut ter-copy.
Untuk menggunakan Font Awesome ini, Anda cukup menambahkan link letak CSS Font Awesome di bagian head HTML web Anda dan lokasi font yang ada diperintah CSS tersebut. Contoh :
1
| <link rel="stylesheet" href="css/font-awesome.min.css"> |
Menentukan lokasi font di file CSS Font Awesome.
1
2
3
4
5
6
7
| @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.2.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal;} |
Menggunakan Sass atau LESS
Jika Anda menggunakan Sass ataupun LESS, masukkan folder fonts dan scss atau less ke direktori proyek web Anda. Kemudian buka file less/variables.less atau scss/_variables.scss dan ubahlah variabel lokasi direktori font. Misalnya :
1
| @fa-font-path: "../fonts"; |
Kemudian jangan lupa untuk melakukan recompile pada proyek web Anda.
Cara Menggunakan Font Awesome
Untuk menggunakan icon Font Awesome di proyek web Anda sangatlah mudah. Pertama yang harus Anda lakukan ialah mengetahui nama setiap icon terlebih dahulu. Silahkan cek di halaman fontawesome.io/icons untuk mengetahui semua nama dari icon Font Awesome.
Sebagai contoh, icon media sosial facebook memiliki nama fa-facebook. Untuk menampilkan icon tersebut berikut perintahnya :
1
| <i class="fa fa-facebook"></i> |
Mengubah Ukuran Icon
Untuk merubah ukuran icon, Font Awesome telah meyediakan beberapa class ukuran yaitu fa-lg, fa-2x, fa-3x, fa-4x, dan fa-5x. Contoh :
1
2
3
4
5
| <i class="fa fa-facebook fa-lg"></i><i class="fa fa-facebook fa-2x"></i><i class="fa fa-facebook fa-3x"></i><i class="fa fa-facebook fa-4x"></i><i class="fa fa-facebook fa-5x"></i> |
Jika ukuran yang telah disediakan terasa kurang, silahkan modifikasi file CSS Font Awesome dengan menambahkan class ukuran lainnya sesuai dengan kebutuhan Anda.
Kesimpulan
Dengan Font Awesome, menampilkan icon di proyek web Anda akan sangat memudahkan dan menyenangkan. Pada tutorial ini tidak semua fitur Font Awesome ditampilkan. Namun Anda bisa melihat berbagai contoh penggunaan Font Awesome di Font Awesome Examples seperti memberikan warna pada icon, membuat icon dengan animasi, mengubah arah icon dan lainnya.
