DEV Community: Werliton Silva

Why Your React App Feels Slow (Hint: It’s Your Apollo Cache Strategy)

Werliton Silva — Mon, 09 Feb 2026 18:55:48 +0000

Hey dev! If you’ve ever felt the frustration of watching a component "flicker" white or take precious seconds to load info the user has already seen, you know that state management is no joke.

Imagine you're building a financial dashboard. The user clicks on their profile, goes back home, checks settings... If every single click triggers a full request to the server, you're not just burning processing power - you're delivering a clunky experience. This is exactly why Apollo Client wasn't just born as a "fetcher," but as a powerful caching engine.

Today, we’re getting straight to the point: mastering Apollo Fetch Policies so you can decide exactly when to hit the cache and when to knock on the server’s door.

The Heart of Performance: Apollo's Cache

Apollo Client doesn't just fetch data; it normalizes and stores it. When you run a query, Apollo creates a local map. If you request that same data again, Apollo decides - based on your configuration - whether to go to the network or hand over what it already has instantly.

1. cache-first (The Smart Default)

This is the default policy. Apollo looks at the cache: "Do I have this?" If yes, it returns it and never touches the network. If no, it fetches from the server and saves it for next time.

Use Case: Product category lists that rarely change.
Practical Example:

// Perfect for a list of tags the user already loaded when opening the app
const { data, loading } = useQuery(GET_CATEGORIES, {
  fetchPolicy: 'cache-first',
});

2. network-only (Maximum Consistency)

Here, the cache is ignored for reading. Apollo always hits the server for the latest version. Note: It still saves the result to the cache for future queries using cache-first.

Use Case: Bank balances or real-time transaction statuses.
Practical Example:

// Ensures the user sees the updated balance immediately after a transfer
const { data, loading } = useQuery(GET_USER_BALANCE, {
  fetchPolicy: 'network-only',
});

3. cache-only (Offline/Instant Mode)

In this policy, Apollo will never make a network request. If the data isn't in the cache, it returns an error or undefined.

Use Case: Secondary components that depend on data already loaded by a "parent" or the Home screen.
Practical Example:

// Displaying a username in a sidebar, assuming the login process already loaded this
const { data } = useQuery(GET_USER_BASIC_INFO, {
  fetchPolicy: 'cache-only',
});

4. no-cache (Privacy & Ephemerality)

Similar to network-only, it always goes to the server. The big difference? It doesn't store the result. The data disappears as soon as the component unmounts.

Use Case: Sensitive compliance data (GDPR) or temporary logs that shouldn't persist in memory.
Practical Example:

// Fetching audit logs that you don't want floating around in browser memory
const { data } = useQuery(GET_SENSITIVE_LOGS, {
  fetchPolicy: 'no-cache',
});

Quick Comparison

Policy	Data Source	Saves to Cache?	Primary Goal
cache-first	Cache (or Network if empty)	Yes	Loading Speed
network-only	Always Network	Yes	Data Consistency
cache-only	Always Cache	N/A	Zero Latency / Offline
no-cache	Always Network	No	Security & Memory Savings

Conclusion

Setting the right fetchPolicy is what separates an amateur React app from a high-performance professional one. There is no single "best" policy - only the right policy for your user's specific flow. Balancing server load with cache speed is the secret to a fluid UX.

Did you find this technical tip helpful? If you want to see how to configure next-fetch-policy to handle background updates while showing cached data, drop a comment below!

Have you ever struggled with "stale data" using the default cache? Let me know how you handled it!

Hands-on: Building Your Monorepo with Lerna and Yarn Workspaces

Werliton Silva — Fri, 09 Jan 2026 14:59:00 +0000

If you're tired of jumping from repository to repository just to update a single shared function, this guide is for you. Today, we're going to build a robust Monorepo foundation using the power of Lerna and the efficiency of Yarn Workspaces.

Why is this duo unbeatable? 🤝

Before we dive into the code, let's look at the "why":

Yarn Workspaces: Handles the heavy lifting of dependencies. It prevents duplication and ensures your internal packages communicate seamlessly.
Lerna: Acts as the conductor. It makes it easy to run commands in bulk (like running tests across 10 packages at once) and manages versioning for publishing.

Step-by-Step: From Zero to Monorepo

1. Preparing the Ground

Create your project folder and initialize Git:

mkdir my-monorepo && cd my-monorepo
git init
yarn init -y

2. Activating Yarn Workspaces

Open your package.json and add the lines below. This is crucial to tell Yarn where your sub-projects will live:

{
  "name": "my-monorepo",
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

Note: We set "private": true because the root repository itself should not be published to NPM.

3. Initializing Lerna

With Yarn ready, let's bring in Lerna to manage the workflow:

npm install --global lerna
lerna init

This will create a lerna.json file---the brain of our orchestration.

4. Creating Your First Packages

Let's set up a structure with two example packages:

mkdir packages
mkdir packages/api packages/web-app

# Initializing each one
cd packages/api && yarn init -y
cd ../web-app && yarn init -y

Managing Dependencies Like a Pro 🚀

This is where the magic happens. With Yarn Workspaces, you don't need to enter each folder to install something.

Common Dependency (across all packages):
```
yarn add lodash -W
```

Specific Dependency (only for one package):

# Adding React only to the web-app
workspace web-app yarn add react

The Power of Single Commands with Lerna

Imagine you have 5 packages, and all of them have a test script in their package.json. Instead of running them one by one, simply use:

lerna run test

Lerna will traverse every folder inside packages/ and execute the test in each one. Pure productivity!

💡 Best Practices to Keep You on Track

Organization is Everything: Keep naming clear. For example: @my-project/ui, @my-project/utils.
Document the Root: Maintain a README.md in the root explaining how to run the entire project.
Automation: Set up a CI (like GitHub Actions) to run lerna run build whenever a new Pull Request is opened.

Conclusion

Setting up a monorepo with Lerna + Yarn Workspaces is the first step toward scaling software engineering projects with quality. You gain consistency, reuse code efficiently, and stop fighting package management.

Want to dive deeper?

Did you find this tutorial helpful? Do you have any questions about the setup? Let's talk in the comments below! 👇

Monorepo Demystified: Turborepo vs. Lerna vs. Nx - Which one should you choose? 🚀

Werliton Silva — Thu, 08 Jan 2026 14:37:51 +0000

Have you ever felt like you're fighting a losing battle trying to keep libraries synced across multiple different repositories? If the answer is yes, you need to talk about Monorepos.

In this article, we’ll demystify this concept and compare the 3 tools that dominate the market: Turborepo, Lerna, and Nx.

What is a Monorepo, anyway? 🤔

Unlike the traditional multirepo approach (one repository for each project), a Monorepo is a single repository that houses multiple packages or applications.

Imagine having your Frontend, Backend, and shared UI component library all living in one place, yet perfectly organized. The main benefits are:

Seamless Code Sharing: Say goodbye to npm publish every time you update an internal component.
Total Consistency: A single version of dependencies (like React or Jest) across all projects.
Fluid Collaboration: Changes affecting multiple systems can be made in a single Pull Request.

Comparison: The 3 Management Giants

Managing a monorepo "by hand" is nearly impossible. This is where orchestration tools come in. Let’s break them down:

1. Turborepo (The Formula 1) 🏎️

Focused on extreme speed. If you’re looking for performance without the headache, Turbo is the way to go.

Key Advantage: Features an intelligent caching system (both local and remote). If the code hasn't changed, it won't recompile. Simple as that.
Ideal for: Projects that prioritize simplicity and ultra-fast build times.

# Get started now
npx create-turbo@latest

2. Lerna (The Classic) 📚

The tool that popularized the concept. It is robust, flexible, and extremely well-known within the community.

Key Advantage: A massive community. If you run into an error, someone has likely already solved it on Stack Overflow.
Ideal for: Projects that need highly customized package publishing and versioning workflows.

Bash

# Get started now
npm install --global lerna
lerna init

3. Nx (The Swiss Army Knife) 🛠️

Nx isn't just a build tool; it's a full-blown development platform.

Key Advantage: Extreme modularity and flawless native support for Angular, React, and Node.js. It understands your code's dependency graph better than anyone.
Ideal for: Large-scale enterprises and complex ecosystems that require rigorous standards.

Bash

# Get started now
npx create-nx-workspace@latest

Comparison Table: Quick Decision Guide

Feature	Turborepo	Lerna	Nx
Performance	High (Go-based)	Medium	High
Learning Curve	Low	Medium	High
Ecosystem	Growing	Massive	Established
Main Focus	Build/Caching	Versioning	Tooling/Standardization

Conclusion: What's your next move?

There is no "silver bullet." If you want speed and simplicity, go with Turborepo. If you need power and structure, Nx is king. If you're looking for tradition and flexibility, Lerna is still a solid choice.

Pro-tip: Explore the official documentations and test a small project in each one before migrating your entire architecture.

🔗 Useful Links to Dive Deeper:

I Accidentally Exposed My API Keys to 50,000 Users (And How You Can Avoid My $3,000 Mistake)

Werliton Silva — Wed, 07 Jan 2026 13:43:10 +0000

It was 2 AM on a Tuesday. My phone wouldn't stop buzzing.

"Dude, your AWS bill is insane this month." - My CTO

I rubbed my eyes, opened the AWS console, and my heart dropped. $2,847.63 in unexpected charges. Someone had discovered my API keys buried in my React bundle and was mining cryptocurrency using my S3 buckets.

The worst part? I thought I was being "secure" by using environment variables.

Spoiler alert: I wasn't.

The Brutal Truth Nobody Tells Junior Devs

Here's what they don't teach you in bootcamp: Everything you ship to the frontend is PUBLIC.

I mean everything.

That .env file? Public.

That "hidden" API key? Public.

That token you "obfuscated"? Still public.

Let me show you exactly what I did wrong (and what you might be doing right now).

My Original "Secure" Code (That Wasn't Secure At All)

// ❌ What I thought was secure
// .env.production
REACT_APP_STRIPE_SECRET=sk_live_51H...
REACT_APP_AWS_KEY=AKIAIOSFODNN7EXAMPLE

// src/checkout.js
const stripe = Stripe(process.env.REACT_APP_STRIPE_SECRET)
const payment = await stripe.charges.create({
  amount: 5000,
  currency: 'usd',
  source: token
})

The Problem:

When Webpack builds your app, it literally replaces process.env.REACT_APP_STRIPE_SECRET with the actual string. Anyone can open DevTools, search the bundle, and find it in ~30 seconds.

Don't believe me? Try it yourself:

Open any website (including some you'd consider "professional")
Hit F12 → Sources tab
Ctrl+F and search for "API" or "secret" or "key"
Watch the magic happen

Real Attack Scenarios I've Seen

Scenario 1: The Crypto Mining Incident (My Story)

What Happened:

Hacker found my AWS credentials → Spun up 50 EC2 instances → Mined Monero for 3 days → $3K bill

The Exposed Code:

// Found in main.bundle.js
const AWS_ACCESS_KEY = "AKIAIOSFODNN7EXAMPLE"
const AWS_SECRET_KEY = "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"

Scenario 2: The Startup That Lost Customer Data

A Y Combinator startup exposed their Firebase admin SDK key in their frontend. Attacker downloaded their entire user database (200K emails, names, addresses). Company shut down within 6 months due to GDPR fines.

Their Mistake:

// ❌ NEVER do this
const admin = require('firebase-admin')
admin.initializeApp({
  credential: admin.credential.cert({
    projectId: process.env.REACT_APP_PROJECT_ID,
    privateKey: process.env.REACT_APP_PRIVATE_KEY, // 😱
    clientEmail: process.env.REACT_APP_CLIENT_EMAIL
  })
})

Scenario 3: The API Bill From Hell

Developer exposed their OpenAI API key. Someone automated 500K requests. Bill: $12,000 in one weekend.

The Right Way: Backend as Your Security Bodyguard

Think of your backend as a bouncer at a club. The frontend is the drunk dude trying to get in. Never trust the drunk dude.

Architecture That Actually Works

┌──────────────┐
│   Frontend   │  "Hey, can I get some data?"
│   (Public)   │  + User session token only
└──────┬───────┘
       │ HTTPS
       ▼
┌──────────────┐
│   Backend    │  "Let me check if you're legit..."
│  (Private)   │  → Validates user session
└──────┬───────┘  → Uses API keys internally
       │          → Returns sanitized data
       ▼
┌──────────────┐
│  External    │
│  Services    │
└──────────────┘

Code Example: The Correct Pattern

// ✅ Frontend (public code)
// src/api/checkout.js
export async function createPayment(amount) {
  const userToken = localStorage.getItem('authToken')

  const response = await fetch('/api/create-payment', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${userToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ amount })
  })

  return response.json()
}

// ✅ Backend (private code)
// server/routes/payments.js
app.post('/api/create-payment', authenticateUser, async (req, res) => {
  // Validate user session
  if (!req.user) {
    return res.status(401).json({ error: 'Unauthorized' })
  }

  // API key stays on server - NEVER exposed
  const stripe = Stripe(process.env.STRIPE_SECRET_KEY)

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: req.body.amount,
      currency: 'usd',
      customer: req.user.stripeCustomerId
    })

    res.json({ clientSecret: paymentIntent.client_secret })
  } catch (error) {
    res.status(500).json({ error: 'Payment failed' })
  }
})

Why This Works:

Frontend only knows about the user's session token
Stripe secret key lives only on the server
If token is stolen, rate limiting + expiration limits damage
Server validates every request

Common Excuses I Hear (And Why They're Wrong)

"But I obfuscated the code!"

// ❌ This doesn't help
const k = btoa('my-secret-key')
const apiKey = atob(k) // Still visible in bundle

Base64 isn't encryption. A 12-year-old can decode it.

"But it's just a read-only key!"

Great! Now hackers can:

Enumerate your entire dataset
Find security holes
DoS your API with unlimited requests
Clone your entire application

"But I restricted the API key to my domain!"

Referer headers can be spoofed. CORS helps, but it's not bulletproof:

// Attacker's code
fetch('https://your-api.com/data', {
  headers: { 'Origin': 'https://your-domain.com' }
})

Some APIs check this properly (Google Maps, Firebase), many don't.

What You CAN Safely Expose

Not all environment variables are evil. Here's what's actually OK:

// ✅ These are fine in frontend
REACT_APP_API_URL=https://api.myapp.com
REACT_APP_ENVIRONMENT=production
REACT_APP_VERSION=2.1.4
REACT_APP_SENTRY_DSN=https://public@sentry.io/123

// Google Maps with domain restrictions
REACT_APP_GOOGLE_MAPS_KEY=AIzaSyC...

// Firebase client config (with Security Rules)
REACT_APP_FIREBASE_API_KEY=AIzaSyD...
REACT_APP_FIREBASE_AUTH_DOMAIN=app.firebaseapp.com

The Rule:

If it can be abused without user authentication → Backend only

If it's restricted by domain/rules → Frontend OK (with caution)

Quick Wins: Security Checklist

Copy-paste this into your next PR:

## Security Checklist
- [ ] No API keys, secrets, or tokens in frontend code
- [ ] All sensitive operations go through authenticated backend routes
- [ ] Rate limiting implemented (express-rate-limit)
- [ ] CORS configured correctly
- [ ] Input validation on all endpoints
- [ ] User tokens have expiration (JWT: 1-24 hours max)
- [ ] HTTPS enforced in production
- [ ] Security headers set (helmet.js)
- [ ] .env files in .gitignore
- [ ] Different credentials per environment

The $5 Solution That Saved My Ass

After my incident, I implemented this simple middleware. It's saved me countless times:

// middleware/rateLimiter.js
const rateLimit = require('express-rate-limit')
const RedisStore = require('rate-limit-redis')

const limiter = rateLimit({
  store: new RedisStore({ client: redisClient }),
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // Max 100 requests per window
  message: 'Too many requests, chill out bro',
  standardHeaders: true,
  handler: (req, res) => {
    // Log suspicious activity
    logger.warn('Rate limit exceeded', {
      ip: req.ip,
      user: req.user?.id,
      endpoint: req.path
    })
    res.status(429).json({ error: 'Rate limit exceeded' })
  }
})

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

Cost: $5/month for Redis

Saved: $3K+ in potential abuse

The Ultimate Test

Before you deploy, do this:

Build your production bundle: npm run build
Open build/static/js/main.*.js
Search for: "key", "secret", "token", "password", "api"
If you find ANYTHING sensitive → DO NOT DEPLOY

Bonus points: Automate this check in your CI/CD:

# .github/workflows/security-check.yml
- name: Check for exposed secrets
  run: |
    npm run build
    if grep -r "sk_live\|api_key\|secret" build/; then
      echo "🚨 Found exposed secrets!"
      exit 1
    fi

Real Talk: Lessons From My $3K Mistake

Environment variables in frontend ≠ secure

They're just placeholders. Webpack bakes them into your bundle.
Security through obscurity doesn't work

If you can see it in DevTools, so can everyone else.
Your backend is your friend

It's not "over-engineering." It's the difference between a secure app and a hacked app.
Rate limiting is non-negotiable

Even if your keys are secure, someone will try to DoS you.
Assume breach

Build your architecture assuming someone will find a way in. Limit the damage they can do.

TL;DR (For My Fellow ADHD Devs)

Frontend = Public. Period.
Secrets = Backend only. No exceptions.
User authentication ≠ API authentication. Don't mix them up.
Rate limit everything. Your wallet will thank you.
Test before deploy. grep your bundle for secrets.

Resources That Actually Helped Me

OWASP Top 10 - Security fundamentals
express-rate-limit - Easy rate limiting
helmet.js - Security headers made easy
git-secrets - Prevent committing secrets

Got war stories about exposed API keys? Drop them in the comments. Let's learn from each other's expensive mistakes. 😅

And hey, if this saved you from a $3K AWS bill, maybe buy me a coffee? ☕

Follow me @werliton for more hard-learned lessons in web development.

P.S. If you're thinking "this won't happen to me" - that's exactly what I thought. Don't be 2 AM me, frantically Googling "how to revoke AWS keys." Be better. Secure your shit. 🔒

Migrating a Static HTML/CSS/JS Project to React Using Vite - A Step-by-Step Guide

Werliton Silva — Wed, 05 Nov 2025 14:50:00 +0000

This article presents a concise, academic, and practical step-by-step procedure to convert an existing static website (HTML, CSS, JavaScript) into a React application scaffolded with Vite. The goal is to provide a reproducible pathway that emphasizes conceptual clarity and pragmatic code transformations. Each step includes precise actions and example code snippets intended to be executed directly in a typical development environment.

Prerequisites

Node.js and npm (or Yarn) installed.
Basic familiarity with HTML, CSS, and vanilla JavaScript.
A working copy of the original static site (HTML files, CSS, JS, and assets).

Resume

1. Initialize a Vite React Project

Create a new Vite React project in a fresh directory.

# Using npm
npm create vite@latest my-react-site -- --template react

# Or using Yarn
yarn create vite my-react-site --template react

Install dependencies and open the project in your editor.

cd my-react-site
npm install
code .

The generated scaffold provides an entry point (index.html), a main.jsx or main.tsx (if TypeScript template chosen), an App.jsx, and a development server configured via Vite.

2. Import the Static Site into the New Structure

Copy static assets (images, fonts, icons) from the original project into src/assets/ (or public/ if you want them available as static assets).
Transfer CSS files into src/styles/ or convert global styles into src/index.css. If the original site used multiple CSS files, consolidate or maintain them under src/styles/.
Move any plain JavaScript utilities into src/utils/ as plain modules. These will later be imported into components as needed.

Example file layout after transfer

my-react-site/
├── index.html
├── package.json
└── src/
    ├── assets/
    │   └── logo.png
    ├── styles/
    │   └── main.css
    ├── utils/
    │   └── helpers.js
    ├── main.jsx
    └── App.jsx

3. Understand and Adapt `index.html` and the Entry Point

Inspect the Vite index.html. It contains the root element where React will mount, e.g. <div id="root"></div>.
In Vite, index.html is a template. Keep only the static HTML head content (meta tags, title, link to favicon) and let React manage the DOM under the root element.
Confirm main.jsx mounts the React application:

// src/main.jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './styles/main.css';

createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

4. Migrate the Page Markup into `App.jsx`

Open a representative HTML page from the original site. Copy the body structure that composes the user interface into App.jsx.
Convert static HTML to JSX syntax:
- Replace class with className.
- Close void elements (e.g., <img />, <input />).
- Convert inline event handlers (e.g., onclick) into React props (onClick).
- Ensure attribute names follow JSX conventions (for → htmlFor, tabindex → tabIndex, etc.).

Tip: To speed up conversion of large chunks of HTML to valid JSX, you can use the free online tool HTML to JSX Converter provided by Ritz078. On that site, you paste your static HTML in one panel and it instantly outputs JSX in the other panel. It also offers toggles and settings to adjust conversion behavior for React Native or SVG. (transform.tools)

Example conversion

// src/App.jsx
import React from 'react'
import Header from './components/Header'
import Footer from './components/Footer'
import './styles/main.css'

function App() {
  return (
    <>
      <Header />
      <main>
        <section className="hero">
          <h1>Original Site Title</h1>
          <p>Introductory text ported from static HTML.</p>
        </section>
        {/* Additional content goes here */}
      </main>
      <Footer />
    </>
  )
}

export default App

5. Componentize the Interface

Identify logical UI sections: header, footer, navigation, card/list items, hero, forms, etc.
Create a src/components/ directory and implement each section as a functional component. Keep components small and focused.

Header example

// src/components/Header.jsx
import React from 'react';
import logo from '../assets/logo.png';

export default function Header() {
  return (
    <header className="site-header">
      <img src={logo} alt="Site Logo" className="logo" />
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </nav>
    </header>
  );
}

Import and use the components from App.jsx.

6. Replace Inline Scripts with React State and Handlers

Identify interactive features implemented in vanilla JavaScript (e.g., toggles, show/hide, simple tab behavior).
Translate those behaviors into React using useState and handler functions.

Simple toggle example

// src/components/ToggleText.jsx
import React, { useState } from 'react';

export default function ToggleText() {
  const [visible, setVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setVisible((v) => !v)}>
        {visible ? 'Hide' : 'Show'} details
      </button>
      {visible && <p>Details converted from original script.</p>}
    </div>
  );
}

Remove global DOM queries (document.querySelector) and inline script tags; prefer local component state and props.

7. Convert Data-Driven Lists to `.map()` Rendering

If the original site renders repeated elements (cards, lists), encode the data as an array of objects in a module or within component state.
Render the list using .map() and supply a stable key for each element.

List example

// src/data/items.js
export const items = [
  { id: 1, title: 'Item 1', text: 'Description 1' },
  { id: 2, title: 'Item 2', text: 'Description 2' }
];

// src/components/ItemList.jsx
import React from 'react';
import { items } from '../data/items';

export default function ItemList() {
  return (
    <section>
      {items.map((item) => (
        <article key={item.id} className="card">
          <h2>{item.title}</h2>
          <p>{item.text}</p>
        </article>
      ))}
    </section>
  );
}

8. Handle Forms as Controlled Components

Replace native form scripts with controlled form inputs to capture user input in React state.

Controlled form example

// src/components/SubscribeForm.jsx
import React, { useState } from 'react';

export default function SubscribeForm() {
  const [email, setEmail] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    console.log('Email submitted:', email);
    setEmail('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <button type="submit">Subscribe</button>
    </form>
  );
}

Replace any inline validation logic with state-driven validation or use a lightweight form library when complexity grows.

9. Integrate Utilities and External Scripts

Utilities previously loaded via script tags (e.g., helper functions) should be converted into ES modules and imported where needed.
For third-party libraries that manipulate the DOM directly (e.g., jQuery plugins), prefer React-compatible alternatives or wrap them carefully within useEffect to avoid conflicts with React's rendering model.

10. Style Management

If the original project used global CSS, continue to use it by importing the stylesheet in main.jsx or App.jsx. For improved encapsulation, consider:

CSS Modules: Component.module.css and import as styles.
CSS-in-JS: styled-components or similar libraries.
Utility frameworks: Tailwind CSS.

Maintain accessibility attributes (ARIA) and semantic HTML elements when converting markup.

Example CSS import

// src/main.jsx
import './styles/main.css';

11. Optional: Introduce Client-Side Routing

If the original project had multiple pages and you wish to maintain the single-page application model, install and configure a routing library.

npm install react-router-dom

Example minimal router setup:

// src/App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

12. Project Organization and Best Practices

Adopt a clear folder structure to maintain scalability and readability:

src/
├── assets/
├── components/
├── data/
├── pages/
├── styles/
├── utils/
├── App.jsx
└── main.jsx

Guiding principles:

Small, single-responsibility components.
Lift state up only when necessary.
Prefer props for data flow and callbacks for child-to-parent communication.
Use descriptive filenames and consistent naming conventions.

13. Build and Deployment

Verify the production build process provided by Vite.

# build for production
npm run build

# preview production build locally
npm run preview

Deploy to modern static hosts (for example: Vercel, Netlify, or GitHub Pages). Ensure correct configuration of the host to serve index.html for client-side routing (if routing is used).

Conclusion

This guide articulates a direct, repeatable transformation from a static HTML/CSS/JS site into a component-based React application using Vite. The process emphasizes incremental migration: import assets and global styles, port markup to JSX, componentize, replace direct DOM manipulation with React state and handlers, and reorganize code for maintainability. Adhering to these steps produces a React application that preserves the original design while gaining modularity, testability, and scalability.

Refs:

Master Regex for Free: 3 Fun and Interactive Sites Every Dev Should Know

Werliton Silva — Fri, 10 Oct 2025 19:27:51 +0000

💡 Learning Regex doesn't have to be a confusing mess of slashes and symbols. It can be visual, interactive, and engaging - without paying a cent.

Here are 3 of the best free and interactive websites that turn the dreaded Regular Expression into a game. Whether you're trying to validate emails, scrape data, or just decipher patterns, these tools will level up your Regex skills while you play.

1. RegexOne Here

Learn the fundamentals of Regex with progressive, step-by-step interactive lessons. You solve simple challenges, like finding the first occurrence of a word, all the way up to complex concepts like capturing groups.

Why it's awesome:

Ideal for absolute beginners starting from square one.
A lesson-by-lesson approach with immediate feedback on exercises.
Focuses on simple, practical examples.
Extremely clean interface with no distractions.

Recommended for: Beginners to Intermediate

Totally free. No signup required.

2. RegexRoo (Wildcard Challenges) 🐾Here

Help the "kangaroo" find the patterns! RegexRoo focuses on a game style where you must use wildcards, quantifiers, and character classes to "capture" the correct string from a wall of text.

Why it's awesome:

Specific focus on essential patterns like the wildcard (.), *, and +.
Immediate visual feedback shows exactly which characters your expression is matching.
The gamified approach (pattern treasure hunt) makes practice feel addictive.

Recommended for: All levels (Great for honing speed and accuracy)

100% free and interactive.

3. RegexLearn Here

This site provides a highly structured and comprehensive Regex course. It offers a complete learning path, integrated quick references, and tutorials for advanced techniques.

Why it's awesome:

Comes with an integrated Cheat Sheet for instant symbol lookup.
Covers advanced topics like Assertions (Lookaheads/Lookbehinds) clearly.
Allows practice in the style of Regex101 (the industry-standard tool), prepping you for professional use.

Recommended for: Intermediate to Advanced (To master the more obscure tricks)

Free to use. Access essential resources with no login required.

Which of these three interactive sites are you going to tackle first?

Drop a comment below with the first pattern you plan to master, and be sure to follow for the next part of the Regex Master series!

Stop Waiting for APIs: Unlock Instant Speed with React's Optimistic Updates

Werliton Silva — Thu, 02 Oct 2025 13:47:03 +0000

Tchaca was developing a new feature and noticed something annoying: every time a user clicked "like," the interface would take a few seconds to respond while waiting for the server. During that time, the screen seemed frozen, and the experience was frustrating.

She thought, "Do I really need to wait for the server to show what the user already knows they requested?" 🤔

That's when she discovered optimistic updates - a way to make the interface feel more fluid, giving the impression of an immediate response, even before the server actually confirms it.

In web applications, the latency between the client and server can significantly impact user experience. Optimistic updates are a powerful technique to improve perceived performance by updating the interface before the server confirms the action.

Concept

An optimistic update involves immediately updating the local state after a user action, assuming the server operation will succeed. If the server confirms, the UI remains unchanged; if it fails, the update is rolled back.

Final Result

This technique is especially useful for fast interactions such as:

Liking posts
Adding items to a shopping cart
Voting in polls
Updating lists

Benefits

Perceived speed: users see changes instantly.
Smooth experience: avoids a “frozen” UI while waiting for the server.
Easy rollback: reversing a failed action is straightforward.

Practical Example

Without Optimistic Update

function App() {
  const [likes, setLikes] = React.useState(0);

  function addLike() {
    fakeApiCall().then(() => {
      setLikes(likes + 1); // Updates only after server response
    });
  }

  return (
    <div>
      <p>{likes} Likes</p>
      <button onClick={addLike}>Like</button>
    </div>
  );
}

In this approach, the UI only updates after the server responds, causing noticeable delays if the API is slow.

With Optimistic Update

function App() {
  const [likes, setLikes] = React.useState(0);

  function addLike() {
    // Update locally immediately
    setLikes(prev => prev + 1);

    // Call the server
    fakeApiCall().catch(() => {
      // Rollback if there’s an error
      setLikes(prev => prev - 1);
    });
  }

  return (
    <div>
      <p>{likes} Likes</p>
      <button onClick={addLike}>Like</button>
    </div>
  );
}

Technical tip: using the callback version of setLikes (prev => prev + 1) ensures state consistency even with rapid multiple interactions.

Technical Considerations

Efficient rollback: always plan to revert the UI on errors.
Avoid inconsistencies: use previous-state updates (prev) to prevent race conditions.
Backend synchronization: logging or event queues can help reconcile states if multiple updates fail.
Cache management: libraries like React Query, SWR, or Apollo Client provide built-in support for optimistic updates and automatic server sync.

When to Use

Fast and predictable server operations.
Interactions that don’t require immediate confirmation.
Cases where a fast UX outweighs immediate absolute consistency.

Technical Summary:

Optimistic updates in React let the local state be updated before the server responds, improving UX and perceived performance. If the server operation fails, the UI is reverted, ensuring consistency.

Unlock Your Voice: 5 TED-Style Communication Techniques for Beg

Werliton Silva — Thu, 25 Sep 2025 14:58:00 +0000

Now that your voice is warmed up, let’s explore strategies used by top speakers, especially in TED Talks:

1. 🧭 Start with a Story

Stories build connection. Begin your talk with a personal anecdote or metaphor that relates to your topic.

Example: “When I broke my first production code, I learned more about communication than JavaScript…”

2. ⏳ Use Strategic Pauses

Pauses create impact. They help your audience absorb key points and make your speech feel more confident.

Tip: After a powerful statement, pause. Let silence do the work.

3. 🧠 Simplify Your Language

Avoid jargon when explaining to beginners or non-tech audiences. Use analogies and simple examples.

Example: “Think of your code like a cake recipe. If one ingredient is missing, the result won’t be what you expected.”

4. 🎯 Focus on One Big Idea

Great talks revolve around one core message. Everything you say should reinforce that idea.

Ask yourself: “If the audience remembers one thing, what should it be?”

5. 🧍‍♂️ Use Body Language

Gestures, posture, and facial expressions matter. Practice in front of a mirror or record yourself to observe your non-verbal cues.

TED speakers use the stage as part of their message. You can use your space too!

🚀 Final Thoughts

These exercises and techniques are simple but powerful. If you're starting out in tech, remember: communicating well is just as important as coding well.

Train your voice like you train your code. And if you want to go further, start recording short videos explaining tech concepts — it’s a fast track to becoming a confident communicator.

Did you know any of these techniques already? Got a favorite one? Share in the comments below! 👇

How We Solved Commit Chaos with a Custom Commitlint Rule

Werliton Silva — Thu, 25 Sep 2025 14:55:00 +0000

The Problem: Everyone Commits Differently

You know that moment when you're reviewing code and think,
"Wait… what Jira task is this commit even related to?"

Yeah, we lived that.

In our team, each Jira task had a clear ID like TWSF-1234, but our commit messages? A wild mix. Some had the task ID, some didn’t. Some were super descriptive, others… not so much.

We knew we needed to fix this. Not just for ourselves, but for future us - the ones debugging, deploying, or trying to understand what happened two sprints ago.

💡 The Idea: Let’s Automate the Standard

We didn’t want to rely on memory or discipline alone. We wanted a system that would guide developers to write consistent, traceable commit messages - without being annoying.

That’s when we found **Commitlint**.

Commitlint checks your commit messages and makes sure they follow a set of rules. You can use standard rules, or - and this is where it gets fun - you can write your own.

🛠️ Our Custom Rule: Enforcing Jira Task IDs

We created a rule that checks if the scope of the commit message matches our Jira task format: TWSF-<number>. If it doesn’t, the commit is rejected with a friendly message.

Here’s what our config looks like:

module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
        'twsf-task-scope': [2, 'always'],
    },
    plugins: [
        {
            rules: {
                'twsf-task-scope': ({ scope }) => {
                    const regex = /^TWSF-\d+$/;
                    const isValid = regex.test(scope);
                    return [
                        isValid,
                        'Scope must follow the pattern TWSF-<task-number>, e.g., TWSF-1234',
                    ];
                },
            },
        },
    ],
};

✅ Valid commit:

feat(TWSF-1234): add export button to report

❌ Invalid commit:

fix(report): fix export bug

The second one gets blocked with a clear message telling the dev what to fix.

📦 Sharing the Rule Across Projects

We didn’t stop there. To make this reusable across all our projects, we packaged the rule into a private npm library. Now, any team in the company can install it and instantly get the same commit standards.

Here’s how we did it:

Created a new npm package with the config.
Published it privately using our company scope.
In each project, we just install and extend it:

npm install --save-dev @ourcompany/commitlint-config-twsf

And in commitlint.config.js:

module.exports = require('@ourcompany/commitlint-config-twsf');

🎯 The Result: Clean, Consistent, Traceable Commits

Now every commit tells a story. It’s linked to a Jira task, easy to understand, and consistent across the board. No more guessing, no more digging.

If your team struggles with messy commit messages, I highly recommend trying this out. It’s simple, effective, and makes a real difference in day-to-day development.

Want help setting it up? Drop a comment or message me — happy to share what worked for us.

You’re Not Using AI Prompts to Their Full Potential - Meet RTF and BAB

Werliton Silva — Tue, 23 Sep 2025 14:58:00 +0000

Prompt engineering is evolving fast, and while TAG and RISE are powerful tools, there are other frameworks that can help you get even better results from AI models. In this post, we’ll explore two lesser-known but super useful models: RTF and BAB.

🧠 Prompt RTF Framework

RTF stands for:

Role: Define the AI’s persona or function.
Task: Describe the task you want it to perform.
Format: Specify the format of the output.

✅ Example:

Prompt: Act as a UX designer. Create a checklist for onboarding screens. Show me in bullet points.

Role: UX designer

Task: Create a checklist

Format: Bullet points

This framework is great when you want clarity and structure in the output.

🔄 Prompt BAB Framework

BAB stands for:

Before: Explain the current situation or problem.
After: Describe the desired outcome.
Bridge: Ask the AI to create a solution that connects the two.

✅ Example:

Prompt: Before: I struggle to stay focused while coding.

After: I want to work in 90-minute deep focus sessions.

Bridge: Suggest a daily routine and tools to help me get there.

BAB is perfect for problem-solving, goal setting, and behavioral change prompts.

🧭 When to Use RTF vs BAB?

Use Case	RTF	BAB
Structured output	✅	❌
Role-based tasks	✅	❌
Personal development	❌	✅
Problem-solving	❌	✅
Creative formats	✅	✅

💬 Final Thoughts

RTF and BAB are great additions to your prompt engineering toolkit. Whether you're building apps, writing content, or just trying to get better answers from ChatGPT, these frameworks help you guide the AI more effectively.

Try mixing them with other techniques like few-shot prompting or chain-of-thought reasoning for even better results.

Happy prompting! 🚀

Unlock Your Voice: 8 Vocal Exercises Communication Techniques for Beginner Developers

Werliton Silva — Tue, 23 Sep 2025 14:49:00 +0000

Ever felt your voice freeze when trying to explain an idea? Or that your speech doesn’t keep up with your thoughts during a presentation? If so, this post is for you!

Communication is a critical skill for developers — whether you're explaining a solution, defending a technical decision, or sharing knowledge. The good news? You can train it!

Here are 8 practical vocal exercises to unlock your voice and 5 powerful techniques used by world-class speakers to improve your communication — even if you're just starting out.

🎤 Part 1: Vocal Exercises to Unlock Your Speech

1. 🎶 The Power of “La La La”

Inspired by the movie Sister Act, this exercise helps loosen up your tongue. Watch "Oh Happy Day - Sister Act". she teaches a youth choir to warm up with “la la la”.

Tip: Imagine you're part of the choir and follow along. It’s fun and surprisingly effective!

2. 💨 Lip Trills

Before any talk or recording, make a motorboat sound by blowing air through your lips. Repeat 5 times, with breathing pauses.

This relaxes your facial muscles and improves articulation.

3. ✏️ The Pen Exercise

Place a pen horizontally between your teeth and try speaking simple phrases. This forces your mouth to articulate more clearly and slows down your speech.

Great for improving clarity and rhythm!

4. 🔊 SI FU XI PA

Say these syllables with emphasis, stressing each one individually: SI, FU, XI, PA.

Helps train vocal tone and control.

5. 👅 Tongue 360º

Move your tongue in a circular motion inside your mouth. This relaxes your jaw, cheeks, and chin.

Perfect for reducing tension before speaking.

6. 🧠 Tongue Twister #1

In a nest of gagafos, there are seven gagafinhos...

Say it as fast as you can without messing up — or mess up and try again!

Classic exercise to loosen up your mouth and improve verbal agility.

7. 🧵 Tongue Twister #2

The rat gnawed the rich robe of the king of Rome...

Focus on the R sound — it demands precise articulation.

Excellent for improving diction!

8. 🕷️ Tongue Twister #3

The spider scratches the frog. The frog scratches the spider...

Try saying it fast and clearly. It’s a challenge, but it’s a workout for your speech muscles.

🚀 Final Thoughts

These exercises and techniques are simple but powerful. If you're starting out in tech, remember: communicating well is just as important as coding well.

Train your voice like you train your code. And if you want to go further, start recording short videos explaining tech concepts — it’s a fast track to becoming a confident communicator.

Did you know any of these techniques already? Got a favorite one? Share in the comments below! 👇

Why Senior Frontend Devs Use jest.spyOn - And You Should Too

Werliton Silva — Thu, 18 Sep 2025 14:58:00 +0000

If you're writing tests for frontend applications and still not using jest.spyOn, you're missing out on one of the most powerful tools Jest offers.

Let me show you why, when, and how to use it — with real examples that will level up your testing game.

💡 What is `jest.spyOn`?

jest.spyOn lets you monitor and control how a function behaves during a test — without changing the original implementation.

You can:

Check if a function was called
Control its return value
Track how many times it was triggered
Restore it after the test

🧪 Example 1: Spying on a Utility Function

// utils/date.js
export function formatDate(date) {
  return new Intl.DateTimeFormat('en-US').format(date);
}

// components/Greeting.js
import { formatDate } from '../utils/date';

export function Greeting({ date }) {
  return <p>Hello! Today is {formatDate(date)}</p>;
}

import * as dateUtils from '../utils/date';

test('calls formatDate with correct date', () => {
  const spy = jest.spyOn(dateUtils, 'formatDate');
  render(<Greeting date={new Date('2025-09-16')} />);
  expect(spy).toHaveBeenCalledWith(new Date('2025-09-16'));
  spy.mockRestore();
});

🧪 Example 2: Mocking a Function Temporarily

spy.mockReturnValue('September 16, 2025');

test('renders mocked date', () => {
  const spy = jest.spyOn(dateUtils, 'formatDate').mockReturnValue('September 16, 2025');
  const { getByText } = render(<Greeting date={new Date()} />);
  expect(getByText(/September 16, 2025/)).toBeInTheDocument();
  spy.mockRestore();
});

🧠 When to Use `jest.spyOn`

Use it when:

You want to observe a function without replacing it
You need to mock a function temporarily
You’re testing side effects or interactions
You want to avoid testing implementation details

🚫 When Not to Use It

Avoid jest.spyOn when:

You’re testing pure functions directly (use jest.fn() instead)
You’re mocking entire modules (use jest.mock())

📌 Best Practices

Always mockRestore() after your test to avoid side effects
Use spy.mockImplementation() for custom behavior
Keep your tests focused: spy only what’s necessary

🧨 Final Thoughts

jest.spyOn is like a magnifying glass for your tests — it lets you zoom in on behavior without rewriting code. Use it wisely, and your tests will be cleaner, smarter, and more maintainable.

Liked this? Follow me for more practical testing tips and frontend insights. Let’s write code that’s not just functional — but testable and reliable.

DEV Community: Werliton Silva

Why Your React App Feels Slow (Hint: It’s Your Apollo Cache Strategy)

The Heart of Performance: Apollo's Cache

1. cache-first (The Smart Default)

2. network-only (Maximum Consistency)

3. cache-only (Offline/Instant Mode)

4. no-cache (Privacy & Ephemerality)

Quick Comparison

Conclusion

Hands-on: Building Your Monorepo with Lerna and Yarn Workspaces

Why is this duo unbeatable? 🤝

Step-by-Step: From Zero to Monorepo

1. Preparing the Ground

2. Activating Yarn Workspaces

3. Initializing Lerna

4. Creating Your First Packages

Managing Dependencies Like a Pro 🚀

The Power of Single Commands with Lerna

💡 Best Practices to Keep You on Track

Conclusion

Want to dive deeper?

Monorepo Demystified: Turborepo vs. Lerna vs. Nx - Which one should you choose? 🚀

What is a Monorepo, anyway? 🤔

Comparison: The 3 Management Giants

1. Turborepo (The Formula 1) 🏎️

2. Lerna (The Classic) 📚

3. Nx (The Swiss Army Knife) 🛠️

Comparison Table: Quick Decision Guide

Conclusion: What's your next move?

🔗 Useful Links to Dive Deeper:

I Accidentally Exposed My API Keys to 50,000 Users (And How You Can Avoid My $3,000 Mistake)

The Brutal Truth Nobody Tells Junior Devs

My Original "Secure" Code (That Wasn't Secure At All)

Real Attack Scenarios I've Seen

Scenario 1: The Crypto Mining Incident (My Story)

Scenario 2: The Startup That Lost Customer Data

Scenario 3: The API Bill From Hell

The Right Way: Backend as Your Security Bodyguard

Architecture That Actually Works

Code Example: The Correct Pattern

Common Excuses I Hear (And Why They're Wrong)

"But I obfuscated the code!"

"But it's just a read-only key!"

"But I restricted the API key to my domain!"

What You CAN Safely Expose

Quick Wins: Security Checklist

The $5 Solution That Saved My Ass

The Ultimate Test

Real Talk: Lessons From My $3K Mistake

TL;DR (For My Fellow ADHD Devs)

Resources That Actually Helped Me

Migrating a Static HTML/CSS/JS Project to React Using Vite - A Step-by-Step Guide

Prerequisites

Resume

1. Initialize a Vite React Project

2. Import the Static Site into the New Structure

3. Understand and Adapt index.html and the Entry Point

4. Migrate the Page Markup into App.jsx

5. Componentize the Interface

6. Replace Inline Scripts with React State and Handlers

7. Convert Data-Driven Lists to .map() Rendering

8. Handle Forms as Controlled Components

9. Integrate Utilities and External Scripts

10. Style Management

11. Optional: Introduce Client-Side Routing

12. Project Organization and Best Practices

13. Build and Deployment

Conclusion

Refs:

Master Regex for Free: 3 Fun and Interactive Sites Every Dev Should Know

1. RegexOne Here

2. RegexRoo (Wildcard Challenges) 🐾Here

3. RegexLearn Here

Stop Waiting for APIs: Unlock Instant Speed with React's Optimistic Updates

Concept

Final Result

Benefits

Practical Example

Without Optimistic Update

With Optimistic Update

3. Understand and Adapt `index.html` and the Entry Point

4. Migrate the Page Markup into `App.jsx`

7. Convert Data-Driven Lists to `.map()` Rendering

💡 What is `jest.spyOn`?

🧠 When to Use `jest.spyOn`