Tag Archives

3 Articles
Seri Optimasi Web: Penjelasan

Seri Optimasi Web: Penjelasan

by Jan Peter Alexander Rajagukguk 2 Comments

Sebuah situs yang dikatakan “berat” ketika membutuhkan waktu yang lama untuk sampai menampilkan semuanya. Saat ini semua orang menggunakan Javascript, CSS, dan bahkan cetakan HTML yang berisi lebih dari 100KB. Lebih parahnya lagi, situs-situs banyak yang menggunakan pustaka-pustaka CSS dan Javascript berbeda. Ini menimbulkan waktu tempuh yang sangat besar.

Client-server roundtrips.

Ada beberapa cara untuk mengurangi waktu yang lama untuk menampilkan situs. Baik dari sisi peladen dan pemrograman harus dioptimasi. Berikut hal-hal umum yang biasa dilakukan.

Kombinasi CSS dan Javascript

Mengombinasikan beberapa berkas CSS dan Javascript menjadi satu berkas CSS dan satu berkas Javascript. Dengan demikian, peramban hanya melakukan permintaan sekali ke peladen untuk berkas-berkas ini.

Proses Minifikasi

Melakukan minifikasi. Proses minifikasi melakukan dua hal pada berkas CSS dan Javascript:

  1. Membuang komentar.
  2. Membuang karakter kosong yang tidak perlu (spasi dan baris baru).
  3. Beberapa optimasi melakukan perubahan internal dengan mengganti variabel lokal dengan satu huruf.

Hasil minifikasi membuat kode tidak begitu mudah dibaca oleh manusia. Namun, berkasnya jadi lebih kecil.

Kompresi

Peladen diset untuk mengirimkan berkas-berkas yang diminta dengan dikompresi terlebih dahulu di peladen. Kemudian, peramban akan menerima berkas-berkas terkompresi tersebut, mengekstraksi, dan menampilkan ke pengguna.

Waktu Kadaluarsa

Menentukan waktu kadaluarsa. Dengan menentukan kadaluarsa, konten-konten yang diunduh dari peladen akan disimpan dalam tembolok peramban sampai masa tertentu.

Optimasi Pemrograman

Secara pemrograman, situs dapat dioptimasi. Hal yang lazim misalnya:

  1. Mengoptimasi dengan Javascript untuk gambar-gambar diproses belakangan (lazy load).
  2. Memindahkan beberapa skrip dari HEAD ke BODY dan diset untuk berjalan saat semuanya telah dimuat.
  3. Menggabungkan beberapa gambar kecil menjadi satu gambar besar. Nantinya gambar tersebut digunakan berulang-ulang dengan menggunakan teknik CSS sprite.
  4. Mengompresi ulang dan menentukan dimensi gambar yang ditampilkan agar sesuai dengan yang diset di HTML. Sering kali gambar yang diunggah jauh lebih besar daripada dimensi yang ditampilkan. Gambar yang lebih kecil biasanya berukuran jauh lebih kecil daripada gambar asli.

Kesimpulan

Ini beberapa teknik yang mungkin akan saya bahas. Kemungkinan, sih, kalau saya tak sibuk DoTA 2 atau kegiatan lainnya. Apakah rekan-rekan ada juga teknik lainnya?

Meretas Manokwari (True Hacking)

Meretas Manokwari (True Hacking)

by Jan Peter Alexander Rajagukguk 17 Comments

Mari saya beri contoh mengenai penggunaan yang benar kata hacking. Bukan merebut hape teman lalu memasang status aneh. Bukan juga menjebol situs-situs dengan menggunakan skrip yang diunduh dari Internet. Melainkan, mempelajari sebuah sistem dan mengubah/memperbagusnya sesuai dengan kemauan kita. Contoh kasus desktop kita tercinta, BlankOn.

Anda mungkin narsis menghargai keberagaman yang sudah Tuhan berikan bagi kita dan terinspirasi untuk membuat komputer Anda berbeda. Tetapi, bagaimana mungkin, BlankOn tidak menyediakan konfigurasi tematik yang diberikan.

Sesuai FHS, biasanya aplikasi menaruh pustaka ke dalam direktori “/usr/lib”.  Setelah ditelaah lebih lanjut diketemukan sebagai berikut:

$ ls -al /usr/lib/manokwari/system/
total 963
drwxr-xr-x 2 root root    312 Nov 26 14:43 .
drwxr-xr-x 3 root root     72 Agu 29 22:52 ..
-rw-r--r-- 1 root root   2865 Nov 22 15:09 desktop.css
-rw-r--r-- 1 root root    586 Nov 22 15:09 desktop.html
-rw-r--r-- 1 root root   5252 Nov 22 15:09 desktop.js
-rw-r--r-- 1 root root 248235 Nov 22 15:09 jq.js
-rw-r--r-- 1 root root   2321 Nov 22 15:09 menu.html
-rw-r--r-- 1 root root  29523 Nov 22 15:09 menu.js
-rw-r--r-- 1 root root   5618 Nov 22 15:09 style.css
-rw-r--r-- 1 root root 661141 Nov 22 15:09 texture.jpg

Wow, ternyata mereka menggunakan HTML, Javascript, dan CSS. Dari hasil penelaahan diketemukan:

desktop.html
Blok-blok tampilan desktop
desktop.css
Konfigurasi tampilan.
menu.html
Blok-blok untuk menu.
menu.js
Skrip Javascript untuk animasi dan penempatan.
style.css
Tempat untuk mengubah-ubah tampilan.
jq.js
Pustaka JQuery.

Setelah dilihat lebih lanjut, Manokwari menggunakan CSS Animation dari Webkit. Dan memang kalau dilihat dari paket-paket yang dibutuhkan oleh Manokwari, Manokwari menggunakan Webkit. Jadi, kita bisa menggunakan CSS3 khusus untuk Webkit dalam mewarnai Manokwari.

Hei, am I talking to a noob or a real hacker? Sorry, I’m spoiling things up for you.

Demi menghargai kalian, saya tidak membahas lebih lanjut. Tetapi maaf, saya hendak memberi contoh untuk perubahan yang dapat dilakukan.

Mengganti Latar Menu

Saya mengunduh sebuah latar belakang dari bgrepeat.com. Lalu saya taruh di direktori Manokwari.

$ sudo mv /tmp/128-129.jpg /usr/lib/manokwari/system/texture.jpg

Ya, saya memang jantan, langsung tindih saja. No turning back, u scared?

Buka berkas style.css, lalu tambah pada elemen “.ui-page” kalimat ini:

background-repeat: repeat;

Setelah “background: url(texture.jpg);” juga tak apa. Nyalakan ulang manokwari:

$ killall manokwari

Tunggu beberapa saat sampai Manokwari berubah menjadi:

Menu Manokwari Berubah

Menu Manokwari Berubah

Kesimpulan

Maaf bila saya sudah spoiler satu hal yang bisa dilakukan, ha… ha… ha….

Masih banyak, kok, yang bisa Anda lakukan. Silakan gunakan kekuatan kreatif Anda. Kalau sudah, ayo coba berbagi dengan mengompres isi direktori “/usr/lib/manokwari/system” ke sebuah tempat dan tinggalkan pesan di bawah sini. Contohnya manokwari-jp.tar.bz2 yang telah saya ubah sedikit.

Baru saja saya memperbaharui BlankOn saya dan ternyata ada Manokwari versi baru. Gagal untuk membuat tutorial yang lain, ha… ha… ha….

So, if you are real hacker, go and start hack Manokwari theme. Do it before BlankOn devs making things dull and uninteresting with a theme manager nor Manokwari IDE. 🙂

NB:

Ayolah, gunakan pengetahuanmu untuk hal yang positif. Jangan cuma menghancurkan saja.

CSS Zen Towards Enlightenment: The Beginning and Block Position

CSS Zen Towards Enlightenment: The Beginning and Block Position

by Jan Peter Alexander Rajagukguk 1 Comment

How could a smart card, C/C++, BASH, and Java developer like me ended up using CSS? At this new age, many technologies incorporating their framework with web technologies. One cool thing is taking web rendering into applications. So, for the sake of better application, we could make the layout painless using CSS. Oh, btw, to know CSS doesn’t mean must one must surge into PHP. 😀

I’m using BASH style scripting for variable, e.g. $VAR_NAME. Please replace the $VAR_NAME with suitable number.

For some experience, I’m using CSS to make the content widgetized. In order to have better alignment, I’m using

z-index

property for each of my content. Well, later if you need one.

Vertical Alignment

To play with vertical alignment, we just play with “top” position, “bottom” position, and “margin-top”.

Top

The CSS code:

position: absolute;
top: 0px;

Centering

The CSS code:

position: absolute;
top: 50%;
margin-top: -${$HEIGHT/2};
height: $HEIGHT;

Here’s the example:

position: absolute;
top: 50%;
margin-top: -128px;
height: 256px;

Bottom

The CSS code:

position: absolute;
bottom: 0px;

Horizontal

It share a common idea with vertical alignment.

position: absolute, left: $POS,  margin-left: -${$POS/2}.