Notes.
Lessons gathered from code, work, family, and the small journeys of everyday life.
73 entriesA place to begin
012025-10-05
GitHub Copilot + VS Code + Marp = Slide Presentations in Minutes
Learn how to create slide presentations quickly using GitHub Copilot, VS Code, and Marp. This guide walks you through setting up the tools and leveraging AI to generate content, allowing you to focus on delivering ideas without the hassle of traditional slide design.
↗022025-05-096 Logical Fallacies Common in the IT World (and How to Avoid Them)
Logical fallacies like appeal to authority and false dilemma can lead to incorrect IT decisions. Learn examples & how to avoid them in this article.
↗032025-03-14Use <button>, Not <div>, for Clickable Elements
Using <button> instead of <div> for interactive elements improves accessibility, keyboard navigation, and screen reader support. Buttons are naturally focusable, respond to Enter and Space, and require far less extra code. Avoid unnecessary complexity — use the right semantic element for better usability and compliance with web accessibility standards.
↗042025-02-17React Grid Layout Widget DnD and Resizable Example
This post demonstrates how to build a React grid layout with draggable and resizable widget components using the react-grid-layout library. We'll put together a simple dashboard where users can rearrange widgets however they like.
↗All writing
2026
19 entriesRunning TypeScript 7 and ESLint Side by SideHow to use the native TypeScript 7 compiler for builds and type-checking while keeping TypeScript 6 available for the Compiler API required by ESLint.↗Automating My Morning Work Ritual with a Claude SkillThe story of building a single Claude Skill to compress my morning work ritual—Teams, Forecast, Outlook, Gmail, the sprint board, all the way to standup—into one connected flow.↗Socratic AI: When AI Helps Us Think, Not Just AnswerSocratic AI applies the Socratic method to chatbots and virtual tutors: instead of giving answers immediately, AI guides users with questions so higher-order thinking remains trained in the age of AI.↗How I Manage My Money: Daily Budget, Money Lover, and Saving-InvestingMy day-to-day personal finance system: a global budget in Money Lover that gives me a daily spending recommendation, the habit of logging every transaction, and manual transfers into savings, time deposits, and government bonds.↗What I Learned Using Sanity Across Two Client ProjectsNotes from two bilingual company profile sites I built with Sanity and Next.js — localized fields, webhook-driven revalidation, live preview, and the habit of auditing your schema.↗1 Week of Bike Commuting to the Office: Here's What I LearnedOne full week of bike commuting 24 km round-trip — from saddle position and helmets to flying bananas and cargo straps.↗Vibe Coding a Slideshow Gallery for My Village's Traditional CeremonyThis year I joined the public relations committee for the Caru Nawa Gempang ceremony at Desa Adat Celuk, and one of my tasks was building a photo slideshow for a projector. Here's how it went.↗Serang Orangnya, Bukan Argumennya: Pelajaran Logika dari Kasus Pesta BabiKetika kritik terhadap film Pesta Babi dijawab dengan pertanyaan soal sumber dana, kita sedang melihat contoh ad hominem: menyerang orangnya, bukan isi argumennya.↗How to Build Offline-First CMS Content with TanStack Query, AsyncStorage, and Contentful Sync APIA practical offline-first pattern for React Native and Expo apps using Contentful, TanStack Query, AsyncStorage, and the Contentful Sync API.↗Maestro E2E Testing on a React Native Debug BuildMost Maestro guides assume you're testing against a release build. But during active development, you naturally want to test against the debug build that's already running. Here's how to handle the Metro bundler dev menu overlay that can break your tests.↗Bioskop di Tengah Jalan Berlubang: Sebuah Catatan tentang PrioritasKetika Rp 15,3 miliar dianggarkan untuk membangun bioskop di Gianyar, sementara jalan berlubang masih menjadi cerita sehari-hari warga — apakah ini langkah yang paling mendesak?↗What Nobody Tells You About the First Two Years of ParenthoodThe first two years of having a child are far harder than people let on. About presence, support systems, and the importance of honesty before making the decision.↗The Stress Loop: A Simple Framework for Getting Through Hard DaysNot toxic positivity. Not self-blame. Just a simple loop — Name It, Write It, Act on It, Evaluate It — to move through the noise on hard days.↗Stress Doesn’t Pay Your BillsStress is a mental state, not a strategy. Whether you’re stressed or not, the problem stays the same size — what matters is the action you take. And stress will impair exactly that.↗Growing with AI — you don't need an elaborate setupGrowing with AI isn't about having the perfect setup or a complex configuration — it's about the habits that form through real, everyday use.↗Working Hard — But for Who?There's a lot of debate about work ethic — is it even worth working hard at your job? The answer depends on one thing: who you're actually working hard for.↗How to Sharpen the Skills That Matter Most in the AI EraProblem decomposition, precise technical communication, understanding core concepts, and a code review mindset are not just buzzwords. These are concrete skills that can be practiced — here's how.↗Programmers in the AI Era: Architects, Not Just Code WritersAI is changing how programmers work. But the core of our job has never been about syntax — it's always been about understanding problems. These are the skills that are becoming even more important.↗The Logic Behind Prayer: Reflections on the Concept of Jalur LangitReflections on Jalur Langit: prayer as a coping mechanism, survivorship bias, and tawakal (surrender to God) where it intersects with Stoicism.↗
2025
51 entriesForge Your Plan: How AI Helps Us See the Path More ClearlyPlanning is everything. With AI, forge continuously like a sword, and the path will become clear. Discover how AI acts as a modern blacksmith to sharpen your plans and reveal your direction.↗AI Thinks Confidently, You Should Think CriticallyAI always sounds confident, but that doesn't mean it's always right. Learn why critical thinking matters more than ever when working with AI tools.↗Slimming Like a Bonsai Tree 🌳Real growth sometimes means cutting back. A bonsai teaches us how careful pruning creates balance and beauty and how the same principle applies to work and life.↗Testing Priorities in the AI Era: Smoke Tests and Documentation FirstMy take on modern testing priorities: start with smoke tests and documentation, then layer in e2e, component, and unit tests. A practical approach for AI-powered development.↗Lessons from Cycling 🚴♂️Getting back on a bike after years away taught me about the process, being present, and finding simple joy in everyday life.↗Fixing the 'Ghost Changes' Bug in Bulk Edit TablesDeep dive into debugging a tricky state management issue where the system detected changes that didn't actually exist, and how comparing with original values solved the problem.↗Life Is About Being BusySometimes the best way to find meaning isn't through perfect planning, but through simple motion, staying alive through doing, through being part of life's rhythm.↗The Trap of Instant ExpectationsHow the demand for instant results fuels self-doubt and how patient, consistent effort builds lasting growth.↗GitHub Copilot + VS Code + Marp = Slide Presentations in MinutesLearn how to create slide presentations quickly using GitHub Copilot, VS Code, and Marp. This guide walks you through setting up the tools and leveraging AI to generate content, allowing you to focus on delivering ideas without the hassle of traditional slide design.↗The Paradox of Choice: When Too Many Options is as Bad as Having No ChoiceExploring the psychological impact of having too many options (choice overload) versus having no choice at all, and how to find the optimal balance for mental well-being.↗Work-Life Balance vs Work-Life Integrity: Understanding Two Modern Approaches to LifeIn the modern workplace, the concepts of work-life balance and work-life integrity are often debated. This article explores the differences between these two approaches and how each can be applied in everyday life.↗🐞 Quiz: Spot the Bug – URL Language DetectionA quiz-style article exploring a common bug in URL-based language detection and how to fix it.↗When You're Stuck Waiting for Help, Try Cleaning Up Your Code — You Never Know…Refactoring your code when you're stuck might just be the key to finding the bug and unblocking yourself.↗Why Manual Test Cases Still Matter: When Code Can't Speak, Scenarios Must Do the TalkingWhy manual test cases still matter even when automated testing is the norm — with practical guidance for development teams.↗I Want to Carry My Child — Not Because I Have To, But Because I Choose ToThe language we use shapes how we see the world. Carrying your child isn't a burden — it's a meaningful choice.↗My Experience Using KasPOS & the Blueprint ECO58D Printer for Receipt Printing in a Small BusinessMy hands-on experience using the KasPOS cashier app for a small business paired with the Blueprint ECO58D thermal printer — simple, no subscription, and prints receipts without a fuss.↗Conditional Rendering: Keep It Inside the ComponentBest practice for placing conditional rendering logic within React components using context or internal state.↗6 Logical Fallacies Common in the IT World (and How to Avoid Them)Logical fallacies like appeal to authority and false dilemma can lead to incorrect IT decisions. Learn examples & how to avoid them in this article.↗One Branch per-ticket Best PracticeWhy one Git branch per Jira ticket is a best practice, and how to work efficiently when tickets depend on each other.↗vscodeCusotmTheme: A Fresh, Rounded Feel for Visual Studio CodeTransform your Visual Studio Code with a fresh, rounded UI using vscodeCusotmTheme by mahmoud-asdf. A simple yet effective customization package that makes coding feel modern and clean.↗The Stoic ProgrammerHow Stoic philosophy can help you stay calm and effective in the ever-changing world of software development.↗Socratic QuestioningSocratic questioning is a powerful way to dig deeper, think clearer, and uncover assumptions. Learn how to apply this ancient method in modern life.↗Improve Your Code Quality with CodeMetrics in VS CodeMeasure code complexity in real-time using CodeMetrics, a lightweight VS Code extension that helps you write cleaner, more maintainable code.↗Growth Mindset for Programmers: How to Keep Growing — and the Pitfalls to Watch Out ForA straightforward look at what growth mindset really means, how it applies to life as a programmer, and some potential downsides you should be aware of.↗Build a State Machine with XState and Use It Across React Components (TypeScript)Learn how to build a state machine with XState and use it across React components in TypeScript.↗Managing ClassName with clsx in ReactLearn how to use clsx to manage className dynamically in React more cleanly and efficiently.↗EU Cyber Resilience Act (CRA): Enhancing Cybersecurity of Digital ProductsThe EU Cyber Resilience Act (CRA) aims to improve the cybersecurity of digital products by establishing a common framework for security requirements, incident reporting, and certification. Learn about the key provisions, what it means for businesses, and how the CRA fits into the EU's broader cybersecurity strategy.↗A Comprehensive Comparison of Zod's safeParse and parse MethodsUnderstanding the differences between Zod's safeParse and parse is essential for effective data validation in TypeScript. This article explores their distinct behaviors, use cases, and when to choose one over the other to ensure robust and predictable error handling in your applications.↗Use <button>, Not <div>, for Clickable ElementsUsing <button> instead of <div> for interactive elements improves accessibility, keyboard navigation, and screen reader support. Buttons are naturally focusable, respond to Enter and Space, and require far less extra code. Avoid unnecessary complexity — use the right semantic element for better usability and compliance with web accessibility standards.↗Simulating Time in Cypress with cy.clock and cy.tickWhen writing Cypress tests, there are scenarios where you need to manipulate time. For example, testing session expiration or scheduled UI updates requires control over time progression. This is where `cy.clock()` and `cy.tick()` come in handy.↗Capturing and Storing Request Headers in a Chrome ExtensionLearn how to capture and store request headers in a Chrome extension using webRequest API.↗Spot the Bug: Fixing Incorrect Max Value in JavaScriptA deep dive into a common JavaScript bug when finding the maximum value in an array and how to fix it.↗Checking if a Point is Inside a Polygon with Turf.jsNeed to determine if a point is inside a polygon in JavaScript? The turf.booleanPointInPolygon function makes it easy!↗React Grid Layout Widget DnD and Resizable ExampleThis post demonstrates how to build a React grid layout with draggable and resizable widget components using the react-grid-layout library. We'll put together a simple dashboard where users can rearrange widgets however they like.↗The 5-4-3-2-1 Grounding Technique: Debugging Anxiety Like a ProgrammerLearn how the 5-4-3-2-1 grounding technique can help you debug anxiety like a programmer. This mental reset uses sensory input to break the cycle of overthinking and bring focus back to the present moment.↗The Difference Between Functional Testing and Visual TestingFunctional testing checks if an app works as expected, while visual testing ensures the UI looks right. Combining both keeps the app functional and visually consistent.↗Event-Driven ProgrammingEvent-driven programming is a programming paradigm in which the flow of the program is determined by events such as user actions, sensor outputs, or messages from other programs/threads.↗The Power of Starting Small: Why POCs MatterCreating a Proof of Concept (POC) is a powerful strategy for tackling complex software challenges. By testing ideas with minimal implementation, developers can validate feasibility, uncover roadblocks early, and improve efficiency. This article explores the benefits, use cases, and steps for building effective POCs.↗Understanding ID, and UUID: What’s the Difference?Unique identifiers play a crucial role in software development. This article explores the differences between ID, and UUID, their use cases, and best practices for choosing the right identifier.↗Optimizing User Input Handling with `useDebounce` in ReactHandling user input efficiently is crucial in modern web applications. In React, rapid state updates can lead to performance issues and unnecessary API calls. The `useDebounce` hook provides a way to delay function execution until a user stops typing or interacting. In this article, we explore `useDebounce` using a simple analogy: a traffic light system. We will cover its implementation, use cases, and best practices.↗TypeScript 5.8 and the --erasableSyntaxOnly Flag: Enhancing JavaScript Compatibility and Future-Proofing CodebasesTypeScript 5.8 introduces the --erasableSyntaxOnly compiler flag, designed to enhance compatibility with JavaScript's evolving type systems. This flag restricts the use of non-erasable syntax elements, such as enums, namespaces, and parameter properties, that require runtime transformations, promoting a cleaner separation between type annotations and executable code. This article delves into the implications of this feature, its alignment with current JavaScript proposals, and its potential impact on TypeScript development practices.↗JavaScript flatMap(): Transforming and Flattening Data EfficientlyHandling structured data efficiently is a critical task in JavaScript, especially when working with nested arrays or transforming API responses. The `flatMap()` function provides an elegant solution by combining mapping and flattening into a single step. This article explores how `flatMap()` simplifies data conversion, particularly when working with nested data structures such as API responses.↗Automating Commands with VS Code TasksVS Code provides a task system that helps automate repetitive commands such as running scripts, installing dependencies, and executing tests. By using `tasks.json`, developers can define and execute common commands efficiently. This article explores the basics of configuring and running tasks in VS Code.↗Using a Combination of Data Attributes for React KeysIn React, assigning a unique `key` prop to elements in a list is crucial for performance and UI consistency. When natural unique identifiers like `id` are unavailable, developers often default to using array indices, which can lead to UI inconsistencies. A better approach is to generate a unique key by combining multiple data attributes. This article explores how to effectively use data attributes as keys in React lists.↗Understanding CSS Flexbox Height Behavior with flex-growThis article explores the complex interaction between CSS Flexbox's `flex-grow` property and explicit height settings, particularly focusing on how `height: 0px` affects element behavior within flex containers. Understanding this relationship is crucial for web developers working with responsive layouts and scrollable content areas.↗Not Just npm update, But Also npm outdated: A Comprehensive Guide with ExampleDiscover why running npm outdated is just as important as npm update for managing your Node.js project dependencies. This comprehensive guide explains how npm outdated provides critical insights into outdated packages, helping you stay secure, efficient, and up-to-date. Learn with a detailed example, practical steps, and tips for incorporating this command into your workflow.↗Understanding Partial Type in TypeScriptThis article examines the `Partial` utility type in TypeScript, focusing on its functionality, use cases, and practical applications for managing optional properties efficiently in various scenarios.↗Differences Between `null` and `undefined` in JavaScript: Explanation and Use CasesExplore the key differences between `null` and `undefined` in JavaScript, including their definitions, use cases, and best practices for when and how to use each. Gain a deeper understanding of these fundamental concepts to write cleaner, more effective code.↗Mastering requestAnimationFrame: A Guide for Smooth Animations in JavaScriptLearn how to create smooth, efficient animations in JavaScript with requestAnimationFrame. Discover its benefits, practical examples, and tips to optimize your animations for performance and a seamless user experience!↗TDD: The Key to Truly Autonomous AI Coding with Claude CodeLearn how Test-Driven Development enables Claude Code to work more autonomously, self-verify changes, and deliver working code with minimal human intervention.↗Easy Steps to Create QR Code for Reviews on Google MapsQR Code is a practical solution that can be used to directly direct users to your business's Google Maps review page. In this post, I will show you how to easily and quickly create a QR Code that you can use to increase the number of reviews on Google Maps.↗
2024
3 entriesWash My Face, Feel Fresh, Start the Work FresherWhen feeling stuck, exhausted, or overwhelmed, a simple splash of water can make all the difference. Washing my face helps me reset, refresh, and push through, even on the toughest days.↗How I Improved My Productivity and Well-Being with Time BlockingI’ve found that using time blocking has helped me manage my time and energy more effectively. It’s a simple approach that’s improved my productivity and well-being.↗How a Custom Pomodoro Fixed My 'Hard Restart' ProblemStruggled to get back into focus after breaks? I customized the Pomodoro technique to include a quick review phase, and it’s been a game-changer for my productivity. Here’s how it works!↗