DEV Community: Manda Putra

Don't just follow for tutorials and not understand it

Manda Putra — Tue, 26 Apr 2022 20:36:41 +0000

Please!

Many people are always looking for tutorials or guide step by step on how to create something (even me! I need guide and tutorials! Dogfood me!). But there are many type of product, some products are niche (employee scheduling, monitoring, etc) and the other are easy to find the duplicate (e-commerce, inventory management, etc).

Software engineering is hard, no doubt. At first, you'll just follow many tutorials from the internet. But as time goes, and you're started building a product, there are many things that tutorial doesn't cover.

You'll start to tackle many problems that require thinking, even building a beautiful layout, complex animation or state-of-the-art algorithm that you only had a doctoral paper as a guide.

The key point of a tutorial is to show you how to do things step by step. First time I recommend you to remember it, like how to connect database, centre a <element/>, creating carousel etc. You do it countless time, you started to realize that there are more tiny steps in just connecting database. First you need your database setup, you need to know where it placed, and what driver that will help you to connect it.

So please, I can't stress this enough! Do it many times, understand the tiny step that lies when you're doing something. There is no easy path—just stay consistent.

How to make a multi tenant website

Manda Putra — Wed, 07 Apr 2021 14:54:27 +0000

Today I'll tell how do I make wildcard subdomains and how do I handle the data between multiple user account. I thought it was hard, but turns out it is not (or maybe it is easy because I doing it wrong? I don't know).

Every time I search about how to make a multi tenant website, there are 0 articles on how to build them. I always wonder how do they do their architecture etc.

The key to this type of website architecture are just wildcard subdomain and reading the host on your code. As simple as that.

The website requirement are :

It's blog platform
Every user will have their own subdomain (zeke.bloggy.net, eren.bloggy.net, etc)
Every subdomain had their own data

So there are some steps.

There are some tips later on using it with cloud

Buy a Domain and VPS

First you must own a domain name and VPS (Virtual Private Server). I do think that this could be done in with serverless too, I just didn't tried that.

Point your domain to the VPS

On your domain registrar DNS Management There are 4 record that you should add. You also need your VPS IP address to point to.

| domain     | record type | value                              | host                               | ttl   |
|------------|-------------|------------------------------------|------------------------------------|-------|
| bloggy.com | A Record    | 192.0.0.1                          | bloggy.com                         | 14400 |
| bloggy.com | CNAME       | bloggy.com                         | www                                | 14400 |
| bloggy.com | A Record    | 192.0.0.1                          | *                                  | 14400 |
| bloggy.com | TXT Record  | radom-value-provided-by-lestecrypt | radom-value-provided-by-lestecrypt | 14400 |

The IP address there are your VPS IP address the domain are your domain (till the end of this article we'll use bloggy.com)

The TXT Record will be given by LetsEncrypt when we need https, I'll on the next step.

Setup nginx to point to your domain

Install Nginx.

Apache, Nginx, or other web server thingy have their own syntax of configuration I used Nginx here. Use your own preferences

The configuration I use for bloggy.com are the same as article here try to follow that article guide (I want to keep this posts as short as possible)

The difference is when I want to register the wildcard subdomain. The certbot command I used are different.

It is not :

sudo certbot --nginx -d bloggy.com -d www.bloggy.com

but this :

sudo certbot --server https://acme-v02.api.letsencrypt.org/directory -d *.example.com --manual --preferred-challenges dns-01 certonly

On this part you'll need to make the TXT Record.

I don't know why the -d *.example.com won't work, seems like it is a domain registrar problem. I obtain this trick from this article

For now, you will have a working wildcard subdomain and domain. Whether you visit bloggy.com, zeke.bloggy.com, eren.bloggy.com you will see Nginx welcome page (If you use nginx)

Handle the subdomain on your code

I use node.js (Express.js) for this, different app may have different syntax. But the rule are simple, read the hostname to get the account name and fetch the data;

The app had 2 routes home and blog Here the simplest code possible

const express = require('express')
const app = express()
const port = 3000

const dataBlog = [
  { account: 'zeke', blog: ['so zeke thing']  },
  { account: 'eren', blog: ['so eren thing 2']  }
]

// Home route list all blog and account
app.get('/', (req, res) => {
  res.send(dataBlog)
})

// Blog route only list the blog based on host account name
// You will see that we dont use params here, we use hostname
app.get('/blog', (req, res) => {
  const host = req.headers.host // or 'x-forwarded-host'
  const accountName = host.toString().split('.')[0] // get the account name on domain.
  if (accountName) {
    const accountData = dataBlog.filter(acc => acc.account === accountName)
    res.send(accountData)
  } else {
    res.code(404).send('Not Found')
  }  
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Proxy your web app with nginx

Node.js aren't like PHP it has its own web servers, but to contact with real world it needs proxy. So we just proxy it to our nginx.

On bloggy.com nginx configuration

# so the home route will be on bloggy.com
proxy_pass http://localhost:3000;

On the wildcard *.bloggy.com nginx configuration

# so the blog route will point to *.bloggy.com
proxy_pass http://localhost:3000/blog;

That's it! Every time you visit bloggy.com/blog it will respond 'not found' but if you visit zeke.bloggy.com it will fetch the data for 'zeke'.

On Cloud

So later example are for VPS, however if you want to load balance your apps with VPS it going to be little hard (in my experience).

Better use cloud service like GKE, DO, or AWS. With K8S (Kubernetess). It is more easy. You can achieve it using ingress.

The step by step to take that are on here It is the same.

And you can just point your domain name to the ingress IP.

Here are some config

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: $BUDDY_PROJECT_NAME
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
    cert-manager.io/cluster-issuer: 'letsencrypt-clusterissuer'
spec:
  tls:
  - hosts:
    - "bloggy.com"
    secretName: domain-$BUDDY_PROJECT_NAME
  rules:
  - host: 'bloggy.com'
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: $BUDDY_PROJECT_NAME
            port:
              number: 80
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: rewrite-$BUDDY_PROJECT_NAME
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
    cert-manager.io/cluster-issuer: 'letsencrypt-clusterissuer'
    nginx.ingress.kubernetes.io/rewrite-target: /blog/$1
spec:
  tls:
  - hosts:
    - "*.bloggy.com"
    secretName: wildcard-certificate-tls
  rules:
  - host: '*.bloggy.com'
    http:
      paths:
      - backend:
          service:
            name: $BUDDY_PROJECT_NAME
            port:
              number: 80
        path: "/(.*)"
        pathType: Prefix
---

Closing

I hope this will help you to make your multi tenant website. Have a great day. I welcome every feedback you had! :D

Implementasi Websocket pada Node.js dengan Contoh Aplikasi

Manda Putra — Tue, 31 Mar 2020 10:03:40 +0000

SocketIO selalu jadi pilihan kawula developer kalau mau implementasi WebSocket pada browser, dan yap SocketIO sebenernya cukup cukup aja untuk masalah ini.

Tapi masalahnya satu, SocketIO ini termasuk fosil teknologi. Banyak browser sudah support websocket dan tidak memerlukan teknik long-polling lagi. Library client SocketIO pada browser besar, dan banyak major product seperti Trello yag migrasi dari SocketIO ke native WebSocket dikarenakan performanya lebih baik.

Saya tidak akan menjelaskan satu persatu langkah pembuatannya jika tertarik untuk melihat code-nya bisa langsung cek disini

Membuat Koneksi Websocket Pada Server

Cukup mudah saya disini memakai fastify dan ws.

Kita hanya perlu memasukan instance object server pada aplikasi server HTTP kita (fastify)

const fastify = require('fastify')
const WebSocket = require('ws')

// inisiasi websocket server
const wss = new Websocket({ server: fastify.server }) // _server object_ dari fastify

wss.on('connection', (ws) => {
  // ws berisikan _instance object_ tiap tiap client yang terkoneksi
})

// mulai server fastify
async function start() {
  await fastify.listen(3000)
  console.log('berjalan pada port 3000')
}

Jikalau anda menggunakan express bisa lihat contoh disini

Event Handling

Saat memakai ws banyak orang bingung soal implementasi event-nya bagaimana. Kalau di SocketIO sangat mudah karena kita bisa pakai emit dan on yang sudah disediakan oleh library.

Tenang Node.js punya modul namanya events, modul tersebut bisa kita gunakan untuk memperhatikan (watch) event yang kita buat pada websocket kita.

Contoh simple penggunaan events.

const EventEmitter = require('events');

// inisiasi event emmiter
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();

myEmitter.on('event', () => {
  console.log('an event occurred!');
});

myEmitter.emit('event'); // kirim message ke event

Oke jadi dengan teknik tsb kita bisa refaktor file di awal kita tadi menjadi seperti ini.

const WebSocket = require('ws')
const EventEmmiter = require('events')

class SocketConnection extends EventEmmiter {
  constructor({ server }) {
    super()

    // inisiasi server websocket 
    this.wss = new WebSocket({ server })

    this.wss.on('connection', (ws) => {
       // menerima pesan yang dikirim user.
       ws.on('message', () => {
          // mengirimkan event 
          this.emit('voting', { voting: 'Jokawi' })
       })
    })
  }
}

module.exports = SocketConnection

Untuk menerima pesan voting tsb kita bisa gunakan dalam index.js kita seperti ini:

const fastify = require('fastify')
const Socket = require('./socket') // namain aja file tadi socket

const room = new Socket({ server: fastify.server })

// kita bisa mendengarkan event dari sini
room.on('voting', () => {
 // lakukan sesuatu saat voting
})

Implementasi bisa dilihat disini

Broadcast

WebSocket Merupakan komunikasi bidireksional (2 arah) dan hanya One to One antara server dan client saja. Jadi Untuk broadcast pesan kesemua orang / ke salah satu client yang terkoneksi kita harus menyimpan setiap koneksi yang ada.

contoh :

 // this.sockets merupakan object yang kita simpan di server
 // yang berisikan setiap user yang terkoneksi
 broadcast(msg) {
    for (const key in this.sockets) {
      this.send(key, msg)
    }
 }

Scaling

Untuk scaling secara horizontal kita bisa menggunakan redis dan sticky session. Anda bisa baca di sini atau bisa juga lihat implementasi dengan docker di video ini.

Routing

Jika kita kepingin routing websocket kita bisa juga kita manfaatkan opsi routing pada ws.

const fastify = require('fastify')
const Websocket = require('ws')


const room1 = new WebSocket({ server: fastify.server, path: '/room1' })
const room2 = new WebSocket({ server: fastify.server, path: '/room2' })

dan nanti di client (browser) kita bisa koneksi seperti ini

// konek ke room1
new WebSocket('ws://localhost:3000/room1') // ws: kalau http kalau htpps pakai wss:
new WebSocket('ws://localhost:3000/room2') // konek ke room 2

Kesimpulan

Pakai yang kamu nyaman, SocketIO bagus digunakan kalau kamu bikin aplikasi yang tidak terlalu banyak user, masih menargetkan browser lama seperti IE9, dan mencari solusi cepat. Tapi jika ingin memaksimalkan peforma kita bisa memakai library lain seperti ws, uWebsocket.js, atau library lain. Ingat selalu melihat feedback saat ingin menggunkan library yang cukup krusial pada aplikasi kita.

Yuk mari berkarya!

Link Referensi

Biaya yang diperlukan untuk menjadi programmer? Laptop.

Manda Putra — Sat, 29 Feb 2020 03:11:37 +0000

Semua pekerjaan butuh modal, entah itu dedikasi belajar yang tinggi, relasi, atau uang. Seseorang tanya saya "Mas, kalau mau jadi programmer butuh modal berapa, apa aja?".

Menarik, tidak ada yang pernah tanya seperti ini, padahal saya sering komplain kalau laptop baru harga 4 juta aja masih kalah sama droplet DO yang $5 USD per-bulan.

Makin lama tak terasa jadi programmer bukanlah hal yang 'murah', apalagi sekarang bukan kaya dulu lagi ~ dulu kebanyakan setiap perusahaan menyediakan pegawainya laptop untuk bekerja, sekarang kemungkinan tidak - lebih banyak.

Maraknya co-workingspace juga memberikan dampak tersebut kalau saya fikir, apakah seperti itu? Tapi bisa salah juga wong keputusan perusahaan juga beda - beda, ada yang dikasi ada yang tidak. Tapi hal wajib-nya adalah perusahaan harus punya "Komputer" cadangan ~ gunanya kalau salah satu pegawai alat tempurnya rusak, ya dia bisa langsung pakai yang lain.

Nah mari kita mulai, anggaran yang saya tulis disini adalah biaya seminim mungkin. Ada 2 alat tempur yang perlu diperhatikan:

Internet, 350rb/Bulan

Programmer tanpa internet ~ aku tidak bisa membayangkan. Hidup programmer harus diantara internet dan karena Internet-lah tercipta banyak profesi programmer.

Kenapa kok 350rb? Di ibaratkan kita langganan Indihome (kalau bisa jangan indihome dikit dikit kena blokir, haha). Kok bisa segini? Asliya bisa ditekan jadi cuma 150rb aja kalau kamu nongkrong di wifi.id kalau ga salah dulu voucher-nya 5rebu aja. Tapi kalau digabungkan sama jajan ini - itu ya jadinya 350rb jugak.

Pokoknya pilih yang sekiranya kamu mampu menjalani, mau nongkrong di rumah orang yang punya wifi juga boleh.

Laptop, 4jt - 10jt

Ini laptop saya dulu harga di tahun 2012 3jt di beliin ortu. Saat pertama saya kerja freelance (sekitar tahun 2018) pakai laptop itu, terpaksa saya harus pakai arch, editor geany, karena apa? ringan hemat memori (RAM). Jadi saya masih bisa buka firefox sambil ngoding Angular. Beruntungnya di rumah komputer saya cukup bagus jadi saya jarang pakai laptop buat ngoding kecuali saya harus keluar rumah.

Nah komponen laptop yang aslinya perlu diperhatikan pada saat ingin membeli adalah sebgai berikut.

Penyimpanan harus SSD!

Dalam dunia kerja nanti kebanyakan akan dikasih project yang udah jalan cukup lama. File .git ini ternyata cukup berat untuk project project lama dikarenakan menyimpan banyak histori.

SSD sangat diperlukan dikarenakan proses 'ngoding' selaras dengan proses membaca / menulis file, dengan adanya SSD kita dapat cepat. Perbedaan penggunaan SSD dan HDD ini cukup kentara, aplagi saat git checkout, compiling, hot reload, linting, dan banyak lagi.

Aku selalu rekomen 256Gb, karena ini sangat cukup untuk menyimpan kode, OS, experimen ga penting penting banget dan sebagainya.

CPU ? 2.4Ghz

Soal CPU akusi oke - oke aja mau pakai 1.4Ghz atau 2.4Ghz, tapi tetap rekomen 2.4Ghz, kenapa? Yah ternyata oh ternyata lagi lagi, bukan hanya soal Disk I/O aja.

Peforma CPU ini sangat diperlukan untuk compiling yang memanfaatkan banyak proses pada CPU, Tapi yang terpenting tetaplah SSD.

RAM

RAM minimal 8Gb ~ Dulu 2018 kalau mau build website pakai webpack, aku harus close dulu browser, biar cepat. Menyedihkan tapi tidak apa apa yang penting jalan.

Beberapa program akan memakan banyak RAM, seperti Browser, Android Studio, dan lain lain.

Rangkuman

Tidak juga biaya Internet, Programmer perlu biaya laptop, tentu tanpa laptop-pun kamu bisa ngoding ~ spesifikasi rekomendasi sebagai berikut CPU 2.4Ghz, RAM 8Gb dan SSD 256Gb. Komponen terpenting adalah SSD. Mau bekas atau mau baru, mau bisa di upgrade atau tidak. Yang penting siap tempur :)

Sama oiya kalau mau develop aplikasi iOS / Mac ya harus pakai MacBook yak, ga ada pilihan lain kecuali Hackintos (Kalau mau ribet).

Tipe Data

Manda Putra — Fri, 21 Feb 2020 06:28:57 +0000

Basis Pemrogramman - Tipe Data

In computer science and computer programming, a data type or simply type is an attribute of data which tells the compiler or interpreter how the programmer intends to use the data - Programming Fundamentals (wikibooks)

Setiap variabel mempunyai tipe data. Contoh tipe data yang gampang adalah 'angka' dan 'huruf', biasa disebut integer dan string. Nah pada JS (JavaScript) terdapat beberapa tipe data :

const integer = 123 // integer cuma angka tanpa koma
const float = 123.12 // float punya koma
const strings = 'Hallo semua' // string huruf
const boolean = true // true / false merupakan boolean

// Golang
var integer int = 123
var float float32 = 12.32

Setiap bahasa pemrogramman mempunyai tipe data dan tentu lebih dari yang diatas, function pada JS / C juga termasuk tipe data ada pointer, signed or unsigned int. Tapi dalam kehidupan nyata bisa dibilang kita hanya mengenal 2 tipe data yaitu - 'angka' dan 'huruf'.

But why? tipe data mempengaruhi bagaimana semuah data dapat di representasi dan diolah oleh program. misal 1 + 2 = 3? lalu kalau w + 2 = w2?. Mungkin di JS seperti itu tapi mungkin juga di bahasa lain tidak, atau bahasa lain error.

Untuk melatih kebiasan terhadap tipe data mulailah bermain main dengan tipe bahasa yang tersedia di bahasa pemrogramman. Saya beri contoh.

const a = 12
const b = 15
console.log(12 + 15) // 27

const c = '12'
const d = 1
console.log(c - d) // 11

const e = 5
const f = 'h'
console.log(c - d) // NaN

Variabel

Manda Putra — Wed, 12 Feb 2020 10:17:53 +0000

a variable or scalar is a storage address (identified by a memory address) paired with an associated symbolic name, which contains some known or unknown quantity of information referred to as a value. - Wikipedia

Variabel (variable) merupakan sebuah tempat kita menyimpan data pada program, variabel dapat di deklarasikan dengan simbol / angka tergantung aturan yang ditetapkan pada bahasa pemrogramman. Isi variabel dapat diubah / dimodifikasi sesuai aturan.

Contoh pada bahasa pemrogramman C, Java, Go, dkk, variabel harus ditentukan isinya apa terlebih dahulu (Tipe Data) bahasa pemrogramman ini biasa disebut sebagai 'Static Type' karena tipe data harus di deklarasikan terlebih dahulu.

int angkag4pakekoma = 2;
float angkak0mak0ma = 2.12;
char hurufaja[5] = "Hellow";

int main() {
  printf("%s", huruf);
  // Hellow
}

Pada JS, Ruby, Elixir, dkk tipe data variabel tidak di tentukan dahulu, mereka termasuk dalam kategori 'Dynamic Type'. Variable pada JS.

var NaM3 = 'Maria'
var thisisNumber = 1210.1

console.log(NaM3) // 'Maria'

Penulisan Variable

Penulisan variable diatas tidak patut di contoh (karena membingungkan). Penulisan variabel memang tersera kita mau nulis apa. Tapi berikut adalah cara penulisan variabel yang baik dan benar.

Nama harus berdasarkan maksud data

var PI = 3.14
var apelYangDimiliki = 10
var titleKerja = 'Manager'

Gunakan beberapa cara penulisan yang baik, seperti camelCase, snake_case, UPPER_CASE. mereka punya tempat sendiri untuk di gunakan. Pilih yang anda rasa tepat misal karena PI adalah constant makan anda bisa pakai UPPER_CASE. Lebih lanjut bisa dilihat disini.

Next ?

Setelah mempelajari variabel hari ini, mungkin besok waktunya mempelajari variable scopes, dan beberapa tipe data ~ episode ini akan banyak menggunakan JavaScript sebagai bahasa pemrogramman. So siapkan browser dan dev tools console anda.

Basis pemrogramman ini bertujuan untuk :

Sebuah introduksi ke dalam pemrogramman yang mudah dan cepat
Menambah literasi bahasa pemrogramman ber-bahasa Indonesia
Biar gausah beli buku kuliah tebel yang disaranin dosen.

Saya coba untuk update 1 minggu sekali 😄 :cheers:

Maintain consistent .mp4 video compression with FFmpeg

Manda Putra — Sat, 07 Dec 2019 12:38:38 +0000

So you maybe already know ffmpeg the popular library for video compression, stream, and they had many though you can check that on their website.

Recently I found nice article about compressing using FFmpeg:

Using ffmpeg to compress, convert, and resize videos

Benjamin Black ・ Mar 29 '19 ・ 2 min read

on that article this guy using bitrate to compress the .mp4 file. But to compress files that had size 1Mb to 10Mb that script makes it bigger ~ not make the video smaller.

I had some project that requires video compression back then I do that with scaling (cause it's faster than bitrate compression) found on this StackOverflow answer:

My old project usually uses it, but now I had a use case when I can't scale the video to maintain its original size, so after found that guy answer I just want to share some script here.

/* eslint-disable no-new */
const ffmpeg = require('fluent-ffmpeg')
const ffmpegPath = require('ffmpeg-static').path
const ffprobePath = require('ffprobe-static').path
const path = require('path')
const uuid = require('uuid/v3')

// video path
const videoPath = path.join(__dirname, 'video', 'output.mp4')
// set ffmpeg path
ffmpeg.setFfmpegPath(ffmpegPath)
ffmpeg.setFfprobePath(ffprobePath)

/**
 * Extract Metadata from a video
 * @param {String} path
 */
function metadata (path) {
  return new Promise((resolve, reject) => {
    ffmpeg.ffprobe(path, (err, metadata) => {
      if (err) {
        reject(err)
      }
      resolve(metadata)
    })
  })
}

/**
 * FFmpeg commaand to compress video
 * @param {String} input
 * Path to input file
 * @param {String} output
 * Path to output file
 * @param {Number} bitrate
 * The bitrate you specify to compress video in bytes
 */
function command (input, output, bitrate) {
  return new Promise((resolve, reject) => {
    ffmpeg(input)
      .outputOptions(['-c:v libx264', `-b:v ${bitrate}k`, '-c:a aac', '-b:a 58k'])
      .output(output)
      .on('start', (command) => {
        console.log('TCL: command -> command', command)
      })
      .on('error', (error) => reject(error))
      .on('end', () => resolve())
      .run()
  })
}

/**
 * Choose the right bitrate for video based on Size
 * @param {Number} bytes
 */
function whatBitrate (bytes) {
  const ONE_MB = 1000000
  const BIT = 28 // i found that 28 are good point fell free to change it as you feel right
  const diff = Math.floor(bytes / ONE_MB)
  if (diff < 5) {
    return 128
  } else {
    return Math.floor(diff * BIT * 1.1)
  }
}

// this compress video based on bitrate
async function compress () {
  const name = uuid(videoPath, '1b671a64-40d5-491e-99b0-da01ff1f3341')
  const outputPath = path.join(__dirname, 'video', `${name}.mp4`)
  const inputMetadata = await metadata(videoPath)
  const bitrate = whatBitrate(inputMetadata.format.size)
  await command(videoPath, outputPath, bitrate)
  const outputMetadata = await metadata(outputPath)

  return { old_size: inputMetadata.format.size, new_size: outputMetadata.format.size }
}

compress().then(data => console.log(data)).catch(err => console.log(err))

the 28 and 1.1 are the one that works for me you can change it, I know that my app would not handle more than 1GB so here is the list

| Original | Compressed | Bitrate |
|----------|------------|---------|
| 2.1Mb    | 1.4Mb      | 128k    |
| 10.2Mb   | 5.6Mb      | 308k    |
| 51Mb     | 31Mb       | 1570k   |

for audio maybe for 1Gb video could be bad you could change it too. So far I don't see any quality drop. Just try it. Have a nice days!

Beberapa Cara Menggunakan Fungsi di Javascript

Manda Putra — Thu, 21 Nov 2019 06:52:43 +0000

Hi! 😃 this is not right. Mungkin ini adalah beberapa cara kita membuat fungsi di JavaScript yang jarang kita gunakan dan saya harap beberapa contoh disini digunakan dengan tepat. Welcome to JavaScript function jungle!

Callback and Callback Promises

jangan dipakai yak, sekarang sudah jamannya promise. anda tidak mungkin juga kan bikin library lalu kasih tagline "still support callback"

Jikalau code snippet di bawah ini pernah terlintas di kepala kita, dan kita bertanya bagaimana sih caranya membuat yang seperti ini :

// then - cacth
mymodel.find({ name: 'Agus Sumboro' }).then(data => console.log(data)) // works

// async await
await mymodel.find({ name: 'Agus Sumboro' }) // works

// callback
mymodel.find({ name: 'Agus Sumboro' }, (data) => {
  console.log(data) // works also
})

// dan contoh lainnya

yup, pertama kita harus pahami dulu bagaimana sih cara membuat callback, atau gampangnya sebuah function yang return valuenya adalah function :

function callback(params, cb) {
  cb(params)
}

callback('Halo Isabela', console.log) // Halo Isabela

oke ini hanya support callback saja, lalu bagaimana jika ini support promise juga? saya sempat ingin membuat pull request di mongoose soal views karena menarik di sinilah saya tau kalau ternyata cara sebuah library menghandle ini cukup unik :

function cbPromises(params, callback) {
  const error = new Error(`${params} Not A Number`)
  // check if its function return callback if not return promise
  if (typeof callback === 'function') {
    if (isNaN(params)) return callback(null, error) // isNaN() not a number
    return callback(params)
  }
  return new Promise((resolve, reject) => {
    if(isNaN(params)) reject(error)
    resolve(params)
  })
}

//  now this works yay!
cbPromises('Halo', function(data, err) {
  if(err) return console.log(err.message) // Halo Not A Number
  console.log(data)
})

cbPromises(13)
  .then(data => console.log(data)) // 13
  .catch(err => console.log(err.message))

Menurut saya agak naif menyuruh seorang 'newbie' (saya disini me-refer orang yang baru masuk ke dunia JS) menggunakan async await atau Promise tanpa memberinya kejelasan dahulu bagaimana cara kita membuat promise atau callback. Lest be clear here, and admit something... kita sendiri jarang membuat Promise apalagi Callback kalau di dunia front-end paling saya buat promise cuma untuk Loading Screen. At least we understand how it works and why promise and async is a thing not just syntatic sugar don't we? 😁.

Saya juga belum lama masuk ke dunia JS, mungkin 2 tahun kurang lebih. Saat saya pertama kali kerja (dan saat ini saya masih disana juga), salah satu proyek kantor saya adalah aplikasi dengan 300k++ loc (line of code). First commit program itu tercatat 2015 Januari, yaudah callback hell. hahaha. Biasanya program seperti ini di maintain 6 orang kalau di startup, dikarenakan resource minim cuma 2 orang 😂 yah satu cuti satu kena hajar callback.

Lanjut...

Recursive Function

Pernah ga ngalamin error seperti ini :

ERR: ENAMETOOLONG ternyata panjang nama sebuah file/argumen di terminal kita itu terbatas, lebih tepatnya dibatasi oleh OS.
warning: possible EventEmitter memory leak detected. 11 listeners added. Use emitter.setMaxListeners() to increase limit.

Saya sering menemukan ini saat pertama belajar video processing, atau berkerja dengan child_process, mungkin penerapan function ini bisa membantu menyelesaikan masalah. Mungkin besok saya open ke github reponya setelah selesai bersih - bersih yang ga perlu, atau mungkin buat artikel soal video processing saja.

jika kamu mendapatkan error tsb hal yang dapat kamu lakukan melihat perintah terminal yang kamu gunakan, jika perintah terminal tersebut dapat di minimalisir maka mungkin looping adalah salah satu caranya

// recursive is fun
const arr = [1, 2, 4, 5]
let i = 0
function recursiveFun() {
  i++
  const element = arr[i]
  if(element === 4) return console.log(element)
  recursiveFun()
}

Cara kerja function diatas sangat simple, ambil arr posisi ke i, kalau element bukan 4 maka i+1 panggil fungsi recursiveFun() lagi. Bagusnya function seperti ini dia menyimpan value variable yang ada diluarnya. Tentu ini sangat rare digunakan, dan saya sarankan tidak mengunakan ini kalu belum ketemu error seperti diatas yang mungkin saja solusinya adalah ini.

Salah satu code yang mungkin men-trigger error possible EventEmitter memory leak detected. :

let arr = [[1,2], [1,3]] // big two dimensional array

for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  supremeHardFunction(element)
}

Jarang terjadi tapi mungkin anda alami, jangan sekali kali menambah eventListener kalau memang tidak perlu atau tidak bisa dihindari.

Closures Function

Saya yakin kalau ini sering banyak digunakan dan sangat saya sarankan digunakan. closures merupakan sebuah pattern untuk memberikan private access pada sebuah variable dalam sebuah function. Saya ambil contoh dari MDN saja.

function init() {
  var name = 'Mozilla'; // name merupakan local variable yang ada pada init
  function displayName() { // displayName() merupakan inner function, closures
    alert(name); // bisa menggunakan variable pada parent function
  }
  displayName();
}
init();

Dan sebenarnya kita sering memakai ini, saya sering menggunakan ini saat memakai modul request atau mungkin fetch API. Seperti inilah bentuknya :

function api(key) {
  function get(url) {
    return fetch(`${url}?key=${key}`)
  }

  function post(url, params) {
    return fetch(url, {
      method: 'POST',
      body: JSON.stringify(params),
      headers: {
        'Authorization': `Bearer ${key}`
      }
    })
  }

  return { get, post }
}

const request = api('super-key-bruh!')
// oops kita dah ga perlu lagi masukin API key!
request.get('https://haloexample.com/getexample')
request.post('https://haloexample.com/postexample', { halo: 'Isabela' })

Fluent Function / Methods Chaining

Sebenarnya saya agak lupa namanya Fluent Function/Waterfall Function banyak yang menyebut Methods Chaining. Tapi tentu sintak dibawah ini tidak asing.

const λ = require('rambda.js)

//  not really a lamda function just example
λ.chop([1, 2, 3, 1])
  .reduce(a => a + b)
  .toString()

Yup, jika pernah terlintas bagaimana sih caranya membuat yang seperti itu. Untuk sesuatu yang simple ini saya memutuskan untuk menggunkan function saja, sebenarnya banyak library modern sekarang sudah menggunakan class.

// ini function tapi bisa disebut class...

const Person = function() {
  // define constructor
  this.name = 'Julia';
  this.shirt = 'blue';
  this.gender = 'female';
};

//  use prototype class function
Person.prototype.setName = function(name) {
  this.name = name;
  return this; // this adalah koenchi
};

Person.prototype.setShirt = function(shirt) {
  this.shirt = shirt;
  return this; // this adalah koenchi
};

Person.prototype.setGender = function(gender) {
  this.gender = gender;
  return this; // this adalah koenchi
};

Person.prototype.introduce = function() {
  const sheOrHe = this.gender === 'male' ? 'he' : 'she'
  console.log(`This is ${this.name}, ${sheOrHe} wear ${this.shirt} shirt`)

  return this; // this adalah koenchi
};

Lalu dengan ini kita bisa gunakan snippet diatas secara indah :

const isabela = new Person()
  .setName('Isabela')
  .setShirt('red')
  .setGender('female')
  .introduce()

// atau

const wawan = new Person()
wawan.setName('Wawan')
wawan.setShirt('blue')
wawan.setGender('male')
wawan.introduce()

Oke jika anda menggunakan code diatas tanpa return this.

const juni = new Person()
juni.setName('Juni').setGender('male')

const hey = new Person()
const juni = hey.setName('Juni')
juni.setGender('male')

// setGender is not a function

ini dikarenakan setName sama sekali tidak me-return value, jadi saat setGender mau mengakses dia dapetnya undefined kasian. Jadi saat anda membuat function dan memanggil this pada saat return, ada kemungkinan anda mengembalikan nilai atau value di function tersebut.

🙋: Lha kalau aku panggil `this` ini kok malah keluarnya dari instance framework?
🐨: That's another story...

Yak terimakasih telah membaca sampai akhir seperti biasa saya selalu open feedback, silahakan buat issue di repo blog ini atau mugkin mention saya di twitter.

Wrapping up! sebenarnya masih ada banyak sekali function pattern yang biasa dipakai pada JavaScript tapi tentunya tidak bisa saya cover semua karena saya juga masih baru di dunia JS/Node.js ini, hal diatas hanya beberapa pattern yang setidaknya pernah saya gunakan, semoga dapat membantu saat ingin membuat library di npm atau malah ingin berkontribusi ke beberapa library yang sudah ada. Thanks all and as usual have a nice day! 😄

Tips

Always name your function, dengan begitu kita tidak susah - susah saat profiling code kita jikalau memang nantinya perlu di profiling code-nya. Jika tidak tidak apa apa, karena memang jarang sekali kasus - kasus memory leak.

// dont do this :(
export const aUsualFunction = (params, params2) => { /** do stuff*/ }

// do this instead
export function aUsualFunction(params, paramas3) {
  // do stuff
}

Git Workflow Mudah Kok!

Manda Putra — Thu, 21 Nov 2019 06:51:49 +0000

Kali saya akan membahas beberapa hal mengenai Git sebuah aplikasi versioning yang tentunya mempermudah kita saat membuat aplikasi / memaintain aplikasi.

Git merupakan aplikasi versioning, ya dimana kegunaan-nya adalah versioning aplikasi / atau apapun, saya pernah menemukan novel, buku, dan berkas perpustakaan yang menggunakan Git sebagai versioning karena saking gampangnya dipelajari. Lebih baik juga jika berkas kenegaraan kita menggunakan Git, mudah bukan? ntar tau dah kapan menikah, kapan punya SIM, kapan anak pertama lahir, your git your history but this you can't revert.

Hadirnya Git di inisiasi oleh Linus Trovalds walaupun sekarang di kepalai oleh Junio Hamano. Sebelum Git ada banyak sekali aplikasi versioning, tetapi yang paling populer adalah Git.

Mari simulasikan. Suatu hari Wawan, Joni, dan Ayu akan membuat aplikasi. Hal pertama yang dilakukan Joni adalah membuat Git Repository

Init your workflow first

$ git init # inisiasi git repostitory
# Joni membuat file untuk mengisi git repository
$ echo "# Awesome App!" > README.md
$ git add . # Joni menaruh semua file ke stage area
$ git diff # Joni memeriksa perubahan yang dilakukan-nya
# Joni menaruh semua file ke HEAD
$ git commit -m "Innitial commit of awesome app!"

Git mempunyai 2 area yaitu stage area dan HEAD area. Gampangnya jika kamu sudah merasa selesai menulis/merubah file lakukan git add <nama file> untuk menaruh semua file ke dalam stage area untuk kamu periksa lagi apakah perubahan yang kamu lakukan sudah benar. Jika perubahan yang kamu lakukan sudah benar dan kamu sudah mantab maka lakukan git commit -m "<your message>" untuk memindahkan file yang kamu rubah ke HEAD area dimana nantinya orang lain dapat melihat perubahan yang kamu lakukan.

Wawan ternyata sudah membuat Git remote repository tempat mereka kerja di Gitlab, Joni lalu menambahakan repo tersebut ke local repostitory-nya.

# menambahkan remote repository
$ git add remote origin git@git.gitlab.com:yourgroupname/awesome-app.git

Sekarang kalian sudah project kalian sudah mempunyai remote repository dimana nantinya Wawan dan Ayu dapat meng-copy project-nya melalui remote repository

Kita dapat menambahkan remote repository sebanyak mungkin dengan git add remote <name>. Ini biasa digunakan jika kita memliliki banyak remote repository.

origin merupakan nama default untuk menentukan manakah remote repository. Biasanya remote repository lain digunakan sebagai mirror (eg: linux-kernel, ffmpeg, libvips, etc), mempunyai banyak mirror repository.

# mirror remote repository
$ git add remote mirror git@git.github.com:yourgroupname/awesome-app.git
$ git push mirror master

Git Branching, your app lifecycle

Git seperti sebuah pohon, branch dalam Git merupakan sebuah kopi dari branch yang lain. Branch utama pada Git dinamakan master, Git workflow yang baik adalah Git workflow yang menggunakan branch dengan benar.

Hari kedua sebelum diskusi tim dimulai, Wawan membuat git branch dahulu

# create new branch from master
$ git checkout -b develop master
# deploy branch to remote repository
$ git push origin develop --set-upstream
# Wawan create feature branch
$ git checkout -b feature develop
# Wawan deploy feature branch to remote repo
$ git push origin feature --set-upstream

Wawan lalu bilang ke teman - teman lain bahwa nanti saat awal development kita akan menggunakan branch feature sebagai branch development yang aktif. Branch develop akan digunakan sebagai masa staging aplikasi dan branch master akan digunakan untuk merilis aplikasi.

Ternyata Ayu mendapatkan ticket di Jira untuk memulai project terlebih dahulu. Okay!

# Ayu meng clone project
$ git clone git@git.gitlab.com:yourgroupname/awesome-app.git
# Ayu membuat feature branch-nya dari branch feature
$ git checkout -b feature-user-login feature
# ayu mulai mengerjakan fitur tersebut

Dari yang mereka ber-tiga kerjakan dapat dilihat bahwa Branch master (production) sama sekali tidak bersinggungan dengan branch feature, branch feature besinggungan langsung dengan branch develop dimana merupakan branch staging, tempat mereka bertiga testing aplikasi sebelum rilis.

Kesimpulannya begini :

Ada 3 main branch pada aplikasi mereka (master, develop, feature)
master branch merupakan production branch
develop branch bersinggungan dengan master branch, digunakan sebagai branch staging / testing
feature branch merupakan tempat kerja para developer, penamaan dapat menggunakan feature-namafituranda

Git Merging, the battle of developers

Ayu sudah menyelesaikan fiturnya, lalu dia meng-upload fitur tersebut ke remote repository

$ git add login.cpp
$ git commit -m "add: login function"
$ git push origin feature-login --set-upstream

Yay, perkerjaan Ayu sudah ada pada remote branch, waktunya untuk merging. Merging adalah proses mengabungkan branch satu dengan yang lainnya. Biasanya proses merge ini dinamakan Merge Request / Pull Request. Fitur ini tidak tersedia di local Git anda adanya di Gitlab/Github atau layanan versioning lainya. Untuk selanjutnya saya menyebut ini Pull Request (PR).

Proses PR ini simpel-nya cuma menggabungkan branch target dengan branch dimana tempat development terjadi. Dapat dilakukan juga di lokal dengan cara ini:

# merge feature-login to feature
$ git merge feature feature-login
# merge to develop branch to test it on staging
$ git merge develop feature
# merge develop branch to master, app is going to production
$ git merge master develop

Biasanya proses PR digunakan sebagai proses code review, oleh developer lain terhadap kode yang kita buat. Jika developer lain sudah merasa oke dengan kode yang kita buat, maka developer itulah nanti yang mengabungkan branch tersebut. Contoh proses code-review dan PR bisa dilihat disini

Merge Conflict

Pasti kita pernah mengalami ini sekali atau setiap saat, tergantung seramai apakah sebuah aplikasi di buat. Merge conflict bukanlah hal yang tabu dan perlu ditakuti. Conflict dapat terjadi karena satu developer mengedit 2 hal yang sama.

Cuma memang, kalau kalian melihat kata conflict mesti merasa itu sebuah kesalahan, bukan itu hal yang biasa terjadi jika kalian berkerja dengan banyak orang pada suatu codebase jangan takut bisa di resolve kok.

Biasanya kita bingung bagaimana sih langkah pertama untuk memperbaiki konfik kode ini? Jikalau ini terjadi sebelum kamu melakukan git push kamu dapat menyelesaikan-nya di lokal. Tapi bagaimana jika ini terjadi saat proses PR?

Branch feature-login yang ayu buat tadi ternyata ada conflict yang harus di selesaikan! bagaimana caranya Ayu menyelesaikan ini pada saat proses PR?

// contoh merge conflict
cout<<"Hello please"
<<<<<<< HEAD
cout<<"Open an issue in IRC"
=======
cout<<"Open an issue in Github"
>>>>>>> feature-login

Pertama-tama ayu mengambil update yang menyebabkan conflict dengan cara

# Ayu berada pada branch feature-login
# mengambil update yang menyebabkan conflict pada branch feature
# perintah ini akan melakukan sinkronisasi ke branch feature
# perintah akan menghasilkan error, merge conflict
$ git pull upstream feature
> Error merge conflict in login.cpp

Nah lalu sekarang kita tinggal periksa mana kode yang membuat PR tadi menghasilkan conflict, lakukan resolve di lokal anda.

# Conflict sudah dibenarkan mari kita update
$ git add login.cpp
$ git commit -m "merge-conflict: login.cpp"
$ git push

PR yang Ayu buat akan otomatis ter-update dan mengecek apakah branch feature nanti masih conflict atau tidak. Jika tidak maka fitur yang dibuat ayu siap meluncur ke staging dan production.

Git Tag's, handle your version

Git mempunyai fitur tagging, biasanya fitur ini digunakan untuk menandai versi sebuah aplikasi.

# Aplikasi siap meluncur dengan versi 0.1
# Commit terakhir adalah fitur login Ayu
$ git tag 0.1
# menandakan bahwa sekarang aplikasi anda dengan commit terakhir Ayu
# tadi merupakan versi 0.1

Tagging biasanya dilakukan di branch master, tag tidak seperti sebuah branch, tag merupakan satu kesatuan sendiri. Use case, misal aplikasi versi 1.0 mengalami bug pada login, sementara aplikasi 2.0 tidak. User tidak bisa meng-upgrade aplikasi karena harus bayar lagi. Git tag merupakan solusinya.

# mari ke versi 1.0
$ git checkout 1.0
$ git checkout -b feature-fix-login-on-v1

Tag tidak berlaku sebagai branch, tag merupakan satu kesatuan sendiri, jadi jika anda ingin memperbaiki sesuatu harap, memperbaiki di brach baru lagi yang anda buat berdasarkan branch tag ini.

Notes

Begitulah sekiranya Git workflow, mudah atau malah masih bingung? Haha. Untuk memahami sesuatu memang lebih mudah dengan cara mempraktekannya. Yuk mari praktekkan! Agar aplikasi kita dapat dengan mudah di maintain dan jika ada bug, kita lebih tau commit manankah yang menyebabkan bug tersebut.

Thanks, Happy Git~ here some notes, I steal their image too...

Git Interactive Tutorial

Be happy be good people eveybody :)

Membuat static site dengan Nuxt.js

Manda Putra — Thu, 21 Nov 2019 06:46:27 +0000

Selamat tinggal website yang dulu...

warning: this site not using this method anymore, since I cant figure it out how to do dynamic SEO in Nuxt.js, more on this information I'll explain in here but you can still use this guide to create Nuxt.js simple blog :)

Hai! 😃 dan selamat datang di blog baru ini sebelumnya maaf jika ini memakan waktu lama hanya untuk website dengan fitur tak banyak ini. JAMStack sendiri sudah cukup lama berkembang sejak saya mengenalnya 2017 lalu melalui sebuah perusahaan bernama netlify yang berhasil me-rework sebuah website yang suka saya kunjungi saat sedang belajar programming sampai sekarang berkarir di dunia ini.

Cukup simple

KISS dengan adanya ~~banyak~~ bantuan dari module di NPM... Cukup simple dan bahkan sebenarnya kita dapat menyelesaikannya satu hari.

Markdown Parsing

Bagian markdown-parsing saya menggunakan markdown-it module ofisial dari nuxtjs. Saya agak mendapatakan sedikit trouble menggunakan mdx padahal menurut saya ini lebih powerfull daripada sekedar parsing. Karena saya menganut filosofi dadi sik update sesuk maka saya memilih markdown-it

// nuxt.config.js

modules: ['@nuxtjs/markdownit'],
markdownit: {
  html: true,
  preset: 'default',
  linkify: true,
  breaks: true
},

dan kita bisa menggunakannya dengan

// vue template you use

<template>
  <div v-html="postContent"/>
</template>

<script>
export default {
  computed: {
    postContent() {
      const post = this.$store.state.post
      // path to filename
      return require(`../../content/post/${post.filename}.md`)
    }
  }
}
</script>

Content Title and Blogpost Meta

Untuk hal ini saya manfaatkan YAML front matter pada markdown. Sayangnya markdown-it mendeteksi YAML front matter ini sebagai h2 dan di parse ke html 😄 jadi ya saya nemu ~~workaround~~ yang paling tidak bekerja di website saya.

// remove yaml from blogpost 😁
mounted() {
  const h2 = document.getElementsByTagName('h2')
  h2[0].outerHTML = ''
}

Kembali ke topik meta tadi untuk parser YAML saya memakai gray-matter sebenarnya ini terlalu powerfull-sih tapi saya tidak bisa menemukan yang lebih simple lagi di NPM. Lalu kita buat simple script untuk men-generate meta kita.

// create-post-list.js

const fs = require('fs')
const matter = require('gray-matter')
// eslint-disable-next-line no-path-concat
const files = fs.readdirSync(__dirname + '/content/post')

console.time('⏲')

const posts = []

for (const i in files) {
  // eslint-disable-next-line no-path-concat
  const str = fs.readFileSync(__dirname + `/content/post/${files[i]}`, 'utf8')
  const post = matter(str).data
  posts.push(post)
}

//  to JSON
const data = JSON.stringify(posts)
fs.writeFileSync('blogposts.json', data)

console.timeEnd('⏲')

Bang! dengan ini kita punya single source of truth yang gampang kita gunakan, adanya blogposts.json ini bisa digunakan juga untuk mempermudah proses generate route di nuxt.config.js

// nuxt.config.js

const blogJSON = require('./blogposts.json')

function generateStaticRoute() {
  const route = []
  for (let i = 0; i < blogJSON.length; i++) {
    // add /blog in frot of string
    const blog = blogJSON[i].slug.replace(/^/, '/blog/')
    route.push(blog)
  }
  return route
}

// pages routes automaticaly generated with nuxt 🚄
module.exports = {
  generate: {
    routes: generateStaticRoute()
  }
}

dengan tambahan script di package.json untuk run ini selesai sudah.

Kita juga gunakan blogpost.json tadi pada vuex store untuk fetch data artikel ini.

import dataJson from '../blogposts.json'

export const state = () => ({
  posts: [],
  post: {}
})

export const mutations = {
  updatePosts(state, postsJSON) {
    state.posts = postsJSON
  },
  updatePost(state, { post }) {
    state.post = post
  }
}

export const actions = {
  getPost({ commit, state }, slug) {
    const post = state.posts.find(post => {
      return post.slug === slug
    })
    commit('updatePost', { post: post })
  },
  getListOfPost({ commit, state }) {
    if (state.posts.length === 0) commit('updatePosts', dataJson)
  }
}

naaah dengan ini kita fetch meta data blogpost kita yg ada pada markdown di vue-template

fetch({ store, params }) {
  // in case user reload the page
  store.dispatch('getListOfPost')
  //  fetch post
  store.dispatch('getPost', params.slug)
},

Code highlighting

Saya pilih yang paling ringan Prism.js penggunaannya cukup simple.

// _slug.vue

mounted() {
  const block = document.querySelectorAll('code')
  for (let i = 0; i < block.length; ++i) {
    block[i].classList.add('language-javascript')
  }
  //  remove yaml title
  const h2 = document.getElementsByTagName('h2')
  h2[0].outerHTML = ''
  // hightlight code
  Prism.highlightAll()
}

Enaknya memakai prism sendiri ini style dapat kita kustomisasi dengan mudah 😍.

Still on progress

Jika anda membaca sampai sini ini isinya hanya curhatan saja. Saya ada juga mengalami blocker lain selain kesusahan saat mengapliaksikan mdx di project ini. Salah-satunya adalah purgecss, project ini menggunakan TailwindCSS dimana jika tidak di kompress atau dikurangi class yang tidak digunakan maka size CSS-nya cukup besar yaitu 38.6kb.

Saat saya memutuskan menggukan purgecss, CSS custom saya banyak kena trim 😄 walaupun sudah saya include beberapa class yang tidak boleh di trim. Saya selalu strich soal size, saya sering curi soure code-nya lodash kalau hanya dipakai 4/6 fungsi saja pada proyek saya daripada harus meng-install-nya.

Commenting on blog sebenarnya saya mau menyematkan fitur komen pada blog ini, menggunakan utteranc.es darapida discus ... tapi kok style-nya kurang cocok jadi saya harus menyesuaikannya sedikit dengan website ini.

Karena saya tidak begitu paham paham benar soal CSS. Kadang masih bingung ini kenapa height: 100% kok tidak bisa bisa 😂. Dengan ini saya nyatakan itu fitur berikutnya saja hehe.

Okay semoga anda menikmati first-post saya ini dan mendapat setidaknya sedikit ilmu 😁 oh yah untuk meninggalkan komen anda dapat mengunjungi github issue ini sambil saya coba coba integrasi untterances tadi.

Tidak lupa source code untuk website ini ada di sini

Mencoba Que dengan node-resque

Manda Putra — Thu, 21 Nov 2019 06:44:02 +0000

Hi, kali ini saya akan membahas bagaimana cara kita memanfaatkan fitur background jobs atau queue (antrian) yang bakalan sering kita gunakan.

Use Case!

Queue biasanya digunakan untuk memproses sesuatu yang sekiranya dapat dilakukan di belakang layar tanpa adanya interferensi dari user. Seperti mengirimkan email, video encoding, image processing dan berbagai hal lainnya. Salah satu pengalaman saya pribadi, hal ini sangat berguna saat kita ingin mem-blast ribuan email (atau hanya kirim satu email) atau hanya sekedar video encoding dengan ffmpg.

Jika kita menggunakan third-party service untuk pengirimen email/sms sangat disarankan untuk menggunkan queue dikarenkan service tersebut bisa saja kapan kapan down dan failure, ini dapat diatasi baik oleh queue. Setiap proses pada queue seperti sebuah log history, jadi kita bisa tau mana yang gagal dan mungkin dapat dilakukan retry atau hal lain.

Pengiriman email/sms tanpa menggunkan background jobs bisa saja mem-block main-thread pada aplikasi kita, terutama jika kita menggunakan node.js dimana kita harus mempertimbangkan apakah code ini benar benar memblock main-thread atau tidak. Untuk pengecekannya kita bisa gunakan profiling atau contoh simpel code berikut yang dapat memblock main-thread di aplikasi kita :

const fs = require('fs');
const data = fs.readFileSync('/file.md'); // blocks here until file is read

//  non blocking
const fs = require('fs');
fs.readFile('/file.md', (err, data) => {
  if (err) throw err;
});

Sepertinya akan lebih indah jika artikel selanjutnya membahas tentang blocking dan non-blocking code, I/O dan mungkin sedikit profiling 😄.

Lest get to the code...

Ini hanya que (lest just call it que from now on...) simpel tidak ada multiworker dan sebagainya, but at least setidaknya meng-cover sedikit tentang bagaimana que itu sendiri bekerja.

Que biasanya menggunakan algoritma FIFO (First In First Out) pada kali ini kita akan membuat kalkulator sederhana yg dimana nantinya proses kalkulasi akan dilakukan di que. Mari kita buat aplikasi kalkulaktor terminal kita yang simpel ini.

// calculator.js
const vorpal = require('vorpal')()
const Redis = require('ioredis')
const redis = new Redis()
const pub = new Redis()

//  subscribe to jobs
redis.subscribe('jobs')

vorpal.show()

vorpal
  .command('calc [numbers...]')
  .action((args, callback) => {
    // convert array to strings
    let str = args.numbers.join(' ')
    pub.publish('jobs', str)
    // prompt again
    // this is why I use the lib no need to call
    // tailed prompt in node.js core
    callback()
  })

Seperti biasa dengan kekuatan komunitas dan NPM cukup seperti itu saja sudah jadi. Sebelumnya jika ingin membuat dengan pure nodejs tanpa bantuan vorpal, kita bisa gunakan prompt module dari node.js core.

Kali ini kita memerlukan redis untuk komunikasi (pub/sub) antar node (kalkulator dan que-jobs) jadi pastikan untuk setup redis di mesin yang kita gunakan. Ada beberapa jenis que biasanya kalau que itu tergolong simple dan tidak berat proses que sendiri tidak dipisahkandengan aplikasi atau berjalan satu instance. Pada kali ini kita akan membuat que yang berkomunikasi lewat memcached (Redis) atau bisa kita pisahkan server aplikasi dengan background-jobs.

Pada kali ini kita akan gunakan node-resque sebuah library que yang menurut saya mempunyai interface yang simple dan setidaknya memiliki fitur sceduler dan lain lain.

// que.js
const NodeResque = require('node-resque')
const Redis = require('ioredis')
const redis = new Redis()
const pub = new Redis()
const math = require('mathjs')
// subschannel in redis
redis.subscribe('jobs')

// connect to redis
const connectionDetails = {
  pkg: 'ioredis',
  host: '127.0.0.1',
  password: null,
  port: 6379,
  database: 0
}

// define a jobs
const jobs = {
  'calc': {
    perform: function add(message) {
      return math.eval(message)
    }
  }
}

// initialize worker
const worker = new NodeResque.Worker({ connection: connectionDetails, queues: ['number'] }, jobs)
worker.connect().then(() => worker.start() )

worker.on('start', () => { console.log('worker started') })
worker.on('end', () => { console.log('worker ended') })
worker.on('poll', (queue) => { console.log(`worker polling ${queue}`) })
worker.on('ping', (time) => { console.log(`worker check in @ ${time}`) })
worker.on('job', (queue, job) => { console.log(`working job ${queue} ${JSON.stringify(job)}`) })
worker.on('success', (queue, job, result) => { console.log(`job success ${queue} ${JSON.stringify(job)} >> ${result}`) })
worker.on('pause', () => { console.log('worker paused') })

const queue = new NodeResque.Queue({ connection: connectionDetails }, jobs)
queue.on('error', function (error) { console.log(error) })

queue.connect().then(() => {
  redis.on('message', async function (channel, message) {
    await queue.enqueue('number', 'calc', message)
  })
})

Thats it! jalankan di dua terminal, satu untuk kalkulator dan satunya untuk background jobs/que kita. untuk mengunakan kalkulator kita hanya perlu mengetikan calc 12 + 4 * 10 / 2. Ingat sebelum memasukan angka kita harus panggil calc karena kita sudah mendefinisaknnya sebagai command pada aplikasi kalkulator terminal kita .command('calc [numbers...]').

Lest breaks it down!

Kedua aplikasi yang kita buat tersebut sama sama berkomunikasi lewat Redis dengan cara pub/sub redis.subscribe('jobs') untuk saling bertukar data. Ini adalah fitur yang sering digunakan di Redis. Kalkulator mengirim message lewat redis melalui pub pub.publish('jobs', str).

Sekarang untuk job handling node-resque mengunkaan yang namanya worker dimana harus kita panggil dengan :

const worker = new NodeResque.Worker({
  connection: connectionDetails,
  // queue names
  queues: ['number'] },
  // jobs
  jobs
)
worker.connect().then(() => worker.start() )

worker sendiri berkerja untuk mengecek apakah ada jobs/que yang masih ketinggal atau tidak, jika ada maka akan di proses. Kadang kita juga ingin mematikan proses worker di kondisi tertentu. Misal saat kita menghentikan server yang bertugas sebagai worker, kita bisa saja menggunakan process module dari node.js, seperti SIGNINT atau SIGTERM, :

process.on('SIGINT', async () => {
  console.log('Clearing Que')
  await queue.end()
  await worker.end()
  process.exit()
})

Sebelum kita konek dengan worker biasanya kita definisikan dulu jobs yang akan di proses :

const jobs = {
  'calc': {
    perform: function add(message) {
      return math.eval(message)
    }
  }
}

'calc' ini adalah nama dari jobs tersebut. setelah Worker di registrasikan dan jobs sudah ada maka kita daftarkan jobs tersebut ke que menggunakan module NodeResque.Queue :

const queue = new NodeResque.Queue({
  connection: connectionDetails
}, jobs)
queue.on('error', function (error) { console.log(error) })

queue.connect().then(() => {
  redis.on('message', async function (channel, message) {
    // register que to worker
    // number ==> que name
    // calc ==> jobs name
    await queue.enqueue('number', 'calc', message)
  })
})

Nah komunikasi redis pub/sub biasanya dapat kita peroleh melalui redis.on yang memiliki 2 parameter yaitu channel dan message. Pada contoh ini channel adalah jobs dan cara publish message ke channel dengan pub.publish(namaChannel, message) simple! 😄.

Yak, sepertinya sampai disini dulu pembahasan tentang queue/background-jobs, tidak lupa saya tinggalkan beberapa link penting untuk referensi :

Thanks! hit me up on twitter!

Howk: Compress Image On The Fly with Bandwidth Hero

Manda Putra — Sat, 28 Sep 2019 09:03:53 +0000

So learning code more easy if you read other people code, so be it I made this sort of episode Howk (How does it work) by reading some Open Source project, explain technically and maybe we can get some insight after it.

Recently I got stumbled on Open Source chrome extension named bandwidth-hero developed by @ayastreb the usage of this extension are very simple, just install the extension from chrome or firefox store, insert your server URL (I use my own proxy server, localhost works too), and enable it.

The extension will start saving your data-plan by compress the image you requested around the web.

So, I git clone the repo and try to making sense of how this could work.

It's just a proxy

In computer networks, a proxy server is a server that acts as an intermediary for requests from clients seeking resources from other servers. - Wikipedia

If you notice on your dev tools network tab with the extension enabled, you requested https://placekeanu/700/350 but on network tab, it says http://myserver.dev/?url=https%3A%2F%2Fplacekeanu.com%2F700%2F350&l=40 - it pointed to my server and respond a binary result of an image you requested. But the img-src tag still on https://placekeanu/700/350.

The image aren't saved on the server it is on the fly compression. The cookie itself requested using your server, so it is your server requested the image not the browser.

Then I notice something - when image request / other request get throw out from a browser it only need a correct respond to make something happen on the page. Whether it had some cookie or not, it only need correct response (cookie are validated in header, see here).

The server part compress image using sharp the fastest image compression you could get in Node.js, believe me I use it for years, it uses libvps at the core.

The server code itself are very simple it compress image, make it a buffer, send it back with correct format. It has many options on quality, you can enabled by adding query params.

What API that makes this possible?

If we build a chrome we can get some useful API on networking by enabling this on manifest.json

"permissions": [
  "activeTab",
  "tabs",
  "storage",
  "webRequest", // this permission
  "webRequestBlocking",
  "<all_urls>"
]

You can use some useful listener in webRequest API. There are 3 main webRequest API that used by this project to make this possible :

webRequest.onBeforeRequest
webRequest.onCompleted
webRequest.onHeadersReceived

The main player here are onBeforeRequest listener. It capture url you requested, payload, header, everything on network tab show. All listener placed on background.js.

beware on using browser extension, make sure it is secure / opensource, cause it will be validated by many people and at least we can make sure that the extension doesn't had unwanted tracking.

// ...
let redirectUrl = `${state.proxyUrl}?url=${encodeURIComponent(url)}`
if (!isWebpSupported) redirectUrl += '&jpeg=1'
if (!state.convertBw) redirectUrl += '&bw=0'
if (state.compressionLevel) {
    redirectUrl += '&l=' + parseInt(state.compressionLevel, 10)
}
if (!isFirefox()) return { redirectUrl }
// Firefox allows onBeforeRequest event listener to return a Promise
// and perform redirect when this Promise is resolved.
// This allows us to run HEAD request before redirecting to compression
// to make sure that the image should be compressed.
return axios.head(url).then(res => {
    if (
        res.status === 200 &&
        res.headers['content-length'] > 1024 &&
        res.headers['content-type'] &&
        res.headers['content-type'].startsWith('image')
    ) {
        return { redirectUrl }
    }
// ...

the code above manipulate image url we requested and return manipulated URL so in network tab you'll see our manipulated url.

Some site had CSP rules on their site, it can be pass by adding the correct header after request completed. It is on webRequest.onHeadersReceived you can see the code here

webRequest.onCompleted this api are only used to count how bytes was saved, and show to it the users.

Some Image wont compressed?

Yes it is, since it uses web request proxy it cant process image that already declared (blob / base64) on src like this

<img src="somehowdev.towont upload some html tag with base64"/>

You will see this on google search result, however it still usefull if you open website that had lot of images, facebook, reddit, 9gag etc.

Thanks for reading! I usualy visit some opensource project and make sense on how it works, since it can be usefull way on doing somethings. See ya next Howk. Have a good day; be good people.