Kompres dan Tata Ulang Kode CSS, HTML dan JavaScript Kalian dengan Alat Ini
Saya membuat proyek baru berupa situs web berisi kumpulan alat untuk mengompres kode HTML, CSS dan JavaScript secara daring. Saat ini sudah tersedia alat pengompres kode HTML, CSS, JavaScript dan JSON. Untuk ke depannya mungkin akan Saya tambahkan alat-alat kompresi yang lain. Halaman web alat dapat kamu kunjungi melalui tautan https://minify.js.org
Selain alat pengompres, alat untuk menata ulang kode-kode yang sudah dikompres juga tersedia. Saat ini sudah tersedia alat penata kode HTML, CSS, JavaScript dan JSON. Halaman web alat dapat kamu kunjungi melalui tautan https://tidy.js.org
Berikut ini adalah kode-kode pihak ke tiga yang Saya gunakan untuk membuat alat-alat tersebut:
Sebelumnya Saya pernah membuat situs web kumpulan alat serupa pada repositori https://github.com/taufik-nurrohman/mini-web-tools. Tapi dengan adanya situs web yang baru, repositori tersebut kemungkinan besar akan Saya arsipkan. Silakan beri komentar dan saran mengenai alat-alat ini, simpan tautan ke penanda buku, dan bagikan ke teman-teman yang lain kalau kamu merasa bahwa alat-alat ini bermanfaat untuk kamu dan untuk mereka. Terima kasih ♥
Alat ini digunakan untuk membuat image map palsu menggunakan elemen HTML. Beberapa orang lebih memilih menggunakan yang palsu karena lebih fleksibel. Pada intinya alat ini digunakan untuk mempermudah di dalam merancang ukuran dan posisi lokasi pada tiap bagian di dalam gambar. Mengenai elemen apa yang akan Anda gunakan dan bagaimana Anda memodifikasi tampilannya, itu terserah Anda:
Bagi para pembaca yang belum mengerti apa itu image map, kalian bisa memulai mempelajarinya di sini. Dan berikut ini adalah contoh gambar yang dihasilkan dari alat yang Saya buat di atas. Coba letakkan pointer mouse Anda di atas wajah-wajah atau badan tokoh kartun di bawah ini untuk mengetahui nama mereka:
Cara Menggunakan
Ambillah sebuah foto atau gambar dimana di dalamnya terdapat beberapa bagian yang memerlukan detail khusus. Misalnya foto keluarga atau peta negara, lalu unggah foto atau gambar tersebut pada blog Anda. Ambil URL gambarnya, kemudian letakkan di dalam input URL yang tersedia. Setelah itu klik tombol Create. Klik tombol Add Location untuk menambahkan lokasi/koordinat baru pada gambar. Geser dan ubah ukurannya sesuai keinginan. Kode HTML akan tampil di bagian area teks sebelah kanan.
Alat ini digunakan untuk menggenerasikan kode-kode karakter spesial HTML yang bisa Anda gunakan untuk menghiasi tulisan atau untuk keperluan-keperluan lain seperti penambahan ikon pada menu tanpa gambar dan sebagainya. Cukup tentukan angka awal dan banyak karakter yang akan ditampilkan kemudian tekan tombol Show the Code List untuk menampilkan deret karakter beserta kodenya.
Anda juga bisa menggenerasikan kueri URL berdasarkan deretan simbol yang ditampilkan. URL ini bisa Anda gunakan sebagai URL berbagi atau URL bookmark untuk karakter-karakter favorit Anda:
Kalkulator CSS Grid adalah alat kecil untuk merancang layout grid dengan cepat. Cara menggunakannya mudah. Cukup tentukan jumlah kolom dan jarak antar kolom, kemudian kode CSS dan markup HTML akan muncul di bawahnya:
Belakangan ini Saya sedang cukup antusias mempelajari regex (Regular Expression) meski terkadang Saya sendiri tidak tahu mengapa sampai pada akhirnya Saya sadari bahwa dengan ini Saya bisa menciptakan alat-alat sederhana seperti alat kompresi CSS dan dekompresi CSS. Alat ini masih dalam tahap percobaan, namun sudah bisa dipakai dalam skala kecil untuk mengatasi cukup banyak model penulisan kode CSS yang sudah pernah Saya temui selama ini. Jika Anda sempat mencoba melihat kode sumbernya, Anda akan terkejut bahwa mesin alat ini ternyata jauh lebih sederhana dari apa yang pernah Anda bayangkan:
Jika Anda ingin Menambahkan Alat ini ke dalam IFrame
<iframe src="//cdn.rawgit.com/tovic/mini-web-tools/master/converter.css.html" style="width:98%;display:block;margin:0px auto 0px;height:500px;"></iframe>
Pembaharuan 17 Mei 2012
Menambahkan beberapa opsi tambahan dan mengubahnya dari tool JavaScript di bawah framework jQuery menjadi murni JavaScript, sehingga kodenya menjadi jauh lebih ringkas.
Sekedar memperbaharui Generator Tombol CSS3 Saya. Sekarang Saya buat menjadi lebih sederhana namun dengan sistem otomatisasi yang lebih baik. Fitur hold hover session sudah digantikan dengan otomatisasi berdasarkan posisi pointer terhadap editor warna pada kolom :hover. Memperbaiki beberapa kesalahan, dan mencoba untuk menangani bug Opera dan IE9 yang tidak bisa menjalankan widget jQuery UI Slider pada versi jQuery UI lama. Kabar baiknya, alat ini bukan hanya bisa digunakan sebagai alat perancang tombol CSS3, tapi juga bisa digunakan sebagai generator CSS3 Gradient yang kompatibel.
Karena beberapa proses revisi yang Saya lakukan, alat ini sudah tidak bisa diunduh lagi. Tapi jika Anda tetap ingin mengunduh, Anda bisa melakukan itu dengan mudah, yaitu dengan cara mengeklik kanan pada halaman demo, kemudian pilih perintah Save as... ⇒ Web Page Complete
Saya sudah mengetes alat ini pada peramban versi terakhir dari Opera, Firefox and Chrome. Termasuk IE9 dan Safari.
Enty Tool · Konversi Karakter Spesial HTML menjadi Kode
Kesulitan mengonversi simbol dan karakter khusus HTML menjadi kode? Pada awalnya, bagi Anda mungkin mudah untuk menuliskan simbol-simbol di dalam artikel karena Anda bisa melakukan itu dengan cara copy-paste simbol ke lembar editor. Tapi jika Anda sedang berurusan dengan file berupa HTML, simbol-simbol tersebut tidak bisa ditempelkan begitu saja di dalamnya. Anda harus mengonversinya menjadi kode numerik/HEX:
Bukan hanya generator karakter khusus, di situ juga terdapat tautan-tautan menuju daftar simbol, Text Art dan semua hal yang berhubungan dengan teks. Untuk mengonversi simbol, pertama-tama masuk dulu ke halaman daftar simbol (klik di sini).
Salin salah satu simbolnya, kemudian tempelkan di formulir Enty pada Enty Tool (klik di sini). Terakhir klik tombol Convert. Nah, Sekarang simbol sudah berhasil dikonversi menjadi kode ☻
Enty Tool
Banyak hal yang membuat Saya terkesan dengan hasil-hasil karyanya. Siapa yang tidak merasa kagum dengan ini:
Lipsum-UI is a light weight Lorem Ipsum generator. This generator wil generate Lorem Ipsum text for use as dummy texts on webpages. Just do what you want in the options panel and you'll see the magic. Say thank's to Mottie who have helped me to complete this project and to resolve my problems about my limited JavaScript capabilities :p
Demo & Download
You can view the demo and download it by clicking the button below:
Because of some revisions that I have done, this tool may not be downloaded anymore. But, if you still want to download, you can still do it easily by right clicking on the demo page, then choose Save as… ⇒ Web Page Complete
CSS3 Button Generator - V2 is the reconstruction of my first application, CSS3 Button Generator. Now, I add some new features that will further expand your imagination: Three options gradients and color-stop gradient to follow the development of CSS3. 'Holding Hover Session' for easy editing, external class modifiers and others:Featured Option
I have two versions of the application language, English and Indonesian. This is a very lightweight application and simple to use. Have fun!
Aplikasi ini sebenarnya adalah pengembangan sederhana yang Saya lakukan dari konsep CSS3 Button Maker buatan Chris Coyier. Di sini Saya telah menambahkan beberapa elemen variabel yang sangat penting bagi pengguna yang tidak dihadirkan dalam versinya. Aplikasi ini sangat bermanfaat bagi Anda yang tidak suka menulis kode, atau bahkan bagi yang tidak mengerti sama sekali. Anda bisa mengunduh aplikasi ini dengan cara mengeklik tombol ini:
Cukup dengan mengatur variabel-variabelnya sampai Anda mendapatkan hasil tampilan button yang menurut Anda paling baik. Dengan apikasi ini, bukan hanya satu atau dua konsep Tombol CSS3 yang bisa Anda buat, namun puluhan bahkan ratusan konsep!
Letakkan kode CSS yang tergenerasi ke dalam kode HTML templatemu, kemudian untuk memanggil kode CSSnya jangan lupa untuk menambahkan atribut berupa class="tombol" pada elemen yang Anda buat seperti ini:
<button class="tombol">Nama Tombol Anda</button>
Semoga aplikasi ini dapat membantu mempermudah pekerjaan Anda.
