kodeWeave HTML Playground for Free

Sebenarnya tempat koleksi link tempat playground HTML editor gue sudah buatkan pada posingan dengan judul From Me To You...HeHeHe. Ternyata sekarang ada satu web anyar yang berjasa memberikan info link website seputaran list tools dan resources pilihan serta ide buat kalian yg ingin lebih mengetahui dunia web-site wwwhere.io
Karena tema HTML-editor merupakan salah satu tema post andalan pada blog ini, maka AA Koben akan berbagi kembali mengenai hal itu :D Still beta pliss introduce Feditor.IO and more full stylish you must check this one bootstrap snippets, code patterns and playground www.codeply.com/go

From master Michael, github nick is mikethedj4 he has made coding playground to export your HTML5 web apps as native desktop and mobile apps! kodeWeave adalah salah satu playground HTML paling komplit dalam menu-opsi yg pernah gue temuin untuk saat ini. Sudah opensource dan di buat dalam beberapa bentuk.

• kodeweave.sourceforge.net
• github.com/mikethedj4/kodeWeave
• developer.mozilla.org/en-US/demos/detail/kodeweave
Bonus...
• github.com/mikethedj4/mmd

Saya akan bantu menerangkan menu-menu yg ada di apps KodeWave.html ;))

>> Gambar kunci inggris kiri pojok atas: Lorem Ispum generator Upload file & embed color code generator.
>> Gambar buku: Option for add language scripts.
>> Gambar orang: Jika sobat ingin berbagi/berkolaborasi kode (This is fiture by togetherjs must Online mode on)
>> Gambar disket jadul: Opsional download mau versi apaan. 8 opsi choose for download!
Ada deretan tombol, gunakan scroll pada mouse untuk melihat semua. Tombol² tsb merupakan shortcut pilihan! Pada pojok kanan atas dengan gambar phone adalah opsi display bisa di ganti dengan 3 pilihan. Pojok paling kanan atas dengan gambar bingkisan kado tempat contoh-contoh tutorial yg mana kode/script akan otomatis ditempatkan pada editor.

Kalau sobat download dari link sumber mungkin ada beberapa address link yang masih tertuju pada web-host. Gue sudah buatkan via offline termasuk link² yg ada pada gambar buku dan gambar bingkisan kado. Kalau tidak jalan berarti memang harus online ;))
Download kodeWeave via 4shared www.4shared.com/zip/u_uQS0q3ba/kodeWeave.html
Download kodeWeave.zip in Ziddu downloads.ziddu.com/download/24516142/kodeWeave.zip.html
Password kodeWeave_mikethedj4

Happy playground \m/

Get One Free Two for Code Tester

Ternyata begini rasanya jika sudah dihinggapi virus malas, source developer lagi pada sepi plus blank idea :D Gue angkat kembali tema kojo pada blog ini yaitu HTML editor with live preview supaya para pengunjung tidak kecewa! Kok nggak update yaaa :-" Tidak sengaja menemukan ketika browsing dengan keyword code tester masuk ke bagian dalam halaman jelajah google! AA tidak akan menjelaskan apa itu code tester? Satu yg pasti mempunyai fungsi sama dengan playground HTML editor. Biasalah bro, bermain sambil belajar ;))

Untuk mempersingkat waktu, dipersilahkan bagi kalian yg sudah bisa mengambil sendiri source kode dari sumber. Get Code Tester www.jschneider88.com/codetester. Sama gue sudah dimodif dengan menambahkan syntax-highlighter by codemirror! Pada bagian navigasi telah disisipkan form color Spectrum by @bgrins bgrins.github.io/spectrum.
Screenshot...Seperti yg sudah saya utarakan di atas, mendapatkan code-tester berada di halaman dalam google entah page berapa! Sebagai contoh dengan keyword serupa, ternyata playground HTML editor masih ada :D Silahkan lihat sendiri:

• Online Code Tester.
www.lutanho.net/goodies/codetester.html
• Demonstration HTML Test Page.
www.play-hookey.com/htmltest

Sengaja saya comot contoh tersebut, karena teknik penampilan page.html menggunakan penulisan syntax iframe Semoga owner web tidak keberatan juga saya sikat source code untuk dibagikan kepada para blogger :"> Amal ibadah itung-itung ;))
Silahkan download ketiga apps.html tersebut bagi yg berkenan. Absolutely this is for learning and work offline mode.

>> Code Tester unduh via 4shared
www.4shared.com/zip/Z0veh_aFce/Code_Tester.html
>> Download Code-Tester.zip in Ziddu
downloads.ziddu.com/download/24467777/Code-Tester.zip.html

Kekurangan modifikasi dan penambahan fitur silahkan add masing-masing ya :)) Soalnya nggak ada waktu buat bagus-bagusin...UGH!!! :P

Happy coding \m/

It's Not jsFiddle, It's Cloud Editor

Salah satu tema post favorit ane adalah mengenai HTML Editor Entah sudah berapa banyak yang sudah gue share buat kalian, silahkan cari-cari di arsip. Beragam HTML-editor kreasiku memiliki tingkatan, dari kelas sederhana sampai master :D Tidak tau sampai kapan akan berhenti menulis artikel tentang editor with live preview ini, selalu saja dapat yg baru dan full stylish ;;) ;))
Sobat tentu sudah pada kenal dengan playground editor keren yg bernama JSFiddle? Salah satu faktor orang akan selalu ingat dengan js-fiddle ini mungkin dengan komposisi tampilannya! Empat buah kotak terpisah guna menempatkan source code/script serta bilik kiri untuk bagian miscellaneous. Sekarang AA Koben akan kasih buat anda Cloud Edit is a JSFiddle like code editor features with jQuery and ace editor b-)

Buka halaman jqueryscript.net dan cari tombol

DownloadDapatkan file source www.jqueryscript.net/text/Creating-A-JSFiddle-Like-Code-Editor-with-jQuery-ACE-Editor-Cloud-Edit.html

Sudah beres, kalian mendapatkan editor baru seperti jsfiddle! Di sini saya akan cerita-cerita sedikit fitur apa saja and fungsi yg ada pada cloud-edit. CloudEdit dibuat dengan penanaman fitur script jQuery, Ace & Emmet!

jQuery - Telah ditanamkan script-jQuery pada embed sehingga mendukung untuk melakukan tes terhadap snippet jQuery. Tidak usah lagi pasang script jQuery inti versi 1.x! (letak berada pada kotak ke-3 JavaScript/jQuery 1.x)
Ace - Guna mendukung high performance pada editor pemasangan syntax highlighter ACE menjadi pilihan. Ada beberapa pilihan opsi themes light/dark.
Emmet - Guna mempermudah penulisan syntax, EMMET terpilih menjadi acuan.

Selain ketiga fitur tersebut, ada beberapa fitur lain yg tidak bisa dianggap remeh L-)
CSS Option meliputi Autoprefixer, Less CSS, Sass CSS (experimental) and modernizr. Frameworks mencakup Bootstrap and Foundation. Deretan tombol berjejer dengan multi fungsi, silahkan dicoba masing-masing. Gue cuma akan jelaskan fungsi 2 tombol yg ada. Tombol save memiliki fungsi melakukan save di local storage. Tombol load berfungsi memanggil kembali pekerjaan dari tombol save!

Pada si ace sebenarnya ada fitur Autocomplete. Yang ketika menuliskan sesuatu akan diberikan opsi pilihan. Gue sudah tanamkan script tersebut! Tetapi pada kotak HTML tidak berjalan mulus, namun berjalan baik pada kotak CSS & JavaScript/jQuery. Mungkin bentrok dengan si emmet, dan saya blon paham script jadi kagak bisa benerinnya :))Screenshot CloudEdit hasil modifikasi AA sudah tentu ada autocomplete yg tidak ada pada original source :P Apakah sobat tertarik mendapatakannya >:) Oooops ampir kelupaan, ada juga kotak console tidak tauk saya cara pakainya, yaaa jadi gak apa-apa lupakan saja 8-}

Password ZIP: jQuery Cloud Edit by www.jqueryscript.net
Bonus, simple mode github.com/sw4/codeFiddle - github.com/nadiahamdaoui/CodeEditor

Happy fiddle \m/

Free 4 HTML Editor Feature Ace Code

Ada sedikit informasi dari official google webmaster central blog mengenai rich snippet microdata. Sekarang sobat dapat membaca dan mempelajari new structured data, melakukan testing dengan tool and more! Jadi tidak bisa sembarangan kalau mau memasangkan apa-apa agar sesuai dengan aturan struktur yg sudah ada. Sobat bisa kunjungi webmaster central blog atau langsung menuju tool testing tool on google developers Lakukan test terhadap link home page and post page. Punya gue Page Home Link & Post Page Link Tidak ada masalah ;))

Karena tema sekarang update info, ya AA juga akan melakukan update :D Sebagai bloglang dan kolektor HTML editor with Live Preview AA akan kasih kepada kalian sobat blogger EMPAT buah HTML editor Langsung saya tabok 4 biji sekaligus :)) Saya tidak akan menjelaskan, pasti sudah pada tahu?

HTML Pencil

Demo: HTML-Pencil - Source: bit.ly/1yCFesO

Test of do's tool is happening DOM

Demo: DOM manipulation monitoring - Source: jsdo.it/elk/cHPO

ACE editor 2

Demo: ACE editor 2 - Source: jsdo.it/s.yoshiki1123/lUr9

ACE editor 3 for PC

Demo: ACE editor 3 for PC - Source: jsdo.it/s.yoshiki1123/boWD

Semua editor dapat berjalan secara offline mode. Jika ada fitur yg tidak berjalan sebagaimana mestinya (ex: Ace code) harap maklum :)

Ace Editor Unduh via 4shared --- Download Ace-Editor.zip in Ziddu

Password ZIP --> TuhanItuTidakTidur

Happy editor \m/

Get Free Four HTML Editor for You

Artikel dengan tema HTML editor entah sudah saya post berapa kali? Silahkan sobat-sabit lihat sendiri or searching guna mendapatkan tool keren live HTML-editor tersebut. Sekarang AA Koben akan bagi-bagi hal serupa :D Karena memang tidak ada topik keren buat di tulis ;)) :"> Saya akan kasih kalian empat macam .html yaitu htmledit, HTML-Try, scratchpad dan fiddly. Keempat-empatnya dapat berjalan secara offline ;) Maaf jika ada fitur yang tidak berjalan, karena memang harus online. Gue cuma mau berbagi buat playground saja. Bermain sambil belajar kode-kodean!!!

A simple web-based HTML editor.

HTML Online editor and see it.

Real time HTML editor with preview.

Test your Javascript, CSS and HTML online with Fiddly code editor.

Bagaimana penampakan screenshot ke-4 editor di atas! Apakah sobat kepengen memiliki itu semua?

• HTML Editor Unduh dari 4shared
www.4shared.com/archive/zO52nRsLce/HTML_Editor.html
• Download HTML-Editor.7z in Ziddu
downloads.ziddu.com/download/24239509/HTML-Editor.7z.html

Password 7z is: Beben Koben si Bloglang anu Ganteng Kalem Tea

Bye :-h

Free Text Editor is Emmet and jQuery Zen

Tidak ada bahan post, mentok ide nih bro :-< Koben terpaksa melakukan repost! Post ulangan kali ini akan bercerita tentang syntax and conditional tag khusus dari web Emmet Kalau sobat perhatikan home page emmet, maka akan tampak konten Watch demo! Gue akan berikan itu untuk kalian. Sebelum menjadi emmet, yang saya ketahui dulu masih bernama jQuery zen.
Jadi singkat cerita, AA Beben Koben akan memberikan kepada kalian 2 editor sekaligus yaitu text editor emmet dan jQuery zen. Berikut screenshot ke-2 editor tersebut.Memang nggak bagus² amat sih, tetapi fungsinya itu loh =P~ Bagi yg berminat silahkan di download, free alias gratis :D
Via ziddu: downloads.ziddu.com/download/24015246/Emmet.zip.html
Via 4shared: www.4shared.com/zip/EuoJkg5xce/Emmet.html

Dont forget to read HTML editor live preview source by emmet & codemirror.

Source jQuery zen by: jsdo.it/eller86/fUtsW

Bye :-h

Free Document Editor like HTML Editor with Preview

Sebagai bloglang dan raja pengumpul aplikasi HTML editor kali sekarang AA Koben membawa document editor karya master duxca. Pada tab readme tidak ada penjelasan, sehingga harus gue yang memberikan sedikit penerangan alakadar ;)) Document editor adalah live preview editor dengan pembagian konten kode CSS, HTML dan JavaScript di buat terpisah dengan gaya functional css tabs revisited by CSS-Tricks.

Gue hanya menambahkan tombol reload page doang :)) Kalau sobat yg mau koleksi silahkan sikat, gak pakek bayar² Mau apapun namanya tetap saja live preview HTML bro :P

Sebagai bonusnya, Koben sudah memilihkan karya master Moncho Varela dari web codepen.io owner web nakome.com Jangan tercengang, just cek this out bro...

• codepen.io/nakome/pen/oDrLC
• codepen.io/nakome/pen/iFgBJ
• codepen.io/nakome/pen/ybalh
• codepen.io/nakome/pen/ljsEF
• codepen.io/nakome/pen/Dxkvm
• codepen.io/nakome/pen/zcKoa
• codepen.io/nakome/pen/fthBl
• codepen.io/nakome/pen/rjhcJ
• dizyne.net/35-best-javascript-resources-tools

See you :-h

Edit Any Website use Editor HTML

Pernah mendengar istilah edit any website using JavaScript? Secuil script yang bisa mengedit (merubah kata/kalimat) situs apapun! Coba drag link berikut ke bookmark toolbar browser kalian Edit Any Website atau coba klik saja sapa tau bisa. Kalau cuma edit konten yang sudah jadi dan tanpa melihat perubahan yg signifikan terhadap web sasaran, kurang sreg and fullstylish? AA Koben punya satu website HTML Editor dimana kita bisa mengedit-ngedit situs meliputi HTML, CSS & JavaScript customizable.Tiga tab jajaran bawah bagian customizable area tempat meletakan kode/script. Dua tab sebelah kanan Framework dan Themes guna membutuhkan sesuatu yg mana sudah diberikan oleh si empunya web :D Dari pada bingung menjelaskan, cobalah sendiri...

Just Drag LiveGap Editor to your Bookmarks ToolBar, and when you are in the page you want to edit click it from the Bookmarks bar.

HTML editor LiveGap basicly manggunakan script keluaran dari web codemirror dot net. Asyik kan...:(|)

Sebagai bonus, Koben akan berikan 3 biji HTML editor yg sudah opensource untuk kalian. Editor ini diperuntukan bagi anda yg sudah familiar dengan penulisan syntax sbb

<!DOCTYPE html>
<html>
 <head>
  <title>TITLE</title>
<style>

</style>
 </head>
<body>

</body>
</html> 

htmleditor by mrdoob

HTMLiveCode

sand html editor

Editor buatan mrdoob ada sedikit bug jika membukanya memakai mozilla. Khusus sand editor by @_hew, gue sudah buatkan alternatif karena editor tersebut menggunakan embedding code editor by Ace. Yang mana kode editor dari Ace harus menggunakan layanan internet alias online. Saya coba buatkan versi offline-nya yah ;))

Pass: Tutorial Blog for Stylish Blogger
Sand editor ada enaknya, sudah masuk JavaScript cookies. Dengan demikian jejak terahhir akan terus ada sampai cookies/cache belum dihapus dari browser.

Happy editor \m/

Free CSS & HTML Tester Like CSSDesk

Sebelum meluncurkan proyek text editor pada browser, AA Koben seling dahulu dengan berbagi tools CSS and HTML tester. Tidak lain apps tester ini merupakan alat bantu untuk mengetahui hasil generate dari kode CSS dan markup HTML. Ingat, hanya mendukung CSS & HTML saja!!! Web yang memberikan layanan jasa seperti ini mungkin CSSDesk
Bagi tingkat newbie :D apps berikut cocok sekali guna melangkah ke apps advanced HTML editor Pada setiap box, terdapat tombol submi dan clear. Ketika meng-add kode CSS/HTML di ikuti dengan memencet tombol submit. Kalau tidak dipencet tidak akan terlihat hasilnya seperti apa pada box preview :))

Tool gue dapatkan dari web halls-of-valhalla.org Acak-acak web tersebut guna melihat konten menarik lainnya ;)

Happy tester \m/