Simple Text Editor Library

Editor Teks untuk Format Markdown

Pembuatan perpustakaan JavaScript ini dikhususkan untuk menangani aplikasi-aplikasi editor teks berbasis elemen <textarea>. Target awal ingin Saya jadikan sebagai pendukung aplikasi editor teks Markdown, tapi Anda juga bisa menggunakan ini untuk membuat aplikasi editor teks sekelas MarkItUp! jika mau:

Unduh Berkas Lihat Dokumentasi

Demo

• HTML Text Editor
• Markdown Text Editor
• Functions Test

NB: Butuh judul posting berbahasa Indonesia untuk ini.

Generator HTML Peta Gambar Palsu

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:

Coba Alat

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.

Generator Karakter Spesial HTML/Unicode

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:

Coba Alat

Kompresor HTML

Sebuah alat kecil untuk mengompres kode HTML. Paste beberapa potong kode HTML kemudian klik tombol kompresi:

Coba Alat

Kalkulator CSS Grid

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:

Coba Alat

Portable CSS3 Button Generator

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.

Lihat Demo Unduh Berkas

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:

Simbol	Kode
☮	☮
♔	♔
★	★
✉	✉
♫	♫

Text Symbols adalah situs yang tepat untuk mengatasi masalah karakter simbolis yang tidak lazim: http://text-symbols.com/tools/escape-chars/

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:

``````¶0````1¶1_```````````````````````````````````````
```````¶¶¶0_`_¶¶¶0011100¶¶¶¶¶¶¶001_````````````````````
````````¶¶¶¶¶00¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶0_````````````````
`````1_``¶¶00¶0000000000000000000000¶¶¶¶0_`````````````
`````_¶¶_`0¶000000000000000000000000000¶¶¶¶¶1``````````
```````¶¶¶00¶00000000000000000000000000000¶¶¶_`````````
````````_¶¶00000000000000000000¶¶00000000000¶¶`````````
`````_0011¶¶¶¶¶000000000000¶¶00¶¶0¶¶00000000¶¶_````````
```````_¶¶¶¶¶¶¶00000000000¶¶¶¶0¶¶¶¶¶00000000¶¶1````````
``````````1¶¶¶¶¶000000¶¶0¶¶¶¶¶¶¶¶¶¶¶¶0000000¶¶¶````````
```````````¶¶¶0¶000¶00¶0¶¶`_____`__1¶0¶¶00¶00¶¶````````
```````````¶¶¶¶¶00¶00¶10¶0``_1111_`_¶¶0000¶0¶¶¶````````
``````````1¶¶¶¶¶00¶0¶¶_¶¶1`_¶_1_0_`1¶¶_0¶0¶¶0¶¶````````
````````1¶¶¶¶¶¶¶0¶¶0¶0_0¶``100111``_¶1_0¶0¶¶_1¶````````
```````1¶¶¶¶00¶¶¶¶¶¶¶010¶``1111111_0¶11¶¶¶¶¶_10````````
```````0¶¶¶¶__10¶¶¶¶¶100¶¶¶0111110¶¶¶1__¶¶¶¶`__````````
```````¶¶¶¶0`__0¶¶0¶¶_¶¶¶_11````_0¶¶0`_1¶¶¶¶```````````
```````¶¶¶00`__0¶¶_00`_0_``````````1_``¶0¶¶_```````````
``````1¶1``¶¶``1¶¶_11``````````````````¶`¶¶````````````
``````1_``¶0_¶1`0¶_`_``````````_``````1_`¶1````````````
``````````_`1¶00¶¶_````_````__`1`````__`_¶`````````````
````````````¶1`0¶¶_`````````_11_`````_``_``````````````
`````````¶¶¶¶000¶¶_1```````_____```_1``````````````````
`````````¶¶¶¶¶¶¶¶¶¶¶¶0_``````_````_1111__``````````````
`````````¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶01_`````_11____1111_```````````
`````````¶¶0¶0¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶1101_______11¶_```````````
``````_¶¶¶0000000¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶0¶0¶¶¶1````````````
`````0¶¶0000000¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶1`````````````
````0¶0000000¶¶0_````_011_10¶110¶01_1¶¶¶0````_100¶001_`
```1¶0000000¶0_``__`````````_`````````0¶_``_00¶¶010¶001
```¶¶00000¶¶1``_01``_11____``1_``_`````¶¶0100¶1```_00¶1
``1¶¶00000¶_``_¶_`_101_``_`__````__````_0000001100¶¶¶0`
``¶¶¶0000¶1_`_¶``__0_``````_1````_1_````1¶¶¶0¶¶¶¶¶¶0```
`_¶¶¶¶00¶0___01_10¶_``__````1`````11___`1¶¶¶01_````````
`1¶¶¶¶¶0¶0`__01¶¶¶0````1_```11``___1_1__11¶000`````````
`1¶¶¶¶¶¶¶1_1_01__`01```_1```_1__1_11___1_``00¶1````````
``¶¶¶¶¶¶¶0`__10__000````1____1____1___1_```10¶0_```````
``0¶¶¶¶¶¶¶1___0000000```11___1__`_0111_```000¶01```````
```¶¶¶00000¶¶¶¶¶¶¶¶¶01___1___00_1¶¶¶`_``1¶¶10¶¶0```````
```1010000¶000¶¶0100_11__1011000¶¶0¶1_10¶¶¶_0¶¶00``````
10¶000000000¶0________0¶000000¶¶0000¶¶¶¶000_0¶0¶00`````
¶¶¶¶¶¶0000¶¶¶¶_`___`_0¶¶¶¶¶¶¶00000000000000_0¶00¶01````
¶¶¶¶¶0¶¶¶¶¶¶¶¶¶_``_1¶¶¶00000000000000000000_0¶000¶01```
1__```1¶¶¶¶¶¶¶¶¶00¶¶¶¶00000000000000000000¶_0¶0000¶0_``
```````¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶00000000000000000000010¶00000¶¶_`
```````0¶¶¶¶¶¶¶¶¶¶¶¶¶¶00000000000000000000¶10¶¶0¶¶¶¶¶0`
````````¶¶¶¶¶¶¶¶¶¶0¶¶¶00000000000000000000010¶¶¶0011```
````````1¶¶¶¶¶¶¶¶¶¶0¶¶¶0000000000000000000¶100__1_`````
`````````¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶000000000000000000¶11``_1``````
`````````1¶¶¶¶¶¶¶¶¶¶¶0¶¶¶00000000000000000¶11___1_`````
``````````¶¶¶¶¶¶0¶0¶¶¶¶¶¶¶0000000000000000¶11__``1_````
``````````¶¶¶¶¶¶¶0¶¶¶0¶¶¶¶¶000000000000000¶1__````__```
``````````¶¶¶¶¶¶¶¶0¶¶¶¶¶¶¶¶¶0000000000000000__`````11``
`````````_¶¶¶¶¶¶¶¶¶000¶¶¶¶¶¶¶¶000000000000011_``_1¶¶¶0`
`````````_¶¶¶¶¶¶0¶¶000000¶¶¶¶¶¶¶000000000000100¶¶¶¶0_`_
`````````1¶¶¶¶¶0¶¶¶000000000¶¶¶¶¶¶000000000¶00¶¶01`````
`````````¶¶¶¶¶0¶0¶¶¶0000000000000¶0¶00000000011_``````_
````````1¶¶0¶¶¶0¶¶¶¶¶¶¶000000000000000000000¶11___11111
````````¶¶¶¶0¶¶¶¶¶00¶¶¶¶¶¶000000000000000000¶011111111_
```````_¶¶¶¶¶¶¶¶¶0000000¶0¶00000000000000000¶01_1111111
```````0¶¶¶¶¶¶¶¶¶000000000000000000000000000¶01___`````
```````¶¶¶¶¶¶0¶¶¶000000000000000000000000000¶01___1````
``````_¶¶¶¶¶¶¶¶¶00000000000000000000000000000011_111```
``````0¶¶0¶¶¶0¶¶0000000000000000000000000000¶01`1_11_``
``````¶¶¶¶¶¶0¶¶¶0000000000000000000000000000001`_0_11_`
``````¶¶¶¶¶¶¶¶¶00000000000000000000000000000¶01``_0_11`
``````¶¶¶¶0¶¶¶¶00000000000000000000000000000001```_1_11

Lipsum-UI :: A JQuery UI Lorem Ipsum Generator

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:

View Demo Download Files

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 :: Reconstruction

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!

Download

• English Version
• Versi Bahasa Indonesia

Forget it! Try the new version of CSS3 Button Generator which had escaped from several mistakes!

Click Here!

Give me the experiences that happened to you to fix the application problem or simply just fix the error. I am very grateful for that.

Memperkenalkan: CSS3 Button Generator

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:

Download Aplikasi Download Versi Terbaru

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.