Langsung ke konten utama

Day 86 : Tips install live server di vscode

Hari ini, saya sedang menikmati waktu belajar Kubernetes melalui video di YouTube. Namun, saat saya menjelajahi beberapa video lain, saya menemukan satu yang sangat menarik. Judulnya adalah ASMR Programming Tanpa berpikir panjang, saya langsung memutuskan untuk menontonnya dan mencoba mengikuti langkah-langkahnya.

Selama menonton, saya mengikuti setiap instruksi dengan hati-hati, mulai dari menulis kode HTML untuk mendesain tampilan game, hingga menambahkan logika JavaScript untuk membuat game berjalan. Setelah selesai menulis beberapa baris kode, saya ingin segera melihat hasilnya di browser. Namun, begitu saya mengklik kanan pada file HTML dan mencoba memilih opsi untuk membuka dengan browser, saya merasa ada yang aneh. Ternyata, saya tidak melihat opsi untuk membuka file dengan live server.

Setelah sedikit berpikir, saya baru sadar bahwa saya belum menginstal Live Server di editor kode saya. Live Server adalah ekstensi di Visual Studio Code yang memungkinkan kita untuk melihat perubahan yang terjadi pada file HTML secara langsung di browser tanpa harus me-refresh secara manual. Hal ini sangat mempermudah dalam pengembangan web, terutama saat kita bekerja dengan kode yang membutuhkan banyak percobaan dan perubahan cepat.



Langkah 1: Instalasi Live Server

  1. Buka Visual Studio Code di komputer Anda.
  2. Pada panel sebelah kiri, cari dan klik Extensions (ikon kotak dengan empat bagian).
  3. Di kolom pencarian, ketik Live Server.
  4. Pilih ekstensi yang bernama Live Server yang dikembangkan oleh Ritwick Dey.
  5. Klik tombol Install untuk memasang ekstensi ini.

Langkah 2: Menggunakan Live Server

  1. Setelah berhasil menginstal, buka file HTML yang ingin Anda lihat di browser.
  2. Klik kanan pada file HTML dan pilih Open with Live Server.
  3. Browser akan terbuka otomatis menampilkan hasil kerja Anda. Setiap kali Anda mengubah dan menyimpan file, browser akan langsung menampilkan perubahan terbaru tanpa perlu me-refresh manual.

Langkah 3: Nikmati Pengalaman Coding yang Lebih Mudah

Dengan Live Server terpasang, sekarang Anda bisa lebih fokus pada penulisan kode tanpa perlu khawatir tentang proses manual yang memakan waktu. Selain itu, ekstensi ini juga membantu Anda melihat kesalahan secara langsung, sehingga Anda bisa segera memperbaikinya.

Dari pengalaman saya hari ini, saya belajar bahwa meskipun terkadang kita merasa bingung dengan masalah teknis yang muncul, selalu ada cara mudah untuk mengatasinya. Dengan sedikit riset dan mengikuti langkah-langkah yang tepat, kita bisa terus maju dan menyelesaikan tugas dengan lebih efisien.

Saya harap langkah-langkah di atas bisa membantu teman-teman yang juga sedang belajar membuat aplikasi web atau game sederhana dengan HTML, CSS, dan JavaScript. Selamat mencoba dan semoga berhasil!

Komentar

Posting Komentar

Postingan populer dari blog ini

Day 109 : Akhir dari Perjalanan PKL: Terima Kasih untuk PT Excellent

Hari ini adalah hari terakhir saya menjalani PKL di PT Excellent. Momen ini menjadi penutup dari perjalanan yang luar biasa penuh pembelajaran, pengalaman, dan kenangan yang tak terlupakan. Saya ingin menyampaikan rasa terima kasih yang sebesar-besarnya kepada keluarga besar PT Excellent atas kesempatan, bimbingan, dan kepercayaan yang telah diberikan kepada saya selama saya melaksanakan PKL di sini. Selama PKL, saya mendapatkan banyak pengetahuan baru yang sebelumnya belum pernah saya pelajari. Dari segi teknis, saya belajar banyak tentang teknologi seperti Zimbra, bahasa pemrograman Golang, hingga DevOps hal-hal yang awalnya terasa asing, kini menjadi ilmu yang berharga dan menjadi ilmu baru bagi saya. Namun, pembelajaran saya di PT Excellent tidak hanya terbatas pada aspek teknis. Saya juga belajar tentang kedisiplinan, tanggung jawab, profesionalisme, serta bagaimana pentingnya kolaborasi dalam lingkungan kerja. Terima kasih kepada Mas Ridwan, yang selalu membimbing saya dengan sab...
Posting Komentar
Baca selengkapnya

Day 108 : H-2 menuju akhir PKL

Waktu rasanya berjalan begitu cepat. Hari ini sudah masuk H-2 menuju akhir masa PKL saya di PT Excellent. Ada perasaan campur aduk antara lega karena akhirnya berhasil menyelesaikan semuanya, senang karena banyak pengalaman baru yang saya dapatkan, tapi juga sedikit. PKL di PT Excellent bukan cuma soal kerjaan atau belajar teknis, tapi juga perjalanan penuh cerita dan pelajaran. Setiap hari yang saya jalani di sini selalu memberi pengalaman baru, baik dari tugas yang menantang, bimbingan dari mentor, maupun suasana kerja yang hangat. Salah satu hal yang paling membekas adalah semangat belajar dari Pak Bos. Beliau pernah bercerita tentang bagaimana sibuknya beliau tapi tetap bisa belajar bahasa baru bahkan lebih dari satu bahasa. Itu benar-benar membuka mata saya, bahwa waktu senggang yang sering terbuang sebenarnya bisa dimanfaatkan untuk hal-hal yang lebih produktif. Mas Ridwan, yang selalu menemani kami saat briefing pagi, juga memberikan banyak pelajaran berharga. Setiap pagi kami b...
Posting Komentar
Baca selengkapnya

Day 82 : Membuat image dengan bahasa pemrograman golang

Hari ini, saya melanjutkan perjalanan belajar Docker dengan memanfaatkan Visual Studio Code (VSCode), editor favorit saya. Fokus utama saya adalah memahami cara membuat Docker image menggunakan alur kerja yang terintegrasi dengan VSCode. Proses ini tidak hanya efisien tetapi juga menyenangkan karena VSCode memiliki ekosistem yang kaya, termasuk berbagai ekstensi pendukung yang mempermudah pekerjaan. Mengapa Menggunakan VSCode untuk Docker? VSCode menyediakan lingkungan pengembangan yang lengkap dengan berbagai fitur, seperti: Docker Extension : Mempermudah pengelolaan image, container, dan jaringan Docker langsung dari editor. Terminal Terintegrasi : Menjalankan perintah Docker langsung dari VSCode tanpa perlu beralih aplikasi. Debugging Tools : Membantu melacak masalah aplikasi yang berjalan di dalam container, terutama bagi pengembang Golang. Dengan semua keunggulan ini, VSCode menjadi alat yang sangat mendukung dalam pengembangan berbasis Docker. Langkah-langkah Membuat Docker Image...
2 komentar
Baca selengkapnya