Blog

Thoughts, stories, and updates.

Navigating UI Framework Transitions: From Bootstrap to Shadcn

Abstract: This post reflects on a developer’s journey through UI framework choices, transitioning from Bootstrap to a Next.js and Tailwind CSS stack, and ultimately deciding to integrate Shadcn/ui. It discusses the pros and cons of using component libraries like Shadcn, which are based on Radix UI and involve copying code,...

Navigating Client vs Server-Side Authentication in Web Development

Abstract: This post explores the differences between client-side and server-side authentication flows when using Supabase with Next.js 14 (App Router). It provides practical examples covering Google OAuth2 social login, which typically uses a client-side flow with createBrowserClient, and Magic Link email authentication, which involves a server-side flow using createServerClient. The...

Implementing Auth and Database for 8-Bit Oracle

Abstract: This post details the initial backend setup for the 8-Bit Oracle project, focusing on authentication and database integration using Next.js, Supabase (with Auth-UI for OAuth2 and Magic Links), and Tailwind CSS. It discusses the rationale behind choosing Supabase over Firebase, the decision to defer Web3Auth integration, and announces the...

Claude vs GPT4 for Coding

Abstract: This post offers a developer’s brief comparison of using Claude Opus and GPT-4 (via Cursor.sh) as AI coding assistants. It highlights experiences with both models, particularly when working with Next.js (App Router vs. Pages Router) and how they handle recent framework updates, noting differences in understanding context and relevance...

How to Create an Interactive Typing Effect in React with Skip Animation Feature

Abstract: This post shares a developer’s notes and tips for implementing a smooth, multi-paragraph typing animation effect in React, complete with a feature to skip the animation. Key aspects covered include state management using React hooks (useState, useEffect, useCallback), alternatives to direct DOM manipulation, handling user events to skip typing,...

Exploring Divination Techniques: Chainlink VRF vs. Traditional Randomness Methods

Abstract: This post analyzes the feasibility of using Chainlink VRF (Verifiable Random Function) for generating randomness in I-Ching divination. It compares this blockchain-based approach to traditional methods, server-side PRNGs/CSPRNGs, external randomness APIs, and client-side randomness. The discussion covers the pros and cons of each, focusing on user perception, cost, complexity,...

Solving Webpack Issues: Eliminating Double Script Loading and FOUC

Abstract: This post covers troubleshooting common Webpack issues encountered during frontend development. It explains how to resolve problems like double script loading, which can occur from conflicting manual script imports and Webpack configuration, and how to fix Flash of Unstyled Content (FOUC) by correctly setting production mode using cross-env and...

React's useEffect Firing Twice in Dev? The HMR Culprit and a Simple Check

Abstract: This post provides a quick developer tip for React and Next.js users: if your useEffect hook appears to run twice during development, Hot Module Reloading (HMR) in conjunction with React’s Strict Mode is likely the cause. It explains why this happens as an intentional development-only behavior to help catch...

Fortune-Telling NFTs: Weaving I-Ching Wisdom with Blockchain Technology

Abstract: This post outlines a project idea to create Fortune-Telling NFTs by blending the ancient wisdom of the I-Ching with modern blockchain technology. It explores the cultural and personal motivations behind the concept, details the envisioned interactive fortune-telling process (from user question to hexagram generation and interpretation), and touches on...

Brainstorming an AI-Powered Photo Critic Service

Abstract: This post outlines initial brainstorming for an AI-powered photo critic service. It proposes a multi-stage approach to analyze and critique uploaded photographs, starting with basic metadata extraction, followed by deeper image analysis using Convolutional Neural Networks (CNNs) for scene/object recognition, and richer understanding with CLIP for image captioning and...