<?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>DEV Community: Midori</title>
    <description>The latest articles on DEV Community by Midori (@fzn0x).</description>
    <link>https://dev.to/fzn0x</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%2F515457%2F1311912e-2986-4a7a-bdbe-c32e54c93ea3.jpg</url>
      <title>DEV Community: Midori</title>
      <link>https://dev.to/fzn0x</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/fzn0x"/>
    <language>en</language>
    <item>
      <title>🏰 Agentic Security: Building an Autonomous Pentesting Lab with Watchtow</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Fri, 27 Feb 2026 22:14:28 +0000</pubDate>
      <link>https://dev.to/fzn0x/agentic-security-building-an-autonomous-pentesting-lab-with-watchtow-3mp0</link>
      <guid>https://dev.to/fzn0x/agentic-security-building-an-autonomous-pentesting-lab-with-watchtow-3mp0</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr0kymlip2584g7rrwdvm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr0kymlip2584g7rrwdvm.png" alt=" " width="524" height="279"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As developers, we're building faster than ever. But security is often an afterthought—a manual chore we do right before a release.&lt;/p&gt;

&lt;p&gt;What if you had a team of AI agents that could think like a pentester, run the tools for you, and analyze the results in real-time?&lt;/p&gt;

&lt;p&gt;Meet &lt;strong&gt;Watchtower&lt;/strong&gt;: an open-source, AI-powered framework that uses LangGraph to orchestrate a "Planner-Worker-Analyst" loop for web and network security.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem with Traditional Scanners
&lt;/h2&gt;

&lt;p&gt;Automated scanners like Nmap or Nuclei are great, but they are "dumb." They run a predefined sequence and dump a log file. You then have to:&lt;/p&gt;

&lt;p&gt;Parse the logs.&lt;br&gt;
Filter false positives.&lt;br&gt;
Decide which tool to run next based on what you found.&lt;br&gt;
Watchtower reverses this. The AI agents do the thinking, while the CLI tools do the heavy lifting.&lt;/p&gt;
&lt;h2&gt;
  
  
  Real-World Scenario: The "Launch Week" Sprint
&lt;/h2&gt;

&lt;p&gt;You've just built a new REST API for a fintech project. You're using FastAPI and PostgreSQL. It's Friday afternoon, and you're launching on Monday. You have no time for a professional audit, but you need to know if you've missed something obvious.&lt;/p&gt;
&lt;h2&gt;
  
  
  Here is how you use Watchtower to secure your API.
&lt;/h2&gt;
&lt;h3&gt;
  
  
  The "Batteries Included" Setup
&lt;/h3&gt;

&lt;p&gt;Watchtower supports 23+ security tools out of the box. Running it in Docker ensures you don't have to spend hours installing binaries like ffuf or sqlmap.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker-compose up &lt;span class="nt"&gt;-d&lt;/span&gt;
docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-it&lt;/span&gt; ai_pentest_framework /bin/bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Attacking the Auth Layer
&lt;/h3&gt;

&lt;p&gt;Most critical bugs live behind the login. Watchtower's newest update allows you to inject session metadata directly into the agent's logic.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python &lt;span class="nt"&gt;-m&lt;/span&gt; watchtower.main &lt;span class="nt"&gt;-t&lt;/span&gt; https://api.myproject.io &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--cookie&lt;/span&gt; &lt;span class="s2"&gt;"session=SESS_ID_HERE"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--header&lt;/span&gt; &lt;span class="s2"&gt;"Authorization: Bearer MY_JWT_TOKEN"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Watching the Agents "Think"
&lt;/h3&gt;

&lt;p&gt;Once started, the Planner agent analyzes your target. It's not just running tools; it's strategizing:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I see a Server: uvicorn header. The target is likely a Python API. I will run arjun to find hidden parameters and sqlmap to test for injection concurrently."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Because of the new Parallel Recon feature, Watchtower doesn't wait. It fires off multiple tools at once, gathering data faster than a human could.&lt;/p&gt;

&lt;h3&gt;
  
  
  Smart Truncation: No more "Token Soup"
&lt;/h3&gt;

&lt;p&gt;LLMs have context limits. If a scanner dumps 10,000 lines of logs, the AI usually gets "lost."&lt;/p&gt;

&lt;p&gt;Watchtower uses Smart Truncation. It scans the logs for keywords like [+], Vulnerability, or Critical and only sends the high-value snippets to the Analyst agent. This reduces costs and drastically improves the accuracy of the findings.&lt;/p&gt;

&lt;p&gt;The Results: A Human-Readable Report&lt;br&gt;
At the end of the loop, you don't get a CSV filled with 404 errors. You get a Pentest Report that looks like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg1nebjt2rwtcv73cp1h3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg1nebjt2rwtcv73cp1h3.png" alt=" " width="608" height="158"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrap Up
&lt;/h2&gt;

&lt;p&gt;Security doesn't have to be a bottleneck. By shifting to Agentic Security, we can automate the "thinking" part of red-teaming, allowing us to catch vulnerabilities before they hit production.&lt;/p&gt;

&lt;p&gt;Check out Watchtower on GitHub: &lt;a href="https://github.com/fzn0x/watchtower" rel="noopener noreferrer"&gt;https://github.com/fzn0x/watchtower&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have you used AI for security testing yet? Let me know in the comments!&lt;/p&gt;

</description>
      <category>ai</category>
      <category>security</category>
      <category>automation</category>
      <category>cli</category>
    </item>
    <item>
      <title>Membuat Javacript dan Typescript packages dengan Typescript</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Fri, 11 Feb 2022 16:59:36 +0000</pubDate>
      <link>https://dev.to/fzn0x/membuat-javacript-dan-typescript-packages-dengan-typescript-43bc</link>
      <guid>https://dev.to/fzn0x/membuat-javacript-dan-typescript-packages-dengan-typescript-43bc</guid>
      <description>&lt;p&gt;Javascript merupakan bahasa yang memiliki lingkungan dengan penggemar paling banyak, termasuk komunitas NPM yang memiliki banyak sekali package yang dibuat di lingkungan Javascript, sebagai programmer Typescript, kita harus menyadari jika Typescript pada akhirnya akan di transpile menjadi Javascript, oleh karena itu, membuat ekosistem yang hybrid (Javascript &amp;amp; Typescript) menjadi sangat penting, menggunakan tools seperti executable &lt;code&gt;tsc&lt;/code&gt; dari package &lt;code&gt;typescript&lt;/code&gt; menjadi kewajiban untuk melakukan proses transpile.&lt;/p&gt;

&lt;p&gt;Di tutorial ini, penulis akan memberitahu bagaimana membuat package yang hybrid (menerima dua spesifikasi module yang berbeda dan pula menerima dua bahasa yang memiliki lingkungan yang sama), dimana kalian bisa menggunakan packagenya melalui Typescript (Clue: .d.ts required) maupun Javascript.&lt;/p&gt;

&lt;h2&gt;
  
  
  Membuat folder project
&lt;/h2&gt;

&lt;p&gt;Kita akan membuat folder untuk project package yang akan kita bangun terlebih dahulu, tidak lupa dengan membuat package.json dengan format yang benar.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;tsc-practice

&lt;span class="nb"&gt;cd &lt;/span&gt;tsc-practice
npm init &lt;span class="nt"&gt;-y&lt;/span&gt; &lt;span class="c"&gt;# untuk memasang langsung semua default value pada package.json &lt;/span&gt;

&lt;span class="c"&gt;# atau&lt;/span&gt;
npm init &lt;span class="c"&gt;# mengisinya satu persatu&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Disclaimer: penggunaan nama folder diatas tidak &lt;code&gt;opinionated&lt;/code&gt;, bisa menentukannya sendiri.&lt;/p&gt;

&lt;h2&gt;
  
  
  Install tools yang dibutuhkan
&lt;/h2&gt;

&lt;p&gt;Kita akan menginstall &lt;code&gt;typescript&lt;/code&gt; untuk proses transpile sebelum melanjutkan ke permainan sesungguhnya yaitu pada bagian konfigurasi.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i &lt;span class="nt"&gt;-D&lt;/span&gt; typescript
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Membuat file konfigurasi
&lt;/h2&gt;

&lt;p&gt;Kita akan membuat package dimana akan menerima lingkungan module ESM dan CJS. &lt;code&gt;tsc&lt;/code&gt; memiliki fitur untuk menggunakan file config yang berbeda, disini kita akan membuat file konfigurasi untuk ESM maupun CJS.&lt;/p&gt;

&lt;p&gt;Sebelum itu, untuk melihat semua property konfigurasi yang tersedia dari &lt;code&gt;tsc&lt;/code&gt;, kalian bisa menggunakan &lt;code&gt;npx tsc --init&lt;/code&gt;, untuk menyesuaikan kebutuhan setelah mengikuti artikel ini.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Membuat file config untuk CJS&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Buat file bernama &lt;code&gt;tsconfig.cjs.json&lt;/code&gt; pada root directory, lalu isi dengan konfigurasi seperti dibawah ini.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;compilerOptions&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="cm"&gt;/* Visit https://aka.ms/tsconfig.json to read more about this file */&lt;/span&gt;
    &lt;span class="cm"&gt;/* Projects */&lt;/span&gt;
    &lt;span class="cm"&gt;/* Language and Environment */&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;target&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;es6&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="cm"&gt;/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="cm"&gt;/* Modules */&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;module&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;commonjs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="cm"&gt;/* Specify what module code is generated. */&lt;/span&gt; &lt;span class="cm"&gt;/* Specify the root folder within your source files. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;moduleResolution&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;node&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="cm"&gt;/* Specify how TypeScript looks up a file from a given module specifier. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="cm"&gt;/* Emit */&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;declaration&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Generate .d.ts files from TypeScript and JavaScript files in your project. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;declarationMap&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Create sourcemaps for d.ts files. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sourceMap&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Create source map files for emitted JavaScript files. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;outDir&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dist/cjs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="cm"&gt;/* Specify an output folder for all emitted files. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;esModuleInterop&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;forceConsistentCasingInFileNames&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Ensure that casing is correct in imports. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="cm"&gt;/* Type Checking */&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;strict&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Enable all strict type-checking options. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;skipLibCheck&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Skip type checking all .d.ts files. */&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="c1"&gt;// include used to fix: Cannot write file because it would overwrite input file when adding exclude.&lt;/span&gt;
  &lt;span class="c1"&gt;// "include": ["*.ts"],&lt;/span&gt;
  &lt;span class="c1"&gt;// "exclude": ["**/*.spec.ts"] // jika ingin menambahkan tests.&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Disini saya akan breakdown property yang penting untuk digunakan, selain itu adalah property konfigurasi additional untuk mempermudah pengembangan package.&lt;/p&gt;

&lt;p&gt;Disini kita akan menggunakan &lt;code&gt;es6&lt;/code&gt; sebagai spesifikasi dari ecmascript yang paling banyak digunakan namun jika anda ingin melakukan transpile ke spesifikasi yang lebih tinggi seperti &lt;code&gt;es2016&lt;/code&gt; itu tidak masalah. Ketahui versi spesifikasi EcmaScript &lt;a href="https://www.w3schools.com/Js/js_versions.asp" rel="noopener noreferrer"&gt;disini&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;Kita juga akan menggunakan &lt;code&gt;"module": "commonjs"&lt;/code&gt; untuk memberitahu &lt;code&gt;tsc&lt;/code&gt; melakukan transpile menjadi Javascript dengan spesifikasi module &lt;a href="https://en.wikipedia.org/wiki/CommonJS" rel="noopener noreferrer"&gt;commonjs&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;outDir&lt;/code&gt; untuk menentukan dimana hasil transpile akan berada.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Membuat file config untuk ESM&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Buat file bernama &lt;code&gt;tsconfig.esm.json&lt;/code&gt; pada root directory, lalu isi dengan konfigurasi seperti dibawah ini.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;compilerOptions&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="cm"&gt;/* Visit https://aka.ms/tsconfig.json to read more about this file */&lt;/span&gt;
    &lt;span class="cm"&gt;/* Projects */&lt;/span&gt;
    &lt;span class="cm"&gt;/* Language and Environment */&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;target&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;es6&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="cm"&gt;/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="cm"&gt;/* Modules */&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;module&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ES6&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="cm"&gt;/* Specify what module code is generated. */&lt;/span&gt; &lt;span class="cm"&gt;/* Specify the root folder within your source files. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;moduleResolution&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;node&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="cm"&gt;/* Specify how TypeScript looks up a file from a given module specifier. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="cm"&gt;/* Emit */&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;declaration&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Generate .d.ts files from TypeScript and JavaScript files in your project. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;declarationMap&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Create sourcemaps for d.ts files. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sourceMap&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Create source map files for emitted JavaScript files. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;outDir&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dist/mjs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="cm"&gt;/* Specify an output folder for all emitted files. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;esModuleInterop&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;forceConsistentCasingInFileNames&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Ensure that casing is correct in imports. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="cm"&gt;/* Type Checking */&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;strict&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Enable all strict type-checking options. */&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;skipLibCheck&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="cm"&gt;/* Skip type checking all .d.ts files. */&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="c1"&gt;// include used to fix: Cannot write file because it would overwrite input file when adding exclude.&lt;/span&gt;
  &lt;span class="c1"&gt;// "include": ["*.ts"],&lt;/span&gt;
  &lt;span class="c1"&gt;// "exclude": ["**/*.spec.ts"] // jika ingin menambahkan tests.&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Membuat file package
&lt;/h2&gt;

&lt;p&gt;Buatlah file &lt;code&gt;index.ts&lt;/code&gt; pada root directory lalu masukkan contoh script dibawah ini&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;greeting&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;greeting&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Menambahkan script pada package.json
&lt;/h2&gt;

&lt;p&gt;Kita akan menambahkan property baru bernama &lt;code&gt;build&lt;/code&gt; pada property &lt;code&gt;scripts&lt;/code&gt; didalam file &lt;code&gt;package.json&lt;/code&gt; untuk menjalankan proses transpile menggunakan tsc dengan &lt;code&gt;npm run build&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;build&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;tsc -p tsconfig.cjs.json &amp;amp;&amp;amp; tsc -p tsconfig.esm.json&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Melakukan transpile
&lt;/h2&gt;

&lt;p&gt;Setelah semua langkah sudah diikuti dengan benar, dan tanpa error, kita akan melakukan proses transpile.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Menambahkan property baru untuk mendukung spesifikasi module ESM dan CJS
&lt;/h2&gt;

&lt;p&gt;Tambahkan property dibawah ini didalam object json didalam file &lt;code&gt;package.json&lt;/code&gt; untuk mendukung spesifikasi module hybrid&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;main&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dist/cjs/index.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;module&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dist/mjs/index.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;exports&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;import&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./dist/mjs/index.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;require&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./dist/cjs/index.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;main&lt;/code&gt; digunakan untuk mengembalikan default object yang di export ketika memanggil &lt;code&gt;require("foo")&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;module&lt;/code&gt; adalah property proposal, namun secara &lt;strong&gt;de facto&lt;/strong&gt; digunakan untuk mendeteksi ESM.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;exports&lt;/code&gt; digunakan untuk menentukan module mana yang akan digunakan ketika menggunakan &lt;code&gt;import&lt;/code&gt; atau &lt;code&gt;require&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  npm publish
&lt;/h2&gt;

&lt;p&gt;Langkah terakhir adalah untuk publishing package kalian ke NPM.&lt;/p&gt;

&lt;p&gt;🚀🚀🚀🚀🚀🚀🚀&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fun75xy6ppd9tztj31ies.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fun75xy6ppd9tztj31ies.gif" alt=" " width="334" height="250"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Gambar cover didapatkan melalui artikel &lt;a href="https://dev.to/wpreble1/introduction-to-typescript-32k"&gt;https://dev.to/wpreble1/introduction-to-typescript-32k&lt;/a&gt;&lt;/p&gt;

</description>
      <category>typescript</category>
      <category>javascript</category>
      <category>es6</category>
      <category>indonesia</category>
    </item>
    <item>
      <title>What is multisignature wallet?</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Fri, 21 Jan 2022 03:48:58 +0000</pubDate>
      <link>https://dev.to/fzn0x/what-is-multisignature-wallet-4ccl</link>
      <guid>https://dev.to/fzn0x/what-is-multisignature-wallet-4ccl</guid>
      <description>&lt;p&gt;Before jump to multisignature wallet, we need to know, what is the difference between the two different types of accounts on Ethereum: externally owned accounts (EOAs) and contract accounts?&lt;/p&gt;

&lt;h2&gt;
  
  
  Externally-owned account
&lt;/h2&gt;

&lt;p&gt;Externally-owner account is account which controlled by anyone with the private keys.&lt;/p&gt;

&lt;p&gt;You need a private key to verify every transactions with defined events.&lt;/p&gt;

&lt;h2&gt;
  
  
  Contract account
&lt;/h2&gt;

&lt;p&gt;A smart contract deployed to the network, controlled by code.&lt;/p&gt;

&lt;p&gt;Using logic that executed when specific condition met in the Ethereum blockchain to verify transactions and can define whos has the access rights and how to control every transactions with defined events.&lt;/p&gt;

&lt;p&gt;Both account types have the ability to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Receive, hold and send ETH and tokens&lt;/li&gt;
&lt;li&gt;Interact with deployed smart contracts&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Key differences of both account types is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Externally-owned&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Creating an account costs nothing&lt;/li&gt;
&lt;li&gt;Can initiate transactions&lt;/li&gt;
&lt;li&gt;Transactions between externally-owned accounts can only be ETH/token transfers&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;p&gt;Contract&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Creating a contract has a cost because you're using network storage&lt;/li&gt;
&lt;li&gt;Can only send transactions in response to receiving a transaction&lt;/li&gt;
&lt;li&gt;Transactions from an external account to a contract account can trigger code which can execute many different actions, such as transferring tokens or even creating a new contract&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;/ul&gt;




&lt;h2&gt;
  
  
  Multisignature wallet account
&lt;/h2&gt;

&lt;p&gt;Multisignature wallet require multiple (two or more) parties to confirm every transaction with defined events before it can be executed, each parties, represented by the same unique ethereum address characteristics, with 42 alpha-numeric characters long, each parties defined as multisignature wallet owners, hence, the single point of failure associated with private key is no longer automically result in a loss of all funds controlled by the account.&lt;/p&gt;

&lt;p&gt;Multisignature wallet has different types, for example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;n-of-n&lt;/strong&gt;: This type of multisignature requires all of the private keys signature.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;n-of-m&lt;/strong&gt;: This type of multisignature only require 2 signature from 3 private keys for example.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy2ppgg75olyq2wda4oa3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy2ppgg75olyq2wda4oa3.png" alt="Multisignature wallet example from gnosis" width="800" height="372"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Multisignature (or similar scheme) tools and services
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Bitcoin
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Blockstream&lt;/li&gt;
&lt;li&gt;Casa&lt;/li&gt;
&lt;li&gt;Unchained Capital&lt;/li&gt;
&lt;li&gt;Caravan&lt;/li&gt;
&lt;li&gt;Electrum&lt;/li&gt;
&lt;li&gt;Lily&lt;/li&gt;
&lt;li&gt;Nunchuk&lt;/li&gt;
&lt;li&gt;Specter&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Ethereum
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Gnosis&lt;/li&gt;
&lt;li&gt;Edgehog (built for use-cases involving low-to-no financial value, similar scheme to multisignature)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;References :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://en.bitcoin.it/wiki/Multi-signature" rel="noopener noreferrer"&gt;https://en.bitcoin.it/wiki/Multi-signature&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://ethereum.org/en/developers/docs/accounts/" rel="noopener noreferrer"&gt;https://ethereum.org/en/developers/docs/accounts/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.gnosis-safe.io/introduction/the-programmable-account/eoas-vs.-contract-accounts" rel="noopener noreferrer"&gt;https://docs.gnosis-safe.io/introduction/the-programmable-account/eoas-vs.-contract-accounts&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>multisignature</category>
      <category>ethereum</category>
      <category>blockchain</category>
      <category>smartcontracts</category>
    </item>
    <item>
      <title>Build welcome message bot for your discord server with discord v13</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Mon, 17 Jan 2022 03:08:11 +0000</pubDate>
      <link>https://dev.to/fzn0x/discordjs-v13-bot-tutorial-build-welcome-message-bot-for-your-discord-server-3a3</link>
      <guid>https://dev.to/fzn0x/discordjs-v13-bot-tutorial-build-welcome-message-bot-for-your-discord-server-3a3</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;This tutorial requires basic knowledge on how to use discord, what is guild, channel and discord.js&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://discord.js.org/" rel="noopener noreferrer"&gt;Discord.js&lt;/a&gt; is a powerful Node.js module that allows you to interact with the Discord API very easily. It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend.&lt;/p&gt;

&lt;p&gt;Usability, consistency, and performance are key focuses of discord.js, and it also has nearly 100% coverage of the Discord API. It receives new Discord features shortly after they arrive in the API.&lt;/p&gt;

&lt;p&gt;Having that to said by discord.js, discord.js is the most battle-tested for discord bot related stuff, it's include many features like Intents, Guild and Member related events, and much more.&lt;/p&gt;

&lt;p&gt;Now, I will introduce you how to setup welcome message discord bot for your guild or we commonly call it discord server.&lt;/p&gt;

&lt;h2&gt;
  
  
  Install Node.js
&lt;/h2&gt;

&lt;p&gt;Node.js v16 or later is recommended, you can download it &lt;a href="https://nodejs.org/dist/v16.13.2/node-v16.13.2-x64.msi" rel="noopener noreferrer"&gt;here for v16.13.2 LTS&lt;/a&gt; because it is supported directly by the tests workflow based on &lt;a href="https://github.com/discordjs/discord.js/blob/main/.github/workflows/test.yml" rel="noopener noreferrer"&gt;Discord test workflow&lt;/a&gt;, so it's much safer to use Node.js v16 or later.&lt;/p&gt;

&lt;h2&gt;
  
  
  Init Project With NPM
&lt;/h2&gt;

&lt;p&gt;Before installing dependencies needed for discord bot, you must init project for your bot with npm first.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;project-directory
npm init &lt;span class="nt"&gt;-y&lt;/span&gt; 
&lt;span class="c"&gt;# -y is recommended for tutorial purpose 😄 DO NOT COPY THIS LINE.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Install Dependencies
&lt;/h2&gt;

&lt;p&gt;Before start coding, you can start by installing &lt;a href="https://discord.js.org/#/" rel="noopener noreferrer"&gt;discord.js&lt;/a&gt;, and &lt;a href="https://github.com/motdotla/dotenv" rel="noopener noreferrer"&gt;dotenv&lt;/a&gt; for local development, you can use &lt;a href="https://github.com/motdotla/dotenv" rel="noopener noreferrer"&gt;dotenv&lt;/a&gt; for production but I'm not recommend it, since the term of environment variable itself must be stored in operating system and not a file, also, it may cause unexpected persistence of variable values.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Install discord.js
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;discord.js 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Install dotenv
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;dotenv
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Usage
&lt;/h2&gt;

&lt;p&gt;After installing discord.js and dotenv, we can create a script with event that will receive guild member arrival named &lt;a href="https://discord.js.org/#/docs/discord.js/stable/class/Client?scrollTo=e-guildMemberAdd" rel="noopener noreferrer"&gt;guildMemberAdd&lt;/a&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Add type: "module" in your package.json for modern ES modules, reason &lt;a href="https://flaviocopes.com/how-to-enable-es-modules-nodejs/" rel="noopener noreferrer"&gt;why&lt;/a&gt;.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="nl"&gt;"type"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"module"&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;Get to know about ESM with the gist made by sindresorhus &lt;a href="https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c" rel="noopener noreferrer"&gt;here&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Create index.js file to put the event and client login code
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// index.js - DO NOT COPY THIS LINE.&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Discord&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;discord.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Discord&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Client&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;intents&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nx"&gt;Discord&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Intents&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FLAGS&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GUILDS&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="nx"&gt;Discord&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Intents&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FLAGS&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;GUILD_MEMBERS&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;],&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;dotenv&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;dotenv&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;dotenv&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;config&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;ready&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Bot is ready.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;guildMemberAdd&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;member&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;channel&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;member&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;guild&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;channels&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;cache&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;embed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;Discord&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;MessageEmbed&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setThumbnail&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://your-image-url&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// make sure to change this to your image&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="s2"&gt;`:point_right: Welcome!`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="s2"&gt;`Hello, welcome to &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;member&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;guild&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt; &amp;lt;@&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;member&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;gt;!`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="kc"&gt;true&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="s2"&gt;`:zap: Guild Statistics`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="s2"&gt;`Server member count: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;member&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;guild&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;memberCount&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="kc"&gt;true&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setColor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;YELLOW&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;setImage&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://your-image-url&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="c1"&gt;// make sure to change this to your image&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="nx"&gt;channel&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;channel&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;channel&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;CHANNEL_ID&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;send&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;embeds&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;embed&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="nx"&gt;client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;login&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;DISCORD_TOKEN&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;⚠️ Do not forget to enable your GUILD_MEMBERS intent flags, &lt;a href="https://discordjs.guide/popular-topics/intents.html#privileged-intents" rel="noopener noreferrer"&gt;see here why&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Create .env file&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;⚠️ this is include your bot credentials, DO NOT share it to anyone you don't work with.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DISCORD_TOKEN=
CHANNEL_ID=
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  How to get DISCORD_TOKEN?
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;This is little bit challenging for most developers who didn't know nothing about discord bot ecosystem before, also, this is important and the rules change sometimes, so you must have to get used to it. 😄&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Since in this tutorial I'm not introduce on how you create a bot from scratch and the detail of it, you can look how to setup bot using discord developer dashboard by looking for this &lt;a href="https://www.writebots.com/discord-bot-token/" rel="noopener noreferrer"&gt;tutorial&lt;/a&gt; and get the bot token to put inside &lt;code&gt;DISCORD_TOKEN=&lt;/code&gt; of your .env file.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to get CHANNEL_ID?
&lt;/h2&gt;

&lt;p&gt;To get a Channel ID you can right click to the channel and click on "Copy ID" then paste it inside the &lt;code&gt;CHANNEL_ID=&lt;/code&gt; of your .env file.&lt;/p&gt;




&lt;p&gt;Discord.js has many useful utilities, but since v13 there's lot of changes you must follow, but despite that, it's awesome library you can use to create bots and manage it.&lt;/p&gt;

&lt;p&gt;Thanks for reading!&lt;/p&gt;

</description>
      <category>discord</category>
      <category>javascript</category>
      <category>discordjs</category>
    </item>
    <item>
      <title>WTF*&amp;n is Pointers in Golang (Bahasa Version)</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Thu, 02 Dec 2021 06:24:55 +0000</pubDate>
      <link>https://dev.to/fzn0x/pointers-wtfn-is-pointers-with-example-in-golang-bahasa-version-ei5</link>
      <guid>https://dev.to/fzn0x/pointers-wtfn-is-pointers-with-example-in-golang-bahasa-version-ei5</guid>
      <description>&lt;p&gt;Pointers adalah lokasi dimana data pada variabel disimpan. &lt;/p&gt;

&lt;p&gt;Pada dasarnya semua tipe data pointers adalah berupa long hexadecimal number yang berisi value berupa memory address dimana lokasi data disimpan, yang berarti semua tipe data pada value dari semua pointer itu sama, entah itu berasal dari integer, float, char maupun string, dan lain-lain.&lt;/p&gt;

&lt;h2&gt;
  
  
  Reference
&lt;/h2&gt;

&lt;p&gt;Reference adalah nilai yang tidak diakses secara langsung di tempat dimana dia dibuat namun menunjukkan lokasi dimana dia dibuat. &lt;/p&gt;

&lt;p&gt;Biasanya reference disimpan pada memory ataupun storage device, reference adalah sebuah alias yang menunjuk kepada sebuah pointer, setiap reference memiliki nama yang berbeda, analoginya seperti kita mencari buku berdasarkan nama penulis atau nama penerbit pada sebuah website, kita punya referensi diantara keduanya, namun akan menunjukkan buku yang kita tuju juga.&lt;/p&gt;

&lt;p&gt;Contoh sederhananya:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;package&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="s"&gt;"fmt"&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c"&gt;// Membuat Reference bernama names&lt;/span&gt;
  &lt;span class="n"&gt;names&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="s"&gt;"Fauzan"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="c"&gt;// Membuat Reference "publisher"&lt;/span&gt;
  &lt;span class="n"&gt;publisher&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;names&lt;/span&gt; &lt;span class="c"&gt;// Menggunakan Reference "names"&lt;/span&gt;
  &lt;span class="c"&gt;// menggunakan pointer yang sama&lt;/span&gt;
  &lt;span class="n"&gt;fmt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Println&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;names&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="n"&gt;fmt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Println&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="n"&gt;publisher&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;catatan: untuk menampilkan memory address pada pointer di Golang, Anda bisa menggunakan simbol &amp;amp;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Pengingat
&lt;/h2&gt;

&lt;p&gt;Penggunaan pointers sangat powerful, namun dibalik "sangat powerful" tersebut terdapat ancaman, dimana penggunaan pointers adalah untuk menghindari versi copy dari sebuah variabel, sedangkan menggunakan pointer kita mengubah value yang berada pada memory address. Masalah yang dapat muncul dari penggunaan yang salah adalah memory leaks.&lt;/p&gt;

&lt;p&gt;Untuk menghindari memory leaks pada sebuah pointer, anda cukup melakukan assign ulang pada reference lamanya dengan &lt;code&gt;nil&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="n"&gt;oldReference&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ini mencegah memory leaks sekaligus mencegah dari meninggalkan reference lama. Melakukan assign ulang dengan value baru selain &lt;code&gt;nil&lt;/code&gt; pada golang tidak akan membuat reference lama menjadi garbage collection, karena masih menjadi reference dari reference selanjutnya.&lt;/p&gt;

&lt;p&gt;Garbage Collector pada Golang berdasarkan algoritma tri-color mark-and-sweep, dimana value pada memori akan dibebaskan jika tidak direferensikan kemanapun, dimana case disini adalah dengan menggunakan &lt;code&gt;nil&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Seperti yang terlampir pada kode &lt;a href="https://go.dev/src/container/list/list.go" rel="noopener noreferrer"&gt;https://go.dev/src/container/list/list.go&lt;/a&gt; :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="c"&gt;// remove removes e from its list, decrements l.len, and returns e.&lt;/span&gt;
&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;l&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;List&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;remove&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;e&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;Element&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;Element&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;prev&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;next&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;next&lt;/span&gt;
    &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;next&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;prev&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;prev&lt;/span&gt;
    &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;next&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt; &lt;span class="c"&gt;// avoid memory leaks&lt;/span&gt;
    &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;prev&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt; &lt;span class="c"&gt;// avoid memory leaks&lt;/span&gt;
    &lt;span class="n"&gt;e&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;list&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;nil&lt;/span&gt;
    &lt;span class="n"&gt;l&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="nb"&gt;len&lt;/span&gt;&lt;span class="o"&gt;--&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;e&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Beberapa bahasa pemrograman HLLs (High Level Languages) menyembunyikan penggunaan Pointers, salah satu contohnya adalah Javascript, mewajibkan untuk menggunakan reference, dan passing data dilakukan menggunakan copy dari reference.&lt;/p&gt;

&lt;h2&gt;
  
  
  Contoh Penggunaan Pointers pada Golang
&lt;/h2&gt;

&lt;p&gt;Disini saya akan memberi contoh kasus penggunaan pointers pada Golang, dimana sebuah setter method akan menggunakan , saya biasanya menggunakan contoh dengan Javascript namun karena Javascript tidak bisa menggunakan Pointers secara langsung, saya akan menggunakan Golang sebagai contohnya:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight go"&gt;&lt;code&gt;&lt;span class="k"&gt;package&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="s"&gt;"fmt"&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="k"&gt;type&lt;/span&gt; &lt;span class="n"&gt;Person&lt;/span&gt; &lt;span class="k"&gt;struct&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;fullName&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;p&lt;/span&gt; &lt;span class="n"&gt;Person&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;Name&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;fullName&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c"&gt;// ini tidak akan mempengaruhi reference pada fungsi main()&lt;/span&gt;
&lt;span class="c"&gt;// karena kita hanya mengubah versi "copy" dari reference&lt;/span&gt;
&lt;span class="c"&gt;// tersebut (person).&lt;/span&gt;
&lt;span class="c"&gt;// func (p Person) SetName(fullName string) {&lt;/span&gt;
&lt;span class="c"&gt;//     p.fullName = fullName&lt;/span&gt;
&lt;span class="c"&gt;// }&lt;/span&gt;

&lt;span class="c"&gt;// kita akan menggunakan pointer receiver untuk mempengaruhi&lt;/span&gt;
&lt;span class="c"&gt;// reference pada fungsi main() karena dia akan menggunakan&lt;/span&gt;
&lt;span class="c"&gt;// memory address yang sama seperti pada fungsi main()&lt;/span&gt;
&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;p&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt;&lt;span class="n"&gt;Person&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="n"&gt;SetName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;fullName&lt;/span&gt; &lt;span class="kt"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;p&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;fullName&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;fullName&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;func&lt;/span&gt; &lt;span class="n"&gt;main&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="n"&gt;person&lt;/span&gt; &lt;span class="o"&gt;:=&lt;/span&gt; &lt;span class="n"&gt;Person&lt;/span&gt;&lt;span class="p"&gt;{}&lt;/span&gt;

  &lt;span class="n"&gt;person&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;SetName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Fauzan"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="n"&gt;fmt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Println&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;person&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Name&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;

  &lt;span class="n"&gt;person&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;SetName&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Muhammad Fauzan"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="n"&gt;fmt&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Println&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;person&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Name&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Jadi seperti itulah penjelasan mengenai pointers dan bagaimana contoh penggunaannya di Golang.&lt;/p&gt;




&lt;p&gt;Sekian terima kasih telah membaca artikel ini, semoga bermanfaat 😄&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;References&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://stackoverflow.com/questions/39052967/setting-pointers-to-nil-to-prevent-memory-leak-in-golang" rel="noopener noreferrer"&gt;https://stackoverflow.com/questions/39052967/setting-pointers-to-nil-to-prevent-memory-leak-in-golang&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.digitalocean.com/community/conceptual_articles/understanding-pointers-in-go" rel="noopener noreferrer"&gt;https://www.digitalocean.com/community/conceptual_articles/understanding-pointers-in-go&lt;/a&gt;&lt;br&gt;
&lt;a href="https://go.dev/tour/moretypes/1" rel="noopener noreferrer"&gt;https://go.dev/tour/moretypes/1&lt;/a&gt;&lt;/p&gt;

</description>
      <category>go</category>
      <category>pointers</category>
      <category>indonesia</category>
    </item>
    <item>
      <title>Test Driven Development and Behaviour Driven Development in NodeJS</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Wed, 01 Dec 2021 07:32:33 +0000</pubDate>
      <link>https://dev.to/fzn0x/test-driven-development-and-behaviour-driven-development-with-example-in-nodejs-and-javascript-bahasa-version-752</link>
      <guid>https://dev.to/fzn0x/test-driven-development-and-behaviour-driven-development-with-example-in-nodejs-and-javascript-bahasa-version-752</guid>
      <description>&lt;p&gt;TDD atau Test Driven Development atau Test-First Development  adalah proses pengembangan software yang bergantung pada persyaratan software yang dikonversikan ke bentuk test cases (unit testing maupun integration testing) terlebih dahulu sebelum softwarenya dikembangkan secara penuh &lt;strong&gt;Test First, Developed Later&lt;/strong&gt;. Ini adalah lawan dari Test-Last Development &lt;strong&gt;Developed First, Test Later&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Unit Test
&lt;/h2&gt;

&lt;p&gt;Unit Test adalah salah satu tipe dari software testing dimana  setiap bagian atau komponen pada software akan di-test. Alasannya supaya hasil dari setiap bagian atau komponen akan sesuai yang diharapkan atau sesuai behaviournya (BDD).&lt;/p&gt;

&lt;p&gt;Unit Test adalah bentuk dari White Box Testing, dimana yang di-test adalah struktur internal aplikasi sebuah software, contohnya utility ataupun bagian kecil pendukung jalannya fungsi-fungsi pada internal aplikasi.&lt;/p&gt;

&lt;h2&gt;
  
  
  Integration Test
&lt;/h2&gt;

&lt;p&gt;Integration Test adalah salah satu tipe dari software testing dimana setiap fitur yang ada pada internal aplikasi itu sendiri akan di-test, misalnya dalam bentuk Rest API. Berbeda dari Unit Test yang melakukan test pada bagian kecil pada REST API, dimana kode kode utility pada Rest API, seperti untuk mengecek tipe data ataupun konversi format data.&lt;/p&gt;

&lt;p&gt;Integration Test adalah bentuk dari Black Box Testing, dimana yang di-test adalah internal aplikasi sebuah software, contohnya fungsionalitas yang mendukung jalannya aplikasi.&lt;/p&gt;

&lt;h2&gt;
  
  
  BDD
&lt;/h2&gt;

&lt;p&gt;BDD atau Behaviour Driven Development adalah bentuk pendekatan pada TDD, dimana setiap test menciptakan behaviour dari sistem untuk arahan pengembangan selanjutnya. &lt;/p&gt;

&lt;p&gt;Misalnya dengan menspesifikasikan Given-When-Then formula, dimana analoginya Given adalah fitur yang akan dibuat, When adalah kapan fiturnya dijalankan, dan Then adalah apa yang terjadi setelah fiturnya dijalankan. Formula ini akan diterapkan di unit test yang tidak memiliki fitur terkait, dengan tujuan menulis test behaviour dari fitur tersebut terlebih dahulu sebelum membuat fiturnya, dan terus melakukan &lt;a href="https://fauzandotjs.medium.com/membuat-kode-yang-baik-dengan-bahasa-pemrograman-javascript-b1c6879f9321" rel="noopener noreferrer"&gt;refactor&lt;/a&gt;. &lt;strong&gt;Failing Test First, Developed, Refactor If Necessary, Pass Test Last&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;Pada saat mengembangkan fitur setelah membuat test cases, maka kita bisa menyebutnya sebagai TDD, namun hanya saja kita melakukan pendekatan BDD, dimana kita menulis behaviour dari sistemnya menjadi test cases terlebih dahulu. Ini sama saja seperti kita menyiapkan skenario terlebih dahulu sebelum membuat sebuah film yang sudah siap diceritakan kepada orang lain.&lt;/p&gt;

&lt;h2&gt;
  
  
  Bermain dengan Mocha dan Chai pada NodeJS
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Sebelum memulai
&lt;/h3&gt;

&lt;p&gt;Sebelum melanjutkan, silahkan &lt;a href="https://nodejs.org/en/download/" rel="noopener noreferrer"&gt;install NodeJS&lt;/a&gt; terlebih dahulu. Versi &lt;a href="https://nodejs.org/en/about/releases/" rel="noopener noreferrer"&gt;Active LTS&lt;/a&gt; sangat disarankan.&lt;/p&gt;

&lt;p&gt;Jika anda sudah menginstall NodeJS, mari belajar menggunakan &lt;a href="https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/" rel="noopener noreferrer"&gt;npm init&lt;/a&gt; terlebih dahulu sebelum menginstall mocha didalam scope project setelah perintah &lt;code&gt;npm init&lt;/code&gt; tersebut dijalankan.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# cek apakah npm sudah terinstall&lt;/span&gt;
npm &lt;span class="nt"&gt;-v&lt;/span&gt;

&lt;span class="c"&gt;# mari berasumsi bahwa kita belum meng-init project dengan npm&lt;/span&gt;
npm init &lt;span class="nt"&gt;-y&lt;/span&gt; &lt;span class="c"&gt;# atau npm init untuk menulis value pada package.json secara manual menggunakan CLI&lt;/span&gt;

&lt;span class="c"&gt;# install sebagai devDependencies untuk menjalankan bin dari npm &lt;/span&gt;
&lt;span class="c"&gt;# package secara langsung pada `scripts` tanpa global installation&lt;/span&gt;
npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-D&lt;/span&gt; mocha

&lt;span class="c"&gt;# kita akan menggunakan chai sebagai assertion library,&lt;/span&gt;
&lt;span class="c"&gt;# dimana assertion library ini yang akan menentukan&lt;/span&gt;
&lt;span class="c"&gt;# apakah hasil dari sebuah fitur atau bagian pada software&lt;/span&gt;
&lt;span class="c"&gt;# sesuai ekspektasi kita atau tidak.&lt;/span&gt;
npm &lt;span class="nb"&gt;install &lt;/span&gt;chai
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Memulai
&lt;/h3&gt;

&lt;p&gt;Disini kita akan membuat sebuah contoh unit test dimana kita menciptakan skenario terlebih dahulu sebelum membuat fitur, disini sebagai contoh sederhana kita akan menerapkan FIFO algorithm pada Javascript namun menggunakan skenario supplier yang mengeluarkan dan memasukkan barang.&lt;/p&gt;

&lt;p&gt;Dibawah ini hanyalah contoh test cases sederhana saja, anda bisa belajar membuat dan refactor test cases secara mandiri dengan contoh dibawah jika anda ingin mendalami lebih.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;supplier.test.js&lt;/code&gt;&lt;br&gt;
Pertama, adalah membuat skenario untuk supplier.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;chai&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;chai&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;expect&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;chai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;supplier&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;goods&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

  &lt;span class="nf"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;supplier supplying goods&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// goods should increased&lt;/span&gt;
    &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;goods&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;to&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;have&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;lengthOf&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;at&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;least&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="nf"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;supplier demanding goods&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// goods should decreased&lt;/span&gt;
    &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;goods&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;to&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;have&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;lengthOf&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;at&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;least&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Setelah itu, file &lt;code&gt;package.json&lt;/code&gt; anda kurang lebih harus ditambahkan scripts baru seperti dibawah ini.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;scripts&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;test&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mocha supplier.test.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;queue.js&lt;/code&gt;&lt;br&gt;
Lalu, mari kita membuat bagian pendukung pada skenario supplier.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Queue&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// set array as value of construct args&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;elements&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[...&lt;/span&gt;&lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// push arguments to this.elements&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(...&lt;/span&gt;&lt;span class="nx"&gt;args&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nf"&gt;shift&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// you can also use splice&lt;/span&gt;
    &lt;span class="c1"&gt;//return this.elements.splice(0,1)[0];&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;shift&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="c1"&gt;// access method as property (modern JS Engine)&lt;/span&gt;
  &lt;span class="kd"&gt;get&lt;/span&gt; &lt;span class="nf"&gt;length&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="c1"&gt;// set method in property (modern JS Engine)&lt;/span&gt;
  &lt;span class="kd"&gt;set&lt;/span&gt; &lt;span class="nf"&gt;length&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Terakhir, mari kita modifikasi skenario yang sebelumnya ada pada test cases.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;chai&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;chai&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;Queue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;./queue.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;expect&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;chai&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;describe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;supplier&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;goods&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Queue&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="nf"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;supplier supplying goods&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;goods&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;goods&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;to&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;have&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;lengthOf&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;at&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;least&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="nf"&gt;it&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;supplier demanding goods&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;while&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;goods&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;goods&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;shift&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
    &lt;span class="nf"&gt;expect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;goods&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;to&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;have&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;lengthOf&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;at&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;least&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Untuk menjalankan test.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run &lt;span class="nb"&gt;test&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Selain menggunakan Mocha dan Chai, anda dapat menggunakan Jest ataupun Node TAP, pada dasarnya semua library testing pada Javascript tersebut sama-sama dibuat untuk software testing hanya saja secara benefit memiliki perbandingan yang dapat dipertimbangkan lebih lanjut.&lt;/p&gt;

&lt;p&gt;Seperti itulah gambaran test cases dalam bentuk skenario (BDD) yang akan dibuat sebelum menciptakan suatu fitur. &lt;/p&gt;

&lt;p&gt;Semoga bermanfaat untuk teman-teman pengembang software semuanya. 😄&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>testing</category>
      <category>node</category>
      <category>indonesia</category>
    </item>
    <item>
      <title>Javascript Buffer/s? What is Buffer/s?</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Tue, 16 Nov 2021 09:19:06 +0000</pubDate>
      <link>https://dev.to/fzn0x/javascript-buffers-what-is-buffers--12o5</link>
      <guid>https://dev.to/fzn0x/javascript-buffers-what-is-buffers--12o5</guid>
      <description>&lt;p&gt;Javascript memiliki bawaan yang membuatnya tidak dapat mengelola data biner, karena awalnya didesain untuk lingkungan browser saja dan &lt;strong&gt;unicode-friendly&lt;/strong&gt;, Javascript memakai &lt;strong&gt;unicode&lt;/strong&gt; untuk proses &lt;strong&gt;encoding&lt;/strong&gt; dalam bentuk &lt;strong&gt;String/s&lt;/strong&gt; atau karakter (char) untuk tujuan pertukaran data, itu alasan kenapa Javascript tidak membaca File menggunakan Buffer melainkan menggunakan &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" rel="noopener noreferrer"&gt;Blob&lt;/a&gt; yang bisa dibaca dalam bentuk string atau data biner, atau mengonversikannya menjadi &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream" rel="noopener noreferrer"&gt;ReadableStream&lt;/a&gt; sedangkan NodeJS sudah memiliki bawaan instansi &lt;code&gt;Buffer&lt;/code&gt; untuk mengelola File menggunakan data biner. &lt;/p&gt;

&lt;h2&gt;
  
  
  Apa itu unicode?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Unicode&lt;/strong&gt; adalah standar sistem pengkodean yang digunakan untuk mewakili karakter dari hampir semua bahasa yang dimengerti manusia.&lt;/p&gt;

&lt;h2&gt;
  
  
  Apa itu String/s?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;String/s&lt;/strong&gt; adalah data dari sekumpulan karakter (char) yang membentuk teks.&lt;/p&gt;

&lt;h2&gt;
  
  
  Apa itu Encoding?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Encoding&lt;/strong&gt; adalah proses konversi data dari satu format ke format lainnya diantaranya:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Utf-8 ke hex &lt;/li&gt;
&lt;li&gt;Hex ke base64&lt;/li&gt;
&lt;li&gt;Octal ke hex&lt;/li&gt;
&lt;li&gt;Hex ke HTML&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Hasil dari &lt;strong&gt;encoding&lt;/strong&gt; disebut sebagai &lt;strong&gt;encoded strings&lt;/strong&gt;, yang berarti data dalam bentuk &lt;strong&gt;String/s&lt;/strong&gt; tersebut dihasilkan dari proses &lt;strong&gt;encoding&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Apa perbandingan antara menggunakan String/s dan Buffer/s?
&lt;/h2&gt;

&lt;p&gt;Penggunaan &lt;strong&gt;String/s&lt;/strong&gt; dibanding menggunakan &lt;strong&gt;Buffer/s&lt;/strong&gt; secara langsung untuk pemrosesan data dalam jumlah besar kurang efisien (contohnya pada kasus pemrosesan File), alasannya karena kita harus memformat terlebih dahulu dari &lt;strong&gt;unicode&lt;/strong&gt;, oleh karena itu &lt;strong&gt;Buffer/s&lt;/strong&gt; tidak berjalan dengan cepat di &lt;strong&gt;String operations&lt;/strong&gt; karena &lt;strong&gt;v8&lt;/strong&gt; akan memperbarui kode yang sudah dihasilkan untuk &lt;strong&gt;Buffer/s object&lt;/strong&gt;, alasannya karena &lt;strong&gt;String/s&lt;/strong&gt; sudah bawaan pada &lt;strong&gt;v8&lt;/strong&gt; dan mengalokasikan memori pada VM, dan karena tujuan utama &lt;strong&gt;Buffer/s&lt;/strong&gt; bukan untuk membuat cepat &lt;strong&gt;String operations&lt;/strong&gt; seperti &lt;strong&gt;slice&lt;/strong&gt;, atau &lt;strong&gt;concat&lt;/strong&gt;, namun hanya untuk mempresentasikan data biner dalam jumlah besar.&lt;/p&gt;

&lt;h2&gt;
  
  
  Apa itu v8?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;v8&lt;/strong&gt; adalah mesin yang digunakan pada bahasa pemrograman Javascript yang menggunakan sebuah compiler dan sebuah interpreter, dan menggunakan JIT (just in time) compilation untuk meningkatkan performa.&lt;/p&gt;

&lt;h2&gt;
  
  
  Apa itu Buffer/s?
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--QaDHbFNl--%2Fc_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880%2Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzocbmv5papw1eb364w0e.png" alt="javascript-buffer-s-what-is-buffer-s-javascript-developer" width="800" height="400"&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;small&gt;Image Credits - &lt;a href="https://sayed.cyou/web-dev/javascript/javascript-buffer-s-what-is-buffer-s-javascript-developer/" rel="noopener noreferrer"&gt;https://sayed.cyou/web-dev/javascript/javascript-buffer-s-what-is-buffer-s-javascript-developer/&lt;/a&gt;&lt;/small&gt;&lt;/center&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Buffer/s&lt;/strong&gt; adalah context atau area dimana data biner berasal dari &lt;strong&gt;Stream/s&lt;/strong&gt; berada. Contohnya adalah data biner yang berasal dari &lt;code&gt;fs.createReadStream&lt;/code&gt; di Javascript.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Stream/s&lt;/strong&gt; memiliki banyak definisi yang bisa anda temukan di sumber lain namun intinya adalah:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;contoh kasus penggunaan untuk memproses data dalam jumlah besar yang tidak secara langsung disimpan pada memori.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Beberapa bahasa pemrograman memiliki mekanisme untuk menyimpan &lt;strong&gt;Stream/s&lt;/strong&gt; pada memori, contohnya C# yang dapat menggunakan &lt;strong&gt;MemoryStream&lt;/strong&gt; untuk menyimpan &lt;strong&gt;Stream/s&lt;/strong&gt; pada memori.&lt;/p&gt;

&lt;p&gt;Di Javascript, terdapat class &lt;code&gt;Buffer&lt;/code&gt; dimana didesain untuk mengelola data biner mentah, setiap buffer dibuat bertindak sebagai array dari bilangan bulat (&lt;code&gt;&amp;lt;Buffer 00 00 00 00 00 00 00 00&amp;gt;&lt;/code&gt;) dengan &lt;code&gt;Buffer&lt;/code&gt; sebagai instansi-nya, tetapi tidak dapat diubah ukurannya dan memiliki banyak metode khusus untuk data biner, ketika kita menampilkan data tersebut menggunakan &lt;code&gt;console.log()&lt;/code&gt;, kita akan melihat rantai nilai dengan nilai heksadesimal.&lt;/p&gt;

&lt;p&gt;Contohnya:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;buffer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Buffer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;alloc&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;buffer&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// &amp;lt;Buffer 00 00 00 00 00 00 00 00 00 00 00 00&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Kenapa menggunakan Buffer/s?
&lt;/h2&gt;

&lt;p&gt;Tanpa &lt;strong&gt;Buffer/s I/O (Input/output)&lt;/strong&gt; berarti setiap pemrosesan data akan ditangani langsung dari sistem operasi secara internal, yaitu dari disk, network, atau operasi lain yang membutuhkan resource yang besar dan mahal, dimana ini lebih tidak efisien dibandingkan menggunakan area atau context pada memori yang disebut sebagai &lt;strong&gt;Buffer/s&lt;/strong&gt; contohnya pada pemrosesan File yang mempunyai jumlah data yang besar.&lt;/p&gt;

&lt;p&gt;Referensi :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://nodejs.org/en/knowledge/advanced/buffers/how-to-use-buffers" rel="noopener noreferrer"&gt;NodeJS - How to use buffer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary" rel="noopener noreferrer"&gt;Mozilla - Binary&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://stackoverflow.com/questions/22436289/when-to-use-buffer-and-what-for" rel="noopener noreferrer"&gt;Stackoverflow - when to use buffer and what for&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>buffer</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>indonesia</category>
    </item>
    <item>
      <title>Membuat Discord Webhooks Untuk Notifikasi Github Repository</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Tue, 27 Jul 2021 05:59:46 +0000</pubDate>
      <link>https://dev.to/fzn0x/membuat-discord-webhooks-untuk-notifikasi-github-repository-1ch5</link>
      <guid>https://dev.to/fzn0x/membuat-discord-webhooks-untuk-notifikasi-github-repository-1ch5</guid>
      <description>&lt;p&gt;Kadang untuk mencari tahu update di github repository dari issue, pull request, dan push ataupun security, kita harus bulak balik buka github repositorynya di website, dan menurut gw itu akan menjadi sangat tidak efisien kalau sudah jadi habit.&lt;/p&gt;

&lt;p&gt;Untuk memecahkan masalah itu, gw coba explore dan ketemu yang namanya &lt;strong&gt;webhooks&lt;/strong&gt;, kebetulan discord memberi support untuk webhooks pada server-server discord, tentu saja kamu harus punya privilege administrator atau founder untuk menggunakan &lt;strong&gt;webhooks&lt;/strong&gt; pada server tersebut.&lt;/p&gt;

&lt;p&gt;Di artikel ini, gw pengen panduin kalian untuk bagaimana sih memasang &lt;strong&gt;webhooks&lt;/strong&gt; ini dari discord ke github repository? tentu saja tanpa &lt;code&gt;terlalu&lt;/code&gt; banyak basa-basi seperti pada hal-nya artikel yang sebelumnya gw buat dan langsung penjelasan ke-inti-nya.&lt;/p&gt;

&lt;p&gt;Langsung saja &lt;strong&gt;#markicob&lt;/strong&gt;!&lt;/p&gt;

&lt;h2&gt;
  
  
  Yang Harus Kalian Persiapkan
&lt;/h2&gt;

&lt;p&gt;Pertama, kalian harus mempersiapkan discord dan belajar bagaimana menggunakan discord terlebih dahulu.&lt;br&gt;
Kedua, tentu saja kalian harus mempersiapkan akun github dan belajar bagaimana menggunakan github terlebih dahulu.&lt;br&gt;
Terakhir, jangan lupa ibadah kalau belum. &lt;code&gt;sedikit joke&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Mari Kita Mulai!
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Webhook&lt;/strong&gt; adalah sebuah konsep API, dimana dia menyediakan informasi untuk aplikasi lain secara &lt;strong&gt;realtime&lt;/strong&gt;, &lt;strong&gt;webhook&lt;/strong&gt; sering disebut juga sebagai &lt;strong&gt;&lt;em&gt;Reverse&lt;/em&gt; API&lt;/strong&gt; karena harus dirancang supaya bisa digunakan oleh &lt;strong&gt;provider webhook&lt;/strong&gt;, &lt;strong&gt;webhook&lt;/strong&gt; memiliki dua bentuk response yaitu &lt;code&gt;JSON&lt;/code&gt; dan &lt;code&gt;XML&lt;/code&gt; atau sebagai data form yaitu &lt;code&gt;x-www-form-urlencoded&lt;/code&gt; atau &lt;code&gt;multipart/form-data&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Berikut langkah-langkah mempersiapkan discord &lt;strong&gt;webhooks&lt;/strong&gt; pada github repository kamu!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Buka Discord dan persiapkan server dengan membuat server atau gunakan server yang sudah ada untuk membuat &lt;strong&gt;webhooks&lt;/strong&gt; (pastikan disini kamu memiliki role &lt;strong&gt;Administrator&lt;/strong&gt; ataupun &lt;strong&gt;Server Founder&lt;/strong&gt; yang ditandai dengan mahkota).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Buka server tersebut lalu tekan bagian pada bagian yang ditunjuk pada gambar dibawah ini, lalu klik pilihan &lt;code&gt;Server Settings&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fr8z80pjdsice9g3iix8g.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fr8z80pjdsice9g3iix8g.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setelah membuka &lt;code&gt;Server Settings&lt;/code&gt; kemudian klik pada bagian &lt;code&gt;Integrations&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2F0nwfap9jh2y13tn9uzrh.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2F0nwfap9jh2y13tn9uzrh.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setelah membuka &lt;code&gt;Integrations&lt;/code&gt; kemudian klik pada bagian &lt;code&gt;Create Webhooks&lt;/code&gt; (jika kamu/bot (secara otomatis) sudah membuat webhooks sebelumnya untuk keperluan lain maka tulisannya menjadi &lt;code&gt;View Webhooks&lt;/code&gt;).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fa0s7t133kbp01w49p1xb.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fa0s7t133kbp01w49p1xb.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setelah itu, klik tombol &lt;code&gt;Create Webhook&lt;/code&gt; (jika kamu/bot (secara otomatis) sudah membuat webhooks sebelumnya untuk keperluan lain maka klik pada tombol &lt;code&gt;New Webhook&lt;/code&gt;).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2F6w9wpjl0eqknf8ra4w90.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2F6w9wpjl0eqknf8ra4w90.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setelah klik tombol tersebut kamu akan mengisi informasi terkait &lt;strong&gt;Webhook&lt;/strong&gt; tersebut, lalu klik pada tombol &lt;code&gt;Copy Webhook URL&lt;/code&gt;, disini saya merekomendasikan untuk membuat text channel masing-masing untuk setiap repository, supaya lebih rapih dan ter-manage dengan mudah. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fz429iwswbqyywzwiya0n.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fz429iwswbqyywzwiya0n.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Langkah Tambahan
&lt;/h3&gt;

&lt;p&gt;Jika kamu mengalami kesulitan dalam membuat text channel, ikuti langkah dibawah ini&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Kembali ke halaman server kalian, lalu klik tombol &lt;code&gt;+&lt;/code&gt; seperti yang ditunjukkan oleh gambar dibawah ini.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2F8tqzol7f5c2uccaxqt3z.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2F8tqzol7f5c2uccaxqt3z.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setelah muncul modal popup &lt;code&gt;Create Text Channel&lt;/code&gt;, silahkan isi nama channel, lalu klik &lt;code&gt;Create Channel&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Ffz5eo6lxxeh29n6c35vg.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Ffz5eo6lxxeh29n6c35vg.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Setelah membuat &lt;strong&gt;webhook&lt;/strong&gt; kita akan lanjut ke langkah berikutnya yaitu mempersiapkan github repository untuk menggunakan &lt;strong&gt;webhook&lt;/strong&gt; dari Discord yang sebelumnya sudah kita buat dan copy URLnya.&lt;/p&gt;

&lt;p&gt;Berikut langkah-langkah mempersiapkan github repository untuk menggunakan discord &lt;strong&gt;webhooks&lt;/strong&gt; yang sudah kamu buat!&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Buka github repository yang sudah kamu persiapkan lalu klik pada bagian &lt;code&gt;Settings&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fxy4lqzzw34n02pbh6jq7.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fxy4lqzzw34n02pbh6jq7.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setelah membuka &lt;code&gt;Settings&lt;/code&gt; lalu klik pada bagian &lt;code&gt;Webhooks&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fybyap25yj1y0642uvvey.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fybyap25yj1y0642uvvey.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setelah itu, klik pada tombol &lt;code&gt;Add webhook&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fqf5ijv2ftcgf9w7eskz1.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fqf5ijv2ftcgf9w7eskz1.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setelah itu kamu akan mendapatkan tampilan seperti dibawah lalu isi dengan contoh input yang diperlukan seperti dibawah ini.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fzzg048lakm12zg2m1fkn.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fzzg048lakm12zg2m1fkn.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;1). Isi &lt;code&gt;Payload URL&lt;/code&gt; dengan URL yang sudah kamu copy melalui tombol &lt;code&gt;Copy Webhook URL&lt;/code&gt; pada Discord sebelumnya lalu tambahkan prefix &lt;code&gt;/github&lt;/code&gt; di URL tersebut. (contoh &lt;code&gt;https://discord.com/api/webhooks/{RANDOM_CHARACTER}/github&lt;/code&gt;&lt;br&gt;
2). Pilih &lt;code&gt;application/json&lt;/code&gt; pada pilihan &lt;code&gt;Content type&lt;/code&gt;&lt;br&gt;
3). Pilih &lt;code&gt;Just the push event.&lt;/code&gt; jika kamu hanya ingin menerima notifikasi &lt;strong&gt;push&lt;/strong&gt; dari aktifitas branch, pilih &lt;code&gt;Send me everything.&lt;/code&gt; untuk menerima segala notifikasi dari aktifitas pada github repository tersebut, dan pilih &lt;code&gt;Let me select individual events.&lt;/code&gt; untuk menerima notifikasi dari beberapa aktifitas saja. Aktifitas di github repository ini disebut sebagai &lt;code&gt;event&lt;/code&gt; pada Github.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setelah mengisi input yang diperlukan lalu klik pada tombol &lt;code&gt;Add webhook&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fcd4g51r9iwcs4mfct3pu.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fcd4g51r9iwcs4mfct3pu.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Setelah menambah &lt;strong&gt;webhook&lt;/strong&gt;, kamu akan dialihkan ke halaman sebelumnya dan pastikan webhook sudah ceklis untuk memastikan bahwa konfigurasi kamu benar.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Feggbeybj6tikmtjyin69.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Feggbeybj6tikmtjyin69.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Dan selesai sudah perjalanan kita untuk menambahkan Discord &lt;strong&gt;webhook&lt;/strong&gt; di github 😄, selanjutnya kita harus memastikan bahwa setiap event pada github repository sudah ditangkap oleh webhook dari Discord tersebut.&lt;/p&gt;

&lt;p&gt;Mari kita coba push sesuatu pada github repository tersebut! &lt;/p&gt;

&lt;p&gt;Disini saya menambahkan file README di branch bernama main.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fbxbklbnzuxb2effz3fry.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fbxbklbnzuxb2effz3fry.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Mari kita cek dan lihat ada keajaiban apa yang terjadi, dan &lt;em&gt;voila&lt;/em&gt;! event push pada github repository tersebut sudah masuk ke text channel dari Discord &lt;strong&gt;webhook&lt;/strong&gt; yang dibuat sebelumnya! 🎉&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fiq7msxnh2zmpgwly1uud.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwww.evilfactorylabs.org%2Fuploads%2Farticles%2Fiq7msxnh2zmpgwly1uud.PNG" alt="Membuat Discord Webhooks Untuk Notifikasi Github Repository" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;Sekian artikel yang bisa saya bagikan, semoga bermanfaat 😃&lt;/p&gt;

</description>
      <category>discord</category>
      <category>webhooks</category>
      <category>github</category>
      <category>indonesia</category>
    </item>
    <item>
      <title>Mendekatkan Diri Kepada Functional Programming di Javascript 🚶</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Tue, 27 Apr 2021 14:14:13 +0000</pubDate>
      <link>https://dev.to/fzn0x/mendekatkan-diri-kepada-functional-programming-di-javascript-3opk</link>
      <guid>https://dev.to/fzn0x/mendekatkan-diri-kepada-functional-programming-di-javascript-3opk</guid>
      <description>&lt;p&gt;Bagaimana kalian menulis blok program, dan menggunakan paradigma apa adalah hal yang sangat penting dan vital bagi pemrogram, karena hal tersebut juga dapat menentukan bagaimana sebuah program berjalan dan berkembang selanjutnya. 😋&lt;/p&gt;

&lt;p&gt;Kali ini saya akan membahas Functional Programming, karena terlalu banyak sudah yang membahas OOP dan procedural programming, akhirnya saya berinisiatif menyebarkan faham tentang paradigma pemrograman yang satu ini. &lt;/p&gt;

&lt;h1&gt;
  
  
  Functional Programming 😎
&lt;/h1&gt;

&lt;p&gt;Functional Programming adalah ketika kita menulis kumpulan blok program menggunakan functions dan menghindari state dan data yang mutable (mutable berarti kita dapat dengan mudah membuat struktur data daripada memodifikasi yang sudah ada), bukan OOP (objects, classes, bottom-up approach) maupun procedural programming (every program start with function, top-down approach).&lt;/p&gt;

&lt;h2&gt;
  
  
  Basic Terminology and Concepts
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Referential transparency
&lt;/h3&gt;

&lt;p&gt;Dalam matematika, Referential transparency adalah properti yang memungkinkan kita mengganti ekspresi dengan nilainya, dan tidak mengubah hasil dari apa pun yang kita lakukan.&lt;/p&gt;

&lt;p&gt;Sebagai contoh menggunakan Javascript :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;menjadi&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;atau (lebih baik) menjadi&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;untuk menghemat waktu eksekusi, ini memanfaatkan fakta bahwa semua ekspresi dan fungsi matematika (menurut definisinya) adalah transparan secara referensial.&lt;/p&gt;

&lt;h3&gt;
  
  
  Modular approach
&lt;/h3&gt;

&lt;p&gt;Modular approach adalah proses pengelompokan program komputer menjadi sub-program terpisah menggunakan functions, dimana functions ini bisa digunakan di aplikasi lain atau functions lainnya.&lt;/p&gt;

&lt;p&gt;Desain modular dapat meningkatkan produktivitas. Modul kecil dapat dikodekan dengan lebih cepat dan memiliki peluang lebih besar untuk digunakan kembali (DRY Don'T RepeaT YourselF) yang tentunya mengarah pada pengembangan program yang lebih cepat. Selain itu, modul dapat diuji secara terpisah (unit testing) yang membantu kita mengurangi waktu yang dihabiskan untuk pengujian unit dan debugging.&lt;/p&gt;

&lt;h3&gt;
  
  
  Maintainability
&lt;/h3&gt;

&lt;p&gt;Maintainability adalah istilah sederhana yang berarti pemrograman FP lebih mudah dipelihara karena kita tidak perlu khawatir secara tidak sengaja mengubah apa pun di luar fungsi yang diberikan.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First-class Function&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First-class Function&lt;/strong&gt; adalah definisi, yang dikaitkan dengan entitas bahasa pemrograman yang tidak memiliki batasan dalam penggunaannya. Oleh karena itu, first-class function dapat muncul di mana saja dalam program.&lt;/p&gt;

&lt;p&gt;di JavaScript first-class function adalah function yang berarti kita dapat menyimpannya dalam variabel, objek, dan array.&lt;/p&gt;

&lt;p&gt;Sebagai contoh menggunakan Javascript :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isOdd&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;dengan &lt;strong&gt;higher order function&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isOdd&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;oddArray&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;proxyArr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
  &lt;span class="c1"&gt;//imperative approach&lt;/span&gt;
  &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;el&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;isOdd&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;el&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt;
     &lt;span class="nx"&gt;proxyArr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;el&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt;
     &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;proxyArr&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;oddArray&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;dengan &lt;code&gt;filter()&lt;/code&gt; (functional approach)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;isOdd&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;oddNumbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isOdd&lt;/span&gt;&lt;span class="p"&gt;,[]);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;oddNumbers&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Closure
&lt;/h3&gt;

&lt;p&gt;Closures adalah fungsi dalam yang dapat mengakses variabel dari fungsi induk, bahkan setelah fungsi induk dijalankan.&lt;/p&gt;

&lt;p&gt;Contoh closure ada pada bagian &lt;strong&gt;higher order function&lt;/strong&gt; diatas.&lt;/p&gt;

&lt;h3&gt;
  
  
  Pure Function (Accessor Method)
&lt;/h3&gt;

&lt;p&gt;Pure Function adalah fungsi yang inputnya dideklarasikan sebagai input dan tidak ada satupun yang harus disembunyikan. outputnya juga dideklarasikan sebagai output.&lt;/p&gt;

&lt;p&gt;Pure Function bekerja berdasarkan parameternya. Tidak efisien jika tidak me-return apapun. Selain itu, ia menawarkan return yang sama untuk parameter yang diberikan.&lt;/p&gt;

&lt;p&gt;Contoh pure function pada Javascript :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;pure&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Impure Function (Mutator Method)
&lt;/h3&gt;

&lt;p&gt;Impure Function adalah kebalikan dari pure function. Fungsi ini memiliki input atau output tersembunyi; itu disebut impure. Impure Function tidak dapat digunakan atau diuji secara terpisah karena memiliki ketergantungan. &lt;/p&gt;

&lt;p&gt;Contoh impure function pada Javascript :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;impure&lt;/span&gt;&lt;span class="p"&gt;(){&lt;/span&gt;
   &lt;span class="nx"&gt;z&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Function Composition
&lt;/h3&gt;

&lt;p&gt;Function Composition adalah proses menggabungkan 2 fungsi atau lebih untuk membuat yang baru.&lt;/p&gt;

&lt;h3&gt;
  
  
  Shared State
&lt;/h3&gt;

&lt;p&gt;Shared State adalah state (bisa berupa variabel, ataupun objek) yang dibagikan.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Side Effects&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Side Effects&lt;/strong&gt; adalah efek samping setiap perubahan keadaan yang terjadi di luar function yang dipanggil. Tujuan terbesar dari setiap functional programming language adalah meminimalkan efek samping, dengan memisahkannya dari kode perangkat lunak lainnya. Dalam functional programming, sangat penting untuk menghilangkan efek samping dari sisa logika pemrograman.&lt;/p&gt;

&lt;h2&gt;
  
  
  Kenapa Functional Programming ?
&lt;/h2&gt;

&lt;p&gt;Secara general, alasan kenapa kita harus memilih functional programming karena paradigma ini powerful, expressive dan fun (contohnya menggunakan fungsi filter dari javascript sebelumnya, itu fun dan expressive, loh kenapa expressive? karena kita sudah tau bagaimana mengoperasikan fungsinya).&lt;/p&gt;

&lt;p&gt;Benefit lainnya :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Memungkinkan kita menghindari masalah dan kesalahan yang membingungkan dalam kode (expressive, fun)&lt;/li&gt;
&lt;li&gt;Lebih mudah menguji dan menjalankan unit testing, dan debugging.  (powerfull, fun)&lt;/li&gt;
&lt;li&gt;Pemrosesan Paralel, dan Concurrency (powerfull)&lt;/li&gt;
&lt;li&gt;Hot code deployment and fault tolerance (powerfull)&lt;/li&gt;
&lt;li&gt;Menawarkan modularitas yang lebih baik dengan kode yang lebih pendek (powerfull, fun, expressive)&lt;/li&gt;
&lt;li&gt;Meningkatkan produktivitas (fun)&lt;/li&gt;
&lt;li&gt;Mendukung Nested Functions (powerfull)&lt;/li&gt;
&lt;li&gt;Functional construction seperti Map , Filter , Reduce , dll.  (fun, expressive)&lt;/li&gt;
&lt;li&gt;Memungkinkan penggunaan Lambda Calculus secara efektif (powerfull)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Tamat
&lt;/h2&gt;

&lt;p&gt;Sekian yang bisa saya sampaikan mengenai Functional Programming, Divide and Conquer! 🔥&lt;/p&gt;

&lt;p&gt;Terima kasih buat yang sudah baca ❤️🧠🧠❤️🦄🦄🧠❤️🧠&lt;/p&gt;

&lt;p&gt;Untuk penjelasan mengenai functional programming lainnya , saya sangat merekomendasikan slide di url berikut ini &lt;a href="https://slides.com/thomasomans/functional-programming-forever/fullscreen#/0/0/1" rel="noopener noreferrer"&gt;Functional Programming Forever&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>functional</category>
      <category>indonesia</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Mengenal Lebih Jauh Tentang EcmaScript , TC39 , dan EcmaScript Proposal 🚀</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Tue, 27 Apr 2021 11:25:00 +0000</pubDate>
      <link>https://dev.to/fzn0x/mengenal-lebih-jauh-tentang-ecmascript-tc39-dan-ecmascript-proposal-2130</link>
      <guid>https://dev.to/fzn0x/mengenal-lebih-jauh-tentang-ecmascript-tc39-dan-ecmascript-proposal-2130</guid>
      <description>&lt;p&gt;Banyak hal baru dan menarik yang belum diimplementasikan pada ECMAScript programming language karena mereka harus melewati proses TC39, proses TC39 memiliki beberapa spesifikasi yang didalamnya memiliki beberapa tahap (stage) untuk disetujui komite TC39 sebelum tahap selesai / terimplementasi.&lt;/p&gt;

&lt;h1&gt;
  
  
  Apa itu EcmaScript?
&lt;/h1&gt;

&lt;p&gt;ECMAScript adalah bahasa skrip (.es) yang distandarisasi oleh Ecma International dalam spesifikasi ECMA-262, ECMA-262 adalah dokumen spesifikasi paling akurat dan up-to-date, untuk mengakses dokumen ECMA-262 silahkan akses url berikut ini &lt;a href="https://tc39.es/ecma262/" rel="noopener noreferrer"&gt;https://tc39.es/ecma262/&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;Singkatnya, ECMAScript adalah spesifikasi bahasa.&lt;/p&gt;

&lt;h1&gt;
  
  
  Bahasa Pemrograman EcmaScript
&lt;/h1&gt;

&lt;p&gt;EcmaScript adalah superset dari sintaks dan semantik dari bahasa yang lebih dikenal sebagai JavaScript , meskipun begitu , EcmaScript memiliki beberapa bahasa pemrograman dan teknologi yang mengikuti standar spesifikasinya, diantaranya ActionScript , V8 , Google Apps Script , dan Nashorn.&lt;/p&gt;

&lt;h1&gt;
  
  
  TC39
&lt;/h1&gt;

&lt;p&gt;TC39 atau disingkat sebagai Technical Committee number 39 adalah lembaga yang menstandarkan bahasa JavaScript di bawah spesifikasi "ECMAScript".&lt;/p&gt;

&lt;p&gt;Tugas TC39 adalah untuk memastikan apakah sebuah proposal itu memungkinkan untuk ditambahkan, menciptakan breaking changes atau tidak melalui spesifikasi EcmaScript sebelum diimplementasikan ke Bahasa Pemrograman EcmaScript.&lt;/p&gt;

&lt;p&gt;Spesifikasi ECMAScript inilah yang akan menentukan cara kerja JavaScript secara terpisah selangkah demi selangkah.&lt;/p&gt;

&lt;h1&gt;
  
  
  TC39 Process
&lt;/h1&gt;

&lt;p&gt;TC39 mengikuti proses untuk mengembangkan fitur bahasa yang didasarkan pada tahap kematangan. Setelah proposal cukup matang, TC39 memperbarui spesifikasi dengan perubahan yang diimplementasikan dalam proposal. Hingga saat ini, TC39 mengandalkan aliran yang lebih lama berdasarkan Microsoft Word. Tapi setelah ES3 keluar, TC39 menghabiskan sepuluh tahun dengan hampir tidak ada perubahan pada spesifikasi. Setelah itu, butuh empat tahun bagi ES6 untuk keluar.&lt;/p&gt;

&lt;p&gt;Setelah ES6 keluar, TC39 merampingkan proses revisi proposal untuk memenuhi ekspektasi modern. Proses baru menggunakan superset HTML untuk memformat proposal. Mereka menggunakan GitHub Pull Requests, yang membantu meningkatkan partisipasi dari komunitas dan jumlah proposal yang dibuat juga meningkat. Spesifikasi sekarang lebih dari standar hidup, yang berarti bahwa proposal melihat adopsi lebih cepat, dan kita tidak menghabiskan waktu bertahun-tahun menunggu edisi baru spesifikasi keluar.&lt;/p&gt;

&lt;p&gt;Proses baru ini melibatkan empat tahap kematangan yang berbeda. Semakin matang sebuah proposal, semakin besar kemungkinan untuk akhirnya membuatnya menjadi spesifikasi.&lt;/p&gt;

&lt;h2&gt;
  
  
  TC39 Stages
&lt;/h2&gt;

&lt;p&gt;Proses TC39 memiliki empat tahap kematangan sebelum diterima dan diimplementasikan oleh TC39.&lt;/p&gt;

&lt;p&gt;1). Stage 0&lt;/p&gt;

&lt;p&gt;Pada Tahap Strawman, Setiap diskusi, ide, perubahan, atau penambahan yang belum diberikan sebagai proposal formal disebut sebagai proposal "strawman". Hanya anggota dari TC39 yang bisa membuat proposal ini.&lt;/p&gt;

&lt;p&gt;Daftar proposal dari tahap 0 bisa diakses melalui url berikut ini &lt;a href="https://github.com/tc39/proposals/blob/master/stage-0-proposals.md" rel="noopener noreferrer"&gt;https://github.com/tc39/proposals/blob/master/stage-0-proposals.md&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;2). Stage 1&lt;/p&gt;

&lt;p&gt;Pada Tahap 1, proposal diformalkan dan diharapkan untuk menangani masalah lintas sektor, interaksi dengan proposal lain, dan masalah implementasi. Proposal dalam tahap ini mengidentifikasi masalah diskrit dan menawarkan solusi konkret untuk masalah tersebut.&lt;/p&gt;

&lt;p&gt;Proposal Tahap 1 sering menyertakan deskripsi high-level API, contoh penggunaan, dan diskusi tentang semantik dan algoritma internal. Proposal ini kemungkinan besar akan berubah secara signifikan saat mereka menjalani prosesnya.&lt;/p&gt;

&lt;p&gt;Daftar proposal dari tahap 1 bisa diakses melalui url berikut ini &lt;a href="https://github.com/tc39/proposals/blob/master/stage-1-proposals.md" rel="noopener noreferrer"&gt;https://github.com/tc39/proposals/blob/master/stage-1-proposals.md&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;3). Stage 2&lt;/p&gt;

&lt;p&gt;Pada Tahap 2, proposal harus memberikan rancangan awal dari spesifikasi.&lt;/p&gt;

&lt;p&gt;Pada titik ini, pelaksana akan mulai bereksperimen dengan implementasi aktual dalam waktu proses TC39. Implementasinya bisa dalam bentuk polyfill, kode pengguna yang mengacaukan runtime untuk mengikuti proposal; implementasi mesin, yang secara native memberikan dukungan untuk proposal; atau bisa juga didukung oleh build-time compiler seperti Babel.&lt;/p&gt;

&lt;p&gt;Salah satu yang populer adalah &lt;strong&gt;Decorators&lt;/strong&gt; , saya sebagai penulis sangat menunggu implementasi dari proposal ini di Javascript , namun karena banyak perubahan dan kepentingan , proposal ini mempunyai waktu lama untuk lanjut ke tahap berikutnya.&lt;/p&gt;

&lt;p&gt;Daftar proposal dari tahap 2 bisa diakses melalui url berikut ini &lt;a href="https://github.com/tc39/proposals" rel="noopener noreferrer"&gt;https://github.com/tc39/proposals&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;4). Stage 3&lt;/p&gt;

&lt;p&gt;Pada Tahap 3, proposal merupakan rekomendasi dari kandidat. Pada tahap lanjutan ini, editor spesifikasi dan reviewer yang ditunjuk harus menandatangani spesifikasi akhir. Proposal Tahap 3 tidak mungkin berubah melampaui perbaikan untuk masalah yang diidentifikasi.&lt;/p&gt;

&lt;p&gt;Pelaksana harus menyatakan minatnya pada proposal , karena proposal tanpa dukungan dari pelaksana akan gagal. Dalam praktiknya, proposal berpindah ke level ini dengan setidaknya satu implementasi browser, polyfill dengan high-fidelity, atau jika didukung oleh build-time transpiler seperti Babel.&lt;/p&gt;

&lt;p&gt;Daftar proposal dari tahap 3 bisa diakses melalui url berikut ini &lt;a href="https://github.com/tc39/proposals" rel="noopener noreferrer"&gt;https://github.com/tc39/proposals&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;5). Stage 4&lt;/p&gt;

&lt;p&gt;Pada Tahap Terakhir, proposal akan masuk ke tahap ini ketika setidaknya ada dua implementasi independen yang lulus tes penerimaan.&lt;/p&gt;

&lt;p&gt;Proposal yang lolos ke tahap empat akan dimasukkan dalam revisi ECMAScript berikutnya.&lt;/p&gt;

&lt;p&gt;Fungsi async, &lt;a href="https://github.com/tc39/proposal-Array.prototype.includes" rel="noopener noreferrer"&gt;Array #includes&lt;/a&gt;, dan &lt;a href="https://github.com/tc39/proposal-exponentiation-operator" rel="noopener noreferrer"&gt;operator eksponen&lt;/a&gt; adalah beberapa contoh yang berhasil mencapai tahap 4 sejak proses revisi dirombak.&lt;/p&gt;

&lt;h1&gt;
  
  
  Tamat
&lt;/h1&gt;

&lt;p&gt;Saya bersyukur dengan adanya TC39, Tanpa adanya TC39, Spesifikasi EcmaScript, dan lain-lain. Bisa dibayangkan bukan? proses pengembangan Bahasa Pemrograman yang menggunakan spesifikasi ini tidak akan terstruktur, breaking changes dimana mana, dan lain sebagainya.&lt;/p&gt;

&lt;p&gt;Jika kamu memiliki pertanyaan, silahkan komentar dibawah.&lt;/p&gt;

&lt;p&gt;Terima kasih buat yang sudah baca ❤️🧠🧠❤️🦄🦄🧠❤️🧠&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>tc39</category>
      <category>indonesia</category>
      <category>history</category>
    </item>
    <item>
      <title>Apa itu Thread dan Concurrency ? dan Perbedaan Multiprocessing, Multiprogramming dengan Multithreading.</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Sun, 04 Apr 2021 12:20:20 +0000</pubDate>
      <link>https://dev.to/fzn0x/apa-itu-thread-dan-concurrency-dan-perbedaan-multiprocessing-multiprogramming-dengan-multithreading-1n7k</link>
      <guid>https://dev.to/fzn0x/apa-itu-thread-dan-concurrency-dan-perbedaan-multiprocessing-multiprogramming-dengan-multithreading-1n7k</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9g6f7s6bawhdlzdqvflf.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9g6f7s6bawhdlzdqvflf.jpg" alt="Alt Text" width="737" height="422"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Disini saya akan memberikan artikel tentang Thread dan Concurrency, dan apa perbedaan Multiprocessing, Multiprogramming dengan Multithreading.&lt;/p&gt;




&lt;h3&gt;
  
  
  1. Apa itu Thread?
&lt;/h3&gt;

&lt;p&gt;Thread adalah sekumpulan instruksi yang dirancang untuk dijadwalkan dan dijalankan oleh CPU dari sebuah proses, proses ini adalah sebuah program yang sedang berjalan.&lt;/p&gt;

&lt;p&gt;Sebuah program dapat mempunyai banyak thread dalam satu waktu dan dapat menangguhkan atau mengakhiri thread tersebut jika program sudah selesai berjalan atau ditutup.&lt;/p&gt;




&lt;h4&gt;
  
  
  Jenis Thread
&lt;/h4&gt;

&lt;p&gt;Threads terbagi menjadi dua jenis, yaitu &lt;strong&gt;Single Thread&lt;/strong&gt; dan &lt;strong&gt;Multi Thread&lt;/strong&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Single Thread : proses hanya mengeksekusi satu thread saja pada satu waktu.&lt;/li&gt;
&lt;li&gt;Multi Thread : proses dapat mengeksekusi sejumlah thread dalam satu waktu.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Multi Thread akan saya jelaskan secara komprehensif di konsep &lt;strong&gt;Multithreading&lt;/strong&gt;.&lt;/p&gt;




&lt;h4&gt;
  
  
  Ideologi pada Thread
&lt;/h4&gt;

&lt;p&gt;Thread memiliki dua bentuk proses, atau yang biasa saya sebut sebagai Ideologi (agar mudah diingat haha) yaitu &lt;strong&gt;Concurrency&lt;/strong&gt; dan &lt;strong&gt;Parallelism&lt;/strong&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Concurrency : Concurrency adalah sebuah program yang memproses lebih dari satu tugas pada waktu yang sama, concurrency di desain agar bisa dijalankan secara multi thread. Analoginya sama seperti 2 antrian pada 1 kasir.&lt;/li&gt;
&lt;li&gt;Parallelism : Parallelism adalah sebuah program yang di mana satu tugas dibagi menjadi sub-tugas yang lebih kecil yang diproses secara bersamaan atau paralel, parallelism di desain agar bisa dijalankan secara multi process. Analoginya sama seperti 2 antrian pada 2 kasir.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Concurrency&lt;/strong&gt; akan saya jelaskan secara komprehensif di bagian berikut.&lt;/p&gt;




&lt;h3&gt;
  
  
  2. Apa itu Concurrency?
&lt;/h3&gt;

&lt;p&gt;Concurrency adalah sebuah program yang memproses lebih dari satu tugas pada waktu yang sama.&lt;/p&gt;

&lt;p&gt;Concurrency dapat meningkatkan kecepatan eksekusi secara keseluruhan dalam sistem yang multi prosesor dan multi core.&lt;/p&gt;




&lt;h4&gt;
  
  
  Model pada Concurrency
&lt;/h4&gt;

&lt;p&gt;Concurrency memiliki berbagai model dimana setiap thread berkomunikasi satu sama lain.&lt;/p&gt;

&lt;h5&gt;
  
  
  Shared State vs. Separate State
&lt;/h5&gt;

&lt;p&gt;Shared State berarti bahwa berbagai thread dalam sistem akan berbagi beberapa state di antara mereka. state adalah sebuah kumpulan data.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpkwahjsj1ywqrnei3des.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpkwahjsj1ywqrnei3des.png" alt="Alt Text" width="500" height="180"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Separate State berarti bahwa thread yang berbeda dalam sistem tidak berbagi state apa pun di antara mereka. Jika state yang berbeda perlu berkomunikasi, mereka melakukannya dengan menukar objek yang tidak dapat diubah atau istilahnya adalah &lt;strong&gt;immutable&lt;/strong&gt; di antara mereka, atau dengan mengirimkan salinan objek (atau data) di antara mereka.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F54zp10xvy58023okivr0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F54zp10xvy58023okivr0.png" alt="Alt Text" width="475" height="168"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h5&gt;
  
  
  Parallel Workers
&lt;/h5&gt;

&lt;p&gt;Parallel Workers adalah model yang dimana setiap task yang masuk ditugaskan ke worker yang berbeda.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frz9y4uxzebcexgfrhoek.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frz9y4uxzebcexgfrhoek.png" alt="Alt Text" width="327" height="278"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Parallel Workers dapat dirancang untuk menggunakan shared state atau separate state, yang berarti worker memiliki akses ke beberapa shared state (objek atau data bersama), atau mereka tidak memiliki shared state.&lt;/p&gt;

&lt;p&gt;Dalam model Parallel Workers, program atau delegator mendistribusikan task masuk ke worker yang berbeda. Setiap worker menyelesaikan task secara penuh. worker bekerja secara paralel, berjalan di thread yang berbeda, dan mungkin pada CPU yang berbeda.&lt;/p&gt;

&lt;h5&gt;
  
  
  Event Driven System
&lt;/h5&gt;

&lt;p&gt;Event Driven System adalah model yang dimana setiap worker hanya mengerjakan sebagian dari task penuh, setelah sebagian selesai maka dia akan melanjutkannya ke worker lain.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh3zq6xsws5vkk0ip4oe5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh3zq6xsws5vkk0ip4oe5.png" alt="Alt Text" width="440" height="114"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Sistem pada model Event Driven System biasanya di desain menggunakan Non-Blocking IO, Non-Blocking IO berarti bahwa ketika worker memulai operasi IO (misalnya membaca file atau data dari koneksi jaringan) worker tidak menunggu hingga panggilan IO lain selesai. &lt;/p&gt;

&lt;p&gt;Salah satu yang paling populer menggunakan model Event Driven System adalah Node.js.&lt;/p&gt;




&lt;h3&gt;
  
  
  3. Apa itu Multiprocessing?
&lt;/h3&gt;

&lt;p&gt;Multiprocessing adalah menjalankan banyak proses menggunakan banyak processor secara bersamaan.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb2kkvdtr36exgtof1f4e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb2kkvdtr36exgtof1f4e.png" alt="Alt Text" width="800" height="333"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Keuntungan utama dari multiprocessing adalah kecepatan, dan  kemampuan untuk mengelola informasi dalam jumlah yang lebih besar.&lt;/p&gt;




&lt;h3&gt;
  
  
  4. Apa itu Multiprogramming?
&lt;/h3&gt;

&lt;p&gt;Multiprogramming adalah lebih dari satu proses yang berjalan pada satu waktu, ini meningkatkan pemanfaatan CPU dengan mengatur task (kode dan data) sehingga CPU selalu memiliki satu proses untuk dieksekusi.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj95tuwzdkhe3ythcdzaq.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj95tuwzdkhe3ythcdzaq.jpg" alt="Alt Text" width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Tujuan dari multiprogramming untuk menyimpan banyak task di memori utama. Jika satu task diisi dengan Input / output, CPU dapat ditugaskan ke task lain.&lt;/p&gt;




&lt;h3&gt;
  
  
  5. Apa itu Multithreading?
&lt;/h3&gt;

&lt;p&gt;Multithreading adalah teknik dimana beberapa thread dibuat dari suatu proses untuk meningkatkan kecepatan komputasi sistem.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7h89c7wfqrjmqdvkigc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo7h89c7wfqrjmqdvkigc.png" alt="Alt Text" width="800" height="459"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Dalam multithreading, banyak thread dalam suatu proses dijalankan secara bersamaan dan pembuatan proses dalam multithreading dilakukan secara economical. Economical berarti mereka berbagi sumber daya prosesor yang sama.&lt;/p&gt;




&lt;p&gt;Sekian artikel rangkuman yang bisa saya tulis dan sampaikan, semoga bermanfaat!.&lt;/p&gt;




&lt;p&gt;Referensi : &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Wikipedia&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.geeksforgeeks.org/difference-between-multiprogramming-and-multithreading/" rel="noopener noreferrer"&gt;difference between multiprogramming and multithreading&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://tutorials.jenkov.com/java-concurrency/concurrency-models.html" rel="noopener noreferrer"&gt;concurrency models&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.geeksforgeeks.org/difference-between-concurrency-and-parallelism/" rel="noopener noreferrer"&gt;difference between concurrency and parallelism&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.britannica.com/technology/multiprocessing" rel="noopener noreferrer"&gt;multiprocessing&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
    <item>
      <title>Tutorial Makefile Indonesia — Utilitas Berguna Untuk Command Line</title>
      <dc:creator>Midori</dc:creator>
      <pubDate>Sun, 04 Apr 2021 09:29:00 +0000</pubDate>
      <link>https://dev.to/fzn0x/tutorial-makefile-indonesia-utilitas-berguna-untuk-command-line-30l4</link>
      <guid>https://dev.to/fzn0x/tutorial-makefile-indonesia-utilitas-berguna-untuk-command-line-30l4</guid>
      <description>&lt;h2&gt;
  
  
  &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcb04f8uq2mulgjtfshvn.jpeg" alt="Tutorial Makefile Indonesia" width="800" height="450"&gt;
&lt;/h2&gt;

&lt;p&gt;Halo disini saya akan memberikan tutorial tentang Makefile, apa itu Makefile, bagaimana cara membuat sebuah Makefile, bagaimana cara menggunakan utilitasnya pada Command , dan lain-lain.&lt;/p&gt;




&lt;h3&gt;
  
  
  1. Apa itu Makefile?
&lt;/h3&gt;

&lt;p&gt;Makefile adalah sebuah file yang berisi perintah atau disebut set yang dapat digunakan menggunakan make untuk melakukan otomatisasi agar mencapai tujuan tertentu.&lt;/p&gt;




&lt;h3&gt;
  
  
  2. Instalasi Make
&lt;/h3&gt;

&lt;p&gt;Untuk menjalankan Makefile kalian membutuhkan Make, Make berguna untuk membaca file tersebut agar dapat menentukan perintah atau set.&lt;/p&gt;

&lt;h4&gt;
  
  
  Windows :
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;1. Menggunakan Chocolatey&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Download Chocolatey &lt;a href="https://chocolatey.org/install" rel="noopener noreferrer"&gt;disini&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Setelah selesai menginstall kalian bisa menggunakan Chocolatey untuk menginstall Make.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Klik win lalu search Command Prompt , setelah itu klik kanan pada Command Prompt lalu run as administrator.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;ketik &lt;code&gt;choco install make&lt;/code&gt; lalu tunggu sampai instalasi selesai.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Menggunakan GnuWin32 Make&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Download GnuWin32 Make &lt;a href="https://sourceforge.net/projects/gnuwin32/files/make/3.81/make-3.81.exe/download?use_mirror=nchc" rel="noopener noreferrer"&gt;disini&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Install GnuWin32 Make tersebut setelah selesai mendownload lalu install program dengan mengikuti instruksi yang ada.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Setelah selesai, silahkan periksa folder &lt;em&gt;C:\Program Files (x86)\GnuWin32\bin&lt;/em&gt; apakah tersedia atau tidak.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Klik win lalu search Edit the system environment variables / environment variables, setelah itu klik pada system environment variables / environment variables.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Setelah terbuka klik button Environment Variables lalu silahkan klik 2x baris data bernama path pada kolom variable di bagian User Variables.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Klik new lalu masukkan &lt;em&gt;C:\Program Files (x86)\GnuWin32\bin&lt;/em&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Linux :
&lt;/h4&gt;

&lt;p&gt;Untuk Linux, saya merekomendasikan tutorial dibawah ini :&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://www.howtogeek.com/105413/how-to-compile-and-install-from-source-on-ubuntu/" rel="noopener noreferrer"&gt;https://www.howtogeek.com/105413/how-to-compile-and-install-from-source-on-ubuntu/&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  3. Membuat Contoh Program Menggunakan Makefile
&lt;/h3&gt;

&lt;p&gt;Setelah melewati proses instalasi Make selesai , sekarang kalian dapat menggunakan Make untuk menjalankan Makefile.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Buatlah directory dengan nama &lt;strong&gt;nyoba_makefile&lt;/strong&gt; atau apapun yang kalian inginkan , lalu masukkan folder tersebut pada Code Editor yang kalian gunakan masing masing. (disini saya menggunakan sublime).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;pada folder tersebut buatlah file bernama &lt;strong&gt;Makefile&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;didalam file &lt;strong&gt;Makefile&lt;/strong&gt; tersebut silahkan masukkan syntax dibawah ini :&lt;br&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight make"&gt;&lt;code&gt; &lt;span class="nl"&gt;hello&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;callback hello-2&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Hello, saya adalah perintah"&lt;/span&gt;

 &lt;span class="nl"&gt;hello-2&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Hello, saya adalah perintah kedua"&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Command kedua"&lt;/span&gt;
 &lt;span class="nl"&gt;callback&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"kamu memanggil callback"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Setiap membuat set baru harus membuat newline baru juga agar set dapat dieksekusi dan command didalam set of rules harus dimulai dengan tab bukan spasi.&lt;/p&gt;

&lt;p&gt;hello dan hello-2 diatas disebut juga sebagai set of rules , set of rules terdiri dari :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;targets : prerequisites
   command
   command
   command
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Bagian pada set of rules diantaranya :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;targets : berguna sebagai nama file / nama dari set yang akan dijalankan menggunakan make.&lt;/li&gt;
&lt;li&gt;commands : perintah pada command line yang akan digunakan didalam set of rules tersebut.&lt;/li&gt;
&lt;li&gt;prerequisites : nama file / nama dari set lain yang akan digunakan bersamaan.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Setelah membuat file tersebut silahkan buka Command Prompt / Shell Command dan arahkan ke directory folder yang menyimpan file tersebut , lalu langsung saja jalankan&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;make hello
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  4. Menambahkan Variabel pada Make
&lt;/h3&gt;

&lt;p&gt;Make juga menyediakan variabel yang bisa digunakan pada Makefile&lt;br&gt;
Buka file Makefile yang sudah kalian buat sebelumnya lalu modifikasi menjadi seperti dibawah ini :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight make"&gt;&lt;code&gt;
&lt;span class="nl"&gt;hello&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;callback hello-2&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Hello, saya adalah perintah yang dibuat oleh $(name)"&lt;/span&gt;

&lt;span class="nl"&gt;hello-2&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Hello, saya adalah perintah kedua"&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Command kedua"&lt;/span&gt;
&lt;span class="nl"&gt;callback&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"kamu memanggil callback"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Setelah selesai modifikasi file tersebut silahkan buka Command Prompt / Shell Command lalu jalankan perintah dibawah ini&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;make hello &lt;span class="nv"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;NamaAku
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Anda juga bisa menambahkan logika OR pada Makefile seperti dibawah ini :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight make"&gt;&lt;code&gt;
&lt;span class="nl"&gt;hello&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;callback hello-2&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Hello, saya adalah perintah yang dibuat oleh $(or $(name), $(n))"&lt;/span&gt;

&lt;span class="nl"&gt;hello-2&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Hello, saya adalah perintah kedua"&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Command kedua"&lt;/span&gt;
&lt;span class="nl"&gt;callback&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;
   &lt;span class="err"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"kamu memanggil callback"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sekarang anda sudah bisa menggunakan dua variable untuk tujuan yang sama.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;make hello &lt;span class="nv"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;NamaAku
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;atau&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;make hello &lt;span class="nv"&gt;n&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;NamaAku
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Dan liatlah hasilnya , anda berhasil menggunakan Makefile! 😀&lt;/p&gt;




&lt;p&gt;Referensi untuk kalian lihat lebih lanjut dibawah ini ya!&lt;br&gt;
&lt;a href="https://makefiletutorial.com/" rel="noopener noreferrer"&gt;https://makefiletutorial.com/&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
