HTML Editor Live Preview Source by Emmet & Codemirror

You should read this CodeMirror and this Emmet! Fasilitas dari 2 web tersebut sama AA Koben di bungkus menjadi sebuah live HTML preview Basicly seperti live HTML editor Seperti biasa, gue menambahkan beberapa embed page .html & addons codemirror.Jika melihat penampilan memang biasa-biasa saja. Tetapi memang itu tujuan saya, terlihat sederhana dan lebih menitikberatkan kepada fungsi editor itu sendiri :P

Color

Tombol color gue masukan embed page color dari www.jswidget.com/lab/canvas-based-color-picker.html

UnCSS

Tombol unCSS generator untuk membuat tampilan kode CSS agar lebih terbaca, ane terapkan CSS unminifier by Peter Coles mrcoles.com/blog/css-unminify
Untuk tombol Doc and Reload adalah tombol bonus yg bisa sobat baca & coba sendiri ;)

HTML editor ini menggunakan syntax dari emmet dan codemirror. Sobat bisa menulis dengan gaya bahasa emmet (tombol Doc) Fitur operasional Koben sisipkan beberapa dari Codemirror, antara lain:

>> Syntax Highlighter sudah tentu ada.
>> Match highlighter ( codemirror.net/demo/matchhighlighter.html )
>> Tag matcher ( codemirror.net/demo/matchtags.html )
>> Search/Replace ( codemirror.net/demo/search.html )

Jika sobat mau pasang addons dari codemirror lagi, silahkan saja kalau memang bisa :D codemirror.net/demo
Koben akan kasih gratis apps ini, syaratnya cuma satu saja. Tolong sebarluaskan sejauh-jauhnya tools ini agar blogger Indonesia pada pinter semua :) Untuk customize tinggi dan lebar, buka folder css ► buka pada notepad file style.css Ubahlah width and hight pada kode .CodeMirror 'n #preview

Shortcut page emmet by brettterpstra.com/2012/11/16/emmet-for-cheaters

DOWNLOAD:
Via Ziddu www.ziddu.com/download/23363409/Editor.zip.html
Via 4shared www.4shared.com/zip/ht5k-pVb/Editor.html
Happy blogging \m/

Free Download Encrypt & Decrypt Files use JavaScript

Salah satu cara untuk mengamankan file kita agar tidak mudah di curi oleh orang lain, yaitu dengan melakukan teknik enkripsi files! Encryption sendiri ada bermacam-macam bentuk. AA Koben mendapatkan satu artikel unik "membuat file enkripsi app dengan javascript" Dengan aplikasi HTML tersebut kita dapat melakukan enkripsi file agar terjaga rahasianya ;) Syaratnya kita harus sama-sama memiliki apps encryption tsb. Karena kalau cuma salah satu pihak saja yg punya, bagaimana kita membuka file yg sudah terenkrip (decrypt file) Lumayan buat koleksi ;)) Silahkan kunjungi halaman berikut guna melihat demo dan mendownload bumbu²nya tutorialzine.com/2013/11/javascript-file-encrypter
Kalau tidak salah script jQuery yg ada pada file download web tutorialzine masih hostingan punya google. Untuk itu harus ada koneksi internet guna mengaksesnya. Seperti biasa gue cuma mempermudah optimasi data :D

www.4shared.com/zip/_5CoX9PE/JavaScript_Encrypter.html

Bonus links resource enggak kalah keren bro...

• tutorialzine.com/2013/08/slideout-footer-css
• tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use
• liveweave.com/MrUBfZ
• jsdo.it/nby2ki/2m0U/fullscreen

Demikian sekilas info, semoga bermanfaat :)
Happy blogging \m/

The Simplest of Zooming Effect for Image

Lagi-lagi mengangkat topik yang nggak ada habis untuk di bahas! Koben akan mengulas kembali tentang trick zoom Banyak sekali tutorial mengenai situs yg mengulas zoom effect. Dari yang pure menggunakan CSS, plugin jQuery atau murni pakai JavaScript! Penerapan efek zoom juga bisa bermacam-macam ya. Sekarang secara khusus membuat zoomer pada gambar ketika cursor didekatkan (hover) Sangkin banyak dan keren² tutorialx, maka AA mencoba memilihkan yang paling sederhana dengan tidak menghilangkan fungsi utama dari trick tersebut ;)
Kebanyakan trick zoom selalu menyertakan dengan 2 buah image. 1 image kecil untuk ditampilkan dan 1 image besar untuk membuat gambar zoom. Ribet bro kalau begitu, sekarang is timing to simple and usefully :D Sobat bisa coba ini thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3 Magnifying glass for image zoom using jQuery and CSS3 by @ruby_on_tails

Berikut beberapa link resource zoom simple pilihan gue:

• bit.ly/1cHIWTL
• cssdeck.com/labs/magnifying-glass-plugin-with-jquery-and-css3
• www.jqueryscript.net/zoom/Simple-Image-Inner-Zoom-Plugin-jQuery-Zoom.html

Pilihan tutorial zooming effect for image tersimpel jatuh pada bit.ly/1cHJMQz

How to use this?

Sertakan jQuery dan jquery_imageLens.js di halaman situs sobat.<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

Script pemanggil

<script>
$(function () {
 $("#img_zoom").imageLens ({ lensSize:200, borderSize: 1, borderColor: "#000" });
}); 
</script>

MarkUp HTML<img id="img_zoom" src="LINK-IMAGE" width="XXX" height="XXX" />Lebih jelasnya ya ke situs sumber saja, AA cuman berbagi ;)) Semoga bermanfaat.
Kalau kurang!
www.designrazzi.com/2013/free-image-hover-effects
www.freshdesignweb.com/jquery-mouseover.html
www.pencilscoop.com/2013/10/100-best-free-jquery-css-image-hover-effect-demos-plugins
Happy zoom \m/

Add Syntax Highlighter with Eclipse Orion Style Editor to The Blog

Satu topic pembicaraan yang memang banyak di bahas yaitu syntax highlighter Lama malang melintang di dunia syntaxhighlighter mungkin karya Alex Gorbatchev. Dalam memilih fitur SyntaxHighlight lebih bijak disesuaikan dengan kebutuhan. Karena satu yg AA Koben cermati, si Syntax-Highlighter tidak lain bertujuan untuk membuat lebih jelas dan mudah di baca dalam penulisan sebuah bahasa. Mau bahasa, javascript, HTML, CSS, PHP, Applet, or etc. Seorang scripter yang sudah menguasai salah satu bahasa program, pasti bakalan familiar dengan tulisan² yg berwarna-warni pada fitur syntax highlighter.

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.Alex Gorbatchev

Dari sekian banyak tawaran, gue memilih yg aneh bin unik (script sedikit) ;) Open this address thecodeplayer.com/walkthrough/mysql-syntax-highlighter-javascript-regex Penulisan syntax yg cukup unik perpaduan antara tagging pre and textarea Silahkan di pelajari. Bagi blogger yg mana konten blognya banyak bermain dengan penulisan koding, keberadaan syntax_highlight memang patut di pasangkan! Sederhana dan mudah dalam pemakaian dan lumayan banyak di pakai adalah google code prettify. Silahkan baca artikel berikut net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project

Saya punya satu tawaran lain nih, dan jarang yg memakainya :D Pernah mendengar Eclipse Orion Editor?

Langkah 1.
Tambahkan bumbu berikut di suatu tempat di bagian head untuk file css & script.

<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/3.0/built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/3.0/built-editor.min.js"></script>
<script>
 require(["orion/editor/edit"], function(edit) {
  edit({className: "editor"});
 });
</script>

Langkah 2
Penulisan markup HTML eclipse orion

<pre class="editor" data-editor-lang="js">
/*
 * This is an Orion editor sample.
 */
function() {
    var a = 'hi there!';
    window.console.log(a);
}
</pre>

Langkah-langkah di atas file menggunakan hostingan dari web elipse.ord Read here planetorion.org/news/2013/02/embed-the-latest-orion-editor-in-your-code-in-2-steps Kalau sobat mau hostingkan sendiri bumbu² yg ada, ada baiknya diedit-edit terlebih dahulu sesuai keperluan ;) Koben sudah buatkan satu bundel bumbu highlighter orion buat kalian.www.4shared.com/zip/1F4TcdgZ/Eclipse_Orion_Editor.htmlFile orion-editor.css perampingan dari kode CSS bawaan, kalian bisa edit² lagi! Javascript sudah compress mode. Silahkan jika berminat memasangkannya di blog anda. Semoga bermanfaat :)
Links help resource:
www.eclipse.org/orion
wiki.eclipse.org/Orion/How_Tos/Editor_Build
wiki.eclipse.org/Orion/Documentation/Developer_Guide/Plugging_into_the_editor
orionhub.org/examples/editor/minimaleditor.html
github.com/eclipse/orion.client
Happy highlighter \m/

Generate Image to Canvas Using jQuery

Kalau enggak ada kerjaan dan lagi bengong, baru AA mencari dan memperhatikan yang unik-unik serta mencari tandingan yg unik tersebut. Open this link jsrun.it/hirotweets/alphajpeg or jsdo.it/hirotweets/alphajpeg Perhatikan secara khusus penulisan syntax image pada halaman tersebut! Akan diperoleh 4 link image dikombinasikan menjadi satu, dalam sekali penulisan! Memang cukup merepotkan, tapi tutorial tersebut bukan membicarakan syntax-nya, melainkan convert image menjadi elemen canvas.
Syntax<img src="IMAGE-1"
data-origsrc="IMAGE-2"
data-jpegsrc="IMAGE-3"
data-filtersrc="IMAGE-4"
width="200" height="200" alt="image-alt">Berbicara tentang HTML5 canvas sangat banyak ragamnya. Satu yg menggelitik yaitu menggambar grafik untuk menghasilkan sebuah image *silahkan cari sendiri referensi artikel ttg canvas Koben pusing jg mau menerangkan, soalnya gua jg kagak tauk bro :D Intinya begini, image yg di convert melalui elemen canvas, bakal tercipta link (pd address browser) berupa base64 Coba sobat cari gambar yg dibuat dari HTML5-canvas image? Kalau sudah ketemu, lakukan klik kanan pd gambar tersebut: Save Image As, maka akan langsung terender canvas.png - View Image, pd address browser langsung terender link base64. Itulah yg saya tahu :)

Kembali ke topic awal, rendering image to canvas. Point utama adalah menggenerate link image menjadi elemen canvas. Koben dapatkan satu link yg mungkin sobat mau memasangnya jQuery image to canvas github.com/schnalle/jQuery.imageToCanvas.

Pasangkan script berikut di tempat semestinya<script src="https://raw.github.com/schnalle/jQuery.imageToCanvas/master/jquery.imageToCanvas.js" type="text/javascript"></script>Kode CSS (bisa kalian kreasikan lagi, ini hanya basic syarat)

canvas {
border: none;
margin: 5px auto;
text-align: center;
box-shadow: 1px 2px 3px #333;
}
.itc {
width: 400px;
height: 300px;
margin: 10px 5px;
box-shadow: 1px 2px 5px #333;
}

Script pemanggilnya

<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('.itc').imageToCanvas();
});
//]]>
</script>

Syntax HTML<img class="itc" src="LINK-IMAGE" alt="" />DEMO
jsfiddle.net/bebenkoben/XTnaA/showPelajari terlebih dahulu seluk beluk element canvas. Ada yg bilang bisa optimasi image, ada yg bilang begini, begitu, cerdiknya pelajari ajah dulu :) Dengan begini lumayan yg mau nyuri² gambar sedikit terhambat :P
Happy canvas \m/

Apps Generate Image to Table .html

Sebelum melanjutkan artikel sebelumnya mengenai HTML editor, saya mau seling dulu dengan informasi ringan. Dahulu sekali sebelum kode CSS secanggih sekarang ini, AA pernah penasaran dengan satu tema! Apakah mungkin bahasa CSS dapat melakukan convert image to CSS? Ternyata saya dapatkan jawabannya di www.imgtocss.com Coba-coba reg, eh ternyata cuman dibatasi melakukan converter sampai 3x :P Hasil kode generator berupa format table! Ternyata dengan syntax table itu gambar bisa di jadiin CSS! Dulu pernah berbagi juga apps convert image to CSS?

Sekarang gue mau berbagi apps serupa dengan hasil generated berupa tablet juga.

DEMO

Link Image		Kode CSS

Silahkan ambil bumbunya di github.com/nyamsprod/Image-To-Table

Perhatian!!!
Karena kode CSS yg dihasilkan bejibun banyak, maka pertimbangkan besar kecil resolusi image ketika mau melakukan generate!!!

Cuma berbagi, sebenarnya masih banyak teknik/metode/cara melakukan convert image ke CSS. Saya saja punya lebih dari 5 jenis apps :D
Semoga bermanfaat :)
Happy blogging \m/

Free Download Codemirror Latest Version 3.19

Siapa yang tidak kenal dengan CodeMirror! CodeMirror adalah teks editor serbaguna yang diimplementasikan dengan JavaScript untuk browser. Khusus untuk mengedit kode, dan dilengkapi dengan sejumlah modus bahasa dan addons yang mengimplementasikan pengeditan agar lebih maju functionaly. Blogger saja pakek gituan perbaikan blogger template HTML editor Sebagai raja pembagi embed HTML editor, dulu gue pernah berbagi satu dicomot dari codemirror preview live html editor like the one in blogger template editor.
Sangkin nggak ada topic pos yg unik² saya sampe membuat file .html (mudah-mudahan keseluruhannya) web CodeMirror :D Soalnya saya pikir-pikir selain code-mirror saingan yg lumayan sepadan jatuh pada Emmet. Dengan keberadaan text editor ini, diharapkan bisa lebih efisien kerjaan kalian. Gue harap kalian mau mempelajari syntax/ilmu dari ke dua web tersebut. Di jamin towewewew...seruuu :-bd

Dahulu Codemirror mempunyai lambang beginiSekarang sudah berbeda bro!

Untuk mendapatkan download latest release, sobat bisa langsung datang ke CodeMirror Terakhir yg saya lihat keluaran sampe version 3.19 Bagi sobat yg berkenan mendownload dari gue, sikaaattt!!!

• Via Ziddu
www.ziddu.com/download/23320611/codemirror.zip.html
• Via 4shared
www.4shared.com/zip/UJ-cw4ui/codemirror.html

Koben sudah melebarkan badan konten agar lebih luas! Semoga bermanfaat :)
Jika ada ngaco-ngaco dikit harap maklum, soalnya ini manual bikinnya ;)
Pass zip: bebenkobensibloglanganugantengkalemtea
Happy coding \m/

Switching and Video Playback use Youtube Player API iframe version

Dari pada vakum kelamaan, mendingan ngulas kembali trik dan tips seputaran pemasangan embed video si YouTube. Koben too sudah beberapa kali menuliskan trick penerapan embed video YouTube ke dalam sesi postingan blog. Tidak jauh berbeda dengan yang dulu-dulu, sekarang AA akan berbagi lagi namun dengan sentuhan berbeda :P Sebelum itu jalan-jalan dulu:

• Link YouTube.com be Flash Video on Blog
• Trick for Embed Video YouTube to be More Efficient
• About YouTube on Blogspot

Do not forget to always back up your template!

Masukan script berikut diatas/sebelum tagging penutup </body>

<script src="http://www.youtube.com/iframe_api"></script>

<script>
//<![CDATA[
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        "height": 315,
        "width": 500,
        "videoId": '_VFcEPGo_wg', // ID video yg mana gambar menjadi default tampilan embed video.
    playerVars: {
            'rel': 0,
            'autoplay': 0,
            'loop': 0,
            'disablekb': 0,
            'egm': 0,
            'autohide': 1,
            'start': 0,
            'showinfo': 0,
            'iv_load_policy': 3, // Standarnya 1. Jika diatur ke 1, penjelasan video yang akan muncul secara default. Jika diatur ke 3, penjelasan video tersembunyi secara default.
            'cc_load_policy': 1, // Ini subjudul. Default didasarkan pada pengaturan pengguna. Jika diatur ke 1, bahkan jika pengguna ingin untuk menghapus judul, ditutup captioning ditampilkan secara default.
            'color': 'white',
            'theme': 'light',
        }
    });
};
//]]>
</script>

Seting-seting lah dahulu menurut kebutuhan kalian.

Ketika memosting, tulislah syntax berikut (save syntax ditempat aman, biar nggak lupa)<div id="player"></div>
<p>
<span onclick="javascript: player.loadVideoById('ID-VIDEO');">[YOUR TITLE 1]</span>
<span onclick="javascript: player.loadVideoById('ID-VIDEO');">[YOUR TITLE 2]</span>
<span onclick="javascript: player.loadVideoById('ID-VIDEO');">[YOUR TITLE 3]</span>
</p>Perhatikan tulisan ID-VIDEO, gantikan dengan ID video yg akan kalian tampilkan!http://www.youtube.com/watch?v=zd2DfuVYqN4This is ID-VIDEO zd2DfuVYqN4 You got it? Kalau sobat mau melakukan mempercantik tampilan embed video YouTube, maka buat sendiri ya dengan ID #player { bla-bla-bla } :D Untuk demonya silahkan buka link brkt diikuti dengan memencet tombol Preview ya ;)Resource by: jsdo.it/No-Delay/3us8
Happy coding \m/

Make Link Share One Google Account be Alive

Seperti yang sudah kita ketahui bersama, perusahaan Google sedang melakukan perombakan besar-besaran pada setiap produknya. Alhasil tampak jelas disana-sini tampilan² yang diremajakan terlihat menjadi lebih fresh. Tengok perubahan tampak depan dari halaman blogger features Satu yang pasti perubahan terjadi juga pada bagian sesi sign in google accounts. Di samping perubahan, penambahan produk jg dilakukan oleh pihak google. Contohnya yaitu google web designer Mungkin sobat sudah pada lebih tahu dari pada saya :P

Old Blogger Features	New Blogger Features

Satu yang mencuri perhatian gue ketika melihat tampak muka sign account google, tepatnya pada bagian bawah nampak 7 buah icon! AA pikir ada link hidup yg akan mengarah kemana. Ternyata memang gambar doang bro :P Koben akan menanamkan link hidup disana dengan mamakai gambar tersebut. Gunanya terserah kalian untuk apaan :))

Jika sobat mau resolusi asli gambar one google, saya sudah buatkan di codepen. Rasakan cdpn.io/BfxGb Kalau mau sedikit imut², berikut ramuan yg mesti di godog.

Save dan hostingkan gambar tersebut! Koben buatkan inline style CSS nya, urusan penempatan terserah masing²

<div style="position:relative;width:210px;height:17px;margin:15px auto">
    <img alt="" src="HOST-GAMBAR-ONE-GOOGLE" style="display:block;margin:0 0;padding:0 0;border:none;outline:none;max-width:none;max-height:none;" height="17" width="210" />
        <a href="GOOGLE-PLUS-LINK" title="Google Plus" style="display:block;width:14px;height:15px;position:absolute;top:0px;left:196px;">
        </a>
        <a href="GOOGLE-PLAY-LINK" title="Google Play" style="display:block;width:16px;height:15px;position:absolute;top:0px;left:165px;">
        </a>
        <a href="GOOGLE-YOUTUBE-LINK" title="YouTube" style="display:block;width:19px;height:15px;position:absolute;top:0px;left:97px;">
        </a>
        <a href="GOOGLE-DRIVE-LINK" title="Google Drive" style="display:block;width:15px;height:15px;position:absolute;top:0px;left:65px;">
        </a>
        <a href="GOOGLE-MAIL-LINK" title="Google Mail" style="display:block;width:21px;height:15px;position:absolute;top:0px;left:30px;">
        </a>
        <a href="GOOGLE-SEARCH-LINK" title="Google Search" style="display:block;width:16px;height:15px;position:absolute;top:0px;left:0px;">
        </a>
        <a href="GOOGLE-MAPS-LINK" title="Google Maps" style="display:block;width:16px;height:15px;position:absolute;top:0px;left:133px;">
        </a>
</div>

Gantikan tulisan gede-gede tersebut jangan lupa! Semoga bermanfaat :)
Happy blogging \m/

Dipaksa Update Postingan Bro

Sebenarnya lagi tidak ada ide postingan yang unik nih bro! Tapi salah satu temen blogger gue sudah minta² update artikel. Begini katanya "tumben lom posting lgi genggong heheh.......?" Kalau bahan yang biasa² mah banyak, tetapi menurut gue 'dah bejibun sobat blogger mosting hal biasa itu :P Koben akan sodorkan ini properti CSS background? Syntax yg sering dipakai oleh para blogazine blogger ketika melakukan posting. Perhatikan syntax sederhana berikut...

<div style="background:#000 url('BLAH-BLEH-BLOH') no-repeat bottom right;width: 323px;border: 1px solid #eee;padding: 0 1em;margin: 5px auto;color: #fff;font-weight:bold">

---------- CONTENT POSTED HERE ----------

</div>

Itulah syntax yang lebih dikenal dengan cara untuk merubah background di setiap halaman post blogspot.
Demo

Properti CSS background digunakan untuk menentukan efek latar belakang dari sebuah elemen.

Properti CSS digunakan untuk efek latar belakang meliputi:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Boring banget kan postingan gue! Ya sudah AA kasih bonus tut's ringan bagaimana cara menciptakan efek jiggle (bergoyang) dengan CSS!

Jiggle Demo

Silahkan meluncur kemari kalau kepengen www.kirupa.com/html5/creating_the_ios_icon_jiggle_wobble_effect_in_css.htm
Sobat berminat memasang tombol berbagi dengan gaya jiggle ke dalam blog kalian? Okelah kalo begitu, sikat nih ramuannya...jangan pake lama!Demo & DownloadSave Page As ► buka pake editor Notepad ► perhatikan <style> untuk kode CSS. Urusan memasang silahkan masing-masing yah :D
Source coded by: kurtulusticaret.com/stk/Save-And-Share-2.txt
Bonus link:
thecodeplayer.com/walkthrough/css3-squircles
Happy blogging \m/

Display Codepen in Blog/Web using AwesomePI

Di gawangi oleh Alex Vazquez, Tim Sabat, and Chris Coyier siapa yang tidak kenal dengan web CodePen! Salah satu tempat playground terkenal untuk front end side web yg ada saat ini. Tempat ajang pembuktian kabisa para kodinger untuk menunjukan kreasi masing-masing. Dari ketiga orang tersebut tambah seorang lagi yaitu Tim. Tim adalah seorang programmer, penulis dan pemerhati segala yg ada hubungannya dengan web. Dari kreasi seorang Tim maka tercipta codepen awesomepi. Apakah itu...
CodePen AwesomePI adalah sebuah unofficial API untuk web codepen bagi penggemarnya! Parse API sederhana untuk memanggil halaman CodePen. Beroperasi dengan PHP, DOM Parser menjadi panggilan JSON. (Saya juga kagak mengerti sama sekali) :D Singkat ceritanya begini!

Jika kalian suka membuat kreasi di sana, maka akah dihasilkan sebuah halaman kreasi kalian tersebut. Daftar dulu makanya ;)) Nih punya gue Beben Koben on CodePen Walaupun sederhana yg penting ikut nimbrung lah bro :)) Gue akan berbagi cara bagaimana untuk menampilkan halaman codepen kita menggunakan CodePen-AwesomePI. Kira-kira begini penampakannya:

Ramuan script & coded terserah mau dibuatkan pada static page atau HTML/JavaScript. Please Save Page As / Ctrl + S demo berikut!
Pada script dengan tulisanurl: 'http://codepen-awesomepi.timpietrusky.com/beben-koben/owned',Gantikan tulisan beben-koben dengan account codepen kalian.Demo & DownloadTrik menampilkan halaman codepen menggunakan awesomepi Koben dapatkan dari Dreamdealer Serta rujukan source pelajaran sobat bisa satroni:

• github.com/TimPietrusky/codepen-awesomepi
• timpietrusky.com/codepen-awesomepi-released

Happy CodePen \m/

This Is Not a Notepad, But More Than That..HeHeHe

Ada satu web tools yang memberikan fitur cukup menarik bro. Tool yang dibuat meliputi 2 fungsi dasar yaitu memperindah dan preview kode. Berikut cerita singkatnya... CodeBeautify dikembangkan untuk beautify, minify, convert kode ke format yang lebih baik. Adapun fungsi yang didukung adalah

• RSS viewer
• Generate sitemap
• Generate robots.txt
• CSV to XML/JSON convert.
• HTML viewer, beautifier, minifier.
• CSS viewer, beautifier, and minifier.
• JavaScript viewer, beautifier & minifier.
• XML viewer, beautifier, minifier, convert to CSV,JSON format.
• JSON viewer,beautifier,minifier,convert to csv,xml format.

Silahkan bermain-main ke code beautify Bila kalian perhatikan web codebeautify pada tombol download menggunakan teknik blob! Blob sendiri adalah objek file yg berubah-rubah dimana masih merupakan data mentah yg musti diolah kembali. Intinya bermain-main dengan data local storage and DOM (sotoy mode on) :D Dengan blob kita dapat melihat fungsional seketika, take a look example blob generated!

AA Koben akan berbagi 2 apps text .html dengan fungsi loading, editing, and saving. Segala yg berbau teks dapat kita olah dan tentunya penyimpanan data memakai blob technique :-" Penasaran seperti apa?

Pertama datang dari sobat blogger Mathias Panzenböck (panzi) dia membuat apps save generated data. Take a look here HackworthyPerhatikan kotak File name, itu untuk memberikan title beserta ekstension. Lakukanlah apapun dengan kotak besar, selagi itu teks sobat bisa mengotak-ngatik dan melakukan penyimpanan. Ingat hasil akan berupa download yg didukung oleh mime format. Jadi harus benar-benar ingat kalian membuat title & ekstensinya apaan!

Yang kedua sedikit canggihan bro, this is loading, editing, and saving a text file in html5 using javascript :P

thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip

Sobat bisa membuka file apapun asalkan masih berupa teks, dan melakukan penyimpanan file dengan ekstensi bebas pula :)) Asalkan sobat mengenal dengan betul bekerja dengan bahasa program apa, ya save lah dengan semestinya :) Silahkan di sikat bro...

Untuk lebih jelasnya mah silahkan di pelajari sendiri-sendiri saja :D Semoga bermanfaat.

developer.mozilla.org/en-US/demos/detail/underscore-template-editor
Happy coding \m/