DIAN.AFRIAL

Blog

Discover Latest Blog

Case studies, detail discussion
tips and tricks about project and latest tech

#1 Case Study: We Love Photos: A Field Guide to a Modern TypeScript Monorepo

02 Jun 2026 | 19:48Dian Ragil
#1 Case Study:
We Love Photos: A Field Guide to a Modern TypeScript Monorepo

"We Love Photos" is a photo discovery (and in-browser AI background-removal) app. Under the hood it's a pnpm + Turborepo monorepo with two apps — a Next.js 15 frontend and a Hono.js API server — plus three shared packages (db, validators, utils). The web app ships as a static export to Vercel; the server runs on Bun during development and deploys to Cloudflare Workers via Wrangler. On the frontend, search is debounced, paginated with useInfiniteQuery, and rendered through a blurhash-backed masonry grid. On the backend, the server follows a tidy Domain-Driven Design layering so controllers, services, and repositories each have one job.

Read more

#3 Javascript Fundamental: Mengenal Intersection Observer API v1 dan v2: Cara Deteksi Elemen yang Terlihat di Screen

25 May 2026 | 22:08Dian Ragil
#3 Javascript Fundamental: Mengenal Intersection Observer API v1 dan v2: Cara Deteksi Elemen yang Terlihat di Screen

Intersection Observer API, browser tidak hanya memeriksa apakah elemen berada di viewport, tetapi juga mencoba memastikan apakah elemen tersebut benar-benar dapat dilihat oleh pengguna.

Read more

#2 Javascript Fundamental: Stop Using Array.find() for Large Datasets? I Ran a Benchmark and the Results Were Wild

20 May 2026 | 20:34Dian Ragil
#2 Javascript Fundamental: Stop Using Array.find() for Large Datasets? I Ran a Benchmark and the Results Were Wild

This case study compares the performance of Map.get() vs Array.find() for element lookups across datasets of varying sizes. The results clearly demonstrate that Map lookups are orders of magnitude faster than Array find operations, especially as the dataset grows.

Read more

Architectural React.js : Global Loader UX Middleware in React.js with React Context API and Redux js Toolkit

15 Feb 2026 | 14:12Dian Ragil
Architectural React.js : Global Loader UX Middleware in React.js with React Context API and Redux js Toolkit

This article walk through leverage middleware in redux.hs toolkit with global create loader UX -- createAsyncThunk generates action types automatically, the middleware can detect them generically instead of manually handling every API request.

Read more

#1 Javascript Fundamental: Kenali matchMedia() | Cara Baru Atur Responsive Window di Kode JavaScript

21 Jan 2026 | 10:00Dian Ragil
#1 Javascript Fundamental: Kenali matchMedia() | Cara Baru Atur Responsive Window di Kode JavaScript

Untuk kamu yang menginginkan efisien kode, less dependents. Fitur yang sudah dikenali semua browser sejak dimunculkan tahun 2015.

Read more