Cara menggunakan atom html preview

Berikut sedikit pembahasan mengenai Packages Atom Yang Harus Kamu Install yang tentunya akan mempermudah pekerjaanmu dalam penulisan code, jika ada hal yang perlu di tanyakan silakan tulis di kolom komentar. Sekian dari saya, disini saya hanya sekedar menshare ulang dengan maksud ingin berbagi, pastikan sobat tunggu update berikutnya hanya di www.mualtry.com. Sekian post dari saya semoga bermanfaat terima kasih.

Table of Contents Show

Vectorscribe
Atom HTML Preview
Terminal Plus
Video Tutorial

Ada 5.125 packages yang saat ini tersedia untuk Atom. Dari ribuan package tersebut, membuat kita bingung mana package yang paling bagus dan dibutuhkan untuk Web Development. Nah, dalam artikel ini saya akan membahas 10 packages Atom yang wajib web developer instal. Package apa saja? ini dia, cekidot!

1. Emmet - https://atom.io/packages/emmet

Emmet adalah package yang sangat wajib kita instal. Dengan Emmet, kita bisa membuat tag HTML dengan super cepat. Hanya dengan menulis rumus singkat, kita bisa men-generate tag HTML untuk membuat kerangka website.

2. HTML Preview - https://atom.io/packages/atom-html-preview

Dengan HTML preview, kita tidak usah membuka browser untuk menjalankan dokumen HTML. Kita dapat mem-preview-nya langsung dalam text editor Atom. Selain itu, HTML preview ini bersifat auto-reload, artinya kita tidak perlu mereload untuk me-refresh tampilan.

3. Color Picker - https://atom.io/packages/color-picker

Color Picker membantu kita memilih sample warna untuk CSS. Untuk shotcut-nya kamu tinggal tekan Alt+Ctrl+C/CMD+Shift+C maka color palette akan muncul.

4. File Icons - https://atom.io/packages/file-icons

File Icons akan mempercantik project manajer kita, file-file dalam folder project akan memiliki icon sesuai dengan jenis bahasa pemrogramannya. Tentunya dapat membantu kita agar tidak bingung melihat puluhan file.

5. JavaScript Snippets - https://atom.io/packages/javascript-snippets

JavaScript Snippets mirip seperti Emmet, berfungsi untuk mempercepat dalam menulis kode program yakni JavaScript. Caranya dengan mengetik shortcut dan tekan tab maka kode JavaScript langsung jadi. Tidak hanya JavaScript kita juga bisa menginstal Snippets lain seperti PHP Snippets, AngularJS Snippets atau React Snippets.

6. Atom Linter - https://atom.io/packages/linter

Atom linter berfungsi untuk mendeteksi kesalahan pengetikan (typo) dalam menulis kode JavaScript dan bahasa pemrograman lain.

7. Beauty - https://atom.io/packages/atom-beautify

Beauty berfungsi untuk merapihkan penulisan kode program yang kita buat sehingga lebih nyaman dilihat.

8. Minimap - https://atom.io/packages/minimap

Minimap yakni map kecil yang menampilkan seluruh kode program yang kita tulis dalam ukuran font yang sangat kecil. Tujuannya adalah memudahkan kita untuk men-scroll dokumen yang sudah kita ketik sampai ratusan atau ribuan baris.

9. Git Plus - https://atom.io/packages/git-plus

Karena Atom di-develop oleh tim dari GitHub, maka tidak mengherankan jika text editor ini sangat support terhadap GitHub. Git Plus akan memudahkan kamu menulis perintah-perintah Git tanpa membuka terminal/CMD.

10. Remote-Edit - https://atom.io/packages/remote-edit

Remote-Edit berfungsi untuk melakukan remote FTP atau SFTP, maksudnya kita bisa menulis kode program dalam dokumen yang sudah disimpan di hosting. Tinggal masukan hostname, port, username dan password maka FTP sudah tersambung.

Note: Package di atas adalah package yang saya pilih berdasarkan jumlah pengguna, kamu bisa memilih package-package lain yang sejenis yang tersedia dalam Atom packages.

Artikel ini akan membahas tentang beberapa plugin yang akan kita tambahkan kedalam illustrator ataupun atom. Untuk illustrator ada 2 plugin productivity terbaik, dengan menggunakan ini kita dapat menyelesaikan project-project lebih cepat. Untuk plugin illustrator yang kita bahas ini berbayar. 2 plugin illustrator tersebut yaitu vectorscribe dan texturino untuk penjelasannya akan kita bahas satu persatu. Untuk atom plugin-plugin yang kita akan bahas adalah free/gratis diantaranya ada 2 plugin yaitu atom html preview dan terminal plus, lalu di tema ada atom material syntax dan atom material ui. Oke kita langsung saja menuju kePlugin yang pertama.

Vectorscribe

Dengan tujuh alat mandiri yang dimiliki vectorescribe membuatnya powerfull dan sederhana, vectorscribe adalah pilihan utama untuk desain vektor profesional. Vectorscribe sangat dinamis dan sesuai dengan kebutuhan untuk meciptakan hasil karya serta menghemat waktu dan juga intuitif () dalam alur kerja. Ketujuh alat atau fungsinya yaitu

Smart Remove Brush Tool

Befungsi sebagai penghapus pintar yang dapat menghapus kelebihan poin pada vektor dengan cara menggerakkan mouse di objek.

Path Extend Tool

Berfungsi sebagai saran untuk jalur path selanjutnya. Seperti menambahkan atau mengurangi panjang path dengan sangat presisi.

Dynamic Corners Tool

kemampuan luar biasa untuk menambahkan dan mendeteksi sudut yang ingin dibulatkan berdasarkan titik ke satu atau lebih titik di jalan dinamis . contohnya mengubah sudut persegi menjadi bulat atau rounded.

Dynamic Shapes Tool

Berfungsi untuk membentuk umum seperti lingkaran, kotak ataupun bintang dengan mengatur jumlah point nya sendiri dan dapat di modifikasi.

PathScribe Tool – Edit Vector Paths

Ini adalah fungsi yang lebih baik jika ingin mengedit objek vektor dibandingkan pen tool.

Dynamic Measure Tool – Quick and Accurate Measurements

Berfungsi sebagai alat ukur pada objek, hal-hal yang berkaitan dengan panjang atau jarak dapat di ukur dengan alat ini.

Protractor – Draw at Set Angles

Sederhana tapi sangat membantu alat ini untuk menentukan sudut khusus untuk menggambar . Mudah digunakan dan hemat waktu.

Plugin yang kedua yaitu texturino.

Texturino

Membuat texture menjadi mudah seperti yang dibayangkan, plugin ini memberikan kemudahan dalam mengedit sebuah vektor memiliki background texture baik dengan sapuan brush, otomatis mengisi objek, text brush, serta dilengkapi dengan texture manager untuk menambahkan pustaka favorit yang akan diguanakan dalam texturino. Untuk mencari kemudahan dan menghemat waktu dalam membuat texture, plugin ini sangat direkomendasikan.

Selanjutnya kita akan membahas plugin pada software atom yang pertama yaitu atom html preview.

Atom HTML Preview

Ini adalah plugin yang berfungsi sebagai live preview pada project yang kita buat, hanya dengan menekan tombol pemintas Ctrl+Shift+H di editor maka akan tampil panel preview dari project yang kita buat tanpa harus membuka web browser.

Selanjutnya yaitu terminal plus.

Terminal Plus

Bagi para pengguna command prompt windows (CMD) dan sudah terbiasa menggunakannya ini adalah alternatif solusi jika ingin menggunakan cmd tanpa harus membuka jendela baru, karena plugin ini akan terintegrasi langsung dengan atom, sehingga jika ingin membuat, open file, atau melakukan command lain yang sudah biasa dilakukan lewat cmd akan lebih memudahkan kita.

Untuk tema material syntax dan material ui ini kita gunakan supaya tampilan atom lebih menarik dan juga membedakan syntax yang kita buat berdasarkan jenisnya.

Untuk penjelasan bagaimana cara konfigurasi plugin-plugin kedalam software illustrator dan atom akan saya terangkan pada video dibawah, SELAMAT BELAJAR.

Video Tutorial

Demikian ulasan singkat mengenai Konfigurasi Adobe Illustrator dan Atom Supaya Lebih Powerfull. Jika Anda tertarik dengan belajar web design, silakan KLIK LIKE dan SUBSCRIBE. Kemudian silakan Anda kunjungi http://www.pswebmedia.com untuk artikel-artikel lainnya yang juga sangat menarik dan informatif. Pada kesempatan selanjutnya kita akan membahas tentang Mendesain tampilan website menggunakan Illustrator bagian 1, Terimakasih telah membaca artikel ini.