DEV Community: Awal Ariansyah

OpenCV.js Without the Memory Leaks: Chainable Image Processing for Every JavaScript Runtime

Awal Ariansyah — Thu, 14 May 2026 15:23:26 +0000

If you have ever used OpenCV.js in production, you already know the bug. A user uploads ten images in a row. The third one throws inside your blur step. Your mat.delete() line at the bottom of the function never runs. The WASM heap creeps up. By image six the tab is sluggish. By image nine it crashes. You add a try/finally. You forget one Mat in a helper function. The bug comes back.

OpenCV.js is the most capable image-processing toolkit in the browser. It is also a manual-memory C++ port wearing a thin JavaScript jacket. Every operation allocates one or more Mat objects on the WASM heap, and every Mat is yours to free. Miss one and you leak. Miss enough and you crash.

I maintain ppu-ocv, an open-source TypeScript wrapper that takes the memory tax off your plate, gives you a chainable pipeline, and ships four entry points so you can opt out of OpenCV entirely when your runtime cannot afford the 8 MB WASM blob. It powers the preprocessing path inside ppu-paddle-ocr and a handful of receipt and document pipelines in production.

The OpenCV.js memory tax

Here is a four-step pipeline (grayscale, blur, threshold) in raw OpenCV.js:

const src = cv.imread(canvas);
const gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);

const blurred = new cv.Mat();
cv.GaussianBlur(gray, blurred, new cv.Size(5, 5), 0);

const binary = new cv.Mat();
cv.threshold(blurred, binary, 127, 255, cv.THRESH_BINARY);

// you remember every one of these. always.
src.delete();
gray.delete();
blurred.delete();
binary.delete();

Four operations, four Mat objects, four .delete() calls. Add a try/catch because the user might upload a corrupt JPEG and cv.threshold will throw. Now wrap every one of those delete() calls in finally. Add another operation. Realize you forgot to delete the new Mat. Wonder why memory grows in production but not in your test.

Same pipeline in ppu-ocv:

import { ImageProcessor } from "ppu-ocv";

await ImageProcessor.initRuntime();

const processor = new ImageProcessor(canvas);
processor
  .grayscale()
  .blur({ size: [5, 5] })
  .threshold();
const result = processor.toCanvas();
processor.destroy();

One destroy() at the end. The pipeline owns every intermediate Mat and frees them when you tear it down. If an operation throws midway, the next destroy() still walks the same list. Adding .dilate() next month does not introduce a new Mat for you to track.

The chainable API is the visible win. The memory contract is the load-bearing one.

Type safety and operation order

Every operation is typed. Options have inferred shapes. The chain compiles only if your call sites match:

processor
  .grayscale() // no options
  .blur({ size: [5, 5] }) // tuple is required
  .threshold({ type: cv.THRESH_BINARY }) // OpenCV enum reused
  .canny({ low: 50, high: 150 });

Operation order matters with OpenCV. cv.threshold expects single-channel input. canny expects a smoothed gray image. The library does not reorder your steps for you, but the operations table in the README documents which step expects what, and the types push you toward correct compositions instead of letting you stack dilate on a color image and get garbage out.

For custom operations, the registry.register(...) hook lets you add a pipeline step from your app code without forking the library. The new operation gets the same Mat-lifecycle treatment as the built-ins.

Four entry points: OpenCV is opt-in

OpenCV.js is roughly 8 MB of WebAssembly. That is fine for a server, painful for a tab, and impossible for a Manifest V3 browser extension service worker, which caps script size and forbids eval paths used by some Emscripten builds. Plenty of real image jobs do not need OpenCV at all: crop a rectangle, resize to 360×640, threshold a binary image, draw a bounding box, save the result as a PNG. Canvas APIs handle that natively.

ppu-ocv exposes four entry points so you load OpenCV only when the workload needs it:

Import path	OpenCV	Canvas backend	Use case
`ppu-ocv`	Yes	`@napi-rs/canvas`	Full pipeline, Node / Bun
`ppu-ocv/web`	Yes	`HTMLCanvas` / `OffscreenCanvas`	Full pipeline, browser
`ppu-ocv/canvas`	No	`@napi-rs/canvas`	Edge runtimes, lean Node services
`ppu-ocv/canvas-web`	No	`HTMLCanvas` / `OffscreenCanvas`	MV3 extensions, service workers

The /canvas and /canvas-web entries never import or initialize OpenCV. CanvasProcessor and CanvasToolkit cover resize, grayscale, threshold, invert, border, rotate, region detection (connected-components flood-fill), crop, and image I/O. On binary images the bounding boxes returned by findRegions match OpenCV's findContours(RETR_EXTERNAL) + boundingRect within 1 pixel, and full-pipeline IoU against OpenCV measured at 98.4% across 21/21 boxes.

In practice that means a browser extension that scans receipts can ship under a few hundred KB instead of dragging 8 MB of WASM into every page load. A service worker that wants to crop and threshold an image before passing it to a recognition model can run with zero OpenCV initialization.

When you do need OpenCV (perspective warp, deskew, Canny edges, morphological gradient, contour analysis), swap the import path. The chainable API is the same.

Powering the OCR stack

ppu-ocv is the preprocessing engine underneath ppu-paddle-ocr. The detection step inside the OCR library calls ppu-ocv to normalize input images, resize to the model's expected dimensions, and crop detected text regions for the recognition pass. The OCR library exposes a processing.engine option that flips between "opencv" (uses ImageProcessor from ppu-ocv) and "canvas-native" (uses CanvasProcessor from ppu-ocv/canvas-web). Same author, same testing surface, no version-drift surprises.

Other workloads that ride the same pipeline:

Document scanners: deskew via the bundled DeskewService (multi-method consensus: minAreaRect, baseline analysis, Hough transform). Then perspective warp via OpenCV.
Receipt pipelines: grayscale plus adaptive threshold before OCR. The OCR step gets a clean binary image instead of a noisy JPEG.
PII redaction: detect text regions, draw filled rectangles over them with CanvasToolkit.drawLine and friends, serialize the masked canvas back to a buffer.
Browser-extension capture tools: crop the visible viewport, run a threshold to find tappable regions, return geometry to the content script. canvas-web entry, zero OpenCV.

The shape is always the same: instantiate a processor, chain operations, call toCanvas() or toMat(), call destroy(). Whether OpenCV is loaded depends only on which import path you used.

A worked example: receipt preprocessing

import { CanvasProcessor, ImageProcessor } from "ppu-ocv";

const file = Bun.file("./receipt.jpg");
const buffer = await file.arrayBuffer();

await ImageProcessor.initRuntime();
const canvas = await CanvasProcessor.prepareCanvas(buffer);

const processor = new ImageProcessor(canvas);
processor
  .grayscale()
  .blur({ size: [5, 5] })
  .threshold()
  .invert()
  .dilate({ size: [20, 20], iter: 5 });

const cleaned = processor.toCanvas();
processor.destroy();

// hand cleaned canvas to ppu-paddle-ocr, or save it
const out = await CanvasProcessor.prepareBuffer(cleaned);
await Bun.write("./out/cleaned.png", out);

initRuntime() is the one-time cost. After that, every new ImageProcessor(canvas) is cheap. In Node / Bun the canvas backend is @napi-rs/canvas, which gives you a real Canvas object on the server side without a headless browser.

For the no-OpenCV path:

import { CanvasProcessor, CanvasToolkit } from "ppu-ocv/canvas";

const canvas = await CanvasProcessor.prepareCanvas(buffer);
const toolkit = CanvasToolkit.getInstance();

const cropped = toolkit.crop({
  canvas,
  bbox: { x0: 100, y0: 50, x1: 500, y1: 400 },
});

const binary = new CanvasProcessor(cropped).grayscale().threshold({ thresh: 127 }).toCanvas();

const regions = new CanvasProcessor(binary).findRegions({
  foreground: "light",
  minArea: 20,
});

Zero WASM downloaded. Zero mat.delete() calls. Runs in a service worker.

What's next: React Native Canvas Skia

React Native is the next entry point. The plan is a ppu-ocv/native import that registers a custom CanvasPlatform adapter backed by @shopify/react-native-skia. Skia exposes SkImage and SkSurface objects that map cleanly to the CanvasLike interface ppu-ocv already accepts, so the chainable API stays identical. The first cut targets the canvas-only path (no OpenCV on mobile), which is the right default for on-device receipt scanning and ID capture in a React Native shell.

After Skia:

A worker-pool wrapper so multi-page document jobs fan out across cores without you wiring up worker_threads.
More built-in operations on the canvas-native path so the OpenCV/no-OpenCV feature gap keeps shrinking.
Streaming pipelines for video frames, with reusable Mat pools to amortize allocation across frames.

Get started

npm install ppu-ocv

import { CanvasProcessor, ImageProcessor } from "ppu-ocv";

await ImageProcessor.initRuntime();
const canvas = await CanvasProcessor.prepareCanvas(buffer);

const out = new ImageProcessor(canvas).grayscale().threshold().toCanvas();

// remember the one delete() that replaces all the others:
// (the processor instance, not out)

Repo: https://github.com/PT-Perkasa-Pilar-Utama/ppu-ocv
npm: https://www.npmjs.com/package/ppu-ocv
JSR: https://jsr.io/@snowfluke/ppu-ocv

The OCR companion piece on ppu-paddle-ocr is here: Deterministic OCR in JavaScript.

If you have ever fought OpenCV.js memory in production, give the four-step pipeline above a try on your own sample, and open an issue if it leaks. The whole point of this library is that it should not.

Deterministic OCR in JavaScript: PaddleOCR for Node, Bun, Deno, and the Browser

Awal Ariansyah — Thu, 14 May 2026 14:49:15 +0000

LLMs read text from images now. So why ship a Machine Learning OCR model?

Because the receipt your reconciliation job processed last night will be processed again next quarter, and the totals had better match. A GPT-class vision model can hallucinate a 5 into an 8, drop a decimal, or reorder line items the second time you ask. Cloud OCR also costs money per page, leaks the document outside your network, and breaks the moment the vendor deprecates a model id.

I maintain ppu-paddle-ocr, an open-source TypeScript SDK for PaddleOCR. It runs the PP-OCRv5 family directly on ONNX Runtime in Node.js, Bun, Deno, the browser, and browser extensions, with the same package and the same API. This post walks through what that buys you, how it compares against the official PaddleOCR JS SDK, Tesseract.js, and LLM OCR, and what is shipping next.

Why deterministic OCR still matters in the LLM era

Production pipelines need three properties that LLM OCR fights against:

Reproducibility. Run the same image through the same code on Monday and Friday and get the same string. PP-OCRv5 detection plus recognition is a pair of fixed convolutional and transformer graphs. The output of recognize("./receipt.jpg") does not drift between calls.
Auditability. When a downstream system extracts $42.50 from a receipt, a finance team can point at the model version, the input image, and the bounding box that produced that string. LLMs give you a paragraph of free-form text and no box geometry.
Latency and cost. A single receipt takes roughly 190 ms on an M1 with no GPU and zero network calls. The equivalent vision-LLM round trip is two orders of magnitude slower and costs real money per thousand pages.

LLM OCR is great for one-off semantic extraction (give me the vendor name, summarize this contract). It is the wrong tool for "ingest a million invoices a month and never disagree with yourself."

How the JavaScript OCR landscape compares

A quick tour of the alternatives:

The official PaddleOCR JS SDK (@paddlejs-models/ocr) runs only in the browser, uses an older PP-OCRv4 graph through paddlejs, and was last touched years ago. You cannot drop it into a Node service.
Tesseract.js ships LSTM-based models from a 20-year-old engine. Accuracy on receipts and modern fonts trails PP-OCRv5 by 5 to 15 character points, and there is no per-line batching, no WebGPU, and no built-in support for non-Latin scripts beyond pre-baked language packs.
Vision LLMs (GPT-4 class, Gemini, Claude with vision) are accurate but stochastic, expensive, and require your image to leave the device. The same image submitted twice can produce different field orderings.
ppu-paddle-ocr runs the current PP-OCRv5 graphs through ONNX Runtime, hits 99.22% character accuracy on the receipt benchmark, ships with a single production dependency (ppu-ocv), and works in every JavaScript host you are likely to target.

The official SDK and Tesseract.js are not bad pieces of software. They just stop where modern JavaScript starts: server runtimes, edge workers, mobile shells, browser extensions.

One package, every runtime

The same PaddleOcrService class works in:

Runtime	Install
Node.js	`npm install ppu-paddle-ocr onnxruntime-node`
Bun	`bun add ppu-paddle-ocr onnxruntime-node`
Deno	`deno add jsr:@snowfluke/ppu-paddle-ocr`
Browser	`npm install ppu-paddle-ocr onnxruntime-web` (import `/web` subpath)
Browser extension	Bundle `ppu-paddle-ocr/web` with your MV3 extension
React Native	Shipping next (see roadmap below)

Server runs swap onnxruntime-node for native ORT bindings. The browser entry point swaps to onnxruntime-web and quietly enables WebGPU when the browser supports it. There is no per-runtime fork of the code: I publish one source tree and two entry points (ppu-paddle-ocr for native, ppu-paddle-ocr/web for canvas-native).

A receipt-scanner browser extension I ship uses the same recognize() call as the Bun-based ingestion pipeline that backs it. That alone removed a class of "works on my laptop, not in the extension" bugs.

One production dependency

Look at the dependencies block in package.json:

"dependencies": {
  "ppu-ocv": "^3.1.0"
},
"peerDependencies": {
  "onnxruntime-node": "^1.23.2",
  "onnxruntime-web": "^1.23.2"
}

That is the entire runtime footprint. ppu-ocv is my own chainable image-processing wrapper (OpenCV.js plus a canvas-native backend). The two ONNX Runtime packages are optional peers; you install whichever one matches the target you ship to, never both.

What that buys you in practice:

Predictable bundles. The browser entry point pulls onnxruntime-web and the canvas-native preprocessor. No OpenCV.js in the web bundle, no transitive Tesseract worker scripts, no polyfills you did not ask for.
Lockfile sanity. npm install ppu-paddle-ocr onnxruntime-node adds 2 top-level packages and a handful of transitive ones. Compare that to the Tesseract.js install which pulls in WASM core, language data loaders, and a worker bootstrap.
No vendor SDK lock-in. The whole library talks to a documented InferenceSession interface. If a future ONNX Runtime build adds a faster execution provider, you upgrade the peer and keep your code.
Auditable supply chain. One prod dep means one transitive tree to review when your security team asks. The smaller that tree, the fewer surprises in a npm audit report at 4pm on a Friday.

What the API looks like

The whole surface is three calls:

import { PaddleOcrService } from "ppu-paddle-ocr";

const ocr = new PaddleOcrService();
await ocr.initialize();

const { text, lines } = await ocr.recognize("./receipt.jpg");

await ocr.destroy();

initialize() downloads PP-OCRv5 mobile English by default and caches it under ~/.cache/ppu-paddle-ocr. recognize() accepts a file path, URL, ArrayBuffer, HTMLCanvasElement, or OffscreenCanvas. destroy() releases the ONNX sessions.

For browsers, swap one import:

import { PaddleOcrService } from "ppu-paddle-ocr/web";

const ocr = new PaddleOcrService();
await ocr.initialize();

const result = await ocr.recognize(document.querySelector("canvas")!);

The four-stage pipeline

Each recognize() call walks four stages:

Decode and normalize the input image through either OpenCV.js (ppu-ocv) or canvas-native preprocessing. Browsers default to canvas-native to keep bundles lean; servers default to OpenCV for tighter bounding boxes.
Run text detection with PP-OCRv5_mobile_det_infer.ort. Output: a set of quadrilateral boxes around every text region.
Choose a recognition strategy. per-box runs one inference per region. per-line (the default) merges regions on the same line into one strip. cross-line bin-packs strips across lines into uniform batches, which is the fastest option when you have a dense document.
Decode characters with en_PP-OCRv5_mobile_rec_infer.ort against the language dictionary.

The strategy knob exists because reducing inference calls dominates wall-clock time more than any micro-optimization. On the Apple M1 benchmark in the README, per-line lands at 188 ms per receipt with 99.22% character accuracy.

The Paddle model ecosystem you get for free

PP-OCRv5 is not one model. It is a family, and every member has an ONNX export.

Mobile vs server. Mobile models fit in a few megabytes and run on a CPU. Server models trade size for two extra accuracy points on dense or low-quality documents. Swap the URL in your config; the rest of the code is unchanged.
40+ languages across five script systems. Latin (English, French, German, Italian, Spanish, Portuguese, and 40+ others), Cyrillic (Russian, Ukrainian, Bulgarian, Kazakh, Serbian), Arabic (Arabic, Persian, Urdu, Kurdish), Indic (Hindi, Tamil, Telugu), East Asian (Korean, Japanese), and Thai. Each ships as a separate recognition model plus dictionary file. Pre-converted ONNX builds live in ppu-paddle-ocr-models.
INT8 quantization. The recognition transformer's MatMul ops quantize to INT8 with no measured accuracy loss (99.22% before, 99.22% after) and a 20 to 50 percent speedup on x86-64 CPUs with VNNI and on WebAssembly. The repo ships a one-line Python script that does the conversion.
PP-DocLayout, PP-Structure, PP-FormulaNet. Layout, table, and formula models from the same Paddle family export the same way. The library loads any ONNX model whose I/O contract matches.

The PaddlePaddle team keeps shipping new versions. Because the runtime is plain ONNX, picking up the next bump is a URL change, not a library upgrade.

Switching to Thai (or Russian, or Arabic) in five lines

const MODEL_BASE =
  "https://media.githubusercontent.com/media/PT-Perkasa-Pilar-Utama/ppu-paddle-ocr-models/refs/heads/main";
const DICT_BASE =
  "https://raw.githubusercontent.com/PT-Perkasa-Pilar-Utama/ppu-paddle-ocr-models/refs/heads/main";

const ocr = new PaddleOcrService({
  model: {
    detection: `${MODEL_BASE}/detection/PP-OCRv5_mobile_det_infer.onnx`,
    recognition: `${MODEL_BASE}/recognition/multi/thai/v5/th_PP-OCRv5_mobile_rec_infer.onnx`,
    charactersDictionary: `${DICT_BASE}/recognition/multi/thai/v5/ppocrv5_th_dict.txt`,
  },
});

Detection is script-agnostic. Only the recognition head and dictionary change between languages.

WebGPU when you can get it, WASM when you can't

In Chrome and Edge on Windows, Linux, and macOS, ORT-Web routes inference through WebGPU on its own. Numbers from the library's demo page: 2 to 5 times faster than WebAssembly on the same hardware, no code changes. When WebGPU is unavailable or a kernel falls back, the library reuses the WASM path without restarting the session.

import { isWebGpuAvailable } from "ppu-paddle-ocr/web";

if (await isWebGpuAvailable()) {
  console.log("GPU path active");
}

Browser extensions feel this difference the most. A receipt-scanner popup that returns text in 300 ms is usable; one that takes 1.5 seconds is not.

Performance numbers

Benchmarks from the repo, Apple M1, Bun 1.3.13:

benchmark                            avg (min … max)
[per-line][opencv][noCache]          188.75 ms/iter
[cross-line][opencv][noCache]        193.43 ms/iter
[per-box][opencv][noCache]           206.60 ms/iter

[per-line][canvas-native][noCache]   200.04 ms/iter
[cross-line][canvas-native][noCache] 198.32 ms/iter
[per-box][canvas-native][noCache]    212.86 ms/iter

Accuracy on receipt.jpg (ground truth: 383 chars):
  [opencv]        per-box=97.91%  per-line=99.22%  cross-line=96.34%
  [canvas-native] per-box=97.65%  per-line=98.43%  cross-line=97.65%

Run the same benchmark on your own hardware with bun task bench. I also publish a side-by-side comparison against the official SDK at paddle-ocr-comparison.

What's next: React Native and beyond

I'm working on a React Native entry point. ONNX Runtime ships a React Native binding (onnxruntime-react-native), so the path is the same approach used for the web build: route the canvas and tensor adapters through a new entry point and reuse the shared pipeline. The target is feature parity with the web build, including WebGPU on Android where the driver supports it.

After that:

A worker-pool helper for Node so multi-page PDFs fan out across cores without you wiring up worker_threads.
Built-in support for the PP-Structure family for table extraction.
Streaming results as detection completes, so the first lines render while later regions are still recognizing.

Get started

npm install ppu-paddle-ocr onnxruntime-node

import { PaddleOcrService } from "ppu-paddle-ocr";

const ocr = new PaddleOcrService();
await ocr.initialize();
console.log((await ocr.recognize("./your-image.jpg")).text);
await ocr.destroy();

Repo: https://github.com/PT-Perkasa-Pilar-Utama/ppu-paddle-ocr
npm: https://www.npmjs.com/package/ppu-paddle-ocr
Slack: PPU PaddleOCR community

If you ship OCR in JavaScript today, give it a run on one of your own samples and open an issue with the result. The roadmap moves on what users actually hit, not what looks good on paper.

Create a emoji-picker in dmenu

Awal Ariansyah — Mon, 09 Jan 2023 13:25:45 +0000

One of the nice things I have in Windows is that when I pressed windows + ., the emoji picker shows up. When I moved to linux distros as a daily driver, I kinda missed that features.

You can use others packages or use IBus, but I would like some cleaner approach. This approach is presented by Luke Smith, check out his cool youtube: https://www.youtube.com/watch?v=UCEXY46t3OA.

I'm assuming you're already installed dmenu on your system.

Get all the emoji

mkdir ~/dmenu
cd dmenu

curl https://gist.githubusercontent.com/Caellian/947e9b7b0f9d42278b9308765dc4ec08/raw/66a8b264732b4da40970cb3c57df02118e47cb2b/update.sh | sh

We make a directory and then use this nice script by Caellian to collect all available emojis and format it.

You'll see a file named "emoji_list". That's the file we're going to insert into dmenu.

Make the script

touch dmenuemoji.sh
chmod +x dmenuemoji.sh

We created a file dmenuemoji.sh, open it with your favorite editor.

Paste the script by Luke Smith below.

#!/bin/sh

grep -v "#" emoji_list | dmenu -i -l 20 | awk '{print $1}' | tr -d '\n' | xclip -selection clipboard

pgrep -x dunst >/dev/null && notify-send "$(xclip -o -selection clipboard) Copied!"

Don't forget to bind it with a keyboard shortcut.

You can edit the script, for example your preferred dmenu layout or your clipboard app. Here's my final result:

My final script:

#!/bin/sh
grep -v "#" emoji_list | dmenu -c -i -l 15 | awk '{print $1}' | tr -d '\n' | xclip -selection clipboard;

if [ -n "$(xclip -o -selection clipboard)" ]; then
notify-send "Emoji copied" "$(xclip -o -selection clipboard) successfully copied!" --icon=dialog-information;
fi

Setup PHP Laravel (Postgresql & mysql) Development Environment on Ubuntu 22.04 Jammy

Awal Ariansyah — Sun, 11 Dec 2022 14:42:09 +0000

I'm not a big fan of PHP and mainly worked with Node.js project, this time I get a project using a legacy PHP/Laravel code bases and It's really frustrating for me to just run the code because I'm not getting used to the ecosystem.

In case you are running the same issues or maybe me, I decided to wrote it here.

OS Information

Installing PHP

Be sure which PHP version you want to install, because compatibility matter. A lot. Seriously.

The default APT repository is PHP 8. In my case, I need to install PHP 7.4.

sudo apt install -y apache2 php7.4 php7.4-common php7.4-cli php7.4-xml php7.4-mbstring php7.4-gd php7.4-pgsql

Installing composer

curl -sS https://getcomposer.org/installer | sudo php -- --install-dir=/usr/bin --filename=composer

Laravel global installer

composer global require laravel/installer

Installing mysql

sudo apt install -y mysql-server php7.4-mysql

Installing postgresql

sudo apt install -y postgresql pgadmin4

Setup postgresql & pgadmin

sudo /usr/pgadmin4/bin/setup-web.sh

sudo -i -u postgres

psql

ALTER USER postgres WITH PASSWORD 'yourpostgrespassword';

\q

logout

The default postgresql information:

Hostname: localhost
Port: 5432
Username: postgres
Password: yourpostgrespassword

Now you can access it via Pgadmin desktop app or the web version at http://127.0.0.1/pgadmin4/browser/

Run existing laravel project

Clone the project to local
cd into it
Run composer install
Fix every composer's lockfiles issues (usually missing php extension) (if there's any). Example:

sudo apt install -y php7.4-gd
sudo service apache2 restart

Then run composer install again.

Run npm install Make sure you have already installed python. In my case I need to install python2 and set the npm global variable.

sudo apt install python2
npm config set python /usr/bin/python2

Run npm run dev
Run cp .env.example .env
Edit the .env file configuration (especially in DB, make sure you created an empty database first)
Run php artisan key:generate
Run php artisan migrate
Run php artisan serve

Hope it helps~

How to recover lost files in Linux using Foremost

Awal Ariansyah — Thu, 01 Dec 2022 08:41:20 +0000

A lot of people don't know that Foremost is a very good command line program for recovering lost files. It's actually in many distros by default and it's very easy to use, as you'll see in the article.

Introduction

When a file is deleted, the data is not immediately removed from the storage device. The operating system simply removes the reference to the file from the file system table. The space that was occupied by the file is now marked as free space and can be overwritten by new data.

If you act quickly, you may be able to recover lost files using Foremost. Foremost is a data recovery program that uses headers and footers to identify files. It can search a storage device for specific file types and recover them.

What is Foremost?

Foremost is a data recovery program that can be used to recover lost files in Linux. The program works by looking for patterns in the data that are characteristic of specific file types, and then extracting the data from the file. Foremost can be used to recover a wide variety of file types, including images, documents, and even video files.
How does Foremost work?

Foremost works by looking for patterns in the data that are characteristic of specific file types. Once a file type has been identified, Foremost will then attempt to extract the data from the file. In order to do this, Foremost uses a number of different techniques, including looking for headers and footers, and using heuristics to guess the structure of the file.

How to install Foremost?

In order to use Foremost to recover lost files, you will need to have a Linux system with the Foremost package installed. The Foremost package is available through many different package managers, so consult your package manager's documentation for instructions on how to install it. Once you have Foremost installed, you can begin using it to recover lost files.

For debian-based:

sudo apt install foremost

For arch-based:

sudo pacman -S foremost

How to use Foremost?

Assuming you have already installed Foremost, here are the steps to follow to recover lost files using this tool.

1. Scan your directory to recover

sudo fdisk -l

In this case, mine is at /dev/sdc.

2. Create an output directory for the recovered files

mkdir /output

Run Foremost with desired options against the image file

sudo foremost -q -v -t png -i /dev/sdc -o /output

You can use the "-i" option to specify the input file, which is typically a disk image or partition that you wish to search. The "-q" and "-v" is for quick scan and verbose/logging respectively.

Once you have specified the input file, you can then use the "-o" option to specify the output file. This is the file that Foremost will write the recovered files to. It is important to note that Foremost will overwrite any existing files in the output file, so make sure that you do not specify an existing file as your output file.

Conclusion

Foremost is a powerful data recovery tool that can be used to recover lost files in Linux. In this article, we have provided a step-by-step guide on how to use Foremost to recover lost files. We hope that this guide will be useful for you and help you get your lost files back.

COBIT 5 Framework Implementation

Awal Ariansyah — Mon, 21 Nov 2022 10:54:57 +0000

COBIT 5 Framework Implementation

The COBIT 5 framework is a set of best practices for enterprise governance and management of information and technology. It provides a comprehensive and flexible approach to help organizations meet their IT governance needs in a cost-effective and efficient manner. This blog post will provide an overview of the COBIT 5 framework and its implementation. We will cover its key components, benefits, and challenges. By the end of this post, you should have a good understanding of what COBIT 5 is and how it can be used to improve your organization's IT governance.

What is COBIT 5?

COBIT 5 is the latest version of the COBIT framework, released in 2012. It is a comprehensive framework for the governance and management of enterprise IT. COBIT 5 provides guidance for all aspects of IT governance, from strategy to implementation. It is based on an updated version of the ISO/IEC 38500 standard, and includes input from over 150 experts from around the world.

What is the benefit using COBIT 5?

There are many benefits to using COBIT 5, including its comprehensive and coordinated approach, its clear structure and terminology, and its focus on governance. Additionally, COBIT 5 provides a comprehensive framework for the implementation of an effective governance system. It also helps organizations to understand the relationships between different processes and how they contribute to organizational objectives. Finally, COBIT 5 is flexible enough to accommodate the unique needs of any organization.

How to implement COBIT 5 in real case?

COBIT 5 is a process-based approach for the governance and management of enterprise IT. It provides a comprehensive framework that covers all aspects of IT governance from strategy to implementation.

The first step in implementing COBIT 5 is to develop a clear understanding of the organization's IT requirements. This includes identifying the specific business goals that the organization wants to achieve with IT, and determining the resources required to support these goals. Once the IT requirements are understood, the next step is to develop a COBIT 5 implementation plan. This plan should be designed to meet the specific needs of the organization and should be tailored to the organization's size, structure, and culture.

Once the implementation plan is in place, the next step is to implement COBIT 5 within the organization. This process typically involves training employees on COBIT 5 and its processes, as well as deploying COBIT 5 tools and templates within the organization. The goal of this phase is to ensure that all employees are aware of COBIT 5 and its processes, and that they know how to use COBIT 5 tools to support organizational goals.

The final step in implementing COBIT 5 is to monitor and review the progress of the implementation. This includes tracking metrics related to COBIT 5 usage, assessing compliance with organizational policies, and evaluating the overall effectiveness of COBIT 5 in meeting business goals.

Job roles in a startup company

Awal Ariansyah — Mon, 17 Oct 2022 23:04:22 +0000

Continuing my task in Information and security task, I'm here to write several job roles and their policy. There are certain roles. Here are eight important ones to consider from reference I found:

1. Chief executive officer (CEO) and chief operations officer (COO)

Two of the most essential players in your business will be the CEO and COO. The CEO is typically the big-picture person who controls the company’s direction, vision, and culture, whereas the COO primarily focuses on the day-to-day operations that keep your business running.

You can hire externally for these positions, but the founders of the company usually assume these responsibilities. Tierra Wilson, co-founder and CMO of Lovely Impact, recommends starting as the CEO of your business before hiring out. If you and your co-founder(s) already plan to take on these titles and responsibilities, hire the following seven positions next.

2. Product manager

The product manager will be your go-to on all things related to your products. This team member manages the product strategy, vision and development. They typically work closely with the engineering and marketing teams to create and market your products.

Vince Repaci, senior coach at LOVR Atlantic, said that bringing on a product manager can be difficult for founders, as they are typically the initial default product manager and heavily invested in their own products or services.

“When you [can] afford to bring on a project manager, though, it forces you to change the way you think about the project by documenting and training someone else in it,” Repaci told Business News Daily. “This move allows founders to start working on the business rather than in the business.”

3. Chief technology officer (CTO)

A team member who specializes in technology and development is crucial to your business’s success, especially for tech startups. Although you can hire freelance front-end and back-end engineers, it’s useful to have someone on your internal team take charge of this sector. As your team grows, you can split this role into two separate positions.

“Having someone with the skills to decide what will work best for your business, as well as overseeing the integration and management of various systems, is key,” said Sue Andrews, business and HR consultant at KIS Finance. “They’ll need to consider everything from hardware to software and mobile technology.”

Andrews said this team member can also take the lead in building your online presence. They can split that responsibility with your marketing manager as well.

4. Chief marketing officer (CMO) and community manager

This team member will focus on your customers and how they view your product or service. Andrews said that hiring an expert with excellent marketing and promotional skills is essential to make sure your vision reaches a wide audience.

“Find a marketing manager that is a jack-of-all-trades,” Wilson said. “Until you can scale, they should be able to write copy, design collateral, code landing pages, run ad campaigns and handle social media marketing.”

They should also interact with your customers and act as an interim community manager to maintain positive relationships between your business and consumers. This team member can work with the product manager to incorporate customer feedback into product development.

5. Sales manager

This team member will focus on generating new leads and bringing in money for your company. Wilson said startups and small business owners who master sales first last longer.

“Hire an amazing sales rep or manager, and then use the money they bring in to hire more people,” she said. “This is probably the hardest position to hire for, but [it is] worth the time and effort to get the right person.”

Repaci said that a skilled sales manager with experience in your industry typically won’t require a lot of training to generate leads and close deals.

6. Chief financial officer (CFO)

Experts recommend that startups outsource their accounting and finance roles, but if you have the capability to hire a CFO, it can be extremely helpful for your business.

“It’s essential that you have someone on the team who is responsible for the money and has an eye for detail to manage all aspects of the company’s finances,” Andrews said. “In the early stages, this will range from major issues, such as securing bank lending and leasing premises, to everyday necessities, such as paying suppliers and managing the petty cash.” [Read related article: Startup Costs: How Much Cash Will You Need?]

7. Business development manager

While similar to the sales manager, a business development manager finds ways to grow your business from both a marketing and sales standpoint. For example, this professional might focus on developing relationships with other businesses to increase revenue and potential for growth.

A good business development manager identifies new business opportunities, both within your organization and with other companies. In doing so, they’ll consider new markets, areas where you might expand, new partnerships, ways to reach other existing markets, and ways to appeal to your target customers.

For example, perhaps a competitor is offering a product or service you haven’t yet considered. Your business development manager will look for ways to not only keep up with their offerings but also set you apart from them to attract more attention to your brand.

8. Customer service representative

Customer service is a critical task every business should master. Building positive relationships with your customers and clients is the cornerstone of your brand.

It doesn’t matter how great your products or services are if your business isn’t effectively communicating with its customers and clients. Without a professional handling customer questions, calls or concerns, your reputation will inevitably suffer. You’ll want to fill this role as soon as possible

Policy strategies for information system threats

Awal Ariansyah — Mon, 03 Oct 2022 17:14:45 +0000

I'm back writing a college task for my Network and Information Security class. This time the task is to write some policy strategies based on all the threats I already mention in the previous post.

Read it here Company information security analysis
.

I picked is a local Indonesian hosting company, namely Rumahweb. Rumahweb did a great job in making a policy. I will write what I understand.

General Agreement

Consists of several point of agreement between the company and the customer that is

Subject of Agreement
Validity of Agreement
Service Agreement
Service Policy
Customer Rights and Obligations
Customer Support
Agreement Changes
Violations and Sanctions
Disclaimer
Dispute resolution

There is a lot of stuff, you can read more here

Domain Service Agreement

Agreement that focused on the domain services, consists of

Service Definition
Customer Rights and Obligations
Rumahweb's Rights and Responsibilities
Deletion and Termination of Service
Uniform Domain Name Dispute Resolution Policy (“UDRP”)
Costs

Web Hosting Service Agreement

The main agreement between Rumahweb and the customer for the main service which is a web hosting service. Overall it is similar to previous agreement with the addition of:

Service Guarantee
Claims for Service Warranty Failure

Privacy Policy

Next we will be looking at the privacy policy. It is covering what data they collected, how will they use the data, third-party authentication, data confidentiality limits and the data security.

What's written in the data security policy is that Rumahweb Indonesia tries its best to protect customers' personal/company data from parties who are not authorised to obtain such data, except to do the things mentioned in Data Use.

That's so simple policy I'd say. Read the policy here

Acceptable Use Policy (AUP)

Acceptable Usage Policy is a policy on the use of Rumahweb Indonesia facilities which are included in the services used by customers.

It covers:

Website content
Hosting account usage
E-mail facility usage
Hosting resource usage
VPS/Cloud Server service usage
Titan Email/Flockmail service usage
Alibaba Cloud VPS service usage
Sanctions Against Violations
Handling Violations/Abuses
Contact Abuse
Abuse Report Tracking

Read full here

Service Level Agreement (SLA)

The last thing is the agreement in the level of service, it requires customer to understand the other policies first.

The inside is consists of:

Internet Connectivity Uptime Guarantee
Server Uptime Guarantee
Data Security Guarantee
Claim for Warranty Failure
Approval of Premium WordPress Plugins and Themes
Alibaba Cloud VPS Service Definition
Alibaba Cloud VPS Service Downtime Guarantee
Alibaba Cloud VPS Downtime Guarantee Failure Claim Process
Disclaimer
Amount of Compensation for Service Failure
Tax Collection
Billing and Payment
Refund Policy

Read full story here

Wrap-up

Well, I know it's kind of lazy writing that just write the sub-heading of the content. At the very least you learn about policy of a hosting provider so you could prepare for it in case you want to open one. Thanks.

Company information security analysis

Awal Ariansyah — Sun, 18 Sep 2022 13:10:55 +0000

In my recent class of college, a Network and Information Security, I have tasked to do some analysis of a company and identify the information assets and also the threat of that company. So, I decided to write it here.

Before we jump, I will explain briefly what I learned so far regarding to Network and Information Security.

What is information system?

I will rephrase the definition from Satzinger, Jackson and Burd.

Information System is a group that are linked one to another in purpose of gathering, processing and storing information that can be used as an output to solve a business problem. (Satzinger, Jackson, Burd: 2010).

What is assets?

Assets in terms of Information System is an assets that is important as the fundamental block of the system.

Assets categorised into:

Personnel
Hardware
Application software
System software
Data
Facility
Support

What is a threats?

Threats is an action or event in a company that can occurs in the form of harm, resulting in losses. It can be losses in money or costs, energy or effort and even opportunity, good reputation and bankruptcy.

The category of threats:

Human resources failures
Hardware failures
Software failures
External threats
Internal threats
Financial
Nature

The purpose of information security

A value of information will be valued by the people if it can be trusted for:

Integrity
Confidentiality
Availability
Authenticity

Company analysis

Now we are back to the task, the company I picked is a local Indonesian hosting company, namely Rumahweb.

Rumahweb - Painless hosting solution, is a Platform as a Service (PaaS) provider that serves a web hosting as well as domain registration focusing in a low to mid-level online businesses. (https://www.rumahweb.com/).

I am not trying to promote Rumahweb, but it is worth to check due to cheap cost for your development test. So, let us analyse the assets and the threats of Rumahweb.

Assets analysis

Personnel

As a platform service, sure they had a lot of personnel. Let's just mention several of them. Customer supports, Accountant, and probably the whole IT departments such as IT support, Database Administrator, Back end Developer, Front End Developer and more.

Hardware

The hardware is a server computer with a lot of VM's running and also a datacenter to store customer's data. It can be independent server, or partnering with bigger cloud company like AWS, Alibaba, Litespeed, Google Cloud or Digital Ocean.

Application software

In the client-area it will provide a web-based application of cPanel with tools and utilities.

System software

Rumahweb provide a Virtual Private Server a.k.a VPS to handle system-level of business requirements.

Data

They store a client's application data, the critical data of the company and other internal data such as financial data and services documentation.

Facility

The company essential facility of Rumahweb is the office building. They have 2 building, a headquarter and a branch buildings located in Yogyakarta and Jakarta respectively.

Support

Support or helper assets of Rumahweb is the Indonesian Law to protect the client's data and the eligibility of the company itself.

Threats analysis

Human resources failure

No system is safe

No matter how secure a system, a failure can happen. Especially in the human's level, a social engineering is the common threats with a fatality depends on the target and the data leaked.

A hosting provider, typically can happen a failure from the non-IT staff due to Social Engineering. That does not mean an IT staff would not likely to be affected.

Hardware failures

Hardware failures can happen like the server overheat, unnoticed damage in hardware, low quality hardware. I can not think anymore example.

Software failures

This category of failures is the common one among many company, it can be causes by missed User Experience implementation, outdated application, and poor user-interface.

External threats

In a hosting provider scenario, the bad actor is going to target the client from the hosting provider because the client is the first-layer of the attack.

The threats can be a Remote Code Execution due to poor web application deployed to the hosting, a phising, DDoS, or a malware that steal the access token's users.

Internal threats

Internal threats from the perspective of the company would be a sabotage, human-error as well as non-technical problems among the staff.

Financial threats

The financial threats of Rumahweb would be can not afford an infrastructure to scale the client's business either by financial miscalculation, partner regulations, and wrong financial strategy.

The others would be lost to its own competitor.

Nature threats

This one is an easy analysis, if Rumahweb only relies on Regional or National data centre, the nature threats would be a Flood or a Earthquake.

Because those are the most common disaster that occurs in Indonesia.

Conclusion

Well, that's wrap all of it. I am sorry if you are ended up reading into this section and do not find it any useful. I wrote this as my part of college's task, so enjoy.

I hope you learn something new, thank you.

A Tale of Reducing Expo/React Native Android Application

Awal Ariansyah — Tue, 13 Apr 2021 02:55:05 +0000

I'm going to take you to my journey on how to smoothly reduce an android application made with React Native/Expo and hopefully without getting any error. Let's begin the journey!

First things first, let's talk about my development environment. I'm using Lubuntu 20.04 focal, with Desktop Environment LxQt 0.14.1 and the details as shown in the picture below. I've successfully reduce my app for about 49% (the universal version).

Requirements

There are several package you need to install in order to have smooth build.

Install JRE, JDK and check the installation

sudo apt-get install default-jre
sudo apt-get install defalut-jdk

java -version
javac -version

Install Expo Command Line

sudo npm install --global expo-cli

Install Android Command Line Tools

sudo export ANDROID_HOME=/usr/lib/android-sdk
sudo wget https://dl.google.com/android/repository/commandlinetools-linux-6609375_latest.zip
sudo unzip commandlinetools-linux-6609375_latest.zip -d cmdline-tools
sudo mv cmdline-tools $ANDROID_HOME/
sudo export PATH=$ANDROID_HOME/cmdline-tools/tools/bin:$PATH

Set up licenses

Go to /usr/lib/android-sdk/ directory

cd /usr/lib/android-sdk/

We need to accept the license before using the sdk

sudo yes | sdkmanager --licenses

And also we need to change the permission on /tmp folder

sudo chmod -R 0777 /tmp

Action

So, the first action you need to take is open up your expo react native folder in a terminal. Make sure you back up your project files first, for safety.

Run the following command

expo eject

You will be asked with several question, and just answer it based on your project information. After you finish, there will be a new folder inside your project called android and IOs.

Go to android folder and make a new file called local.properties. This file will be used for pointing the sdk that gradle need in order to build your application.

cd android
touch local.properties
sudo nano local.properties

add the sdk.dir variable like this

sdk.dir = /usr/lib/android-sdk/

Ctrl + O, Enter, Ctrl + x to save it.

Next, go to the android/app folder on your terminal and generate a keystore for your application so that you can publish it in Google Play Store.

cd android/app
sudo keytool -genkey -v -keystore yourkeyname.keystore -alias yourkeyaliasname -keyalg RSA -keysize 2048 -validity 10000

Replace yourkeyname and yourkeyaliasname. And you will be asked for password. Make sure you remember the password.

After finish, a new file will appear with the extension (.keystore). That's your key. Now head back one directory and edit the gradle.properties file.

cd ..
sudo nano gradle.properties

add this line below

MYAPP_UPLOAD_STORE_FILE=yourkeyname.keystore
MYAPP_UPLOAD_KEY_ALIAS=yourkeyaliasname
MYAPP_UPLOAD_STORE_PASSWORD=yourkeypassword
MYAPP_UPLOAD_KEY_PASSWORD=yourkeypassword
org.gradle.jvmargs=-Xmx4096m

Replace yourkeyname, yourkeyaliasname and yourkeypassword then save it.

Now, go to app folder and edit the build.gradle file

cd app
sudo nano build.gradle

Change these line from false to true

def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false

Scroll down into signingConfigs and add this configuration below the debug

    release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
        }

Then, in the buildTypes look in curly brackets for release change this line

signingConfig signingConfigs.debug

signingConfig signingConfigs.release

Also add this line below the minifyEnabled

shrinkResources true

Then scroll down to the last line, add a closing curly bracket (}). I don't know I'm getting an error without this strange closing curly bracket.

The last thing, if you also want to build an universal apk file then scroll up and search for splits, inside the abi change universalApk from false to true. Save it.

Note: If your app doesn't contain any permission, make sure you don't have any use permission code inside AndroidManifest.xml.

Because by default, if you're not set the permission in the package.json, expo will automatically add every permission to your app and I'm having this issue when I was trying to publish to Google play store, so make sure you check that part.

Now everything is ready, time to build. Head back to android folder where the gradlew file exist. Log in terminal as super user, to avoid permission issues.

cd ..
sudo su

If you want to build the .apk file, run this command

./gradlew assembleRelease

Or if you want to build as a bundle (.aab) file run this command

./gradlew buildRelease

In my case, this take about 5-18 minutes depending on your machine and your project. The output will be in app/build/outputs/apk/release for .apk and app/build/outputs/bundle/release for .aab.

Well, that's all I guess. Hope it help, thank you for reading and sorry for a bad English. Cheers~