Webpack is love

Seiring berjalannya waktu.. kita harus bersedia mempelajari tools & bahasa pemrograman baru agar menjadi kids progammer zaman now. Dengan berkembangnya teknologi dengan nama Node.JS sekarang yang di prediksi akan sangat Populer pada tahun mendatang, lahir lah library & tools third party yang dilahirkan oleh Node.JS.. Ada ratusan bahkan ribuan tools yang dibuat oleh developer untuk memudahkan developer lainnya menemukan esensi programming yang super efektif yang di kepalai oleh si Node.JS (apasih gua).

Oke kali ini gue mau share salah satu tools yang sangat bermanfaat bagi web programmer, tools ini disebut Webpack

Webpack

Apa sih webpack ? anak mana dia ? kenapa dia dilahirkan ?

Yak untuk mengetahui info detailnya silahkan masuk ke website webpack itu sendiri : https://webpack.js.org wkwkw.
Yak webpack singkatnya adalah suatu module bundler, maksud module bundler ini adalah suatu module yang membundle (membungkus) banyak module menjadi 1!! ingat ya banyak module di kemas kedalam 1 module, sehingga kita tidak perlu mengimport banyak (capek bro).

Contoh ya, misalnya kalian ingin membuat website pakai bootstrap + jquery + library js lainnya.. otomatis kalian harus meng import file css dan js dari framework tersebut berulang kali dan menuliskannya di head(untuk css) dan setelah tag body(untuk js) dan apabila ditengah jalan projek kalian diharuskan menambahkan suatu library tertentu agar fitur yang di rencanakan berjalan dengan baik, akhirnya kalian download library tersebut dan lagi dan lagi menambahkannya pada tag head dan body.

this is the old school way:

but, we could create better structure and have a better life with webpack m8.
dengan webpack kita bisa nge bundle css + js kedalam 1 file javascript dan kalian tinggal cuma nge import 1 file js saja dan jika di projek kalian sekiranya akan menambah file library yang baru, kalian tinggal menambahkannya melalui webpack saja tanpa harus menambahkannya dengan tag script.. Asyik kan

this is the programmer zaman now way:

dan webpack juga punya webpack-dev-server dia sangat berguna ketika kalian sudah malas untuk menekan tombol ctrl + r untuk mereload browser setiap kali kalian mengubah css/js/html kalian. Webpack dev server akan automatis me reload tampilan html apabila ada css,js atau element html  yang berubah.
Dan yang paling hebat dari webpack adalah dia gratis :D Huehuehuehue...
untuk menginstall webpack kalian diharuskan agar menginstall node.js dulu ya sahabat~
yang masih pakai oldschoolway buru buru tobat gan apalagi yang ngoding masih pake notepad++ wwkwkwkw.

-Webpack is love, Webpack is life

Virtual Reality Berbasis Website (VRVIEW) Menggunakan API Google

Jujur sebenernya gue gatau ini api atau apa bahasanya, tapi yang jelas aplikasi vrview google ini bisa nge embed gambar panorama dijadiin aplikasi kaya google street gini loh yang bisa di geser geser


kaya google street khann, yaiyalah wong ini emang dari google :p btw kalo dibuka lewat android/ipon itu bisa di tilt lho untuk gesernya.
. nah kita sebut saja API VRVIEW ya biar gampang, gue jelasin step stepnya untuk bisa embed gambar apapun yang lu mau dijadikan 360 view

1. Fork API Google VRVIEW di github
2. upload gambar apapun yang lo mau
3. selesai, tinggal embed via Iframe

API Google VRVIEW

singkat cerita api ini dibikin oleh google, dan api nya ini dibikin cuma pakai JS tjuy so pastinya dibanding plugin third party kaya WebGL, ini lebih ringan sih (sotoi bgt). karna api ini dibuat pakai JS jadi ndak perlu server sprt apache, nginx buat ngecompile. dan penggunaan api ini juga cukup simpel, tinggal taro api nya di local/hosting anda dan upload image yang mau dijadiin kaya google street, terus tinggal dipanggil aja via url. dalam kasus ini gue hosting api nya di github, jadi nanti gambar gambar yang mau di embed pun bakalan gue upload di github.

Step 1 Hosting API di github

2017 developer gatau github ? kayak dokter yang gatau sama jarum suntik, kayanya minimum requirement untuk bisa kerja sebagai developer apapun itu butuh pengetahuan tentang version control (git,scm)so harusnya ini harga mati brur untuk dipahami sbg dev, tapi github disini gak berfungsi sebagai version control, lebih kaya tempat hosting aja sich. langsung aja fork api nya dari repositori google https://github.com/googlevr/vrview 

yaelah harusnya ini gua gausah ngejelasin cara fork elah!

Jadi Fork ini kaya duplikat semua file, branch pada suatu repositori dan mentransfer isinya ke repositori milik kalian singkatnya gitu CMIIW.

Step 2 Upload Gambar Ke Repositori GITHUB

kalo udah di fork, langsung aja menuju ke repositori akun kalian dan lihat isi API nya dari yang kalian barusan fork.

Disini ada banyak folder dan file yang gausah kita utak atik karna emang ini udah dijadiin kaya framework yak ._. yang perlu diperhatiin disini itu adalah branching (sumpah gua gamau jelasin detail apa itu branching). 

singkat cerita Github itu punya fitur yang namanya static pages. kita bisa bikin static pages di setiap repositori yang kita bikin dengan membuat branch dengan nama "gh-pages", nah semua repositori yang ada branch gh-pages itu bisa diakses sebagai halaman HTML, jadi bukan sebagai file raw, di akses sebagai HTML!!!

contoh nih, gua punya repositori bernama "clean-bootstrap" yang isinya template sampahan yg gua buat untuk belajar, nah disitu gua bikin branch bernama "gh-pages" supaya bisa diakses sebagai html, nih silahkan visit: https://squalvj.github.io/clean-bootstrap . nah index.html nya ini gue hosting di github pada branch "gh-pages" makanya bisa diakses.
disini gua jelasin pattern static pages url github, yaitu

https://<nama_akun_github>.github.io/<nama_repository> 

biar gua gak ngebahas kemana mana, gua anggep udah ngerti static pages nya github, lanjut kita upload gambar, disitu ada folder images yang gunanya buat nampung file image untuk nanti bisa di embed dimana saja (iframe), sebelum upload file gambar, pastiin dulu kalian upload gambar di branch "gh-pages" ya karna kalo tidak, nanti gabisa diakses static pagesnya. silahkan pastiin dulu samain kaya gambar dibawah ini

pastiin gh-pagesnya yang ke checklist dipilihan branch di kiri atas brur.
kalo udah silahkan upload image nya ke dalam folder image, gatau juga caranya ? *astaghfirulloh.
masuk ke folder image > create new file > upload dah image yang mau lu upload
nih gua kasih contoh gambar panorama nya ya kek gini

Step 3 Akses URL Api nya

contoh lu udah ngupload gambar bernama "pemandangan.jpg" 

nah karna branch gh-pages udah dibuat dan repositori ini bisa diakses sebagai html maka api ini udah bisa jalan brur, monggo diakses via url sebagai format kaya gini nih 

https://<nama_akun_github>.github.io/<nama_repository>/?image/<nama_gambar_buat_dijadiin_vrview>

sebagai contoh ya gua pake akun github gua ya

https://squalvj.github.io/vrview/?image=images/pemandangan.jpg

nih iframe dibawah yang manggil gambar yang udah berhasil kita upload tadi

kalian bisa mengupload gambar sebanyak yang kalian mau asal gak ngelebihi 1gb karna github hanya memperbolehkan setiap repositori free user hanya sebesar 1gb, tinggal ganti aja parameter "image" nya pada url sesuai dengan nama gambarnya, mudah kan.
Ini berguna buat mahasiswa yang ambil tugas akhir judul tentang virtual reality berbasis web nihh, semoga bermanfaat. Support me dengan mengetikan angka 5 dikomentar dan lihat apa yg terjadi ?! :D

credit: Patrick Catanzariti, Google vrview

Web Developer Starter Kit V1

Hello Darkness My Old Friend 

Pada hari yg buruk ini, saya ingin sedikit curhat soal kehidupan kuliahan, jadi ceritanya saya tuh lagi bikin judul tugas akhir soal bikin aplikasi android yang dimana bisa tuker tukeran data berbentuk Json lewat server menggunakan metode REST API, untuk aplikasi pada server saya menggunakan Code igniter dan plugin REST Server dan udah clear gak ada masalah, nah untuk yang android ini nih *MAD*. Saya Marah!!! Saya Kesal!!! Saya Benci!!! sama Android Studio #BoikotAndroidStudio, IDE yg satu ini bener bener berat dan buat laptop saya gakuat :( temen ada yang nyaranin pakai eclipse sih, tapi kalau pakai eclipse beberapa dependensi file seperti SDK mesti didownload manual dan di import manual *ppft dan ada beberapa file lainnya yang mesti kita cari sendiri dan import sendiri, sudahlah gausah bahas mereka *grr.
Hi gays Guys, kali ini gue mau ngeshare beberapa tools yang cukup effektif buat kalian yang punya profesi sebagai web developer, ini gak ada unsur sponsor 100% i fking guaranteed it, ini secara pribadi saya anjurkan karna tools tools yang saya akan share benar benar membantu kalian guys yang berkelut dibidang web dev *apacobaberkelut.

1.Prepros

Tools pertama yang mewakili tools tools berikutnya adalah Prepros, tools ini bisa di download di Disini, tools ini free for trial kok jadi cocok buat mahasiswa yg duitnya masih ngentit dari duit bayaran. Gue kasih tau nih intinya aja ya ini tools buat apa, oke dengerin baca nih

1. Prepros ini punya fitur auto reload, jadi nanti si prepros ini bakalan bikinin mini server(Modelnya kaya localhost gitu) yang tugasnya buat nge Watch apa aja yang berubah dari script yang telah diatur untuk di watch, apabila ada yang berubah, nanti pada browser langsung otomatis kereload, jadi gausah pencet Ctrl+R berkali kali brur.
2. Auto Compile, nah ini bocah juga punya fitur auto compile buat ngecompile Less atau Sass, CoffeScript, Haml, Pug (jade), dll. nih ya ane biasa ngebuild css pakai Stylus nah yg pakai stylus pasti ngerti capeknya ngetik di cmd "stylus -w file.styl -o file.css" untuk ngecompile manual format stylus ke css, nah dengan pakek prepros ini udah auto bro, gausah ngetik command itu setiap mau mulai
   


3. Error Log biasanya kalau ngebuild dengan preprosessor semacam Less & Sass, kadang ada human error misalnya lupa tutup bracket, atau ada beberapa tanda kutip gajelaz yang bikin si compiler ngethrow error, dengan prepros ini log errornya bisa di trace gampil brur.

2. Jade Pug

Ini dia preprosesor andalan buat bikin html bro, yaitu Jade Pug, tadinya namanya Jade singkat cerita jade ini kayanya udah dibeli sama Pug *sotoibanget. dengan adanya Jade Pug gua bikin template html semacem company profile atau Cv itu mudahin gue banget ga harus nutup tag html huehuehue, nanti gue share caranya pakai ini di postingan selanjutnya.

3.Stylus

Nah ini gacokan aing bro, ini lethal weapon buat bikin css nih, karna ini juga gua kalo ngebuild css pada format css suka lupa tutup bracket sama tanda semicolon ';' karna keseringan build css pakai stylus wakakak, Stylus singkatnya tuh kaya Sass dan Less CMIIW, dia ngecompile format file ".styl" ke dalam format ".css", asli enak banget pakai stylus bro, lu gausah mikir soal tutup bracket, titik 2 ':' , semicolon ';' lagi cuy, karna stylus pemisahnya pakek indent. nanti gua share brur cara pakeknya *hore.

4.Sublime Text 3/2

Jangan bilang loe selama ini pakek notepad++ ???? *mad* cukup pijat saja yang plus plus, notepad jangan #BaladaCintaSublime. Sublime tuh text editor yang kaya akan plugin, tampilannya punya background gelap gitu jadi gak terlalu nusuk mata banget kalo ngoding malem + blom mandi, dan yg terpenting ini FREE coeg *yummy. nih kalo mau download Disini, nanti gue share plugin buat sublime yg cool abis pastinya di postingan selanjutnya.

Yak itu semua tools yg gue pakek selama ini buat mempercepat dan mengirit waktu gua buat ngoding, seebenrnya gua mau masukin babel juga tapi belum tau banget soal toolsnya wkwkwk. Ciao!