Building a Content Transformation Pipeline

Peter — Fri, 08 Aug 2025 00:19:13 +0000

Processing unstructured content into a clean, well-formatted output is a common problem in software development. One elegant solution is the pipeline programming pattern. A pipeline organizes data transformations into discrete, reusable steps, making the process more maintainable, testable, and extensible.

In this article, we’ll implement a realistic example: transforming a messy email containing images, links, and text into a structured blog post.

The Scenario

We receive an email with:

Images mixed with text
Links to various websites
Embedded YouTube links
Inconsistent HTML formatting

Our goal:

Extract all images and store them in a gallery.
Detect links and turn them into clickable links, or embed if from special providers like YouTube.
Extract the clean, plain text body without formatting.

Why Pipelines Work

Instead of writing one large function that handles everything, we’ll create a sequence of small processors. Each processor:

Takes a standard input format
Outputs a standard format
Passes the result to the next processor

This structure makes the process easier to read, debug, and extend.

Implementation

Here’s an example in modern JavaScript:


javascript
class Pipeline {
  constructor(steps = []) {
    this.steps = steps;
  }
  add(step) {
    this.steps.push(step);
    return this;
  }
  run(input) {
    return this.steps.reduce((data, step) => step(data), input);
  }
}

// Processing steps
function extractImages(data) {
  const images = [...data.raw.matchAll(/<img[^>]+src="([^">]+)"/g)]
    .map(m => m[1]);
  return { ...data, images };
}

function extractLinks(data) {
  const links = [...data.raw.matchAll(/https?:\/\/[^\s<]+/g)]
    .map(m => m[0]);
  return { ...data, links };
}

function embedSpecialLinks(data) {
  const embeddedLinks = data.links.map(link => {
    if (link.includes("youtube.com")) {
      return `<iframe src="${link}" frameborder="0"></iframe>`;
    }
    return `<a href="${link}">${link}</a>`;
  });
  return { ...data, embeddedLinks };
}

function cleanText(data) {
  const text = data.raw.replace(/<[^>]*>/g, "").trim();
  return { ...data, text };
}

// Build the pipeline
const contentPipeline = new Pipeline()
  .add(extractImages)
  .add(extractLinks)
  .add(embedSpecialLinks)
  .add(cleanText);

// Example usage
const rawEmail = `
  <p>Hello <b>World</b></p>
  <img src="photo1.jpg" />
  https://youtube.com/watch?v=abc123
  https://example.com
`;

const result = contentPipeline.run({ raw: rawEmail });

console.log(result);
/*
{
  raw: "...",
  images: ["photo1.jpg"],
  links: [
    "https://youtube.com/watch?v=abc123",
    "https://example.com"
  ],
  embeddedLinks: [
    "<iframe src=\"https://youtube.com/watch?v=abc123\" frameborder=\"0\"></iframe>",
    "<a href=\"https://example.com\">https://example.com</a>"
  ],
  text: "Hello World https://youtube.com/watch?v=abc123 https://example.com"
}
*/

React Native, Right Now! (RNRN) — A Starter Kit to Build Faster, Cleaner React Native Apps

Peter — Wed, 06 Aug 2025 03:10:50 +0000

Hey DEV community,

If you’re working with React Native and want a faster way to get started — plus improve the way you write your code — I’d like to introduce you to React Native, Right Now! (RNRN), a starter kit designed with practical, real-world development in mind.

Why RNRN?

Get up and running fast with minimal setup, so you can focus on building your app, not your boilerplate.

Write cleaner, easier-to-maintain code by following smart coding patterns and best practices baked right into the architecture.

Learn better React Native habits that focus on state-driven logic and reduce the overuse of hooks.

Skip Redux bloat — RNRN uses a lighter, more flexible state management approach with Zustand and Immer.

What’s inside?

🚀 Ready-to-use architecture with best practices baked in
🧩 TypeScript for type safety and better developer experience
🔄 State management with Zustand and Immer
📝 Form handling with React Hook Form
🎨 Theming system with light/dark mode support
🌐 HTTP client with built-in request/response handling
🔐 Authentication flow with token management
📱 Navigation using React Navigation
💾 Storage system with adapter pattern for different providers
🔌 Environment configuration for development and production
📍 Geolocation services with permission handling
🔒 Permissions management
📶 Connectivity monitoring
📝 Logging system
🧪 Testing setup with Jest
📅 Date handling with DayJS
🔤 Custom fonts 
🟪 Custom Icons/SVG

And much more…

You can check it out on GitHub:
https://github.com/petertoth-dev/rn-rn

What’s coming next?

CLI for automated component/state/API generation

Premium components and themes

Automated testing enhancements

I’d love your feedback, issues, and contributions! If you find this useful, please give it a ⭐ on GitHub.

Happy coding!

Forem: Peter