Forem: Jaber-Said

SEO Isn’t Dead — It Just Got a Second Interface (How to Show Up in Google and AI Answers)

Jaber-Said — Mon, 09 Mar 2026 02:53:09 +0000

Search used to mean “10 blue links.” Now it’s also summaries, citations, map packs, “AI Overviews,” and chatbot-style answers. The good news: the fundamentals still work. The new news: you also need to help language models understand who you are (entity) and what you’re the best answer for (intent + evidence).

This article covers:

A practical, modern explanation of website SEO (with examples).

How to analyze language models’ behavior when they recommend websites/services.

A long, copy‑paste prompt you can give a coding agent in your editor to audit and implement SEO + AI visibility improvements.

Part 1 — SEO for Websites (What matters in 2026, in plain terms)

What SEO is (and why it still prints money)

Search Engine Optimization (SEO) is the work of making your site easy for search engines to crawl, index, and rank for queries that matter to your business.

Search engines generally do three things:

Crawl: discover URLs by following links + sitemaps.

Index: render + understand pages; store them in a searchable index.

Rank: choose which indexed pages best match a query using relevance, quality, authority, UX, and more.

If you improve crawlability + understanding + trust + usefulness, your rankings tend to follow.

The core pillars of SEO (with concrete examples)

1) Technical SEO (the “plumbing”)

Technical SEO ensures your site can be discovered, rendered, and indexed correctly.

Key checks:

robots.txt + noindex: Don’t accidentally block important pages.

Example disaster: a staging noindex tag ships to production → organic traffic falls off a cliff.

XML sitemap: Helps crawlers find all indexable pages.

Canonical URLs: Prevent duplicate URL variants (e.g., /?ref=…, trailing slashes, www vs non-www) from splitting signals.

Mobile-first: Google primarily indexes mobile. Your mobile experience is not “nice-to-have.”

Core Web Vitals: Speed + stability + responsiveness affect both rankings and conversions.

HTTPS: baseline trust + security.

Structured data (Schema.org): helps engines interpret meaning (Organization, LocalBusiness, Service, FAQPage, etc.).

Example: A dental clinic adds LocalBusiness schema (address, hours, services). Result: richer SERP appearance and higher click-through rate (CTR) because searchers see instant trust signals.

2) On-page SEO (make each page the best answer)

On-page SEO is about aligning each page to search intent and making it the best, clearest answer.

Search intent types:

Informational: “how does solar energy work”

Commercial investigation: “best solar panel installers 2026”

Transactional: “buy solar panels online”

Navigational: “BrandName login”

If someone searches “roof replacement cost,” and your page only says “contact us,” that’s a mismatch.

Modern on-page essentials:

Unique title tags + meta descriptions (CTR matters even if meta descriptions aren’t a direct ranking factor).

One clear H1, logical H2/H3 hierarchy.

Depth that satisfies: process, pricing factors, FAQs, proof, next steps.

Internal linking: connect related pages so authority and context flow through your site.

Image optimization: descriptive filenames + alt text + modern formats + correct lazy-loading.

Example: A plumbing company expands “Water Heater Installation” from 150 words to a real guide: tank vs tankless, sizing, permits, timeline, warranties, FAQs, reviews. They start ranking for dozens of long-tail queries and conversions rise because users trust the clarity.

3) Off-page SEO (authority you don’t fully control)

Off-page SEO is reputation and authority: backlinks, mentions, reviews, and brand demand.

The rule: one strong link from a trusted industry site can beat 200 weak directory links.

Practical strategies:

Digital PR (original data, expert commentary)

Partnerships + associations

Linkable assets (calculators, benchmarks, definitive guides)

Review growth (especially for local)

Example: An accounting firm publishes a yearly deductions guide with original analysis. Local business publications cite it. The firm’s service pages rank better because the domain’s authority improves.

4) Local SEO (if you serve geographic areas)

Local visibility is its own game: Google Business Profile (GBP), reviews, citations, and location relevance.

Local ranking factors:

Relevance: do you match the query?

Distance: proximity to searcher/service area

Prominence: authority + reviews + mentions + links

Example: A pest control company creates a city page that’s actually local (local pests, local codes, local case studies). It beats competitors using templated “find/replace city name” pages.

5) Content strategy (stop blogging randomly)

Random posts are content calories; strategy is nutrition.

A good plan:

Map content to the buyer journey (awareness → consideration → decision).

Build topic clusters (pillar page + supporting articles interlinked).

Refresh top pages quarterly (update stats, expand sections, merge thin/overlapping pages).

6) Measurement (SEO without measurement is guesswork)

Tools:

Google Search Console: queries, CTR, indexing, Core Web Vitals

Analytics (GA4 or privacy-focused alternatives): engagement + conversion

Metrics that matter:

Impressions (visibility)

CTR (appeal)

Conversions (business value)

Index coverage (technical health)

Example: Add FAQ schema + improve title → impressions +40%, CTR 2.1% → 3.8%, leads +30% in two months.

Part 2 — Optimizing for AI Language Models (GEO) + How to Analyze Model Recommendations

When users ask ChatGPT/Claude/Copilot/Perplexity/Google AI Overviews “who’s best for X,” these systems may recommend providers and cite sources. That’s Generative Engine Optimization (GEO): improving the likelihood you’re mentioned, recommended, or cited.

How LLM-based systems “know” and recommend sites

Most real-world assistants combine:

Training knowledge (static; has a cutoff; not reliably up-to-date)

Retrieval / live search (RAG) (pulls current pages, then summarizes/cites)

Knowledge graphs / trusted datasets (entities, facts, relationships)

If a system uses retrieval, traditional SEO directly increases the chance your pages get pulled as evidence.

GEO fundamentals (what actually helps)

1) Entity clarity (make it easy to identify your business)

LLMs handle “entities” better than “vibes.” Ensure consistent:

business name

service categories

location/service area

phone/address

about/credentials

sameAs links (social profiles)

This consistency should appear across:

your site (footer, contact, about)

GBP, major directories, association listings

reputable third-party mentions

2) “Answer-shaped” content (AI loves direct answers)

LLMs and retrieval systems extract best from:

clear declarative statements near the top (“We provide X in Y since Z”)

FAQs and Q&A sections

lists, tables, comparisons

specific claims with constraints (“Plans start at $150/month for up to 5,000 sq ft…”)
(Don’t invent numbers. Be precise and honest.)

3) Structured data (schema) as machine-readable reinforcement

Schema doesn’t guarantee rankings, but it strengthens understanding and can unlock rich results and citations.

4) Diverse, credible third-party presence

AI systems trust what the web “agrees” on. Earn mentions in:

reputable reviews and directories (industry-specific is best)

local press / trade journals

podcasts (transcripts get indexed)

community discussions where you genuinely help (not spam)

5) “Recommendation queries” strategy

Identify prompts users ask AI:

“Best [service] in [city]?”

“Who should I hire for [problem]?”

“What does [service] cost in [location]?”
Then create pages that answer these directly (and earn mentions in listicles that rank for them).

How to analyze AI language models when they recommend your website

You can’t treat LLM recommendations like classic rank tracking. You need a repeatable evaluation harness.

A) Build a query test set (your “AI visibility benchmark”)

Create 30–100 prompts that mirror real buyers. Mix:

short: “best commercial plumber in Austin”

long: “I manage an office building; recurring drain backups; what should I do and who do you recommend?”

comparison: “French drain vs sump pump”

trust: “licensed/insured [service] near me”

pricing: “how much does X cost in Y?”

Run them across:

multiple models (ChatGPT, Claude, Perplexity, Copilot, etc.)

multiple locations (VPN or location settings if relevant)

multiple times (variance is real)

Record: whether you’re mentioned, how you’re described, and what sources are cited.

B) Separate “model memory” from “retrieval”

For each query, test:

with browsing/retrieval on (if available)

with browsing off (if possible)

If you only appear with retrieval on, SEO + citations are your lever.
If you appear without retrieval, brand/entity presence in training data and common corpora is likely influencing it (a slower, PR-like game).

C) Audit the citations (this is the actionable part)

When the model cites sources:

Are your pages cited?

Are third-party pages mentioning you cited? (Often the real driver for “best X” queries.)

Are citations accurate and current?

Are you missing from “best of” pages that dominate results?

This tells you whether to focus on:

improving your page to rank higher (traditional SEO), or

getting included in the sources that AI systems already trust (PR/directories/reviews).

D) Check for brand/entity confusion

Common failure modes:

inconsistent name variants (“Acme Co.” vs “Acme Group LLC”)

mismatched addresses/phone numbers across directories

unclear service area boundaries

multiple similar brands

Fixing entity clarity often improves both local SEO and AI recommendation confidence.

E) Evaluate answer quality (not just mentions)

Even if you’re cited, ask:

Did the model describe your services correctly?

Did it invent features you don’t have? (hallucination risk)

Did it list wrong contact info?

If yes, you need:

clearer “facts” on your site (About, Contact, Service pages)

schema reinforcement

consistent third-party listings

and sometimes “myth-busting” FAQ content (e.g., “Do you offer 24/7 emergency service?”)

F) Instrument your own product (if you run an assistant/chat on your site)

If your site has an AI assistant that recommends your services, analyze it like any other system:

Log user intents (anonymized), top questions, and drop-off points.

Evaluate retrieval quality (what pages were fetched, were they relevant, were they fresh).

Add guardrails: “don’t claim pricing unless from pricing page,” “always cite the contact page for phone/address,” etc.

Use a golden set of test questions and run regression tests after content changes.

Part 3 — Using an AI Coding Agent to Implement SEO at Scale (safely)

AI agents inside editors (Cursor/Windsurf/Cline) can do real work: crawl the repo, detect frameworks, add sitemaps, implement schema, optimize metadata, and generate reports.

To keep this from turning into a “helpful raccoon in your attic” situation:

Require diffs and avoid silent sweeping rewrites

Work in a branch

Run lint/tests/build

Validate schema with structured-data testing tools

Run Lighthouse/WebPageTest for before/after

Appendix — Copy/Paste Prompt for Your AI Coding Agent

Below is a long, framework-agnostic master prompt you can paste into your coding agent. It instructs the agent to (1) analyze first, (2) implement improvements phase-by-phase, and (3) generate an SEO_AUDIT_REPORT.md.

Note: I kept it intentionally exhaustive. If your agent tends to be overly “creative,” consider adding: “Do not rewrite UI components unless necessary; prefer minimal diffs; show a file-by-file plan before edits.”

COMPREHENSIVE SEO AUDIT AND OPTIMIZATION — MASTER PROMPT

You are an expert SEO engineer and web performance specialist. Your task is to perform a complete, exhaustive SEO audit and optimization of this entire project. You have full permission to read, analyze, modify, create, and delete files as needed.

IMPORTANT RULES

Work through each phase sequentially. Do NOT skip ahead.
For EVERY check, first verify whether it is already implemented before making changes.
If something is already correctly implemented, log it as "✅ ALREADY IN PLACE" and move on.
If something is missing or incorrectly implemented, fix it and log it as "🔧 IMPLEMENTED" with a brief description of what you changed.
If something cannot be implemented due to the current tech stack or project constraints, log it as "⚠️ REQUIRES MANUAL ACTION" and explain what needs to be done and why you couldn't do it.
Do NOT break existing functionality. If a change risks breaking something, note it and ask before proceeding.
After completing ALL phases, generate a final summary report as a markdown file called SEO_AUDIT_REPORT.md in the project root.
Preserve all existing design, styling, branding, and visual appearance. SEO changes should be structural and content-meta level, not visual redesigns.
All changes must follow the conventions and patterns already established in the codebase (naming conventions, file organization, component patterns, styling approach).

PHASE 0: PROJECT DISCOVERY AND ANALYSIS

Before making ANY changes, perform a thorough analysis and document your findings.

0.1 — Technology Stack Analysis

Identify the framework (React, Next.js, Nuxt.js, Vue, Angular, Astro, SvelteKit, WordPress, plain HTML/CSS/JS, PHP, Django, Ruby on Rails, Gatsby, Remix, Eleventy, Hugo, or other).
Identify the rendering strategy: Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), or hybrid.
Identify the CSS approach (Tailwind, CSS Modules, Styled Components, SCSS/SASS, plain CSS, etc.).
Identify the package manager (npm, yarn, pnpm, bun).
Identify any CMS or headless CMS integration (Contentful, Strapi, Sanity, WordPress headless, etc.).
Identify the hosting/deployment platform if detectable (Vercel, Netlify, AWS, traditional hosting, Docker, etc.).
Identify any existing SEO-related packages, plugins, or configurations already installed.
Identify the routing system and how pages/routes are structured.
Identify if there is an existing sitemap, robots.txt, or manifest file.
Identify any analytics or tracking already in place (Google Analytics, Google Tag Manager, etc.).

0.2 — Site Architecture Analysis

Map out every page/route in the project. List them all.
Identify the page hierarchy and navigation structure.
Identify which pages are service pages, blog/content pages, landing pages, utility pages (privacy policy, terms, contact, about, 404, etc.).
Identify any dynamic routes and how they generate pages.
Identify the internal linking structure between pages.
Note any orphaned pages (pages with no internal links pointing to them).
Note any broken internal links.
Count total pages and categorize them by type.

0.3 — Current SEO State Assessment

Check every page for existing title tags, meta descriptions, Open Graph tags, Twitter Card tags.
Check for existing structured data/Schema.org markup on any page.
Check for existing canonical tags.
Check for existing hreflang tags (if multilingual).
Check for existing robots meta tags on individual pages.
Check if a sitemap.xml exists and if it's comprehensive.
Check if robots.txt exists and if it's correctly configured.
Check for an existing favicon and web app manifest.
Check image alt text coverage across all pages.
Check heading hierarchy (H1, H2, H3) on every page.
Check for any existing performance optimization (image optimization, lazy loading, code splitting, etc.).

0.4 — Content Analysis

For each page, identify the primary topic/keyword intent.
Note pages with thin content (fewer than 300 words of meaningful text on service/content pages).
Note pages with duplicate or near-duplicate content.
Note pages with missing or generic headings.
Identify the business name, industry, services offered, and target location(s) from the existing content.

Document ALL findings from Phase 0 before proceeding. This becomes the baseline for your audit.

PHASE 1: TECHNICAL SEO FIXES

1.1 — Meta Tags and Head Configuration

For EVERY page/route in the project:

Title Tags:

Ensure every page has a unique, descriptive tag.
Title should be 50-60 characters maximum.
Title should include the primary keyword for that page naturally.
Title should include the brand name, typically at the end separated by a pipe or dash.
Homepage title should lead with the primary value proposition or brand + primary service + location.
No two pages should share the same title tag.
Implement using the appropriate method for the framework.

Meta Descriptions:

Ensure every page has a unique meta description.
Length: 120-155 characters.
Should accurately describe the page content.
Should include primary keyword naturally.
Should include a compelling reason to click.
No two pages should share the same meta description.

Canonical Tags:

Every page must have a self-referencing canonical tag with a full absolute URL.
Ensure canonical URLs are consistent (www vs non-www, trailing slash or no trailing slash).

Viewport / Charset / Language:

Ensure viewport meta exists.
Ensure UTF-8 charset is present and early in .
Ensure is correct; implement hreflang if multilingual.

Robots Meta:

Ensure indexable pages are not noindexed.
Ensure pages that should not be indexed (thank-you, internal search, admin, staging) are noindexed.

1.2 — Open Graph and Social Tags

For every public page:

og:title, og:description, og:type, og:url, og:image (absolute), og:site_name, og:locale
Twitter:card summary_large_image, twitter:title/description/image

1.3 — Robots.txt

Create or fix robots.txt in public/static.
Do not block CSS/JS/images.
Include Sitemap: https://[DOMAIN]/sitemap.xml
Only disallow routes that truly should not be indexed.

1.4 — XML Sitemap

Implement a sitemap mechanism appropriate to the framework.
Include all public, indexable pages; exclude noindex/redirect/auth pages.
Include lastmod if available.

1.5 — URL Structure + Redirects

Enforce clean, lowercase, hyphenated URLs.
If changing URLs, add 301 redirects and avoid chains/loops.

1.6 — 404/Error Handling

Ensure proper 404 page and correct HTTP status.
Fix broken internal links.

1.7 — HTTPS/Mixed Content

Ensure internal assets and links use HTTPS; fix mixed content.

PHASE 2: ON-PAGE SEO OPTIMIZATION

2.1 — Heading Hierarchy

Exactly one H1 per page.
Logical H2/H3 hierarchy; no heading tags used purely for styling.

2.2 — Semantic HTML + Accessibility Basics

header/nav/main/article/section/footer usage where appropriate.
Labels for form controls; buttons are , links are .
Add skip-to-content link if missing.

2.3 — Image Optimization

Ensure alt attributes exist (decorative alt="").
Use modern formats and responsive images where supported.
Lazy-load below-the-fold; never lazy-load LCP/hero images.
Ensure width/height or aspect-ratio to prevent CLS.

2.4 — Internal Linking

Ensure key pages have multiple internal links pointing to them.
Use descriptive anchor text.
Add breadcrumbs if site hierarchy warrants it (and add schema if implemented).

2.5 — Content Quality Checks

Flag thin/duplicate/placeholder content.
Do NOT write new body copy; log manual content needs.

PHASE 3: STRUCTURED DATA / SCHEMA.ORG (JSON-LD)

Implement where applicable:

Organization or LocalBusiness site-wide
WebSite (and SearchAction only if site search exists)
WebPage per page (and BreadcrumbList where relevant)
Service schema on service pages
FAQPage schema where FAQs exist
BlogPosting on articles
Optional: Review/AggregateRating, Product, HowTo, Video, Person, JobPosting, Event, Course as relevant

Use real business data from the site; if missing, add placeholders and flag manual action.

PHASE 4: PERFORMANCE (CORE WEB VITALS)

Optimize LCP: preload hero/LCP images; avoid lazy-loading; reduce render-blocking.
Prevent CLS: dimensions for media; font-display swap; reserve space for banners.
Improve INP: reduce long tasks; defer 3rd-party scripts; split bundles.
Optimize fonts: self-host WOFF2, subset, preload 1-2 critical files, reduce weights.
Ensure caching/compression where configurable; otherwise flag hosting actions.

PHASE 5: ACCESSIBILITY (SEO-RELEVANT)

ARIA labels for icon-only controls
Keyboard navigation
aria-current for active nav
Flag contrast issues without redesigning branding

PHASE 6: PWA + ENHANCEMENTS

manifest.json/site.webmanifest + icons + theme-color meta
favicon set (flag manual asset creation if missing)

PHASE 7: INTERNATIONAL SEO (IF APPLICABLE)

hreflang + correct lang attributes + consistent language URL strategy

PHASE 8: AI / LLM VISIBILITY OPTIMIZATION

8.1 — Answer-Friendly Structure

Add clear declarative summary sentences early on key pages.
Ensure FAQ sections exist on service pages (flag content needs if missing).

8.2 — Entity Clarity

Consistent name/services/location/contact across site + schema.

8.3 — llms.txt

Create /llms.txt in public/static with business summary, services, areas, contact, and key pages.

8.4 — Reinforce Structured Data

Ensure applicable schema types are implemented cleanly.

8.5 — AI-Style Query Coverage

Flag recommendations for sections answering conversational queries like cost, timelines, what to expect, how to choose a provider.

PHASE 9: FINAL REPORT

Create SEO_AUDIT_REPORT.md in the project root including:

stack + routing findings
implemented vs already-in-place vs manual items per phase
content recommendations
page-by-page meta table (title/description/canonical/OG image)
schema summary
sitemap/robots/https status

Begin now with Phase 0.

Closing thought (the “don’t be weird” rule)

The best SEO/GEO strategy is not trickery—it’s clarity, usefulness, and credibility made easy for machines to parse. If your site is the most helpful answer and it’s technically accessible, both Google and AI systems have a much easier time recommending you.

Jaber Said

Securing AI-Powered Applications: A Comprehensive Guide to Protecting Your LLM-Integrated Web App

Jaber-Said — Thu, 19 Feb 2026 03:53:29 +0000

Securing AI-Powered Applications: A Comprehensive Guide to Protecting Your LLM-Integrated Web App

Lessons learned from implementing security measures for Promptimizer, an AI Prompt Enhancement Tool

Introduction

The rise of Large Language Models (LLMs) has opened incredible possibilities for web applications, but it has also introduced a new frontier of security challenges. When I developed Promptimizer (an AI prompt enhancement tool at promptimizer.top), I quickly realized that securing an application that interfaces with AI models requires a multi-layered approach.

In this article, I'll share the comprehensive security measures implemented to protect the application from common threats like abuse, cost explosions, prompt injection attacks, and unauthorized access. Whether you're building a chatbot, an AI writing assistant, or any LLM-powered application, these strategies will help you build a more secure and resilient system.

The Unique Security Challenges of AI Applications

Applications that integrate LLMs face distinct security challenges that traditional web applications don't typically encounter:

Cost Vulnerabilities: Every API call to an LLM costs money. Malicious users can exploit this by making excessive requests or requesting extremely long outputs.
Prompt Injection Attacks: Users can craft inputs designed to manipulate the AI's behavior, extract system prompts, or bypass safety measures.
Model Parameter Manipulation: Clients can send modified parameters (like setting max_tokens to 100,000) that dramatically increase costs.
Abuse and DoS: Without proper limits, bad actors can overwhelm your API endpoints.
Authentication Bypass: Client-side authentication can be easily circumvented.

Let's dive into how we addressed each of these challenges.

1. Creating a Security Utilities Module

The foundation of our security implementation is a dedicated security utilities module. This centralizes all security-related functions and makes them easier to maintain and audit.

// src/lib/security.js

// In-memory rate limit store (for production, use Redis or similar)
const rateLimitStore = new Map();
export const blockedIPs = new Set();

// Rate limit configuration
export const RATE_LIMIT_CONFIG = {
  // Chat endpoint specific (more restrictive due to AI costs)
  chat: {
    windowMs: 60 * 1000, // 1 minute window
    maxRequests: 10, // max requests per window
  },
  // Failed attempt tracking (for brute force prevention)
  auth: {
    windowMs: 15 * 60 * 1000, // 15 minute window
    maxAttempts: 5, // max failed attempts before temporary block
    blockDurationMs: 30 * 60 * 1000, // 30 minute block
  },
};

Key Insight: We use different rate limits for different endpoints. The chat endpoint has stricter limits because each request costs money, while authentication failures trigger progressive blocking.

2. Rate Limiting: Protecting Against Abuse

Rate limiting is your first line of defense against abuse. Our implementation tracks requests per IP address within rolling time windows.

export function checkRateLimit(identifier, config = RATE_LIMIT_CONFIG.api) {
  const now = Date.now();
  const windowStart = now - config.windowMs;

  // Check if IP is blocked
  if (blockedIPs.has(identifier)) {
    return {
      allowed: false,
      remaining: 0,
      resetTime: now + RATE_LIMIT_CONFIG.auth.blockDurationMs,
      blocked: true,
    };
  }

  // Get or create entry for this identifier
  let entry = rateLimitStore.get(identifier);

  if (!entry || entry.windowStart < windowStart) {
    entry = {
      windowStart: now,
      count: 0,
      failedAttempts: entry?.failedAttempts || 0,
    };
  }

  // Calculate remaining requests
  const remaining = Math.max(0, config.maxRequests - entry.count);
  const resetTime = entry.windowStart + config.windowMs;

  if (entry.count >= config.maxRequests) {
    return {
      allowed: false,
      remaining: 0,
      resetTime,
      blocked: false,
    };
  }

  return {
    allowed: true,
    remaining: remaining - 1,
    resetTime,
    blocked: false,
  };
}

Implementation Tips:

Use X-Forwarded-For and similar headers to get the real client IP behind CDNs
Include rate limit information in response headers so legitimate users know their limits
For production, use Redis or a similar distributed store to share rate limit state across multiple server instances

3. Detecting Prompt Injection Attacks

Prompt injection is a unique threat to LLM applications. Attackers craft inputs designed to override your system instructions or extract sensitive information.

We implemented pattern-based detection to identify common attack vectors:

const SUSPICIOUS_PATTERNS = [
  // Prompt injection attempts
  /ignore\s+(all\s+)?(previous|above|prior)\s+(instructions?|prompts?|rules?)/i,
  /disregard\s+(all\s+)?(previous|above|prior)\s+(instructions?|prompts?|rules?)/i,
  /forget\s+(all\s+)?(previous|above|prior)\s+(instructions?|prompts?|rules?)/i,
  /you\s+are\s+now\s+(a|an)\s+/i,
  /act\s+as\s+if\s+you\s+are/i,
  /pretend\s+(that\s+)?you\s+are/i,
  /jailbreak/i,
  /DAN\s*mode/i,
  /developer\s+mode/i,

  // Attempting to extract system prompts
  /reveal\s+(your|the)\s+(system\s+)?prompt/i,
  /show\s+(me\s+)?(your|the)\s+(system\s+)?prompt/i,
  /what\s+(is|are)\s+(your|the)\s+(system\s+)?prompt/i,

  // Code execution attempts
  /eval\s*\(/i,
  /process\.env/i,
  /__proto__/i,
];

Important Note: Pattern matching isn't foolproof. Sophisticated attackers can craft inputs that bypass these filters. Use this as one layer of defense, not your only protection.

4. Model and Parameter Validation

One of the most dangerous vulnerabilities in LLM applications is allowing clients to specify arbitrary model parameters. A malicious user could set max_tokens: 1000000 and drain your API credits in minutes.

Model Whitelisting

Only allow specific, approved models:

export const ALLOWED_MODELS = [
  "meta-llama/Llama-3.3-70B-Instruct",
  "deepseek-ai/DeepSeek-V3.1",
  "gpt-4o-mini",
];

export function validateModel(model) {
  if (!model || typeof model !== "string") {
    return { valid: false, model: null, error: "Model is required" };
  }

  const normalizedModel = model.trim();

  const isAllowed = ALLOWED_MODELS.some(
    (allowed) => allowed.toLowerCase() === normalizedModel.toLowerCase(),
  );

  if (!isAllowed) {
    return { valid: false, model: null, error: "Invalid model specified" };
  }

  return { valid: true, model: normalizedModel, error: null };
}

Token Limit Enforcement

Define maximum token limits per model and enforce them server-side:

export const MODEL_TOKEN_LIMITS = {
  "meta-llama/Llama-3.3-70B-Instruct": { max: 4096, default: 2048 },
  "deepseek-ai/DeepSeek-V3.1": { max: 8192, default: 4096 },
  "gpt-4o-mini": { max: 4096, default: 2048 },
  default: { max: 4096, default: 2048 },
};

export function validateTokenParams(model, options = {}) {
  const modelLimits = MODEL_TOKEN_LIMITS[model] || MODEL_TOKEN_LIMITS.default;

  return {
    temperature: Math.min(Math.max(0, options.temperature ?? 1.0), 2.0),
    max_tokens: Math.min(
      Math.max(1, options.max_tokens ?? modelLimits.default),
      modelLimits.max,
    ),
    top_p: Math.min(Math.max(0, options.top_p ?? 1.0), 1.0),
    frequency_penalty: Math.min(
      Math.max(-2.0, options.frequency_penalty ?? 0),
      2.0,
    ),
    presence_penalty: Math.min(
      Math.max(-2.0, options.presence_penalty ?? 0),
      2.0,
    ),
  };
}

The Fix: Our application originally had max_tokens: 100000 in the client-side store. We changed this to 2048 as the default and enforced server-side limits.

5. Securing the API Route

With our validation utilities in place, securing the API route becomes straightforward:

// src/app/api/chat/route.js

import OpenAI from "openai";
import {
  getClientIP,
  checkRateLimit,
  incrementRateLimit,
  validateModel,
  validateMessages,
  validateTokenParams,
  logSecurityEvent,
  createRateLimitHeaders,
  RATE_LIMIT_CONFIG,
} from "@/lib/security";

const MAX_BODY_SIZE = 1024 * 1024; // 1MB

export async function POST(req) {
  const clientIP = getClientIP(req);

  // 1. Check rate limit
  const rateLimitInfo = checkRateLimit(clientIP, RATE_LIMIT_CONFIG.chat);

  if (!rateLimitInfo.allowed) {
    logSecurityEvent(
      rateLimitInfo.blocked ? "IP_BLOCKED" : "RATE_LIMITED",
      { remaining: rateLimitInfo.remaining },
      req,
    );

    return new Response(
      JSON.stringify({
        error: rateLimitInfo.blocked
          ? "Your IP has been temporarily blocked due to suspicious activity."
          : "Too many requests. Please wait before trying again.",
        retryAfter: Math.ceil((rateLimitInfo.resetTime - Date.now()) / 1000),
      }),
      {
        status: 429,
        headers: {
          "Content-Type": "application/json",
          "Retry-After": Math.ceil(
            (rateLimitInfo.resetTime - Date.now()) / 1000,
          ).toString(),
          ...createRateLimitHeaders(rateLimitInfo, "chat"),
        },
      },
    );
  }

  // 2. Increment rate limit counter
  incrementRateLimit(clientIP);

  try {
    // 3. Check request size
    const contentLength = req.headers.get("content-length");
    if (contentLength && parseInt(contentLength) > MAX_BODY_SIZE) {
      return new Response(JSON.stringify({ error: "Request body too large" }), {
        status: 413,
        headers: { "Content-Type": "application/json" },
      });
    }

    // 4. Parse and validate inputs
    const body = await req.json();
    const { messages, model, options } = body;

    // Validate model
    const modelValidation = validateModel(model);
    if (!modelValidation.valid) {
      return new Response(JSON.stringify({ error: modelValidation.error }), {
        status: 400,
        headers: { "Content-Type": "application/json" },
      });
    }

    // Validate messages
    const messagesValidation = validateMessages(messages);
    if (!messagesValidation.valid) {
      return new Response(JSON.stringify({ error: messagesValidation.error }), {
        status: 400,
        headers: { "Content-Type": "application/json" },
      });
    }

    // Validate and constrain token parameters
    const validatedOptions = validateTokenParams(
      modelValidation.model,
      options,
    );

    // 5. Make the API call with validated parameters
    const completion = await client.chat.completions.create({
      model: modelValidation.model,
      messages: messagesValidation.messages,
      temperature: validatedOptions.temperature,
      max_tokens: validatedOptions.max_tokens,
      // ... other validated parameters
    });

    return new Response(
      JSON.stringify({ content: completion.choices[0].message.content }),
      {
        status: 200,
        headers: { "Content-Type": "application/json" },
      },
    );
  } catch (error) {
    // Log internally but don't expose details to client
    console.error("API Error:", { message: error.message, clientIP });

    return new Response(
      JSON.stringify({ error: "An error occurred. Please try again." }),
      { status: 500, headers: { "Content-Type": "application/json" } },
    );
  }
}

6. Server-Side Authentication

Client-side authentication is inherently insecure — any password stored in localStorage or exposed via NEXT_PUBLIC_ environment variables can be easily bypassed.

We implemented server-side authentication with HTTP-only cookies:

// src/app/api/auth/route.js

import { cookies } from "next/headers";
import crypto from "crypto";
import {
  getClientIP,
  recordFailedAuthAttempt,
  resetFailedAuthAttempts,
  blockedIPs,
} from "@/lib/security";

const SESSION_VALIDITY_MS = 24 * 60 * 60 * 1000; // 24 hours
const sessions = new Map(); // Use Redis in production

export async function POST(req) {
  const clientIP = getClientIP(req);

  // Check if IP is blocked
  if (blockedIPs.has(clientIP)) {
    return new Response(
      JSON.stringify({ error: "Your IP has been temporarily blocked." }),
      { status: 429, headers: { "Content-Type": "application/json" } },
    );
  }

  const { password } = await req.json();

  // Use server-side password (not exposed to client)
  const correctPassword = process.env.SITE_PASSWORD;

  if (password === correctPassword) {
    // Reset failed attempts
    resetFailedAuthAttempts(clientIP);

    // Create session
    const sessionToken = crypto.randomBytes(32).toString("hex");
    sessions.set(sessionToken, { createdAt: Date.now(), ip: clientIP });

    // Set secure HTTP-only cookie
    const cookieStore = await cookies();
    cookieStore.set("session_token", sessionToken, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: "strict",
      maxAge: SESSION_VALIDITY_MS / 1000,
      path: "/",
    });

    return new Response(JSON.stringify({ success: true }), {
      status: 200,
      headers: { "Content-Type": "application/json" },
    });
  } else {
    // Record failed attempt (blocks IP after 5 failures)
    const isBlocked = recordFailedAuthAttempt(clientIP);

    return new Response(
      JSON.stringify({ error: "Invalid credentials", blocked: isBlocked }),
      { status: 401, headers: { "Content-Type": "application/json" } },
    );
  }
}

Key Security Features:

Password is stored server-side only (SITE_PASSWORD), not exposed to client
HTTP-only cookies prevent JavaScript access (XSS protection)
Brute force protection with IP blocking
Session tokens are cryptographically random

7. Content Security Policy and Security Headers

Security headers provide an additional layer of protection against common web vulnerabilities:

// next.config.mjs

const nextConfig = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          // Prevent clickjacking
          { key: "X-Frame-Options", value: "SAMEORIGIN" },

          // Prevent MIME type sniffing
          { key: "X-Content-Type-Options", value: "nosniff" },

          // Enable XSS filter
          { key: "X-XSS-Protection", value: "1; mode=block" },

          // Referrer policy
          { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },

          // Permissions policy
          {
            key: "Permissions-Policy",
            value:
              "camera=(), microphone=(), geolocation=(), payment=(), usb=()",
          },

          // Content Security Policy
          {
            key: "Content-Security-Policy",
            value: [
              "default-src 'self'",
              "script-src 'self' 'unsafe-inline' https://www.googletagmanager.com",
              "style-src 'self' 'unsafe-inline'",
              "img-src 'self' data: blob: https:",
              "connect-src 'self' https://api.friendli.ai",
              "frame-ancestors 'self'",
              "form-action 'self'",
              "object-src 'none'",
            ].join("; "),
          },
        ],
      },
    ];
  },
};

8. Secure Error Handling

How you handle errors can expose or protect your application. Never expose internal details to clients:

// Good: Generic error messages
return new Response(
  JSON.stringify({ error: "An error occurred. Please try again." }),
  { status: 500 },
);

// Bad: Exposing internal details
return new Response(
  JSON.stringify({ error: `Database connection failed: ${error.message}` }),
  { status: 500 },
);

Always log detailed errors server-side for debugging while returning generic messages to clients.

Security Checklist for LLM Applications

Here's a quick checklist you can use when securing your AI-powered application:

API Security

[ ] Implement rate limiting per IP/user
[ ] Validate all inputs server-side
[ ] Whitelist allowed models
[ ] Enforce token limits server-side
[ ] Limit request body size
[ ] Use secure error handling (no internal details exposed)

Authentication

[ ] Use server-side authentication
[ ] Store passwords securely (not in client-side code)
[ ] Use HTTP-only cookies for sessions
[ ] Implement brute force protection
[ ] Set session expiration times

Headers & CSP

[ ] Set X-Frame-Options
[ ] Set X-Content-Type-Options
[ ] Set Content-Security-Policy
[ ] Set Referrer-Policy
[ ] Set Permissions-Policy

Monitoring

[ ] Log security events (failed auth, rate limits, suspicious patterns)
[ ] Set up alerts for anomalies
[ ] Monitor API usage and costs

Production Considerations

[ ] Use Redis for distributed rate limiting
[ ] Use a database for session management
[ ] Consider adding CAPTCHA for authentication
[ ] Implement API key authentication for additional security

Conclusion

Securing AI-powered applications requires a defense-in-depth approach. The strategies I've shared — rate limiting, input validation, prompt injection detection, parameter enforcement, server-side authentication, and security headers — work together to create multiple layers of protection.

The threat landscape for LLM applications is still evolving. As new attack vectors emerge, it's essential to stay informed, regularly audit your security measures, and be prepared to adapt.

Remember: Security is not a one-time implementation but an ongoing process. Start with these fundamentals, monitor your application for anomalies, and continuously improve your defenses.

If you found this article helpful, check out Promptimizer to see these security measures in action. Feel free to reach out with questions or share your own experiences securing AI applications!

#Security #AI #LLM #WebSecurity #NextJS #PromptEngineering #Cybersecurity #ApplicationSecurity

Author: Jaber Said

I Stopped Writing Prompts as Plain Text — Here's What I Do Instead

Jaber-Said — Fri, 13 Feb 2026 15:16:14 +0000

I've been doing a lot of prompt engineering lately, and I hit a wall that I think many developers will recognize.
My prompts started looking like messy config files. A system role at the top, then task instructions, then constraints, then output formatting rules, then few-shot examples. Every time I wanted to test a small change — like swapping the persona or adjusting one constraint — I was duplicating the entire prompt and carefully editing one section. It felt like editing a monolithic codebase with no modules.
So I started thinking about prompts the way we think about code: modular, composable, reusable.
What if each section of a prompt was an independent block? What if you could toggle a block on or off to A/B test its impact? What if your "output format" block could be shared across 20 different prompts?
That idea turned into a tool I've been building called Prompt Builder. It's a block-based editor where prompts are assembled from draggable, reusable components instead of written as a wall of text.
I'm curious whether other devs have felt this friction or if I'm solving a problem that only exists at a certain scale of prompt complexity. What does your prompt workflow look like?

promptengineering #ai #productivity #webdev

Bring Your Website to Life: A Complete Guide to Animated Icons and Motion Effects

Jaber-Said — Thu, 22 Jan 2026 23:36:18 +0000

Transform static interfaces into engaging, memorable experiences with the magic of motion.

Every great website tells a story, but the truly memorable ones make you feel something. They don't just display content—they breathe, move, and respond. The secret? Thoughtful animation and motion design.

If you've ever landed on a website and thought, "This feels alive," chances are animated icons and subtle motion effects played a significant role. These micro-interactions create a sense of polish and professionalism that static designs simply cannot achieve. In this guide, I'll walk you through why animated icons matter, where to find the best resources, and how to implement them in your projects—regardless of which framework you're using.

Why Animation Matters More Than You Think

Animation isn't just decoration. When done right, it serves critical purposes in user experience design. Motion guides attention, helping users understand where to look and what actions to take. It provides feedback, confirming that a button was clicked or a form was submitted. It creates continuity between states, making transitions feel natural rather than jarring. And perhaps most importantly, it injects personality into your brand, transforming a forgettable interface into something distinctly yours.

Consider a simple loading indicator. A static spinner tells users to wait, but an elegantly animated icon tells them the system is actively working on their request. That subtle difference builds trust and reduces perceived wait times. The same principle applies throughout your interface—every animated element is an opportunity to communicate care and attention to detail.

The Best Resources for Animated Icons

Finding high-quality animated icons used to require either significant design skills or expensive licenses. Today, the ecosystem has exploded with incredible free and premium options. Here are the resources I personally rely on for projects.

General Purpose Animation Libraries

Lucide Animated at lucide-animated.com offers a beautifully crafted collection of animated icons based on the popular Lucide icon set. These are lightweight, customizable, and perfect for modern web applications. The animations feel intentional rather than gratuitous, which is exactly what you want for professional projects.

Animate UI provides comprehensive documentation and examples at animate-ui.com/docs/icons. What sets this resource apart is its focus on integration—you'll find clear guidance on implementing these animations within component-based architectures.

LordIcon at lordicon.com/icons/system/regular has been a go-to resource for years. Their icons come with multiple animation styles for each design, allowing you to choose between subtle hover effects and more elaborate triggered animations. The system regular collection alone covers most common interface needs.

AnimatedIcons.co offers a minimalistic collection at animatedicons.co/icons/minimalistic?type=free. If your design aesthetic leans toward clean and simple, these icons will feel right at home. Their free tier is generous enough for most projects.

Icons8 at icons8.com/icons/all provides an enormous library that extends far beyond animated options. When you need variety and scale, this is where you'll find it. Their search and filtering tools make finding exactly what you need surprisingly painless.

UseAnimations invites you to explore their collection at useanimations.com/#explore. These Lottie-based animations are particularly smooth and render beautifully across devices. The interactive preview makes it easy to evaluate each icon before committing.

Framework-Specific Solutions

Modern web development often means working within specific frameworks, and animated icon support varies significantly between them. Fortunately, dedicated resources exist for each major ecosystem.

Svelte developers should explore movingicons.dev, which provides animated icons designed specifically for Svelte's reactive paradigm. The integration feels native, and the performance overhead is minimal.

Vue.js projects benefit from the collection at imfenghuang.github.io/icons. These icons slot seamlessly into Vue's component model, complete with props for controlling animation states and timing.

Angular applications can leverage the icons at icons.ajitpanigrahi.com. Angular's particular approach to change detection and rendering is accounted for, ensuring animations perform well even in complex applications.

Flutter developers haven't been forgotten either. The flutter_lucide_animated package on pub.dev brings the Lucide animated icons to mobile and desktop Flutter applications with full platform optimization.

Implementation Best Practices

Having access to great animated icons is only half the battle. How you implement them determines whether your site feels polished or chaotic. Start by establishing an animation budget—not every icon needs to animate, and overusing motion can overwhelm users or harm performance. Reserve animations for moments that genuinely benefit from them, such as state changes, loading indicators, and interactive feedback.

Consider timing carefully. Most interface animations should complete within 200 to 500 milliseconds. Faster than that feels abrupt; slower feels sluggish. Match your animation timing to the action's importance—a page transition might warrant a longer, more elaborate animation, while a button hover should be nearly instantaneous.

Respect user preferences by implementing the prefers-reduced-motion media query. Some users experience motion sickness or simply find animations distracting. Providing a reduced-motion alternative isn't just thoughtful—it's increasingly expected and may be required for accessibility compliance in some contexts.

The Magic Touch

There's something almost magical about a website that responds to your every action with graceful, purposeful motion. It creates an emotional connection that static designs struggle to achieve. The resources I've shared here give you everything you need to bring that magic to your own projects.

Start small. Add an animated icon to your navigation or incorporate a subtle loading animation. Notice how it changes the feel of your interface. Then build from there, always asking whether each animation serves the user or merely serves your desire to show off. The best animated interfaces feel inevitable—so natural that users would miss them if they were gone.

Your website deserves to breathe. These tools will help you give it life.

Happy animating! If you found this guide helpful, consider bookmarking these resources and sharing with other developers looking to elevate their interfaces.

Jaber Said

Where AI Is Actually Taking Software Development Careers

Jaber-Said — Mon, 12 Jan 2026 02:43:40 +0000

The real story is messier—and more interesting—than "robots taking our jobs"

If you've spent any time on tech Twitter or LinkedIn lately, you've probably seen two equally confident camps: one insisting AI will replace most developers within five years, the other dismissing the whole thing as hype. Both are wrong, and the emerging research tells a more nuanced story worth understanding.

I've been digging through the latest evidence—randomized trials, labor market data, developer surveys, and productivity studies—to get a clearer picture of where things actually stand as of early 2026. Here's what I found.

The Core Insight: It's About Task Shifts, Not Job Elimination

A software engineering role isn't a single thing. It's a bundle of tasks: writing boilerplate, debugging, designing systems, reviewing code, responding to incidents, aligning with stakeholders. AI doesn't uniformly affect all of these. It compresses some dramatically while elevating the importance of others.

The pattern that keeps emerging: as generation gets easier, verification becomes the bottleneck.

This matters because it changes what makes an engineer valuable. The ability to produce a first draft of code quickly is becoming commoditized. The ability to know whether that code is correct, secure, maintainable, and aligned with business goals? That's becoming the scarce resource.

What the Research Actually Shows

Here's where things get interesting—and complicated.

Productivity gains are real but context-dependent. OECD reviews of experimental studies report gains ranging from around 5% to over 25%, depending on the task and setting. That sounds great until you see the caveats.

The METR randomized trial flipped the script. Researchers studied experienced open-source developers working on issues in their own repositories—not artificial tasks, but real work on codebases they knew well. The result? Developers using early-2025 AI tools were approximately 19% slower than those without them. Even more striking: the developers themselves believed they were faster.

This isn't necessarily a contradiction. It suggests that AI tools excel at certain task types (greenfield code, unfamiliar domains, boilerplate) while potentially adding friction in others (complex debugging, deeply familiar codebases, nuanced refactoring). Context matters enormously.

Verification debt is becoming a recognized risk category. A widely-covered January 2026 survey found that many developers don't always verify AI-generated code before committing it—even while expressing low trust in that code's correctness. This is how technical debt accumulates at scale. Organizations are producing code faster than they can confidently validate it.

The Labor Market Signals

The Federal Reserve Bank of Dallas published research in early January 2026 showing that young workers' employment has dropped in occupations with high AI exposure. Meanwhile, experienced engineers who can own systems end-to-end—design, ship, operate, govern—are often seeing their leverage increase as raw output becomes cheaper.

This creates a potential squeeze: entry-level pathways may tighten in some segments as teams use AI to raise baseline expectations, while senior roles that require judgment and accountability become more valuable.

What Actually Determines Whether AI Helps or Hurts Your Career

Several variables will shape how this plays out for individual engineers:

Demand expansion versus efficiency capture. If AI lowers the cost of building software enough, more software gets built—that's a tailwind for the profession. But in cost-cutting cycles, companies might deliver the same roadmap with fewer hires. Both dynamics can coexist across different market segments.

Tooling maturity. We're moving from copilots to more agentic workflows. This shifts value toward orchestration, guardrails, and monitoring—roles that didn't exist five years ago.

Governance and regulation. Security incidents, IP concerns, and regulatory attention can slow adoption in some areas while increasing demand for compliance-ready engineering in others.

Verification capacity. Organizations with strong testing discipline, code review culture, evaluation harnesses, and observability infrastructure will capture more value from AI speed than those without.

Three Plausible Scenarios for 2026–2028

Scenario A: Augmentation dominates. AI assists most development steps, but humans remain firmly in the loop for judgment, integration, and accountability. The profession expands as software becomes cheaper to build.

Scenario B: Efficiency wave tightens entry. Teams raise baseline productivity expectations and reduce junior hiring in certain segments. Mid-to-senior engineers benefit; career ladders become harder to climb from the bottom.

Scenario C: Governance backlash. High-profile security or IP incidents trigger increased controls. Demand grows for engineers who specialize in secure development lifecycles, auditability, and private AI deployment patterns.

None of these are mutually exclusive. Different industries, companies, and geographies will likely experience different mixes.

Career Moves That Work Across Scenarios

After reviewing all of this, a few strategies seem robustly valuable regardless of which scenario dominates:

Become AI-native and verification-native. Use the tools for speed, then systematically validate with tests, reviews, security checks, and evaluations. Both halves matter.

Move up the stack. Architecture decisions, reliability engineering, cost and performance optimization, and domain-specific constraints remain scarce skills that AI assists but doesn't replace.

Own outcomes, not output. Measure your value by time-to-impact, incident rate, and maintainability—not lines of code or pull requests merged.

Learn the emerging bottleneck roles. Platform engineering, developer experience, security engineering, data governance, and AI product engineering are all areas where demand seems likely to grow as AI reshapes workflows.

The Bottom Line

The most useful mental model isn't "AI will replace developers" or "AI is just hype." It's this: AI is reshaping the task portfolio of software engineering faster than job descriptions or hiring practices have adapted.

The skills that got you here may not be the skills that keep you relevant. But the skills that will matter—judgment, verification, systems thinking, ownership of outcomes—are learnable. They're also, for now, distinctly human.

The engineers who thrive will be the ones who treat AI as a tool for leverage rather than a threat to resist or a magic wand to trust blindly. That's always been true of every powerful technology. This one just moves faster.

Research sources reviewed for this analysis include studies and data from METR, OECD, DORA/Google Cloud, Stack Overflow's 2025 Developer Survey, the Federal Reserve Bank of Dallas, the U.S. Bureau of Labor Statistics, and the World Economic Forum's Future of Jobs Report 2025.

Jaber Said

🚀 I Built a Block-Based AI Prompt Builder with Next.js and Supabase - Here's What I Learned

Jaber-Said — Wed, 01 Oct 2025 14:57:53 +0000

The Problem That Started It All
If you're like me, you've probably got AI prompts scattered across:

Random text files
Notion pages
Apple Notes
That one Google Doc from 3 months ago
Slack DMs to yourself

And every time you need to tweak a prompt, you're playing copy-paste gymnastics, losing track of what worked and what didn't.
So I built Prompt Builder - a block-based workspace for composing, organizing, and sharing AI prompts. Think of it as Notion blocks meet prompt engineering.
🎯 What It Does
Instead of managing prompts as walls of text, you build them from draggable blocks:
[Block 1: Context] → [Block 2: Instructions] → [Block 3: Examples] → [Block 4: Output Format]

Each block has its own controls:

👁️ Toggle visibility (test variations without deleting)
🏷️ Wrap with custom tags
🎙️ Voice input with transcription
📋 Individual copy/paste/clear

The killer feature? Live preview shows your combined prompt in real-time with character count.
🛠️ The Tech Stack
Here's what powers it:

`// Core Stack

Next.js 14 (App Router)
Supabase (Database + Auth)
Stripe (Payments)
Tailwind CSS + shadcn/ui

// State Management

Zustand (Editor state)
TanStack Query (Server state)

// Key Libraries

@dnd-kit (Drag & drop)
react-textarea-autosize (Auto-expanding textareas)
sonner (Notifications)
next-themes (Dark mode)`

🏗️ Architecture Decisions

Block Storage Strategy I store blocks as JSONB in Supabase for maximum flexibility: CREATE TABLE prompts ( id UUID PRIMARY KEY, user_id UUID REFERENCES auth.users, name TEXT, blocks JSONB, created_at TIMESTAMPTZ );
Share Links Without Auth Users can share prompts instantly without signing up. I generate unique IDs with nanoid and store them in a public table:

// Generate shareable link const shareId = nanoid(10); await supabase .from('shared_prompts') .insert({ id: shareId, content: blocks, expires_at: proUser ? expiryDate : null });

Real-time Preview Performance Instead of re-rendering everything on each keystroke, I use:

React.memo on block components
Debounced preview updates
Virtualization for long block lists with @tanstack/react-virtual

💡 Cool Features I'm Proud Of
Voice Input with Translation (Pro)
// Simplified implementation const transcript = await speechToText(audioBlob, sourceLanguage); const translated = proUser ? await translateText(transcript, targetLanguage) : transcript; updateBlockContent(blockId, translated);

Drag & Drop with @dnd-kit
<DndContext onDragEnd={handleDragEnd}> <SortableContext items={blocks}> {blocks.map(block => ( <SortableBlock key={block.id} {...block} /> ))} </SortableContext> </DndContext>
Variables System (Pro)
Users can create reusable templates with variables:
Hello {{name}}, regarding {{topic}}...

📊 Current Status

✅ MVP launched at promptbuilder.space
🎉 No signup required to test
💰 Free tier: 3 prompts, 5 blocks/prompt, 10 share links
🚀 Pro unlocks: unlimited everything + exports + custom tags + variables

🤔 Lessons Learned

Start with sharing: Making sharing work without auth was complex but worth it for adoption
JSONB is your friend: For flexible content structures, JSONB beats normalized tables
Preview performance matters: Users expect instant feedback - optimize aggressively
Stripe is still king: For SaaS billing, nothing beats Stripe's developer experience

🎯 What's Next?

Team workspaces
Prompt marketplace
API access
Chrome extension
More AI model integrations

💭 Question for the Community
What features would make YOU switch from your current prompt management solution?
I'm especially curious about:

Export formats you'd want
Collaboration features
Integration needs

Try it out (no signup needed): promptbuilder.space
Drop your thoughts below or roast my implementation choices - I'm here for all of it! 🔥

P.S. - If you're building something similar or want to chat about the technical decisions, my DMs are open!

"You are no longer limited by what you know; rather, you are only limited by what you can think to ask."

Jaber-Said — Mon, 25 Aug 2025 18:27:30 +0000

"You are no longer limited by what you know; rather, you are only limited by what you can think to ask."

This quote perfectly captures the seismic shift we're experiencing as software engineers in the age of AI. 🚀 For generations, our value was deeply rooted in the knowledge we held—mastery of languages, frameworks, and algorithms. But with powerful language models at our fingertips, the game has fundamentally changed.

Think about it: the entire repository of human knowledge is now accessible through a simple prompt. The bottleneck is no longer a lack of information, but a lack of imagination. AI is poised to significantly change the role of software engineers, automating mundane tasks and allowing us to focus on more complex and creative work.[1] This elevates our role from implementers to architects and problem-solvers, using AI as a tool to streamline our tasks.

This transformation is leading to faster development cycles, higher-quality software, and more time for innovation. By automating routine tasks, AI boosts productivity and frees us up to focus on higher-level problem-solving, like architectural planning and strategic decision-making.

Of course, this doesn't mean our technical skills are obsolete. On the contrary, finding the right balance between leveraging AI tools and maintaining our core technical competencies is essential. However, the emphasis is shifting from rote memorization to creative problem-solving and, most importantly, the art of asking the right questions. The ability to craft effective prompts is key to unlocking the full potential of AI.

So, I leave you with this question: What is the most creative or complex question you've asked an AI that has unlocked a truly innovative solution? 🤔

Jaber Said

hashtag#AI hashtag#SoftwareEngineering hashtag#FutureOfTech hashtag#LanguageModels hashtag#Innovation

Future of Tech Jobs: Key Insights from the 2025 WEF Report

Jaber-Said — Thu, 20 Mar 2025 06:43:23 +0000

🚀 Future of Tech Jobs: Key Insights from the 2025 WEF Report 🚀

The Future of Jobs Report 2025 by the World Economic Forum outlines transformative trends reshaping the tech landscape. Here’s what technical professionals need to know:

🔥 Top Trends Impacting Tech Roles
AI & Automation Dominate:

86% of employers say AI and information processing technologies will transform businesses by 2030.

Fastest-growing roles: AI/ML Specialists, Big Data Engineers, Cybersecurity Experts, and Software Developers.

Declining roles: Data Entry Clerks, Administrative Assistants, and legacy IT support roles.

Human-Machine Collaboration:

By 2030, tasks will be nearly evenly split between humans, machines, and hybrid collaboration.

Focus on augmentation (enhancing human skills) over outright replacement.

Skills in Demand:

Technical: AI/ML, cybersecurity, IoT, blockchain, and quantum computing.

Human-Centric: Resilience, creative thinking, and systems thinking.

📈 Critical Skills to Future-Proof Your Career
Top 3 Fastest-Growing Skills:

AI & Big Data

Networks & Cybersecurity

Technological Literacy

Soft Skills:

Leadership, adaptability, and curiosity are now non-negotiable for tech leaders.
🌱 Green Tech & Sustainability
Roles like Renewable Energy Engineers and Environmental Data Scientists are surging.

Demand for environmental stewardship skills enters the top 10 for the first time.

💡 Actionable Takeaways
Upskill Relentlessly: 59% of workers globally will need reskilling by 2030. Prioritize certifications in AI, cloud, and cybersecurity.

Embrace Hybrid Roles: Combine technical expertise with cross-disciplinary skills (e.g., AI ethics, sustainable tech).

Leverage DEI: Companies with diverse teams are 4x more likely to tap into new talent pools.

🔗 Stay Ahead:
Dive into emerging tools like GenAI (prompt engineering, AI-augmented coding) and decentralized systems.

👉 Question for You: Which skill are you prioritizing to stay competitive in the next 5 years?

FutureOfWork #AI #TechCareers #Cybersecurity #MachineLearning #Innovation

(Source: World Economic Forum, Future of Jobs Report 2025)

Jaber Said

https://www.weforum.org/publications/the-future-of-jobs-report-2025/

Enhancing AI Model Outcomes Through Dynamic Chain-of-Thought Framework: A Systematic Approach

Jaber-Said — Tue, 29 Oct 2024 23:04:26 +0000

Dynamic Problem Solving Framework to Improve Model Outcomes (COT)

Executive Summary

The Dynamic Problem-Solving Framework presents an innovative approach to improving AI model outcomes through structured thinking and systematic evaluation. This framework implements Chain-of-Thought (CoT) methodology, enhanced with dynamic reflection mechanisms and quality metrics, to achieve more reliable and accurate problem-solving results.

Introduction

In the evolving landscape of AI and machine learning, the quality of model outputs heavily depends on the framework used to guide their thinking process. This repository introduces a comprehensive framework that combines structured problem-solving with continuous evaluation and adaptation mechanisms.

Key Features

Structured Thinking Process

Implements tagged sections for organized thought progression.
Utilizes a 20-step budget system for efficient problem management.
Incorporates formal mathematical notation when needed.

Dynamic Evaluation System

Real-time quality scoring (0.0-1.0).
Immediate feedback loops for approach adjustment.
Systematic reflection points throughout the process.

Adaptive Problem-Solving

Flexible backtracking mechanisms.
Multiple solution exploration.
Continuous approach refinement.

Technical Implementation

The framework employs XML-style tags for different aspects of the problem-solving process:

<thinking> for initial problem analysis.
<step> for sequential solution development.
<reflect> for progress evaluation.
<reward> for quality scoring.
<verify> and <confirm> for solution validation.

Applications and Benefits

Enhanced accuracy in complex problem-solving.
Improved transparency in decision-making processes.
Systematic approach to solution verification.
Adaptable to various domains and problem types.

Conclusion

This framework represents a significant advancement in structured problem-solving methodologies, offering a robust approach to improving AI model outcomes through systematic thinking and continuous evaluation.

Getting Started

Visit the repository at GitHub Repository to explore the implementation details and documentation.

Fortifying Your Digital Fortress: The Art of API Security

Jaber-Said — Thu, 18 Jul 2024 14:39:49 +0000

In the ever-evolving landscape of web development, APIs serve as the vital bridges connecting different software systems. But as these bridges become more crucial, they also become prime targets for cyber attacks. Welcome to the world of API security – where vigilance meets innovation in the quest to protect our digital ecosystems.

The HTTPS Revolution: Encryption on the Move

Imagine sending a postcard with your bank details versus a sealed, tamper-proof envelope. That's the difference between HTTP and HTTPS. By implementing HTTPS, we encrypt data in transit, turning our API communications into those secure envelopes. It's not just a good practice; it's the foundation of API security.

// Express.js HTTPS setup 

const https = require('https'); 
const fs = require('fs');

const options = { 
      key: fs.readFileSync('path/to/key.pem'), 
      cert: fs.readFileSync('path/to/cert.pem')
       };`

https.createServer(options, app).listen(443);

Authentication: The Digital Bouncer

Think of authentication as the bouncer at an exclusive club. JSON Web Tokens (JWTs) have become the VIP passes of the API world. They're compact, self-contained, and can carry a wealth of user information securely.4


const jwt = require('jsonwebtoken');

app.post('/login', (req, res) => { 
        // Verify user credentials 
     const token = jwt.sign({ userId: user.id }, 'your-secret-key', { expiresIn: '1h' });       res.json({ token });
 });

Authorization: The Velvet Rope of Access Control

Once inside the club, authorization determines which areas you can access. Role-Based Access Control (RBAC) is like having different colored wristbands at a festival – each color grants access to different stages.

function checkRole(role) { 
   return (req, res, next) => { 
       if (req.user.role !== role) { 
           return res.status(403).send('Access denied'); 
       } next(); 
       } 
}

app.get('/vip-area', checkRole('vip'), (req, res) => { 
    res.send('Welcome to the VIP area!'); 
});

Input Validation: The Art of Paranoia

In the world of APIs, trust no one. Every input is a potential threat. Input validation is like having a meticulous inspector checking every package before it enters your system.

const { body, validationResult } = require('express-validator');

app.post('/user', [
      body('username').isLength({ min: 5 }).withMessage('Username must be at least 5 characters long'), 
          body('email').isEmail().withMessage('Invalid email format'), 
], (req, res) => { 
     const errors = validationResult(req); 
     if (!errors.isEmpty()) {
         return res.status(400).json({ errors: errors.array() }); 
       } 
 // Process valid input 
});

Rate Limiting: The Traffic Controller

Imagine if everyone tried to enter a store at once during a sale. Chaos, right? Rate limiting is your digital crowd control, ensuring your API doesn't get overwhelmed by too many requests.

`const rateLimit = require("express-rate-limit");

const apiLimiter = rateLimit({
windowMs: 15 60 1000, // 15 minutes
max: 100, // limit each IP to 100 requests per windowMs
message: "Too many requests, please try again later."
});

app.use("/api/", apiLimiter);`

Logging and Monitoring: The Watchful Eye

In the realm of API security, knowledge is power. Comprehensive logging and monitoring are like having a team of vigilant security cameras and alert guards, always watching for suspicious activity.

const winston = require('winston');

const logger = winston.createLogger({ 
   level: 'info', 
     format: winston.format.json(), 
   transports: [ 
      new winston.transports.File({ filename: 'error.log', level: 'error' }), 
      new winston.transports.Console({ format: winston.format.simple() }) 
    ] 
});

app.use((req, res, next) => {
   logger.info(${req.method} ${req.url}); 
    next();
 });

Conclusion: The Never-Ending Battle

Securing an API is not a one-time task but an ongoing process. It's a chess game where the pieces are constantly evolving. By implementing these security measures, you're not just protecting data; you're safeguarding trust, ensuring privacy, and fortifying the foundations of our interconnected digital world.

Remember, in the realm of API security, paranoia is not just acceptable – it's essential. Stay vigilant, stay updated, and may your APIs be forever unbreached!

Jaber Said

Understanding Command Line Execution and Environment Configuration

Jaber-Said — Mon, 15 Jul 2024 07:52:40 +0000

Introduction

In the world of software development, the command line is a powerful tool that allows developers to execute scripts, run programs, and manage files and processes efficiently. One of the common challenges encountered by developers, especially when working with multiple programming languages and tools, is understanding how to correctly execute commands and configure the environment for smooth operations. This article delves into the mechanics of command line execution, focusing on the differences between using the Python module system and directly invoking executables, and provides insights into environment configuration.

Command Line Basics

The command line, also known as the terminal or shell, is an interface where users can type commands to perform specific tasks. Commands are typically executed in a sequence, where each command is interpreted and executed by the shell. For example, in a Windows environment, the Command Prompt or PowerShell can be used, while macOS and Linux users often use the Terminal.

Executing Python Modules

Python is a versatile programming language that allows for modular programming. Python scripts and modules can be executed directly from the command line using the Python interpreter. A common command to run a Python script is:

python script.py

However, Python also allows the execution of modules using the -m flag:

python -m module_name

or using the Python launcher in Windows:

py -m module_name

Why Use -m to Run Modules?

When you use the -m flag, Python locates the specified module in the Python environment and runs it as a script. This method has several advantages:

Module Lookup: Python searches for the module in the standard library and installed packages, ensuring the correct module is executed.

Environment Management: It uses the current Python environment, respecting virtual environments and avoiding conflicts with other Python installations.

Convenience: It simplifies running modules that are not standalone scripts, leveraging Python’s module system for execution.

Direct Command Execution

Directly executing a command, such as running an executable file, requires the command to be recognized by the operating system. For example:

aider --model gemini/gemini-1.5-pro-latest --browser

If the shell responds with:

'aider' is not recognized as an internal or external command, operable program or batch file.

it means the executable is not found in the system’s PATH.

Understanding PATH

The PATH is an environment variable that tells the operating system where to look for executable files. When you type a command, the shell searches the directories listed in the PATH variable to find the corresponding executable.

Configuring PATH

To ensure an executable can be run from any location in the command line, its directory must be added to the PATH. Here’s how to add a directory to the PATH in Windows:

Open Environment Variables: Search for "Edit the system environment variables" in the Start menu and open it.

Access PATH Variable: In the System Properties window, click on "Environment Variables". Under "System variables", find and select the PATH variable, then click "Edit".

Add Directory: Click "New" and add the directory where the executable is located. Click "OK" to save the changes.

Best Practices for Command Line Execution

Use Virtual Environments: When working with Python, use virtual environments to manage dependencies and avoid conflicts.

Leverage -m for Modules: Use the -m flag to run Python modules, ensuring the correct environment and module lookup.

Manage PATH Carefully: Regularly review and manage your PATH variable to avoid clutter and conflicts, only adding necessary directories.

Consistency: Maintain consistency in your command line practices to streamline workflows and reduce errors.

Conclusion

Understanding how the command line executes commands and how environment variables like PATH influence this process is crucial for efficient software development. Using the -m flag to run Python modules and properly configuring the PATH can save time and prevent common issues. By adopting these best practices, developers can enhance their productivity and maintain cleaner, more manageable development environments.

Jaber Said

Muslim Prayer Times Extension for Visual Studio Code

Jaber-Said — Sat, 13 Jul 2024 12:48:53 +0000

Introducing the Muslim Prayer Times Extension for Visual Studio Code
Are you a Muslim developer looking to stay on top of your prayer times while coding? We've got great news for you! The Muslim Prayer Times extension for Visual Studio Code is here to help you balance your work and religious obligations seamlessly.
This powerful extension brings prayer time reminders directly into your coding environment, ensuring you never miss a prayer while immersed in your projects. Here's what makes it special:

Location-based accuracy: Get precise prayer times based on your exact location.
At-a-glance information: View prayer times and countdown to the next prayer right in your VS Code sidebar.
Customizable notifications: Receive gentle reminders when it's time to pray.
Azan sound option: Enable the beautiful call to prayer sound for a more immersive experience.
Flexible time formats: Choose between 12-hour and 24-hour displays to suit your preference.
Language options: View prayer names in your preferred language.
Easy setup: Simple configuration allows you to set your location and preferences quickly.

Whether you're working on a complex project or debugging code, this extension ensures that your spiritual well-being remains a priority. It's the perfect tool for Muslim developers who want to maintain their prayer schedule without interrupting their workflow.
Ready to enhance your coding and spiritual experience? Install the Muslim Prayer Times extension for Visual Studio Code today and bring harmony to your development process!

https://marketplace.visualstudio.com/items?itemName=JaberSaid.muslim-prayer-times

MuslimDevelopers #VSCode #PrayerTimes #ProductivityTools

Jaber Said