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

"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
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

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 moreArchitectural 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

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