Tips & Trik Minimisasi CSS ala CSS1K


Jika anda mengikuti perkembangan dunia persilatan, eh, maksud saya.. perCSSan, mungkin pernah mendengar CSS1K, apa itu? CSS1K merupakan sebuah situs yang diinisiasi oleh Jacob Rask (seorang software developer di Opera) yang dimaksudkan untuk mendemonstrasikan kemampuan layout CSS (mirip-mirip CSS Zen Garden) namun dengan ukuran yang hanya 1KB (mirip seperti kontes JS1K). Adalah sebuah tantangan tersendiri tentunya untuk bisa membuat sebuah visualisasi kreatif atas sebuah struktur HTML tertentu namun dengan jumlah karakter CSS yang dibatasi maksimum sebanyak 1 Kibibyte. Dengan 1 Kibibyte sama dengan 1024 bytes dan 1 karakter menghabiskan 1 byte, maka batasannya adalah 1024 karakter, sebuah jumlah yang sedikit dibandingkan ukuran stylesheet pada umumnya.

Diantara demo yang ada, "Typhon" by eswat, merupakan salah satu tema favorit saya

Setiap orang boleh berpartisipasi dengan mengirimkan tema CSSnya melalui email atau github, saya sendiri mensubmitnya lewat pull request di github ke https://github.com/jacobrask/CSS1K/ karena kebetulan punya akun github dan lebih praktis saja rasanya. Bagaimana demonya? bisa dilihat di situs CSS1K, silakan cari yang mana hehe.. 😀 Prototip CSS yang saya buat awalnya memang jauh lebih besar dari 1024 bytes, wajar karena banyak elemen yang distyle sedemikian rupa, sehingga akhirnya harus memutuskan untuk menghilangkan banyak rule yang sebenarnya menarik namun tidak terlalu berdampak pada konsep desain yang saya buat secara keseluruhan. Setelah itu dirasa tidak dapat dikurangi lagi namun masih belum memenuhi batas 1K, masih ada beberapa cara yang bisa dilakukan untuk meminimisasi ukuran CSS, berikut saya rangkumkan diantaranya:

1. Satukan beberapa selector yang sebagian besar atau seluruh nilai propertiesnya redundant

Sebagai contoh, lihat kesamaan rule antara kedua selector ini:

h1 {
    color: red;
    font-weight: bold;
    text-align: center;
}
h2 {
    color: blue;
    font-weight: bold;
    text-align: center;
}

dengan menyatukan kesamaannya, kita dapat menyederhanakannya menjadi:

h1, h2 {
    color: red;
    font-weight: bold;
    text-align: center;
}

h2 {
    color: blue;
}

2. Manfaatkan CSS shorthand untuk menyatukan properties setipe yang bisa disatukan

Beberapa shorthand antara lain font, background, margin, padding, list-style, dst. Sebagai contoh:

font-family: sans-serif;
font-size: 12px;
line-height: 20px;

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;

dapat disederhanakan menjadi cukup

font: 12px/20px sans-serif;

padding: 5px 10px 15px;

3. Gunakan selector equivalen yang terpendek yang paling mungkin

Ada banyak cara untuk menunjukkan sebuah elemen, apakah itu melalui id, class, atau attribute. Gunakan mana yang paling pendek diantara kesemuanya. Sebagai contoh misalkan ada sebuah elemen HTML seperti ini

<a id="faisalman" class="anchor" href="#">a link</a>

pada CSS kita dapat menunjukkan elemen ini dengan banyak cara

#faisalman {}
a.anchor {}
a[href="#"] {}
a[customattr="apapunlah"] {}

kita dapat memilih salah satu diantara kesemuanya, meskipun tidak selalu yang terpendek bisa dipilih karena tergantung lingkup selector yang diinginkan juga.

4. Hapus semicolon paling akhir di setiap rule

Titik koma di akhir bersifat optional, sehingga pada contoh di bawah ini

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

kita bisa hilangkan tanda titik koma di ujungnya menjadi

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

5. Hapus whitespace yang tidak perlu

Spasi dianggap sebagai sebuah karakter yang termasuk dalam 1KB, karena itu salah satu cara termudah untuk meminimisasi adalah dengan meminimalkan penggunaan spasi. Sebagai contoh

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

bisa dituliskan menjadi

h1{margin:0 5px;padding:0;border:0;outline:0;background:transparent}

namun perhatikan bahwa ada spasi yang tidak boleh diabaikan karena untuk memisahkan 2 nilai seperti pada property margin di atas.

6. Unit dengan nilai 0 tidak perlu menggunakan satuan px

Sebagai contoh

box-shadow: 0px 0px 1px #000;

cukup dituliskan dengan

box-shadow: 0 0 1px #000;

7. Angka 0 di depan titik boleh tidak dituliskan pada unit bertipe floating point

sebagai contoh

transition: all 0.1s linear;

cukup dituliskan tanpa angka 0

transition: all .1s linear;

8. Gunakan list-style dibandingkan list-style-type jika tidak menggunakan custom image atau posisi pada list

Masih berhubungan dengan CSS shorthand, jika kita hanya menset nilai tipenya

list-style-type: none;

cukup tuliskan shorthandnya saja

list-style: none;

9. Gantikan nilai none dengan 0 dimana bisa

Salah satunya pada property border, dimana kita dapat menggantikan

border: none;

dengan

border: 0;

karena pada property border, masih berhubungan dengan bahasan CSS shorthand, keduanya merujuk pada property yang berbeda, dimana

border: none;

merupakan kependekan dari

border-style: none;

sedangkan

border: 0;

merupakan kependekan dari

border-width: 0;

Namun karena pada akhirnya keduanya menghasilkan efek yang sama, menggunakan 0 jelas lebih singkat dari none bukan?

10. Persingkat nilai hexa warna hingga ke 3 digit terdekat

Untuk menghemat karakter kita bisa melakukan antara lain dengan mengubah ke nilai terdekat yang sama untuk setiap #RRGGBB sehingga cukup dituliskan #RGB, tentu saja dengan kompensasi berupa warna yang tidak sesuai asalnya lagi meskipun mirip. Sebagai contoh

color: #f3e597;

nilai tiap warna terdekatnya bisa kita tuliskan menjadi

color: #ffee99;

sehingga cukup dituliskan nilai ekuivalennya

color: #fe9;

Selain itu, yang menarik ada definisi warna yang cukup singkat yaitu warna merah dimana kita cukup menuliskan

color: red;

lebih singkat penulisannya (3 karakter) dibandingkan jika kita menuliskan nilai hexanya (4 karakter) yaitu

color: #f00;

11. kalau jumlah direct child hanya 2, kita bisa mengganti last-child selector dengan adjacent selector

Misalnya, jika a sebagai child dari li hanya berjumlah 2, maka

li > a:last-child { }

adalah equivalen dengan

li > a+a { }

12. kalau jumlah direct child hanya 1, cukup ganti tipe elemen child tersebut dengan tanda bintang saja

Karena tipe child sudah dapat dipastikan, kita tidak perlu menuliskannya, sehingga

article > section:hover { }

secara pasti bisa kita ganti dengan

article > *:hover { }

13. Dan lain-lain

Masih banyak lagi sebenarnya tips lain yang mungkin belum tercakup disini hanya saja belum kepikiran.. 😛 Akhirul kalam, mohon maaf kalau ada salah-salah kata, dan kalau ada yang ingin berbagi trik-trik lain dalam hal menghemat karakter CSS silakan tambahkan lewat kolom komentar dibawah 😉

Beberapa referensi dan tautan lain yang mungkin berhubungan dengan bahasan ini:
CSS1K @Github
– The 30 CSS Selectors you Must Memorize
– Introduction to CSS Shorthand

Iklan

This Blog is Not Dead –yet


Satu tahun lebih empat bulan sudah blog ini ditelantarkan, selama itu pula praktis blog ini hanya mengapprove komen-komen yang termoderasi dan belum bisa membalas satu-persatu selain karena memang sangat banyak, malas pula hehe 😀 kalau ada yang mau bales-balesin sih saya akan sangat berterima kasih dan sebagai gantinya akan saya berikan ucapan terima kasih 😆

Sebenarnya ingin mengupdate lagi, tapi.. apa daya? apa yaa? seperti dijelaskan pada judulnya, “Tunggu aksi saya!™”.

Buat Aplikasi MP3 Player Sederhana dengan Flash+AS2


Memanfaatkan kemampuan Flash yang dapat memainkan file MP3 dengan cara membuat Sound object (di AS2, favoritku ;p), saya pernah iseng2 membuat versi cupu dari aplikasi MP3 player.. BTW, tau Winamp kan? nah aplikasi semacam ini yang saya istilahkan sebagai MP3 player (versi kerennya sih 😀 ), yah.. meskipun yang pernah saya buat tersebut hasilnya masih berupa fitur-fitur dasar sederhana: load file-file MP3, next track, previous track, tampilan informasi MP3nya, dan tampilan playlist (supaya user bisa memilih file MP3 yang ingin dimainkan dengan mengkliknya di playlist).

Cara buatnya, Flash dibuat memanjang ke bawah (biar rada mirip Winamp), simpan 3 buah movieclip yang sama (dimana di dalamnya terdapat sebuah dynamic text dengan instance name “teks“) namun diberikan instance name berbeda yaitu “browse_btn“, “kanan_btn“, dan “kiri_btn” (ketiganya akan berperan sebagai tombol untuk load files, play next track, dan play previous track). Sebuah dynamic text dengan instance name “tulisan_txt” (yang akan menampilkan nama artist, judul, dan ukuran waktu MP3 berjalan dimana informasi ini diambil dari ID3 tags MP3nya). Di bawahnya lagi sebagai tampilan playlist digunakan sebuah List Component dengan instance name “cmp_playlist“. Menyusul kemudian, baris ActionScriptnya disimpan di frame:

import flash.net.FileReferenceList;

var playlist:Array = new Array(0);
var musik:Sound = new Sound();
var angka:Number = new Number(0);
var fileRefList:FileReferenceList = new FileReferenceList();
var listenerFileRefList:Object = new Object();
var listHandler:Object = new Object();

fscommand("showmenu", false);
kanan_btn.onPress = kanan;
kiri_btn.onPress = kiri;
browse_btn.onPress = browseFile;
browse_btn.teks.text = "load";
kiri_btn.teks.text = "prev";
kanan_btn.teks.text = "next";
fileRefList.addListener(listenerFileRefList);
cmp_playlist.addEventListener("change", listHandler);
cmp_playlist.setStyle("fontFamily", "corbel");
cmp_playlist.setStyle("fontSize", "12");
tulisan_txt.text = "load file MP3 terlebih dulu..\n (maaf, di versi cupu ini, file MP3nya mesti sefolder sama aplikasinya)";

listHandler.change = function(evt:Object){
    if(angka != evt.target.selectedItem.data){
		angka = evt.target.selectedItem.data;
		loadMusik();
	}
}

musik.onSoundComplete = function(){
	kanan();
}

musik.onLoad = function(success:Boolean){
	if (success){
		musik.start();
	}
	else{
		tulisan_txt = "salah load file";
	}
}

listenerFileRefList.onSelect = function(file:FileReferenceList){
	for(var i = 0; i < file.fileList.length; i++){
		var filePilihan = file.fileList[i].name;
		if(filePilihan.substr(-3, 3) == "mp3"){
			cmp_playlist.addItem({label:filePilihan, data:playlist.length});
			playlist.push(filePilihan);
		}
	}
	loadMusik();
}

function browseFile(){
	fileRefList.browse([{description:"Ingat: file MP3 sefolder saja! (maklum versi cupu)", extension:"*.mp3"}]);
}

function loadMusik(){
	musik.loadSound(playlist[angka], true);
}

function kanan(){
	if(playlist.length < 1){
		tulisan_txt.text = "load filenya dulu woi..\n(tombolnya di bawah playlist)";
	}
	else{
		angka += 1;
		if(angka >= playlist.length){
			angka = 0;
		}
		loadMusik();
	}
}

function kiri(){
	if(playlist.length < 1){
		tulisan_txt.text = "load filenya dulu woi..\n(tombolnya di bawah playlist)";
	}
	else{
		angka -= 1;
		if(angka <= 0)	{
			angka = playlist.length - 1;
		}
		loadMusik();
	}
}

this.onEnterFrame=function(){
	var posisi:String = musik.position.toString();
	var durasi:String = musik.duration.toString();
	var artist:String = musik.id3.artist.toString();
	var judul:String = musik.id3.songname.toString();
	var menitPlaying:String = Math.floor(posisi/60000) + ":" + Math.round((posisi/1000)%60);
	var menitTotal:String = Math.floor(durasi/60000) + ":" + Math.round((durasi/1000)%60);

	if(playlist.length >= 1){
		tulisan_txt.text = artist + " - " + judul + "\n" + menitPlaying + " / " + menitTotal;
	}
}

Preview

Mohon maaf kalau kodenya terlihat tidak efisien, nampak buggy, dan sulit dibaca algoritmanya acak-acakan 😀 yang penting fungsional dulu lah ya.. 8) Tekan Ctrl+Enter untuk melihat preview movie.

Namun ada keterbatasan yang cukup mengganggu dari aplikasi yang saya buat ini, yaitu:

Cuman bisa menjalankan file MP3 yang sefolder dengan SWF-nya, klo gak: undefined -__-‘

Zzzzz.. Mungkin saya salah cara ngakses file dari objek FileReferenceList? atau sistem sandbox objek Sound yang tidak memperbolehkan loadSound diluar direktori?.. Anybody knows how can I play MP3 files that’s stored anywhere, so it could be like a real MP3 player? please share… Any improvement welcome..

Bagi yang berminat untuk melihat contoh aplikasinya (.exe) sila unduh di http://www.box.net/shared/30010rjlmf

***

Referensi terkait:

  • http://flash-reference.icod.de/flash/net/FileReferenceList.html
  • http://flash-reference.icod.de/Sound.html
  • Tips Trik Flash, Tabloid PC-Mild Edisi 6/2010
  • Setting Proxy Pada Linux Console


    Nyobain yum atau command lainnya yang ngambil data dari internet tetapi selalu gagal karena terhalang proxy? bahkan meskipun di web browsernya sudah disetting dengan akun yang terautentikasi pula? nah itulah yang saya alami… (karena akses internet di kampus mesti make akun AI3 untuk bisa lewat si cumi)… solusinya? Secara umum, dari apa yang saya baca di salah satu thread forum yang membahas ini, akses dari console (command line di linux) memang tidak secara otomatis ikut tersetting. Untuk itu kita perlu menset akses proxy dengan menambahkan environment variable http_proxy pada shell, caranya adalah dengan mengetikkan command pada linux console:

    export http_proxy="http://namausernya:passwordnya@alamatproxyservernya:nomerportnya/"
    # Contoh:
    export http_proxy="http://faisalman:password@cache1.itb.ac.id:8080/"
    export ftp_proxy="http://faisalman:password@cache1.itb.ac.id:8080/"
    export no_proxy="localhost, 127.0.0.1, .itb.ac.id, 167.205.0.0/16"
    

    Sebaliknya, jika sudah kembali menggunakan akses internet yang direct connection (tidak menggunakan proxy), set ulang dengan command pada linux console:

    export http_proxy=""
    export ftp_proxy=""
    export no_proxy=""
    

    Untuk memeriksa settingan proxy mana yang sedang digunakan kita dapat melihatnya dengan mengetikkan command pada linux console:

    echo $http_proxy
    echo $ftp_proxy
    echo $no_proxy
    

    Alternatif lain, kita dapat mendefinisikan sendiri sebuah fungsi untuk mensetting akun proxy dengan menggunakan shell script sehingga nantinya tinggal mengetikkan nama fungsi pada shell dan mengisi variabel-variabel yang dibutuhkan. Caranya yaitu dengan buat sebuah file shell script di dalam folder /etc/profile.d berekstensi .sh jika menggunakan bash (yang paling umum digunakan di linux) atau .csh untuk c-shell, kita bisa mengecek jenis shell apa yang digunakan ketikkan perintah pada consolenya:

    echo $SHELL
    

    Misalkan file shell script yang akan dibuat namanya settinganproxy.sh, maka ketikkan perintah pada linux console:

    sudo nano /etc/profile.d/settinganproxy.sh
    

    Berikan baris script berikut pada file shell script tersebut dalam nano[1] text editor:

    # Setting akses proxy
    function setaksesproxy()
    {
      echo -n "proxy: "
      read -e alamatproxy
      echo -n "port: "
      read -e nomerport
      echo -n "username: "
      read -e namauser
      echo -n "password: "
      read -es proxypass
      echo -n "domain tanpa proxy: "
      read -e exclude
      echo ""
      export http_proxy="http://$namauser:$proxypass@$alamatproxy:$nomerport/"
      export ftp_proxy="http://$namauser:$proxypass@$alamatproxy:$nomerport/"
      export no_proxy="localhost, 127.0.0.1, $exclude"
    }
    
    # Clear proxy
    function setnoproxy()
    {
      export http_proxy=""
      export ftp_proxy=""
      export no_proxy=""
    }
    

    Sehingga di shell consolenya linux kita tinggal mengetikkan nama fungsinya saja dan mengisi input-inputnya sajah 😀

    Konfigurasi di atas menggunakan asumsi bahwa jaringan ber-proxy tidak digunakan setiap saat, atau menggunakan jaringan ber-proxy yang berbeda-beda, atau akun yang digunakan berbeda-beda. Sedangkan jika setting proxy dibutuhkan setiap saat, mungkin perlu juga untuk menyimpan akun dan password proxy pada user tertentu yaitu dengan mengedit file .bash_profile (file gak kelihatan karena hidden) yang terletak di home directory dari user yang diinginkan untuk diberikan autentikasi proxynya, tinggal ketikkan perintah pada linux console:

    nano /home/namauseryangdiinginkan/.bash_profile
    

    Berikan baris perintah berikut pada file tersebut:

    export http_proxy="http://namausernya:passwordnya@alamatproxynya:nomerportnya/"
    export ftp_proxy="http://namausernya:passwordnya@alamatproxynya:nomerportnya/"
    export no_proxy="domain-atau-IP-address-tanpa-proxy-misalnya-127.0.0.1"
    

    Footnote:
    [1] Nano merupakan program editor pada console linux yang biasanya sudah terinstall secara default, jika tidak ada silakan menggunakan editor favorit lain semisal vim, emacs, dll

    Akses Serial Port di Linux


    Tau program HyperTerminal kan? kalau komputernya Windows XP bisa dilihat di Start Menu > Accessories > Communications > HyperTerminal (dengan asumsi waktu nginstall windows paket instalasi standarnya diinstall semua).

    Ini nih HyperTerminal tuh.. (gambar ngambil dari gugel)

    Kalaulah dulu saya tidak mengambil mata kuliah yang ada praktikum pake HyperTerminalnya (lupa praktikum apaan :p) mungkin saya yang gaptek ini tidak akan tahu apa gunanya program misterius bernama HyperTerminal di Windows itu, dan dengar-denger katanya tidak dimasukkan lagi sejak munculnya Windows Vista dan Windows 7 hehe.. Padahal banyak juga loh device yang salah satu akses konfigurasinya lewat port serial RS-232. Lanjutkan membaca “Akses Serial Port di Linux”

    Beberapa Masalah Install di Fedora dan Solusinya


    Beberapa hari yang lalu saya coba menginstall Fedora (distro linux yang merupakan kelanjutan Redhat versi komunitas dan termasuk salah satu distro yang populer)  lewat flashdisk dengan cara membuat Live USBnya dari file ISO pake UNetbootin[1] (ISO imagenya bisa didapat di http://fedoraproject.org/en/get-fedora-all). ISO yang saya gunakan Fedora-12-x86_64-Live-KDE.iso, kenapa Fedora 12? karena itu versi stable release yang terbaru saat ini (Maret 2010) dengan Fedora 13 yang masih versi beta, x86_64 karena laptop saya yang prosesornya Core2Duo sudah mendukung 64-bit, K desktop environment karena saya suka tampilannya KDE 😀 ..

    Lewat installer dengan GUI yang intuitif akhirnya ia berhasil saya install ke laptop dengan cepat dan menyenangkan. Namun.. jreng3x.. setelah selesai menginstall Fedora di laptop, saya menemui beberapa problem.. wah kumaha yeuh? but it’s ok, tinggal lihat panduan dokumentasinya[2] saja kan? atau kalaupun tidak berhasil biasanya solusinya bertebaran di banyak situs[3] dan forum[4], tinggal googling sajah[5]. Kecuali beberapa masalah yang spesifik distro, biasanya untuk distro linux apapun solusi masalahnya hampir sama. Hanya saja, untuk tipe komputer berbeda ada kemungkinan masalah yang timbul berbeda pula karena perbedaan konfigurasi hardware, jadi kadang perlu tau juga hardware yang bermasalah tipenya apa, biar gampang googlingnya.

    Berikut list problem setelah saya nginstall Fedora di laptop Axioo saya:

    1. Resolusi Layar
    Setelah diinstall, resolusi layar di laptop tidak secara otomatis diset ke mode WXGA (1280×800), di System Settings > Display hanya ada 2 pilihan resolusi yaitu 640×480 dan 800×600.. wadduh.
    Saya bingung dan cari-cari di google ternyata solusinya mudah, Lanjutkan membaca “Beberapa Masalah Install di Fedora dan Solusinya”

    Facebook Chat via Pidgin


    Teman sebelah (kalau ada) sedang buka Facebook juga kan? ya ya ya, tidak heran, berdasarkan catatan Alexa [1], Facebook merupakan situs web yang paling populer di Indonesia. Dari sekian banyak fasilitas yang ada, salah satu fitur yang digemari di Facebook adalah kemampuan chat di dalam tampilan webnya langsung, meskipun kadang cukup mengganggu. Nah, bagaimana caranya mengaktifkan Facebook Chat di luar situs webnya?

    Mungkin ada 1001 cara supaya bisa menggunakan fitur Facebook Chat di luar situs Facebook lewat aplikasi-aplikasi pihak ketiga apapun itu.  Pada kesempatan ini saya mencoba salah satu IM yang banyak digunakan selain YM (Yahoo! Messenger), yaitu Pidgin (yang dulu namanya GAIM).

    Ada banyak cara juga supaya bisa masang Facebook Chat di Pidgin, antara lain:

    Cara 1:
    Pasang plugin Pidgin-Facebook Chat[2]
    Download dan Install sahaja pluginnya di http://code.google.com/p/pidgin-facebookchat/downloads/list

    Cara 2:
    Menggunakan protokol XMPP (Jabber) [3]
    – Buka program Pidgin
    – Klik menu “Accounts”
    – Pilih menu “Manage Accounts”
    – Klik tombol “Add”
    – Settingan di bagian tab “Basic”:

    * Protocol: XMPP
    * Username: <masukin username Facebook>
    * Domain: chat.facebook.com
    * Resource: Pidgin
    * Password: <masukin password Facebook>
    * Local alias: <masukin nama Facebook>

    – Settingan di bagian tab “Advanced”:

    * Connect port: 5222
    * Connect server: chat.facebook.com
    * Hilangkan ceklis di pilihan “Require SSL/TLS”

    Untuk melihat settingan jelasnya, login dulu ke Facebook, buka http://www.facebook.com/sitetour/chat.php kemudian pilih Instant Messengernya, apakah Pidgin, Adium, iChat, dll.

    Belum punya Pidgin? unduh sahaja installernya di http://www.pidgin.im/

    ***

    Referensi:
    [1] http://www.alexa.com/topsites/countries/ID
    [2] http://code.google.com/p/pidgin-facebookchat/
    [3] http://www.facebook.com/sitetour/chat.php

    1001 Tips & Trik Blog WordPress


    Sebagai pengguna WordPress, mungkin pernah suatu ketika kita melihat blog WordPress lain memiliki fitur tertentu yang keren atau justru fitur-fitur dasar hanya kita tidak tahu caranya. Misalkan “gimana cara nyisipin video YouTube di antara posting?” “gimana caranya posting lewat HP? kalau via e-mail gimana?” atau pertanyaan “apa aja sih kode smiley (emoticon) default di WP?” dan semacamnya.

    Sebelum masuk ke bahasan selanjutnya, istilah ‘WordPress’ disini perlu diperjelas terlebih dahulu maknanya apakah WordPress sebagai sebuah blog hosting (seperti Blogger, Multiply) atau WordPress sebagai sebuah aplikasi web CMS (seperti Joomla, Drupal). Untuk itu kita perlu membedakan “blog wordpress” yang akan kita oprek termasuk yang mana:

    1. Blog pada WordPress.com

    2. Blog selain di WordPress.com yang menggunakan WordPress sebagai CMS-nya

    Mengapa perlu dibedakan? karena tips dan trik untuk blog-blog tipe pertama memiliki batasan-batasan yang tidak terdapat pada tipe kedua.

    Back to topic.

    Sedikit perkenalan, WordPress merupakan suatu aplikasi web CMS berbasiskan PHP-MySQL yang dibuat oleh Matt Mullenweg dan kawan-kawan yang tergabung dalam Automattic. Sementara itu sebuah kaidah logis mengatakan bahwasanya yang paling tahu baik seluk beluk suatu ciptaan adalah penciptanya. Maka petunjuk yang resmi dan bisa dijamin kebenarannya tentu adalah petunjuk yang dikeluarkan oleh pencipta dari ciptaan tersebut, dalam hal ini petunjuk berupa official support website. Dari itu kita dapat merujuk ke http://en.support.wordpress.com/ untuk blog-blog yang termasuk tipe pertama pada pembagian di atas,  sedangkan untuk blog-blog yang termasuk tipe kedua dapat melihat petunjuk resminya di http://codex.wordpress.org/Main_Page.

    Selamat mengeksplore 1001++ fitur menarik dari sang pemenang The Overall Best Open Source CMS Award 2009 ini. 😉

    Wassalam,

    F4154LMAN

    Nginstall openSUSE Linux via Live USB Flashdisk


    Lama tak bersua dengan keluarga ‘pinguin’, kali ini asistenku sedang bersama salah satu dari mereka, ‘si bunglon’. Anehnya, asistenku yang 2 tahun lalu biasanya rewel (kecuali saat hinggap di ‘jendela’ dan distro kaos cd bawaannya), namun kali ini ia nampak oke-oke saja. Padahal tahapan yang ia lewati relatif sama, hanya beda medium installnya saja dulu live CD sekarang live USB.

    “Wah, keluarga pinguin makin keren aza”, pikirku.

    Kronologis prosesi mengganti bangkai bingkai ‘jendela’ hingga ke jenjang adopsi ‘si bunglon’:

    1. Download ISO Live CD-nya
    unduh dimari: http://software.opensuse.org/ (saat tulisan ini ditulis, yang terbaru adalah versi 11.2)

    2. Tuliskan ISO image ke medium (dalam hal ini USB Flashdisk)
    jika dari windows, gunakan software ‘Image Writer for Windows’ https://launchpad.net/win32-image-writer untuk mengkopi image ISO sebelumnya tersebut ke dalam flashdisk. Panduan lengkap untuk buat Live USB stick bisa dilihat lebih lanjut di http://en.opensuse.org/Live_USB_stick

    3. Setting BIOS untuk boot via USB
    biar bisa booting dari flashdisk.. setiap motherboard menunya beda, tapi pokoknya cari saja menu yang mengatur boot priority di BIOS.

    4. Jalankan live USB
    Cihuy, sukses.. kedetek semua hardwarenya, kali ini tanpa perlu parameter apa-apa 😀

    5. Pilih menu “Install”
    Tampak mengkilap! bungkus.. install langsung! dan inilah hasilnya:

    KDE 4, lebih stylist & fresh.. sayang asistenku kartu grafisnya tidak disupport 3d acc di luar jendela, hingga belum bisa merasakan dahsyatnya Compiz

    Selanjutnya, yang terjadi terjadilah.. one-click-install-nya YaST di openSUSE yang out-of-the-box dengan repositorynya yang lengkap: http://en.opensuse.org/Package_repositories tinggal dipilih.. “dipilih.. dipilih.. sayang anak.. sayang anak..”, begitu barangkali kata-katanya kalau ada tukang dagang.

    “Sejak Lanjutkan membaca “Nginstall openSUSE Linux via Live USB Flashdisk”

    12-Pas-12-Pas-an


    Ngomong-ngomong soal game, kita yang kebanyakan berperan sebagai konsumen ini sekali-sekali mungkin perlu berpikir untuk menjadi produsen. Melihat game saat ini sudah menjadi industri yang cukup menjanjikan dengan potensi milyaran dolar [1]. Tertarik membuat game sendiri? mulai dari yang sederhana dulu, yuk mari.. 8)

    Pada kesempatan ini game yang akan dibuat adalah latihan eksekusi penalti dari titik putih atau terkadang diistilahkan tendangan “12 pas” yang juga menjadi judul dari game ini. Sebelumnya unduh terlebih dulu gamenya di http://www.box.net/shared/qqdiij7gn1 untuk mencicipi (cukup 1.4 MB saja). Gamenya cupu abizz memang  dibandingkan buatannya game developer, tapi untuk mencapai langkah ke-1000 selalu diawali dengan langkah pertama, kan? 😉

    Sekarang masuk ke pertanyaan, bagaimana cara membuat permainannya? Lanjutkan membaca “12-Pas-12-Pas-an”