https://yaffalhakim1.github.io/ Fullstack Engineer from Indonesia, currently at MySkill.id. I build for the web and the desktop — fast pages, honest APIs, and interfaces that stay out of the way. https://yaffalhakim1.github.io/blog/variables-the-mutability-contract In JavaScript, you use let and const for everything. In Rust, variables are Immutable by Default. This is a strict Mutability Contract that ensures yo... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/variables-the-mutability-contract https://yaffalhakim1.github.io/blog/traits-the-contract-system > ABSTRACT: 🧩 Analogy for Frontend Developers > A Trait in Rust is exactly like an interface in TypeScript. > > Think of a Trait as a Contract or ... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/traits-the-contract-system https://yaffalhakim1.github.io/blog/testing-the-quality-contract Coming from a background of Jest, Vitest, or Mocha, you'll find Rust's built-in testing suite incredibly refreshing. No extra dependencies are needed ... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/testing-the-quality-contract https://yaffalhakim1.github.io/blog/structs-enums-the-blueprint-and-state-machine In JavaScript, you often use plain objects for everything. In Rust, we use Structs and Enums to model data with absolute precision. Think of it as the... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/structs-enums-the-blueprint-and-state-machine https://yaffalhakim1.github.io/blog/strings-the-utf-8-narrative In JavaScript, a "string" is just a string. Whether it's a literal or a variable, it behaves the same. In Rust, Strings are much more complex because ... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/strings-the-utf-8-narrative https://yaffalhakim1.github.io/blog/smart-pointers-the-specialized-containers In JavaScript, most "pointing" is hidden. Every object or array is actually a reference (a pointer). In Rust, pointers are explicit, and Smart Pointer... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/smart-pointers-the-specialized-containers https://yaffalhakim1.github.io/blog/primitive-types-the-core-building-blocks In JavaScript, you have one "number" type and one "string" type. In Rust, you have Scalar and Compound primitives that define the physical shape and s... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/primitive-types-the-core-building-blocks https://yaffalhakim1.github.io/blog/ownership-the-relay-race-of-memory In JavaScript, you don't worry about memory because the Garbage Collector cleans it up for you like a background janitor. In Rust, Ownership takes its... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/ownership-the-relay-race-of-memory https://yaffalhakim1.github.io/blog/modules-organization Rust's modules are similar to JS/TS files and folders, but with much more explicit control over visibility. > ABSTRACT: 🧩 Analogy for Frontend Deve... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/modules-organization https://yaffalhakim1.github.io/blog/macros-patterns-the-metaprogramming-magic If you've reached this part of Rust, you're looking at the tools that power the libraries you've been using (like vec!, println!, or serde). These are... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/macros-patterns-the-metaprogramming-magic https://yaffalhakim1.github.io/blog/lifetimes-the-timeline-contract Lifetimes are the most unique feature of Rust. You have probably never encountered them in JavaScript or TypeScript because the browser's Garbage Coll... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/lifetimes-the-timeline-contract https://yaffalhakim1.github.io/blog/iterators-closures-the-functional-powerhouse If you're coming from modern JavaScript, you're already used to Functional Programming. You use .map(), .filter(), and .reduce() every day. In Rust,... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/iterators-closures-the-functional-powerhouse https://yaffalhakim1.github.io/blog/getting-started-the-hello-world-narrative Starting with Rust isn't just about learning a new language; it's about adopting a Professional Toolchain. While you use npm or yarn for JS, in Rust, ... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/getting-started-the-hello-world-narrative https://yaffalhakim1.github.io/blog/generics-the-template-contract If you are a frontend developer coming from TypeScript, you actually already understand the core concept of Generics in Rust! They solve the exact sam... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/generics-the-template-contract https://yaffalhakim1.github.io/blog/functions-the-expression-narrative In JavaScript, functions often feel like a playground of "statements" (lines of code that just do stuff). In Rust, functions are structured as a Narra... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/functions-the-expression-narrative https://yaffalhakim1.github.io/blog/error-handling-the-safety-net-contract In JavaScript, errors are "invisible." You don't know if a function will return null, undefined, or throw a hidden exception until your code crashes i... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/error-handling-the-safety-net-contract https://yaffalhakim1.github.io/blog/control-flow-the-expression-engine In JavaScript, if/else is a Statement (it does something). In Rust, if/else and match are Expressions (they evaluate to a value). Think of Rust's co... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/control-flow-the-expression-engine https://yaffalhakim1.github.io/blog/concurrency-the-fearless-threads In modern JavaScript, you use Promises (async/await) or Web Workers for "concurrency." In Rust, you have OS-level threads (std::thread). These are muc... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/concurrency-the-fearless-threads https://yaffalhakim1.github.io/blog/collections-the-dynamic-containers In JavaScript, every Array or Object is dynamic. You can add or remove elements whenever you want. In Rust, we use Collections when we need that same ... Tue, 07 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/collections-the-dynamic-containers https://yaffalhakim1.github.io/blog/rust-for-frontend-developers-mastering-ownership-borrowing--deleted If you've ever felt like the JavaScript garbage collector was doing "magic" behind the scenes, Rust is about to pull back the curtain. Moving from a m... Fri, 03 Apr 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/rust-for-frontend-developers-mastering-ownership-borrowing--deleted https://yaffalhakim1.github.io/blog/mastering-the-foundations-of-rust-a-guide-for-frontend-developers--deleted Before diving into dynamic collections like vectors, the sources outline a specific progression of core concepts that every Rust programmer should und... Tue, 31 Mar 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/mastering-the-foundations-of-rust-a-guide-for-frontend-developers--deleted https://yaffalhakim1.github.io/blog/engineering-a-better-auto-perfect-guard-for-sword-and-shield-in-monster-hunter-wilds Learning from Existing Mods and Building a Better Auto Perfect Guard for SnS When I decided to build an Auto Perfect Guard for Sword & Shield (SnS) i... Thu, 05 Feb 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/engineering-a-better-auto-perfect-guard-for-sword-and-shield-in-monster-hunter-wilds https://yaffalhakim1.github.io/blog/deploy-nextjs-15-and-express-backend-to-cpanel-a-battle-tested-guide > What I learned from a frustrating but educational deployment journey Deploying modern JavaScript frameworks to traditional cPanel hosting can feel ... Tue, 27 Jan 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/deploy-nextjs-15-and-express-backend-to-cpanel-a-battle-tested-guide https://yaffalhakim1.github.io/blog/matching-image-height-to-dynamic-content-with-css-grid Have you ever built a split-screen layout where one side is a long form, and the other is an image? Often, the image either fails to fill the vertical... Sun, 11 Jan 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/matching-image-height-to-dynamic-content-with-css-grid https://yaffalhakim1.github.io/blog/how-to-create-a-performant-listening-table-of-contents-in-react Building a Table of Contents (TOC) that "listens" to your scroll position is a great way to improve UX, especially for long-form content like Terms an... Sun, 11 Jan 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/how-to-create-a-performant-listening-table-of-contents-in-react https://yaffalhakim1.github.io/blog/deploying-react-router-v7-with-docker-to-vps-a-complete-cicd-guide --- Introduction Deploying a modern React Router v7 application to production requires more than just copying files to a server. In this comprehens... Sun, 11 Jan 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/deploying-react-router-v7-with-docker-to-vps-a-complete-cicd-guide https://yaffalhakim1.github.io/blog/building-a-universal-scroll-to-hook-in-react-and-nextjs On a landing page, navigation usually involves smooth scrolling to sections. However, once you add multiple pages (like a Blog or FAQ), a simple eleme... Sun, 11 Jan 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/building-a-universal-scroll-to-hook-in-react-and-nextjs https://yaffalhakim1.github.io/blog/markdown-guide A guide to all supported Markdown features in Breeze theme. Fri, 02 Jan 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/markdown-guide https://yaffalhakim1.github.io/blog/hello-world Welcome to Breeze, a minimal Astro theme for personal websites. Thu, 01 Jan 2026 00:00:00 +0000 https://yaffalhakim1.github.io/blog/hello-world https://yaffalhakim1.github.io/blog/my-first-open-source-contribution-translating-reactjs-pages-to-indonesian-language Hi, I'm Yafi, and I recently had the opportunity to contribute to the open-source project ReactJS by translating some of its pages to Indonesian langu... Wed, 07 Aug 2024 00:00:00 +0000 https://yaffalhakim1.github.io/blog/my-first-open-source-contribution-translating-reactjs-pages-to-indonesian-language