HTML CSS JavaScript and Live Preview Source

Editor menyajikan banyak mode dan gaya untuk menambah pengalaman yang berharga bagi penggunanya. Sobat bahkan bisa mendapatkan perangkat dari pengembang yang didistribusikan secara gratis (Free) dari pengembang resmi mereka. Tetapi skenario akan berbeda jika kita membuat eksperimen sendiri dan berkreasi dengan editor yang tersedia atau dibagikan di dev tools.

Pada artikel ini, kami membahas editor code teks dengan dukungan kecil untuk pengembangan dengan HTML, CSS, JavaScript dan Source Live Preview. Dan untuk mendokumentasikan kode HTML CSS, dan JavaScript adalah bagian dari semua situs web yang berinteraksi langsung dengan pengguna. Alat editor seperti: jsfiddle, LiveWeave ataupun Codepen. Namun code editor yang mereka kembangkan sudah jauh lebih bagus dan di sempurnakan.

Membuat experimen versi Editor Demo - CodeMirror property style

HTML CSS dan JavaScript ini adalah Editor Demo untuk penulisan code HTML CSS dan JavaScript secara terpisah. Namun editor ini dapat membaca dengan menggunakan satu halaman (HTML Editor Area) saja. Ini mencakup HTML CSS dan JavaScript yang ditempatkan di dalam HTML Editor Area. Live Preview Source akan menampilkan tentang code bekerja secara langsung, misalkan: code HTML, text, video dan image yang direkatkan pada editor tersebut. Tersedia Split tarik atau geser untuk menguji halaman responsif.

Fitur dan main setting:

Fitur dan main setting memungkinkan untuk mengatur kegunaan add-ons untuk memilih mana yang akan ditampilkan atau disembunyikan di editor, dan membuat pengaturan sendiri pada halaman tertentu.

Effect interaktif dalam editor:

• Mode.
• ScrollbarStyle.
• Rulers.
• TabSize.
• IndentUnit.
• IndentWithTabs.
• TabMode.
• DragDrop.
• SearchMode.
• AutoCloseTags.
• AutoCloseBrackets.
• OnCursorActivity.
• AddModeClass.
• CursorScrollMargin.
• FixedGutter.
• FoldGutter.
• Gutters.
• HighlightSelectionMatches.
• HintOptions.
• LineNumbers.
• LineWrapping.
• MatchBrackets.
• MatchTags.
• SmartIndent.
• StyleActiveLine.
• Lint.
• ReadOnly.
• ExtraKeys.
• Colorpicker.
• Theme.

Note:
ReadOnly di Editor adalah mode editor untuk menampilkan text atau code yang tidak dapat diedit ataupun dihapus. Namun readOnly dapat digunakan untuk menjalankan sumber daya pengunci dalam editor.
Biasanya ReadOnly digunakan pada halaman posting untuk menampilkan bahasa code yang dapat dibagikan. Kami menggunakan ReadOnly di setiap Editor dengan menambahkan main OnOff Switch. OnOff Switch ini dapat digunakan untuk mengunci halaman editor ketika mengerjakan pengkodean dihentikan sementara waktu. ReadOnly akan bekerja ketika Switch aktif, sehingga code di textarea tidak dapat di edit, dihapus ataupun ditumpuk code file baru. Dan beberapa properti ditutup, misalnya: kegunaan menu upload, undo redo, revert to original (mengembalikan keadaan ke editor semula).

Main Setting / menu terpisah:

Menambahkan menu-pengaturan terpisah di luar editor. Ini merupakan salah satu mode dan pengaturan menggunakan gaya: OnOff Switch, menu setting ataupun menu bar.

• Lock Editor (OnOff Switch): Lock Editor field, Lock Menu, Main Split - Disable.
• Preview: AutoRun HTML (automatic), AutoRun CSS (automatic), AutoRun JS (OnOff Switch).
• Editor field (OnOff Switch): Highlight Active Line, Highlight Active Lint, Line Wrapping, Match Tags and Brackets, Smart Indent. [localStorage.getItem]
• HTML CSS JS Selected: Autoformat Selected, Comment Selected, Uncomment Selected.
• Scrollbars: Simple, Overlay. (menu settings)
• Search/Replace: Find, Find Next, Find Previous, Replace, Replace all. (type yang dapat digunakan: main keyboard, main menu ataupun menggunakan menu settings).
• Split Collapse: Orientation, Expand first, Collapse first, Expand last, Collapse last, Split - Enable / Disable.
• Bi-directional Text: LTR, RTL (RTL: paragraph Arabic font).
• Panel: Panel Top, Panel Bottom.

LocalStorage

Semua browser modern memanfaatkan penyimpanan lokal kurang lebih 10MB. LocalStorage dan sessionStorage adalah dua alat hebat untuk menyimpan kunci / nilai secara lokal. Item ini menawarkan keuntungan secara lokal saja dan tidak dapat dibaca oleh server. Ini juga dapat digunakan untuk menyimpan pengaturan pengguna dalam editor ini, misalnya: opsi tema, pengaturan OnOff switch, code yang Sobat kerjakan tetap aktif di editor ketika browser memuat ulang. Namun pengaturan berdasarkan history tersebut akan hilang ketika browser di tutup.

Nilai item untuk penyimpanan lokal yang ditambahkan:

• localStorage.getItem.
• sessionStorage.setItem.

Live Preview Source

Menulis konten di editor atau code sumber yang ada dalam daftar rak / disk lokal, di sebelah kiri editor dan melihat pratinjau berubah di halaman "preview". Ini lebih mudah untuk mengetahui code yang dibaca di editor dengan menampilkan di "Live Preview Source".

• Show Info Box (Title Preview).
• Source Code Preview.
• Dashed line highlights.

Item Menu

• Upload File code - HTML editor.
• Save File code - HTML editor.
• Undo Redo - HTML editor.
• Revert to Original atau mengembalikan code awal - HTML CSS dan JS editor.
• Clear All Editor - menghapus masing-masing text dalam editor secara bersamaan (HTML CSS dan JS editor).

Note:
Secara umum membuat 3 (tiga) editor yang berbeda memiliki masalah yang menumpuk dibanding dengan satu editor, sehingga menambahkan banyak item didalam editor tersebut untuk mendapatkan hasil kerja yang sama.

Editor Event

Editor Event adalah tempat mengelola Acara Aksi di proyek. Acara Aksi berisi tindakan yang Anda jalankan di editor.
Visualization - Editor Event yang ditambahkan:

• StartTime - Record waktu membuka halaman editor.
• Textarea field - Menampilkan editor mana yang dipilih saat ini.
• Click counter - jumlah click waktu dalam sesi ini.
• StatusBar: UpDate ... - Kode yang diketik di editor menunjukan status "Update".
• Console log - parameter yang bisa berupa array, objek atau pesan apa pun. Biasanya menampilkan bug dasar dan dapat dihapus dengan menambahkan sedikit fungsi JavaScript.

Judul: CodeMirror Demo HTML CSS JS LiveEditor Online

Duration: 39:39

Editor ini merupakan eksperimen sahabat kami ketika waktu luang dengan menggunakan pustaka inti dari CodeMirror.net. Saat ini "Demo Editor" dalam tahap pengujian dan eksperimen lebih lanjut. Mana yang lebih baik menurut Sobat untuk mengerjakan code?

A. Satu editor dengan Previews code.
B. Tiga editor dengan Previews code.

Sekian artikel hari ini tentang HTML CSS JavaScript and Live Preview Source. Selamat berkarya ...