AI-powered development: Chrome extension and n8n automation with Claude Code
A Chrome extension + n8n automation pipeline built with Claude Code in 30 minutes to automate my AI tech watch sharing.
56kode - AI & Frontend Development Blog
56kode is a developer blog exploring AI agents, LLMs, and AI-assisted development, built on 15+ years of frontend expertise with React and TypeScript.
Latest posts
Why we’re moving from Cursor to Claude Code (and why you should too)
Discover why I switched from Cursor to Claude Code. A Lead Frontend Developer’s honest feedback on the limitations of AI IDEs and the power of CLI coding agents in 2026.
Efficiently cleaning a TypeScript project: Knip + AI agent workflow
Learn how to safely clean dead code in TypeScript projects using Knip and an AI Agent. A step-by-step workflow to automate cleanup without breaking production
How Gemini 3 Pro cut our pipeline time in half
We cut our test pipeline time from 22s to 4s per file using Gemini 3 Pro. Learn how AI identified "God Modules" killing our Vitest performance and automated the architectural refactoring that saved us 15 minutes per CI run.
Connect Cursor to Your Browser with Browser-Tools MCP
Learn how to integrate Browser-Tools MCP with Cursor IDE to debug web applications directly from your code editor using AI assistance
Automated Astro dependencies update with Cursor and Claude
Complete migration from Astro 4 to Astro 5 with Content Layer automated by Claude 4 Sonnet. Detailed experience report on breaking changes, new rendering API, and migration of all dependencies like React 19.
Integrating Jira into Cursor with the Model Context Protocol
Step-by-step guide to connect Jira to Cursor through the Model Context Protocol and streamline your workflow
Level Up React: Mastering Context API
Explore the internal mechanisms of React's Context API, and how to use it effectively for global state management. Comparison with Zustand and Redux, advanced optimization techniques, and best practices to avoid unnecessary re-renders.
Level Up React: Mastering useReducer for structured state management
Complete guide to React's useReducer hook - from basic concepts to advanced implementation. Learn how to structure complex state logic, manage interdependent state, and create maintainable React applications with practical e-commerce cart examples, TypeScript integration, and testing strategies.
Level Up React: Mastering useEffect for performant React applications
Learn how to master React's useEffect hook with practical examples. Discover internal mechanisms, avoid common pitfalls, and build performant applications with proper synchronization techniques.
Level Up React: Deep dive into state and useState
Complete guide to React's useState hook - from basics to advanced techniques. Learn state management, avoid common pitfalls, and optimize performance with practical examples for React developers.
Level Up React: Functional programming in React
Learn how functional programming principles power React development. This practical guide explores first-class functions, pure functions, immutability, currying and composition with clear examples. Discover how these concepts lead to more predictable, testable and maintainable React applications.
Level up React: React and React DOM architecture
Discover why React is split into two packages. Learn how react and react-dom work together, their specific roles, and the benefits of this architecture. A clear explanation with practical examples.
Level Up React : Deep Dive into React Elements
Learn how React Elements work under the hood. Understand their structure, creation process, and the reconciliation mechanism. A comprehensive guide for React developers
Level Up React : Declarative vs Imperative Programming
Discover how declarative programming transforms React development. Learn the key differences between imperative and declarative approaches through practical examples and understand why React embraces declarative programming for state, effects, lists, and conditional rendering.
Migration from Jest to Vitest: Complete feedback on a React/TypeScript project
Complete step-by-step guide to migrate from Jest to Vitest in a React/TypeScript project. Includes ESM handling, performance optimization, and real-world solutions from a 2900+ tests migration.
Why aiming for 100% coverage can be a mistake
Discover why aiming for 100% test coverage in software development can be counterproductive. Learn practical strategies to focus on core functionality, avoid unnecessary tests, and improve code quality without wasting resources.
Text Truncation with Ellipsis on Multiple Lines
Learn effective CSS techniques for text truncation with ellipsis, covering both single-line and multi-line methods. This guide explains how to implement classic text overflow, use WebKit's line-clamp for multiple lines, and create fallback solutions for cross-browser compatibility. Ideal for web developers aiming to improve content display and user experience in limited spaces.
Responsive Images: a quick example with react
Optimizing web performance is a priority for any developer. One key aspect to consider is how images are handled across different devices. In this article, we will explore how to create responsive images with React. The goal is to display different images based on the screen size.
AI-powered development: Chrome extension with Gemini
Ever wondered if AI could replace developers? I put Gemini to the test by asking it to create a simple Chrome extension. What seemed like a straightforward task turned into a curious journey with unexpected twists. Did the AI succeed, or did it fall short? Dive into this article to find out how well Gemini handled the challenge of coding in the real world.
Cross-Origin Resource Sharing (CORS): A Comprehensive Guide
Detailed explanation of the CORS (Cross-Origin Resource Sharing) security mechanism. Covers the definition, importance, functionality, and common CORS errors with their solutions. Includes code examples for both server-side and client implementation. Comprehensive guide for developers dealing with cross-origin requests and associated security issues.
AI-powered development: Chrome extension with ChatGPT
Ever wondered if AI could replace developers? I put ChatGPT to the test by asking it to create a simple Chrome extension. What seemed like a straightforward task turned into a curious journey with unexpected twists. Did the AI succeed, or did it fall short? Dive into this article to find out how well ChatGPT handled the challenge of coding in the real world.
Example of Using useSyncExternalStore with LocalStorage
Learn how to efficiently synchronize application state with external data sources like LocalStorage using React's useSyncExternalStore hook, with a practical example and detailed explanation.