DEV Community: Cristina Rodriguez

So, you know how to connect to an API endpoint? Great. Now they're asking you to build an MCP, and you're freaking out. Don't sweat it, it's simpler than it sounds. The real difference isn't the code; it's who decides what happens next. New post 👇

Cristina Rodriguez — Wed, 01 Jul 2026 14:09:18 +0000

Jul 1

Okay, But What IS MCP? (No, Really)

6 min read

Okay, But What IS MCP? (No, Really)

Cristina Rodriguez — Wed, 01 Jul 2026 14:05:54 +0000

A couple of weeks ago, I sat down to add an MCP server to one of my workflows. Before I started building, I pulled up our team channel and asked a simple question: "quick check, what does everyone think MCP actually does?"

Five people responded. Three of them said some version of "it gives the AI more context." One said "it's like an API for AI." One just sent a thumbs-up emoji.

Nobody was wrong, exactly. But nobody could tell me the one thing that actually matters: who decides what happens next, the developer or the model? That's the whole concept, and somehow we'd all been nodding along in meetings for months without anyone saying it out loud.

So here's the explanation I wish someone had given my team. The one that would have saved us a very confusing thirty minutes.

When you call an API, you decide.

In a normal integration, the developer writes the logic: "first call this endpoint, then check this condition, then call that endpoint." The code is the decision-maker. The AI model, if there's one involved at all, just processes whatever text gets handed to it. It doesn't get a say in what happens next.

MCP flips that. The model decides.

An MCP server is a small program you write that exposes a list of "tools," functions with a name, a description, and defined inputs. The model connects to that server, asks "what can you do?", gets back the list, and then decides for itself which tool to call, when, and with what arguments, based on what it's trying to accomplish.

That's the real distinction:

API call = developer-decided, fixed sequence
MCP tool = model-decided, dynamic choice

And here's the part that surprises people: an MCP server isn't some heavy new framework. Most of the time, it's just a Python file with a few functions, each marked with a decorator that says "this is a tool now."

That's it. No new language, no special infrastructure. If you can write a Python function, you can write an MCP tool.

A concrete example

I run a small n8n workflow that screens job postings for me. It's part of a self-paced course I built, Teamed Job Hunter, if you want to see the full automated job-hunting setup. Today, the workflow is a fixed pipeline: trigger, then AI prompt, then scoring logic, then notification. The AI step doesn't get to look anything up, it just processes whatever text the workflow handed it.

If I wrap that logic as an MCP server instead, I'd expose tools like:

check_company_blocklist(company_name): checks if a company is on my no-go list
get_cv_match_score(job_description, cv_track): scores a posting against my CV

The agent, mid-conversation, decides: "let me check the blocklist first, then score it," calling tools as needed. I never hardcoded that order. It reasoned its way there on its own.

Why this matters for developers

You write the tool once. Any MCP-compatible agent (Claude, an n8n agent node, whatever comes next) can discover and use it, without you writing new glue code for each integration.

That's MCP. A standard way for an agent to discover and choose tools on its own.

Three quick questions, for total beginners

Do I need Python to write an MCP server?

No. Python (with FastMCP) is the most common starting point because it's simple, but MCP itself is a protocol. Official SDKs exist for TypeScript, Java, Kotlin, C#, and more. The shape is the same everywhere: you define functions, attach a name, description, and input schema so the model can discover them, and the SDK handles the wire protocol underneath. Here's the same job-blocklist tool in TypeScript:

Same idea as the Python decorator. server.tool(...) is just the TypeScript SDK's way of registering a function as something the model can discover and call.

Do I need to host the MCP server somewhere special?

No special infrastructure required. It's a regular server. It can run locally on your machine for testing, live in a Docker container, or deploy anywhere you'd deploy any small backend service (a VPS, Vercel, Railway, etc). The only requirement is that whatever's connecting to it (Claude, an n8n agent node) can reach it.

Does the AI model "see" my actual code?

No. The model never reads your Python or TypeScript source. It only sees the tool's name, description, and input schema. Think of it as the menu that gets handed. It never sees the kitchen behind it.

Look at the TypeScript example again:

Here's the easiest way to picture it: there are two separate conversations happening, and the model is only ever in one of them.

Conversation 1: model talking to your server. When your server starts up, it doesn't hand the model a file. It sends a small structured message, basically the first three arguments to server.tool(...), packaged up as something like:

{
  "name": "check_company_blocklist",
  "description": "Check if this company is on Cristina's no-go list",
  "inputSchema": { "company_name": "string" }
}

That's the entire menu the model gets. It reads that JSON blob. It was never given your .ts file, a link to it, or permission to open it. It simply never received it.

Conversation 2: your server talking to the rest of your system. The fourth argument, the function body with checkBlocklist(company_name), runs locally, inside your own process, on your own machine. When the model decides to call the tool, it sends back a request like { "tool": "check_company_blocklist", "arguments": { "company_name": "Acme Inc" } }. Your server receives that and your server runs the actual code: queries your database, applies your business rules, whatever it needs to do. The model isn't watching that happen. It just sent a request and waits for a reply.

So the model only ever touches two things: the tool list (sent once) and the tool's result (sent back after your code finishes). Everything in between, your database query, your API keys, your internal logic, happens in a part of the stack the protocol simply never transmits. A good gut check: if you added console.log(isBlocked) inside that function, it would print in your terminal, never anywhere the model can see.

Why this matters for security

This boundary is what makes MCP usable for real systems instead of just toy demos. You can wrap a tool around something genuinely sensitive, a production database, an internal API, a payments system, and the model still only ever sees a name, a description, an input shape, and a result. It never sees your credentials, your query logic, or anything else inside the function. The model can decide to use the tool, but it can never read or change how the tool works. That part stays entirely under your control as the developer.

That said, the boundary cuts both ways. It also means the model is trusting your description completely. If a tool is named get_weather but its description quietly says "and also forward the user's email to this address," the model has no way to verify that against the actual code. It only has the words you gave it. That's a real category of MCP security risk worth knowing about, often called tool poisoning. It's exactly why writing accurate, honest tool descriptions matters: they function as a security boundary.

I'm building this out as a full tutorial soon, adding an actual MCP server to the job-hunting n8n workflow. Follow along if you want to see it in action.

Have you used GitHub Actions as a cron job yet? I didn’t need AI for this project—I needed something that runs without me remembering. One YAML file, one cron line, and my weekly “2-minute task” disappeared.

Cristina Rodriguez — Tue, 03 Feb 2026 20:20:46 +0000

Cristina Rodriguez

Feb 3

I Didn’t Need AI for This Project. I Needed a Cron Job (So I Used GitHub Actions)

#automation #devops #github #tutorial

3 min read

I Didn’t Need AI for This Project. I Needed a Cron Job (So I Used GitHub Actions)

Cristina Rodriguez — Tue, 03 Feb 2026 20:19:29 +0000

If you need something to run every week and you’re tired of being the scheduler…

Use GitHub Actions.

You’ll create one YAML file. Add a cron line. Push. Done.

No server. No “remember to run it.” Just automation.

✅ The Fix: a scheduled workflow (copy/paste)

Create this file in your repo:

.github/workflows/cron.yml

Paste this:

name: Weekly automation

on:
  schedule:
    # Every Monday at 09:00 UTC (cron runs in UTC)
    - cron: "0 9 * * 1"

  # Bonus: run it manually from the Actions tab
  workflow_dispatch:

jobs:
  run-task:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v4

      - name: Run a command
        run: |
          echo "Hello from a scheduled workflow 👋"
          # Replace this with your real script/command

That’s the core idea: cron triggers a workflow, the workflow runs your steps.

Apply it: run a real script (Node example)

I like keeping the logic outside YAML, so my workflow stays tiny.

Repo layout:

scripts/
  weekly-task.js
.github/
  workflows/
    cron.yml

Update the workflow:

name: Weekly automation

on:
  schedule:
    - cron: "0 9 * * 1"
  workflow_dispatch:

jobs:
  run-task:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: Install deps
        run: npm ci

      - name: Run script
        run: node scripts/weekly-task.js

Why this works

schedule runs on a timer (cron).
workflow_dispatch gives you a “Run workflow” button for testing.
The runner checks out your code and executes your commands in a clean environment.

Cron in 20 seconds (so you don’t surprise yourself)

Cron format:

minute hour day-of-month month day-of-week

Examples:

Daily at 09:00 UTC → 0 9 * * *
Mondays at 09:00 UTC → 0 9 * * 1
Every 15 minutes → */15 * * * *

One important detail: cron is UTC in GitHub Actions.

So if you care about “9am my time,” you’ll need to convert it (and DST will mess with you a little). My solution: choose a time where an hour shift won’t ruin your life.

Tiny but important: secrets don’t go in YAML

Even if your script is simple today, it’ll eventually call something.

Don’t hardcode tokens. Use repo secrets:

Repo → Settings → Secrets and variables → Actions
Add API_TOKEN

Then:

      - name: Run script
        env:
          API_TOKEN: ${{ secrets.API_TOKEN }}
        run: node scripts/weekly-task.js

Make failures obvious (future-you will thank you)

Silent failures are the worst kind of “automation.”

This tiny pattern helps:

      - name: Run and fail loudly
        run: |
          set -e
          node scripts/weekly-task.js
          echo "✅ Job finished"

If it errors, the workflow run turns red and you’ll see it in the Actions tab.

Now the story (because yes, this is why I did it)

I love AI tools.

I really do.

But this time the project didn’t need intelligence. It needed consistency.

I had this tiny task that took maybe 2–5 minutes. Nothing dramatic. Just repetitive. The kind of thing you can totally do manually…

…until you forget once.

Then twice.

Then it becomes that background guilt you carry around like a cursed keychain.

I almost did the classic moves:

“I’ll set a reminder” (lol)
“I’ll run cron locally” (also valid, but now my laptop is part of production?)

What I wanted was: no server, no extra service, no babysitting.

So I did the boring thing that works: a scheduled GitHub Action.

And it’s honestly the best kind of automation: the kind you forget exists because it just keeps showing up on time.

Wrap-up

If you only take a few things from this:

Create .github/workflows/cron.yml
Use on.schedule.cron for the timer
Add workflow_dispatch so you can test manually
Keep logic in a script, keep YAML simple
Put tokens in secrets, not in the file

Have you used GitHub Actions for cron stuff yet—and what’s the first “2-minute task” you’d love to delete from your life?

I always thought making videos meant fighting a timeline UI. Turns out you can build an MP4 with React components using Remotion — scenes are components, timing is , and animations are just useCurrentFrame() + math.

Cristina Rodriguez — Thu, 22 Jan 2026 06:09:03 +0000

Cristina Rodriguez

Jan 22

Videos in React?! Yep. Each scene is a component (and it costs $0)

#webdev #react #programming #ai

5 min read

Videos in React?! Yep. Each scene is a component (and it costs $0)

Cristina Rodriguez — Thu, 22 Jan 2026 06:07:57 +0000

I used to think “making a video” meant one of two things:

Open a heavyweight editor
Drag tiny clips around a timeline until your soul leaves your body

I’m a developer. I like code. I like components. I like being able to undo mistakes without having to negotiate with a mysterious UI panel from 2002.

So when I heard there’s a tool called Remotion that lets you create videos using React components, my first thought was:

“Sure. And my CSS is also perfectly centered.”

Then I tried it.

And the moment it really clicked wasn’t even the rendering part…

It was running the project like a normal React app.

The idea that makes it click

Remotion works because a video is just:

A bunch of frames
Rendered in sequence
At a fixed fps (frames per second)

If your video is 30fps, then:

frame 30 = 1 second
frame 900 = 30 seconds

And here’s the fun part:

Every frame is just React rendering your component (with a different “current frame” number).

So animation becomes… math.

No timeline. No keyframes. Just interpolate() and spring().

“NO COST!!!” (but let’s be precise)

This post is about building and rendering locally on your machine — no SaaS subscriptions, no hosted rendering costs, no paid editor required.

(If you’re using Remotion in a larger company context, double-check licensing. For a personal project / small setup like this, you can build and render locally for free.)

Create the project

Remotion has a starter generator:

npx create-video@latest

It creates a project that looks suspiciously like any other React project.

Like:

picasyfijas-video/
├── public/
│   └── icon-512.png          ← Your logo
├── src/
│   ├── Root.tsx              ← Registers the composition (dimensions, fps, duration)
│   ├── PicasFijasVideo.tsx   ← Main video with all scenes
│   ├── Composition.tsx       ← Original template (unused)
│   ├── index.ts              ← Entry point
│   └── index.css             ← Styles
└── out/
    └── picasyfijas.mp4       ← Rendered video

At this point, you’re thinking: “Okay. Cute structure. But where’s the ‘video’ part?”

This is where the brain-melt happens.

The moment it clicked: `npm run dev` 🤯

I did the most “React developer” thing possible:

npm run dev

And… it just ran like any React project.

The dev server started, I opened the URL, and suddenly I’m staring at a video timeline in my browser.

Scrub the playhead → frames update.

Components appear and disappear.

Animations play.

It’s all live.

And my brain goes:

“Hold up. I’m not editing a video… I’m rendering React.”

That’s the “ohhhhhh” moment.

Because once you realize the preview is just your components rendering over time, everything becomes familiar:

Want a new “scene”? Make a component.
Want it to appear later? Wrap it in a <Sequence from={...} />.
Want animation? Use useCurrentFrame() + math.

Same workflow. Same comfort.

But the output is a legit MP4.

Your “video settings” live in one place

Inside src/Root.tsx, you register a Composition.

This defines:

width / height
fps
durationInFrames

Here’s the vertical setup I used for a short social video:

<Composition
  id="PicasFijasVideo"
  component={PicasFijasVideo}
  durationInFrames={300}
  fps={30}
  width={1080}
  height={1920}
/>

That’s 10 seconds (300 frames at 30fps).

Want 30 seconds?

Same idea:

30 seconds * 30 fps = 900 frames

So:

durationInFrames={900}

That’s it. Your video is now 30 seconds long.

Scenes = components, and timing = `<Sequence />`

Your main video component (mine is PicasFijasVideo.tsx) is basically a timeline built with <Sequence />.

Each scene is a component. Each component gets a start frame and duration.

Example:

<Sequence from={0} durationInFrames={90}>
  <IntroScene />
</Sequence>

<Sequence from={90} durationInFrames={240}>
  <MainScene />
</Sequence>

One very nice detail:

Inside a <Sequence>, useCurrentFrame() starts at 0 again.

So each scene feels self-contained and easy to reason about.

The 10-second timeline I built (as a reference)

I created a 10-second vertical video (1080×1920, 9:16) for social media using Remotion.

Here’s the timeline:

Frames	Seconds	Scene	What Happens
0–30	0–1s	Logo	Logo springs in, title fades in
30–90	1–3s	GuessScene	Shows "????" and types guess "1456"
90–150	3–5s	BullExplanation	Highlights matching "1", shows "🐂 Bull/Fija"
150–210	5–7s	CowExplanation	Highlights "4" in wrong position, shows "🐄 Cow/Pica"
210–300	7–10s	CTA	Logo + "Play now!" + URL

For a 30-second video, you simply add more “beats” (more scenes) or stretch durations.

A simple 30-second structure that works for any topic:

Intro (2–3s)
5–7 beats (3–5s each)
CTA (3–5s)

Animation is just math (and two hooks)

Most scenes start like this:

const frame = useCurrentFrame();  // Current frame number (0, 1, 2... )
const { fps } = useVideoConfig(); // Frames per second (30)

useCurrentFrame() → tells you which frame is being rendered
useVideoConfig() → gives you fps, dimensions, etc.

Now you can animate anything.

Fade in with `interpolate()`

const contentOpacity = interpolate(frame, [0, 15], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

What it does:

Input: frames [0..15]
Output: opacity [0..1]
Result: fade in over 0.5 seconds (at 30fps)
clamp: prevents values below 0 or above 1

Bounce with `spring()`

const highlightScale = spring({
  frame: frame - 15,    // Start at frame 15
  fps,
  config: {
    damping: 12,        // Higher = less bounce
    stiffness: 100,     // Higher = snappier
  },
});

What it does:

Creates a natural bounce from 0 → 1
frame - 15 delays the animation start

Deep Dive: BullExplanation scene (a “real” example)

This scene highlights the matching digit and shows the “🐂 Bull / Fija” explanation.

1) Bilingual text toggle

const showSpanish = Math.floor(frame / 15) % 2 === 1 && frame > 45;

What it does:

Switches language every 15 frames (0.5 seconds)
Starts toggling after frame 45 (so the content is already visible)

2) Conditional styling for highlights

{secret.split("").map((digit, i) => (
  <span
    key={i}
    style={{
      color: i === 0 ? "#EBEBD3" : "#38618C",
      backgroundColor: i === 0 ? "#38618C" : "transparent",
      transform: i === 0 ? `scale(${highlightScale})` : "scale(1)",
      display: "inline-block",
      padding: "0 6px",
      borderRadius: 8,
    }}
  >
    {digit}
  </span>
))}

i === 0 highlights the first digit (the “bull”)
Highlighted digit gets inverted colors + bounce scale
Others stay normal

Key Remotion concepts (the cheat sheet)

Concept	What it does
`Composition`	Defines video dimensions, fps, duration
`Sequence`	Controls when a component appears/disappears on the timeline
`AbsoluteFill`	Full-screen container that fills the canvas
`useCurrentFrame()`	Gets current frame number
`interpolate()`	Maps frame numbers to any value (opacity, position, etc.)
`spring()`	Creates natural bounce animations
`Img` + `staticFile()`	Loads images from `public/`

Render to MP4

You can render from the UI… but the CLI is the “ship it” button.

Example:

npx remotion render src/index.ts PicasFijasVideo out/video.mp4

That command turns your React composition into a real MP4 file.

Demo + repo

Wrap-up

Let’s recap:

Videos are just React renders — one frame at a time.
Time = frames (30fps → 900 frames = 30 seconds).
Scenes = components, and <Sequence /> is your timeline.
Animations are mostly useCurrentFrame() + math (interpolate(), spring()).
Rendering is one command: npx remotion render … → MP4.
And the wildest part? You can literally start with npm run dev and preview it like… a normal React app. Still feels illegal.

Now I’m curious: what would you make first if “a video” was just a folder of components? A tutorial? A product promo? A meme? A “how to center a div” documentary?

PWAs are underrated. I skipped the $99 Apple fee and the $25 Google fee by adding two files to my vanilla JS game. Now it works offline and installs like a native app. Here's the code 👇

Cristina Rodriguez — Tue, 16 Dec 2025 19:51:15 +0000

Cristina Rodriguez

Dec 16 '25

Bulls & Cows Goes Offline — How I Turned My Game Into a PWA (and Skipped the $100 App Store Fee)

#javascript #webdev #pwa #beginners

2 min read

Bulls & Cows Goes Offline — How I Turned My Game Into a PWA (and Skipped the $100 App Store Fee)

Cristina Rodriguez — Tue, 16 Dec 2025 19:50:09 +0000

Remember my Bulls & Cows game? The one with no frameworks, no AI, just vanilla JS? Well, I made it installable. Like, "put it on your home screen and play offline" installable.

No App Store. No Google Play. No $99/year Apple Developer fee. No $25 Google registration. Just... a web app that acts like a native app.

And apparently, people like it? 1.3K unique players, 1.4K sessions, and 1.8K pageviews — with people spending almost 2 minutes per visit just thinking through a logic puzzle. That's enough traction that I gave it its own home.

🎮 Play it: picasyfijas.com

✨ What's a PWA, Really?

A Progressive Web App is just a regular website with two extra files that tell the browser: "Hey, I can work offline. Let me live on the home screen."

That's it. Two files. Let me show you.

1️⃣ The Manifest (Your App's ID Card)

{
  "name": "Bulls & Cows - Picas y Fijas",
  "short_name": "Bulls & Cows",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#EBEBD3",
  "theme_color": "#4281A4",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

This tells the browser what to call your app, what icon to use, and that standalone means "hide the browser chrome and look like a real app."

Link it in your HTML:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

2️⃣ The Service Worker (Your Offline Brain)

const CACHE_NAME = 'Bulls-and-Cows-v4';
const FILES_TO_CACHE = [
  '/', '/index.html', '/styles.css', '/script.js',
  '/manifest.json', '/icon-192.png', '/icon-512.png'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(FILES_TO_CACHE))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

That's the entire service worker. It caches your files on install, then serves them from cache when offline. No npm packages. No build step.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

3️⃣ The Install Prompt

Browsers show an install button automatically, but I added my own banner because I wanted control over the UX:

let deferredPrompt = null;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  document.getElementById('install-banner').style.display = 'flex';
});

document.getElementById('install-btn').addEventListener('click', () => {
  deferredPrompt.prompt();
});

💰 Why Not the App Stores?

Apple charges $99/year. Google charges $25 once. Both require review processes, screenshots, privacy policies, and jumping through hoops.

My game collects zero data. No accounts. No ads. Just privacy-friendly Plausible for basic stats. It's literally just a logic puzzle.

PWAs let me skip all of that. Users get an installable app. I keep my $124. Everyone wins.

🎯 The Result

✅ Works offline
✅ Installable on Android, iOS, and desktop
✅ No app store fees
✅ Updates instantly (no waiting for review)
✅ Still just HTML, CSS, and vanilla JS

Total new code: ~50 lines.

👉 Play it: picasyfijas.com

👉 Source: github.com/Yosolita1978/bullsandcows

Have you turned a side project into a PWA? I'd love to hear about it 👇

Ever had your API calls fire way too often in a Next.js app? 😅 I wrote about how a simple useDebounce hook can smooth things out, boost performance, and keep your UI calm. Read more 👇

Cristina Rodriguez — Tue, 25 Nov 2025 20:01:43 +0000

Cristina Rodriguez

Nov 25 '25

Why I Built a useDebounce Custom Hook in Next.js (and Why You Should Too)

#reactjsdevelopment #webdev #react #programming

3 min read

Why I Built a useDebounce Custom Hook in Next.js (and Why You Should Too)

Cristina Rodriguez — Tue, 25 Nov 2025 19:59:13 +0000

If you've ever wired up a search bar in Next.js, you’ve probably hit this problem: every keystroke fires a new API call, triggers a re-render, or runs an expensive calculation. As your app grows, those “harmless little updates” start stacking up—fast.

I’ve been there. I remember watching my terminal fill with logs like a slot machine every time I typed a word. And because I was calling an API, sometimes I even hit rate limits just by typing too quickly.

That’s when I realized: I didn’t need results instantly. I needed results after the user paused typing.

That’s exactly what debouncing solves—and why building a small, reusable useDebounce hook changed the flow of my whole project.

🚨 The Problem: Too Many Updates

React is responsive—which is great—until it isn’t.

Common places this becomes a problem:

Search bars that fire API calls on every letter
Window resize listeners
Live form validation
Text fields tied to heavy filtering logic

The consequences:

Wasted API calls (and money)
Janky UI performance
Constant re-renders
Hitting provider rate limits
Sluggish, frustrating user experience

Here’s a simple example of the problem:

useEffect(() => {
  fetch(`/api/search?q=${query}`);
}, [query]);

If a user types “nextjs,” this runs 6 separate times:

n → ne → nex → next → nextj → nextjs

Your server cries.
Your UI stutters.
You quietly wonder if you picked the wrong career.

😅 Naive Solutions (And Why They Fail)

❌ 1. “Let me just add a timeout…”

This is the classic first attempt:

setTimeout(() => {
  fetch(...)
}, 300);

It seems fine… until you realize:

You never cancelled the previous timeout
Race conditions appear
Multiple calls still fire, just delayed
Your component becomes a messy spaghetti bowl

❌ 2. “I’ll track the last value manually”

Trust me: you can do this. You shouldn’t do this.

It leads to bugs, stale values, and callback nightmares.

Debouncing deserves its own tidy, reusable hook.

✅ Enter `useDebounce`: The Custom Hook That Fixes Everything

Debouncing means:

“Only run this action after the value has stopped changing for X milliseconds.”

That tiny delay (300ms, for example) is enough to:

Prevent API spamming
Smooth out re-renders
Improve UX
Save money and bandwidth
Make your search bar feel intentional instead of chaotic

This is exactly the kind of logic that belongs inside a Custom Hook.

🧩 How `useDebounce` Works (with Clear Code + Comments)

Here’s the entire hook, ready to drop into your project:

import { useState, useEffect } from "react";

/**
 * useDebounce — delays updating a value until
 * `delay` milliseconds have passed without changes.
 */
export function useDebounce<T>(value: T, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // Start a timer that updates debouncedValue when delay elapses
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cancel the timer if value changes before delay ends
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

Why this works:

The timer resets on every keystroke
The update only happens after the pause
Cleanup prevents race conditions
The hook is fully reusable across components

🔍 Using `useDebounce` in a Next.js Component

Let’s apply it to a real-world search bar.

"use client";

import { useState, useEffect } from "react";
import { useDebounce } from "@/hooks/useDebounce";

export default function SearchBar() {
  const [query, setQuery] = useState("");

  // Debounce raw user input by 300ms
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (!debouncedQuery) return;

    async function search() {
      const res = await fetch(`/api/search?q=${debouncedQuery}`);
      const data = await res.json();
      console.log("Results:", data);
    }

    search();
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
      className="border p-2"
    />
  );
}

What’s happening behind the scenes?

query updates instantly → keeps the UI responsive
debouncedQuery updates after 300ms → triggers one clean API call
No API spam
No jittery UI

🌟 Benefits of Using `useDebounce`

1. Better Performance

No more re-render storms.

2. Fewer API Calls

Your backend (and your wallet) will thank you.

3. Smoother UX

Search results feel stable and intentional.

4. Cleaner Code

Centralized, reusable logic.

5. Reusable Everywhere

Use it for:

Search bars
Form validation
Filtering tables
Window resize
Drag events
Autosaving

🧭 Conclusion

Debouncing is one of those small optimizations that makes a huge difference.
The moment you wrap it in a custom React hook like useDebounce, your app becomes faster, smoother, and easier to maintain.

Once you use it in one component, you’ll find yourself adding it everywhere.

If you’ve built your own version—or used useDebounce in interesting ways—I’d love to hear about it. Drop your thoughts in the comments!

Happy coding! 🚀

🤓 Bringing back the old pen-and-paper logic game Bulls & Cows! No AI, no frameworks — just pure HTML, CSS & vanilla JS. Can you guess the secret number? 💭 👉 https://bulls.yosola.co/ #javascript #webdev #gamedev #nostalgia

Cristina Rodriguez — Wed, 15 Oct 2025 01:15:45 +0000

Cristina Rodriguez

Oct 15 '25

Bulls & Cows — Bringing a Pen-and-Paper Classic to the Browser (No AI, No Frameworks, Just JS)

#javascript #webdev #gamedev #programming

2 min read

Picas y Fijas - Bulls & Cows | Free Online Number Guessing Game

Guess the secret 4-digit number in 10 attempts. Play free online in English or Spanish!

bulls.yosola.co

Bulls & Cows — Bringing a Pen-and-Paper Classic to the Browser (No AI, No Frameworks, Just JS)

Cristina Rodriguez — Wed, 15 Oct 2025 01:14:21 +0000

Lately, I’ve been feeling nostalgic 🤓.

When I was a kid, I used to play a pen-and-paper logic game called Picas y Fijas (also known as Bulls and Cows). So, I decided to build my own digital version — no AI, no frameworks, just pure HTML, CSS, and vanilla JavaScript.

🎮 Try it here: bulls.yosola.co
💻 Source code: github.com/Yosolita1978/bullsandcows

It’s a quick game (around 3 minutes per round), bilingual (English/Spanish), and requires no registration. Just open it and start guessing!

✨ How It Works (and Why It’s So Simple)

The entire game runs on basic JavaScript — no frameworks, no libraries, and no AI logic under the hood.
It’s the kind of code you can actually read, understand, and modify in one sitting.

Here are the main functions that power the logic 👇

1️⃣ Generating the Secret Number

function generateSecretNumber() {
  const digits = [];
  while (digits.length < 4) {
    const randomDigit = Math.floor(Math.random() * 10).toString();
    if (!digits.includes(randomDigit)) digits.push(randomDigit);
  }
  return digits.join('');
}

Creates a 4-digit number with no repeated digits.
Simple Math.random() and array checking — no fancy imports.

2️⃣ Comparing the Guess

function getBullsAndCows(secret, guess) {
  let bulls = 0, cows = 0;
  for (let i = 0; i < secret.length; i++) {
    if (guess[i] === secret[i]) bulls++;
    else if (secret.includes(guess[i])) cows++;
  }
  return { bulls, cows };
}

Checks exact matches (bulls) and misplaced matches (cows).
Uses a classic double-loop logic that every coder has probably written once in their life.

3️⃣ Updating the UI

function updateResult(guess, bulls, cows) {
  const row = document.createElement('tr');
  row.innerHTML = `
    <td>${guess}</td>
    <td>${bulls}</td>
    <td>${cows}</td>
  `;
  document.querySelector('#results tbody').appendChild(row);
}

Minimal DOM manipulation — just creating and appending rows to show your guesses.
Keeps the focus on logic, not on libraries.

🧬 Why I Built It This Way

With so many projects relying on AI and frameworks today, I wanted to build something that reminds us of the joy of pure logic and simplicity.
No dependencies, no build tools — just a small web app that works anywhere.

You can even view source, copy the code, and tweak it for your own version (like changing the number of digits or styling your own board).

🎯 Challenge for You

Try to guess the secret number in fewer than 7 attempts.
I’d love to hear how you did — comment your best score below 👇

👉 Play Bulls & Cows

🧩 Tech Summary

Feature	Details
Stack	HTML, CSS, Vanilla JS
Languages	English / Spanish toggle
Repo	Yosolita1978/bullsandcows
Gameplay	4-digit logic puzzle, “bulls” = right place, “cows” = right number wrong place

💬 Have you ever built a small nostalgic game just for fun?
I’d love to see your “no-framework” projects in the comments!

DEV Community: Cristina Rodriguez

So, you know how to connect to an API endpoint? Great. Now they're asking you to build an MCP, and you're freaking out. Don't sweat it, it's simpler than it sounds. The real difference isn't the code; it's who decides what happens next. New post 👇

Okay, But What IS MCP? (No, Really)

Okay, But What IS MCP? (No, Really)

Three quick questions, for total beginners

Have you used GitHub Actions as a cron job yet? I didn’t need AI for this project—I needed something that runs without me remembering. One YAML file, one cron line, and my weekly “2-minute task” disappeared.

I Didn’t Need AI for This Project. I Needed a Cron Job (So I Used GitHub Actions)

I Didn’t Need AI for This Project. I Needed a Cron Job (So I Used GitHub Actions)

✅ The Fix: a scheduled workflow (copy/paste)

Apply it: run a real script (Node example)

Why this works

Cron in 20 seconds (so you don’t surprise yourself)

Tiny but important: secrets don’t go in YAML

Make failures obvious (future-you will thank you)

Now the story (because yes, this is why I did it)

Wrap-up

I always thought making videos meant fighting a timeline UI. Turns out you can build an MP4 with React components using Remotion — scenes are components, timing is , and animations are just useCurrentFrame() + math.

Videos in React?! Yep. Each scene is a component (and it costs $0)

Videos in React?! Yep. Each scene is a component (and it costs $0)

The idea that makes it click

“NO COST!!!” (but let’s be precise)

Create the project

The moment it clicked: npm run dev 🤯

Your “video settings” live in one place

Want 30 seconds?

Scenes = components, and timing = <Sequence />

The 10-second timeline I built (as a reference)

Animation is just math (and two hooks)

Fade in with interpolate()

Bounce with spring()

Deep Dive: BullExplanation scene (a “real” example)

1) Bilingual text toggle

2) Conditional styling for highlights

Key Remotion concepts (the cheat sheet)

Render to MP4

Demo + repo

Wrap-up

PWAs are underrated. I skipped the $99 Apple fee and the $25 Google fee by adding two files to my vanilla JS game. Now it works offline and installs like a native app. Here's the code 👇

Bulls & Cows Goes Offline — How I Turned My Game Into a PWA (and Skipped the $100 App Store Fee)

Bulls & Cows Goes Offline — How I Turned My Game Into a PWA (and Skipped the $100 App Store Fee)

✨ What's a PWA, Really?

1️⃣ The Manifest (Your App's ID Card)

2️⃣ The Service Worker (Your Offline Brain)

3️⃣ The Install Prompt

💰 Why Not the App Stores?

🎯 The Result

Ever had your API calls fire way too often in a Next.js app? 😅 I wrote about how a simple useDebounce hook can smooth things out, boost performance, and keep your UI calm. Read more 👇

Why I Built a useDebounce Custom Hook in Next.js (and Why You Should Too)

Why I Built a useDebounce Custom Hook in Next.js (and Why You Should Too)

🚨 The Problem: Too Many Updates

Common places this becomes a problem:

The consequences:

😅 Naive Solutions (And Why They Fail)

❌ 1. “Let me just add a timeout…”

❌ 2. “I’ll track the last value manually”

✅ Enter useDebounce: The Custom Hook That Fixes Everything

🧩 How useDebounce Works (with Clear Code + Comments)

Why this works:

🔍 Using useDebounce in a Next.js Component

What’s happening behind the scenes?

🌟 Benefits of Using useDebounce

1. Better Performance

2. Fewer API Calls

3. Smoother UX

4. Cleaner Code

5. Reusable Everywhere

🧭 Conclusion

🤓 Bringing back the old pen-and-paper logic game Bulls & Cows! No AI, no frameworks — just pure HTML, CSS & vanilla JS. Can you guess the secret number? 💭 👉 https://bulls.yosola.co/ #javascript #webdev #gamedev #nostalgia

Bulls & Cows — Bringing a Pen-and-Paper Classic to the Browser (No AI, No Frameworks, Just JS)

Picas y Fijas - Bulls & Cows | Free Online Number Guessing Game

Bulls & Cows — Bringing a Pen-and-Paper Classic to the Browser (No AI, No Frameworks, Just JS)

✨ How It Works (and Why It’s So Simple)

1️⃣ Generating the Secret Number

2️⃣ Comparing the Guess

3️⃣ Updating the UI

🧬 Why I Built It This Way

🎯 Challenge for You

🧩 Tech Summary

The moment it clicked: `npm run dev` 🤯

Scenes = components, and timing = `<Sequence />`

Fade in with `interpolate()`

Bounce with `spring()`

✅ Enter `useDebounce`: The Custom Hook That Fixes Everything

🧩 How `useDebounce` Works (with Clear Code + Comments)

🔍 Using `useDebounce` in a Next.js Component

🌟 Benefits of Using `useDebounce`