<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Hizam Mohd</title>
    <description>The latest articles on Forem by Hizam Mohd (@zam3858).</description>
    <link>https://forem.com/zam3858</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F34484%2F9fa21098-77ac-473a-9502-08330ee67306.png</url>
      <title>Forem: Hizam Mohd</title>
      <link>https://forem.com/zam3858</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/zam3858"/>
    <language>en</language>
    <item>
      <title>Menjana Nota Latihan Daripada Markdown Ke Word</title>
      <dc:creator>Hizam Mohd</dc:creator>
      <pubDate>Thu, 22 Nov 2018 03:45:13 +0000</pubDate>
      <link>https://forem.com/zam3858/menjana-nota-latihan-daripada-markdown-ke-word-3hm3</link>
      <guid>https://forem.com/zam3858/menjana-nota-latihan-daripada-markdown-ke-word-3hm3</guid>
      <description>&lt;p&gt;Kebanyakan kerja kini lebih kepada membuat coaching (peserta bina aplikasi dengan saya menasihati apabila perlu) dan memberi latihan (saya mengajar, orang lain dengar). Adalah kebiasaan mengikut kehendak peserta untuk diberikan nota untuk dijadikan rujukan dikemudian hari.&lt;/p&gt;

&lt;p&gt;Menyediakan nota untuk latihan kod bagi saya sangat mudah menggunakan markdown. Markdown juga adalah hasil pemikiran pengaturcara bukan? Tetapi jika mereka tidak menggunapakai sublimetext 3 ataupun apa-apa editor/site yang memberikan paparan markdown yang elok, format agak hambar.&lt;/p&gt;

&lt;p&gt;Of course, mereka juga minta dalam bentuk ms-word document jadi...&lt;/p&gt;

&lt;p&gt;Berbekal hasil carian google, saya diperkenalkan dengan &lt;a href="https://pandoc.org"&gt;pandoc&lt;/a&gt;. Ianya tool mudah untuk convert satu-satu format ke format yang lain. Termasuk Markdown ke MsWord!&lt;/p&gt;

&lt;p&gt;Hasilnya (mohon abaikan salah silap pada nota contoh dibawah. Mengantuk dan nak cepat) ...&lt;/p&gt;

&lt;p&gt;Sebelum:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UteAg9tn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/808gbqmmjgb95807lnsw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UteAg9tn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/808gbqmmjgb95807lnsw.png" alt="sebelum"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Selepas:&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UtdCLxFO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ouxxmutrkg50zpliudua.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UtdCLxFO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ouxxmutrkg50zpliudua.png" alt="selepas"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Siap heading text ada kaler-kaler.&lt;/p&gt;

&lt;p&gt;Jadi saya dapat fokus kepada &lt;del&gt;mengcopy-paste&lt;/del&gt; menaip kod dan menceritakan apa ada pada kod-kod itu. &lt;/p&gt;

&lt;p&gt;Sukar ke menggunakan pandoc? Selepas install, saya cuma run command dibawah:&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pandoc -o codeigniterTraining.docx -f markdown -t docx Note.md
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

&lt;p&gt;Setelah lebih kurang 13 saat kemudian, nota codeigniter siap dan boleh terus dihantar ke client dengan husnuzon semua okay saja.&lt;/p&gt;

</description>
      <category>pandoc</category>
      <category>markdown</category>
    </item>
    <item>
      <title>Membina Function Berantai Dalam Javascript</title>
      <dc:creator>Hizam Mohd</dc:creator>
      <pubDate>Tue, 20 Mar 2018 07:35:10 +0000</pubDate>
      <link>https://forem.com/zam3858/membina-function-berantai-dalam-javascript-363e</link>
      <guid>https://forem.com/zam3858/membina-function-berantai-dalam-javascript-363e</guid>
      <description>&lt;p&gt;Setelah bertahun-tahun mengadap javascript sebagai seorang web-developer, baru-baru ni terfikir hendak tahu bagaimana hendak membuat Chaining Function. Selalu menggunakan tetapi tidak pernah sendiri buat.&lt;/p&gt;

&lt;p&gt;Untuk sesetengah orang, Fungsi Berantai ini pernah diguna cuma tidak dikenali apakah namanya. Jadi paling mudah tengok sahaja code dibawah yang diambil dari dokumentasi MomentJS:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; let a = moment().add(7, 'days')
                 .subtract(1, 'months')
                 .year(2009)
                 .hours(0)
                 .minutes(0)
                 .seconds(0);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Setiap fungsi atau method class Moment() itu dipanggil berterusan. Selepas add(), dipanggil substract(), kemudian year(), selepas itu minutes() dan akhir sekali hasil seconds() diumpukkan ke pembolehubah a. Ianya tidak dipanggil berasingan seperti:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; let a = moment().add(7, 'days');
     a = a.subtract(1, 'months');
     a = a.year(2009);
     a = a.hours(0)
     a = a.minutes(0)
     a = a.seconds(0);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Hasil kedua-dua contoh code di atas sama tetapi tentunya lebih mudah untuk membaca yang menggunakan Chain Method.&lt;/p&gt;

&lt;p&gt;Bagaimana kita hendak membuat Chain Method ini? Tidak susah sebenarnya. Cuma function itu perlu return sesuatu yang ada function yang akan dipanggil seterusnya. Lihat contoh dibawah: &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; class Header {
     constructor(  ) {
       this.tajuk = "Tajuk baru";
       this.lebar = "100%";
       this.warna = "#000";
     }

     tukarWarna(warna) {
        this.warna = warna;
        return this;
     }

     tukarLebar(lebar) {
        this.lebar = lebar;
        return this;
     }

     tukarTajuk(tajuk) {
        this.tajuk = tajuk;
        return this;
     }

     paparkan() {
        return `&amp;lt;div style="width:${ this.lebar }; 
                            background-color: ${ this.warna };"
                &amp;gt;${ this.tajuk }&amp;lt;/div&amp;gt;`;
     }
 }

    let myHeader = new Header()
                .tukarTajuk("Ini First")
                .tukarWarna("#fff")
                .tukarLebar("80%");

    console.log(myHeader.paparkan());
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Method-method dalam Header() ini akan memulangkan instance object itu sendiri. Jadi apabila tukarTajuk() dipanggil ia memulangkan instance object Header dan memanggil pula tukarWarna(). tukarWarna() pula akan memulangkan instance object yang dikemaskini dan memanggil pula method tukarLebar() pada instance itu. Akhirnya instance Header itu akan diumpukkan kepada pembolehubah myHeader.&lt;/p&gt;

&lt;p&gt;Mudah saja kan. :D&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
  </channel>
</rss>
