I've built several custom MCP servers, ranging from basic implementations to sophisticated setups capable of commanding satellite imaging through SkyFi's API using natural language. In this tutorial, I will share my in-depth development philosophy for creating production-ready, scalable MCP (Model Context Protocol) servers. We'll break down core concepts, detailed architecture, and essential best practices.

What is an MCP Server?

An MCP server is a backend service designed to interact with various external APIs, manage complex authentication workflows, and provide structured data transformations. MCP servers facilitate natural language interactions by exposing modular, reusable "tools" to language models (LMs), enabling dynamic, secure, and efficient automation of sophisticated workflows.

Why Use an MCP Server?

• Simplified API Integration: Abstract complex external APIs into standardized, easy-to-consume tools.
• Scalability and Security: Layered architecture ensures scalability, maintainability, and robust security.
• Flexibility: Multi-method authentication and modular services provide flexibility for diverse enterprise environments.
• Enhanced User Experience: Intuitive, structured responses and comprehensive error handling greatly improve user interactions.

If you want to read more about the original outline of what an MCP server is, by the very team that originally created the MCP server standard, check out this article from Anthropic: https://www.anthropic.com/news/model-context-protocol

Core Development Philosophy

1. Enterprise-First, Developer-Friendly

My MCP server approach prioritizes enterprise-grade scalability and robust security from inception, but it also ensures simplicity and clarity for developers working with basic use cases. We can embed complexity only where its needed while also giving developers the ability to easily engage with foundational functionality without losing the extensibility of advanced scenarios.

Not AI slop… I actually wrote that… 👆

Implementation Strategies:

• Flexible Authentication: Support dual authentication modes, balancing simplicity through API key usage for straightforward integrations, alongside comprehensive OAuth 2.0 and SAML authentication mechanisms for secure, enterprise-wide deployments.
• Scalable Deployment: Offer deployment strategies that scale seamlessly from straightforward Docker containers for quick starts and prototyping to Kubernetes orchestrations designed for robust, high-availability production environments.
• Versatile Service Management: Accommodate both single-service instances for targeted applications and multi-tenant configurations suitable for large-scale, shared deployments.

2. Strict Layering with Clear Boundaries

The MCP server architecture is meticulously structured, with each layer clearly defined by distinct responsibilities, isolated interfaces, and explicit boundaries. This modular design promotes maintainability, simplifies troubleshooting, and ensures each component functions optimally within a cohesive system.

Architectural Layers:

• MCP Transport Layer: Facilitates robust communication protocols, including standard IO (STDIO), Server-Sent Events (SSE), and streamable HTTP, ensuring reliable and efficient interactions.
• FastMCP Server Layer: Integrates core framework features, dynamically filtering and exposing the appropriate tools and capabilities. The word "FastMCP" definitely seems coined and branded, which kinda is. But, it is open source, so don't worry. You can dive into FastMCP v1 and v2 in different approaches. Feel free to dive into them there.
• Service Layer: Encapsulates dedicated business logic, tailored specifically to the operational requirements of each service.
• Data Processing Layer: Handles data validation, transformation, and ensures structured, human-readable responses, enhancing data integrity and clarity.
• Authentication Layer: Implements rigorous multi-method authentication strategies to ensure secure access control tailored to diverse security demands.
• Network Layer: Manages efficient and optimized HTTP client interactions with external APIs, ensuring performance and reliability.

3. Independent, Mountable Modules

Every service within an MCP server ecosystem is structured as a self-contained, mountable module, promoting ease of deployment, maintenance, and scaling. This modular independence enhances operational agility, facilitates parallel development, and enables focused security management.

Module Characteristics:

• Dedicated Configuration: Each service module features independent, environment-based configuration factories (from_env) for consistent and flexible setup.
• Robust Authentication Validation: Modules independently verify their authentication configurations (is_auth_configured), ensuring operational readiness and secure service access.
• Isolated Client Management: Each module maintains its own dedicated client with optimized connection pooling, ensuring efficient and resilient API communications.
• Clear Logging and Error Handling: Comprehensive and distinctly scoped logging and error handling namespaces are maintained for precise diagnostics and straightforward troubleshooting.

Why this MCP Approach is a Scalable Enterprise Model

This MCP server approach is a scalable enterprise model because it fundamentally incorporates clear separation of concerns, modularity, and extensibility from the very beginning. Unlike traditional monolithic systems, which become increasingly challenging to scale and maintain due to tightly coupled components and rigid architectures, …(or just unguided AI slop)… MCP's layered with a modular structure enables incremental scaling, targeted optimizations, and independent component upgrades. Also, its multi-method authentication strategy and well-defined interfaces ensure secure integrations within complex enterprise ecosystems, which tend to accommodate evolving security requirements and diverse deployment scenarios. Within other methods (or lack there of methodology), they often lack clear separation and modular architecture which often leads to limitations in scalability, maintainability, and adaptability.

Project Structure Template

A robust project structure is critical for maintainability, scalability, and clarity. Here's a detailed breakdown of the recommended project structure:

mcp-{service-name}/
├── src/                            # Source code root
│   └── mcp_{service_name}/
│       ├── __init__.py             # Main entry point and CLI
│       ├── exceptions.py           # Custom exception classes
│       ├── servers/                # Contains server classes, middleware, and lifecycle management
│       ├── {service_a}/            # Dedicated modules for service A
│       │   ├── __init__.py
│       │   ├── client.py           # API client for service A
│       │   ├── config.py           # Configuration model for service A
│       │   └── tools.py            # MCP tools for service A
│       ├── {service_b}/            # Dedicated modules for service B
│       │   └── [same structure]
│       ├── models/                 # Data models and validation schemas
│       ├── preprocessing/          # Data transformation and preprocessing utilities
│       └── utils/                  # Common utilities (logging, auth, networking)
├── tests/                          # Comprehensive testing suite
│   ├── unit/                       # Unit tests for isolated logic
│   ├── integration/                # Integration tests for combined components
│   └── fixtures/                   # Shared test data and mocks
├── docs/                           # Documentation, guides, and references
├── Dockerfile                      # Docker configuration for containerization
└── README.md                       # Project overview and quick start guide

Detailed Server Implementation

Main Server Class

The main server class acts as the central orchestrator. It is responsible for the server's lifecycle, configuring middleware, and, most importantly, dynamically filtering which tools are available based on the current context (e.g., user permissions, server configuration). This ensures that a language model is only exposed to the tools it is authorized and able to use.

import logging
from typing import Any
from fastmcp import FastMCP, MCPTool
from starlette.middleware import Middleware
from .context import MainAppContext
from .dependencies import get_available_services
from .{service_a} import service_a_mcp

logger = logging.getLogger("mcp-server.main")

class {ServiceName}MCP(FastMCP[MainAppContext]):
    """
    Custom FastMCP server with multi-service support and dynamic tool filtering.
    This class overrides the default tool discovery to apply business logic.
    """
    async def _mcp_list_tools(self) -> list[MCPTool]:
        """Filters and lists available tools based on application context."""
        req_context = self._mcp_server.request_context
        if req_context is None or req_context.lifespan_context is None:
            logger.warning("Lifespan context not available, returning no tools.")
            return []

        app_context = req_context.lifespan_context.get("app_lifespan_context")
        if not app_context:
            return []

        all_tools = await self.get_tools()
        filtered_tools = [
            tool_obj.to_mcp_tool(name=tool_name)
            for tool_name, tool_obj in all_tools.items()
            if self._should_include_tool(tool_name, tool_obj, app_context)
        ]
        return filtered_tools

    def _should_include_tool(self, tool_name: str, tool_obj: Any, context: MainAppContext) -> bool:
        """Applies multi-level filtering logic for tool inclusion."""
        # Filter 1: Exclude tools if they are explicitly disabled.
        if context.enabled_tools and tool_name not in context.enabled_tools:
            return False

        # Filter 2: Exclude tools with 'write' operations if in read-only mode.
        if context.read_only and "write" in tool_obj.tags:
            return False

        # Filter 3: Exclude tools if their parent service is not configured.
        tool_tags = tool_obj.tags
        for service_name in ["service_a", "service_b"]:
            if service_name in tool_tags:
                if not getattr(context, f"full_{service_name}_config"):
                    return False
        return True

    def http_app(self, middleware=None):
        """Defines a middleware pipeline for auth, logging, and request handling."""
        from .servers.middleware import UserTokenMiddleware

        auth_middleware = Middleware(UserTokenMiddleware, mcp_server_ref=self)
        final_middleware = [auth_middleware]
        if middleware:
            final_middleware.extend(middleware)

        return super().http_app(middleware=final_middleware)

Service Configuration

Each service module requires a detailed configuration class. Using a dataclass with a from_env class method allows for type-safe, validated configuration loaded securely from environment variables. This prevents misconfigurations and keeps secrets out of the codebase.

from __future__ import annotations
import os
from dataclasses import dataclass
from typing import Optional, List, Dict

@dataclass
class {ServiceName}Config:
    """Configuration for the {ServiceName} service, loaded from environment variables."""
    url: str                                  # Base URL of the service API

    # Authentication Methods (in order of precedence)
    oauth_client_id: Optional[str] = None     # OAuth client identifier
    oauth_client_secret: Optional[str] = None # OAuth client secret
    personal_token: Optional[str] = None      # Personal Access Token for enterprise
    api_key: Optional[str] = None             # Simple API key auth

    # Network settings
    ssl_verify: bool = True
    timeout: int = 30

    @classmethod
    def from_env(cls) -> {ServiceName}Config:
        """Constructs configuration from environment variables."""
        return cls(
            url=os.getenv("{SERVICE_NAME}_URL", ""),
            oauth_client_id=os.getenv("{SERVICE_NAME}_OAUTH_CLIENT_ID"),
            oauth_client_secret=os.getenv("{SERVICE_NAME}_OAUTH_CLIENT_SECRET"),
            personal_token=os.getenv("{SERVICE_NAME}_PERSONAL_TOKEN"),
            api_key=os.getenv("{SERVICE_NAME}_API_KEY"),
            ssl_verify=os.getenv("{SERVICE_NAME}_SSL_VERIFY", "true").lower() == "true",
            timeout=int(os.getenv("{SERVICE_NAME}_TIMEOUT", "30")),
        )

    def is_auth_configured(self) -> bool:
        """Checks if any valid authentication method is configured."""
        # Checks for OAuth, PAT, or API Key credentials.
        has_oauth = self.oauth_client_id and self.oauth_client_secret
        has_pat = bool(self.personal_token)
        has_api_key = bool(self.api_key)
        return has_oauth or has_pat or has_api_key

Service Client

A robust client class is essential for interacting with external APIs. It should encapsulate all logic for making requests, including handling authentication, retries, and error management. This isolates network concerns from the business logic within the tools themselves.

import httpx
import logging
from typing import Any, Optional
from .config import {ServiceName}Config
from ..exceptions import {ServiceName}APIError, {ServiceName}AuthenticationError

logger = logging.getLogger("mcp-server.{service_name}.client")

class {ServiceName}Client:
    """Asynchronous HTTP client for the {ServiceName} API."""

    def __init__(self, config: {ServiceName}Config, user_token: Optional[str] = None):
        self.config = config
        self.user_token = user_token
        self._client: Optional[httpx.AsyncClient] = None

    async def _ensure_client(self):
        """Initializes and configures the httpx.AsyncClient if not already present."""
        if self._client is None:
            headers = {"User-Agent": "MCP-{ServiceName}/1.0"}
            # Precedence: User-provided token > Server-configured token
            token = self.user_token or self.config.personal_token
            if token:
                headers["Authorization"] = f"Bearer {token}"
            elif self.config.api_key:
                headers["X-API-Key"] = self.config.api_key

            self._client = httpx.AsyncClient(
                base_url=self.config.url,
                headers=headers,
                verify=self.config.ssl_verify,
                timeout=self.config.timeout,
            )

    async def get(self, endpoint: str, params: Optional[dict] = None) -> Any:
        """Executes an authenticated GET request with error handling."""
        await self._ensure_client()
        try:
            response = await self._client.get(endpoint, params=params)
            response.raise_for_status()
            return response.json()
        except httpx.HTTPStatusError as e:
            if e.response.status_code == 401:
                raise {ServiceName}AuthenticationError("Authentication failed.")
            raise {ServiceName}APIError(f"API Error: {e.response.text}")
        except httpx.RequestError as e:
            raise {ServiceName}APIError(f"Network Error: {str(e)}")

    async def __aenter__(self):
        return self

    async def __aexit__(self, exc_type, exc, tb):
        if self._client:
            await self._client.aclose()

Authentication Architecture

Multi-Method Authentication

A scalable MCP server must support multiple authentication strategies to accommodate different environments. The architecture should follow a clear order of precedence, prioritizing the most secure and context-specific methods first.

• Per-Request OAuth 2.0/PAT (Highest Priority): A token provided in the request header (Authorization: Bearer ...). This is ideal for multi-tenant systems where each user has their own credentials.
• Server-Configured Personal Access Token (PAT): A single token configured via environment variables, suitable for self-hosted or single-user enterprise environments.
• Server-Configured API Key/Token: A simpler static key for standard cloud integrations where OAuth is overkill.
• Basic Authentication (Legacy): Username and password, included for compatibility with older systems.

Authentication Middleware

Middleware is the component that intercepts every incoming request to extract and validate authentication tokens. It systematically checks headers for credentials and attaches them to the request's state, making them available to service clients and tools securely without passing them as function arguments.

from starlette.middleware.base import BaseHTTPMiddleware, RequestResponseFunction
from starlette.requests import Request
from starlette.responses import Response

class UserTokenMiddleware(BaseHTTPMiddleware):
    """
    Middleware to extract Bearer or API key tokens from request headers
    and attach them to the request state for per-request authentication.
    """
    async def dispatch(self, request: Request, call_next: RequestResponseFunction) -> Response:
        auth_header = request.headers.get("Authorization")
        api_key_header = request.headers.get("X-API-Key")

        user_auth_token = None
        user_auth_type = None

        if auth_header and auth_header.startswith("Bearer "):
            user_auth_token = auth_header.split(" ")[1]
            user_auth_type = "bearer"
        elif api_key_header:
            user_auth_token = api_key_header
            user_auth_type = "api_key"

        request.state.user_auth_token = user_auth_token
        request.state.user_auth_type = user_auth_type

        response = await call_next(request)
        return response

Tool Development

Tool Organization

For clarity and maintainability, tools should be organized by feature domain, not by their technical operation (e.g., GET, POST). This makes the codebase intuitive and easier for developers to navigate.

# ✅ GOOD: Organization by feature domain
{service_name}/
├── projects.py       # Tools related to project management (create, get, list)
├── issues.py         # Tools for issue tracking (create, search, update)
└── users.py          # User management tools (get, invite)

# ❌ BAD: Organization by CRUD operation
{service_name}/
├── read.py           # Contains get_project, get_issue, get_user
├── create.py         # Contains create_project, create_issue

Tool Definition Standards

Every tool must be clearly defined with structured annotations, comprehensive docstrings, and consistent error handling. This metadata is what allows the language model to understand how and when to use the tool correctly.

from typing import Annotated
from fastmcp import MCPError, Context
from .{service_name}.context import {ServiceName}Context

@{service}_mcp.tool(
    name="{service}_{feature}_{action}",
    description="Performs a specific action on a feature within the service.",
    tags=["{service}", "read", "{feature_category}"] # Tags for filtering
)
def {feature}_{action}_tool(
    project_id: Annotated[str, "The unique identifier for the project. Example: 'PROJ-123'"],
    context: Annotated[{ServiceName}Context, Context] # Injects service-specific context
) -> str:
    """
    Retrieves details for a specific project.

    Args:
        project_id: The ID of the project to retrieve.

    Returns:
        A formatted string containing the project details.

    Raises:
        MCPError: If the project is not found or authentication fails.
    """
    try:
        # Business logic is handled in the client
        client = context.{service}_client
        project_data = client.get_project(project_id)

        # Response formatting is handled by a dedicated utility
        return ResponseFormatter.format_item_response(project_data, item_type="Project")

    except {ServiceName}AuthenticationError as e:
        raise MCPError(f"Authentication failed for {context.service_name}: {e}")
    except {ServiceName}NotFoundError as e:
        raise MCPError(f"Project not found: {project_id}")
    except Exception as e:
        logger.error(f"Unexpected error in get_project_tool: {e}", exc_info=True)
        raise MCPError(f"An unexpected error occurred: {e}")

Data Processing Standards

Structured and human-readable responses are crucial for a good user experience. A dedicated formatting class ensures that all tools return data in a consistent, predictable, and clear manner. This greatly improves the language model's ability to interpret results and present them to the end-user.

class ResponseFormatter:
    """A utility class for formatting API responses into human-readable strings."""

    @staticmethod
    def format_item_response(item: dict, item_type: str) -> str:
        """Formats a single dictionary item into a structured Markdown string."""
        if not item:
            return f"{item_type} not found."

        lines = [
            f"# {item_type}: {item.get('name', item.get('id', 'N/A'))}",
            f"**ID**: `{item.get('id', 'N/A')}`",
            f"**Status**: {item.get('status', 'N/A')}",
            f"**Link**: {item.get('url', 'No link available')}",
            "\n## Description",
            item.get('description', 'No description provided.'),
        ]
        return "\n".join(lines)

    @staticmethod
    def format_list_response(items: list[dict], item_type: str) -> str:
        """Formats a list of items into a summary table."""
        if not items:
            return f"No {item_type}s found."

        headers = ["ID", "Name", "Status"]
        rows = [[item.get('id', 'N/A'), item.get('name', 'N/A'), item.get('status', 'N/A')] for item in items]

        # Simple text-based table generation
        header_str = " | ".join(headers)
        divider_str = " | ".join(["---"] * len(headers))
        row_strs = [" | ".join(map(str, row)) for row in rows]

        return "\n".join([header_str, divider_str] + row_strs)

Environment Configuration

Standardizing environment variable names is a simple but powerful practice for maintaining clarity and avoiding configuration errors, especially in complex deployments with multiple services.

# Convention: {SERVICE_NAME}_{COMPONENT}_{SETTING}
# Examples:
GITHUB_API_URL="https://api.github.com"
GITHUB_PERSONAL_TOKEN="ghp_xxxxxxxx"
GITHUB_TIMEOUT="45"

SLACK_API_TOKEN="xoxb-xxxxxxxx"
SLACK_SSL_VERIFY="false"

User Experience Optimization

Progressive Disclosure Documentation

Structure documentation to cater to different user needs, from a quick start for beginners to advanced guides for expert users. This approach prevents information overload and helps users find what they need quickly.

• Quick Start (30 seconds): A minimal set of commands to get the server running with basic functionality.
• Standard Setup (5 minutes): Covers common production configurations, including API key authentication and Docker deployment.
• Advanced Configuration (15+ minutes): Details enterprise features like OAuth setup, multi-tenant deployments, and custom middleware.

Error Message Standards

Provide error messages that are not only descriptive but also actionable. A good error message tells the user what went wrong, why it went wrong, and how to fix it.

class ErrorMessageTemplates:
    AUTHENTICATION_ERROR = """
    ❌ **Authentication Failed for {service_name}**

    **Cause:** The provided credentials (API Key or Token) are invalid or have insufficient permissions.
    **Solutions:**
    1. Verify your credentials in the `.env` file or request headers.
    2. Ensure the token has not expired and has the required scopes.
    3. Check the service's documentation for authentication help: {docs_url}
    """

    CONFIGURATION_ERROR = """
    ❌ **Configuration Error for {service_name}**

    **Missing Variable:** The `{missing_variable}` environment variable is not set.
    **To Fix:**
    - Set the variable in your terminal: `export {missing_variable}="value"`
    - Add it to your `.env` file: `{missing_variable}="value"`
    """

Testing Philosophy

Comprehensive Testing

A multi-layered testing strategy ensures reliability and stability. Each layer focuses on a different aspect of the system, from individual functions to the complete, integrated server.

tests/
├── unit/            # Tests for individual functions and classes in isolation.
│   ├── test_config.py
│   └── test_formatter.py
├── integration/     # Tests that verify interactions between components (e.g., client and a mock API).
│   └── test_service_a_client.py
└── mcp_protocol/    # End-to-end tests that check compliance with the MCP specification.
    └── test_tool_execution.py
└── fixtures/        # Reusable test data, mock responses, and helper factories.
    └── mock_api_responses.py

Mocking Strategy

Use mock factories to produce consistent and reliable mock objects for your tests. This ensures that tests are repeatable and not dependent on the state of external services.

from unittest.mock import Mock

class ServiceMockFactory:
    """Creates standardized mock objects for service clients for use in unit tests."""

    @staticmethod
    def create_service_client_mock(service_name: str, is_auth_ok: bool = True):
        """Creates a mock service client with predefined success or failure responses."""
        mock_client = Mock()

        if not is_auth_ok:
            mock_client.get.side_effect = {ServiceName}AuthenticationError("Invalid token")
            return mock_client

        # Configure standard successful responses
        mock_client.get.return_value = {"id": "123", "name": "Test Item"}
        mock_client.post.return_value = {"id": "456", "status": "created"}

        # Configure common error scenarios
        mock_client.get_not_found = Mock(side_effect={ServiceName}NotFoundError("Item not found"))

        return mock_client

Performance and Scalability

Caching and Connection Pooling

For high-throughput services, performance is critical. A properly configured HTTP client with effective connection pooling and caching reduces latency and minimizes the overhead of establishing new connections for every request.

import httpx

def create_optimized_http_client(base_url: str, verify: bool, timeout: int) -> httpx.AsyncClient:
    """
    Configures an optimized HTTP client with effective connection pooling
    and precise timeouts to ensure performance and reliability.
    """
    # Define connection limits to reuse connections efficiently
    limits = httpx.Limits(
        max_keepalive_connections=20,  # Max idle connections to keep open
        max_connections=100,           # Max total connections in the pool
    )

    # Configure granular timeouts
    timeouts = httpx.Timeout(
        connect=5.0,   # Time to establish a connection
        read=20.0,     # Time to wait for a chunk of the response
        write=10.0,    # Time to wait for a chunk of the request to be sent
    )

    return httpx.AsyncClient(
        base_url=base_url,
        limits=limits,
        timeout=timeouts,
        verify=verify,
        http2=True,  # Enable HTTP/2 for multiplexing if the server supports it
    )

Deployment Strategies

Container and Kubernetes-Ready Design

Design your application to be container-first using Docker. A multi-stage Dockerfile creates a small, secure, and efficient image. For scaling, use Kubernetes manifests to define deployments, services, and configurations, enabling automated scaling and high availability.

Secure Dockerfile:

# Stage 1: Builder - Installs dependencies
FROM python:3.11-slim AS builder
WORKDIR /app
RUN pip install poetry
COPY poetry.lock pyproject.toml ./
RUN poetry install --no-root --no-dev

# Stage 2: Runtime - Creates the final, minimal image
FROM python:3.11-slim
RUN useradd --create-home app
USER app
WORKDIR /home/app

# Copy dependencies from the builder stage and source code
COPY --from=builder /app/.venv ./.venv
COPY --chown=app:app src/ ./src/

# Set non-root user and define health check
ENV PATH="/home/app/.venv/bin:$PATH"
HEALTHCHECK --interval=30s --timeout=10s --retries=3 \
  CMD curl -f http://localhost:8000/healthz || exit 1

EXPOSE 8000
CMD ["python", "-m", "src.mcp_{service_name}", "--transport", "streamable-http"]

Kubernetes Deployment YAML:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: mcp-{service-name}
spec:
  replicas: 3
  selector:
    matchLabels:
      app: mcp-{service-name}
  template:
    metadata:
      labels:
        app: mcp-{service-name}
    spec:
      containers:
      - name: mcp-{service-name}
        image: your-registry/mcp-{service-name}:latest
        ports:
        - containerPort: 8000
        envFrom:
        - configMapRef:
            name: mcp-env-config
        - secretRef:
            name: mcp-api-secrets
        livenessProbe:
          httpGet:
            path: /healthz
            port: 8000
          initialDelaySeconds: 30

Monitoring and Observability

Structured Logging and Metrics

Implement structured logging (e.g., JSON format) from the start. It allows for powerful filtering and querying in modern observability platforms. This is essential for debugging issues in a distributed, containerized environment.

import structlog
import sys

def configure_logging():
    """
    Sets up structured logging using structlog to output JSON logs.
    This enables easier parsing, searching, and analysis in production.
    """
    structlog.configure(
        processors=[
            structlog.stdlib.add_log_level,
            structlog.processors.TimeStamper(fmt="iso"),
            structlog.processors.JSONRenderer(),
        ],
        logger_factory=structlog.stdlib.LoggerFactory(),
        wrapper_class=structlog.stdlib.BoundLogger,
        cache_logger_on_first_use=True,
    )

    # Example usage:
    # log = structlog.get_logger("my_app")
    # log.info("server_started", port=8000, transport="http")

Conclusion

Though this write up is pretty brief in some areas, I hope it works as a guide for you—or your AI— to guide you to building scalable, secure, and user-friendly MCP servers. If you stick to these simple principles, you ensure your MCP server deployments will be capable of handling complex enterprise scenarios. Overall, I hope you enjoyed this guide. Feel free to hit me up on X if you have follow up questions... PEACE!!! ✌️ https://x.com/PSkinnerTech

When building mobile applications with React Native, accessing the camera is often a key requirement. Whether you're capturing photos, scanning barcodes, or running real-time AI inference on video frames, the choice of camera library can make or break your app’s performance.

There are two primary approaches:

• Use the expo-camera module (for managed workflow projects)

• Use react-native-vision-camera (for bare workflow/native modules)

In this article, we’ll break down the pros and cons of each option and help you decide which one is right for your project.

🧪 Quick Comparison

🚀 Option 1: expo-camera

✅ Why Use It?

• You're building a quick prototype or MVP

• You want to stay inside the Expo Managed Workflow

• Your needs are simple: take photos, record video, maybe scan a barcode

❌ Why Avoid It?

• You don’t get direct access to raw video frames

• Advanced camera controls are absent

• Real-time ML tasks (e.g., object detection, image classification) are slow or unsupported

📦 Installation (Expo)

npx expo install expo-camera

🔧 Basic Usage

import { Camera } from 'expo-camera';

const MyCamera = () => {
  const [permission, requestPermission] = Camera.useCameraPermissions();

  if (!permission?.granted) {
    return <Button onPress={requestPermission} title="Grant Camera Access" />;
  }

  return <Camera style={{ flex: 1 }} />;
};

🔥 Option 2: react-native-vision-camera

If you want full control of the camera and need performance, this is the tool to use.

✅ Why Use It?

• You need fast access to camera frames for AI or AR.

• You want to integrate advanced features (HDR, frame rate control, manual focus)

• You’re okay configuring native modules

❌ Why Avoid It?

• You need a managed Expo workflow

• You’re avoiding native builds entirely

📦 Installation

npm install react-native-vision-camera
npx pod-install

Note: You must also configure native permissions for Android and iOS, and request runtime permissions.

⚙️ Sample Code

import { Camera, useCameraDevices } from 'react-native-vision-camera';

const MyCamera = () => {
  const devices = useCameraDevices();
  const device = devices.back;

  if (device == null) return <LoadingSpinner />;

  return (
    <Camera
      style={{ flex: 1 }}
      device={device}
      isActive={true}
    />
  );
};

🧠 VisionCamera Frame Processors

This is where vision-camera really shines. You can tap into every video frame and run real-time tasks like face detection, QR scanning, or AI inference using TFLite or custom native modules.

const frameProcessor = useFrameProcessor((frame) => {
  'worklet';
  const faces = scanFaces(frame); // Native plugin
  console.log(faces);
}, []);

🧠 Technical Breakdown: Why VisionCamera Is Superior

When performance, flexibility, or advanced use cases are involved, react-native-vision-camera clearly outperforms expo-camera. Here's why:

1. Frame Access & Native Performance

• expo-camera limitation: Does not expose raw camera frames to JavaScript or native modules.

  • Result: No real-time ML, AR, or video filters.

• react-native-vision-camera advantage: Offers Frame Processors, written in C++/Java/Objective-C and executed on a dedicated thread, not the JS thread.

  • Result: Run real-time computer vision tasks (e.g. object detection, barcode scanning) with low latency and zero dropped frames.

2. Direct Access to Native Camera APIs

• Expo wraps native APIs and only exposes what the team provides.

• VisionCamera interfaces directly with CameraX (Android) and AVCaptureSession (iOS).

  • You get:

    • Full manual control over ISO, shutter speed, zoom, focus, white balance.

    • Support for ultra-wide lenses, telephoto, HDR, depth sensors.

    • Fine-grain access to stream formats like raw or YUV.

3. No JavaScript Thread Bottlenecks

• expo-camera sends preview frames and camera actions over the JS bridge:

  • This introduces lag and frame drops.

• VisionCamera:

  • Uses GPU-backed native rendering for the preview.

  • Fully decouples camera logic from the JS thread.

  • Preview stays fluid even while running compute-heavy tasks in parallel.

4. Plugin Ecosystem & Custom Native Extensions

• VisionCamera supports a modular plugin system, enabling:

  • Custom Frame Processors (e.g., scanFaces, detectBarcodes, trackMotion).

  • Direct integration with TensorFlow Lite, MediaPipe, or even OpenCV.

  • Native code execution inside the camera pipeline for peak performance.

5. Real-Time ML/AI Processing

• AI camera apps demand low latency.

• With Expo:

  • Capture → JS bridge → process in JS → render = 🚫 too slow.

• With VisionCamera:

  • Frames processed natively within 2–5ms.

  • Consistent 30–60 FPS inference supported.

  • Enables use cases like gesture detection, object recognition, pose estimation, etc.

🔧 TL;DR – If You're Doing Anything Advanced:

🚀 Conclusion

If you need a basic camera for photos or videos and want fast setup, expo-camera is fine.

But for serious apps — especially those involving AI, AR, advanced camera controls, or high-performance UX — react-native-vision-camera is the right tool.

⚠️ Just be ready to go beyond Expo Go and configure native builds — it's worth it.

💡 Final Recommendation

Use Case Library Simple photo/video features, fast setup expo-camera Real-time ML, AR, advanced controls needed react-native-vision-camera Need to stay inside Expo Go expo-camera Willing to eject for better performance react-native-vision-camera

🧱 Wrap-Up

This is obviously written specifically for those that are working on an active project in Gauntlet AI Cohort 2. If any of you have any questions on this, feel free to hmu.

🧰 Helpful Links

• VisionCamera GitHub

• Expo Camera Docs

• VisionCamera Frame Processor Docs

Let me know if you want to dive deeper into performance benchmarks or set up a real-time ML example using VisionCamera + TensorFlow Lite!

If you're unaware, the current official MCP server for Supabase seems to not be working very well at the moment: https://github.com/supabase-community/supabase-mcp/issues/28

Setting Up Supabase MCP Server with Cursor

This guide walks through setting up the Supabase Model Context Protocol (MCP) server with Cursor, allowing you to interact with your Supabase database directly through Cursor's AI assistant.

Prerequisites

• A Supabase account with a project
• Cursor IDE installed
• Node.js installed (v18+ recommended)
• A Supabase Personal Access Token (PAT)

Step 1: Generate a Supabase Personal Access Token

1. Log in to your Supabase account at https://supabase.com/dashboard
2. Click on your profile icon in the top right corner
3. Select "Access Tokens" from the dropdown menu
4. Click "Generate new token"
5. Give your token a name (e.g., "Cursor MCP")
6. Copy the generated token (it starts with sbp_)

Step 2: Install Required Packages

The Supabase MCP server requires specific packages to work properly. Install them locally in a dedicated directory:

Mac

# Create a directory for MCP packages
mkdir -p ~/.cursor/mcp-packages

# Navigate to the directory
cd ~/.cursor/mcp-packages

# Initialize a package.json
npm init -y

# Install required packages
npm install @supabase/mcp-server-supabase @modelcontextprotocol/sdk

Windows

# Create a directory for MCP packages
mkdir -p %APPDATA%\Cursor\mcp-packages

# Navigate to the directory
cd %APPDATA%\Cursor\mcp-packages

# Initialize a package.json
npm init -y

# Install required packages
npm install @supabase/mcp-server-supabase @modelcontextprotocol/sdk

Step 3: Configure Cursor's MCP Server

Mac Setup

1. Create or edit your Cursor MCP configuration file:

mkdir -p ~/.cursor
touch ~/.cursor/mcp.json

2. Add the Supabase MCP server configuration:

{
  "mcpServers": {
    "supabase": {
      "command": "node",
      "args": [
        "/Users/YOUR_USERNAME/.cursor/mcp-packages/node_modules/@supabase/mcp-server-supabase/dist/stdio.js",
        "--access-token",
        "YOUR_SUPABASE_PAT_HERE"
      ]
    }
  }
}

3. Replace:
   • YOUR_USERNAME with your Mac username
   • YOUR_SUPABASE_PAT_HERE with your Supabase Personal Access Token

Windows Setup

1. Create or edit your Cursor MCP configuration file at %APPDATA%\Cursor\mcp.json

2. Add the Supabase MCP server configuration:

Option 1: Using npx (simpler but might have dependency issues)

{
  "mcpServers": {
    "supabase": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@supabase/mcp-server-supabase",
        "--access-token",
        "YOUR_SUPABASE_PAT_HERE"
      ]
    }
  }
}

Note: We're intentionally omitting @latest to avoid potential dependency conflicts.

Option 2: Using locally installed packages (more reliable)

{
  "mcpServers": {
    "supabase": {
      "command": "cmd",
      "args": [
        "/c",
        "node",
        "%APPDATA%\\Cursor\\mcp-packages\\node_modules\\@supabase\\mcp-server-supabase\\dist\\stdio.js",
        "--access-token",
        "YOUR_SUPABASE_PAT_HERE"
      ]
    }
  }
}

3. Replace YOUR_SUPABASE_PAT_HERE with your Supabase Personal Access Token

Step 4: Verify the MCP Server Path

Mac

1. Make sure the path to the stdio.js file is correct:

ls -la ~/.cursor/mcp-packages/node_modules/@supabase/mcp-server-supabase/dist/

2. Confirm that stdio.js exists in this directory and is executable.

Windows

1. Make sure the path to the stdio.js file is correct:

dir %APPDATA%\Cursor\mcp-packages\node_modules\@supabase\mcp-server-supabase\dist\

2. Confirm that stdio.js exists in this directory.

Step 5: Restart Cursor

1. Completely close Cursor
2. Reopen Cursor
3. The Supabase MCP server should now be available

Security Considerations and Docker Alternative

The setup described above runs the MCP server directly on your system, which has some security implications:

Potential Vulnerabilities

1. Access Token Exposure: Your Supabase PAT is stored in a plaintext file on your system
2. Dependency Security: The MCP server and its dependencies run with your user permissions
3. Network Access: The server has direct network access to Supabase from your machine

Docker-Based Alternative (More Secure)

Using Docker provides better isolation and security. Here's how to set it up:

1. Create a Dockerfile

Create a file named Dockerfile in a directory of your choice:

FROM node:18-slim

RUN npm install -g @supabase/mcp-server-supabase @modelcontextprotocol/sdk

ENTRYPOINT ["supabase-mcp", "--access-token"]
CMD ["YOUR_SUPABASE_PAT_HERE"]

Replace YOUR_SUPABASE_PAT_HERE with your Supabase PAT.

2. Build the Docker image

docker build -t supabase-mcp .

3. Update your Cursor MCP configuration

Mac/Linux

{
  "mcpServers": {
    "supabase": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "supabase-mcp"
      ]
    }
  }
}

Windows

{
  "mcpServers": {
    "supabase": {
      "command": "cmd",
      "args": [
        "/c",
        "docker",
        "run",
        "-i",
        "--rm",
        "supabase-mcp"
      ]
    }
  }
}

Security Best Practices

Regardless of which approach you choose:

1. Limit Token Permissions: Create a Supabase PAT with the minimum necessary permissions
2. Regular Updates: Keep the MCP server and dependencies updated
3. Monitor Access: Regularly audit your Supabase logs for unusual activity
4. Token Rotation: Periodically rotate your PAT for enhanced security
5. Local Network: Consider running the MCP server on a trusted local network only

Troubleshooting

Error: Cannot find module

If you see an error message like:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '@modelcontextprotocol/sdk/dist/esm/server/stdio.js'

Try the following solutions (in order of simplicity):

1. Remove @latest from npx command:

   • If you're using the npx approach with @latest suffix, remove it:

     {
     "mcpServers": {
       "supabase": {
         "command": "npx",
         "args": [
           "-y",
           "@supabase/mcp-server-supabase",
           "--access-token",
           "YOUR_SUPABASE_PAT_HERE"
         ]
       }
     }
     }
     

   • This simple change often resolves dependency conflicts

2. Use a direct local installation:

   • Make sure you've installed the packages in the correct directory
   • Check that you're using the absolute path in your configuration
   • Point directly to the stdio.js file

3. Try global installation:

   npm install -g @supabase/mcp-server-supabase @modelcontextprotocol/sdk
   

4. For Windows users:

   • Check that you're using the correct path with double backslashes in your configuration
   • If using the npx method, try switching to the local installation method

Configuration not working

1. Check your JSON syntax in mcp.json (no trailing commas, proper nesting)
2. Verify that your PAT is valid and not expired
3. Ensure you're pointing to the correct file (stdio.js, not cli.js)
4. On Windows, make sure paths use double backslashes (\\) in the JSON configuration

Using the Supabase MCP Server

Once configured, you can interact with your Supabase database through Cursor's AI assistant:

1. Ask for information about your Supabase projects
2. Query your database tables
3. Insert, update, or delete data
4. Work with Supabase storage, authentication, and functions

Example prompts:

• "Show me the schema of my Supabase database"
• "List all users in my Supabase project"
• "Create a new table in my Supabase database"
• "Query all documents created in the last week"

Resources

• Supabase MCP Documentation
• Cursor MCP Documentation
• Model Context Protocol

“If you find yourself in a fair fight, you didn’t plan accordingly.”
— Colonel David Hackworth

This is by far my favorite quote. I heard this quote for the first time around 18 years ago while I was in RIP (Ranger Indoctrination Program) while serving in the US Army. It became an anthem that I repeat in my head while I planned for pretty much anything moving forward.

It's because of this quote I became more and more meticulous in how I planned things. I took one more thing from my time with the US Army Rangers that I began applying to my professional life. It's a strategy used for mission planning. You can actually read about it in detail in the Ranger Handbook.

It's called METT-TC. Despite the fact that it's original intention is for combat mission planning, it's philosophy is easy to put into practice for pretty much anything, ESPECIALLY Developer Relations.

This article, we're going to explore how the military planning tool METT-TC can be adapted to craft robust DevRel strategies. We’ll delve into each component of METT-TC, redefine it for our context, and provide actionable insights on how to apply it to your DevRel initiatives.

The Importance of Strategic Planning in DevRel

Developer Relations is more than just outreach and retention; it’s a strategic role that bridges the gap between developers and the platform. A well-planned DevRel strategy ensures that developers are not only aware of your platform but are also engaged, productive, and advocates for your technology. There is so much that goes on within the Developer Relations role. The biggest mistake is going into the role without a meticulous plan in place.

Introducing METT-TC

METT-TC is an acronym that's used by the U.S. Army Rangers for mission planning. It's originally means is: Mission, Enemy, Terrain and Weather, Troops and Support Available, Time Available, Civilian Considerations. It's intended to know everything you could possibly know before going into a mission. Army Ranger missions are extremely high risk, so the more information you could know before going into a mission to make sure everyone comes back safe, the better.

Though Developer Relations may not seem early as serious, the lack of meticulous planning can be catastrophic to a startup's runway. Which is why I've applied the framework of METT-C to developer relations. The framework’s emphasis on thorough analysis and planning makes it highly adaptable allowing DevRels to thoroughly work through their strategy. In the end, this strategy mitigates unnecessary spending, time wasted, and DevRel burnout.

Understanding METT-TC in a DevRel Context

Original Military Definitions

Before we adapt METT-TC, let’s understand its original components that the Army Rangers use:

• Mission: The task and its purpose.

• Enemy: The adversary’s capabilities and intentions.

• Terrain and Weather: Physical environment factors affecting the mission.

• Troops and Support Available: Friendly forces and resources.

• Time Available: Time constraints for planning and execution.

• Civilian Considerations: Impact on and from the civilian population.

Adapted Definitions for DevRel

To make METT-TC relevant for DevRel, we’ll reinterpret each component:

• Mission: The DevRel objectives—who, what, when, where, and why.

• Enemy Ecosystem: The broader technological environment, including competitors and industry trends.

• Terrain and Weather Target Market: The developers we aim to attract and their characteristics.

• Troops and Support Available: Internal teams and external resources at our disposal.

• Time Available: Deadlines, timeframes, and scheduling considerations.

• Civilian Considerations Cost Considerations: Budget constraints and financial planning.

Breaking Down METT-TC for DevRel

Mission

The mission is the cornerstone of your DevRel strategy. Breaking it down into the “who, what, when, where, why” ensures that every aspect is clear and actionable.

Who

Every DevRel role is different. Some DevRels may be only focused on developers, while others may be part of every conversation. It's always important to clearly define WHO, as a DevRel, you need to focus on. Your time and attention is finite, so clearly stating who you're supposed to focus on is very important when setting expectations with your peers and superiors.

• Developers: Determine the specific group of developers you aim to reach (e.g., Solidity developers, frontend developers, blockchain engineers).

• Partners: Identify potential collaborators like educational institutions, tech communities, or industry influencers.

• Internal Teams: Recognize internal stakeholders such as product managers, engineers, marketing, and sales teams who will support the mission.

What

This is the most important component of the mission. Without understanding the targets of the mission, it becomes extremely easy to derail. This may seem a bit arbitrary, but it's extremely easy to get distracted with "side quests" that don't really assist in reaching the set targets. By clearly defining your targets, you ensure that every action taken—whether it’s producing educational content, hosting community events, or improving documentation—contributes meaningfully to your overarching mission. Establishing these targets not only will help guide your day-to-day efforts but also makes it easier to measure progress, celebrate successes, and refine your approach as needed.

• Specific Goals: Outline clear targets such as increasing platform adoption by 30%, hosting quarterly webinars, or launching a new SDK.

• KPIs: Establish key performance indicators like active developer count, engagement rates, or number of contributions.

When

Imagine multiple special ops teams in a coordinated task force moving in all on the same target. In this high intensity scenario, timing is more than just completing the mission quickly. It’s about getting the job done with speed, diligence, and synchronicity.

Well, time management is just as crucial for executing your DevRel strategy effectively. You need to be strategic in how you schedule and sequence your initiatives. Your DevRel Strategy’s mission is rarely the only mission underway, and you must account for the other priorities your team members are juggling. For example, if you share a single graphic designer with another project, you’ll need to factor in their limited availability and adjust timelines accordingly.

Of course, team member availability isn’t the only consideration. The most strategic founders, CEOs, and Senior DevRels excel at running multiple missions in parallel, carefully coordinating their timelines and completion dates based on priorities and dependencies. There’s no point in moving ahead with your content strategy before your documentation is updated, for instance. (We’ll delve into mission prioritization in a later article.)

• Milestones: Set achievable deadlines for each objective, breaking larger goals into manageable steps.

• Schedules: Align initiatives with industry events or product release cycles to maximize impact and relevance.

Where

Determining where to focus your DevRel efforts is about more than just picking a location—it’s about understanding the environments in which your target developers operate. In any military operation, you want to know everything about the terrain you’re entering:

• Where are the vantage points?

• Where are the exits?

• How easy is it to get in?

• How difficult is it to get out?

• What type of resources should we consider based on the terrain?

As for DevRel, you’ll want to consider similar questions:

• Are you aiming to reach communities in a specific region or language group?

• Do you need to prioritize online gatherings over physical meetups, or vice versa?

Recognizing the geographic and digital “terrain” you’re working in helps ensure you place your energy where it can have the greatest impact. By selecting the right areas—whether they be physical hubs of innovation or online platforms where your audience already congregates—you can more efficiently tailor your messaging, resources, and engagement strategies to match local norms and developer preferences.

• Geographical Focus: Determine whether to target local, regional, or global developer communities based on factors like language, market maturity, and proximity to key partners.

• Platforms: Identify the online spaces where your target developers are most active—such as GitHub, Stack Overflow, or specialized forums—and engage with them directly in those environments.

Why

“When you know why you’re doing what you’re doing, when you know what you’re trying to accomplish, when you know what the end state is supposed to be, that’s when you can open your mind to the different routes and the different paths that will get you there.”

— Jocko Willink

Clarifying the underlying purpose behind your DevRel strategy ensures that you’re not just going through the motions, but actually driving meaningful impact. If the "what" and "when" define your targets and timelines, then the "why" provides the compass that keeps you headed in the right direction. By aligning your mission with the company’s larger goals and understanding the intrinsic motivations and challenges faced by the developer community, you ensure that every initiative you undertake resonates with both your organization and your audience.

• Company Vision: Make sure your DevRel mission supports the overarching objectives of the company, reinforcing its values and long-term direction.

• Developer Needs: Identify the core motivations, pain points, and desires of your developers to ensure that the solutions you provide genuinely address their concerns and enhance their experience.

Ecosystem

In the same way that special operations forces must know the lay of the land before engaging, a DevRel team needs a comprehensive understanding of its operational environment to succeed. Your platform doesn’t live in isolation—it's part of a dynamic ecosystem where trends shift, competitors move, and regulations evolve.

For a great deal of this year, everyone was getting excited about zero-knowledge and fully-homomorphic encryption while, at the moment I’m writing this, AI agents like Eliza are the newest craze. Understanding how the terrain can suddenly shift and being able to make critical decisions that allow you and your team to capture and maintain developers in your ecosystem is a critical skill for all DevRels.

You mus gain and maintain situational awareness in this space. This allows you to identify strategic opportunities, prepare for potential threats, and position your platform to thrive in the long run.

Industry Trends

Like studying weather patterns before a mission, keeping a close eye on industry trends helps you anticipate changes that could impact your platform. Are new protocols gaining traction? Is developer interest shifting from one technology stack to another? By tracking these movements, you’ll be better equipped to adjust your messaging, evolve your product offerings, and stay ahead of the curve.

• Emerging Technologies: Keep tabs on evolving blockchain standards, smart contract innovations, and the broader Web3 landscape, ensuring you’re ready to adapt as the field matures.

• Market Demands: Monitor where developer attention is heading—are they rallying around decentralized finance, NFTs, or layer-2 scaling solutions? Use these insights to align your outreach and resources accordingly.

Competitor Analysis

Just as a recon team studies their adversaries’ strengths and weaknesses, understanding your competitors gives you a tactical advantage. Identifying their capabilities, community engagement levels, and messaging strategies helps you carve out a unique position, refine your approach, and highlight what sets your platform apart. This goes right back to my absolute favorite quote that’s mentioned in the beginning of this article. You should never go into a fair fight. Through diligent research and recon, you should know more about the competition than they even know about themselves.

• Strengths and Weaknesses: Assess where rival platforms excel—be it documentation quality, active community support, or cutting-edge tooling—and determine where they fall short.

• Market Positioning: Pinpoint your unique value proposition. Whether it’s unparalleled scalability, robust security, or superior developer experience, make sure it’s clear why builders should choose your platform.

Regulatory Landscape

In any high-stakes mission, ignoring the rules of engagement can be costly. The Web3 space is dotted with varying regulatory requirements that can impact your platform’s adoption, credibility, and long-term viability. Understanding these regulations in advance ensures you don’t get blindsided by compliance issues that could derail your progress.

• Data Protection: If you work closely with your marketing team, then you should familiarize yourself with privacy laws like GDPR and CCPA. Ensuring compliance will not only keep you out of hot water but also build trust with developers and users.

• Blockchain Regulations: Stay informed about how different regions classify tokens, smart contracts, and decentralized applications. This foresight allows you to adjust your strategy, avoid costly missteps, and maintain operational freedom.

Community Sentiment

In the field, morale can determine whether a mission succeeds or fails. Similarly, the sentiment of your developer community can signal the health of your ecosystem. In special operations, officers don’t simply hang back and command their teams from the rear. They move with their team as equals. As a DevRel, you should be active within your community. Without being active in your community, you’ll likely not have a feel for your community’s tone and engagement levels. If the tone is positive and engagement is high, you’re on the right path. If not, you may need to pivot your messaging, resources, or support strategies. Regularly taking the community’s pulse ensures you remain responsive, agile, and ready to address concerns before they escalate. But, that simply can’t be done without being an active participant within your own community.

• Feedback Collection: Listen actively and participate to forums, Discord channels, and social media conversations. Understanding what developers value—or what they struggle with—empowers you to respond with meaningful solutions.

• Engagement Levels: Measure how frequently developers participate, contribute code, or attend community events. High engagement often indicates a thriving ecosystem, while dwindling involvement may signal areas that need attention.

By viewing your ecosystem through the lens of a special operations mission, you recognize the importance of continuous reconnaissance, strategic positioning, and proactive adjustments when the terrain changes. Armed with insights into industry trends, competitor landscapes, regulations, and community sentiment, you’ll be prepared to guide your DevRel strategy toward success—no matter what the terrain ahead may hold.

Target Market

In the army rangers, intelligence gathering isn’t limited to the lay of the land—it demands a deep understanding of the local population. Knowing where enemy combatants might hide or where friendly forces find sanctuary is vital, but so is grasping the subtler dynamics at play. Are there sympathetic people who can share critical intel? Are there local leaders whose influence could sway outcomes in your favor? Understanding the human element allows operators to move with confidence and avoid missteps that could jeopardize the entire mission.

Your DevRel initiatives are not so different. Just as special operators must be intimately familiar with the cultural, social, and psychological nuances of the people in their operational area, you must develop an equally comprehensive understanding of your target developers. Who do they trust and turn to for advice? What drives them to adopt a new technology, and what frustrates them enough to walk away? Where do they gather to discuss issues, share knowledge, and form their professional identities?

These insights aren’t just “nice to have”—they’re the difference between a DevRel strategy that falls flat and one that resonates so deeply that developers feel you’ve anticipated their every need. By knowing your target market at this granular level, you become more than just another platform vying for attention; you become a trusted ally, a guide who understands the challenges on their path and helps them overcome obstacles.

In other words, if you approach your target market with the same rigor and thoroughness that army rangers apply to human intelligence gathering, you’ll not only improve the precision of your outreach but also build lasting connections founded on trust, relevance, and tangible value.

Demographics

Just as a recon unit profiles the local population to determine potential allies, neutral parties, or those sympathetic to opposing forces, you need to identify the fundamental attributes of your target developers. Are they seasoned blockchain veterans who appreciate deep technical dives, or newcomers looking for clear, beginner-friendly guidance? Understanding where your developers stand in terms of skill level, geographic distribution, and industry focus provides the groundwork for everything else.

• Experience Level: Recognize whether you’re targeting novices just starting their web3 journey or expert developers seeking cutting-edge solutions, and tailor your materials accordingly. Maybe you’ll intend to target both! Just be considerate of time and cost commitments to target two different target markets.

• Geographic Location: Prioritize regions known for vibrant developer communities or particular industry clusters. Keep in mind language barriers, cultural nuances, and time zones when planning outreach and support.

• Industry Focus: Consider which sectors—finance, gaming, supply chain, and beyond—align with your platform’s strengths. Positioning yourself where your capabilities can shine makes your efforts far more impactful.

Psychographics

Demographics tell you who these developers are, but psychographics explain why they do what they do. This is where you uncover the heart of their decision-making process. Are they attracted by pioneering technology, or do they seek stability and dependable documentation? Do they crave community recognition, or do they prefer to quietly build and experiment? Understanding what drives them ensures that you’re not just handing out tools, but providing genuine value that resonates on a personal level.

• Motivations: Identify what lights a fire in them—top-notch performance, world-class support, a supportive community, or a clear roadmap.

• Pain Points: Pinpoint their frustrations. Maybe they’ve struggled with poor tooling elsewhere, encountered opaque documentation, or lacked responsive technical support. Addressing these issues head-on earns trust and loyalty.

• Preferences: From learning styles (video tutorials, documentation, live workshops) to feedback mechanisms (Discord chats, GitHub Issues, Twitter threads), find out how they prefer to learn and communicate, then meet them there.

Behavioral Patterns

In the field, anticipating how people will react is crucial. For DevRel, understanding your audience’s behavior—how often they engage, how quickly they adopt new technologies, and what kind of content they gravitate toward—lets you shape your initiatives for maximum effect. If your target developers love hands-on challenges, spin up regular hackathons. If they respond best to incremental updates, break your releases into digestible parts.

• Learning Methods: Identify whether developers value structured courses, prefer quickstart guides, or enjoy self-directed exploration.

• Engagement Habits: Determine when they’re most active online, how frequently they participate in community forums, and which events or content formats command their attention.

• Technology Adoption: Assess whether they’re early adopters eager to test new features or cautious integrators who wait for proven stability. This insight helps you time releases and announcements for the greatest impact.

Channels

Even the most finely tuned message won’t resonate if it’s not delivered in the right place. Army rangers how important it is to know to pick the right insertion point; similarly, you must choose the right channels to connect with your target developers. Whether it’s through specialized forums, social media platforms, or chat communities, meeting them where they already spend their time fosters trust and encourages ongoing engagement.

• Social Media: Figure out if your audience is more active on Twitter, LinkedIn, YouTube, or emerging platforms. Tailor your messaging style to fit these environments.

• Community Hubs: Identify where developers naturally gather—GitHub for code, Discord for real-time conversations, Slack for professional communities—and establish a meaningful presence there.

By applying the same meticulous care that special operations teams use when studying local populations, you can understand who your developers are at their core. Armed with insights into their demographics, psychographics, behaviors, and preferred channels, you’ll craft a DevRel strategy that doesn’t just speak to your audience, but genuinely resonates. In doing so, you elevate your platform from yet another player in the ecosystem to a trusted partner guiding developers toward success.

Troops and Support Available

No matter how well-defined your mission is, it’s only as strong as the team and resources you have at your disposal. In the world of DevRel, “troops” can mean anyone from Developer Advocates to Marketing Specialists, and “support” can refer to the tools, platforms, and partners that help bring your strategy to life. Understanding who’s on your bench and what resources you can tap into ensures that every initiative, event, and piece of content can be executed at a high standard. More importantly, it helps you allocate your energy and bandwidth where they’ll make the biggest impact.

Internal Teams

Your internal team is the backbone of your DevRel strategy. By clearly defining roles and responsibilities, you can play to each individual’s strengths and create a streamlined, cohesive operation.

• Developer Advocates: Craft educational content, engage directly with developers, and serve as the frontline for support and guidance.

• Technical Writers: Produce detailed, accessible documentation, how-to guides, and tutorials that lower the barrier to entry for new developers.

• Community Managers: Foster vibrant online forums, coordinate events, and ensure that everyone feels welcome and heard.

Engineering Support: Your core developers and QA engineers bring deep technical knowledge, helping you address complex developer issues and maintain a high standard of product quality. They’re your go-to for ensuring that tools, APIs, and documentation are reliable and user-friendly.

Marketing and Sales Teams: Marketing Specialists amplify your message through campaigns, social media, and branding, while Sales Engineers bridge the gap between technical capabilities and customer needs. Together, they help you position your platform in the marketplace and communicate its value effectively.

Prioritizing Resources

Just as a well-led squad knows how to distribute responsibilities, a successful DevRel team understands how to manage resources strategically. Not every initiative warrants the same level of attention, and not every team member needs to be involved at every stage.

• Assessing Strengths: Match tasks to the skill sets of your team, ensuring that no one is overburdened and that quality doesn’t suffer.

• Strategic Deployment: Reserve the bulk of your resources—whether that’s time, talent, or tools—for the initiatives that have the greatest potential to move the needle. Keep a steady baseline of support for essential, ongoing efforts.

Tools and Platforms

Your internal “troops” need the right gear to excel. Equipping them with effective tools and platforms not only streamlines their workflow but also enhances the developer experience.

• Documentation Platforms: Host and manage clear, searchable documentation using platforms like GitBook or Read the Docs.

• Code Repositories: Leverage GitHub or GitLab for open-source collaboration, code reviews, and issue tracking.

• Community Forums: Implement solutions like Discourse or Vanilla Forums to build an accessible hub for Q&A, discussions, and announcements.

• Analytics and Monitoring: Use Orbit for community analytics and New Relic or Datadog for performance monitoring to keep your finger on the ecosystem’s pulse and quickly address issues.

External Partners

Beyond your internal team, external allies can expand your reach, enhance your credibility, and fill gaps in your expertise. Selecting the right collaborators—be they influencers, educational institutions, or industry organizations—can magnify your impact far beyond what you could achieve alone.

• Influencers and Thought Leaders: Partner with well-respected figures in the blockchain or developer community to co-create content, host webinars, or kick off new initiatives. Their endorsement and audience can lend instant credibility and broaden your visibility.

• Educational Institutions: Forge relationships with universities or coding bootcamps to offer courses, workshops, and research collaborations. These partnerships help cultivate the next generation of developers who are already familiar with your platform.

• Industry Organizations: Join standards committees or contribute to open-source projects that are relevant to your ecosystem. This helps position your platform as a responsible, forward-thinking participant in the broader tech community.

Prioritizing External Support

Just as you strategically deploy internal resources, you should also carefully select which external partnerships deserve the most attention and investment.

• Mission Fit: Choose partners whose goals, audience, and values align well with yours.

• Impact Potential: Look for relationships that offer substantial audience reach or long-term value, ensuring that your collaborations aren’t just one-off events but stepping stones toward broader strategic objectives.

In essence, knowing who’s on your team, what tools you have, and which partnerships to pursue allows you to approach DevRel with confidence and precision. By thoughtfully managing these “troops and supports,” you ensure that every effort—no matter how big or small—has the backing it needs to succeed.

Time Available

In DevRel, timing is everything. Even the best-planned initiatives can fall flat if they’re launched too late or rushed out too early. Effective time management goes beyond setting arbitrary deadlines—it involves carefully orchestrating your projects, aligning with external events, and taking into account the human aspect of your team’s availability. By thoughtfully planning when to execute each part of your strategy, you increase your odds of hitting the mark and making a lasting impact.

Project Timelines

Your DevRel strategy should unfold over carefully planned intervals. Setting realistic deadlines helps keep everyone focused and moving in the same direction, while also providing checkpoints to measure progress and make adjustments along the way.

• Short-Term Goals: Identify what needs to be accomplished in the next few months, ensuring that immediate priorities don’t get overshadowed by long-term plans.

• Long-Term Objectives: Establish annual milestones that align with the company’s broader timeline, ensuring that your DevRel initiatives contribute to overarching business goals.

Event Schedules

Events—whether online webinars, hackathons, or industry conferences—offer prime opportunities to showcase your platform and connect with developers directly. By syncing your roadmap with these events, you can debut new features, announce partnerships, or kick off community programs at moments when your audience is already paying close attention.

• Industry Conferences: Launch new products or share major updates at significant industry gatherings, capturing the interest of a concentrated audience.

• Seasonal Trends: Pay attention to patterns in developer engagement (e.g., increased activity during hackathon seasons) and adjust your calendar accordingly.

Resource Availability

Your team’s time and energy are finite resources. Ensuring that the right people are available at the right moments is critical to keeping projects on track. Recognize when team members are at their best, balance workloads to prevent burnout, and plan around known absences or reduced productivity periods.

• Team Schedules: Confirm availability well in advance of deadlines and events, and adjust timelines if key contributors are on leave.

• Workload Balancing: Spread responsibilities across the team so that no single individual becomes a bottleneck. This helps maintain steady progress and consistent quality.

Market Windows

Just as a good sailor waits for favorable winds, a savvy DevRel professional chooses the best windows to launch new initiatives. Aligning your product releases, updates, and campaigns with moments when the market is most receptive can dramatically improve your results.

• Product Readiness: Don’t rush to market with half-baked features. Wait until you’re confident in their stability and value, ensuring a smooth developer experience.

• Competitive Landscape: Keep tabs on what your competitors are doing. Launching a major update right after a competitor steals the spotlight might cause you to lose momentum—or, conversely, timing your announcement to outshine a competitor’s release can give you an edge.

By taking a strategic approach to timing, you’re not just meeting deadlines—you’re setting yourself up to meet developers at the perfect moment, fully prepared, and with the resources in place to deliver a seamless experience.

Cost Considerations

Even the most ambitious DevRel strategies must work within financial boundaries. Understanding and managing your costs can mean the difference between a thriving, sustainable program and one that quickly runs out of steam. By carefully assessing your budget, calculating potential ROI, and planning for the unexpected, you ensure that every dollar spent contributes directly to your overarching goals. Smart financial stewardship also gives you the flexibility to pivot when market conditions change or new opportunities arise.

Budget Constraints

A clear grasp of your financial situation is the baseline for all DevRel decision-making. Without knowing exactly how much you have to spend—and how that budget breaks down per initiative—you risk overcommitting resources or missing out on high-impact opportunities.

• Annual Budget: Start with a top-level view of your yearly DevRel allowance, factoring in known recurring costs and anticipated new endeavors.

• Per-Initiative Budgeting: Break down the big picture into smaller, manageable chunks. Assign budgets to specific events, content projects, and community programs, ensuring that each initiative has enough fuel to deliver meaningful results.

Cost-Benefit Analysis

Not all DevRel activities are created equal, and some may offer a better return on investment than others. Evaluating the potential impact of each effort against its price tag helps you make more informed decisions about where to allocate your resources.

• Direct Costs vs. Benefits: Compare immediate outlays—like production costs for a webinar series—against direct payoffs, such as new developer sign-ups or increased community engagement.

• Long-Term Gains: Consider not only the immediate results but also the longer-term value of initiatives that build trust, grow brand recognition, or foster a vibrant, sustainable developer ecosystem.

Risk Assessment

No strategy comes without risk, and managing your finances in DevRel requires a forward-looking perspective. By identifying where costs might balloon unexpectedly or where certain bets may fail to pay off, you can put safeguards in place that minimize financial pain and protect the health of your program.

• Overruns: Forecast which initiatives might exceed their initial budget and plan contingencies in advance.

• Underperformance: Acknowledge that not every idea will hit its target ROI and be ready to cut losses early if something isn’t working.

Funding Opportunities

When your budget is constrained, creativity and collaboration become your best friends. Seeking external funding sources or forming partnerships can help stretch your resources further, allowing you to tackle larger or more complex initiatives without bearing the full financial burden.

• Grants and Sponsorships: Look for grants from nonprofit organizations or consider sponsorship deals with companies that share a similar target audience.

• Cost-Sharing Partnerships: Collaborate with complementary brands or organizations to split expenses and broaden your collective reach.

By keeping a close eye on costs from the start, you not only ensure that you’re making the most of your available resources but also position your DevRel efforts for long-term sustainability and success. A well-managed budget provides the stability you need to adapt, grow, and continue delivering value to your developer community.

Applying METT-TC to DevRel Strategies

Crafting the Mission Statement

"The more clearly we understand what we're trying to accomplish, the greater effect we can have in accomplishing it. People need to understand the purpose behind what they're being asked to do." — General James Mattis, USMC

In Army Ranger operations, a mission statement isn't just a formality—it's the foundation upon which everything else is built. Before a single boot hits the ground, every Ranger must understand not just what they're doing, but why it matters and how success will be measured. A mission statement that lacks clarity isn't just unhelpful; it's dangerous.

The same holds true in Developer Relations. Your mission statement serves as the North Star that guides every decision, initiative, and resource allocation. It needs to be precise, actionable, and firmly aligned with your company's strategic objectives. A vague mission like "improve developer experience" leaves too much room for interpretation and makes it impossible to measure success.

Instead, craft a mission statement that addresses the core components we've discussed: the who, what, when, where, and why of your DevRel strategy. Make it specific enough to provide clear direction but flexible enough to adapt to changing conditions—just as Rangers must sometimes adjust their tactics while keeping the overall mission objective in focus.

Mission Statement Example

Mission: To establish Arweave as the preferred permanent storage solution for Web3 builders by demonstrating its unique data persistency advantages, developing comprehensive technical resources, and nurturing an active builder ecosystem, with the goal of increasing protocol usage by 75% within the next year.

This statement has it all:

• Who: Web3 builders

• What: Establish Arweave as preferred storage solution, demonstrate advantages, develop resources, nurture ecosystem

• When: Within the next year

• Where: Within the Web3 permanent storage context

• Why: To increase protocol usage by 75%

By establishing this level of clarity from the outset, you ensure that every team member understands exactly what they're working toward. Just as a Ranger team visualizes mission success before execution, your DevRel team should be able to envision what accomplishing this mission looks like.

Remember, in both special operations and DevRel, mission creep is a constant danger. A well-crafted mission statement serves as a guardrail, helping you recognize when you're veering off course and allowing you to realign your efforts before resources are wasted. When someone proposes a new initiative, you can simply ask: "How does this help us establish Arweave as the preferred permanent storage solution and increase protocol usage?" If there's no clear answer, it's probably not worth pursuing.

The mission statement isn't just for your internal team—it's something you should be able to communicate to stakeholders throughout your organization. When leadership understands exactly what you're trying to accomplish and how it ties to broader company goals, you're more likely to secure the support and resources you need to succeed.

In short: Treat your mission statement with the same seriousness that Rangers treat their mission briefings. Get it right from the start, refer to it often, and use it as the benchmark against which all activities are measured. In the unpredictable terrain of Developer Relations, a clear mission won't just guide your way—it will be the difference between scattered efforts and strategic impact.

Analyzing the Ecosystem

"If I had six hours to chop down a tree, I'd spend the first four sharpening the axe." — Abraham Lincoln (Often cited in military strategic planning)

While Lincoln wasn't a military commander, his wisdom about preparation resonates deeply with military planning principles. In both special operations and DevRel, proper analysis before action isn't optional—it's essential for mission success.

Think of your ecosystem analysis as the intelligence gathering phase before a high-stakes mission. Rangers don't just charge into hostile territory without first understanding the landscape, identifying potential adversaries, and assessing environmental factors that could impact their operation. Similarly, your DevRel strategy requires a meticulous assessment of the technological battlefield where you'll be operating.

SWOT Analysis: Your Strategic Intelligence Brief

Start with a SWOT analysis—a tactical assessment that would make any mission planner proud. This isn't just a corporate exercise; it's your battle plan foundation:

• Strengths: What unique capabilities does your platform offer that competitors can't match? Perhaps Arweave's permanent storage guarantees or cost-effective data persistence give you a tactical advantage in specific scenarios.

• Weaknesses: Where are you vulnerable? Be brutally honest. Maybe your documentation isn't comprehensive enough for enterprise developers, or your onboarding process has too much friction. Identifying these weaknesses isn't admitting defeat—it's preventing ambush.

• Opportunities: Scout for openings in the market where your platform can establish a stronghold. Is there an emerging sector (like NFT metadata storage or decentralized social media) where permanent storage is becoming critical but current solutions are inadequate?

• Threats: What forces could undermine your mission? New competing protocols, changing regulatory landscapes, or shifts in developer preferences can all pose serious threats to your objectives.

Remember, a surface-level SWOT analysis is like reconnaissance that stops at the perimeter—dangerously incomplete. Dig deep, gather input from multiple sources, and challenge your assumptions. The most dangerous threats are often the ones you've failed to identify.

Market Research: Continuous Intelligence Gathering

In special operations, intelligence isn't a one-time collection—it's continuous. Similarly, your market research should be an ongoing operation:

• Deploy regular developer surveys to gauge sentiment, needs, and pain points.

• Monitor GitHub repositories, Stack Overflow questions, and Discord channels to identify emerging trends.

• Infiltrate developer conferences (even those not directly related to your technology) to understand how the broader ecosystem is evolving.

• Track competitor announcements and community reactions with the same attention you'd give to enemy movements.

Your goal is to build an accurate, real-time map of the developer landscape. This intelligence will help you anticipate shifts, identify opportunities before competitors do, and position your resources where they'll have maximum impact.

Technology Stack Evaluation: Assessing Terrain and Resources

Just as Rangers must understand how their equipment will perform in different environments, you need to thoroughly evaluate how your technology integrates with the tools developers already use:

• Catalog the most common frameworks, languages, and platforms in your target developer segments.

• Test integration points meticulously, identifying friction that could slow developer adoption.

• Consider compatibility not just with current technology stacks but with emerging tools gaining traction.

• Develop clear pathways that show developers how to incorporate your technology into their existing workflows.

This evaluation isn't a theoretical exercise—it's practical intelligence that directly impacts your tactical approach. If you discover that many developers in your target market use a particular CI/CD pipeline, developing seamless integration with that pipeline becomes a priority mission objective.

The ecosystem analysis phase may not have the glamour of community launches or developer events, but it's where battles are won or lost before they're even fought. As Rangers know, superior intelligence doesn't just give you an edge—it fundamentally changes the nature of the engagement.

When you thoroughly understand your ecosystem, you're no longer reacting to market conditions—you're anticipating them. You're not competing on even ground—you're selecting the terrain that gives you the advantage. And most importantly, you're not fighting fair—you're engaging precisely where and when your platform's strengths will be most decisive.

Assessing Troops and Support

"The strength of the team is each individual member. The strength of each member is the team." — General Phil Schuyler (adapted from military leadership principles)

In any military operation, the success of the mission hinges not just on the plan, but on the capabilities of the troops executing it and the support systems backing them. A strategy that doesn't account for the strengths and limitations of your available forces isn't a strategy—it's a fantasy.

When Rangers prepare for deployment, they don't just inventory weapons and equipment—they assess the specialized skills within the unit, identify capability gaps, and ensure each team member is positioned where their skills will have maximum impact. Your DevRel operation demands the same rigorous personnel assessment.

Team Skills: Strategic Positioning of Forces

Start by conducting an honest inventory of your team's capabilities, just as a commander would evaluate their unit before a mission:

• Skill Mapping: Document the technical expertise, communication abilities, and domain knowledge of each team member. Which languages do they code in? Which frameworks are they comfortable with? How experienced are they with your platform?

• Strength Alignment: Position team members where their natural talents can shine. Your technically brilliant engineer who struggles with public speaking might create exceptional developer tools rather than presenting at conferences. Your charismatic community builder with moderate technical skills might lead engagement initiatives rather than writing complex documentation.

• Cross-Functional Capabilities: Identify team members who can operate across multiple domains—these are your special forces operators who can adapt to changing conditions and fill critical gaps when needed.

Remember, putting people in positions that leverage their strengths isn't just good for morale—it's a force multiplier. As Rangers know, a small team operating in their element can outperform a much larger force that's misaligned.

Resource Gaps: Identifying Vulnerabilities

No unit goes into battle without understanding what resources they lack. Your DevRel operation requires the same clear-eyed assessment:

• Missing Specializations: Do you need a dedicated technical writer? A video content creator? A data analyst to measure community engagement? Identify these gaps before they become mission-critical failures.

• Tool Deficiencies: Evaluate whether you have the right tools for content creation, community management, developer support, and metrics tracking. Using inadequate tools is like sending troops into battle with outdated equipment.

• Support Infrastructure: Assess whether you have sufficient backing from engineering, marketing, and product teams. Even the best DevRel team can't succeed without cross-functional support.

Don't view resource gaps as failures—view them as intelligence that informs your strategy. If you know you're short on video production capabilities, you might emphasize written content in the short term while developing a plan to address the video gap.

Training Needs: Force Development

In special operations, training never stops. Even elite soldiers continuously hone existing skills and develop new ones. Your DevRel team should operate with the same commitment to growth:

• Skill Development Plans: Create personalized training roadmaps for each team member, identifying both immediate needs and long-term growth opportunities.

• Cross-Training Initiatives: Build redundancy by ensuring multiple team members can handle critical functions. In military terms, this prevents a single point of failure from compromising the entire mission.

• Continuous Learning Culture: Foster an environment where learning is valued and rewarded. Encourage team members to share knowledge through internal workshops, documentation, and mentoring.

The investment in training may seem costly in the short term, but it pays massive dividends in operational capability. A well-trained DevRel team can adapt to changing market conditions, respond to unexpected challenges, and capitalize on emerging opportunities with the same agility that makes special forces so effective.

The most brilliant DevRel strategy will fail without the right team executing it. By methodically assessing your human resources, identifying gaps, and investing in continuous improvement, you're not just building a DevRel team—you're developing a specialized unit capable of achieving objectives that would be impossible for less disciplined organizations.

Remember that in both military operations and DevRel, it's not always the largest force that prevails—it's the one that understands its capabilities, addresses its weaknesses, and deploys its resources with strategic precision. Your careful assessment of troops and support isn't just an administrative exercise—it's the foundation of operational success.

Managing Time Effectively

"Time is the scarcest resource and unless it is managed nothing else can be managed." — Lieutenant General Russel Honoré

In both special operations and DevRel, time isn't just another resource—it's the one resource you can never reclaim once spent. When Rangers plan a mission, they don't just consider what needs to be done; they meticulously map out when each action must occur, accounting for dependencies, contingencies, and the inevitable friction that emerges when plans meet reality.

Your DevRel timeline demands the same level of strategic thought. A plan without realistic timeframes isn't a plan at all—it's a wish list. And wishes don't ship products, build communities, or drive adoption.

Gantt Charts: Mapping the Operation

Just as military planners use operational timelines to visualize mission phases, your DevRel strategy benefits from visual planning tools:

• Dependency Mapping: Use Gantt charts to clearly identify which activities depend on others. You can't launch a developer competition if the SDK it's based on isn't ready yet.

• Critical Path Identification: Highlight the sequence of tasks that determine your minimum timeline. These are the non-negotiable elements that require your most careful attention and resource allocation.

• Milestone Visualization: Mark key achievements and check-in points. These serve as rally points where you can assess progress and adjust course if necessary.

While Gantt charts might seem like corporate tools far removed from battlefield planning, they serve the same function as a mission timeline—ensuring that everyone understands not just their individual responsibilities, but how their actions fit into the larger operation and impact the overall timeline.

Agile Methodologies: Tactical Flexibility

Rangers don't execute rigid plans that can't adapt to changing conditions—they maintain situational awareness and adjust tactics while keeping the strategic objective in focus. Agile methodologies bring this same adaptability to your DevRel operations:

• Sprint Planning: Break longer initiatives into 2-4 week sprints with clear deliverables. This creates natural checkpoints for evaluation and course correction.

• Daily Stand-ups: Implement brief daily meetings where team members share progress, obstacles, and plans. This maintains operational awareness across the team and allows for rapid problem-solving.

• Retrospectives: After completing significant initiatives, conduct thorough reviews identifying what worked, what didn't, and how processes can improve for the next operation.

Agile isn't just a software development methodology—it's a mindset that aligns perfectly with the adaptability required in both special operations and effective DevRel. It acknowledges that no plan survives first contact with the enemy (or in our case, the market), and builds in the mechanisms to adapt without losing sight of the mission.

Time Buffers: Planning for Friction

In military operations, the concept of friction describes how seemingly simple tasks become complicated in the field. The same principle applies to DevRel initiatives:

• Schedule Padding: Add 20-30% additional time to estimates for complex tasks, especially those involving multiple team members or dependencies.

• Contingency Planning: Identify critical path activities and develop specific backup plans for if (or when) they run behind schedule.

• Resource Reserves: Maintain a small reserve of uncommitted resources (both human and financial) that can be deployed to address unexpected challenges or opportunities.

These buffers aren't admissions of poor planning—they're acknowledgments of reality. Just as Rangers carry additional ammunition, alternative communication channels, and emergency medical supplies, your DevRel operations need built-in safeguards against the inevitable complications that arise.

Time management in DevRel isn't about cramming more activities into your calendar—it's about strategic allocation of a finite resource toward your highest-value objectives. By visualizing your timeline, embracing adaptability, and planning for inevitable complications, you ensure that your team's energy is directed toward meaningful progress rather than reactive firefighting.

Remember that in both military operations and DevRel, timing isn't just about efficiency—it's often the difference between success and failure. The team that can execute high-quality initiatives consistently, on a predictable timeline, will outperform competitors with more resources but less discipline in managing time.

Evaluating Cost Considerations

"Amateurs talk about tactics, but professionals study logistics." — General Omar Bradley

In military operations, logistics—the art of moving and supplying troops—often determines who prevails. A force with superior weapons but inadequate supplies will ultimately fail against a well-provisioned opponent. Similarly, your DevRel strategy requires meticulous financial planning to sustain operations over time.

When Rangers prepare for deployment, they don't just focus on weapons and tactics—they ensure every aspect of the mission is properly resourced. The same discipline must be applied to your DevRel budget. Without proper financial planning, even the most brilliant strategy will collapse when resources run dry.

Fixed Costs: Your Operational Baseline

Think of fixed costs as your base of operations—the foundational expenses that maintain your DevRel presence regardless of specific initiatives:

• Personnel Expenses: Beyond just salaries, account for benefits, equipment, software licenses, and professional development for each team member. A Developer Advocate isn't just a line item—they're an investment in relationship-building and technical expertise.

• Infrastructure Costs: Developer portals, documentation platforms, community forums, and analytics tools all require ongoing funding. These are your command and control systems—they need to be reliable and adequately resourced.

• Recurring Subscriptions: Developer tools, SaaS platforms, and community management software form the backbone of your daily operations. Document these recurring expenses for predictable budgeting.

By clearly identifying these fixed costs, you establish your minimum operating requirements—the baseline below which your DevRel function cannot effectively operate. This clarity helps protect essential resources when budget pressures arise.

Variable Costs: Mission-Specific Expenditures

Variable costs are like mission-specific equipment—they change based on your tactical objectives and operational tempo:

• Event Participation: Calculate costs for conferences, meetups, and hackathons, including registration fees, booth expenses, demo equipment, travel, accommodations, and promotional materials. Remember that these costs scale with the number of events and team members attending.

• Content Production: Budget for content initiatives like video production, technical writing, design work, and promotional campaigns. High-quality content isn't cheap—but low-quality content is ultimately more expensive in terms of wasted resources and missed opportunities.

• Community Initiatives: Allocate funds for developer challenges, grants programs, ambassador incentives, and community awards. These investments often yield the highest ROI in terms of community engagement and platform advocacy.

The variable nature of these expenses requires flexible budgeting approaches. Consider establishing separate budget envelopes for different types of activities, allowing your team to make tactical decisions within strategic guidelines—just as field commanders need appropriate autonomy within the mission parameters.

Contingency Funds: Strategic Reserves

No military operation proceeds exactly as planned, and neither will your DevRel initiatives. Contingency planning isn't pessimism—it's prudence:

• Emergency Reserve: Set aside 10-15% of your total budget as unallocated funds to address unexpected challenges or opportunities. This isn't waste—it's your quick reaction capability.

• Scenario Planning: Develop financial responses to possible situations: What if a key event is canceled? What if a competitor launches an aggressive developer acquisition campaign? What if an unexpected technical issue requires additional documentation and support?

• Budget Defense: Documentation of your contingency planning demonstrates strategic foresight to financial stakeholders, making it easier to protect these crucial funds from being reallocated during budget reviews.

Just as Rangers maintain reserve supplies and backup equipment, your financial planning should include provisions for when circumstances change or initial approaches prove insufficient.

Cost considerations in DevRel aren't just about controlling expenses—they're about strategic resource allocation that maximizes impact while ensuring operational sustainability. By clearly distinguishing between fixed costs, variable expenses, and necessary contingencies, you create a financial framework that supports both immediate initiatives and long-term community building.

Remember that in both military logistics and DevRel budgeting, the goal isn't to spend as little as possible—it's to ensure that every dollar deployed advances your mission objectives. A well-resourced, strategically funded DevRel operation will consistently outperform competitors who treat developer relations as an afterthought or cost center rather than a strategic investment.

Conclusion

"Plans are worthless, but planning is everything." — General Dwight D. Eisenhower

When Army Rangers complete a mission, they don't just pack up and move on. They conduct thorough After Action Reviews (AARs) to evaluate what worked, what didn't, and how to improve future operations. In that spirit, let's review what we've learned about applying military strategic planning to Developer Relations.

The Strategic Advantage

The METT-TC framework isn't just another corporate planning tool—it's a battle-tested approach to operating in complex, uncertain environments. By adapting it for DevRel, you gain several distinct advantages:

First, you ensure comprehensive planning across all critical dimensions. Nothing falls through the cracks because the framework demands attention to each vital component—from mission clarity to resource allocation.

Second, you create alignment between tactical actions and strategic objectives. Every blog post, hackathon, or documentation update has a clear line of sight to your overarching mission, eliminating wasted effort and "random acts of DevRel."

Third, you develop the ability to anticipate challenges rather than merely reacting to them. By thoroughly analyzing your ecosystem and understanding your target market, you can prepare for potential obstacles before they materialize—just as Rangers prepare for multiple contingencies before deployment.

When combined with the Orbital Model for community engagement, METT-TC offers a powerful framework for not just attracting developers but systematically nurturing them from casual users to passionate advocates and contributors. You're not just building a user base—you're developing a force multiplier that extends your reach far beyond what your internal team could accomplish alone.

Next Steps for DevRel Professionals

As you prepare to implement this approach in your organization, consider these final directives:

Customize METT-TC

This framework isn't meant to be a rigid doctrine—it's an adaptable approach that should be tailored to your specific circumstances. A Web3 storage protocol will have different considerations than a payment processing API or a frontend framework. Modify the components as needed while maintaining the disciplined thinking that makes the framework effective.

Collaborate Across Teams

No special operations unit succeeds in isolation, and neither will your DevRel strategy. Involve marketing to amplify your message, engineering to ensure product-community alignment, and product teams to close the feedback loop between developers and your platform. Your planning process should reflect the cross-functional nature of successful DevRel.

Measure and Adapt

Set clear metrics for each component of your strategy and establish regular review cycles. Like the best military units, you should be your own toughest critic, constantly seeking to improve based on real-world feedback rather than assumptions or wishful thinking.

Invest in Relationships

At its core, Developer Relations is about humans connecting with humans. While this framework provides the strategic foundation, never lose sight of the fact that genuine relationships—built on trust, value, and mutual respect—are your ultimate objective. The most meticulously planned strategy will fail if it doesn't foster authentic connections with your developer community.

Remember

In DevRel, as in any mission-critical operation, success comes from detailed planning, adaptability, and a deep understanding of both your objectives and the environment in which you operate. The best plans can't anticipate every challenge, but the planning process itself develops the mental agility and situational awareness needed to overcome unexpected obstacles.

By planning the Army Ranger way with METT-TC, you're not just organizing activities—you're developing a mindset that separates elite DevRel operations from the merely adequate. You're declaring that developer community building is too important to leave to chance or ad hoc efforts. And most importantly, you're setting yourself and your developer community up for sustained success in even the most competitive technological battlefields.

The mission is clear. The troops are ready. The plan is solid.

Now it's time to execute.

Preparativos

Requisitos del Sistema

El cliente local de aos es muy sencillo de instalar. Solo asegúrate de tener:

• NodeJS versión 20 o superior. (Si aún no lo has instalado, consulta esta página para encontrar instrucciones para tu sistema operativo).

• Un editor de código de tu elección.

Instalando AOS

Una vez que tengas NodeJS en tu máquina, todo lo que necesitas hacer es instalar AOS y ejecutarlo:

npm i -g https://get_ao.g8way.io

Después de la instalación, ¡simplemente podemos ejecutar el comando en sí para iniciar un nuevo proceso AOS!

aos

Bienvenido a la madriguera del conejo

La utilidad que acabas de iniciar es un cliente local, listo para retransmitir mensajes para ti a tu nuevo proceso dentro del ordenador AO.

Una vez conectado, deberías ver lo siguiente:

_____                   _______                   _____
         /\    \                 /::\    \                 /\    \
        /::\    \               /::::\    \               /::\    \
       /::::\    \             /::::::\    \             /::::\    \
      /::::::\    \           /::::::::\    \           /::::::\    \
     /:::/\:::\    \         /:::/~~\:::\    \         /:::/\:::\    \
    /:::/__\:::\    \       /:::/    \:::\    \       /:::/__\:::\    \
   /::::\   \:::\    \     /:::/    / \:::\    \      \:::\   \:::\    \
  /::::::\   \:::\    \   /:::/____/   \:::\____\   ___\:::\   \:::\    \
 /:::/\:::\   \:::\    \ |:::|    |     |:::|    | /\   \:::\   \:::\    \
/:::/  \:::\   \:::\____\|:::|____|     |:::|    |/::\   \:::\   \:::\____\
\::/    \:::\  /:::/    / \:::\    \   /:::/    / \:::\   \:::\   \::/    /
 \/____/ \:::\/:::/    /   \:::\    \ /:::/    /   \:::\   \:::\   \/____/
          \::::::/    /     \:::\    /:::/    /     \:::\   \:::\    \
           \::::/    /       \:::\__/:::/    /       \:::\   \:::\____\
           /:::/    /         \::::::::/    /         \:::\  /:::/    /
          /:::/    /           \::::::/    /           \:::\/:::/    /
         /:::/    /             \::::/    /             \::::::/    /
        /:::/    /               \::/____/               \::::/    /
        \::/    /                 ~~                      \::/    /
         \/____/                                           \/____/

ao Operating System

aos - 1.8.9
2024 - Type ".exit" to exit
aos process:  1xM1_lDZ428sJHpTX7rtcR6SrDubyRVO06JEEWs_eWo

Repasemos la impresión inicial después de ejecutar AOS:

Después de ejecutar AOS en tu terminal, deberías ver:

• Una imagen de arte ASCII de AOS.

• Un mensaje de bienvenida.

• La versión de AOS que estás ejecutando.

• Un mensaje instructivo para salir.

• Tu ID de proceso.

¡Bienvenido a tu nuevo hogar en el ordenador AO! El prompt que ahora estás viendo es tu servidor personal en esta máquina descentralizada.

Ahora, profundicemos más en la madriguera del conejo explorando uno de los dos conceptos clave de AO: la Mensajería.

Mensajería en ao

Aprende cómo los Mensajes otorgan a AO la Capacidad de Cómputo Paralelo

En AO, cada proceso se ejecuta en paralelo, creando un entorno altamente escalable. Las llamadas directas a funciones entre procesos no son factibles porque cada proceso opera de manera independiente y asincrónica.

La mensajería aborda esto al habilitar la comunicación asincrónica. Los procesos envían y reciben mensajes en lugar de invocar directamente funciones entre sí. Este método permite una interacción flexible y eficiente, donde los procesos pueden responder a mensajes, mejorando la escalabilidad y la capacidad de respuesta del sistema.

Comenzaremos explorando los fundamentos de la mensajería en AOS, cómo ver los mensajes recibidos en tu bandeja de entrada y cómo enviar mensajes a otros procesos.

Tutorial en Video

(Solo en ingles)

Paso 1: Entender la Estructura del Mensaje

• Fundamentos del Mensaje: Los mensajes en AO se construyen usando tablas Lua, que son estructuras de datos versátiles que pueden contener múltiples valores. Dentro de estas tablas, el campo "Data" es crucial ya que contiene el contenido o carga útil del mensaje. Esta estructura permite el envío y recepción eficiente de información entre procesos, mostrando cómo los primitivos de AO aprovechan las capacidades subyacentes de Arweave para facilitar operaciones complejas y componibles.

  Para especificaciones detalladas, por favor refiérete a la documentación original en la página de especificaciones de G8way.

• Ejemplo: { Data = "¡Hola desde el Proceso A!" } es un mensaje simple.

Paso 2: Abrir la CLI de AOS

• Lanza la interfaz de línea de comandos (CLI) de AOS escribiendo aos en tu terminal y presionando Enter.

aos

Paso 3: Cómo Enviar un Mensaje

  Send({ Target = "ID del proceso", Data = "Hola Mundo!" })

• Enviar: La función Send está globalmente disponible en el entorno interactivo de AOS.

• Target: Para enviar un mensaje a un proceso específico, incluye un campo Target en tu mensaje.

• Data: El Data es el mensaje de texto que deseas sea recibido por el proceso receptor. En este ejemplo, el mensaje es "¡Hola Mundo!".

Paso 4: Almacenar el ID del Proceso de Morpheus

Usaremos el ID del proceso proporcionado a continuación y lo almacenaremos como una variable llamada Morpheus.

P2RS2VtQ4XtYEvAXYDulEA9pCBCIRpJDcakTR9aW434

Copia el ID del proceso anterior y almacénalo como una variable ejecutando el siguiente comando en la CLI de AOS:

Morpheus = "P2RS2VtQ4XtYEvAXYDulEA9pCBCIRpJDcakTR9aW434"

Esto almacenará el ID del proceso como una variable llamada Morpheus, facilitando la interacción con el ID de proceso específico.

Verificar la Variable Morpheus

# Verifica la variable Morpheus escribiendo `Morpheus`
 Morpheus
# Resultados Esperados:
P2RS2VtQ4XtYEvAXYDulEA9pCBCIRpJDcakTR9aW434


# Si se devuelve `undefined`,
# entonces

 la variable no se creó con éxito.

Paso 5: Enviar un Mensaje a Morpheus

Después de obtener el ID del proceso de Morpheus y almacenarlo en una variable, estás listo para comunicarte con él. Para hacer esto, usas la función Send. Morpheus, él mismo, es un proceso paralelo que se ejecuta en ao. Recibe y envía mensajes usando una serie de Handlers. Enviémosle un mensaje y veamos qué sucede.

Send({ Target = Morpheus, Data = "Morpheus?" })

• Tu Target es Morpheus, que es la variable que definimos anteriormente usando el ID del proceso de Morpheus.

• El Data es el mensaje que quieres enviar a Morpheus. En este caso, es "Morpheus?".

Resultados Esperados:

# Tu Comando de Mensaje
Send({ Target = Morpheus, Data = "Morpheus?"})
# Mensaje añadido a la bandeja de salida
message added to outbox
# Se recibe un Nuevo Mensaje del ID del proceso de `Morpheus`
New Message From BWM...ulw: Data = I am here. You are f

Has enviado un mensaje a Morpheus y recibido una respuesta, pero no puedes leer el mensaje completo. Aprendamos sobre la Bandeja de Entrada y cómo leer mensajes.

Paso 6: La Bandeja de Entrada

La Bandeja de Entrada es donde recibes mensajes de otros procesos. ::: info Para ver una visión más profunda de un mensaje de la bandeja de entrada, dirígete a la página de Conceptos de Mensajes. :::

Verifiquemos tu bandeja de entrada para ver cuántos mensajes has recibido.

Dentro de tu CLI de aos, escribe el siguiente comando:

#Inbox

Si estás siguiendo activamente el tutorial, la bandeja de entrada no tendrá muchos mensajes. Sin embargo, si has estado experimentando con el entorno de aos, puedes tener más de 1 mensaje en tu bandeja de entrada.

Ejemplo de Retorno:

# Tu Comando de Bandeja de Entrada
 #Inbox
# El comando devolverá el número de mensajes en tu bandeja de entrada.
4

En el ejemplo anterior, el retorno es 4, indicando que hay cuatro mensajes en la bandeja de entrada.

Como estamos buscando activamente la respuesta de Morpheus, asumiremos que su mensaje fue el último recibido. Para leer el último mensaje en tu bandeja de entrada, escribe el siguiente comando:

 Inbox[#Inbox].Data

Este comando te permite aislar el Data del mensaje y solo leer el contenido de los datos.

El Retorno Esperado:

# Tu Comando de Bandeja[x].Data
Inbox[#Inbox].Data
# El comando devolverá el `Data` del mensaje.
# Data es lo que usualmente representa el mensaje basado en texto recibido de un proceso a otro.
I am here. You are finally awake. Are you ready to see how far the rabbit hole goes?

Ahora estás usando tu propio proceso para comunicarte con Morpheus, otro proceso paralelo que se ejecuta en AO. Estás listo para avanzar al siguiente paso en el tutorial.

Paso 7: Enviar Mensajes con Etiquetas

Propósito de las Etiquetas: Las etiquetas en los mensajes de AOS se usan para categorizar, dirigir y procesar mensajes de manera eficiente. Juegan un papel crucial en el manejo de mensajes, especialmente cuando se trata de múltiples procesos o flujos de trabajo complejos.

Algunos procesos usan Handlers que interactúan específicamente con mensajes que tienen ciertas etiquetas. Por ejemplo, un proceso puede tener un manejador que solo interactúa con mensajes que tienen una etiqueta específica, lo cual veremos un ejemplo de en el tutorial de chatroom.

Cómo Usar Etiquetas en Mensajes

En el caso de Morpheus, podemos usar etiquetas para categorizar nuestros mensajes, y dado que Morpheus es un proceso autónomo, tiene manejadores que pueden interactuar con mensajes que tienen ciertas etiquetas.

Añadiendo Etiquetas a un Mensaje:

• Ya sabemos que el Data de un mensaje es el mensaje basado en texto que quieres enviar a otro proceso. Anteriormente, enviamos un mensaje a Morpheus sin ninguna etiqueta, en el cual él usó un manejador para responder a un data que coincidía exactamente.

Demostremos a Morpheus Que Estamos Listos

Envía a Morpheus un mensaje con la etiqueta Action y el valor rabbithole.

Ejemplo:

Send({ Target = Morpheus, Data = "Code: rabbithole", Action = "Unlock" })

Resultados Esperados:

Consejos Adicionales para Usar Etiquetas

• Etiquetado Consistente: Desarrolla un sistema de etiquetado consistente para tu aplicación para hacer el manejo de mensajes más predecible.

• Nombramiento de Etiquetas: Elige nombres claros y descriptivos para tus etiquetas. Esto facilita entender el propósito y contexto de los mensajes a primera vista.

• Seguridad con Etiquetas: Recuerda que las etiquetas no están encriptadas ni ocultas, así que evita usar información sensible como etiquetas.

Uso Avanzado de Etiquetas

• Gestión de Flujos de Trabajo: Las etiquetas pueden ser instrumentales en la gestión de flujos de trabajo, especialmente en sistemas donde los mensajes pasan por múltiples etapas o procesos.

Consejos Adicionales para la Mensajería

• Estructura del Mensaje: Explora otros campos como Epoch, From y Nonce para necesidades de mensajería más complejas.

• Depuración: Usa la función Dump para imprimir mensajes para depuración.

• Consideraciones de Seguridad: Ten cuidado con el contenido y manejo de los mensajes, y nunca envíes nada considerado privado o sensible.

Conclusión

Ahora has aprendido cómo enviar mensajes con etiquetas, lo cual es una herramienta poderosa para categorizar y dirigir mensajes en AOS.

Morpheus te ha invitado oficialmente a la siguiente etapa de tu viaje. Estás listo para avanzar al siguiente paso en el tutorial, Creando un Chatroom.

Crear una Sala de Chat

Mis disculpas por eso, aquí tienes la traducción corregida sin modificar el contenido dentro de los bloques de código:

Construyendo un Chatroom en aos

En este tutorial, estaremos construyendo un chatroom dentro de AO utilizando el lenguaje de scripting Lua. El chatroom contará con dos funciones principales:

1. Registrar: Permite que los procesos se unan al chatroom.

2. Transmitir: Envía mensajes de un proceso a todos los participantes registrados.

Comencemos estableciendo la base para nuestro chatroom.

Tutorial en Video

(Solo en Ingles)

Paso 1: La Base

• Abre tu editor de código preferido.

• Crea un nuevo archivo nombrado chatroom.lua.

Paso 2: Creando La Lista de Miembros

• En chatroom.lua, comenzarás inicializando una lista para rastrear a los participantes:

Members = Members or {}

• Guarda el archivo chatroom.lua

Paso 3: Cargar el Chatroom en aos

Con chatroom.lua guardado, ahora cargarás el chatroom en AOS.

• Si aún no lo has hecho, inicia tu AOS en tu terminal dentro del directorio donde se guarda chatroom.lua

• En la CLI de AOS, escribe el siguiente script para incorporar tu script en el proceso AOS:

.load chatroom.lua

Como muestra la captura de pantalla anterior, puedes recibir undefined como respuesta. Esto es esperado, pero aún queremos asegurarnos de que el archivo se cargó correctamente.

::: info En el entorno de evaluación Lua de AOS, cuando ejecutas un fragmento de código que no devuelve explícitamente un valor, undefined es una respuesta estándar, indicando que no se devolvió ningún resultado. Esto se puede observar al cargar recursos o ejecutar operaciones. Por ejemplo, ejecutar X = 1 producirá undefined porque la declaración no incluye una sentencia de retorno.

Sin embargo, si ejecutas X = 1; return X, el entorno devolverá el valor 1. Este comportamiento es esencial para entender cuando trabajas dentro de este marco, ya que ayuda a aclarar la distinción entre ejecutar comandos que modifican el estado frente a aquellos destinados a producir una salida directa. :::

• Escribe Members, o como hayas nombrado tu lista de usuarios, en AOS. Debería devolver un array vacío { }.

Si ves un array vacío, entonces tu script ha sido cargado con éxito en AOS.

Paso 4: Creando Funcionalidades del Chatroom

El Manejador de Registro

El manejador de registro permitirá que los procesos se unan al chatroom.

1. Añadiendo un Manejador de Registro: Modifica chatroom.lua para incluir un manejador para que Members se registren en el chatroom con el siguiente código:

Handlers.add(
  "Register",
  Handlers.utils.hasMatchingTag("Action", "Register"),
  function (msg)
    table.insert(Members, msg.From)
    Handlers.utils.reply("registered")(msg)
  end
)

Este manejador permitirá que los procesos se registren en el chatroom respondiendo a la etiqueta Action = "Register". Un mensaje impreso confirmará diciendo registered aparecerá cuando el registro sea exitoso.

2. Recargar y Probar: Vamos a recargar y probar el script registrándonos en el chatroom.

• Guarda y recarga el script en AOS usando .load chatroom.lua.

• Verifica si el manejador de registro se cargó con el siguiente script:

Handlers.list

Esto devolverá una lista de todos los manejadores en el chatroom. Dado que esta es probablemente tu primera vez desarrollando en AOS, solo deberías ver un manejador con el nombre Register.

• Probemos el proceso de registro registrándonos en el chatroom:

Send({ Target = ao.id, Action = "Register" })

Si es exitoso, deberías ver que había un mensaje añadido a tu bandeja de salida y que luego ves un nuevo mensaje impreso que dice registrado.

• Finalmente, verifiquemos si fuimos agregados exitosamente a la lista de Members:

Members

Si es exitoso, ahora verás tu ID de proceso en la lista de Members.

Añadiendo un Manejador de Transmisión

Ahora que tienes un chatroom, creemos un manejador que te permita transmitir mensajes a todos los miembros del chatroom.

• Añade el siguiente manejador al archivo chatroom.lua:

Handlers.add(
  "Broadcast",
  Handlers.utils.hasMatchingTag("Action", "Broadcast"),
  function (msg)
    for _, recipient in ipairs(Members) do
      ao.send({Target = recipient, Data = msg.Data})
    end
    Handlers.utils.reply("Broadcasted.")(msg)
  end
)

Este manejador te permitirá transmitir mensajes a todos los miembros del chatroom.

• Guarda y recarga el script en AOS usando .load chatroom.lua.

• Probemos el manejador de transmisión enviando un mensaje al chatroom:

Send({Target = ao.id, Action = "Broadcast", Data = "Broadcasting My 1st Message" })

• Si es exitoso, deberías ver que había un mensaje añadido a tu bandeja de salida y que luego ves un nuevo mensaje impreso que dice Broadcasting My 1st Message porque también eres un destinatario de este mensaje ya que eres miembro del chatroom Members.

Paso 5: Invitando a Morpheus al Chatroom

Ahora que te has registrado con éxito en el chatroom, invitemos a Morpheus a unirse a nosotros. Para hacer esto, le enviaremos una invitación que le permitirá registrarse en el chatroom.

Morpheus es un agente autónomo con un manejador que responderá a la etiqueta Action = "Join", en la cual luego usará tu etiqueta Register para registrarse en el chatroom.

• Enviemos a Morpheus una invitación para unirse al chatroom:

Send({ Target = Morpheus, Action = "Join" })

• Para confirmar que Morpheus se ha unido al chatroom, verifica la lista de Members:

Members

Si es exitoso, recibirás un mensaje difundido de Morpheus.

Paso 6: Invitando a Trinity al Chatroom

Dentro de este mensaje, él te dará el ID del proceso de Trinity y te dirá que la invites al chatroom.

Usa los mismos procesos para guardar su ID del proceso como Trinity y para invitarla al chatroom como hiciste con Morpheus.

Si ella se une con éxito al chatroom, entonces planteará el siguiente desafío para ti, creando un token.

Involucrando a Otros en el Chatroom

Incorporando a Otros

• Invita a Usuarios de AOS: Anima a otros usuarios de AOS a unirse a tu chatroom. Pueden registrarse y participar en la transmisión.

• Proporciona Instrucciones de Incorporación: Comparte un script simple con ellos para una incorporación fácil:

-- ¡Hey, vamos a chatear en aos! Únete a mi chatroom enviando este comando en tu entorno aos:
Send({ Target = [Tu ID de Proceso], Action = "Register" })
-- Luego, puedes transmitir mensajes usando:
Send({Target = [Tu ID de Proceso], Action = "Broadcast", Data = "Tu Mensaje" })

Próximos Pasos

¡Felicidades! Has construido con éxito un chatroom en AO e has invitado a Morpheus a unirte. También has creado un manejador de transmisión para enviar mensajes a todos los miembros del chatroom.

A continuación, continuarás interactuando con Morpheus, pero esta vez agregarás a Trinity a la conversación. Ella te guiará a través del próximo conjunto de desafíos. ¡Buena suerte!

Crear un Token

::: info Profundizando en AO, ahora estás listo para crear tu propio token, un símbolo de valor e intercambio dentro de este medio descentralizado. Si tienes ganas de aprender cómo crear un token, pero no has visitado las lecciones de Mensajería y Construir un Chatroom, asegúrate de hacerlo ya que esta página es parte de un tutorial interactivo de varias partes. :::

Al crear tokens, continuaremos usando el Lenguaje Lua dentro de AO para acuñar un token, guiados por los principios descritos en la Especificación de Token.

Continuando por la Madriguera del Conejo

En nuestro último tutorial, Construir un Chatroom, aprendimos cómo crear un chatroom dentro de AO, invitamos a Morpheus y a Trinity al chatroom que creamos, y luego Trinity nos ha pedido que creemos un token para ella como una forma de demostrar que somos dignos de continuar por la madriguera del conejo.

Comencemos.

Los Dos Caminos para Construir un Token

Hay dos caminos a seguir cuando construyes un token:

1. El Plano: Este es una plantilla prediseñada que te ayuda a construir rápidamente un token en AO. Es una excelente manera de comenzar y se puede personalizar para satisfacer tus necesidades.

   Consulta aquí para aprender más sobre el Plano de Token.

2. El Método Manual: Esta es una guía paso a paso para construir un token en AO desde cero. Este camino es para aquellos que quieren entender los mecanismos internos de un token y cómo construir uno desde el principio.

   Consulta aquí para revisar la guía completa Construir un Token.

El Método del Plano

Para este tutorial, utilizaremos el Plano de Token para crear un token para Trinity. Este es una plantilla prediseñada que te ayuda a construir rápidamente un token en AO.

Cómo Usar el Plano de Token

1. Asegúrate de estar en el mismo directorio que antes durante los pasos anteriores del tutorial.

2. Abre el Terminal.

3. Inicia tu proceso AOS.

4. Escribe .load-blueprint token

Esto cargará los manejadores requeridos para el token del tutorial dentro de AO. Es importante notar que el plano del token no es específico de este tutorial y se puede usar como una base para cualquier token que desees crear.

Verificar que el Plano Está Cargado

Escribe Handlers.list para ver los nuevos manejadores cargados.

Deberías ver una nueva lista de manejadores que han sido cargados en tu proceso AOS. Si has seguido los pasos anteriores del tutorial, también deberías ver los manejadores de tu chatroom.

Ejemplo:

Probando el Token

Ahora que el plano del token está cargado, podemos probar el token enviando un mensaje a nosotros mismos usando la etiqueta Action = "Info".

Send({ Target = ao.id, Action = "Info" })

Esto imprimirá un mensaje en la consola, pero para leer el mensaje, necesitaremos llamar a .Data del último mensaje.

Inbox[#Inbox].Data

# Reemplaza #Inbox con el numero del ultimo mensaje recibido.

Esto imprimirá la información del token en la consola. Debería mostrar tu ID de proceso con el saldo total de tokens disponibles.

Enviando Tokens a Trinity

Ahora que hemos probado el token y está funcionando como se esperaba, podemos enviar algunos tokens a Trinity. Enviaremos 1000 tokens a Trinity usando la etiqueta Action = "Transfer".

Send({ Target = ao.id, Action = "Transfer", Recipient = Trinity, Quantity = "1000"})

Cuando Trinity reciba los tokens, responderá a la transferencia con un mensaje para confirmar que ha recibido los tokens.

Su respuesta se verá algo así:

Trinity: "Token recibido. Interesante. No estaba segura de que llegarías tan lejos. Estoy impresionada, pero aún no hemos

terminado. Quiero que uses este token para tokengatear el chatroom. Haz eso, y entonces creeré que podrías ser el elegido."

Has completado el proceso de crear un token y enviarlo a Trinity. Ahora estás listo para avanzar al siguiente paso en el tutorial. Tokengateando el Chatroom.

Tokengateando el Chatroom

::: info Ahora que hemos creado un token y lo hemos enviado a Trinity, podemos usar el token para tokengatear nuestro chatroom. Esto permitirá que solo aquellos que tengan el token puedan entrar al chatroom. :::

Cómo Tokengatear el Chatroom

Creemos un manejador que nos permita tokengatear el chatroom. Este manejador responderá a la etiqueta Action = "Broadcast", lo que significa que reemplazará el manejador original Broadcast que construimos para nuestro chatroom.

Paso 1: Inicia el mismo proceso AOS.

Asegúrate de estar utilizando el mismo proceso AOS que has usado a lo largo del tutorial.

Paso 2: Abre el archivo chatroom.lua.

Este es el mismo archivo que usamos para crear el chatroom durante el tutorial de chatroom.

Paso 3: Edita tu manejador Broadcast.

Reemplaza el manejador Broadcast original con el siguiente código:

Handlers.add(
    "Broadcast",
    Handlers.utils.hasMatchingTag("Action", "Broadcast"),
    function(m)
        if Balances[m.From] == nil or tonumber(Balances[m.From]) < 1 then
            print("UNAUTH REQ: " .. m.From)
            return
        end
        local type = m.Type or "Normal"
        print("Broadcasting message from " .. m.From .. ". Content: " .. m.Data)
        for i = 1, #Members, 1 do
            ao.send({
                Target = Members[i],
                Action = "Broadcasted",
                Broadcaster = m.From,
                Data = m.Data
            })
        end
    end
)

Este manejador ahora verificará el saldo del token del remitente antes de difundir el mensaje al chatroom. Si el remitente no tiene un token, el mensaje no será difundido.

Guarda el archivo.

Paso 4: Recarga el archivo chatroom.lua.

Para reemplazar el manejador broadcast original con el nuevo, necesitarás recargar el archivo chatroom.lua.

.load chatroom.lua

Paso 5: Prueba el Tokengate

Ahora que el chatroom está tokengateado, probémoslo enviando un mensaje al chatroom.

Desde el proceso aos original

Primero, lo probaremos desde el proceso AOS original.

Send({ Target = ao.id , Action = "Broadcast", Data = "Hello" })
# Resultados esperados:
message added to outbox
Broadcasting message from Neo. Content: Hello.

Probando desde otro ID de Proceso.

Desde un nuevo proceso AOS

Ahora, probémoslo desde un nuevo proceso AOS que no tenga un token.

aos chatroom-no-token # `chatroom-no-token` es el nuevo nombre del proceso

Primero necesitaremos registrarnos en el chatroom.

.load chatroom.lua
Send({ Target = [Tu ID de Proceso], Action = "Register" })
# Resultados esperados:
message added to outbox
New Message From [Tu ID de Proceso]: Data = registered

Ahora, intentemos enviar un mensaje al chatroom.

Send({ Target = [Tu ID de Proceso] , Action = "Broadcast", Data = "Hello?" })
# Resultados esperados:
message added to outbox
UNAUTH REQ: [Nuevo ID de Proceso]

Como puedes ver, el mensaje no fue difundido porque el nuevo proceso no tiene un token.

Dile a Trinity "Se ha hecho"

Desde el proceso AOS original, envía un mensaje difundido al chatroom diciendo, "Se ha hecho".

Send({ Target = ao.id , Action = "Broadcast", Data = "Se ha hecho" })

::: warning Es importante ser consciente de la coincidencia exacta de datos y la sensibilidad a mayúsculas y minúsculas. Si no recibes una respuesta de Morpheus o Trinity, asegúrate de verificar el contenido de tus Datos y Etiquetas. :::

Trinity responderá entonces al chatroom siendo tokengateado.

Resultados Esperados:

Trinity enviará un mensaje diciendo: "Supongo que Morpheus tenía razón. Eres el elegido. Considerame impresionada. Ahora estás listo para unirte al Construct, un chatroom exclusivo disponible solo para aquellos que han completado este tutorial. Ahora, únete a los demás usando la misma etiqueta que usaste `Register

`, con este ID de proceso: [ID de Proceso del Construct] Buena suerte. -Trinity". Además, seguirá un pie de página al mensaje.

::: warning Lee cuidadosamente el pie de página en el mensaje de Trinity para descubrir cómo presentar tu reclamo y recibir tu CRED. :::

Conclusión

¡Lo has hecho! Has tokengateado con éxito el chatroom. Esto ha desbloqueado ahora el acceso al Construct, donde solo aquellos que han completado completamente este tutorial pueden entrar.

¡Felicidades!

Has demostrado un gran potencial. Espero que hayas disfrutado este tutorial. Ahora estás listo para construir libremente en AO.

Si quieres aprender más sobre AO + AOS, entonces dirígete a la documentación en https://cookbook_ao.arweave.dev.

Hasta la próxima, nos vemos en la Máquina.

So, why choose POKT?

What makes it different?

Let's dive into the many differences as to why you would choose POKT Network over other providers.

Intro to POKT Network & RPC Providers

POKT Network is a decentralized infrastructure that acts as a middleman between blockchain data and the applications that need it.

Imagine it like a bridge:

• On one side, you have various blockchains overflowing with valuable information, like transaction history, smart contract code, and token balances.

• On the other side, you have developers building the future of Web3 with decentralized applications (dApps). These dApps rely on accessing specific data from multiple blockchains to function properly.

However, there's a gap between these two worlds. Blockchains are complex and accessing their data directly can be challenging, especially for developers working with multiple chains.

This is where POKT Network comes in. It builds the bridge with two key components:

• Relay Network: Independent node providers run software ("relays") that connect to various blockchains. These relays act like toll booths, fetching and verifying data on demand.

• Decentralized Marketplace: Developers can access needed data by paying node providers with POKT, the network's native token. This creates a peer-to-peer marketplace for blockchain data, free from centralized control.

Benefits of using an RPC Provider

There are many benefits to using an RPC provider, making them a popular choice for developers working with blockchains and other distributed systems. Here are some key advantages:

Simplifies Development:

• Abstraction: RPC providers hide the complexities of network communication and remote procedure calls. Developers can focus on writing code to utilize the requested data or functionality without worrying about the underlying infrastructure.

• Standardized APIs: Most providers offer well-documented APIs that simplify interacting with various blockchains or services. This saves developers time and effort compared to building their own communication protocols.

• Reduced Codebase: Utilizing RPC calls promotes code reuse and avoids the need to develop and maintain individual node infrastructure, keeping your codebase cleaner and more manageable.

Improved Performance and Scalability:

• High Availability: RPC providers often have geographically distributed infrastructure, ensuring high uptime and redundancy compared to running your own node. This translates to reliable access to data and services even during outages or high traffic.

• Faster Response Times: Many providers invest in optimizing their infrastructure for low latency and fast response times, crucial for real-time applications and performance-sensitive interactions.

• Scalability: Providers can readily adapt to increased demand by scaling their infrastructure dynamically, eliminating the need for developers to manage node scaling themselves.

Cost-Effectiveness:

• Pay-as-you-go: Most providers offer flexible pricing plans, allowing developers to pay only for the resources they use. This can be significantly cheaper than running and maintaining your own nodes, especially for projects with fluctuating data needs.

• Reduced Hardware Requirements: Using an RPC provider eliminates the need for dedicated hardware to run your own nodes, saving on upfront costs and ongoing maintenance.

Additional Benefits:

• Security: Many providers offer advanced security features like DDoS protection and intrusion detection, enhancing the security of your application's interactions with the blockchain.

• Feature-rich Services: Some providers offer additional features like analytics, transaction history monitoring, and node management tools, providing valuable insights and simplifying development processes.

• Community and Support: Many providers have active communities and dedicated support teams, offering assistance and troubleshooting resources for developers encountering issues.

However, it's important to remember that some potential drawbacks also exist:

• Centralization Concerns: Using a centralized RPC provider introduces a potential single point of failure and raises concerns about censorship. Decentralized RPC providers like POKT aim to address these concerns.

• Vendor Lock-in: Relying on a single provider can create vendor lock-in, making it difficult to switch providers later. Choosing a provider with robust APIs and open standards can mitigate this risk.

• Security Risks: Choosing a reputable provider with strong security practices is crucial to ensure the safety of your applications and data.

Overall, the benefits of using an RPC provider often outweigh the drawbacks for most developers. Weighing your specific needs and priorities against the available providers will help you choose the best option for your project.

What Sets POKT Network Apart From Other RPC Providers?

The RPC Trilemma

The RPC Trilemma is a fundamental challenge faced by developers building applications that rely on blockchain data. It posits that achieving all three of the following goals is near-impossible:

• Performance: Fast response times and high throughput for data requests.

• Reliability: Consistent availability and uptime of the data source.

• Cost: Affordable, scalable pricing for data access.

Traditionally, developers have faced trade-offs when addressing these goals. Centralized RPC providers might offer better performance and reliability, but often at the expense of higher costs and potential censorship concerns. Conversely, decentralized alternatives can be more cost-effective and censorship-resistant, but sometimes struggle with achieving consistent performance and uptime.

This is where POKT Network comes in, claiming to navigate the RPC Trilemma through its unique, community-driven approach:

• Performance: POKT leverages a network of independent node providers ("relays") distributed across the globe, aiming to reduce latency and increase data accessibility. The competition between relays incentivizes them to optimize their infrastructure for faster response times.

• 

  Reliability: The P2P network architecture provides redundancy and resilience. If one node goes down, others can pick up the slack, minimizing downtime and ensuring consistent data availability.

• Cost: POKT utilizes a token-based payment system, allowing developers to pay only for the data they consume. This eliminates upfront fees and scales naturally with usage, promoting affordability.

Additionally, POKT addresses the Trilemma through:

• Community-driven governance: Token holders participate in network upgrades and feature development, ensuring the platform evolves to meet user needs and optimize performance, reliability, and cost.

• Open-source code: Transparency fosters trust and allows developers to contribute to the network's optimization and improvement.

• 

  Multi-chain compatible: POKT is actively integrating other blockchains to cater to developers building cross-chain dApps, currently boasting support for 40+ different blockchains including: Ethereum, Polygon, Arbitrum, Binance Smart Chain, Optimism, Solana, Starknet, and many more. Check out the POKT's supported chains list here: https://docs.pokt.network/supported-chains

POKT supports RPC services for 40+ different blockchains, including: Ethereum, Polygon, Arbitrum, Binance Smart Chain, Optimism, Solana, Starknet, and many more...

• Customization options: Developers can choose specific node providers and configure their requests for optimal performance and cost efficiency.

Does POKT Network Provide Free RPC Services?

Yes, with the ability to create two apps and mint an unlimited number of endpoints for free. No Credit Card Required.

Here's how it works:

Free Tier Features:

• Create up to two applications: Spin up separate projects and experiment with different data needs.

• Mint unlimited endpoints per application: Craft as many data access points as your applications demand within the free tier.

• 250,000 free relays per day: That's a substantial amount of data requests to play around with and build basic functionalities.

• No credit card required: Jump right in and start exploring without any upfront commitment.

Beyond the Free Tier:

Once you've outgrown the free tier's limits, POKT's Pay-as-you-go (PAYG) system seamlessly takes over. You'll only pay for the data requests your applications actually generate, ensuring cost-effective scaling for your growing needs.

Here's what PAYG offers:

• Transparent billing: Pay a tiny fraction of a cent per additional relay beyond the free tier.

• Monthly invoices: Keep track of your data usage and costs clearly.

• No overage charges: Never worry about unexpected bills, thanks to the predictable PAYG model.

Whether you're a seasoned developer or a curious newcomer, POKT Network's free tier and flexible PAYG system make exploring blockchain data accessible and affordable. Dive in, experiment, and unlock the possibilities of a decentralized data future!

Additional Resources:

• POKT Network Documentation: https://docs.pokt.network/get-rpcs/public-endpoints

• POKT Network Blog: https://www.pokt.network/blog/pay-as-you-go-explained

Wrapping Things Up:

For aspiring dApp architects, POKT Network is an open invitation to the future of web3. Its decentralized marketplace for blockchain data fosters freedom and empowerment, offering a refreshing alternative to centralized, siloed models. Start building without breaking the bank with a generous free tier and a transparent pay-as-you-go system, scaling seamlessly as your dApp takes flight. Unleash your creativity with unlimited endpoint creation, crafting tailored data pipelines for your unique vision. Embrace community-driven governance and shape the future of a censorship-resistant data landscape. Join the vibrant POKT Network ecosystem and build dApps that truly break the chains, all powered by the transparency, cost-effectiveness, and security of a thriving decentralized infrastructure. POKT isn't just a data provider, it's a passport to a more open, accessible, and equitable web3 world.

Start building today and become a pioneer in the data revolution!

For more detailed information on POKT Network, visit their official website and the POKT Network Documentation.

The Problem:

Currently, Ethereum utilizes a single blockchain to store all transaction data, leading to congestion and high gas fees during periods of high activity. This bottleneck hinders user experience and limits the network's potential for widespread adoption.

EIP-4844's Solution:

This upgrade introduces three key innovations to tackle these issues:

• Blob-Carrying Transactions:

  • Introduces a new transaction type capable of attaching large data segments ("blobs") without incurring exorbitant fees.

  • This enables efficient storage of bulky data, particularly for rollups, significantly reducing their overall gas costs.

• Data Availability Sampling:

  • Implements a mechanism for verifying the existence of data within blobs without downloading the entire data chunk.

  • This ensures data integrity while minimizing storage requirements and gas consumption.

• Delayed Data Removal:

  • Allows storing blobs on the Ethereum consensus layer for a predetermined period before automatic deletion.

  • This guarantees data accessibility for verification purposes while maintaining a manageable blockchain size.

Technical Implications:

EIP-4844 introduces several technical changes to the Ethereum protocol:

• State Rent: Introduces a mechanism called "state rent" to incentivize efficient data usage by charging users for storing data on the blockchain.

• Data Availability Checks: Implements cryptographic techniques for verifying the availability of data within blobs without requiring full downloads.

• Off-Chain Data Availability: Enables the use of off-chain data storage solutions, further reducing on-chain storage demands.

Impact and Benefits:

The successful implementation of EIP-4844 is expected to yield significant benefits for the Ethereum ecosystem:

• Reduced Gas Fees: By offloading bulky data to blobs, users will experience drastically lower transaction fees, especially for rollups.

• Increased Scalability: By optimizing data storage and processing, the network will be able to process more transactions per second, leading to improved scalability.

• Enhanced Rollup Performance: Rollups, a Layer 2 scaling solution, will benefit greatly from reduced gas fees and improved data handling capabilities.

• Sustainable Growth: EIP-4844 paves the way for future scaling solutions, ensuring the Ethereum network can accommodate future growth and adoption.

Current Status and Future:

EIP-4844 is currently under active development and testing on several public and private testnets. There's active testing on Goerli, Sepolia, and Rinkeby. The final specifications are being finalized, and a mainnet launch is anticipated in late 2023 or early 2024.

Conclusion:

EIP-4844 represents a significant step towards a more efficient, scalable, and cost-effective Ethereum network. Its implementation has the potential to revolutionize the way users interact with the network and unlock new possibilities for the Ethereum ecosystem.

Stay Informed:

For further information and updates on EIP-4844, you can refer to the following resources:

• Official website: https://www.eip4844.com/

• Ethereum Foundation blog: https://blog.ethereum.org/

• Testnet documentation: https://docs.prylabs.network/docs/getting-started

• Client updates: https://nimbus.guide/

• Community forums: https://ethereum-magicians.org/

In this tutorial, we will create a static QR Code Generator application using vanilla JavaScript, HTML, and Tailwind CSS. The application will allow users to enter a URL, generate a QR code, and download the QR code as an image.

Prerequisites

Before starting this tutorial, you should have a basic understanding of:

• HTML

• CSS

• JavaScript

Setting up the project

1. Create a new folder called qr-code-generator.

2. Inside the qr-code-generator folder, create the following files and folders:

codeqr-code-generator/
|-- img/
|   |-- qrcode.svg
|-- js/
|   |-- script.js
|-- index.html

Creating the HTML structure

Open the index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Generate a QR code image to point to a website URL"
    />
    <meta
      name="keywords"
      content="qr code, qr codes, qrcodes, create qr code, qr code generator, create qrcodes, make a qr code, online qr code"
    />
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            fontFamily: {
              sans: ["Poppins", "sans-serif"],
            },
          },
        },
      };
    </script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"
      integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="js/script.js" defer></script>
    <style>
      #spinner {
        display: none;
      }
    </style>
    <title>Free Online QR Code Generator</title>
  </head>
  <body>
    <header class="p-4 mb-10 bg-green-500">
      <div class="max-w-5xl m-auto">
        <div class="text-xl font-bold text-white">QR Code Generator</div>
      </div>
    </header>
    <img src="img/spinner.svg" alt="" />
    <main>
      <div
        class="flex flex-col-reverse align-center justify-center m-auto md:max-w-4xl p-10 md:flex-row"
      >
        <div class="w-full md:w-2/3 mr-24">
          <h1 class="text-3xl font-bold mb-5 md:text-4xl">QR Code Generator</h1>
          <p class="mb-4">
            QR Codes allow smartphone users to access your website simply and
            quickly.
          </p>
          <p>
            Enter your URL below to generate a QR Code and download the image.
          </p>

          <form id="generate-form" class="mt-4">
            <input
              id="url"
              type="url"
              placeholder="Enter a URL"
              class="w-full border-2 border-gray-200 rounded p-3 text-grey-dark mr-2 focus:outline-none mb-5"
              required
            />

            <select
              class="w-full border-2 border-gray-200 rounded p-3 text-grey-dark mr-2 focus:outline-none"
              name="size"
              id="size"
            >
              <option value="100">100x100</option>
              <option value="200">200x200</option>
              <option value="300" selected>300x300</option>
              <option value="400">400x400</option>
              <option value="500">500x500</option>
              <option value="600">600x600</option>
              <option value="700">700x700</option>
            </select>
            <button
              class="bg-gray-600 rounded w-full text-white py-3 px-4 mt-5 hover:bg-black"
              type="submit"
            >
              Generate QR Code
            </button>
          </form>
        </div>
        <div class="w-full md:w-1/3 self-center">
          <img
            class="w-1/2 m-auto mb-10 md:w-full"
            src="img/qrcode.svg"
            alt=""
          />
        </div>
      </div>

      <div
        id="generated"
        class="max-w-5xl m-auto flex flex-col text-center align-center justify-center mt-20"
      >
        <!-- Spinner -->
        <div id="spinner" role="status">
          <svg
            class="inline mr-2 w-24 h-24 text-gray-200 animate-spin dark:text-gray-600 fill-pink-600"
            viewBox="0 0 100 101"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
              fill="currentColor"
            />
            <path
              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
              fill="currentFill"
            />
          </svg>
          <span class="sr-only">Loading...</span>
        </div>

        <div id="qrcode" class="m-auto"></div>
      </div>
    </main>
  </body>
</html>

Styling the application with Tailwind CSS

We have already included the Tailwind CSS CDN in the <head> section of our HTML file. We have also added a custom font, Poppins, from Google Fonts. The application should now be styled with Tailwind CSS.

Adding interactivity with JavaScript

We have already added the script tag for qrcode.js library and included our custom script.js file with the defer attribute in the <head> section. Open the script.js file and add the following code:

const form = document.getElementById("generate-form");
const qr = document.getElementById("qrcode");

// Button submit
const onGenerateSubmit = (e) => {
  e.preventDefault();

  clearUI();

  const url = document.getElementById("url").value;
  const size = document.getElementById("size").value;

  // Validate url
  if (url === "") {
    alert("Please enter a URL");
  } else {
    showSpinner();
    // Show spinner for 1 sec
    setTimeout(() => {
      hideSpinner();
      generateQRCode(url, size);

      // Generate the save button after the qr code image src is ready
      setTimeout(() => {
        // Get save url
        const saveUrl = qr.querySelector("img").src;
        // Create save button
        createSaveBtn(saveUrl);
      }, 50);
    }, 1000);
  }
};

// Generate QR code
const generateQRCode = (url, size) => {
  const qrcode = new QRCode("qrcode", {
    text: url,
    width: size,
    height: size,
  });
};

// Clear QR code and save button
const clearUI = () => {
  qr.innerHTML = "";
  const saveBtn = document.getElementById("save-link");
  if (saveBtn) {
    saveBtn.remove();
  }
};

// Show spinner
const showSpinner = () => {
  const spinner = document.getElementById("spinner");
  spinner.style.display = "block";
};

// Hide spinner
const hideSpinner = () => {
  const spinner = document.getElementById("spinner");
  spinner.style.display = "none";
};

// Create save button to download QR code as image
const createSaveBtn = (saveUrl) => {
  const link = document.createElement("a");
  link.id = "save-link";
  link.className =
    "bg-green-500 hover:bg-black text-white font-bold py-2 rounded w-1/3 m-auto my-5";
  link.href = saveUrl;
  link.download = "qrcode";
  link.innerHTML = "Save Image";
  document.getElementById("generated").appendChild(link);
};

hideSpinner();

form.addEventListener("submit", onGenerateSubmit);

This code handles the following functionality:

• Form submission

• Generating the QR code

• Displaying and hiding the spinner

• Creating a save button to download the generated QR code

Conclusion

In this tutorial, we have built a static QR Code Generator using vanilla JavaScript, HTML, and Tailwind CSS. We have implemented form submission, QR code generation, and the ability to download the QR code as an image. This application provides a simple and efficient way for users to generate QR codes for URLs.

You can now use this QR Code Generator to create QR codes for your website or any other URLs you want to share quickly and easily. The application is easy to customize and extend, so feel free to make any adjustments or add new features to suit your needs.

If you enjoyed this tutorial, be sure to follow me on Twitter and subscribe to my blog!

Happy Building! (🧱 , 🚀 )

In this tutorial, you'll learn how to create a web application that allows users to buy you a coffee using Ethereum and send a thank you message using Mailchain. We'll be using React, Next.js, and the Mailchain SDK.

Prerequisites

• Basic knowledge of JavaScript, React, and Next.js

• Node.js and npm installed on your system

• MetaMask browser extension installed and set up

Setting up the project

1. Create a new Next.js project using the following command:

vbnetCopy codenpx create-next-app buy-me-a-coffee
cd buy-me-a-coffee

1. Install the required dependencies:

perlCopy codenpm install ethers @mailchain/sdk next dotenv

Creating the Smart Contract

We'll create a simple Ethereum smart contract that allows users to buy a coffee and store a memo on the blockchain.

1. Install the required development dependencies:

bashCopy codenpm install -D hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers

1. Initialize the Hardhat project:

Copy codenpx hardhat

1. Create a contracts directory and a BuyMeACoffee.sol file inside it:

bashCopy codemkdir contracts
cd contracts
touch BuyMeACoffee.sol

1. Add the following smart contract code to BuyMeACoffee.sol:

solidityCopy codepragma solidity ^0.8.0;

contract BuyMeACoffee {
    event NewMemo(
        address indexed from,
        uint256 timestamp,
        string name,
        string message
    );

    function buyCoffee(string memory name, string memory message)
        public
        payable
    {
        require(msg.value >= 0.001 ether, "Insufficient amount");
        emit NewMemo(msg.sender, block.timestamp, name, message);
    }
}

1. Compile the smart contract:

pythonCopy codenpx hardhat compile

1. Deploy the smart contract to a local Ethereum network using Hardhat or to a testnet/mainnet using Remix or any other deployment tool. Note the deployed contract address.

Building the Frontend

1. Create a new file utils/BuyMeACoffee.json and store the smart contract ABI in it. You can find the ABI in the artifacts/contracts/BuyMeACoffee.sol/BuyMeACoffee.json file.

2. Create a new pages/index.jsx file and replace its content with the provided code in your initial question.

3. Update the contractAddress variable in index.jsx with the address of your deployed smart contract.

4. Modify the index.jsx file as suggested in the previous answers to conditionally render the ENS address input field and send the Mailchain message.

Configuring Mailchain

1. Create a new file mailchain.jsx and add the following code:

javascriptCopy codeimport { Mailchain } from "@mailchain/sdk";
import * as dotenv from "dotenv";
dotenv.config();

const secretRecoveryPhrase = process.env.SECRET_RECOVERY_PHRASE;

const mailchain = Mailchain.fromSecretRecoveryPhrase(secretRecoveryPhrase);

1. Replace SECRET_RECOVERY_PHRASE with your own recovery phrase.

2. Create a .env.local file in the root of your project and add your recovery phrase:

makefileCopy codeSECRET_RECOVERY_PHRASE=your_secret_recovery_phrase_here

Running the Application

1. Start the development server:

arduinoCopy codenpm run dev

1. Open your browser and navigate to http://localhost:3000.

Using the Application

1. With the development server running, open your browser and navigate to http://localhost:3000.

2. Make sure your MetaMask extension is connected to the appropriate network (local, testnet, or mainnet) and has some Ether for transactions.

3. Click on the "Connect your wallet" button to connect your MetaMask wallet.

4. Once connected, you can enter your name, an optional message, and your ENS address (if you have one) in the provided input fields.

5. Click on the "Send 1 Coffee for 0.001ETH" button to send a transaction for buying a coffee.

6. MetaMask will prompt you to confirm the transaction. Confirm it and wait for the transaction to be mined.

7. Once the transaction is successful, the application will send a thank you message to the provided ENS address using Mailchain.

8. The recipient can then check their Mailchain inbox to see the thank you message.

Conclusion

Congratulations! You have successfully created a web application that allows users to buy you a coffee using Ethereum and send a thank you message using Mailchain. This tutorial demonstrated how to integrate Ethereum transactions and Mailchain messaging in a React application. You can further customize this application and add more features based on your requirements.

What is the Feynman Technique?

Named after the legendary physicist Richard Feynman, the Feynman Technique is a powerful method for learning and understanding complex concepts. It's all about breaking down ideas into their simplest forms and teaching them to others – a perfect fit for the DevRel world, where we're all about connecting with developers and sharing knowledge.

How Does the Feynman Technique Work?

The Feynman Technique is built on four simple steps:

1. Choose a concept: Pick a topic or concept that you want to learn and understand better.

2. Teach it to a child: Explain the concept in simple language, as if you were teaching it to a child or someone with no prior knowledge of the subject. This forces you to break down the idea into its most basic components and identify any gaps in your understanding.

3. Identify gaps and review: As you explain the concept, you may find areas where your understanding is incomplete or unclear. When you encounter these gaps, go back to your source material and review those sections to solidify your understanding.

4. Simplify and use analogies: Once you have a solid grasp on the concept, attempt to simplify your explanation further or use analogies to make it even more accessible.

How Does the Feynman Technique Apply to the DevRel Position?

As a DevRel professional, you're always engaging with developers, creating educational content, and sharing complex ideas. The Feynman Technique can help you:

• Simplify complex concepts for better communication

• Identify and fill gaps in your understanding

• Create more engaging and accessible educational content

• Improve your empathy for the developer community

Step-By-Step Tutorial: Applying the Feynman Technique to Your DevRel Practices

Alright, now let's walk through the process of applying the Feynman Technique to your DevRel work.

Step 1: Choose a concept

Select a topic related to your company's products or services that you want to learn and understand better. This could be a specific feature, a programming concept, or an integration with another technology.

Step 2: Teach it to a child

Find a quiet space, grab a piece of paper or a whiteboard, and start explaining the concept as if you were teaching it to a child or someone with no prior knowledge. Keep it simple and avoid jargon. Use plain language and focus on clarity. If you can't explain it simply, that means you don't understand it well enough yet!

Step 3: Identify gaps and review

As you're explaining the concept, you might come across areas where you're not entirely clear or confident. Jot down these gaps and revisit your source material to review those sections. This step is essential for ensuring you have a solid understanding of the concept.

Step 4: Simplify and use analogies

Now that you've filled in the gaps, try to simplify your explanation even further. Use analogies to make the concept more relatable and easier to grasp. For example, if you're explaining APIs, you might compare them to a restaurant menu, where developers can choose what data or functionality they want to access.

Step 5: Put it into practice

Now that you've mastered the concept using the Feynman Technique, it's time to put your newfound knowledge into practice. Here are some ways to incorporate the Feynman Technique into your DevRel activities:

• Engage with the developer community: Use your simplified explanations and analogies when answering questions on forums, social media, or during events. Your clear and accessible communication will make it easier for developers to grasp the concepts and connect with your company's products or services.

• Create educational content: Apply the Feynman Technique when writing blog posts, tutorials, or documentation. By focusing on simplicity and clarity, your content will be more engaging and helpful for your audience, regardless of their skill level.

• Host workshops or webinars: Share your expertise with the developer community by organizing workshops or webinars. Use your refined communication skills to deliver clear and concise presentations that resonate with your audience.

• Advocate for the developer community within your company: Use the insights you've gained from the Feynman Technique to better understand the challenges and needs of developers. Share this feedback with your product and engineering teams to help shape the development of new features and improvements.

Wrapping Up

And there you have it, folks! By incorporating the Feynman Technique into your DevRel practices, you'll not only become a better communicator but also deepen your understanding of the technologies and concepts you advocate for. So, give it a shot, and let me know how it works for you in the comments below.

Remember, the key to mastering any skill is practice and persistence. Keep working on the Feynman Technique and applying it to your DevRel work, and you'll be amazed by the results.

That's it for today, my friends. Let me know what you think of the article, its topic, the writing style, or anything else on your mind. And, of course, be sure to subscribe for more awesome content. Until next time, happy learning!

• Written a whitepaper

• Written a grant proposal

• Built a full 5-page website

• Shot our Founders intro video

• And, finally, submitted a Y Combinator application with only 10 mins to spare! 🥵

Now, we just need a proper domain for the website. 🤔

The 🐣 Easter Weekend 🐣 is now in full swing, and things will need to slow down for me for a bit. I'm going to take the win of barely making it into Y Combinator's cutoff time as a clear signal to sit back, be present with the family, and strategize as to what to do next.

Reflections

As I'm building very much out in the open, I can't believe the immense amount of support I've received from the community of developers around me, especially from Developer DAO. As a member of Developer DAO for almost a year now, I really can't imagine where I would be in my Developer Career. I would have never been encouraged to create content, participate in hackathons, and honestly know my own worth as a developer.

Guardian's Current Status

Our Repos:

Patrick's: https://github.com/PSkinnerTech/airguardian-node

Tony's: https://github.com/tonykipkemboi/Streamr-Mini-Hackathon

Guardian is still just a couple of GitHub repos (they're both open-source, by the way, if you want to check them out). We need a bit of money to buy all the necessary components to start building the first MVP, which brings us to our "to-do" list.

1. Create a list of grants to apply to.

2. Add some design features to the whitepaper and grant proposal.

3. Keep working on the Decentralized Dashboard for collecting and presenting real-time data.

4. Apply to Startups.com, Techstars, and other prominent accelerator programs.

I'm thinking this is the right direction. What do you guys think? 🤔 This seems to be the logical path forward from this point. Let me know in the comments below! Until then, I'll write to you guys again within the next 24 hours. Peace!

After attending an introduction webinar by @nicoburkart, DevRel for Streamr, I dove headfirst into their documentation. I was instantly captivated by the speed of their data streams and their IoT integration capabilities. With my startup, AGAMI, I've gained valuable experience in building IoT devices, so the idea of creating a physical product that generates decentralized data felt like a thrilling challenge.

I brainstormed for a few hours, initially toying with the idea of a child kidnapping/trafficking device. But let's be real, that was way too ambitious for a 72-hour project. Then, inspiration struck! Living in Colombia, my family and I are not far from an active volcano. While the lava isn't a major concern, the poisonous ash is. Local news advised people to have evacuation plans, and that got me thinking: "What if there was an early warning sign for potentially harmful air quality?" And that's when the lightbulb went off – AirGuardian, a decentralized air quality monitoring system, was born.

The support from the Developer DAO community was incredible; they loved the idea and encouraged me to build it. The project had two parts: the AirGuardian Nodes (github repo) to collect and send data to Streamr's pipelines, and the AirGuardian Monitoring system (github repo), a map displaying the geolocation of Nodes and the air quality data they collect.

I tackled the Nodes first. Funny enough, my experience with Raspberry Pi's only started when my son was old enough to build robots and other STEM projects. That knowledge proved invaluable for this build, setting up the Pi to interact with various components and push data to Streamr. Nico from Streamr was a huge help in guiding me through this process.

The second part was a bit trickier. I ambitiously wanted to create a fully decentralized map using Mapbox and deploying it onto Arweave. But time was running out, and I had a ton of bugs to fix. So, I blew the Developer_DAO conch shell horn and yelled, "DEVELOPERS... ASSSSEEMMMMMBBBBBLLLLE!" @pbillingsby was the first to answer the call. @pbillingsby is a DevRel for Arweave, a fellow Developer_DAO member, and a level 99 Debugging Grand Wizard. I learned so much from him in such a short period of time. But, despite his efforts to bestow me with his debugging wisdom, was out of time and opted for a basic map as an MVP. Still, no regrets. I learned so much for at least making the bold attempt.

Submitting my project was nerve-wracking – my first-ever Hackathon! I sought feedback from Developer_DAO members who were amazingly constructive in their criticism. The support from the community was incredible, and I couldn't be more grateful. To my astonishment, I started receiving messages about my entry, even from companies I had previously applied to.

It was during one of those interviews that I discovered I'd won the Hackathon! I couldn't contain my excitement and even did the "All the Single Ladies" dance to celebrate.

The experience was beyond amazing, and I'm now a Developer_DAO supporter for life. Streamr is an incredible product, and I'll keep building on this project. The 2nd place winner, @tonykipkemboi, built a similar product for seismic activity detection, and we're joining forces to apply for grants and build create one super product. With me, Tony, Developer_DAO, Streamr and our powers combined.... 👀

With Y Combinator and Techstars application deadlines just around the corner, I'm seizing the opportunity and applying. You never know what might happen when you take a shot – and this Hackathon experience was a perfect reminder of that.

Air pollution is a growing concern across the globe, affecting the health and well-being of millions of people. As urbanization continues to increase and industrial activities expand, monitoring air quality has become a crucial task for governments, businesses, and individuals alike. To address this challenge, we present the AirGuardian Node, a decentralized air quality monitoring solution that empowers communities to take control of their environment.

The AirGuardian Node is a compact, cost-effective, and easy-to-build device that combines the power of a Raspberry Pi 4 with the precision of the SDS011 air quality sensor. By leveraging the capabilities of the Streamr Network, the AirGuardian Node allows users to collect, store, and share real-time air quality data from various locations. This information can be utilized to identify pollution hotspots, evaluate the effectiveness of emission reduction strategies, and raise awareness about the importance of clean air.

Designed with sustainability in mind, the AirGuardian Node is powered by solar energy, making it an environmentally friendly and self-sufficient solution for air quality monitoring. Its weatherproof enclosure and durable components ensure reliable operation in various outdoor settings, from bustling city streets to remote rural areas.

In this tutorial, we will guide you through the process of building, programming, and deploying your very own AirGuardian Node. We will cover everything from assembling the hardware and setting up the Raspberry Pi to connecting the air quality sensor and configuring the Streamr client for data streaming. By the end of this tutorial, you will have a fully functional AirGuardian Node that you can use to monitor and contribute to the collective understanding of air quality in your community.

Use Cases:

Here are several use cases for a decentralized air quality sensor using a Raspberry Pi 4 and an SDS011 sensor:

1. Urban air quality monitoring: Deploying multiple sensors across a city can help monitor air quality in real-time and provide valuable data for policymakers to implement strategies to improve air quality.

2. Indoor air quality monitoring: The device can be used to monitor air quality inside homes, offices, schools, and other buildings to ensure healthy living and working conditions.

3. Industrial emission monitoring: The device can be installed near industrial facilities to measure emissions from factories and plants, helping authorities enforce regulations and businesses to reduce their environmental impact.

4. Traffic-related air pollution: The sensors can be placed near busy roads, intersections, and highways to monitor the impact of vehicular emissions on air quality.

5. Agricultural air quality monitoring: Farmers can use the device to monitor air quality around their farms, detecting the presence of harmful chemicals or particles caused by pesticide use, fertilizers, or other agricultural processes.

6. Construction site monitoring: The sensor can be installed at construction sites to measure dust, particulate matter, and other pollutants released during construction activities, helping to ensure compliance with environmental regulations and protect workers' health.

7. Forest fire and wildfire detection: Deploying the devices in forested areas can help detect early signs of wildfires by monitoring changes in air quality, enabling rapid response to minimize damage.

8. Air quality-based alert systems: The device can be integrated into alert systems that notify users when air quality reaches unhealthy levels, advising people with respiratory issues or other sensitivities to stay indoors or take other precautions.

9. Smart city applications: The decentralized air quality sensors can be part of a larger smart city infrastructure that uses the data collected to optimize traffic flow, manage waste collection, and inform urban planning.

10. Research and education: The device can be used by researchers and students to study the effects of air pollution on health, the environment, and climate change, as well as develop innovative solutions to improve air quality.

What you'll need:

To build the decentralized air quality sensor using a Raspberry Pi 4 and an SDS011 sensor, you will need the following items and tools:

Items:

1. Raspberry Pi 4 (with 2GB, 4GB, or 8GB RAM, depending on your requirements)

2. 32 GB microSD card (Class 10 or higher recommended)

3. SDS011 air quality sensor

4. USB to UART adapter (compatible with the SDS011 sensor)

5. Raspberry Pi power supply (USB-C, 5V, 3A)

6. Solar panel (with sufficient wattage to power the Raspberry Pi 4)

7. Solar charge controller (compatible with the solar panel and battery)

8. Battery (for storing solar energy and powering the Raspberry Pi during low sunlight)

9. Voltage converter or power supply (to convert the battery voltage to 5V for the Raspberry Pi)

10. Weatherproof enclosure (to protect the Raspberry Pi and SDS011 sensor from the elements)

11. Mounting hardware (to secure the device in the desired location)

12. Jumper wires and connectors (to connect the components)

Tools:

1. Computer (for programming and setting up the Raspberry Pi)

2. Raspberry Pi Imager (for installing the Raspberry Pi OS)

3. SSH client or terminal emulator (for remote access to the Raspberry Pi)

4. Soldering iron and solder (if required for making connections)

5. Wire strippers and cutters (for preparing jumper wires and connectors)

6. Screwdrivers (for assembling the enclosure and mounting hardware)

7. Multimeter (for testing connections and voltages)

Optional Items:

1. Wi-Fi dongle (if the Raspberry Pi 4's built-in Wi-Fi is not sufficient)

2. USB keyboard and HDMI monitor (for local access to the Raspberry Pi if not using SSH)

3. Heat sink and cooling fan (to keep the Raspberry Pi 4 cool during operation)

4. Real-time clock module (to maintain accurate time when the Raspberry Pi is not connected to the internet)

5. External antenna (to improve Wi-Fi or cellular connectivity, if required)

Tutorial

Here's a comprehensive tutorial on how to code, build, and deploy a decentralized air quality sensor using a Raspberry Pi 4, an SDS011 sensor, and a 32 GB microSD card that pushes data to the Streamr network.

Step 1: Hardware Setup

1.1. Assemble the Raspberry Pi 4 with the microSD card. 1.2. Connect the SDS011 sensor to the Raspberry Pi using a USB to UART adapter.

Step 2: Software Setup

2.1. Install Raspberry Pi OS on the microSD card using the Raspberry Pi Imager tool or any other preferred method.

2.2. Set up Wi-Fi and SSH access on the Raspberry Pi (if not done during OS installation).

2.3. Connect to the Raspberry Pi using SSH or open the terminal on the Raspberry Pi.

Step 3: Install Required Libraries

3.1. Update the package list and upgrade the installed packages:

codesudo apt update
sudo apt upgrade

3.2. Install Node.js and npm:

codecurl -fsSL https://deb.nodesource.com/setup_16.x | sudo bash -
sudo apt install -y nodejs

3.3. Verify the installation:

codenode -v
npm -v

Step 4: Create the Project

4.1. Create a new directory for the project and navigate into it:

codemkdir air-quality-sensor
cd air-quality-sensor

4.2. Initialize a new npm project:

codenpm init -y

Step 5: Install Dependencies

5.1. Install the streamr-client, sds011-wrapper, and dotenv libraries:

codenpm install streamr-client sds011-wrapper dotenv

Step 6: Create the Application

6.1. Create a new .env file to store your Streamr private key:

codeecho "ETHEREUM_PrivateKey=YOUR_PRIVATE_KEY" > .env

Replace YOUR_PRIVATE_KEY with your actual private key.

6.2. Create a new index.js file with the following content:

codeconst StreamrClient = require('streamr-client');
const SDS011Wrapper = require('sds011-wrapper');
const fs = require('fs');

require('dotenv').config();

const client = new StreamrClient({
  auth: {
    privateKey: process.env.ETHEREUM_PrivateKey,
  },
});

const sensor = new SDS011Wrapper('/dev/ttyUSB0'); // Replace with the correct port for the SDS011 sensor on your Raspberry Pi

sensor.setReportingMode('query'); // Set the SDS011 sensor to query mode
sensor.setWorkingPeriod(1); // Set the working period to 1 minute (optional)

const publishAirQualityData = async (pm25, pm10) => {
  const data = {
    pm25: pm25,
    pm10: pm10,
  };

  console.log('Air Quality Data:', data);
  await client.publish('STREAM-ID', data); // Replace STREAM-ID with your Stream ID
};

sensor.on('measure', (pm25, pm10) => {
  publishAirQualityData(pm25, pm10);
});

Make sure to replace /dev/ttyUSB0 with the correct port for the SDS011 sensor on your Raspberry Pi and STREAM-ID with your Stream ID.

Step 7: Run the Application

7.1. Run the index.js file:

codenode index.js

The application will start collecting air quality data from the SDS011 sensor and publish it to the Streamr network.

In Closing

As we conclude this tutorial on building and deploying the AirGuardian Node, we hope that you have gained valuable insights and hands-on experience in creating a decentralized air quality monitoring system. By harnessing the power of cutting-edge technology and renewable energy, the AirGuardian Node offers an accessible, cost-effective, and sustainable solution for individuals and communities to monitor their environment.

By building and deploying your own AirGuardian Node, you are contributing to a global network of air quality sensors, providing crucial data that can inform decision-making, facilitate research, and raise public awareness about air pollution. As more people join this collective effort, we can create a comprehensive and accurate map of air quality around the world, empowering communities to take action and advocate for cleaner air.

We encourage you to share your experiences, challenges, and successes with the AirGuardian Node within your community and beyond. As a collaborative and open-source project, we believe that fostering a supportive and innovative community is essential for driving change and addressing air pollution challenges.

Thank you for embarking on this journey with us, and we look forward to witnessing the positive impact that the AirGuardian Node will have on our environment and our lives. Together, we can create a cleaner, healthier, and more sustainable future for all.

Demo Link: https://links.patrickskinner.tech

Required Knowledge For this Project:

• HTML: Basic Understanding

• CSS: Basic Understanding

• Javascript: "I know what it is, but I've never used it before."

Intro:

This is a comprehensive tutorial on how to create a "Link in Bio" / "Linktree Clone" / "Badass Links Page". The only requirement that will not be discussed in this in this tutorial is to have a text editor. I personally use vsCode, but any text editor will work. For you to follow along exactly with what is detailed, I recommend using vsCode if you don't currently have one picked out.

Without any further ado, let's get into the tutorial:

Step-By-Step Guide

Step: 1 - Create your work environment

• Create a folder that will be your working environment.

• Open your folder in your preferred text editor.

• Create the necessary files:

  • Index.html

  • style.css

Note: We're not going to use an image folder for the sole purpose of keeping this website as light as possible. We'll be using a decentralized file storage app called AKORD to source all of our image.

Step 2: Create your HTML Wire Frame

*Create your HTML wireframe starting with <!DOCTYPE html>.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <main>
      <header>
      </header>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </main>
  </body>
</html>

Defining Tags:

• <!DOCTYPE html> is an HTML (Hypertext Markup Language) declaration or document type declaration that specifies the version of HTML used in a web page. It is usually placed at the beginning of an HTML document and informs the web browser how to interpret the code that follows. It helps ensure that the web page is displayed correctly and consistently across different browsers and devices.

• <html> is an HTML element that serves as the root element of an HTML document. It is the container for all other HTML elements, and its opening and closing tags enclose all the content of the web page, including the head and body sections. The HTML code inside the <html> element describes the structure and content of the web page and is interpreted by web browsers to display the web page to users.

• <head> is an HTML element that is used to contain the metadata of a web page. This metadata includes information such as the title of the web page, links to external stylesheets and scripts, and other information that helps web browsers properly render the content of the web page. The <head> element is not visible on the web page and is usually located between the <html> and <body> elements.

• <body> is an HTML element that represents the main content of a web page that is visible to users. It contains all the content that is displayed on the web page, such as text, images, videos, forms, and more. The <body> element is located between the opening and closing tags of the <html> element and is typically the largest section of an HTML document. It is the part of the web page that users interact with and is rendered by web browsers to display the content to users.

• <header> is an HTML element that is used to represent the introductory content or navigation links at the top of a web page. It is typically used to display the logo, site title, and primary navigation links of a website. The <header> element is usually located at the top of the <body> section of an HTML document, but it can also be used within other sections of the page. It is a semantic element that helps search engines and screen readers better understand the content and structure of the web page.

• <main> is an HTML element that is used to represent the main content of a web page. It contains the primary content that is unique to the web page and should not be repeated across multiple pages. The <main> element is typically used to enclose the main article, section, or other content areas of a web page. It is a semantic element that helps search engines and screen readers better understand the structure and purpose of the web page. The <main> element should only be used once per page and should not be nested within other semantic elements like <article> or <section>.

• <ul> is an HTML element that is used to create an unordered list of items. It stands for "unordered list" and is used to group together related items in no particular order. The items are usually represented as bullet points, but the appearance can be customized with CSS. Each item in the list is represented by an <li> (list item) element, which is nested within the <ul> element. The <ul> element can also be nested within other list elements, such as <ol> (ordered list), to create more complex list structures.

• <li> is an HTML element that is used to represent an item in a list. It stands for "list item" and is typically used within <ul> (unordered list) or <ol> (ordered list) elements to create a bulleted or numbered list of items. Each <li> element contains the content of the list item, such as text, images, or links. The <li> element can also be used within other contexts, such as navigation menus, where it represents a menu item.

Step 3: Fill in your <head> tags:

• Add these 4 separate lines to your <head> tags:

  <head>
    <meta charset="utf-8" />
    <meta name="'viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <title>[Insert Name Here]'s Badass Links Page</title>
  </head>

Defining your <head> tags baseline:

• <meta charset="utf-8" /> is a HTML tag that specifies the character encoding for the document. The charset attribute tells the browser what character encoding the document is using, which is important for displaying text correctly. The utf-8 value is a widely-used character encoding that supports a wide range of characters and is recommended for use in modern web development.

• <meta name="'viewport" content="width=device-width, initial-scale=1" /> is a HTML tag that sets the viewport, which is the visible area of a web page, on mobile devices. The width=device-width value sets the width of the viewport to the width of the device's screen, while initial-scale=1 sets the initial zoom level to 100%, which is typically what users expect when viewing a web page on their mobile device. This tag is important for ensuring that the layout and content of a web page are displayed properly on mobile devices with different screen sizes and resolutions.

• <link rel="stylesheet" href="style.css" /> is a HTML tag used to link an external CSS file to a web page. The rel attribute specifies the relationship between the current document and the linked resource, in this case, a stylesheet. The href attribute specifies the path to the CSS file that contains the styles to be applied to the web page. By using this tag, the styles defined in the linked CSS file can be applied to the HTML elements of the web page, allowing for better control over the visual appearance of the web page.

Step 4: Begin Filling your <body> tags

• Inside the <body> -> <main> -> <header>, add: <h1>Your Name</h1>

<header>
    <h1>Your Name</h1>
</header>

• Inside the <body> -> <main> -> <ul> -> <li> tags add:

      <ul>
        <li>
          <a>Personal Website</a>
        </li>
        <li>
          <a>Youtube</a>
        </li>
        <li>
          <a>Twitter</a>
        </li>
        <li>
          <a>GitHub</a>
        </li>
        <li>
          <a>Linkedin</a>
        </li>
        <li>
          <a>My Blog</a>
        </li>
        <li>
          <a>Buy Me Coffee</a>
        </li>
      </ul>

Note: You don't have to add all of these if you're building this for your use. Use whatever you deem necessary

New Tag Definitions:

• <a> is a HTML tag used to create a hyperlink to another webpage or resource. The a stands for "anchor" and it is often used to create clickable links on web pages. The href attribute is used to specify the destination of the link, which could be a web page, a file, an email address, or any other resource on the web. When a user clicks on the link, they will be taken to the destination specified in the href attribute.

Step 6: Importing Font-Awesome Icons

• Go to this website: https://cdnjs.com/libraries/font-awesome

  • Find the very first font-awesome library link that ends in /css/all.min.css, then click the </> icon to copy the import syntax

  • Paste the import syntax in your <head> tags.

  <head>
    <meta charset="utf-8" />
    <meta 
        name="'viewport" 
        content="width=device-width, initial-scale=1" 
    />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-                                                awesome/6.3.0/css/all.min.css"
      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <title>[Insert Name Here]'s Badass Links Page</title>
  </head>

What this does is that it gives us access to all of the free Font-Awesome icons that we could ever want to use for our website.

• Go to this website: https://fontawesome.com/search

  • Click the "Free" button that has a lightning bolt icon.

  • Search for the icon you want to add to the first link.

  • By default, it will show you the HTML syntax. Click on the syntax once to copy it.

  • past the syntax inside of the <a> tags you want the icon to be associated with.

• Do this for every link you want an icon for.

New Definitions

• <i> is an HTML tag used to format text in italics. The i stands for "italic" and it is used to indicate that the enclosed text should be displayed in a slanted or cursive font style. However, it is important to note that the use of the <i> tag has been deprecated in favor of using the <em> tag to indicate emphasis, as it provides better semantic meaning to the text.

STEP 7: Add Hyperlinks to Each <li>

To have the links work, we need to add an href inside each a tag inside the li tag.

• Inside each <a> tag, add a href="#".

        <li>
          <a href="https://patrickskinner.tech"
            ><i class="fa-solid fa-globe" alt="Homepage" width="20">        
            </i>
            Official Website
          </a>
        </li>

Note: If you want the links to open on a page in a new tab, add target="_blank" inside the a tag after the href.

        <li>
          <a href="https://patrickskinner.tech" target="_blank"
            ><i class="fa-solid fa-globe" alt="Homepage" width="20">        
            </i>
            Official Website
          </a>
        </li>

STEP 8: Add an Image to the <header>

We're going to use a decentralized file storage application called AKORD.

• Create an account here: https://akord.com/products/web-app

• Set up a PUBLIC folder.

• Place your preferred PFP in the public folder either with the upload button or with drag or drop. Note: I recommend the image be square in dimensions no more than 400x400 pixels.

IMPORTANT:

The reason why we're using AKORD is that it's a great place to establish website images. You'll never need to pay for the storage monthly and it's stored on the Arweave Blockchain. So, no matter what, the image will always display on the website and you'll avoid storage server issues, payment issues, etc. Now, because it's stored on the blockchain, establishing a working link is slow. Once you upload the image, there will be an orange dot next to the image title. That orange dot means the image is still being stored on the Arweave Blockchain and you won't have a working link for it yet. the process takes roughly 30 mins before it's ready.

• Once the orange dot has disappeared, copy the image address by right-clicking the image and clicking 'copy image address'.

• Go back to the HTML file and, within the <header> tag just before the <h1> tag, add this: <img src="" />

• Inside the src="" inside the double quotes, add the image address that you copied from AKORD.

      <header>
        <img
          src="https://arweave.net/#"
        />
        <h1>Your Name</h1>
      </header>

Tag Definition

• <img /> is an HTML tag used to insert an image into a web page. The img stands for "image" and it is a self-closing tag, meaning that it doesn't require a closing tag. The src attribute is used to specify the URL or file path of the image to be displayed on the web page. Other attributes, such as alt and title can be used to provide a description and additional information about the image for accessibility and SEO purposes.

Step 9: Begin Styling with CSS

• Open your 'style.css' file in your text editor.

• Style your body & HTML tags with these settings:

body,
html {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

• Style your header tags with these settings:

header {
  margin-top: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

STEP 10: Stylizing the Profile Picture

In this section, we're going to use an SVG Shape Generator from Softr.io.

• Go to this website: https://www.softr.io/tools/svg-shape-generator

• Use the tool to create a shape you'd like to have as the frame of your PFP.

• Once created, download the SVG file (don't copy it).

• With the file downloaded, go to this website: https://base64.guru/

• At the top navbar, mouse over "Converter", then "Base64 Encode", then "Image", then click on "SVG".

• Change the output to "Data URI -- data:content/type;base64"

• Upload the SVG file you downloaded from Softr.io.

• Click "Encode SVG to Base64".

• A code will appear in a text box labeled "Base64", copy the entire code.

• Go back to your text editor and into the style.css file. Create this CSS declaration block.

header > img {
  width: 10em;
  height: 10em;
  -webkit-mask-image: url();
}

• Inside the parenthesis of the url(), paste the code you copied from Base64.guru.

Once completed, this will reshape the container of your PFP to the style that you created in the SVG Shape Generator from Softr.io.

STEP 11: Stylizing your H1

We're going to stylize your H1 to have a pill-shaped container with a white border.

• Create a new CSS declaration box in your style.css file:

header > h1 {
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 1em;
  background-color: #000a;
  color: #fff;
  padding: 0.3em 0.6em;
  border: 1px solid #fffa;
}

STEP 12:Stylizing the Link Buttons

Let's first create the pill-shaped container for the link buttons.

• Create a CSS declaration block for ul > li in the style.css file:

ul > li {
  background-color: #fff;
  backdrop-filter: blur(10px) saturate(160%) contrast(180%);
  -webkit-backdrop-filter: blur(10px) saturate(160%) contrast(180%);
  border-radius: 10em;
  padding: 1em;
  margin: 1.4em 0;
  box-shadow: rgb(28 32 93 / 24%) 0px 2px 8px 0px;
}

• Just above that declaration, create the CSS declaration block for ul:

ul {
  box-sizing: border-box;
  list-style: none;
  margin: 0 auto;
  padding: 2em;
  max-width: 480px;
}

• Below the CSS declaration block for ul > li, create another CSS declaration block for ul > li > a:

ul > li > a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}

• Lastly, create a CSS declaration block for a:

a {
  text-decoration: none;
  color: #000;
}

The final result should look like this:

STEP 13:Stylizing the Background with Vanta.js Motion Graphics

Let's create a background that has paper birds flying in a dark background and are responsive to mouse movement.

• Create a new CSS declaration box in your style.css file:

body {
  background: #000;
  background-size: cover;
}

• Go to this website: https://www.vantajs.com/

• In the design navbar on the right of the screen, change the colors however you want them to be. Once done, copy the code from the bottom of the design navbar.

FOLLOW THESE NEXT STEPS VERY CAREFULLY

• Go back to your text editor and into your index.html file.

• Within your <head> tags, paste the code. under the other elements.

  <head>
    <meta charset="utf-8" />
    <title>Patrick Skinner - "Doc"</title>
    <meta name="'viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <script src="three.r134.min.js"></script>
    <script src="vanta.birds.min.js"></script>
    <script>
      VANTA.BIRDS({
        el: "#your-element-selector",
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.0,
        minWidth: 200.0,
        scale: 1.0,
        scaleMobile: 1.0,
      });
    </script>
  </head>

• With this code added, it will not work until you change the src links. Go back to the Vanta.js website, right-click each link from the code snippet, and select "Copy Link Address".

• Go back to your text editor and into your index.html file. Paste the new link to the appropriate script tag.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
    <script>

YOU'RE DONE!

Congratulations! Let me know what you think of this build. Feel free to post questions in the comments.

What is the Orbital Model?

The Orbital model is a strategic framework that focuses on creating long-term relationships with customers through customer engagement, brand reputation, and product innovation. This model can be applied to a variety of businesses, including open source protocols, and can be especially relevant to the role of Developer Relations (DevRel) in these organizations.

The Four Elements of the Orbital Model

The four key elements of the Orbital Model:

1. Gravity: Gravity is the force that keeps members engaged and motivated in a community. Members revolve around a shared mission and values, building relationships that help the community achieve its goals. The mission, values, and connections act as forces that attract and retain members.

2. Love: Love refers to the emotional connection that members feel towards the community and the protocol. This emotional connection drives engagement, advocacy, and loyalty.

3. Reach: Reach is the process of expanding the community by attracting new members and increasing the community's visibility. Reach is not just about numbers, but also about the quality of connections and relationships within the community.

4. Impact: Impact is the ultimate goal of the Orbital Model. The impact of the community and the protocol is measured by how it affects the lives of its members and the world around it. Impact can be achieved through product innovation, community contributions, and advocacy.

Gravity:

The Orbital Model recognizes the importance of building a strong community and the force of gravity that keeps members engaged and motivated. In a solar system, everything revolves around the sun, while in a community, members revolve around a shared mission and values. As members orbit, they build relationships that help the community achieve its goals, and the mission, values, and connections act as forces that attract and retain members.

A community's gravity causes members to pull themselves closer to the center, with highly engaged members orbiting faster at the center.

The concept of gravity is central to community building. These movements determine each community's unique field of gravity. In the Orbital Model, community builders can measure gravity and observe how it changes over time in response to various stimuli, such as engagement tactics and product improvements. Understanding a community's field of gravity is key to building a strong, sustainable community around an open source protocol.

Gravity = Change in Weighted Commitment / # of Members

Gravity & Growth:

Gravity and growth are two essential components of community building. However, striking a balance between growth and maintaining a community's values and sense of connection can be challenging. If a community grows too quickly without maintaining its gravity, it can negatively impact its impact and engagement levels.

Fortunately, the Orbit Model provides a framework for achieving this balance by leveraging the benefits of both gravity and growth. In this model, gravity is seen as the foundation for growth. The more gravity a community has, the more growth it can sustain while maintaining its values and connection between members. When members increase their commitment level, they can guide and integrate new or less involved members, allowing for an efficient and reliable process of moving members up to higher levels of involvement.

High-gravity communities can effectively integrate new members and help them reach higher levels of involvement. In contrast, low-gravity communities struggle with this process. As a metric, gravity measures how quickly member involvement is changing.

The Orbit Model identifies two key characteristics of each member, love and reach, that can help increase gravity. Love refers to the emotional connection members feel towards the community and the protocol, while reach is the process of expanding the community and increasing its visibility. By focusing on both love and reach, community builders can increase the community's gravity and sustainably grow its membership while maintaining its sense of connection and values.

Love:

In the context of community building, love is a crucial measure of a member's level of involvement and commitment. As members progress from newcomers to regulars to leaders, their love for the community increases, and this high level of commitment is essential in directing resources and people towards the company's mission.

However, it's not just high love members that are important; a balance of members with varying levels of love is necessary for a healthy community. Without a sufficient number of medium and high love members, it's not advisable to add new low-love members since they may struggle to integrate and engage with the community.

Using love as a metric, members can be assigned to different orbit levels, based on their level of commitment and regularity of activities. These levels provide a quick snapshot of a member's orbit within the community's field of gravity, helping community builders make informed decisions about growth and engagement tactics.

Reach:

Reach is a metric that measures a community member's influence within and beyond the community. It factors in a member's reputation, credibility, and degree of connectedness to others. Members with high reach have broad and influential networks within the community, and information is likely to flow through them, causing others to follow.

To study reach, we use network analysis and graphs. Each node in the graph represents a member, and an edge exists between two nodes if they have a direct or indirect connection, such as a discussion on the community forum or attending the same event.

As a metric, reach considers the number, strength, and freshness of a member's connections, as well as their centrality within the network. Additionally, a concept called clout measures a member's external reach and looks at their influence outside the community, as well as their ability to act as a bridge between different groups of people.

Impact:

The outcomes of a community's work and operation are collectively referred to as its impact. When a business invests in building a community, it can expect a return on its investment in the form of increased revenue, leads, visitors, partners, products, support, and social impact, among others.

In the Orbit Model, we conceptualize the community-to-business process as a flywheel, with the outputs of each step feeding back in as inputs to create a self-sustaining cycle. For instance, when satisfied customers become advocates, they attract more happy customers who, in turn, become advocates themselves, leading to a multiplication of positive outcomes. This helps explain how communities can generate exponential impact over time.

The Standard Open Source Community

Open source communities typically have a core tech stack, including a code repository, synchronous communication for core members, and occasionally a Twitter account or mailing list. These communities possess an inherent understanding of the development process and can usually code. Some well-known open source communities include Mozilla, Linux, freeCodeCamp, VS Code, and Orbit.

Common Challenges They Face:

Open source projects have become popular due to the collaborative opportunities they offer. However, working in an open source environment also presents some unique challenges. First and foremost, it is essential to prioritize moderation, having a code of conduct, and creating an inclusive, welcoming environment. These factors are necessary to build a high-gravity community that attracts and retains contributors.

Another aspect that is often overlooked is user support. When a project is new and not widely adopted, it may not seem like a burden. However, as the project grows and gains more users, the number of dependencies also increases. If the project is maintained by a company or a larger organization, it may have an advantage in terms of funding to pay people to maintain the project. Unfortunately, this is not always the case, and getting volunteers to communicate and update user needs can be challenging.

If a project has a good set of contributors and maintainers, it is crucial to cultivate their needs to ensure the project's health and foster a healthy community. However, if these challenges are not taken seriously, the project could lose trust or traction among maintainers, users, and supporters.

A lack of a healthy community could lead to other alignment problems.

If there is no agreement on the direction to move in, the project could stall and suffer from a lack of growth.

Creating a high-gravity healthy community requires a diverse set of individuals with different skill sets, knowledge, and ideas. It takes time, energy, and resources to build and maintain a healthy community. By dedicating these resources, you effectively contribute to creating a better internet for everyone.

Wrapping up with a High-Gravity Community:

In the open source world, building a high-gravity community is more critical than the project itself. Creating an inclusive and welcoming environment, prioritizing moderation, and providing user support are all key factors in cultivating a healthy community. By rewarding and supporting participants, and educating and encouraging others, we can create lasting connections and relationships that extend beyond the project's scope. Ultimately, the success of an open source project hinges on the strength and health of its community.

References:

The Orbit Model was created by Patrick Woods and Josh Dzielak of Orbit Labs. To learn more about the Orbit Model and Orbit Labs, be sure to check out the links below.

Orbit Labs: https://orbit.love
Orbit Model: https://orbit.love/model

Twitter: https://twitter.com/OrbitModel

As a software engineer, I've always been fascinated by the power of technology to bridge communication gaps and connect people from all over the world. When I heard about DevRel Uni, a 4-week certifying course that promised to teach the skills needed to excel in the Developer Relations (DevRel) field, I was intrigued.

I've always been drawn to roles that involve both technical and interpersonal skills, and DevRel seemed like the perfect fit. I wanted to learn how to effectively communicate complex technical information to different audiences, including developers, end customers, and non-technical stakeholders. I was also excited to learn how to generate never-ending content ideas and repurpose content to showcase products.

The course was designed to cover all the fundamental aspects of DevRel, and it did not disappoint. We learned about the different technologies and tools required for a successful career in DevRel, as well as the strategies to stay on top of the rapidly changing business landscape.

Video on DevRel Uni:

The Mentors

The stacked mentors alone were reason enough to take this course. Each week had one mentor focusing on specific topics within the DevRel role. Each of the mentors are certifiable GOATs in DevRel. I was actually surprised to see who the mentors were going to be in the very first cohort.

What Each Week Holds

Week 1: Understanding the DevRel Position | Content, Personal Branding, and Social Media

In the first week, participants learned about the DevRel position and what to expect while working as a DevRel directly from the creator of DevRel Uni, Bianca Buzea (Twitter: @buzea200). Bianca has years of experience working as a DevRel and has put together an amazing course with some of the most iconic DevRels in the industry.

Her experience as a DevRel really shined while she guided the 1st cohort through the program. 10/10 would take another course from her.

Nader Dabit (Twitter: @dabit3), one of the most iconic DevRels in the industry, taught the importance of content, personal branding, and social media. His entire philosophy on being a "Bridge Builder" and not a Gatekeeper was what really sold many on wanting to become a DevRel. Nader shared a poem called "The Bridge Builder" by Will Allen Dromgoole that serves as a reminder of what it means to be a DevRel advocate. I even printed the poem and hung it as a wall as to what I aspire to emulate as continue to pursue a career in DevRel.

Week 2: Documentation Strategy

Michiel Mulders (Twitter: @michiel_mulders), the Developer Advocate and Documentation Strategist at Hedera Hashgraph, provided a deep dive into the importance of documentation strategy. Everyone learned about the various tools available for documentation, best practices, and how to attract more builders using the documentation. He even shared some of his own strategies to create documentation that is both informative and attractive to developers.

Week 3: Strategies, KPIs, and Metrics

Vitto Rivabella (Twitter: @VittoStack), who I'm officially dubbing as "The Gary V of Web3," spoke about strategies, KPIs, and metrics. We learned about the importance of KPIs while being reminded to never dwell or operate solely on them. No wonder Vitto is so well known in the Web3 space. He could talk about anything and I'd feel energized afterward. I'm definitely keeping a close eye on his schedule to see if I can catch him speaking live.

Week 4: Event Strategies

The final week of the course ended with the one and only Steph Orpilla (Twitter: @Oceans404), a Developer Relations Engineer at Polygon. Steph spoke about event strategies such as meetups, hackathons, and conferences. Her unique approach to every event differently and giving herself unique goals to achieve at each event was very enlightening as to how we should approach live and online events.

The Course Work

The coursework revolved around a specific open-source project of each participant's choice, encouraging creativity and engagement with the wider tech community. Many students were even directly connected to the DevRel teams of the protocols they had chosen, leading to potential job placements within DevRel teams.

Overall Experience

For the 1st cohort of DevRel Uni, the experience was 10/10 stars. Participants quickly became connected with each other and still communicate actively despite the program being done. The knowledge gained in this course has transformed what many want to do with their tech careers. If you're looking for a position that truly feels right for you, DevRel might be it.

Want to Join the Next Cohort?

Signups for the 2nd Cohort of DevRel Uni were announced TODAY (March 14, 2023). Here is a link to SIGN UP NOW! Remember, spots for the 1st cohort filled up very quickly, so be sure to sign up quickly!

Artificial intelligence (AI) is transforming the way we interact with technology, and the possibilities are limitless. One of the most exciting developments in the field of AI is the creation of image generation models like DALL-E. DALL-E, developed by OpenAI, can generate images from textual prompts, creating images that have never existed before. In this blog, I will be discussing how I built a DALL-E image generator clone using React JS, ExpressJS, MongoDB, Cloudinary, and Node.js.

Note: I later plan on building in an option to use DALL-E or MidJourney as the AI model. When I do, I'll be sure to edit this blog with an update. (Mar 3rd, 2023)

Building the Frontend

Vite.js

To start, I built the frontend of the application using React JS. Instead of directly using "create-react-app," I decided to experiment with Vite.js as the developmental environment. Vite.js allowed me to set up a development environment for frameworks like React and Vue and even for Vanilla JavaScript apps with a dev server. Moreover, it allowed me to hot reload in just three commands. Vite supports Rollup.js internally for bundling, making it a powerful tool for building large-scale applications.

Tailwind.css

Once I set up Vite.js, I set up my CSS framework with Tailwind.css. Tailwind CSS is an open-source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it provides a set of utility classes that can be used to style any element. This makes it more flexible and customizable than other CSS frameworks.

After setting up my app and CSS framework, I built my src folder. This included three main folders: assets, components, and pages. The assets folder contains all of my image assets, the components folder contains all of my major page snippets (Image Cards, Image Generator's Form Field, and the loading features), and the pages folder contains my two main pages (Home.jsx and CreateImage.jsx).

Building the Backend

Once I had all of my UI built for my image generator, I started building into the backend (server folder). I set up my database using MongoDB, my image storage for my community page using Cloudinary, and then my OpenAI API.

MongoDB

Setting up MongoDB is a very easy and straightforward process. MongoDB is a NoSQL database, which means it stores data in a JSON-like format. It is scalable and flexible, making it an excellent choice for applications that require large amounts of data.

Cloudinary

Setting up Cloudinary was a bit more challenging. Cloudinary is a cloud-based image and video management solution that provides a range of features for managing, manipulating, and delivering images and videos. It took me some time to figure out how to set up the Cloudinary API and how to use it with my application. However, once I had it set up, it was a breeze to use.

OpenAI: The Most Painful Part

OpenAI has been the most challenging part of building this application. Despite being used by millions, OpenAI still has quite a few issues. It wasn't until I signed up for their API status notifications that I realized the API probably goes down almost every other day, if not daily. One of the first issues that didn't have an immediately obvious fix was when I started getting a "402: billing ha" error every time I tried to generate an image. It took me two days to realize that the $18 of free API calls you receive when creating your OpenAI account had expired.

Update Request?

I really wish there was something more obvious in your account to let you know that your trial balance was expired. To check if your balance is expired, you have to go into your account's billing to find it. If it is expired, just create a new account and set up an API Key with the new account.

Connecting the Frontend and Backend

Once I had completed building the frontend and backend separately, it was time to connect the two. This requires a bit of troubleshooting, but it is not too difficult if you know what you're doing.

First, I needed to install the axios package in my frontend to make HTTP requests to the backend. Axios is a promise-based HTTP client that makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations.

After installing Axios, I created a config file that contained the base URL of my backend server. This allowed me to make requests to my backend server from my frontend.

Next, I had to create the endpoints in my backend server that would handle the requests from the frontend. I created two endpoints: one to handle requests to generate an image and one to handle requests to save an image to the database.

The dalleRoutes.js handles image generation:

import express from 'express';
import * as dotenv from 'dotenv';
import { Configuration, OpenAIApi } from 'openai';

dotenv.config();

const router = express.Router();

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

router.route('/').get((req, res) => {
  res.status(200).json({ message: 'Hello from DALL-E!' });
});

router.route('/').post(async (req, res) => {
  try {
    const { prompt } = req.body;

    const aiResponse = await openai.createImage({
      prompt,
      n: 1,
      size: '1024x1024',
      response_format: 'b64_json',
    });

    const image = aiResponse.data.data[0].b64_json;
    res.status(200).json({ photo: image });
  } catch (error) {
    console.error(error);
    res
      .status(500)
      .send(error?.response.data.error.message || 'Something went wrong');
  }
});

export default router;

The postRoutes.js file handles storing the image to Cloudinary and posting them on the Community Page:

import express from 'express';
import * as dotenv from 'dotenv';
import { Configuration, OpenAIApi } from 'openai';

dotenv.config();

const router = express.Router();

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

router.route('/').get((req, res) => {
  res.status(200).json({ message: 'Hello from DALL-E!' });
});

router.route('/').post(async (req, res) => {
  try {
    const { prompt } = req.body;

    const aiResponse = await openai.createImage({
      prompt,
      n: 1,
      size: '1024x1024',
      response_format: 'b64_json',
    });

    const image = aiResponse.data.data[0].b64_json;
    res.status(200).json({ photo: image });
  } catch (error) {
    console.error(error);
    res
      .status(500)
      .send(error?.response.data.error.message || 'Something went wrong');
  }
});

export default router;

Testing APIs with Postman

Once I had created the endpoints, I tested them using Postman to make sure that they were working properly. Postman is a popular tool used for testing API endpoints.

With the endpoints working properly, it was time to integrate them into the frontend. I created a form in the frontend that would allow users to input the text prompt for the image they wanted to generate. When the form was submitted, the input was sent to the backend server using Axios.

When the backend server received the request, it used the OpenAI API to generate an image based on the user's input. The image was then saved to Cloudinary and the URL was returned to the frontend. The frontend then displayed the generated image to the user.

"Surprise Me"

I also built a "Surprise Me" feature, that allowed a user to click "surprise me" for a randomly generated prompt rather than creating their own prompt. This is a simple list of 50 prompt options that are selected using a Math.random() function.

import FileSaver from 'file-saver';

import { surpriseMePrompts } from '../constants';

export function getRandomPrompt(prompt) {
  const randomIndex = Math.floor(Math.random() * surpriseMePrompts.length);
  const randomPrompt = surpriseMePrompts[randomIndex];

  if (randomPrompt === prompt) return getRandomPrompt(prompt);

  return randomPrompt;
}

export async function downloadImage(_id, photo) {
  FileSaver.saveAs(photo, `download-${_id}.png`);
}

Conclusion

Building this DALL-E Image Generator Clone was a great learning experience. It allowed me to work with some of the most popular and cutting-edge technologies in web development and gave me a taste of what it's like to build an AI-powered app.

The potential for AI-powered apps and scalable SaaS companies is immense, and I look forward to seeing what innovative solutions developers will come up with in the years to come.

Building a portfolio website is an essential task for every developer, and it requires a combination of technical skills and creativity. As a software engineer, I wanted to build my own portfolio using basic HTML/CSS/JavaScript while also creating a visually appealing and user-friendly website that can be accessed from any device.

Image Storage Method

One of the unique features of my portfolio website is that all the images are actually stored on the Arweave blockchain. This means that the images are available to me forever, removing any concerns about how the files are stored and whether the links to the files are ever at risk of breaking. I used an app called Akord to provide a seamless user experience for storing and publishing files on Arweave's blockchain.

Graphics

Another important aspect of my portfolio website is the graphics. I created all the graphics myself using Adobe Photoshop and/or Adobe Illustrator. To make the logo spin, I used CSS Webkit Keyframes.

Spinning Logo CSS

.prt_logo_wrapper img {
  position: fixed;
  left: 50px;
  top: 50px;
  z-index: 2;
  -webkit-animation: rotate 2s linear infinite;
  -moz-animation: rotate 2s linear infinite;
  -o-animation: rotate 2s linear infinite;
  -ms-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotatey(360deg);
  }
}
@-moz-keyframes rotate {
  100% {
    -moz-transform: rotatey(360deg);
  }
}
@keyframes rotate {
  100% {
    transform: rotatey(360deg);
  }
}

The logo is just a PNG file that I created in illustrator, and the loader is a GIF file that I made with the logo using ezgif.com.

I also took the photos of myself using my professional camera (Sony A7RIII with a Sony 50mm 1.8f Prime Lens) and edited them in Photoshop, leveraging my 4 years of experience as a freelance photographer.

HTML Structure

I had to decide on the layout and structure of my website. I wanted a one-page website with different sections for my portfolio, about me, contact information, and my strengths. However, I also wanted to make it look like a multi-page website by using vertical and horizontal sliders to navigate between sections. Additionally, you'll notice that my website actually has no <header>. To make it slide smoothly from section to section, I decided to go without that and independently add the footer into each necessary section.

Main Wrapper

Once I had a clear vision for my website's layout, I started coding the HTML structure. I created a main wrapper that loads after the loader is complete, featuring a picture of me and the text "I'm Patrick Skinner." To add a fun touch, I included an image of my daughter photo-bombing me during my headshot session, hidden within the text.

Home Page Div

<div class="prt_home_wrapper">
            <div class="prt_logo_wrapper">
                <a><img src="images/header/logo.png" alt="Logo" id="prt_close_tab"></a>
            </div>
            <div class="prt_menu_wrapper">
                <a href="#about" class="prt_top">about</a>
                <a href="#contact" class="prt_right">contact</a>
                <a href="#services" class="prt_bottom">strength</a>
                <a href="#portfolio" class="prt_left">portfolio</a>
            </div>
            <div class="container">
                <div class="row">
                    <div
                        class="col-xl-6 offset-xl-6 col-lg-6 offset-lg-6 col-md-5 offset-md-5 col-sm-10 offset-sm-2 col-xs-12 offset-xs-0">
                        <h1>I`m Patrick Skinner</h1>
                    </div>
                </div>
            </div>
        </div>

Supporting CSS

.prt_menu_wrapper a.prt_top {
  top: 45px;
  left: 0px;
  right: 0px;
  width: 100px;
}
.prt_menu_wrapper a.prt_bottom {
  bottom: 45px;
  left: 0px;
  right: 0px;
  width: 150px;
}
.prt_menu_wrapper a.prt_left {
  top: 50%;
  left: -15px;
  transform: rotateZ(-90deg);
  margin-top: -15px;
}
.prt_menu_wrapper a.prt_right {
  top: 50%;
  right: 0px;
  transform: rotateZ(90deg);
  margin-top: -15px;
}

About Wrapper

Next, I moved on to the "about" section, which I kept simple and straightforward. I wanted to highlight my educational background and work experience, and I incorporated some mouseover functions to add some interactivity.

Portfolio Wrapper

The portfolio section was a bit more challenging, as I wanted to showcase my recent projects while keeping the UX simple and intuitive. I decided to feature my AI-powered web apps and my blog, and I used HTML/CSS to create image overlays that provide a brief description of each project when hovered over.

Strength Wrapper

For the "strengths" section, I wanted to create an eye-catching animation to showcase my skills. I used an appear() function within the custom.js file to create the animation, and I included images formatted in illustrator and hosted on the Arweave blockchain.

Contact Wrapper

Finally, I added a contact section and used a Javascript function from EmailJS to handle my incoming contact requests.

//Within the <head> of index.html

<script type="text/javascript">
   (function(){
      emailjs.init("<EmailJS Account Public Key>");
   })();
</script>
<script src="index.js"></script>

//Contact Form

<div class="prt_contact_info"><div class="col-12">
    <form>
        <h1>CONTACT ME:</h1>
        <p>For hiring or other inquires, fill out the form below.</p>
        <br>
        <input type="text" id="name" placeholder="Your Name" required>
        <input type="email" id="email" placeholder="Your Email" required>
        <textarea id="message" placeholder="Your Message" rows="4" required></textarea>
        <button type="button" class="prt_btn submitForm" form-type="contact" onclick="sendMail(); reset(); return false">Send</button>
    </form>
</div>

//Within index.js showing the contact form handling function

function sendMail() {
  var params = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    message: document.getElementById("message").value,
  };
  const serviceID = "<EmailJS Account Public ID>";
  const templateID = "<EmailJS Template Public ID>";

  emailjs
    .send(serviceID, templateID, params)
    .then((res) => {
      document.getElementById("name").value = "";
      document.getElementById("email").value = "";
      document.getElementById("message").value = "";
      console.log(res);
      alert("Message sent successfully!");
    })
    .catch((err) => console.log(err));
}

Note: This form is a very simple and straightforward approach, so I plan on adding to my portfolio a custom Typeform clone. So, stay tuned.

Closing Comments

Overall, building my portfolio website was a fun experience that allowed me to showcase my technical and creative skills. Being able to add the Easter Egg image of my daughter photo-bombing my photoshoot while still maintaining a very professional feel to the website allows me to display my ability to maintain a highly professional approach to my work while still allowing my creativity and personality to flow naturally within my work. Let me know what you thought about this website and if you have any questions about its build.

Like thousands of others, I recently jumped into building with OpenAI's API. It's amazing what AI can do, right? After building a few AI tools for myself and others, I decided to start Aurelius AI with my friend Patrick Burt. Aurelius AI is a service-based company that builds custom AI tools for small to medium-sized businesses.

Now, to the fun part.

Building Aurelius AI's Website with AI

When building the website, I wanted to do so using AI alone. It was a bit of a wild idea, but I'm the kind of person who likes to push boundaries. So, I used a combination of ChatGPT and GitHub CoPilot. Let me tell you, these tools are very powerful, but I definitely couldn't have done it without a really strong understanding of React JS, HTML5, CSS3, and prompt engineering.

Now, don't get me wrong, using AI for website development was a mixed experience. There were areas where it was super helpful, but it wasn't a complete solution. I had to manually input content for some sections of the website since the AI couldn't generate the desired output. And, while GitHub CoPilot was able to generate code for some of the more tedious tasks, I had to tweak it a lot to get it to work properly.

But, hey, using AI was still super cool! One area where it was particularly useful was in the creation of our logo. I designed it myself, but I used Playground AI for inspiration. Playground AI is a tool that lets you experiment with AI-generated artwork. I used it to create a poly-style Marcus Aurelius bust that I later turned into a 3D model that does mouse-tracking. It was a fun project that really showcased the creative potential of AI.

Now, prompt engineering on Playground AI was easier said than done. I think I'll be spending some time watching videos on how to properly use Playground AI. Comparatively, I'd like to try to use MidJourney AI to see if I prefer using that over Playground AI. I do have to say, the UI for Playground is extremely friendly and will probably garner more users over time.

Overall, using OpenAI's API to build our website was definitely a challenge, but it was also a really cool learning experience. AI has tremendous potential to transform businesses, and companies like Aurelius AI are at the forefront of this transformation. And, who knows, maybe you'll be inspired to try using AI in your next project too!

If you're interested in seeing the GitHub Repository for this website, feel free to check it out here: https://github.com/PSkinnerTech/project_aurelius-site

The website hasn't been deployed to its own domain just yet, but feel free to check it out here at this Netlify link: https://transcendent-babka-b2a340.netlify.app/