NextJS
Deep dive into Next.js framework development, covering App Router patterns, server components, static site generation, API routes, performance optimization, deployment strategies, and building modern React applications.
Building a Pixel Art Converter: From DOOM to Modern Portraits
The project began as a simple DOOM-inspired image converter, evolving into a comprehensive pixel art transformation tool. Initially inspired by DOOM's iconic color palette, the tool recreates the retro look using a 32-color palette with Euclidean distance color matching. As it developed, the tool expanded beyond DOOM aesthetics to include a Portrait palette optimized for human faces, making it suitable for profile pictures and avatars. Key features of the tool include seven color palettes: DOOM, Portrait, Skin Tones, Game Boy, PICO-8, Commodore 64, and Grayscale. It also offers Floyd-Steinberg dithering for smooth gradients, adjustable pixel scaling for a retro look, and PNG export with timestamped filenames. Built with Next.js and the Canvas API, the tool processes images through background removal, pixelation, and color reduction or palette mapping. AI-assisted development played a significant role in the project's rapid iteration and refinement, showcasing how modern tools can accelerate prototyping. The result is a practical tool that blends retro gaming aesthetics with modern web development, available for use at /image-converter.
Building a GDPR-Compliant Cookie Consent System with Sanity CMS
The author decided to build a custom cookie consent solution for their blog to avoid the complexities and privacy issues of third-party libraries. Their solution is fully GDPR-compliant, privacy-first, and integrates with Sanity CMS. The custom implementation includes three main components: a Sanity CMS schema for managing consent content, a React Context for state management, and conditional loading of analytics based on user consent. The system emphasizes accessibility, server-side data fetching, and smart reload logic to ensure a seamless user experience. The cookie banner is designed to be editor-friendly, allowing non-technical users to update content without code changes. The result is a lightweight, under 5KB, GDPR-compliant system that respects user privacy by default, loads no third-party tracking libraries, and provides full transparency with a detailed policy page. Users can withdraw consent at any time, and the system is fully accessible, making it an ideal solution for personal blogs or small sites.
Adding an RSS Feed to My Next.js Blog
The blog has introduced a comprehensive RSS feed using Next.js App Router and Sanity's content API, offering a standards-compliant RSS 2.0 feed with enhanced features. The feed includes full post metadata, author attribution, category tags, image and audio enclosures, and auto-generated summaries. It is generated server-side via a Next.js API route and queries published posts from Sanity, ensuring consistency with the site. Key technical aspects include XML escaping, aggressive caching, RSS 2.0 compliance with extended namespaces, auto-discovery via HTML metadata, and error handling. RSS remains relevant due to reader control, privacy, platform independence, and lack of algorithmic filtering. Readers can subscribe using any RSS reader by visiting the provided URL, receiving updates with text and audio narration for each article. This feature enhances accessibility and respects reader privacy.