JSitor alternatif Codepen yang powerful.

1. Code pen

CodePen adalah komunitas online untuk menguji dan menampilkan cuplikan kode HTML, CSS, dan JavaScript buatan pengguna.

Codepen berfungsi sebagai editor kode online dan lingkungan pembelajaran sumber terbuka, tempat pengembang dapat membuat cuplikan kode, yang disebut "pena," dan mengujinya.

Contoh paling praktis bagi saya sebagai blogger adalah ketika membuat top navigasi menu blog responsif berikut, yang telah banyak saya terapkan pada template template bawaan (default ) blogger:

See the Pen topnav responsif plus menu dropdown by Sufyan Yaan (@sufyan-yaan) on CodePen.


Kalian dapat melihat sumber kode HTML dengan mengklik tombol HTML, melihat sumber kode Javascript dengan menyentuh tombol JS, dan melihat sumber kode CSS dengan mengklik tombol CSS. 

Lalu mengklik tombol 'Result' untuk melihat hasil visualnya pada browser.

Berikut adalah rancangan saya untuk membuat halaman homepage blog mirip Google Pencarian:


2. JSitor

Sama seperti Codepen JSitor adalah alat online gratis untuk menulis, menjalankan, dan berbagi cuplikan web dan NodeJS.  Ini adalah produk gratis tanpa iklan yang memberikan lebih banyak jendela editor untuk menulis kode. 

Saya dapat menuliskan dan memperagakan kode dan hasil yang sama melalui tool Editor coding yang satu ini:

 
Sama seperti pada tool pengedit HTML Codepen, Kalian dapat melihat sumber kode HTML dengan mengklik tombol HTML, melihat sumber kode Javascript dengan menyentuh tombol JS, dan melihat sumber kode CSS dengan mengklik tombol CSS. Lalu mengklik tombol 'Browser' untuk melihat hasil visualnya pada browser.

Eits! Jangan lupa geser menu ke kiri dan ke kanan jika menggunakan hape. (Tampaknya Frame JSitor lebih berat daripada Codepen).

Keduanya juga dapat di 'embed' dengan mudah ke dalam halaman HTML seperti contoh di atas. Dan menghasilkan tampilan yang hampir sama. 

Sedangkan kegunaannya bagi blog tutorial adalah: Tidak perlu lagi menuliskan kode panjang panjang di dalam halaman blog karena kedua editor di atas adalah tempat yang tepat untuk hal tersebut. Kemudian kita dapat menguji dan mempresentasikan hasilnya sekaligus dalam bentuk visual kerja HTML di web browser.

JSitor
credit: GitHub

Sebenarnya ada puluhan tool editor HTML online yang memiliki fungsi dan cara yang hampir sama dengan Codepen. Akan tetapi berhubung saya baru mencoba JSitor, saya mengangap dengan subjektif sekali bahwa JSitor adalah alternatif Codepen yang powerful.

Posting Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak