A blog on JavaScript, web, and more
Featured Articles
Tags
Get in Touch
Links
YouTube
The Stoic Programmer
2025-04-10
How Stoic philosophy can help you stay calm and effective in the ever-changing world of software development.
StoicismSocratic Questioning
2025-04-03
Socratic 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 Code
2025-03-27
Measure code complexity in real-time using CodeMetrics, a lightweight VS Code extension that helps you write cleaner, more maintainable code.
Growth Mindset untuk Programmer: Cara Bertumbuh dan Sisi Negatif yang Perlu Diwaspadai
2025-03-26
Mengenal growth mindset secara sederhana, penerapannya dalam dunia kerja sebagai programmer, serta potensi sisi negatifnya yang perlu kamu tahu.
Build a State Machine with XState and Use It Across React Components (TypeScript)
2025-03-24
Learn how to build a state machine with XState and use it across React components in TypeScript.
Managing ClassName with clsx in React
2025-03-21
Learn how to use clsx to manage className dynamically in React more cleanly and efficiently.
The EU Cyber Resilience Act (CRA): Enhancing Cybersecurity of Digital Products
2025-03-20
The EU Cyber Resilience Act (CRA) aims to enhance the cybersecurity of digital products by establishing a common framework for security requirements, incident reporting, and certification. Learn about the key provisions, implications for businesses, and how the CRA aligns with the EU's broader cybersecurity strategy.
A Comprehensive Comparison of Zod's safeParse and parse Methods
2025-03-19
Understanding 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 Elements
2025-03-14
Using <button> instead of <div> for interactive elements improves accessibility, keyboard navigation, and screen reader support. Buttons are natively focusable, respond to Enter and Space, and require 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.tick
2025-03-01
When 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.
Pintar Kredit: Smart Loan Simulation
2025-02-28
Pintar Kredit is a web-based application that helps users simulate loans, analyze eligibility, and receive AI-powered financial advice before applying for credit. Built with React, Vite, and OpenAI, it ensures informed decision-making without storing user data.
Capturing and Storing Request Headers in a Chrome Extension
2025-02-25
Learn how to capture and store request headers in a Chrome extension using webRequest API.
Spot the Bug: Fixing Incorrect Max Value in JavaScript
2025-02-23
A 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.js
2025-02-21
Need 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 Example
2025-02-17
This post demonstrates how to create a React grid layout widget with draggable and resizable components using the react-grid-layout library. We will build a simple dashboard with draggable and resizable widgets that can be rearranged by the user.
The 5-4-3-2-1 Grounding Technique: Debugging Anxiety Like a Programmer
2025-02-16
Learn 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 Testing
2025-02-13
Functional 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 Programming
2025-02-11
Event-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 Matter
2025-02-08
Creating 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?
2025-02-07
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 React
2025-02-05
Handling 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 Codebases
2025-02-03
TypeScript 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 Efficiently
2025-02-01
Handling 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 Tasks
2025-02-01
VS 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 Keys
2025-01-30
In 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-grow
2025-01-29
This 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 Example
2025-01-28
Discover 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 TypeScript
2025-01-26
This 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 Cases
2025-01-23
Explore 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 JavaScript
2025-01-17
Learn 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!
Easy Steps to Create QR Code for Reviews on Google Maps
2025-01-02
QR 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.
Wash My Face, Feel Fresh, Start the Work Fresher
2024-12-31
When 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 Blocking
2024-12-28
I’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' Problem
2024-12-27
Struggled 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!