Konversi Em ke Pixel dan Point

January 22, 2019 | HTML, Technical Stuffs, Web Dev | , , ,

Beberapa waktu terakhir saya lebih banyak bermain di front end sehingga lebih sering bersinggungan dengan HTML, CSS, dan JavaScript.

Salah satu hal yang agak tricky adalah penggunaan satuan em, px (pixel), dan pt (point) saat menentukan lebar atau tinggi suatu obyek. Agar mudah diingat, berikut ini contekan yang saya gunakan:

PxEmPersen (%)Pt
6px0.375em37.5%5pt
7px0.438em43.8%5pt
8px0.5em50%6pt
9px0.563em56.3%7pt
10px0.625em62.5%8pt
11px0.688em68.8%8pt
12px0.75em75%9pt
13px0.813em81.3%10pt
14px0.875em87.5%11pt
15px0.938em93.8%11pt
16px1em100%12pt
17px1.063em106.3%13pt
18px1.125em112.5%14pt
19px1.188em118.8%14pt
20px1.25em125%15pt
21px1.313em131.3%16pt
22px1.375em137.5%17pt
23px1.438em143.8%17pt
24px1.5em150%18pt

Catatan ini berfungsi sebagai catatan pribadi agar lebih mudah saat ingin saya tengok lagi.

No comment


From Zend to Komodo

January 8, 2008 | Web Dev

Komodo Edit

Setelah beberapa saat menggunakan Zend Studio gratisan (hadiah kontes) untuk kebutuhan koding sehari-hari, akhirnya saya putuskan untuk beralih ke Komodo Edit. Menurut saya, Zend Studio terlalu berat. Bahkan untuk mesin saya yang RAM-nya sudah 1gb. Selain itu, pemakaiannya juga kurang nyaman.

Namun sepertinya pemakaian Komodo Edit ini nanti tidak akan bertahan lama karena saya sedang menunggu rilis stabilnya Open Komodo, Komodo Edit versi open source. Alasan saya memilih versi open source karena saya pikir di situ akan lebih banyak pengembangan-pengembangan di beberapa bagian yang banyak dibutuhkan oleh developer web. Bukankah dengan semakin banyak kepala, semakin banyak juga fitur yang ditawarkan?

Bagi Anda developer, teks editor/IDE apakah yang Anda gunakan dalam keperluan koding sehari-hari?

24 comments


Link berubah jadi form select

December 28, 2007 | Web Dev

Pada website yang sedang saya kerjakan, terdapat sebuah tombol bernama quick access yang mirip quick jump, ato apalah namanya. Gunanya untuk menuju suatu halaman dengan cepat. Defaultnya berupa link biasa dan tadinya pengen ketika di-klik muncul semacam drop down menu. Namun karena otak saya mepet dan takut ntar malah mengacaukan CSS yang ada, maka saya putuskan untuk bermain dengan javascript saja.

Skrinsyut
Seperti gambar di atas, begitu link Access Rapide di klik, maka otomatis berubah menjadi form select.

Ternyata pembuatannya cukup mudah lho. Cukup siapkan script sebagai berikut:

Ini adalah script HTML untuk link-nya:
[code] Access Rapide
[/code]

Lalu script berikut akan menjadi isi/pengganti dari link di atas:
[code]

[/code]

Dan script berikut untuk membantu keajaiban itu terjadi.
[code]
[/code]

Semoga bermanfaat ^_^

Update:
Berikut saya buatkan sebuah sampel agar bisa lebih mudah dipahami

53 comments


Batas kebebasan pemakai CMS

October 19, 2007 | Web Dev


Jika Anda seorang developer web, pasti pernah mengalami repotnya user yang komplain tentang tampilan web dia yang berantakan setelah dia merubah font-family atau membuat tabel menggunakan WYSIWYG editor seperti TinyMCE atau FCKEdit.

Karena itu saya lalu berpikir, apa perlu user diberi kebebasan sejauh itu? Kebebasan mengobrak-abrik HTML yang tentu saja bisa sangat berpengaruh dengan desain yang sudah kita buat dengan seksama. Lalu apa yang harus saya lakukan?

Saya berpikir untuk menghilangkan saja beberapa panel di TinyMCE, terutama tabel dan font-face/family, formating dan styles. Pada gambar di atas, cukup baris pertama saja yang perlu ada. Selain itu, hanya akan muncul by request.

Karena sudah dibuat CSS untuk mengatur layout dan font yang digunakan, maka tidak seharusnya user merubah font yang digunakan. Termasuk font-size, karena bisa mempengaruhi desain yang sudah kita buat dengan susah payah.

Ada yang pernah bermasalah juga dengan hal seperti ini? Silahkan tinggalkan komentar dan kita bahas bersama.

17 comments


Sebundel atau eceran?

September 26, 2007 | Web Dev

Tulisan kali ini bukan tentang trik dagang, karena saya memang bukan pedagang dalam arti sesungguhnya. Kali ini saya hanya ingin membahas tentang web development, khususnya PHP programming.

Sebelum memulai belajar PHP, pada umumnya calon pelajar bingung cara instalasi Apache, MySQL dan PHP. Eh salah, bukan cara instalasi tapi cara konfigurasi agar ketiga makhluk itu bisa berjalan berdampingan dalam suatu harmoni. Saya mo cerita pengalaman pribadi saja, bukan untuk mempengaruhi pikiran Anda ^_^

Pertama-tama, saya make PHPTriad. Saya dah mantab waktu itu, dan merasa it’s the best. Lalu versi PHP yang baru muncul, dengan setingan default adalah REGISTER GLOBAL = OFF. Alhasil, saya kelabakan merubah script-script saya (meskipun ada teknik kasar untuk merubah variabel dari $_POST menjadi variabel biasa). Jadi karena alasan itulah, saya melarang Anda menggunakan PHPTriad, agar Anda terbiasa programming di lingkungan REGISTER GLOBAL = OFF. Lagipula, PHPTriad udah lama mati.

Lalu setelah merasa cukup berpengalaman, saya bermaksud menginstal PHP, Apache dan MySQL secara terpisah-pisah di mesin Zenwalk saya, biar dianggap keren gitu. Jam 8 malam saya mulai, compile dari source untuk tiap makhluk. Setelah kompilasi yang cukup lama (karena kecepatan mesin saya yang mengerikan) akhirnya 10-an malam proses instalasi selesai.

Tahap selanjutnya adalah konfigurasi agar ketiga makhluk itu bisa akur. Was.. wus.. jreng.. jreng.. Jam 5 pagi proses selesai.

Wait, jam 5 pagi? Betul sodara-sodara, saya menghabiskan waktu 7 jam untuk seting konfigurasi agar mereka bisa ngobrol satu sama lain. Betapa dodolnya otak saya T_T

Jam 5.30-an, meteran listrik tiba-tiba anjlok dan waktu itu saya belum punya UPS. Ah ngga apa-apa, saya pikir. Komputer saya hidupkan lagi, lalu coba jalankan MySQL dan Apache. Ternyata ada file yang corrupt!!

Karena udah capek setelah semalaman ngoprek, saat itu juga saya hapus semua instalasi PHP, Apache dan MySQL menggunakan pkg-tool. I was really mad at that time. Dan saya kembali memikirkan suatu hal, saudara-saudara.

Bahwa saya pengen belajar programming, bukan belajar maintain webserver. So saya putuskan untuk make bundelan yang siap pakai. Dan pilihan jatuh ke XAMPP. Cukup ekstrak, jalankan, tulis kode, eksekusi, done!.

13 comments


Best view in bla.. bla.. bla..

September 18, 2007 | Web Dev

Anti IE

Untuk melawan slogan “Best view in Internet Explorer“?
Ataukah –maaf– developernya bingung dengan perilaku IE yang tidak sesuai web standard?

28 comments


Transparasi file PNG di Internet Explorer

August 2, 2007 | Web Dev

Untuk gambar yang mengandung bidang transparan, umumnya kita menggunakan file gambar berformat GIF. Namun sayangnya GIF hanya bisa transparan saat berada di atas satu warna yang solid. Ketika berada di atas dua warna atau gradien, GIF akan meninggalkan halo seperti bercak-bercak yang tidak sedap dipandang.

Untuk mengatasi hal ini, kita bisa beralih ke file PNG yang lebih ampuh untuk gambar yang mengandung transparansi. Namun sayangnya, Internet Explorer tidak mendukung transparansi PNG, duh! Alih-alih transparan, malah akan muncul warna aneh yang tentu saja akan menghancurkan desain.

Sudah lama saya mengetahui bahwa penyakit ini bisa disembuhkan dengan javascript, namun baru sekarang menyempatkan diri mencari obatnya setelah tadi kangdiman bertanya kepada saya. Ok berikut ini obatnya:


Script tersebut diapit dalam IF tujuannya adalah agar hanya dijalankan saat dibuka menggunakan Internet Explorer. Eh ngomong-ngomong, sandal saya di bawah masih jelek yah di IE ^o^

16 comments


Ajax-Ajax kita doong

July 27, 2007 | Web Dev

Beberapa waktu ini, di suatu tempat ada perdebatan menarik sual definisi AJAX. Ga puas dengan perdebatan tersebut, maka iseng saya lemparkan pertanyaan ke milis resmi PHP.

Dear All,
We all knew that AJAX is an achronym of Asynchronous Javascript And XML.
When I use another data format like YAML or CSV, will it still be called as AJAX?
Or just “yet another asynchronous method”?

Kemudian muncul beberapa jawaban sebagai berikut:

Jay Blanchard ([email protected]***et.com):
AJAX makes a good catch-all term since the API is called XMLHttpRequest
and the API can be used with all sorts of text data. The asynchronous
method is still JavaScript (or is it ECMAScript?). Its original intent
was XML data (just text with mark-up). Besides, AJAP (Asynchronous
JavaScript and PHP) just doesn’t sound right somehow.

AJAH – and HTML
AJAA – and ASP
AJA.N – and .NET
AJAC – and CSV
AJAT – and TXT
AJACF – and Cold Fusion
AJAPL – and PERL

And so on…..

Satyam ([email protected]***am.com.ar) :
Just let the X stand for ‘unknown’.

Robert Cummings ([email protected]***inn.com) :
Yeah, all of the above fall under the AJAX umbrella and are commonly
just referred to as AJAX.

Cheers,
Rob.

Well, tentunya pendapat di atas bukan merupakan suatu vonis tentang apa itu AJAX, saya hanya ingin berbagi saja.

Maaf, alamat email sengaja saya samarkan biar mereka ga keserang sepam he.he.

17 comments


Stop using PHPTriad!

July 2, 2007 | Web Dev

Bagi Anda yang berencana untuk belajar PHP, saya sarankan untuk tidak menggunakan PHPTriad. Kenapa? Karena sudah kedaluarsa!

55 comments


Google Adsense ternyata menggunakan IFRAME

June 29, 2007 | Web Dev

Setelah lumayan penasaran bagaimana Google bisa menampilkan konten yang berasal dari domain lain menggunakan javascript, pagi ini terjawab sudah rasa penasaran saya.

Tadinya saya bermaksud menggunakan CSS untuk tidak menampilkan iklan yang dipasang oleh pihak hosting gratisan menggunakan iframe {display:none;}, lha ternyata semua iklan dari AdSense ikut menghilang ha.ha.

14 comments