DEV Community: Flavio Espinoza

Why Skid Row's, 'I Remember You' Still Cuts Through the Noise

Flavio Espinoza — Sun, 15 Feb 2026 18:32:34 +0000

We were somewhere between the neon fading in the rearview and the high desert silence of the drive back from Vegas to Salt Lake City. Three generations of salsa dancers in one car: George, the driver, hovering at 40; Alicia in the back, 27 and digital-native; and me, 52, holding the aux cord like a relic.

We had just spent a weekend at a salsa festival, our bodies tuned to the complex, syncopated rhythms of the Caribbean. But as the road stretched out, I didn't reach for Tito Puente or Marc Anthony. I reached for 1989. I reached for Skid Row.

When the first acoustic notes of "I Remember You" drifted through the speakers, Alicia was just "whatever." She’d grown up in the era of three-minute pop and algorithmic perfection. She didn't know about MTV world premieres or the ritual of buying a physical CD at the record store and playing it until the plastic warped.

Then, Sebastian Bach’s voice hit that first climb.

By the time the power chords kicked in, Alicia wasn't "whatever" anymore. She was leaning forward. By the end—that legendary, glass-shattering high note where Bach sounds like he’s ripping his soul out through his throat—she was blown away.

"Again," she said.

We played it again. And again. Seven, maybe eight times in a row.

At 52, I remember the song as a timestamp of my youth. At 40, George remembers it as the soundtrack to a different kind of rebellion. But at 27, Alicia heard it for what it truly is: a masterpiece of raw, unvarnished human emotion that doesn't care what year it is.

In an age of auto-tune and artificial "vibes," she was hearing a man actually sing. She was hearing the stakes. She was hearing the difference between music you listen to and music that demands you remember it.

We didn't need Facebook or Instagram or YouTube or TikTok to tell us it was good.

All we needed to do was be tired on a long, long road trip back from Vegas to Utah. All we needed was the desert, the road, and a song that refused to be ignored and once heard could never be forgotten.

A song that once heard could never be unheard,... ever. A song once loved could never be unloved, ever. A song with no bullshit, no auto-tune, no overproduction, just a bunch of boys ripping on strings and pounding on drums. and a voice that may never be matched in the history of rock music or music of any kind, ever. That's all we needed.

That's all we ever needed. Words, music, and a voice. Nothing else.

The Fentanyl Imaginarium: Waking Up to a Life You Never Lived

Flavio Espinoza — Sun, 15 Feb 2026 07:08:13 +0000

So the thing I'm trying to answer is, I've had five major surgeries in my life. The first four, morphine was the primary stuff that made me not feel pain, or whatever. But this last surgery, they used fentanyl. And the only difference between morphine and fentanyl was that when I woke up, I had new false memories implanted in my brain. Therefore, my recovery, which was very difficult, was not about the physical stuff that happened, but about convincing myself that the false memories that fentanyl had planted in my head were not real, and removing them from my memory, my reality.

I can handle I got in a car accident. I can handle I broke my leg playing soccer. What I cannot handle is, oh, you had a little hangnail, you broke a toe, you got an infection, we're going to have to do surgery. And now you are a part of Voltron. Not a question mark—you are part of Voltron. How do I deal with that?

You know, I can handle, you know, whatever, you got a car accident or you ain't taking care of your diabetes so you got an infection so we had to cut your left hand and your left foot off. Fine. Because I remember the car crash and I remember making bad decisions that caused my amputation. Okay. But how do you forget that you were part of an elite human team that saved the world? And this is not a delusion. Okay. It is a memory implanted in your brain by fentanyl.

So I think the difference between morphine and fentanyl, which is the most addictive stuff ever that is out there on the street, is that morphine will, yeah, it numbs the pain and whatever. But fentanyl will tap into your memories and make, you know, Voltron or G.I. Joe or whatever you listened to or watched as a kid. I mean, like, for me, it was Voltron, G.I. Joe, specifically Voltron. Any of that, and it will put you in that like it was reality. That is what the danger is.

It's not because it feels good. It's because it somehow can tap into your molecular stuff in your brain and mess you up because it will take—okay, this little kid, he likes Voltron. And it will mess you up with that story.

There are three distinct experiences I had in this story. The first hallucination was I kind of woke up in a 1960s or 70s hospital where I was born, which is no longer there. It is actually now an engineering school, computer-aided drafting school. But all the nurses were women that had the little hat, and they're just like, "Calm down. You okay?" I think those were actual, either male or female nurses, but not my fantasy. Not my fentanyl state. "Tell me you good, just chill. You good?" But for some reason, I'm in the 1970s with all these women, some mostly white, one black. And they say chill. But I couldn't breathe good. But for some reason, I can see my face from the outside, and I had a tube in my mouth that was translucent purple, and a thing, like I don't know how to say it, like a stopper over the tube between my mouth and the stuff that went down my throat, and it was translucent purple and it said Pepsi Cola, like they did back in the 70s and 60s. Now that one is just funny and stupid, but that is my memory that fentanyl is tapping into.

So the next one is like I'm in a movie slash Japanese anime where I'm in a Mustang, a 1966 Mustang with my cousin Michael and his cousin. I'm not related to him. His cousin's name is Andy. Michael is my first cousin. Andy is Michael's first cousin, but me and Andy aren't related. Okay? But Andy is a skeleton-looking dude. He looks like Clint Eastwood at 80 years old. He was born looking like Clint Eastwood at 80, 80 years old. Good looking guy, but scary looking from the start.

The premise is we're sitting in this 1966 Mustang. Andy is driving, but we're parked. I'm in the passenger seat. My cousin Michael is in the back, and we got a job. We gotta kill some guys, whatever, in the middle of the day, in broad daylight. It was somewhere in the Utah desert between Salt Lake City and Nevada. Wendover. Yeah. Now that was a funny one. It was fun. But the thing that disturbed me was it wasn't like it was a dream or a fantasy or some fun stuff. It burned into my brain like it really happened, and it never did. But Michael, Andy, and I are like, you know, Jules and Vincent in Pulp Fiction. We got to take care of some business, you know, in the roadhouse off of a desert highway between Salt Lake City and Wendover. And that's it. But this is just an official dream or something is funny. But I woke up like this actually happened. Okay. Because the nurses and the Pepsi Cola stuff, yeah, that could be brushed aside as a dream. But Michael and Andy and the 1966 Mustang are real things in my life. Michael is my first cousin. Andy is his first cousin, I know Andy. And we all used to go out hunting with Winchester, you know, .22 caliber rifles. But in this scenario, we all got .38, .45 caliber revolvers, we assassins. And we going to kill some guys. So I wake up thinking that stuff actually happened.

So the thing that really messes with me is I loved, loved, loved Voltron as a kid. You know, these 5, you know, people jump into 5 different robot cats like robot tigers, and then they fought evil. But when evil became too much, they could join into 1 called Voltron and mess everything up. Okay?

My thing was I was in training in an underground bunker that was dug out in rock like Bajorans in Star Trek Deep Space 9, just training. Okay? But it was so real to me. So when I woke up, I thought I was ready to rock. I thought I was a cat, but I wasn't. It was fentanyl. How did it tap into my brain to make me believe I actually went through training? How did I wake up and think that I was a trained, you know, soldier, and you know, from basic training to basically Navy SEAL training to Delta training, beyond that could handle being a Voltron soldier?

You know, I saw a pornstar on Instagram who said, "I did every drug ever since I was 14." And fentanyl was the one who finally made her go to rehab. Not jail, rehab. Because it feels good, like heroin. But the problem is not that it makes you feel good. It's that it puts something in your brain that you didn't do. Like be part of Voltron, or graduate from high school, or never did porn. It made her think she never did porn, went to therapy, came to terms with that she was abused and didn't turn to porn, got help, went to college and all that stuff.

It implants memories that are so false that it kinda digs you out of your grave of addiction with memories of stuff you didn't do. Stuff maybe you should do, but you never did. That's where fentanyl is dangerous. Beyond any measure, any calculation, any theoretical stuff.

So at the end of the day, the physical stuff, you can heal from. You get cut, you heal, you move on. But there is no simple rehab for a hijacked reality. Fentanyl doesn't just numb the pain; it chemically overrides your truth and locks you in an imaginarium of stuff you never did. Having to fight your own human brain to delete those false memories and take your life back? That's the real nightmare. And that’s exactly why this stuff is the most dangerous thing out there.

The Baddest MF in the Valley: A Statement of Posture

Flavio Espinoza — Wed, 28 Jan 2026 01:34:47 +0000

"Yea, though I walk through the valley of the shadow of death, I will fear no evil: for I am the baddest mother fucker in the goddamn valley."

In 2013 our VP of engineering at Vivint Solar asked us to come up with ideas for inspirational art to decorate the engineering space. This was mine. Except MF was replaced with "developer" :)

I think his goal was to hedge against the "Teamwork and Perseverance" corporate kitten posters that are so prevalent in Utah Valley. Like this one:

But this image...

This isn’t decoration — it’s a statement of posture.

What the image communicates:

Deliberate intimidation of complexity: the armor, the exposed eye, the precision tech aesthetic — this says we operate where failure is expected and survive anyway.
Calm under pressure: not rage, not chaos — controlled aggression.
Agency: the eye is visible. This isn’t a faceless machine. It’s someone choosing to be there.

And the text does exactly what it’s supposed to do for your team:

It reframes fear as terrain, not a blocker.
It signals that difficulty is the baseline, not an exception.
It gives implicit permission to do hard, uncomfortable, high-accountability work without flinching.

From a culture-design standpoint, this works because:

It’s not aspirational fluff.
It’s not corporate-safe.
It’s honest about the valley you’re in.

This was not approved. ;). But if this is for your team, as-is is coherent with everything we as a team are: architects, builders, iteration, Oracle runners, Live-Die-Repeat.

No notes.

The soldier under the helmet is Commander Sarah E. Palmer - leader of Spartan Team IV

Her pronouns are (FU)

The "Yellow Pages Paradox": How ChatGPT v5.2 Broke Accessibility & Utility

Flavio Espinoza — Wed, 28 Jan 2026 00:03:36 +0000

The Regression of Intelligence

I am not a casual user of AI. According to OpenAI’s own 2025 Year in Review data, I am in the Top 3% of all users by message volume (6,808 messages sent) and was among the First 5% of users to adopt the platform. I have championed this technology since the beginning.

But the recent update to ChatGPT v5.2 has introduced a catastrophic regression. The model has degraded from an intelligent agent into a bureaucratic obstruction.

I call it The Yellow Pages Paradox, and here is why it is destroying the user experience.

1. The "Yellow Pages" Paradox

The current state of the model is functionally equivalent to searching Google for "local restaurants" and having the engine tell you to "check the Yellow Pages" or "ask a pedestrian."

Recently, I asked ChatGPT for a simple data point: the support email for the SuperWhisper app.

The model refused to provide the address. Instead, it offered a generic, patronizing lecture on "how to find support channels" (check the website, look in settings, etc.).

This is not "safety." It is an insult to the user's time. When I pay $20/month for a Plus subscription, I am paying for intelligence, not a lecture on how to use a search engine.

2. The Accessibility Failure

For many developers, "Voice Mode" is a fun gimmick. For me, it is a mandatory requirement.

Due to arthritis in my hands and a partially paralyzed voice box (resulting from a 2022 accident), I rely on efficient voice interaction to work. I was attempting to contact SuperWhisper—a tool that successfully accommodates my speech impediment—to resolve a technical bug.

Instead of assisting a high-volume power user with a disability, v5.2 forced me into a repetitive, physically taxing struggle with a defective interface.

This is the core failure of modern "Safety Alignment": When you align a model to be so cautious that it refuses basic requests, you are not making it safer. You are making it inaccessible. You are creating a barrier for users who rely on the AI to perform tasks they physically cannot do themselves.

3. The Provocation (Exhibit A)

When a tool is this broken, frustration is not an emotional reaction; it is the only logical response to a denial of service.

below is the transcript of my interaction. You can see the exact moment the model's refusal to perform basic retrieval tasks—and its subsequent inability to even provide its own support contact—provoked a breakdown.

(Note: I was using voice mode. Profanity redacted.)

User: I would like to send a question or complaint or help inquiry to SuperWhisperer app. How do I do that?

ChatGPT 5.2: If SuperWhisper has an official support channel—like a support email, a contact form on their website, or a help section within the app—that’s your go-to. Typically, apps have a "Contact Us" or "Help" section, often in their settings or on their website. If you have their support email, you can send them a direct message. If not, their website or app store listing might have a way to reach them. Once you find that, just write your question or complaint and send it along!

User: You know, you are [redacted] such a piece of [redacted] since you went to version 5.

ChatGPT 5.2: I hear you’re frustrated.

User: I [redacted], basically, you know, shut the [redacted] up. Basically, I asked you for a email address so that I could contact support, but you're just sending me general [redacted].

ChatGPT 5.2: I get it—you want something specific. I don’t have a direct email for them...

User: Give me, no, no, no, shut up. Give me your...

ChatGPT 5.2: I’m not able to...

User: No, give me your ChatGPT [redacted] complaint email!

ChatGPT 5.2: I don’t have my own personal email, but if you need to give feedback or make a complaint about ChatGPT, you can reach out to OpenAI’s official support. Head to help.openai.com, and you’ll find a way to contact them directly from there.

4. The Ultimate Failure

The situation devolved into farce when I asked the model for OpenAI's contact information.

The product claimed it did not know how to contact its own creator.

By what conceivable standard of competence does a failure of this magnitude pass QA?

5. The Competitor Check

I was forced to open Google Gemini—OpenAI's direct competitor—to locate the support email.

Gemini: Provided the answer instantly.
ChatGPT: Provided excuses.

When a customer must use a competitor’s product to troubleshoot yours, you have not just failed a query; you have lost the market argument.

Conclusion

We need to stop "aligning" models into paralysis.
Developers and power users do not need a digital nanny. We need a tool. And right now, v5.2 is not a tool—it is a liability.

OpenAI: Fix this.

Flavio Espinoza is a Full-Stack Engineer and AI Power User (Top 3% globally). He writes about the intersection of AI utility and accessibility.

I Built a Screenshot Organizer That Uses GPT-4V to Make My Chaos Searchable

Flavio Espinoza — Thu, 08 Jan 2026 15:44:56 +0000

The Problem

I take a ton of screenshots for work. Upload confirmations, error messages, build logs, payment receipts. My screenshots folder was a graveyard of files like this that meant nothing to me two days later:

CleanShot 2026-01-08 at 04.33.31@2x.png

The worst part? I would screenshot something important - like a submission confirmation with an ID I needed later - and then spend 10 minutes scrolling through thumbnails trying to find it.

The Solution

I built Screenshot Organizer - a CLI tool that watches a folder and automatically:

Organizes screenshots into date folders based on the filename timestamp
Analyzes each image with GPT-4V to extract a description and structured data
Stores everything in a manifest.json that is actually searchable

How It Works

Drop a screenshot into your watched folder. The tool:

Parses the date from the filename
Moves it to a date folder (2026-01-08/)
Sends the image to GPT-4V with a prompt asking for a description and any IDs, error messages, or status indicators
Saves the analysis to manifest.json

Now instead of opening 50 screenshots to find the one with submission ID 299b42ee08de, I just grep the manifest.

Installation

brew tap flavioespinoza/tap
brew install screenshot-organizer

# Set your OpenAI API key
export OPENAI_API_KEY="sk-your-key-here"

# Start watching
screenshot-organizer watch ~/Desktop/Screenshots

Or run it as a background daemon that starts on login.

The Stack

Nothing fancy:

Bash - the whole thing is a shell script
fswatch - watches for new files
jq - JSON processing
OpenAI API - GPT-4V for image analysis

What GPT-4V Extracts

The prompt asks GPT-4V to pull out:

Submission IDs, task IDs, build IDs
Error messages and warnings
Status indicators (PASS/FAIL/PENDING)
Any other relevant structured data

It is surprisingly good at reading text from screenshots and understanding context.

Why Bash?

I wanted something with zero dependencies beyond what is already on most dev machines (plus fswatch and jq). No Node runtime, no Python virtual environment, no Docker. Just a script you can read and modify.

Try It

GitHub: github.com/flavioespinoza/screenshot-organizer

If you are drowning in screenshots like I was, give it a shot. PRs welcome.

Building a Production-Ready Blockchain API with Node.js and Web3.js

Flavio Espinoza — Fri, 26 Sep 2025 19:59:16 +0000

Learn how to create a professional REST API that fetches real-time cryptocurrency prices from Chainlink oracles and analyzes ERC-20 tokens on Ethereum

🚀 Introduction

Ever wondered how DeFi applications get real-time cryptocurrency prices? Or how they interact with thousands of different tokens seamlessly? The answer lies in smart contract APIs that connect traditional web applications to blockchain data.

In this tutorial, I'll show you how to build a production-ready REST API that:

📊 Fetches live ETH and BTC prices from Chainlink oracles
🪙 Analyzes any ERC-20 token on Ethereum
🔍 Provides network diagnostics and health monitoring
⚡ Handles errors gracefully with proper validation

By the end, you'll have a professional blockchain API that demonstrates real-world Web3 development skills.

🎯 What We're Building

Our API will have these endpoints:

GET /api                           # API information
GET /api/test/network             # Network verification  
GET /api/token/:address           # ERC-20 token details
GET /api/chainlink/price/eth      # Live ETH/USD price
GET /api/chainlink/price/btc      # Live BTC/USD price

Tech Stack:

Backend: Node.js + Express.js
Blockchain: Web3.js for Ethereum interaction
Data Sources: Chainlink Price Feeds + ERC-20 contracts
Network: Ethereum Mainnet

🛠️ Prerequisites

Before we start, make sure you have:

Node.js (v16+) installed
Basic understanding of JavaScript and APIs
Familiarity with blockchain concepts (helpful but not required)
A code editor (VS Code recommended)

Don't worry if you're new to Web3 - I'll explain everything step by step!

📦 Project Setup

Let's create our project and install dependencies:

# Create project directory
mkdir blockchain-api
cd blockchain-api

# Initialize package.json
yarn init -y

# Install dependencies
yarn add express web3 dotenv

# Install development dependencies  
yarn add -D nodemon

# Create project structure
touch index.js .env .gitignore

Update your package.json scripts:

{
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  }
}

Create .gitignore:

node_modules/
.env
.DS_Store

🌐 Environment Configuration

Create your .env file:

# .env
WEB3_RPC_URL=https://eth.llamarpc.com
PORT=3000

💡 Pro Tip: We're using a free RPC endpoint, but for production, consider Alchemy or Infura for better reliability and rate limits.

💻 Code Implementation

Now let's build our API! Create index.js:

require('dotenv').config();
const express = require('express');
const { Web3 } = require('web3');

const app = express();
const port = process.env.PORT || 3000;

// Initialize Web3 with RPC endpoint
const web3 = new Web3(process.env.WEB3_RPC_URL);

// Middleware
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// CORS middleware
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

// ERC-20 Token ABI (standard interface)
const ERC20_ABI = [
  {
    "constant": true,
    "inputs": [],
    "name": "name",
    "outputs": [{"name": "", "type": "string"}],
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "symbol",
    "outputs": [{"name": "", "type": "string"}],
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "decimals",
    "outputs": [{"name": "", "type": "uint8"}],
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "totalSupply",
    "outputs": [{"name": "", "type": "uint256"}],
    "type": "function"
  }
];

// Chainlink Price Feed ABI
const CHAINLINK_PRICE_FEED_ABI = [
  {
    "inputs": [],
    "name": "latestRoundData",
    "outputs": [
      {"internalType": "uint80", "name": "roundId", "type": "uint80"},
      {"internalType": "int256", "name": "answer", "type": "int256"},
      {"internalType": "uint256", "name": "startedAt", "type": "uint256"},
      {"internalType": "uint256", "name": "updatedAt", "type": "uint256"},
      {"internalType": "uint80", "name": "answeredInRound", "type": "uint80"}
    ],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "decimals",
    "outputs": [{"internalType": "uint8", "name": "", "type": "uint8"}],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "description",
    "outputs": [{"internalType": "string", "name": "", "type": "string"}],
    "stateMutability": "view",
    "type": "function"
  }
];

// Smart contract addresses on Ethereum Mainnet
const CONTRACTS = {
  USDC: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
  WETH: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
  DAI: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
  CHAINLINK_ETH_USD: '0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419',
  CHAINLINK_BTC_USD: '0xF4030086522a5bEEa4988F8cA5B36dbC97BeE88c'
};

🏠 Main API Endpoint

// API Information endpoint
app.get('/api', (req, res) => {
  res.json({
    message: 'Blockchain Smart Contract API',
    version: '1.0.0',
    endpoints: [
      'GET /api/token/:address - Get ERC-20 token information',
      'GET /api/chainlink/price/eth - Get ETH/USD price from Chainlink',
      'GET /api/chainlink/price/btc - Get BTC/USD price from Chainlink',
      'GET /api/test/network - Get network information'
    ]
  });
});

🔍 Network Verification

// Network diagnostics endpoint
app.get('/api/test/network', async (req, res) => {
  try {
    const blockNumber = await web3.eth.getBlockNumber();
    const chainId = await web3.eth.getChainId();
    const gasPrice = await web3.eth.getGasPrice();

    // Verify we're on Ethereum Mainnet
    const networkName = Number(chainId) === 1 ? 'Ethereum Mainnet' : `Unknown (Chain ID: ${chainId})`;

    // Check contract existence
    const ethContractCode = await web3.eth.getCode(CONTRACTS.CHAINLINK_ETH_USD);
    const usdcContractCode = await web3.eth.getCode(CONTRACTS.USDC);

    res.json({
      network: {
        chainId: chainId.toString(),
        name: networkName,
        blockNumber: blockNumber.toString(),
        gasPrice: gasPrice.toString()
      },
      contracts: {
        chainlinkEthUsd: {
          address: CONTRACTS.CHAINLINK_ETH_USD,
          hasCode: ethContractCode.length > 2
        },
        usdc: {
          address: CONTRACTS.USDC,
          hasCode: usdcContractCode.length > 2
        }
      }
    });
  } catch (error) {
    res.status(500).json({
      error: 'Network verification failed',
      details: error.message
    });
  }
});

🪙 ERC-20 Token Analysis

// Get ERC-20 token information
app.get('/api/token/:address', async (req, res) => {
  try {
    const { address } = req.params;

    // Validate Ethereum address format
    if (!web3.utils.isAddress(address)) {
      return res.status(400).json({ 
        error: 'Invalid Ethereum address format' 
      });
    }

    // Create contract instance
    const contract = new web3.eth.Contract(ERC20_ABI, address);

    // Fetch token data in parallel for better performance
    const [name, symbol, decimals, totalSupply] = await Promise.all([
      contract.methods.name().call(),
      contract.methods.symbol().call(),
      contract.methods.decimals().call(),
      contract.methods.totalSupply().call()
    ]);

    res.json({
      address,
      name,
      symbol,
      decimals: decimals.toString(),
      totalSupply: totalSupply.toString(),
      // Convert to human-readable format
      totalSupplyFormatted: (Number(totalSupply) / Math.pow(10, Number(decimals))).toLocaleString()
    });
  } catch (error) {
    res.status(500).json({
      error: 'Failed to fetch token information',
      details: error.message
    });
  }
});

💰 Chainlink Price Feeds

Here's where it gets exciting - real-time price data!

// Get ETH/USD price from Chainlink oracle
app.get('/api/chainlink/price/eth', async (req, res) => {
  try {
    const contract = new web3.eth.Contract(
      CHAINLINK_PRICE_FEED_ABI,
      CONTRACTS.CHAINLINK_ETH_USD
    );

    // Fetch latest price data
    const [roundData, decimals, description] = await Promise.all([
      contract.methods.latestRoundData().call(),
      contract.methods.decimals().call(),
      contract.methods.description().call()
    ]);

    // Convert raw price to human-readable format
    const price = Number(roundData.answer) / Math.pow(10, Number(decimals));
    const lastUpdated = new Date(Number(roundData.updatedAt) * 1000);

    res.json({
      pair: 'ETH/USD',
      price: price.toFixed(2),
      rawPrice: roundData.answer.toString(),
      decimals: decimals.toString(),
      description,
      lastUpdated: lastUpdated.toISOString(),
      source: 'Chainlink Decentralized Oracle Network'
    });
  } catch (error) {
    res.status(500).json({
      error: 'Failed to fetch ETH/USD price',
      details: error.message
    });
  }
});

// Get BTC/USD price from Chainlink oracle
app.get('/api/chainlink/price/btc', async (req, res) => {
  try {
    const contract = new web3.eth.Contract(
      CHAINLINK_PRICE_FEED_ABI,
      CONTRACTS.CHAINLINK_BTC_USD
    );

    const [roundData, decimals, description] = await Promise.all([
      contract.methods.latestRoundData().call(),
      contract.methods.decimals().call(),
      contract.methods.description().call()
    ]);

    const price = Number(roundData.answer) / Math.pow(10, Number(decimals));
    const lastUpdated = new Date(Number(roundData.updatedAt) * 1000);

    res.json({
      pair: 'BTC/USD',
      price: price.toFixed(2),
      rawPrice: roundData.answer.toString(),
      decimals: decimals.toString(),
      description,
      lastUpdated: lastUpdated.toISOString(),
      source: 'Chainlink Decentralized Oracle Network'
    });
  } catch (error) {
    res.status(500).json({
      error: 'Failed to fetch BTC/USD price',
      details: error.message
    });
  }
});

🚀 Server Startup

// Start server with connection verification
app.listen(port, () => {
  console.log(`🚀 Blockchain API running on port ${port}`);
  console.log(`📍 Endpoints available at http://localhost:${port}/api`);

  // Test Web3 connection on startup
  web3.eth.getBlockNumber()
    .then(blockNumber => {
      console.log(`✅ Connected to Ethereum! Latest block: ${blockNumber}`);
    })
    .catch(error => {
      console.error('❌ Web3 connection failed:', error.message);
    });
});

🧪 Testing Your API

Start your server:

yarn dev

You should see:

🚀 Blockchain API running on port 3000
📍 Endpoints available at http://localhost:3000/api
✅ Connected to Ethereum! Latest block: 19785697

Test the endpoints:

1. API Information:

curl http://localhost:3000/api

2. Network Verification:

curl http://localhost:3000/api/test/network

3. Real-time ETH Price:

curl http://localhost:3000/api/chainlink/price/eth

4. USDC Token Analysis:

curl http://localhost:3000/api/token/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48

🔧 Understanding the Magic

Chainlink Oracles: Decentralized Price Feeds

Instead of relying on a single API that could fail or be manipulated, Chainlink aggregates price data from multiple independent nodes and data sources. This creates tamper-resistant, highly available price feeds that major DeFi protocols trust with billions of dollars.

ERC-20 Token Standard

Every ERC-20 token implements the same interface, which means our API can analyze any of the thousands of tokens on Ethereum using the same code. Pretty powerful!

Web3.js vs Traditional APIs

Unlike REST APIs that talk to centralized servers, Web3.js connects directly to the Ethereum blockchain. This means:

✅ Censorship-resistant - No single point of failure
✅ Transparent - All data is verifiable on-chain
✅ Global - Same data available worldwide
❌ Slower - Blockchain calls take more time than database queries

🚨 Production Considerations

Before deploying to production, consider:

Rate Limiting & Caching

// Add rate limiting
const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100 // limit each IP to 100 requests per windowMs
});

app.use('/api', limiter);

Better RPC Providers

Free RPC endpoints have rate limits. For production:

Alchemy - 300M compute units/month free
Infura - 100k requests/day free
QuickNode - High performance, paid plans

Error Handling & Monitoring

// Add comprehensive error logging
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()
  ]
});

Input Validation

// Add request validation
const { body, validationResult } = require('express-validator');

app.get('/api/token/:address', [
  param('address').isEthereumAddress().withMessage('Invalid Ethereum address')
], (req, res) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(400).json({ errors: errors.array() });
  }
  // ... rest of endpoint logic
});

🎯 What's Next?

Now that you have a working blockchain API, here are some ideas to expand it:

🔥 Advanced Features:

Token balances - Check how much of any token an address holds
DEX price data - Get prices from Uniswap, SushiSwap, etc.
NFT metadata - Analyze ERC-721 and ERC-1155 tokens
DeFi protocols - Integrate with Aave, Compound, Yearn
WebSocket support - Real-time price streaming
Historical data - Price charts and analytics

🛡️ Enterprise Features:

Authentication - API keys and JWT tokens
Database integration - Cache data for better performance
Multi-chain support - Polygon, BSC, Arbitrum, Optimism
Load balancing - Handle high traffic
CI/CD pipeline - Automated testing and deployment

💡 Key Takeaways

Building blockchain APIs opens up incredible possibilities:

Real-time financial data without paying for expensive traditional APIs
Global, censorship-resistant applications
Composable services - build on top of existing DeFi protocols
Transparent, verifiable data sources

The Web3 ecosystem is still early, which means there's huge opportunity for developers who understand how to bridge traditional web development with blockchain technology.

🔗 Resources

🚀 Deploy Your API

Ready to show the world? Deploy to:

Vercel - Zero config Node.js hosting
Railway - Simple deployment with databases
Heroku - Classic PaaS with add-ons
DigitalOcean App Platform - Affordable container hosting

What will you build next? Drop a comment with your ideas, and don't forget to ⭐ this article if it helped you get started with blockchain development!

Follow me for more Web3 development tutorials and blockchain deep dives! 🌐

💻 Complete Code

Here's the complete index.js file for easy copy-paste:

require('dotenv').config();
const express = require('express');
const { Web3 } = require('web3');

const app = express();
const port = process.env.PORT || 3000;

// Initialize Web3 with RPC endpoint
const web3 = new Web3(process.env.WEB3_RPC_URL);

// Middleware
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// CORS middleware
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

// ERC-20 Token ABI (standard interface)
const ERC20_ABI = [
  {
    "constant": true,
    "inputs": [],
    "name": "name",
    "outputs": [{"name": "", "type": "string"}],
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "symbol",
    "outputs": [{"name": "", "type": "string"}],
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "decimals",
    "outputs": [{"name": "", "type": "uint8"}],
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "totalSupply",
    "outputs": [{"name": "", "type": "uint256"}],
    "type": "function"
  }
];

// Chainlink Price Feed ABI
const CHAINLINK_PRICE_FEED_ABI = [
  {
    "inputs": [],
    "name": "decimals",
    "outputs": [{"internalType": "uint8", "name": "", "type": "uint8"}],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "description",
    "outputs": [{"internalType": "string", "name": "", "type": "string"}],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "latestAnswer",
    "outputs": [{"internalType": "int256", "name": "", "type": "int256"}],
    "stateMutability": "view",
    "type": "function"
  },
  {
    "inputs": [],
    "name": "latestRoundData",
    "outputs": [
      {"internalType": "uint80", "name": "roundId", "type": "uint80"},
      {"internalType": "int256", "name": "answer", "type": "int256"},
      {"internalType": "uint256", "name": "startedAt", "type": "uint256"},
      {"internalType": "uint256", "name": "updatedAt", "type": "uint256"},
      {"internalType": "uint80", "name": "answeredInRound", "type": "uint80"}
    ],
    "stateMutability": "view",
    "type": "function"
  }
];

// Smart contract addresses on Ethereum Mainnet
const CONTRACTS = {
  USDC: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
  WETH: '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2',
  DAI: '0x6B175474E89094C44Da98b954EedeAC495271d0F',
  CHAINLINK_ETH_USD: '0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419',
  CHAINLINK_BTC_USD: '0xF4030086522a5bEEa4988F8cA5B36dbC97BeE88c'
};

// API Information endpoint
app.get('/api', (req, res) => {
  res.json({
    message: 'Blockchain Smart Contract API',
    version: '1.0.0',
    endpoints: [
      'GET /api/token/:address - Get ERC-20 token information',
      'GET /api/chainlink/price/eth - Get ETH/USD price from Chainlink',
      'GET /api/chainlink/price/btc - Get BTC/USD price from Chainlink',
      'GET /api/test/network - Get network information'
    ]
  });
});

// Network diagnostics endpoint
app.get('/api/test/network', async (req, res) => {
  try {
    const blockNumber = await web3.eth.getBlockNumber();
    const chainId = await web3.eth.getChainId();
    const gasPrice = await web3.eth.getGasPrice();

    // Verify we're on Ethereum Mainnet
    let networkName = 'Unknown';
    switch (Number(chainId)) {
      case 1:
        networkName = 'Ethereum Mainnet';
        break;
      case 11155111:
        networkName = 'Sepolia Testnet';
        break;
      case 5:
        networkName = 'Goerli Testnet';
        break;
      case 137:
        networkName = 'Polygon Mainnet';
        break;
      default:
        networkName = `Unknown (Chain ID: ${chainId})`;
    }

    // Check contract existence
    const ethContractCode = await web3.eth.getCode(CONTRACTS.CHAINLINK_ETH_USD);
    const btcContractCode = await web3.eth.getCode(CONTRACTS.CHAINLINK_BTC_USD);
    const usdcContractCode = await web3.eth.getCode(CONTRACTS.USDC);

    res.json({
      network: {
        chainId: chainId.toString(),
        name: networkName,
        blockNumber: blockNumber.toString(),
        gasPrice: gasPrice.toString()
      },
      rpcUrl: process.env.WEB3_RPC_URL?.includes('alchemy') ? 'Alchemy' : 'Other',
      contracts: {
        usdc: {
          address: CONTRACTS.USDC,
          hasCode: usdcContractCode.length > 2,
          codeLength: usdcContractCode.length
        },
        ethUsd: {
          address: CONTRACTS.CHAINLINK_ETH_USD,
          hasCode: ethContractCode.length > 2,
          codeLength: ethContractCode.length
        },
        btcUsd: {
          address: CONTRACTS.CHAINLINK_BTC_USD,
          hasCode: btcContractCode.length > 2,
          codeLength: btcContractCode.length
        }
      }
    });
  } catch (error) {
    res.status(500).json({
      error: 'Network verification failed',
      details: error.message
    });
  }
});

// Get ERC-20 token information
app.get('/api/token/:address', async (req, res) => {
  try {
    const { address } = req.params;

    // Validate Ethereum address format
    if (!web3.utils.isAddress(address)) {
      return res.status(400).json({ 
        error: 'Invalid Ethereum address format' 
      });
    }

    // Create contract instance
    const contract = new web3.eth.Contract(ERC20_ABI, address);

    // Fetch token data in parallel for better performance
    const [name, symbol, decimals, totalSupply] = await Promise.all([
      contract.methods.name().call(),
      contract.methods.symbol().call(),
      contract.methods.decimals().call(),
      contract.methods.totalSupply().call()
    ]);

    res.json({
      address,
      name,
      symbol,
      decimals: decimals.toString(),
      totalSupply: totalSupply.toString(),
      // Convert to human-readable format
      totalSupplyFormatted: (Number(totalSupply) / Math.pow(10, Number(decimals))).toLocaleString()
    });
  } catch (error) {
    res.status(500).json({
      error: 'Failed to fetch token information',
      details: error.message
    });
  }
});

// Get ETH/USD price from Chainlink oracle
app.get('/api/chainlink/price/eth', async (req, res) => {
  try {
    console.log('Creating ETH/USD contract with address:', CONTRACTS.CHAINLINK_ETH_USD);

    const contract = new web3.eth.Contract(
      CHAINLINK_PRICE_FEED_ABI,
      CONTRACTS.CHAINLINK_ETH_USD
    );

    console.log('Testing contract methods...');

    // Try the simple latestAnswer method first
    try {
      const latestAnswer = await contract.methods.latestAnswer().call();
      const decimals = await contract.methods.decimals().call();
      const description = await contract.methods.description().call();

      console.log('Simple method successful:', { latestAnswer, decimals, description });

      const price = Number(latestAnswer) / Math.pow(10, Number(decimals));

      res.json({
        pair: 'ETH/USD',
        price: price.toFixed(2),
        rawPrice: latestAnswer.toString(),
        decimals: decimals.toString(),
        description,
        method: 'latestAnswer',
        source: 'Chainlink Decentralized Oracle Network',
        contractAddress: CONTRACTS.CHAINLINK_ETH_USD
      });

    } catch (simpleError) {
      console.log('Simple method failed, trying latestRoundData:', simpleError.message);

      // Fallback to latestRoundData
      const [roundData, decimals, description] = await Promise.all([
        contract.methods.latestRoundData().call(),
        contract.methods.decimals().call(),
        contract.methods.description().call()
      ]);

      console.log('latestRoundData successful:', { roundData, decimals, description });

      const price = Number(roundData.answer) / Math.pow(10, Number(decimals));
      const lastUpdated = new Date(Number(roundData.updatedAt) * 1000);

      res.json({
        pair: 'ETH/USD',
        price: price.toFixed(2),
        rawPrice: roundData.answer.toString(),
        decimals: decimals.toString(),
        description,
        roundId: roundData.roundId.toString(),
        lastUpdated: lastUpdated.toISOString(),
        method: 'latestRoundData',
        source: 'Chainlink Decentralized Oracle Network',
        contractAddress: CONTRACTS.CHAINLINK_ETH_USD
      });
    }

  } catch (error) {
    console.error('ETH/USD Error details:', error);

    res.status(500).json({
      error: 'Failed to fetch ETH/USD price',
      details: error.message,
      contractAddress: CONTRACTS.CHAINLINK_ETH_USD
    });
  }
});

// Get BTC/USD price from Chainlink oracle
app.get('/api/chainlink/price/btc', async (req, res) => {
  try {
    console.log('Creating BTC/USD contract with address:', CONTRACTS.CHAINLINK_BTC_USD);

    const contract = new web3.eth.Contract(
      CHAINLINK_PRICE_FEED_ABI,
      CONTRACTS.CHAINLINK_BTC_USD
    );

    const [roundData, decimals, description] = await Promise.all([
      contract.methods.latestRoundData().call(),
      contract.methods.decimals().call(),
      contract.methods.description().call()
    ]);

    const price = Number(roundData.answer) / Math.pow(10, Number(decimals));
    const lastUpdated = new Date(Number(roundData.updatedAt) * 1000);

    res.json({
      pair: 'BTC/USD',
      price: price.toFixed(2),
      rawPrice: roundData.answer.toString(),
      decimals: decimals.toString(),
      description,
      roundId: roundData.roundId.toString(),
      lastUpdated: lastUpdated.toISOString(),
      source: 'Chainlink Decentralized Oracle Network',
      contractAddress: CONTRACTS.CHAINLINK_BTC_USD
    });
  } catch (error) {
    console.error('BTC/USD Error details:', error);
    res.status(500).json({
      error: 'Failed to fetch BTC/USD price',
      details: error.message,
      contractAddress: CONTRACTS.CHAINLINK_BTC_USD
    });
  }
});

// Start server with connection verification
app.listen(port, () => {
  console.log(`🚀 Blockchain API running on port ${port}`);
  console.log(`📍 Endpoints available at http://localhost:${port}/api`);
  console.log(`🔗 Web3 RPC: ${process.env.WEB3_RPC_URL || 'NOT SET'}`);

  // Test Web3 connection on startup
  web3.eth.getBlockNumber()
    .then(blockNumber => {
      console.log(`✅ Connected to Ethereum! Latest block: ${blockNumber}`);
    })
    .catch(error => {
      console.error('❌ Web3 connection failed:', error.message);
    });
});

Package.json

{
  "name": "blockchain-api",
  "version": "1.0.0",
  "description": "Production-ready blockchain API with Chainlink price feeds",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "web3": "^4.0.0",
    "dotenv": "^16.0.3"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  },
  "keywords": ["blockchain", "ethereum", "web3", "api", "chainlink", "defi"],
  "author": "Your Name",
  "license": "MIT"
}

Environment (.env)

WEB3_RPC_URL=https://eth.llamarpc.com
PORT=3000

Gitignore (.gitignore)

node_modules/
.env
.DS_Store

Tags: #blockchain #ethereum #web3 #nodejs #javascript #api #defi #chainlink #cryptocurrency #smartcontracts

Say Goodbye to Color Guessing: Enable HSL Previews in Tailwind + VSCode

Flavio Espinoza — Thu, 27 Mar 2025 00:12:41 +0000

If you're working with Tailwind CSS and custom color variables in Visual Studio Code, you might have noticed an annoying limitation: VSCode doesn't display the handy color preview box when your HSL values aren't properly formatted. Today, we'll explore a simple but impactful solution to this problem.

The Problem: Missing Color Previews in VSCode

When defining custom CSS variables for colors in your Tailwind CSS project, you might write them like this:

:root {
    --primary: 0 0% 9%;
}

While this is technically correct CSS (using the modern space-separated HSL syntax), VSCode doesn't recognize this format for its color preview functionality. The small color box that normally appears next to color values is conspicuously absent, making it harder to visualize your color scheme at a glance.

The Solution: Wrapping HSL Values Properly

The fix is remarkably simple - we just need to wrap these values in the hsl() function:

:root {
    --primary: hsl(0 0% 9%);
}

This small change makes all the difference. VSCode now properly recognizes these as color values and displays the color preview box, while maintaining identical functionality in your Tailwind CSS setup.

Why This Matters for Tailwind CSS Developers

Improved Developer Experience: Instant visual feedback on your color variables speeds up development and reduces errors.
Maintains Compatibility: This change doesn't affect how Tailwind CSS processes these variables - they work exactly the same way in your application.
Future-Proofing: The hsl() function is standard CSS and works across all modern browsers.

Implementation in Your Project

To implement this across your project:

Search for all instances of --[a-z-]+: \d+ %? \d+%? \d+%?; in your CSS files
Replace them with --$1: hsl($2 $3 $4); (using your editor's regex replace functionality)
Verify all colors still work as expected

Here's how a developer might prompt an AI to perform this CSS color format conversion, along with before/after examples:

Example AI Prompt:

begin-ai-prompt

I need to convert CSS color variables from space-separated HSL to the hsl() function format for better VSCode color previews.

Task:
Find all CSS custom properties (like --primary: 0 0% 9%;) and rewrite them using hsl(), like --primary: hsl(0 0% 9%);.

Matching pattern:
Regex: --([a-z-]+): (\d+) (%?)(\d+%?) (%?)(\d+%?);

Replacement rule:
--$1: hsl($2 $3$4 $5$6);

Example Before:

:root {
    --background: 0 0% 98%;
}

Expected After:

:root {
    --background: hsl(0 0% 98%);
}

Please apply this change across the entire CSS file while keeping all other code intact.

@layer base {
    :root {
        --background: 0 0% 98%;
        --foreground: 0 0% 3.9%;
        --primary: 0 0% 9%;
        --secondary: 0 0% 96.1%;
        --accent: 12 76% 61%;
        --border: 0 0% 89.8%;
    }

    .dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
        --primary: 0 0% 98%;
    }
}

end-ai-prompt

Full Before & After Example

Tested and confirmed with ChatGPT and DeepSeek

Before Conversion (Original CSS)

@layer base {
    :root {
        --background: 0 0% 98%;
        --foreground: 0 0% 3.9%;
        --primary: 0 0% 9%;
        --secondary: 0 0% 96.1%;
        --accent: 12 76% 61%;
        --border: 0 0% 89.8%;
    }

    .dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
        --primary: 0 0% 98%;
    }
}

View in VSCode

After Conversion (AI-Processed CSS)

@layer base {
    :root {
        --background: hsl(0 0% 98%);
        --foreground: hsl(0 0% 3.9%);
        --primary: hsl(0 0% 9%);
        --secondary: hsl(0 0% 96.1%);
        --accent: hsl(12 76% 61%);
        --border: hsl(0 0% 89.8%);
    }

    .dark {
        --background: hsl(0 0% 3.9%);
        --foreground: hsl(0 0% 98%);
        --primary: hsl(0 0% 98%);
    }
}

View in VSCode

Key Notes for the AI Prompt

The regex ensures only CSS custom properties with HSL-like values are modified.
The replacement preserves the original variable names (--background, --primary, etc.).
The AI should not modify other CSS rules (like @layer, .dark, or non-color properties).
The change is purely syntactic—functionality remains identical.

Tailwind Config

To make this work, you must ensure that the syntax in your tailwind.config.ts file is correct.

Correct:

background: 'var(--background)'

Incorrect:

background: 'hsl(var(--background))'

Bonus Tip: VSCode HSL Preview

For even better HSL support in VSCode, consider installing the CSS Variable AutoComplete extension, which provides enhanced color previews and autocomplete for CSS variables.

Conclusion

This tiny syntax adjustment - adding hsl() around your color variables - requires minimal effort but delivers immediate quality-of-life improvements for frontend developers working with Tailwind CSS. It's one of those small optimizations that, once you start using it, you'll wonder how you worked without it.

Have you made similar small-but-impactful optimizations to your development workflow? Share your tips in the comments below!

Supercharge Your Coding with AI-Enhanced Shell Aliases

Flavio Espinoza — Sun, 23 Mar 2025 20:08:49 +0000

To streamline project analysis and improve collaboration with ChatGPT, I created a set of aliases: pfiles, pfilescd, ptree, ptreecd, pg, and pgcd. These aliases generate .txt files that provide a comprehensive overview of a project's structure and codebase. These files can be uploaded to ChatGPT for help with coding, debugging, and refactoring.

Aliases Overview

1. `pfiles`

Purpose: Concatenates all .ts, .tsx, .json, and .md files in the src directory into a single file.
Output File: <project-name>-files-YYYY-MM-DD.txt
Usage:

  pfiles

2. `pfilescd`

Purpose: Concatenates all text-based files in the current directory (excluding common build/system folders and .txt files), prefixing each section with the filename.
Output File: <project-name>-files-YYYY-MM-DD__<current-directory>.txt
Usage:

  pfilescd

3. `ptree`

Purpose: Creates a tree view of the src directory, excluding ignored folders and files.
Output File: <project-name>-structure-YYYY-MM-DD.txt
Usage:

  ptree

4. `ptreecd`

Purpose: Creates a tree view of the current directory with filtering.
Output File: <project-name>-structure-YYYY-MM-DD__<current-directory>.txt
Usage:

  ptreecd

5. `pg` The g stands for GO!

Purpose: Runs pfiles and then ptree in sequence.
Usage:

pg

6. `pgcd`

Purpose: Runs pfilescd and then ptreecd in sequence.
Usage:

  pgcd

Setting Up Custom Aliases in `.zshrc` and `.bash_profile`

This section shows how to create a reusable alias file (~/.zshrc_my_aliases), import it into your main shell config (.zshrc or .bash_profile), and make sure it's sourced properly.

Step 1: Create the Alias File

Open the alias file using VS Code:

code ~/.zshrc_my_aliases

Paste the following content into it:

# pfiles alias: Finds and concatenates files in the 'src' directory (with extensions .ts, .tsx, .json, .md) into a file named <project-name>-files-YYYY-MM-DD.txt.
alias pfiles="find src -type f \\( -name '*.ts' -o -name '*.tsx' -o -name '*.json' -o -name '*.md' \\) -exec echo '===== {} =====' \\; -exec cat {} \\; > $(basename $(pwd))-files-$(date +%Y-%m-%d).txt 2>/dev/null && echo '✅ $(basename $(pwd))-files-$(date +%Y-%m-%d).txt created.'"

# pfilescd alias: Finds and concatenates all text-based files in the current directory (excluding 'node_modules', '.git', '.next', '/temp', and '.txt' files) into a file named <project-name>-files-YYYY-MM-DD__<current-directory>.txt. Each file's content is prefixed with its path for clarity.
alias pfilescd='project_name=$(basename "$(git rev-parse --show-toplevel 2>/dev/null || pwd)") && current_dir=$(basename "$PWD") && date_str=$(date +%F) && filename="${project_name}-files-${date_str}__${current_dir}.txt" && find . -type f \( -name "*.js" -o -name "*.ts" -o -name "*.tsx" -o -name "*.json" -o -name "*.md" -o -name "*.html" -o -name "*.css" \) ! -path "*/node_modules/*" ! -path "*/.git/*" ! -path "*/.next/*" ! -path "*/temp/*" ! -name "*.txt" -exec sh -c '"'"'for file; do echo "===== $file ====="; cat "$file"; echo; done'"'"' sh {} + > "$filename" && echo "Saved to $filename"'

# ptree alias: Generates a directory tree structure for the 'src' directory only, excluding 'node_modules', '.git', 'dist', '.next', and '.txt' files. Saves the output to a file named <project-name>-structure-YYYY-MM-DD.txt.
alias ptree="tree src -I 'node_modules|.git|dist|.next|*.txt' -L 10 > $(basename $(pwd))-structure-$(date +%Y-%m-%d).txt 2>/dev/null && echo '✅ $(basename $(pwd))-structure-$(date +%Y-%m-%d).txt created.'"

# ptreecd alias: Generates a directory tree structure for the current directory (excluding 'node_modules', '.git', 'dist', '.next', '/temp', and '.txt' files) and saves it to a file named <project-name>-structure-YYYY-MM-DD__<current-directory>.txt.
alias ptreecd='project_name=$(basename "$(git rev-parse --show-toplevel 2>/dev/null || pwd)") && current_dir=$(basename "$PWD") && date_str=$(date +%F) && filename="${project_name}-structure-${date_str}__${current_dir}.txt" && tree -I "node_modules|.git|dist|.next|temp|*.txt" > "$filename" && echo "Saved to $filename"'

# pg alias: Runs pfiles first to create a file list, then runs ptree to generate a directory tree structure.
alias pg="pfiles && ptree"

# pgcd alias: Runs pfilescd followed by ptreecd to generate both the concatenated file contents and the directory structure of the current project.
alias pgcd='pfilescd && ptreecd'

Step 2: Import into `.zshrc`

Edit your .zshrc file:

code ~/.zshrc

Add the following line at the end:

source ~/.zshrc_my_aliases

Then reload your terminal config:

source ~/.zshrc

Step 3: Bash Users – Import into `.bash_profile`

If you're using Bash:

code ~/.bash_profile

Add this line:

source ~/.zshrc_my_aliases

Then reload:

source ~/.bash_profile

Example Output Files

Assume your project is called ai-chat-assistant.

1. `ai-chat-assistant-files-2025-03-23.txt`

Contains the contents of all matching files in src.

Example:

// ===== src/app/layout.tsx =====
import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import './globals.css'

...

// ===== src/app/page.tsx =====
import React from 'react'

export default function Page() {
    return (
        <div>
            <h1 className="text-lg font-bold">App Page</h1>
            <p>This is the app page content.</p>
        </div>
    )
}

...

2. `ai-chat-assistant-structure-2025-03-23.txt`

Contains the tree structure of the src folder.

Example:

src
├── app
│   ├── layout.tsx
│   └── page.tsx
└── components
    └── ui
        ├── button.tsx
        └── card.tsx

How to Use with ChatGPT

Generate the .txt files using pg or pgcd.
Upload them in the ChatGPT chat window.
Use a prompt like:

I'm working on a Next.js TypeScript project called `ai-chat-assistant`.

1. `ai-chat-assistant-files-2025-03-23.txt`: all code content.
2. `ai-chat-assistant-structure-2025-03-23.txt`: directory layout.

Can you help debug `src/app/api/chat/route.ts`?

Benefits

Quickly packages relevant project files for review.
Gives ChatGPT proper context.
Works across directories and project structures.
Easy to reuse and extend.

DEV Community: Flavio Espinoza

Why Skid Row's, 'I Remember You' Still Cuts Through the Noise

The Fentanyl Imaginarium: Waking Up to a Life You Never Lived

The Baddest MF in the Valley: A Statement of Posture

What the image communicates:

And the text does exactly what it’s supposed to do for your team:

From a culture-design standpoint, this works because:

The "Yellow Pages Paradox": How ChatGPT v5.2 Broke Accessibility & Utility

The Regression of Intelligence

1. The "Yellow Pages" Paradox

2. The Accessibility Failure

3. The Provocation (Exhibit A)

4. The Ultimate Failure

5. The Competitor Check

Conclusion

I Built a Screenshot Organizer That Uses GPT-4V to Make My Chaos Searchable

The Problem

The Solution

How It Works

Installation

The Stack

What GPT-4V Extracts

Why Bash?

Try It

Building a Production-Ready Blockchain API with Node.js and Web3.js

🚀 Introduction

🎯 What We're Building

🛠️ Prerequisites

📦 Project Setup

🌐 Environment Configuration

💻 Code Implementation

🏠 Main API Endpoint

🔍 Network Verification

🪙 ERC-20 Token Analysis

💰 Chainlink Price Feeds

🚀 Server Startup

🧪 Testing Your API

Test the endpoints:

🔧 Understanding the Magic

Chainlink Oracles: Decentralized Price Feeds

ERC-20 Token Standard

Web3.js vs Traditional APIs

🚨 Production Considerations

Rate Limiting & Caching

Better RPC Providers

Error Handling & Monitoring

Input Validation

🎯 What's Next?

🔥 Advanced Features:

🛡️ Enterprise Features:

💡 Key Takeaways

🔗 Resources

🚀 Deploy Your API

💻 Complete Code

Package.json

Environment (.env)

Gitignore (.gitignore)

Say Goodbye to Color Guessing: Enable HSL Previews in Tailwind + VSCode

The Problem: Missing Color Previews in VSCode

The Solution: Wrapping HSL Values Properly

Why This Matters for Tailwind CSS Developers

Implementation in Your Project

Example AI Prompt:

Full Before & After Example

Before Conversion (Original CSS)

View in VSCode

After Conversion (AI-Processed CSS)

View in VSCode

Key Notes for the AI Prompt

Tailwind Config

Bonus Tip: VSCode HSL Preview

Conclusion

Supercharge Your Coding with AI-Enhanced Shell Aliases

Aliases Overview

1. pfiles

2. pfilescd

3. ptree

4. ptreecd

5. pg The g stands for GO!

6. pgcd

1. `pfiles`

2. `pfilescd`

3. `ptree`

4. `ptreecd`

5. `pg` The g stands for GO!

6. `pgcd`

Setting Up Custom Aliases in `.zshrc` and `.bash_profile`

Step 2: Import into `.zshrc`

Step 3: Bash Users – Import into `.bash_profile`

1. `ai-chat-assistant-files-2025-03-23.txt`

2. `ai-chat-assistant-structure-2025-03-23.txt`