DEV Community: Putu Adi

[Boost]

Putu Adi — Thu, 18 Jun 2026 06:51:24 +0000

Putu Adi

Jun 18

Vibe Coding 101: Notes from a Developer Who Got Tired of Writing Code by Hand

#ai #webdev #programming #productivity

12 min read

Vibe Coding 101: Notes from a Developer Who Got Tired of Writing Code by Hand

Putu Adi — Thu, 18 Jun 2026 05:44:35 +0000

My personal notes and a guide for anyone who wants to start vibe coding properly not just typing prompts and hoping the AI figures it out.

What is Vibe Coding?
1. Choose Your Editor / Environment
- GUI Editors (IDE-based)
- CLI Agents (Terminal-based)
2. Pick the Right Model
- Model Comparison
- How to Choose Practically
3. Give the AI "Knowledge" Use a Skills Library
- Skills Libraries I Use
- How Skills Work
4. Set Up Starter Documentation
- CLAUDE.md vs GEMINI.md vs AGENTS.md Which One?
- Side-by-Side Comparison
- Multi-Tool Strategy: One File for All
- My Project Structure
- What Goes Inside the Config File?
- Scenario 1: Starting from Scratch
- Scenario 2: Existing Codebase
My Daily Vibe Coding Workflow
Pre-flight Checklist
Closing Thoughts

What is Vibe Coding?

The term vibe coding was coined by Andrej Karpathy in early 2025. The idea is simple: you describe your intent and the outcome you want not a detailed technical spec and the AI writes the code.

What changed in 2026: this is no longer an experiment. Vibe coding has become a recognized development methodology, and the tooling is mature enough to use on real production projects.

But there's one thing that frustrates most beginners: AI works from context. Give it the wrong context and the output will miss or worse, look correct but actually be wrong.

This guide is about how to properly "brief" your AI before you start building together.

1. Choose Your Editor / Environment

First question: do you want a GUI editor or a CLI agent?

GUI Editors (IDE-based)

Best if you prefer visual feedback, editing directly in the editor, and strong codebase awareness.

Editor	Character	Best For
Cursor	AI-native, built on VS Code. Best for single-session work and codebase context.	Developers who want a fast, familiar AI copilot
Windsurf (now Devin Desktop)	Agentic, proactive the AI acts without being asked. Cascade agent for multi-file edits.	Teams that want AI to take initiative
Antigravity	Multi-agent: run up to 5 agents in parallel inside one editor. Early-adopter energy.	Parallel task experiments, power users
VS Code + Copilot	Familiar, massive ecosystem, but the AI feels "bolted on".	Developers who don't want to switch editors

Note (June 18, 2026): Windsurf officially rebranded to Devin Desktop under Cognition on June 2, 2026. Cursor remains the most stable choice for teams; Antigravity is the most interesting for multi-agent workflows.

CLI Agents (Terminal-based)

Best if you prefer the terminal, want full control, or need tight git workflow integration.

Agent	Default Model	Character
Claude Code	Claude Opus/Sonnet	Terminal-first, agentic, supports subagents. Bundled with Claude Pro ($17/mo).
Gemini CLI	Gemini 3.1	Free to start, Google integration. Great if you're already in the Google ecosystem.
OpenAI Codex CLI	GPT-5.x	Latest from OpenAI, paired with the ChatGPT app. Windows desktop client available May 2026.

Personal tip: If you use Claude Code, just run claude in your project root. The difference is immediately noticeable the agent reads context from your entire codebase, not just the active file.

2. Pick the Right Model

As of this writing (June 18, 2026), here's the most relevant model landscape for vibe coding:

Model Comparison

All SWE-bench Verified scores below are self-reported by each vendor. Note that SWE-bench Verified is known to contain training data contamination; for a more rigorous comparison use SWE-bench Pro from Scale AI.

Model	Coding Score (SWE-bench Verified)	Price (per 1M tokens)	Best For
Claude Opus 4.8	88.6% ¹	$5 / $25 ²	Primary coding agent, long-running tasks, large codebases
Claude Sonnet 4.6	~85%	$3 / $15 ³	Best daily driver. 98% of Opus quality at 60% less cost
GPT-5.4	74.9% ⁴	$2.50 / $15	All-rounder, largest ecosystem
Gemini 3.1 Pro	80.6% ⁵	$2 / $12 ⁶	Long context (1M tokens) ⁷, data-heavy apps
DeepSeek V4	Competitive	$0.14 / $0.28 ⁸	Budget option, self-hostable
Claude Haiku 4.5	~70%	$1 / $5 ³	Quick edits, subagent tasks, high-volume work

Source Notes — Model Table

¹ Claude Opus 4.8 — 88.6% SWE-bench Verified: Vendor-reported score from Anthropic. Confirmed by llm-stats.com leaderboard (updated June 2026) and Vellum blog "Claude Opus 4.8 Benchmarks Explained." Sources: llm-stats.com/benchmarks/swe-bench-verified · vellum.ai/blog/claude-opus-4-8-benchmarks-explained

² Claude Opus 4.8 price — $5/$25 per 1M tokens: Cited from Anthropic and confirmed by multiple sources including Vellum and magicshot.ai. Price unchanged from Opus 4.7. Sources: anthropic.com · magicshot.ai/news/claude-opus-4-8-release-features-benchmarks

³ Claude Sonnet 4.6 and Haiku 4.5 pricing: Based on Anthropic's official pricing page. Current verification recommended at anthropic.com/pricing.

⁴ GPT-5.4 (GPT-5) — 74.9% SWE-bench Verified: This figure was originally reported for GPT-5 (base) at launch in August 2025, not GPT-5.4 specifically. Per OpenAI's developer blog: "GPT‑5 scores 74.9% on SWE-bench Verified." Sources: openai.com/index/introducing-gpt-5-for-developers · runbear.io/posts/gpt-5-explained

⁵ Gemini 3.1 Pro — 80.6% SWE-bench Verified: Vendor-reported score from Google, reported at launch on February 19, 2026. Source: nxcode.io/resources/news/gemini-3-1-pro-complete-guide

⁶ Gemini 3.1 Pro price — $2/$12 per 1M tokens: Official Google pricing, confirmed by OpenRouter, artificialanalysis.ai, and several independent price trackers. Sources: openrouter.ai/google/gemini-3.1-pro-preview · artificialanalysis.ai

⁷ Gemini 3.1 Pro — 1 million token context window: Confirmed in official Google documentation and OpenRouter. Source: openrouter.ai/google/gemini-3.1-pro-preview

⁸ DeepSeek V4 — $0.14/$0.28 per 1M tokens: Pricing for the V4-Flash variant (non-thinking, cache miss). DeepSeek V4 Pro has different pricing ($1.74/$3.48 list price, or $0.435/$0.87 after promotional discount). Sources: techjacksolutions.com/ai-tools/deepseek/deepseek-pricing · costgoat.com/pricing/deepseek-api

How to Choose Practically

New project, small-to-medium codebase?
→ Claude Sonnet 4.6 (best price-to-performance sweet spot)

Large codebase, complex agentic tasks?
→ Claude Opus 4.8

Already in the OpenAI ecosystem / using Cursor?
→ GPT-5.4

Lots of data, very long context needed?
→ Gemini 3.1 Pro

Tight budget, repetitive tasks?
→ DeepSeek V4 or Haiku 4.5

Pro tip: Don't default to the most powerful model for everything. Routing tasks to the right model tier can cut your AI bill by 2–5x without any quality loss. Quick edits and simple tasks? Haiku is more than enough.

3. Give the AI "Knowledge" Use a Skills Library

This is the part most people skip.

AI coding agents work entirely from context. Every session starts fresh there's no memory from the previous one. A skills library is how you give the agent reactivatable knowledge whenever it needs it.

Think of it this way: if the AI is a new developer joining your team, Skills are the onboarding docs they read before their first day.

Skills Libraries I Use

1. Superpowers (skills.sh/obra/superpowers)

This one is a game-changer. Superpowers isn't just a collection of skills it's a software development methodology that runs on top of your agent.

The workflow Superpowers enforces:

Brainstorm → Design → Plan → Implement (TDD) → Review → Merge

Why does this matter? Without this structure, the AI will start writing code before you've even agreed on what you're building. Superpowers forces the agent to ask first, code second.

Install in Claude Code:

/plugin install superpowers@claude-plugins-official

Key features:

Hard gate before coding: The agent won't write a single line until you've approved the design
TDD enforcement: Always write a failing test first, then implement
Subagent-driven: Dispatches parallel subagents for execution with a two-stage review
Git worktree workflow: Every task runs on its own branch no clobbering each other

Repo: github.com/obra/superpowers — 232K+ GitHub stars as of June 2026 ⁹

Source Notes — Superpowers

⁹ Superpowers — GitHub star count: The original article cited "190K+". More recent data from multiple sources shows a higher figure: claudepluginhub.com recorded 230,789 stars (last updated Jun 17, 2026), while the GitHub repository directly shows 232K stars. The number changes over time; the original article likely used a snapshot from an earlier writing date. Sources: claudepluginhub.com/plugins/obra-superpowers-2 · github.com/obra/superpowers

2. Anthropic Official Skills (skills.sh/anthropics/skills)

The official Anthropic skill library for Claude Code. Includes:

frontend-design design system, tokens, typography
docx, pdf, pptx create and edit documents
file-reading, pdf-reading read various file formats

3. Figma / Design Skills

If you work from Figma designs to code, these skills give Claude context about your design tokens, component names, and naming conventions from your Figma project.

How Skills Work

Skills are structured .md files containing explicit instructions. The agent reads them when needed and follows them as a process not just a prompt, but an activatable workflow.

Without skills, this is what typically happens:

You:   "Build a login feature"
Agent: [Immediately writes 300 lines of code]
       → Auth stack turns out to be wrong
       → Pattern doesn't match the codebase
       → 2 hours of revision wasted

With skills loaded, the same request looks like this:

You:   "Build a login feature"
Agent: "Before we start, I have a few things to clarify:
        1. Are users logging in with email/password or OAuth?
        2. Is there an existing auth setup I should extend?
        3. Should this redirect somewhere specific after login?"
       [Presents design options]
       "Please review this before I begin implementation."

4. Set Up Starter Documentation

Before starting a vibe coding session, the single most impactful thing you can do is create initial project documentation the agent can read at the start of every session.

Every AI coding tool has its own "magic file" that's loaded automatically when a new agent session begins this is how you provide context without re-typing it every time.

CLAUDE.md vs GEMINI.md vs AGENTS.md Which One?

This is the most common question, especially if you use more than one tool. Every tool has a different filename, but the purpose is identical: give the agent context before it starts working.

Side-by-Side Comparison

	CLAUDE.md	GEMINI.md	AGENTS.md	.cursorrules
Read by	Claude Code	Gemini CLI	Codex CLI, Cursor, Gemini CLI, Windsurf, Copilot, 60K+ tools	Cursor (legacy)
File location	Project root or `.claude/`	Project root or `~/.gemini/`	Project root, subdirectories, `~/.codex/`	Project root
Hierarchy	Nested folder support	Reads up & down the folder tree	Walks from root to working dir	Single file
Open standard?	Anthropic-only	Google-only	✅ Yes — Linux Foundation (AAIF)	Cursor-only
Claude Code reads it?	✅ Native	❌ No	Via symlink / `@AGENTS.md` import	❌ No
Exclusive features	Hooks, tool permissions, Skills integration	Plan Mode, Google Search grounding	AGENTS.override.md for local overrides	Glob-based rule scoping
Best for	Teams fully on Claude Code	Teams using Gemini CLI	Multi-tool / mixed teams	Solo Cursor users

Multi-Tool Strategy: One File for All

If you or your team uses more than one tool (e.g. Claude Code for heavy lifting, Gemini CLI for quick exploration), there are two popular approaches.

Option A: AGENTS.md as source of truth + symlinks

Write one file, symlink the rest. Update one file and all tools stay in sync no drift.

touch AGENTS.md

ln -s AGENTS.md CLAUDE.md
ln -s AGENTS.md GEMINI.md

Claude Code does not read AGENTS.md natively, so the symlink is necessary or you can manually import it inside CLAUDE.md using the @AGENTS.md syntax.

Option B: AGENTS.md for universal rules + per-tool files for specific behavior

project/
├── AGENTS.md     # Universal: tech stack, conventions, rules
├── CLAUDE.md     # Claude-specific: hooks, tool permissions, skills
└── GEMINI.md     # Gemini-specific: scope control instructions

This works well when you need different instructions per tool. Gemini, for instance, tends to modify files outside the task's scope unless explicitly told not to Claude doesn't have that habit.

My Project Structure

project/
├── AGENTS.md                # Source of truth read by all tools
├── CLAUDE.md -> AGENTS.md   # Symlink to AGENTS.md
├── GEMINI.md                # Gemini-specific tweaks
├── .claude/
│   └── settings.json        # Claude Code config (permissions, model)
├── .codex/
│   └── config.toml          # Codex CLI config
└── docs/
    ├── architecture.md
    ├── business-logic.md
    └── tech-stack.md

What Goes Inside the Config File?

This template works for AGENTS.md, CLAUDE.md, or GEMINI.md same structure, different filename.

A good config file is 50–200 lines. Beyond that, models start ignoring parts they deem irrelevant. Only write what the AI can't infer from the code itself.

# Project: [Project Name]

## Context
[One paragraph: what this app does, who it's for, what problem it solves]

## Tech Stack
- Framework: Next.js 15 (App Router)
- Database: PostgreSQL + Prisma
- Auth: Clerk
- Styling: Tailwind CSS v4

## Folder Structure
- Components: `/components`
- Hooks: `/hooks`
- API routes: `/app/api`
- Types: `/types`

## Coding Rules
- Always use TypeScript strict mode
- Never use `any` use proper types
- Naming: camelCase for functions, PascalCase for components

## Critical Business Rules
- [Rules the AI must never violate]
- [Example: prices are always in the smallest unit (cents), never decimals]

## Do NOT Do
- Don't change the database schema without discussing first
- Don't install new libraries without confirmation
- Don't modify files outside the scope of the requested task

## Key Commands
- Dev: `npm run dev`
- Test: `npm run test`
- Build: `npm run build`
- Lint: `npm run lint`

For Gemini CLI, add this section to GEMINI.md to prevent scope expansion:

## Gemini-Specific Instructions
- Do not modify files unrelated to the current task
- Always confirm before creating new files outside the existing structure
- If unsure about scope, ask never assume

Scenario 1: Starting from Scratch ✨

This is the ideal situation. You can set everything up correctly from the beginning.

Generate initial config file ask Claude to help create one based on your project brief
Install Superpowers before writing the first line of code
Define your folder structure so the AI knows where things belong
Run a brainstorming session with the agent before starting any feature

"I want to start a new project: [description].
Please help me create a comprehensive AGENTS.md
and suggest an appropriate folder structure."

Starting fresh means you establish conventions from day one. The AI follows the patterns you set, rather than guessing from existing code.

Scenario 2: Existing Codebase 🏗️

This is more challenging. Before vibe coding in an existing codebase, two things need to be understood first.

a. Understand the existing structure

Before giving the AI access, be able to answer: what is the folder structure and why? How does a request flow from entry to response? What libraries or patterns are already locked in? Which parts are fragile?

A quick shortcut ask Claude to reverse-engineer the documentation:

"Read through this entire codebase and create:
1. An architecture summary in markdown
2. A list of business rules you can infer from the code
3. Potential gotchas I should know before making modifications"

b. Document the business flows already running

This is the most commonly skipped step. Asking the AI to modify an existing feature without business context is how things break in production. Before touching anything, write down the happy path, existing edge cases, and inter-feature dependencies.

# Business Flow: Checkout Process

## Happy Path
1. User adds item to cart
2. User clicks checkout → validate stock (realtime from inventory service)
3. Select payment → payment gateway
4. Success → send confirmation email + update stock
5. Webhook updates order status

## Existing Edge Cases
- Out of stock at step 3: rollback cart, notify user
- Webhook timeout: retry 3x with exponential backoff
- Duplicate order: idempotency key in payment service

## DO NOT change without discussion:
- Payment flow (compliance issue)
- Stock calculation logic (finance depends on this)

My Daily Vibe Coding Workflow

1. Open Claude Code at project root
   ↓
2. Agent reads AGENTS.md/CLAUDE.md automatically (context loaded)
   ↓
3. Describe intent: "I want to add feature X for Y"
   ↓
4. Superpowers activates → Brainstorming session
   (Agent asks for clarification, proposes approach)
   ↓
5. Approve design → Agent creates implementation plan
   ↓
6. Execute: Agent creates worktree, writes failing tests first
   ↓
7. Implement → Review → Merge
   ↓
8. Commit with a descriptive message

Pre-flight Checklist

[ ] Config file exists (AGENTS.md / CLAUDE.md / GEMINI.md) with tech stack + business rules
[ ] If using multiple tools: symlinks are in place, no files have drifted
[ ] Superpowers is installed on the agent
[ ] You can explain the main business flow to the AI (not just "build feature X")
[ ] There's a clear definition of done for the task at hand
[ ] For existing projects: basic architecture documentation exists

Closing Thoughts

Effective vibe coding isn't about writing "magic" prompts. It's about building a system where the AI always has enough context to work correctly.

Skills library = reactivatable knowledge. Starter docs = persistent memory. Clear workflow = guardrails so the AI doesn't jump straight to implementation before the problem is understood.

With the right setup, one developer doing vibe coding can ship faster than a team of three using AI ad-hoc.

Quantitative Data Source Summary

Claim	Value	Source
Claude Opus 4.8 SWE-bench Verified	88.6%	Anthropic (vendor-reported); llm-stats.com; Vellum blog
Claude Opus 4.8 price	$5/$25 per 1M tokens	Anthropic; magicshot.ai
GPT-5 (5.4) SWE-bench Verified	74.9%	OpenAI developer blog (this figure is for GPT-5 base, not 5.4 specifically)
Gemini 3.1 Pro SWE-bench Verified	80.6%	Google (vendor-reported); nxcode.io
Gemini 3.1 Pro price	$2/$12 per 1M tokens	OpenRouter; artificialanalysis.ai
Gemini 3.1 Pro context window	1M tokens	Google; OpenRouter
DeepSeek V4-Flash price	$0.14/$0.28 per 1M tokens	DeepSeek API docs; techjacksolutions.com
Superpowers GitHub stars	232K+ (as of June 2026)	GitHub; claudepluginhub.com

General note: All SWE-bench Verified scores are self-reported by vendors and carry a risk of training data contamination. For a more rigorous evaluation, see SWE-bench Pro from Scale AI (morphllm.com/swe-bench-pro). API pricing is subject to change; always verify on each provider's official pricing page.

Written June 18, 2026. Model references will keep changing — check skills.sh for the latest skills and each model provider's official docs for current pricing.

Website Optimization Strategy: SEO & Core Web Vitals (2026)

Putu Adi — Tue, 12 May 2026 06:08:07 +0000

Website Optimization Strategy: SEO & Core Web Vitals (2026)

A practical guide for developers who want faster, higher-ranking, and more reliable websites.

Improving website traffic isn't just about publishing more content. Your site also needs to be fast, structurally sound, and optimized for how modern search engines evaluate quality.

Modern website optimization rests on three pillars:

Technical Performance — Core Web Vitals, loading speed, rendering
SEO & Content Structure — Crawlability, metadata, structured data
User Experience (UX) — Stability, accessibility, navigation

1. Core Web Vitals

Google uses Core Web Vitals as ranking signals. As of 2026, the three active metrics are LCP, INP, and CLS. INP officially replaced FID (First Input Delay) in March 2024.

Largest Contentful Paint (LCP)

What it measures: How quickly the largest visible element renders on screen (typically a hero image or headline).

Target: ≤ 2.5 seconds

Optimization strategies:

Use modern image formats: WebP or AVIF
Add fetchpriority="high" to your hero/above-the-fold image
Use a CDN to reduce TTFB
Avoid render-blocking resources (CSS, fonts) that delay the critical path

<!-- Good: Prioritize the hero image -->
<img
  src="/hero.avif"
  fetchpriority="high"
  width="1200"
  height="700"
  alt="Hero Banner"
  decoding="async"
/>

Note: fetchpriority is now well-supported across all major browsers. Always combine it with explicit width/height to prevent layout shift.

Interaction to Next Paint (INP)

What it measures: The worst-case interaction latency across the full page session — clicks, taps, and keyboard inputs.

Target: ≤ 200ms (Good), 200–500ms (Needs improvement), > 500ms (Poor)

Why it matters more than FID: FID only measured the first interaction. INP tracks every interaction throughout the session, making it a far more accurate reflection of perceived responsiveness.

Optimization strategies:

Break up Long Tasks (> 50ms) on the main thread using scheduler.yield() (available in Chrome 115+) or setTimeout
Defer non-critical JS with dynamic imports
Use web workers for CPU-heavy logic
Avoid forced synchronous layouts (reading layout properties after DOM mutations)

// Defer non-critical module
const { renderChart } = await import('./chart.js');

// Yield to browser between tasks (modern approach)
async function processItems(items) {
  for (const item of items) {
    processItem(item);
    await scheduler.yield(); // Prevents long tasks
  }
}

// Fallback for older browsers
function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

Cumulative Layout Shift (CLS)

What it measures: Visual stability — how much content unexpectedly moves during loading.

Target: ≤ 0.1

Common causes:

Images and iframes without explicit dimensions
Dynamically injected content (ads, banners, cookie notices)
Web fonts causing FOUT (Flash of Unstyled Text)

Optimization strategies:

<!-- Always define dimensions to reserve layout space -->
<img
  src="/banner.webp"
  width="1200"
  height="600"
  alt="Banner"
  loading="lazy"
/>

<!-- Reserve space for aspect-ratio-based embeds -->
<div style="aspect-ratio: 16/9; width: 100%;">
  <iframe src="..." width="100%" height="100%"></iframe>
</div>

For ads and dynamic banners, use min-height to pre-reserve space even when content hasn't loaded.

2. Technical SEO

Semantic HTML

Search engines use HTML structure to understand page hierarchy and content relationships. Semantic tags carry meaning that <div> doesn't.

✅ Use:

<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>

❌ Avoid: Nesting everything in generic <div> containers without landmark roles.

As a rule: if you're using a <div> for layout that has a semantic equivalent, use the semantic tag.

Rendering Strategy

JavaScript-heavy SPAs are still problematic for SEO if content isn't available in the initial HTML response. Use server-side or static rendering for any content that needs to be indexed.

Strategy	Best For	SEO Impact
SSG (Static Site Generation)	Blogs, docs, marketing pages	Excellent — instant HTML
SSR (Server-Side Rendering)	Dynamic content, personalization	Good — HTML available on first load
ISR (Incremental Static Regeneration)	Frequently updated pages	Good — stale-while-revalidate
CSR (Client-Side Rendering)	Authenticated dashboards	Poor — bots may not execute JS

Recommended frameworks: Next.js, Nuxt.js, Astro, SvelteKit, Remix

Astro is worth evaluating for content-heavy sites — it ships zero JS by default and has excellent Core Web Vitals out of the box.

Metadata & Open Graph

<head>
  <!-- Core SEO -->
  <title>Page Title | Site Name</title>
  <meta name="description" content="Concise, accurate description under 160 characters." />
  <link rel="canonical" href="https://example.com/page" />

  <!-- Open Graph (social sharing) -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Description for social cards." />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com/page" />

  <!-- Twitter/X Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Page Title" />
  <meta name="twitter:image" content="https://example.com/og-image.jpg" />
</head>

JSON-LD Structured Data

Structured data enables rich results in Google Search (FAQ dropdowns, star ratings, product cards, breadcrumbs). Use JSON-LD — it's the preferred format and doesn't pollute your HTML.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Website Optimization Strategy 2026",
  "datePublished": "2026-01-01",
  "dateModified": "2026-06-01",
  "author": {
    "@type": "Person",
    "name": "Your Name",
    "url": "https://example.com/about"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Site Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "image": "https://example.com/article-cover.jpg"
}
</script>

Validate your markup with Google's Rich Results Test.

Sitemap & robots.txt

# robots.txt
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/

Sitemap: https://example.com/sitemap.xml

For sitemaps, submit via Google Search Console and keep lastmod dates accurate — inflated dates signal low-quality updates.

3. Advanced Performance

Image Optimization

Use <picture> with format fallbacks and srcset for responsive delivery:

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img
    src="/hero.jpg"
    alt="Hero Banner"
    width="1200"
    height="700"
    fetchpriority="high"
  />
</picture>

For images below the fold, add loading="lazy" to defer loading until the user scrolls near them.

Font Optimization

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* Show fallback immediately, swap when loaded */
  font-weight: 400;
}

Best practices:

Host fonts locally (eliminates third-party DNS lookup for Google Fonts)
Preload critical fonts: <link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin />
Limit font variations — each weight/style is a separate network request
Use font-display: optional for non-critical fonts to prevent any layout shift

Resource Hints

<!-- DNS resolution for third-party domains -->
<link rel="dns-prefetch" href="https://analytics.example.com" />

<!-- Preconnect for critical third parties (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Prefetch next likely navigation -->
<link rel="prefetch" href="/next-page.html" />

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin />

Edge Caching & CDN

Use a CDN for all static assets. Modern CDN providers with good developer experience:

Cloudflare — generous free tier, edge functions, image optimization
Vercel Edge Network — zero-config for Next.js/framework deployments
Bunny CDN — competitive pricing, good for media-heavy sites

Target a TTFB under 200ms. If your TTFB is consistently high, the bottleneck is usually server compute or geographic distance — a CDN solves the latter; caching solves the former.

4. UX Checklist

Area	What to Check
Mobile-First	Google indexes the mobile version. Test with real devices, not just DevTools.
HTTPS	Non-HTTPS sites are flagged in browsers and penalized in rankings.
Internal Linking	Distribute link equity and help crawlers discover deep pages.
Accessibility	`alt` text on images, keyboard navigability, ARIA roles where needed.
URL Structure	Clean, readable, lowercase, hyphens (not underscores). Avoid URL parameters for content pages.
404 Handling	Custom 404 page with navigation. Monitor for crawl errors in Search Console.
Page Depth	Important pages should be reachable within 3 clicks from the homepage.

Recommended Tooling

Core Web Vitals & Performance

Tool	Use Case
PageSpeed Insights	Field + lab data, LCP/INP/CLS breakdown, quick wins
Lighthouse (Chrome DevTools)	Local audits during development
WebPageTest	Filmstrip view, advanced waterfall, multi-location
GTmetrix	Scheduled monitoring, trend tracking
Chrome UX Report (CrUX)	Real-world field data for your domain and competitors

SEO & Crawling

Tool	Use Case
Google Search Console	Indexing, impressions, CWV reports, crawl errors
Screaming Frog SEO Spider	Large-scale crawl audits, broken links, redirect chains
Ahrefs / Semrush	Backlink analysis, keyword tracking, site audits
Sitebulb	Visual SEO auditing, good for reporting to non-technical stakeholders

Image Optimization

Tool	Use Case
Squoosh	Browser-based AVIF/WebP conversion with quality preview
Sharp (Node.js)	Programmatic image processing in build pipelines
Cloudinary / ImageKit	Automated resize, format conversion, responsive delivery

Structured Data

Tool	Use Case
Schema Markup Generator	Generate valid JSON-LD without writing it by hand
Rich Results Test	Validate structured data against Google's parser

Recommended Workflow

1. Audit
   └── Run PageSpeed Insights on key pages (homepage, top landing pages)
   └── Identify your worst CWV metric — fix the worst one first

2. Debug Locally
   └── Chrome DevTools → Performance tab for INP/LCP traces
   └── Lighthouse for a full audit with specific recommendations

3. SEO Crawl
   └── Screaming Frog to catch broken links, missing titles, redirect chains
   └── Validate structured data with Rich Results Test

4. Deploy & Monitor
   └── Google Search Console for ongoing CWV, indexing, and CTR
   └── Set up alerts for sudden CWV regressions

Summary

Modern SEO is a technical discipline, not just a content strategy. The sites that rank and retain users in 2026 share a common foundation:

Fast LCP through image optimization and server-side rendering
Responsive INP through task scheduling and lean JS
Stable CLS through explicit dimensions and font loading control
Crawlable structure through semantic HTML and structured data
Reliable monitoring through Search Console and real-user metrics (CrUX)

Start with the metric that's furthest from the "Good" threshold. Fix one thing at a time, measure the impact, and iterate. Performance is a product feature — not a post-launch checklist.

Vibe Coding with Gemini in Google AI Studio

Putu Adi — Mon, 09 Mar 2026 09:49:07 +0000

Vibe Coding with Gemini in Google AI Studio 🚀

Build, Refine, and Deploy an AI-Generated App

The AI era is changing the way developers build software. As a frontend developer, I’ve noticed that AI tools are no longer optional—they’re becoming an essential part of the workflow.

One interesting trend is Vibe Coding: generating and iterating on applications using AI with natural language prompts.

In this article, I’ll show how I used Gemini inside Google AI Studio to:

Generate a working application from a single prompt
Refine the UI using annotation tools
Save the project directly to GitHub
Deploy it to Vercel

Let’s walk through the process.

What You'll Do

In this tutorial you will:

Build & Prompt
Use Google AI Studio's Build Mode to generate a working app from a single prompt.
Refine with System Instructions
“Vibe check” the AI by defining a persistent coding style and persona.
Save to GitHub
Bootstrap a new repository directly from AI Studio.
Deploy to Vercel
Deploy the generated application quickly.

What You'll Learn

By the end of this tutorial you will learn:

How to use Build Mode in Google AI Studio for rapid prototyping
How System Instructions help maintain consistent AI behavior
How to integrate Google AI Studio with GitHub
How to deploy an AI-generated app to Vercel

What You'll Need

Before starting, make sure you have:

Chrome Web Browser
Google Account
Gmail Account
GitHub Account
Vercel Account

Before You Begin

Open the Google Cloud Console and create or select a project.

👉 https://console.cloud.google.com/

Go to the Project Selector page and either:

Select an existing project
Or create a new one

This project will be used by Google AI Studio.

Brainstorming the Idea 💡

First, we brainstorm the idea we want to build.

In this example, I decided to build a Nutrition Tracker for bulking and cutting.

The Final Prompt

Once the idea is clear, we write a detailed prompt.

Here is the final prompt used in Google AI Studio Build Mode:

Build a Next.js web application for a Bulking & Cutting Nutrition Tracker
with a high-contrast "Dark Gym" aesthetic using Tailwind CSS.

Features:
- Macro-Centric Dashboard displaying real-time progress for Protein, Carbs, Fats, and Calories
- Dynamic goals based on Bulking or Cutting mode
- Goal Switcher to toggle between modes
- Efficiency Score (Protein per 100 Calories) for each food item
- Meal Logger using weight-based input (grams)
- Use a 5-item dummy food database
- Body Weight & Body Fat % tracker

All user data should be stored and synchronized using LocalStorage with React Hooks.

The UI should be mobile-first and look like a professional fitness application.

Implementing the Prompt

After submitting the prompt, Google AI Studio generates the application automatically.

Within minutes, we already have a working prototype.

This is where Vibe Coding shines: fast iteration with AI assistance.

Improve the Result with Annotation Mode ✨

To refine the UI, we can use Annotation Mode.

This feature allows you to draw directly on the app preview and attach instructions to specific UI elements.

Example improvements:

Draw:
Use the box tool to highlight the score counter.

Comment:

"Make this font larger, digital, and glitchy."

Sketch:
Point to the Play/Pause buttons.

Comment:

"Change these to glowing neon icons."

This allows you to refine your UI visually instead of writing long prompts.

📚 Reference:
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio#3

Save the Project to GitHub

Instead of downloading files and manually creating a repository, Google AI Studio integrates directly with GitHub.

Steps:

Connect your GitHub account
Create a new repository
Push the generated project automatically

This saves time and simplifies the workflow.

📚 Reference:
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio#5

Deploy the Application 🚀

You can deploy using:

Google Cloud Platform
Or other platforms

In this example, I used Vercel (free tier).

Steps:

Open Vercel
Import the GitHub repository
Follow the default configuration

📚 Reference:
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio#6

Demo Project

Here is the deployed demo project:

👉 https://iron-track-food-nutrition-apps.vercel.app/

Final Thoughts

Vibe Coding with Google AI Studio is a powerful way to rapidly prototype applications.

Instead of spending hours building a basic structure, you can:

Generate a full app with a prompt
Iterate visually with annotations
Push code directly to GitHub
Deploy instantly

For developers, AI should not replace our skills—but amplify productivity and creativity.

And honestly, it’s pretty fun.

References

Google AI Studio Codelab
https://codelabs.developers.google.com/vibe-code-with-gemini-in-aistudio

MCP Figma: The Frontend Developer’s New Assistant

Putu Adi — Tue, 02 Dec 2025 08:26:15 +0000

Recently, I explored a new piece of technology called MCP Figma or as I prefer to call it, The Frontend’s Assistant.

At first, a few questions crossed my mind:

“Will this make my work easier, or do I need to adapt to new behaviors?”
“Since Figma is mainly used by designers, will frontend developers like me struggle to understand it?” (For context: I’m still a junior frontend developer, haha.)
“Is this assistant going to replace frontend developers?”

This article is my attempt to answer those questions based on my research and hands-on experimentation.

1. What is MCP?

As stated on the official site:
“An open-source standard for connecting AI applications to external systems.”
(https://modelcontextprotocol.io/)

In simple terms:

An MCP Server is an external service that exposes data or functions so AI applications can access them through the Model Context Protocol.
It acts as a bridge that connects AI to things like files, databases, APIs, or specific tools in a safe and structured format.

Instead of the AI interacting directly with your system, it communicates through the MCP Server. This makes integrations safer, more consistent, and easier to manage especially when connecting AI to multiple external data sources.

2. What is Figma?

(https://www.figma.com/)

Figma is a cloud-based design platform for creating UI/UX designs, prototypes, and collaborative workflows in real-time.
Because it runs directly in the browser, designers, developers, and product teams can work together in the same file without installing additional software.

With features like Auto Layout, prototyping, shared libraries, and component systems, Figma makes it easy to maintain large-scale design projects. It also provides integrations and plugins that support developer handoff making the design-to-code workflow smoother and faster.

3. Why Figma MCP Server Exists

After understanding MCP and Figma individually, the next question is:
Why combine them? Why does “Figma MCP Server” exist?

The answer is simple:

There is a growing need for AI to directly understand, analyze, and extract structured data from design files.

Figma MCP Server allows AI tools to:

read design structures
inspect components and metadata
automate documentation
convert design into code
validate UI accuracy
speed up design-to-development workflows

AI no longer needs to interpret a screenshot.
It can access real, structured design data in a standardized and secure way.

This results in faster, more accurate, and more efficient collaboration between designers and frontend developers.

📘 Setup Guides

Official Setup Guide:
https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server

🧩 Supported AI Tools

a. Cursor AI
Guide by Sergei Chyrkov:
https://www.youtube.com/watch?v=PPqt_xLg_5c

Reference: https://cursor.directory/mcp/figma

b. VS Code + Copilot / MCP
Guide by Snyk:
https://www.youtube.com/watch?v=50tkvZhOVqM

Reference:
https://code.visualstudio.com/docs/copilot/customization/mcp-servers#_add-an-mcp-server-to-your-workspace

Figma API Key (if needed):
https://essential-addons.com/docs/how-to-get-figma-api-key/

4. My Own Implementation

A few weeks ago, I created a personal design case study:

A fruit shop e-commerce landing page called “Jaya Abadi.”
The page includes sections for products, business info, partners, testimonials, contact, and more fully responsive for desktop and mobile.

🎨 My Mockup

🔧 My Workflow

a. Set up MCP Server (I used Cursor AI)

b. Selected a model (I used the free plan limited, but okay).
c. Prompting process.

Example prompt I used:

create complete html, css native, sass and images used in the figma (_this link to figma selection part
![Image here](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2oahbexpq2j9gzu90ap.png)_)

d. And boom the output arrived.
e. So… how was the result?

5. The Result

this demo result link website : https://experiment-use-figma-mcp-server-wit.vercel.app/

Just with a prompt,
I was able to generate a full website structure.

6. Conclusion

For me, the result is surprisingly good.
Yes, the setup time is a bit long (especially if you're starting from zero), but the output is worth it.

✅ Pros

A very fast way to generate initial code from design
Roughly 50% accurate to the original design
Clean code structure
- The AI even used BEM CSS methodology
- And a folder layout similar to Atomic Design

❌ Cons

Some visual adjustments still needed design sense is not perfect
CSS and spacing require manual refinement
Free model limitations reduce quality

💡 Suggestions

A better model produces a better output, simple as that
Use good, clean prompting
If you're a developer, prepare your project setup before running the MCP workflow
Expect to refine the design manually at the end

Final Thoughts

This is a fascinating innovation.
It helps a lot, especially for frontend developers who:

don’t want to design from scratch
want faster design-to-code workflows
enjoy experimenting with AI tools

It won’t replace frontend developers, but it will empower us to focus more on structure, logic, performance, and polish.

And I’m excited to see how this evolves next.

Thanks for reading! 🙌

Moment.js vs Day.js — Which One Should You Use Today?

Putu Adi — Sat, 05 Jul 2025 11:41:52 +0000

Hi everyone! 👋

Welcome to my very first online article! 😄

This is actually my first time writing a technical post, so please bear with me if it’s not perfect. I'm open to feedback and discussion — feel free to drop your thoughts in the comments to keep me motivated and excited to share more!

🔍 Background

This article is inspired by a recent task I received from my team at work. We're currently working on a JavaScript-based project using Nuxt.js, and I was asked to research date manipulation libraries.

We had previously used Moment.js, but I kept encountering discussions comparing it to Day.js — some even questioned whether Moment.js was still relevant. That piqued my curiosity.

So I ran a quick technical comparison between the two. Rather than saying one is "better", I wanted to understand where each library excels and what trade-offs they offer. Hopefully, this post helps you make the right choice for your use case too!

🆚 Moment.js vs Day.js

Here’s a side-by-side comparison of the two popular JavaScript libraries for date and time handling.

📆 Moment.js

Released: September 15, 2011
Created by: Tim Wood
Purpose: Simplify date parsing, validation, manipulation, and formatting with a developer-friendly API.

🔍 Project Status

As of 2020, Moment.js is in maintenance mode.
No new features are planned, but bug fixes and security updates may still be provided.
Reference – Project Status

📆 Day.js

Released: May 23, 2018
Created by: @iamkun
A modern and lightweight alternative to Moment.js, with a similar API.

✨ Strengths of Day.js

Small bundle size (~2KB without plugins)
Fast performance
Immutable date objects
Tree-shaking friendly
Plugin-based system for optional features
Compatible with modern frameworks like Vue, Nuxt, and React

📊 Quick Comparison Table

Feature	Moment.js	Day.js
Release Year	2011	2018
Bundle Size	~67 KB	~2 KB
Performance	Moderate	Fast
Tree-shaking Support	❌ Not supported	✅ Supported
Project Status	Maintenance	Actively maintained
Immutability	❌ Mutable	✅ Immutable
Timezone Support	✅ Built-in	➕ Via plugin
Parsing Flexibility	✅ High	➕ With plugin (customParseFormat)

📦 Moment.js on Bundlephobia

📦 Day.js on Bundlephobia

🎯 When to Use What?

Here’s a quick guide to help you decide:

✅ Use Moment.js if:

You're maintaining or working on a legacy codebase.
You need comprehensive parsing and timezone support out-of-the-box.
Bundle size is not a major concern.

✅ Use Day.js if:

You're building a modern application where performance and size matter.
You prefer immutability and a modular plugin system.
You're using frameworks like Vue, Nuxt, React, etc.

🧠 Conclusion

Both Moment.js and Day.js are powerful in their own ways.

Moment.js remains a mature and battle-tested option for robust date handling, especially in older codebases.
Day.js offers a more modern take, focused on size, speed, and simplicity — while keeping the familiar API.

Rather than suggesting one is strictly "better" than the other, I hope this article shows how they serve different needs depending on your project context.

💡 Final Thoughts

If you're starting a new JavaScript project, it’s worth evaluating Day.js for its modern architecture and smaller footprint.

If you're maintaining a legacy project, Moment.js might still be the more practical choice, but keep in mind its status.

Ultimately, the best tool is the one that fits your project’s requirements, team familiarity, and long-term maintainability goals.

🙏 Thank You

Thanks so much for reading my first blog post!

I hope this helped clarify the differences and use cases between Moment.js and Day.js. If you’ve used either (or both), I’d love to hear your experience in the comments!

💻 Check out the small experiment I built:

👉 Live Demo – GitHub Pages

Until next time — happy coding and keep learning! 🚀

DEV Community: Putu Adi

[Boost]

Vibe Coding 101: Notes from a Developer Who Got Tired of Writing Code by Hand

Vibe Coding 101: Notes from a Developer Who Got Tired of Writing Code by Hand

Table of Contents

What is Vibe Coding?

1. Choose Your Editor / Environment

GUI Editors (IDE-based)

CLI Agents (Terminal-based)

2. Pick the Right Model

Model Comparison

Source Notes — Model Table

How to Choose Practically

3. Give the AI "Knowledge" Use a Skills Library

Skills Libraries I Use

Source Notes — Superpowers

How Skills Work

4. Set Up Starter Documentation

CLAUDE.md vs GEMINI.md vs AGENTS.md Which One?

Side-by-Side Comparison

Multi-Tool Strategy: One File for All

My Project Structure

What Goes Inside the Config File?

Scenario 1: Starting from Scratch ✨

Scenario 2: Existing Codebase 🏗️

My Daily Vibe Coding Workflow

Pre-flight Checklist

Closing Thoughts

Quantitative Data Source Summary

Website Optimization Strategy: SEO & Core Web Vitals (2026)

Website Optimization Strategy: SEO & Core Web Vitals (2026)

1. Core Web Vitals

Largest Contentful Paint (LCP)

Interaction to Next Paint (INP)

Cumulative Layout Shift (CLS)

2. Technical SEO

Semantic HTML

Rendering Strategy

Metadata & Open Graph

JSON-LD Structured Data

Sitemap & robots.txt

3. Advanced Performance

Image Optimization

Font Optimization

Resource Hints

Edge Caching & CDN

4. UX Checklist

Recommended Tooling

Core Web Vitals & Performance

SEO & Crawling

Image Optimization

Structured Data

Recommended Workflow

Summary

Vibe Coding with Gemini in Google AI Studio

Vibe Coding with Gemini in Google AI Studio 🚀

Build, Refine, and Deploy an AI-Generated App

What You'll Do

What You'll Learn

What You'll Need

Before You Begin

Brainstorming the Idea 💡

The Final Prompt

Implementing the Prompt

Improve the Result with Annotation Mode ✨

Save the Project to GitHub

Deploy the Application 🚀

Demo Project

Final Thoughts

References

MCP Figma: The Frontend Developer’s New Assistant

1. What is MCP?

2. What is Figma?

3. Why Figma MCP Server Exists

📘 Setup Guides

🧩 Supported AI Tools

4. My Own Implementation

🎨 My Mockup

🔧 My Workflow

5. The Result