Dimensi TutupBotol: January 2018

Sunday, January 28, 2018

Webpack untuk Pemula - Part II

Di part 1 kita udah belajar buat make webpack, Nah sekarang bakalan belajar yang webpack-dev-server. Sesuai namanya, webpack-dev-server ini ngebuat virtual server di local hardisk kita. Jadi pas akses htmlnya udah lewat server ataw protocol http, g' lewat file://bla blabla lagi kyk dipostingan sebelumnya.. :D
So pertama-tama mari kita install webpack-dev-servernya dengan perintah :
npm i webpack-dev-server --save-dev

Stlah di install kita jg bisa liad perubahannya di package.json kek gini :

Naah...terakhir kita ubah script poipo_buildnya biar make webpack kek gini :

So... tinggal jalanin perintah npm run poipo_build

Selese daaah.... mari kita buka http://localhost:8080/

Siiipsss.... cukup sekian untuk yang part II ini... ehehe... :D

Semoga bermanfaat... :)

Sampai jumpa di part III...

Rename and Delete Branch Using Gitbash

Example :

For renaming remote branch, we just have to push our new renamed local branch and then delete the remote branch....

Friday, January 26, 2018

Webpack untuk Pemula

Di postingan sebelumnya kita udah maen javascript tanpa make webpack. Naah dipostingan ini kita bakalan naroin webpack. Jadi klu yg belum liad2 postingan sebelumnya... Silahkan lihat disini...

Github untuk postingan ini bisa dilihat disini....
Ok... pertama-tama sebelum install webpack, kita harus install nodejs dl... di sini Hisoka pake node js versi 6.11.1

Nah... setelah install nodejs, berikutnya kita inisialisasi projectnya dl... jalanin 'npm init' terus ikuti langkah2 yg terlihat diconsole...

Naah...tinggal ketik YES... dan enter... trs kita dapat file package.json yg isinya kek gini :

Terus berikutnya baru kita install webpacknya. Tinggal running command ini :
npm i webpack --save-dev

--save-dev itu nunjukin klu webpack syarat dipake buat development....

Nah stelah slese diinstall kita bisa liad perubahannya dengan penambahan folder node_modules sama di package.jsonnya...

Berikutnya kita kasih tau webpacknya buat ngebuild file app.js. So tambain gini di package.json :

Siipss... jadi webpacknya bakalan nyari file app.js ters hasil kompilasinya ditaro di folder dist/bundle.js... Ok next kita ubah kode javascript di app.js soalnya dia bakalan diload sm webpacknya pertama kali... so beralih ke app.js dan ubah jadi kek gini :

Siipss... cuma nambain import bla bla dari file poipo-dom-loader.js.. .Ters kita ubah juga poipo-dom loadernya kek gini biar bisa di import :

Siiipss... daaah deeeeh.... tinggal running webpacknya pake command :
npm run poipo_build
Hasilnya :

Setelah berhasil di build kita liad ada folder baru 'dist' yg isinya bundle.js.... naah bundle.js ini kita load ke file.htmlnya kek gini :

Daaan... Hasilnya...

Siipss... daaah....

Btw... 1 tambahan... buat ngekompile webpack, kita bisa pake minified version. Minified version itu biasanya buat production. Jadi bundle.js-nya lebih kecil file sizenya... Nah cara buat bikin kayak gitu kita tambain kode berikut di package.json...

So tinggal ditambain flag '-p' ajjah.. itu maksnya build buat production... Trs klu kita pengen build tinggal pake "npm run poipo_build_prod"... bundle.js-nya dikomparasi klu pake -p dan g' pake -p...

Naah.. tuh.. file sizenya cm skitar 1kB,,,beda klu g' pake -p yg sizenya sekitar 4kB... dan berikut komparasi isi bundle.js-nya...
Klu g' pake -p :

Klu pake -p :

Siiipsss... sekian dl untuk part ini... sampai jumpa di part berikutnya... :)

Wednesday, January 24, 2018

Iseng Javascript haha... :D Part II

Di part 1 sebelumnya udah pake javascript... Nah sekarang pengen iseng2 buat css. Tinggal nambain kode ini di index.html :

Terus kode main.css nya kek gini :

body {
  font-family: Helvetice, Arial, sans-serif;
  text-align:center
}

h1 {
  font-size: 28px;
  margin: 20px;
}

p {
  border: 1px solid blue;
  padding: 20px;
  margin: 30px auto;
  width: 50%;
  font-size: 20px;
}

Hasil :

Iseng Javascript haha... :D

Berikut previewnya :

Berikut kodenya :
index.html :

<!doctype html>
<html lang="en">
<head>
  <title> Iseng Javascript </title>
</head>
<body>
  <h1> This is without using webpack </h1>
  <button id="poipo-button"> Show Paragraph </button>
  <p id="poipo-paragraph"> Hellow there... Please click the button... :) </p>
  
  <script src="js/poipo-dom-loader.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

poipo-dom-loader.js :

1 2	var myButton = document.querySelector('#poipo-button'); var myParagraph = document.querySelector('#poipo-paragraph');

app.js :

var showParagraph = false;

myButton.addEventListener('click', toggleState);

function toggleState() {
  showParagraph = !showParagraph;
  updateParagraph();
  updateButton();
}

function updateParagraph() {
  if(showParagraph) {
    myButton.textContent = 'Hide Paragraph';
  } else {
    myButton.textContent = 'Show Paragraph';
  }
}

function updateButton() {
  if(showParagraph) {
    myParagraph.textContent = 'Hay hay hay hay... Thanks for clicking the button...:D';
  } else {
    myParagraph.textContent = 'Please click the button';
  }
}

Github :
https://github.com/HyosokaPoipo/isengjavascript

Lnjut ke Part II...

Tuesday, January 23, 2018

Doa Agar Diberi Kekuatan untuk Berdzikir dan Bersyukur

ALLAHUMMA A’INNI ‘ALA DZIKRIKA WA SYUKRIKA WA HUSNI ‘IBADATIK [Ya Allah, tolonglah aku agar selalu berdzikir/mengingat-Mu, bersyukur pada-Mu, dan memperbagus ibadah pada-Mu].” (HR. Abu Daud dan Ahmad, shahih)

Sumber : https://rumaysho.com/627-dzikir-dan-syukur-yang-sebenarnya.html

Youtube :

Semoga bermanfaat.. :)

Sunday, January 21, 2018

Add Vuejs Syntax Highlight to Sublime 3

First thing first... download the package from this link.. (https://github.com/vuejs/vue-syntax-highlight)..

Extract the zip file to sublime 3 package directory.

Just restart sublimeeee... and... tadaaaa.... :D

Another way that we can use is using package controller. So hit 'Preferences' menu then choose 'Package Control' as shown below :

Then choose 'Install Package' :

Search for 'Vuejs Complete Package' :

After that, restart sublime 3 again.. .aaaand.. doneee... :D

Creating New Quasar Project using Windows 7

run

npm i -g quasar-cli --no-optional

After successfully installing quasar, we can execute this command :

Above steps are only executed once, so when we wanto create another quasar project in future, we don't have to do those commands again. We can simply just create our first quasar app yeaaah.... :D
Ok let's create our first quasar app by running this command :