[Riset] Membuat Presentasi Demo Code dengan menggunakan code-surfer

Photo by Jeremy Bishop on Unsplash

Pernah tidak teman-teman mengalami kesulitan membuat presentasi yang dimana presentasi ini memiliki source code yang harus didemokan dan tunjukkan ke peserta? yaah biasanya kasus ini sering terjadi ketika mengajar, workshop dan kegiatan lainnya. Emangnya itu penting ya mas? khan tinggal copy and paste code aja kemudian dimasukkan ke presentasi? Eh tidak semua semudah dan sesederhana itu cortana!

Ok coba kita ambil contoh misal saya melampirkan code dengan menggunakan carbon, saya akui saat pertama menggunakan carbon memang bagus, bagus saat kita mendokumentasikan code kedalam laporan atau saat kita sharing code tersebut ke teman.

Namun sayang sekali ketika di presentasikan malah peserta tidak bisa melihat code tersebut sehingga saya harus mengganti lagi gambarnya dan yah waktunya jelas keburu dan tidak cepat terlebih kalau saya sudah dalam kondisi presentasi dan alhasil saya lebih nyaman demo di code editor daripada menggunakan presentasi.

Text Editor is your friend fellas, Photo by Ilya Pavlov on Unsplash

Nah untungnya saya menemukan solusi ketika saat saya menghadiri acara React Indonesia pertama setelah beberapa tahun vakum, saya sangat antusias ketika mas Zain Fathoni mendemokan code di presentasinya. “Wah keren juga nih! bagus nih kalau buat ngajar nanti”, dan akhirnya saat acara selesai saya ngobrol sebentar dengan mas Zain dan diskusi tentang bagaimana beliau cara presentasi mendemokan code, Dan ternyata presentasi yang digunakan mas Zain ini adalah web aplikasi Javascript dengan menggunakan library code Surfer

Besoknya saya langsung saja mencari informasi dan riset library ini, agar jadi tulisan artikel ini dan juga bahan saya buat mengajar, namun jelas akan membutuhkan penjelasan yang cukup panjang :

Kenalan dulu sama MDX

MDX ini adalah Markdown yang ditulis dengan format jsx, Markdown ini sendiri adalah bentuk penulisan text menjadi html yang digunakan untuk membuat konten pada web, biasanya kita menemui Markdown saat menulis Medium, dokumentasi di Github atau layanan Git lainnya.

MDX ini bisa memanggil component yang sudah kita buat dengan kondisi sudah bekerja. Jadi kita bisa membuat dokumentasi tertulis beserta dengan demo-nya juga, dengan begitu orang yang membaca dokumentasi ini bisa lebih mudah pemahamannya karena ada contoh component yang bisa di demokan. Untuk gambaran umumnya silahkan lihat gambar dibawah ini :

salah satu contoh penggunaan MDX, bisa temen-temen lihat di : https://mdxjs.com/

Lalu apa hubungannya dengan presentasi?

Nah dengan adanya MDX ini ada seseorang yang menciptakan library bernama mdx-deck yang dimana dia menggunakan konsep MDX ini dan di jadikan kedalam bentuk presentasi seperti dibawah ini :

Demo mdx-deck, gif from https://github.com/jxnblk/mdx-deck

Berarti dengan begini berarti saya cukup menggunakan mdx-deck donk?

Untuk keperluan presentasi biasa seperti diatas mungkin sudah cukup buat teman-teman, namun inti pembahasan ini adalah demo code dan jelas sekali kalau mengandalkan mdx-deck saja masih terasa kurang dan tidak bisa melakukan hal lebih seperti yang ada di bawah ini :

ini contoh code yang ada pada demo https://mdx-deck.jxnblk.com/

Nah Supaya tampilan code menjadi lebih menarik, diperlukannya library yang menggunakan bagian dari mdx-deck ini bernama code-surfer, aplikasi ini sendiri menggunakan mdx-deck sebagai slidernya, namun code-surfer ini memiliki fitur scroll, zoom, dan highlight code yang menurut saya sangat membantu demo code saya seperti contoh dibawah ini :

Demo code surfer, gif from https://github.com/pomber/code-surfer

Nah sekarang sudah paham kan bagaimana konsep library code-surfer ini? Jika sudah sekarang bagaimana cara kita menggunakan aplikasi tersebut? sebelum mulai saya cuma mengingatkan bahwa code-surfer ini masih dalam pengembangan versi alpha, mungkin teman-teman akan menemukan beberapa bug, tapi jangan khawatir untuk presentasi highlight code sudah cukup stabil kok dan perlu di ingat juga kalau kita bisa menggunakan bahasa pemograman lain, namun kita tidak bisa mendemokan component langsung(ya karena mdx berbasis jsx).

Instalasi dan cara penggunaan code-surfer

Saat awal instalasi saya sempat menemukan beberapa masalah ketika saat saya pertama kali membuat project dengan menggunakan npm init, namun setelah melakukan riset dengan beberapa percobaan install akhirnya saya menemukan cara yang lebih mudah untuk membuat Project code-surfer dengan menggunakan perintah ini :

npx create-code-surfer-deck nama-folder

Tulis saja perintah tersebut maka project akan terbuat dan pastikan koneksi internet juga stabil agar pembuatan dan download tidak mengalami masalah, setidaknya tidak sampai setengah jam kok, dan setelah terbuat jalankan dengan perintah:

npm start

Aplikasi akan meng-set server secara default di url localhost:8080, jadi silahkan saja buka Browser dan masukkan url localhost:8080 tersebut, atau bahkan kalau sudah terbiasa menjalankan aplikasi berbasis npm, Browser akan membuka link tersebut secara otomatis sesuai dengan url tadi dan menampilkan tampilan seperti ini :

Saat Aplikasi pertama kali terbuka maka akan menampilkan halaman ini

Untuk memulai mengubah code bisa juga dengan membuka file “deck.mdx” disana juga ada beberapa contoh yang bisa digunakan kok.

Contoh code yang sudah disediakan

Owh iya saya juga menemukan masalah saat memanggil gambar dari local, saya sendiri sudah menggunakan library bawaan yang sudah di berika oleh code-surfer yaitu raw-loader, namun sayangnya library ini tidak bisa saya gunakan untuk dan akhirnya saya menemukan library lain untuk load gambar dengan menggunakan library bernama “File Loader”, untuk installasi silahkan saja install dengan npm:

npm install file-loader --save

Anyway code-surfer ini sudah saya gunakan untuk mengajar di salah satu boot camp coding ternama di Indonesia, sebagai yang membuat materi cukup puas dengan code-surfer ini sebagai media mengajar saya, karena saya lebih percaya diri saat menjelaskan code dan materi kepada para peserta.

Saya rasa tulisan ini cukup sampai disini, mungkin jika ada pertanyaan seputar code-surfer atau hal yang mau di bahas bisa sharing sama saya 😁

Thanks sudah membaca tulisan ini, semoga dengan adanya tulisan ini bisa membantu temen-temen untuk berkembang dan menyampaikan code dengan baik, dan semoga kita akan ketemu di tulisan saya berikutnya.. ciaao