In 2026, remote work is no longer tied to a single city or office. Professionals are building careers while moving between countries, time zones, and temporary workspaces.

But behind the freedom of working from anywhere is a hidden reality that many people do not talk about enough. Successful digital nomads depend heavily on systems and infrastructure. Without the right tools, even simple tasks become difficult.

Video calls fail, files get lost, payments become delayed, and productivity disappears quickly. The modern digital nomad needs tools that create stability while constantly moving.

Here are seven essential tools digital nomads rely on in 2026.

• Cloud Workspaces for Organized Remote Work

• Financial Platforms for International Payments

• International Services for Reliable Connectivity

• Password Managers for Security

• VPN Services for Privacy and Safe Browsing

• Communication Platforms for Distributed Teams

• AI Productivity Tools for Faster Workflows

• Digital Nomadism Is Becoming More Infrastructure-Driven

Cloud Workspaces for Organized Remote Work

The first thing every digital nomad needs is a reliable cloud workspace. Working remotely across multiple countries becomes chaotic very quickly without centralized systems for files, notes, tasks, and communication.

Laptops can fail, bags can get lost, and internet connections can become unstable. Storing everything locally creates unnecessary risk.

This is why most remote workers now rely on platforms like Google Workspace, Notion, Microsoft 365, and Dropbox.

Google Workspace remains one of the most widely used productivity ecosystems because it combines email, documents, spreadsheets, cloud storage, and calendar management into a single platform. For distributed teams, the ability to collaborate in real time is extremely valuable.

Notion has also become popular among digital nomads because it combines note-taking, project management, documentation, and knowledge management into one flexible workspace.

These tools create consistency. Whether someone is working from a co-working space in Bali, a cafe in Lisbon, or an apartment in Bangkok, their work environment stays largely the same.

Cloud workspaces also reduce dependency on hardware. If a laptop breaks during travel, work can continue from another device with minimal disruption.

For long-term remote work, that reliability matters more than most people expect.

Financial Platforms for International Payments

Managing money internationally used to be one of the biggest challenges for remote workers.

Traditional banks were not designed for people moving constantly between countries. Currency conversion fees, transfer delays, and international payment restrictions created major friction for freelancers and remote employees.

In 2026, digital nomads increasingly depend on financial platforms built specifically for global work.

Wise has become one of the most trusted solutions for international transfers because it offers transparent exchange rates and lower conversion fees compared to many banks.

Revolut is also widely used because it combines multi-currency accounts, virtual cards, travel spending controls, and mobile banking features into one platform.

Payoneer remains popular among freelancers working with international clients and marketplaces.

These tools help digital nomads receive payments faster, manage multiple currencies, and reduce losses from exchange rates.

Expense tracking is equally important. Constant travel can create uncontrolled spending very quickly. Flights, accommodations, co-working memberships, transport, and insurance costs add up fast.

The most successful digital nomads usually approach finances with discipline. Sustainable remote work depends heavily on maintaining predictable cash flow and financial visibility.

Global mobility becomes much easier when financial infrastructure works smoothly.

International Services for Reliable Connectivity

Internet access is the foundation of digital nomadism. Without reliable connectivity, remote work becomes impossible. Meetings disconnect, cloud applications fail, uploads stop midway, and communication slows down immediately.

For years, travelers depended on local SIM cards in every country they visited. That process was frustrating and inefficient. Finding telecom stores after landing, dealing with language barriers, and switching physical SIM cards repeatedly created unnecessary stress.

In 2026, most experienced digital nomads prefer using an international eSIM instead.

An International eSIM makes cross-border travel much smoother. Remote workers can often activate connectivity before even landing in a new country.

This creates a major advantage during travel days. Internet access works immediately for maps, messaging, ride-sharing apps, banking verification, and work communication.

Consistency is another important benefit. Many remote workers now depend on International eSIM services because they reduce downtime between locations.

This matters professionally. Missing meetings or becoming unreachable during client communication can damage credibility quickly.

For digital nomads moving regularly between countries, connectivity is no longer just a convenience. It is operational infrastructure.

Password Managers for Security

Cybersecurity risks increase significantly when working remotely.

Digital nomads regularly connect to airport Wi-Fi, hotel networks, cafes, co-working spaces, and temporary apartment internet connections. Many of these networks are not secure.

Using weak passwords or storing credentials carelessly creates major risks for both personal and professional systems.

This is why password managers have become essential tools for remote workers.

Platforms like 1Password, Bitwarden, and LastPass help users generate strong passwords, store credentials securely, and synchronize login access across devices.

Instead of remembering dozens of passwords manually, users can protect accounts through encrypted password vaults and multi-factor authentication.

For remote professionals handling company systems, client dashboards, or financial accounts, this layer of security is extremely important.

Password managers also reduce the risk of phishing attacks and credential reuse, which remain some of the most common cybersecurity problems globally.

In distributed work environments, operational security is becoming part of everyday professional responsibility.

VPN Services for Privacy and Safe Browsing

VPN services have become standard tools for remote professionals. A VPN, or virtual private network, encrypts internet traffic and helps protect users when accessing the internet through public or untrusted networks.

Services like NordVPN, ExpressVPN, and Proton VPN are commonly used by digital nomads because they improve both privacy and security.

Many remote workers access internal company systems, financial platforms, or customer information while traveling. Doing this over public internet connections without protection introduces significant risk.

VPNs also help maintain more stable access to online services across different regions.

Some platforms and websites behave differently depending on the country someone is connecting from. VPNs help reduce these inconsistencies and improve accessibility while traveling.

For freelancers and consultants, using a VPN also demonstrates professionalism and awareness of cybersecurity best practices.

As remote work becomes more global, companies are increasingly expecting workers to follow stronger operational security standards.

Communication Platforms for Distributed Teams

Communication quality often determines whether remote work succeeds or fails.

Digital nomads work across countries and time zones, which means communication systems need to be reliable, flexible, and easy to access from anywhere.

Platforms like Slack, Zoom, Google Meet, and Microsoft Teams have become core parts of modern distributed work.

Slack is widely used for team collaboration because it allows fast communication without relying entirely on email. Zoom and Google Meet remain essential for client calls, interviews, workshops, and team meetings.

But modern remote work is becoming increasingly asynchronous.

Many experienced digital nomads now avoid unnecessary meetings and instead rely more on shared documentation, recorded updates, and organized messaging systems.

This helps reduce burnout and creates more flexibility around travel schedules and time zones.

Strong communication infrastructure also creates professional consistency. Clients and employers care less about where someone works from and more about responsiveness, reliability, and clarity.

The right communication tools help maintain that trust.

AI Productivity Tools for Faster Workflows

Artificial intelligence has become deeply integrated into remote work in 2026. AI tools are now helping digital nomads automate repetitive work, summarize information, organize tasks, generate drafts, and accelerate research.

Platforms like ChatGPT, Claude, Grammarly, and Perplexity are increasingly part of everyday workflows for remote professionals.

Writers use AI for outlining and editing. Developers use it for debugging and documentation. Marketers use it for content strategy and analysis. Startup founders use it for operational planning and research.

For digital nomads, AI tools are especially valuable because they reduce mental overload.

Travel itself requires constant decision-making. Flights, accommodations, schedules, visas, transportation, and timezone changes all consume attention and energy. AI tools help reduce the amount of manual work needed during busy travel periods.

The professionals gaining the most value from AI are usually those who already understand their field well.

AI works best as an accelerator for skilled workers rather than a replacement for expertise.

As remote work continues evolving, AI literacy is becoming an increasingly important professional advantage.

Digital Nomadism Is Becoming More Infrastructure-Driven

The image of digital nomadism has changed significantly. In the past, the lifestyle was often presented as spontaneous and carefree. In reality, sustainable remote work depends heavily on systems, preparation, and operational reliability.

The most successful digital nomads are usually the people who build strong infrastructure around their work.

Cloud workspaces keep projects organized. Financial platforms simplify international payments. International eSIM services maintain reliable connectivity across borders. VPNs and password managers improve security. Communication systems support distributed collaboration. AI tools reduce workload and improve efficiency.

Together, these tools create stability in an otherwise highly mobile lifestyle.

As companies continue embracing remote and distributed work models, digital nomadism will likely become even more mainstream over the next decade.

The professionals who succeed long term will not necessarily be the ones traveling the most.

They will be the ones who know how to build systems that allow them to work consistently from anywhere in the world.

Personalization is one of the most requested features in AI-powered applications. Users expect an agent to remember their preferences, adapt to their style, and improve over time.

In practice, personalization is unfortunately also one of the fastest ways to break an otherwise working AI agent.

Many agents start with a simple idea: keep adding more conversation history to the prompt. This approach works for demos, but it quickly fails in real applications. Context windows grow too large. Irrelevant information leaks into decisions. Costs increase. Debugging becomes nearly impossible.

If you want a personalized agent that survives production, you need more than a large language model. You need a way to connect the agent to tools, manage multi-step workflows, and store user preferences safely over time – without turning your system into a tangled mess of prompts and callbacks.

In this tutorial, you’ll learn how to design a personalized AI agent using three core building blocks:

• Agent Development Kit (ADK) to orchestrate agent reasoning and execution

• Model Context Protocol (MCP) to connect tools with clear boundaries

• Long-term memory to store preferences without polluting context

Rather than focusing on setup commands or vendor-specific walkthroughs, we'll focus on the architectural patterns that make personalized agents reliable, debuggable, and maintainable.

Figure 1 — Personalization influences agent responses

Table of Contents

• Prerequisites

• What “Personalized” Means in a Real AI Agent

• How the Agent Architecture Fits Together

• How to Design the Agent Core with ADK

• How to Connect Tools Safely with MCP

• How to Add Long-Term Memory Without Polluting Context

  • Privacy, Consent, and Lifecycle Controls (Production Checklist)

• How the End-to-End Agent Flow Works

• Common Pitfalls You’ll Hit (and How to Avoid Them)

• What You Learned and Where to Go Next

Prerequisites

To follow along with this tutorial, you should have:

• Basic familiarity with Python

• A general understanding of how large language models work

• Optional: a Google Cloud account if you want to run an end-to-end demo. Otherwise, you can follow the architecture and code patterns locally with stubs. We’ll avoid deep infrastructure setup and focus on design patterns rather than deployment mechanics.

You don’t need prior experience with ADK or MCP. I’ll introduce each concept as it appears.

What “Personalized” Means in a Real AI Agent

Figure 2 — Keep preferences out of the prompt: agent ↔ tools across a protocol boundary

Before writing any code, it’s important to define what personalization means in an AI agent.

Personalization is not the same as “remembering everything.” In practice, agent state usually falls into three categories:

1. Short-term context: Information needed to complete the current task. This belongs in the prompt.

2. Session state: Temporary decisions or selections made during a workflow. This should be structured and scoped to a session.

3. Long-term memory: Durable user preferences or facts that should persist across sessions.

Figure 3 — Three kinds of agent state: context (now), session (today), memory (always)

Most problems happen when these categories are mixed together.

If you store long-term preferences directly in the prompt, the agent’s behavior becomes unpredictable. If you store everything permanently, memory grows without bounds. If you don’t scope memory at all, unrelated sessions start influencing each other.

A well-designed, personalized agent treats memory as a first-class system component, not as extra text added to a prompt.

In the next section, we'll look at how to structure the agent so these concerns stay separated.

By the end of this tutorial, you’ll understand how to design a personalized AI agent that uses long-term memory safely, connects to tools through clear boundaries, and remains debuggable as it grows.

How the Agent Architecture Fits Together

Figure 4 — Reference architecture: agent core + tools + memory service + orchestration runtime

The above diagram shows a high-level, personalized AI agent architecture. In it, an agent core handles reasoning and planning while interacting with a tool interface layer, a long-term memory service, and an orchestration runtime.

Let’s now understand the moving parts of a personalized agent and how they interact.

At a high level, the system has four responsibilities:

1. Reasoning – deciding what to do next

2. Execution – calling tools and services

3. Memory – storing and retrieving long-term preferences

4. Boundaries – controlling what the agent is allowed to do

A common mistake you’ll see is to blur these responsibilities together. For example, letting the model decide when to write memory, or allowing tools to execute actions without clear constraints.

Instead, you'll design the system so each responsibility has a clear owner. The core components look like this:

• Agent core: Handles reasoning and planning

• Tools: Perform external actions (read or write)

• MCP layer: Defines how tools are exposed and invoked

• Memory services: Store long-term user data safely

ADK sits at the center, orchestrating how requests flow between these components. The model never directly talks to databases or services. It reasons about actions, and ADK coordinates execution.

This separation makes the system easier to reason about, debug, and extend.

How to Design the Agent Core with ADK

Before we dive in, a quick note on what ADK is.

Agent Development Kit (ADK) is an agent orchestration framework – the glue code between a large language model and your application. Instead of treating the model as a black box that directly “does things”, ADK helps you structure the agent as a system:

• The model focuses on reasoning (turning user intent, context, and memory into a structured plan)

• Your runtime stays in control of execution (deciding which tools can run, how they run, and what gets logged or persisted)

In other words, ADK is what lets you take tool calling and multi-step workflows out of a giant prompt and turn them into a maintainable and testable architecture. In this tutorial, we’ll use ADK to refer to that orchestration layer. The same patterns apply if you use a different agent framework.

Note: The following code snippets are simplified reference examples intended to illustrate architectural patterns. They’re not production-ready drop-ins.

Once you understand the architecture, you can start designing the agent core. The agent core is responsible for reasoning, not execution.

A helpful mental model is to think of the agent as a planner, not a doer. Its role is to interpret the user’s goal, consider available context and memory, and produce a structured plan that can later be executed in a controlled way.

To make this concrete, the following example shows how an agent can translate user input and memory into an explicit plan. In practice, ADK orchestrates this using a large language model, but the important idea is that the output is structured intent, not side effects.

# Reference example for illustration.

from dataclasses import dataclass
from typing import List, Dict, Any

@dataclass
class Step:
    tool: str
    args: Dict[str, Any]

@dataclass
class Plan:
    goal: str
    steps: List[Step]

def build_plan(user_text: str, memory: Dict[str, Any]) -> Plan:
    # In practice, the LLM produces this structure via ADK orchestration.
    goal = f"Help user: {user_text}"
    steps = []
    if memory.get("prefers_short_answers"):
        steps.append(Step(tool="set_style", args={"verbosity": "low"}))
    steps.append(Step(tool="search_docs", args={"query": user_text}))
    steps.append(Step(tool="summarize", args={"max_bullets": 5}))
    return Plan(goal=goal, steps=steps)

This example illustrates an important constraint: the agent produces a plan, but it doesn’t execute anything directly.

The agent decides what should happen and in what order, while ADK controls when and how each step runs. This separation lets you inspect, test, and reason about decisions before they result in real-world actions.

When personalization is involved, this distinction becomes critical. Preferences may influence planning, but execution should remain tightly controlled by the runtime.

Again, we can consider the agent to be a planner, not a doer.

It should not:

• Perform side effects directly

• Write to databases

• Call external APIs without supervision

In ADK, this separation is natural. The agent produces intents and tool calls, while the runtime controls how and when those calls are executed.

This design has two major benefits:

1. Safety – you can restrict which tools the agent can access

2. Debuggability – you can inspect decisions before execution

When personalization is involved, this becomes even more important. Preferences influence reasoning, but execution should remain tightly controlled.

How to Connect Tools Safely with MCP

Figure 5 — Tool calls with guardrails: request → validate → execute → respond

Tools are how agents interact with the real world. They fetch data, generate artifacts, and sometimes perform actions with side effects.

Without clear boundaries, tool usage quickly becomes a source of fragility. Hardcoded API calls leak into prompts, tools evolve independently, and agents gain more authority than intended.

To avoid these problems, tools should be explicitly registered and invoked through a narrow interface. The following example shows a simple tool registry pattern that mirrors how MCP exposes tools to an agent without tightly coupling it to implementations.

# Reference example (pseudocode for illustration)

from typing import Callable, Dict, Any

ToolFn = Callable[[Dict[str, Any]], Dict[str, Any]]

TOOLS: Dict[str, ToolFn] = {}

def register_tool(name: str):
    def decorator(fn: ToolFn):
        TOOLS[name] = fn
        return fn
    return decorator

@register_tool("search_docs")
def search_docs(args: Dict[str, Any]) -> Dict[str, Any]:
    query = args["query"]
    # Replace with your MCP client call (or local tool implementation).
    return {"results": [f"doc://example?q={query}"]}

def invoke_tool(name: str, args: Dict[str, Any]) -> Dict[str, Any]:
    if name not in TOOLS:
        raise ValueError(f"Tool not allowed: {name}")
    return TOOLS[name](args)

The Model Context Protocol (MCP) provides a clean way to formalize this pattern. You can think of MCP the same way operating systems treat system calls.

An application does not directly manipulate hardware. Instead, it requests operations through well-defined system calls. The kernel decides whether the operation is allowed and how it executes.

In the same way, the agent knows what capabilities exist, MCP defines how those capabilities are invoked, and the runtime controls when and whether they execute.

This separation prevents several common problems, including hardcoded API details in prompts, unexpected breakage when tools change, and agents performing unrestricted side effects.

When designing tools, it helps to classify them by risk: read tools for safe queries, generate tools for planning or synthesis, and commit tools for irreversible actions. In a personalized agent, commit tools should be rare and tightly guarded.

Figure 6 — Observability around tool calls: logs, traces, timing, decision points

How to Add Long-Term Memory Without Polluting Context

Figure 7 — Memory admission pipeline: extract → filter/validate → persist asynchronously

Memory is where personalization either succeeds or fails.

You can start by storing everything the user says and feed it back into the prompt. This works briefly, then collapses under its own weight as context grows, costs rise, and behavior becomes unpredictable.

A better approach is to treat memory as structured, curated data so you can control what the agent remembers and why with clear admission rules. Before persisting anything, the system should explicitly decide whether the information is worth remembering. The following function demonstrates a simple memory admission policy.

# Simplified Reference Only
from typing import Optional, Dict, Any

def memory_candidate(user_text: str) -> Optional[Dict[str, Any]]:
    text = user_text.lower()

    # Durable
    if "for this session" in text or "ignore after" in text:
        return None

    # Reusable
    if "my preferred language is" in text:
        return {"type": "preference", "key": "language", "value": user_text.split()[-1]}

    # Safe (basic example; add PII checks for your use case)
    if "password" in text or "ssn" in text:
        return None

    return None  # default: don’t store

This policy encodes three questions every memory candidate must answer:

• Is it durable? Will it still matter in the future?

• Is it reusable? Will it influence future decisions meaningfully?

• Is it safe to persist? Does it avoid sensitive or session-specific data?

Only information that passes all three checks should become long-term memory. In practice, this usually includes stable preferences and long-lived constraints, not temporary instructions or intermediate reasoning.

Privacy, Consent, and Lifecycle Controls (Production Checklist)

Even if your admission rules are solid, long-term memory introduces governance requirements:

• User control: allow users to view, export, and delete stored preferences at any time.

• Sensitive data handling: never store secrets/PII. Run PII detection on every memory candidate (and consider redaction).

• Retention + consent: use explicit consent for persistent memory and apply retention windows (TTL) so memory expires unless it’s still useful.

• Security + auditability: encrypt at rest, restrict access by service identity, and keep an audit log of memory writes/updates.

Memory writes should also be asynchronous. The agent should never block while persisting memory, which keeps interactions responsive and avoids coupling reasoning to storage latency.

How the End-to-End Agent Flow Works

Figure 8 — End-to-end request lifecycle: user input → plan → tools → memory updates

At this point, you can trace exactly how memory and tools interact during a single request. With the individual components in place, it’s helpful to see how they work together during a single request. The following example walks through the full lifecycle of a personalized interaction, from user input to response.

# Reference example (pseudocode for illustration)

def handle_request(user_id: str, user_text: str) -> str:
    memory = memory_store.get(user_id)  # e.g., {"prefers_short_answers": True}
    plan = build_plan(user_text, memory)

    tool_outputs = []
    for step in plan.steps:
        out = invoke_tool(step.tool, step.args)
        tool_outputs.append({step.tool: out})

    response = render_response(goal=plan.goal, tool_outputs=tool_outputs, memory=memory)

    cand = memory_candidate(user_text)
    if cand:
        # Never block the user on storage.
        memory_store.write_async(user_id, cand)
    return response

At a high level, the flow looks like this:

1. The user sends a message.

2. Relevant long-term memory is retrieved.

3. The agent reasons about the request and produces a plan.

4. ADK invokes tools through MCP as needed.

5. Results flow back to the agent.

6. The agent decides whether new information should be persisted.

7. Memory is written asynchronously.

8. The final response is returned to the user.

Notice what does not happen: the model does not directly write memory, tools do not execute without coordination, and context does not grow without bounds. This structure keeps personalization controlled and predictable.

Common Pitfalls You’ll Hit (and How to Avoid Them)

Even with a solid architecture, there are a few failure modes that show up repeatedly in real systems. Many of them stem from allowing agents to perform irreversible actions without explicit checks.

The following example shows a simple guardrail for commit-style tools that require approval before execution.

# Reference example (pseudocode for illustration)

def invoke_commit_tool(name: str, args: Dict[str, Any], approved: bool) -> Dict[str, Any]:
    if not approved:
        # Require explicit confirmation or policy approval before side effects.
        return {"status": "blocked", "reason": "commit tools require approval"}

    # For example: create_ticket, send_email, submit_order, update_record
    return invoke_tool(name, args)

This pattern forces a clear decision point before side effects occur. It also creates an audit trail that explains why an action was allowed or blocked.

Other common pitfalls include over-personalization, leaky memory that persists session-specific data, uncontrolled tool growth, and debugging blind spots caused by unclear boundaries. If you see these symptoms, it usually means responsibilities are not clearly separated.

What You Learned and Where to Go Next

Personalized AI agents are powerful, but they require discipline. The key insight is that personalization is a systems problem, not a prompt problem.

By separating reasoning from execution, structuring memory carefully, and using protocols like MCP to enforce boundaries, you can build agents that scale beyond demos and remain maintainable in production.

As you extend this system, resist the urge to add “just one more prompt tweak.” Instead, ask whether the change belongs in memory, tools, or orchestration.

That mindset will save you time as your agent grows in complexity.

If you’d like to continue the conversation, you can find me on LinkedIn.

*All diagrams in this article were created by the author for educational purposes.

You want tools that work, tools that feel intuitive, and tools that help you move quickly from idea to launch.

This article walks you through a tool stack that’s become popular with indie hackers. Whether you’re building a simple app, launching a SaaS, or testing a digital product, this stack will carry you from your first survey to your first sale.

Table of Contents

• How to Validate Your Idea Before You Build

• Tech Stack for Indie Hackers

• Hosting for Indie Hackers

• Payment Solutions for Indie Hackers

• Analytics for Indie Hackers

• Launch Where Your People Are

• How It All Comes Together

• Conclusion

How to Validate Your Idea Before You Build

Before writing any code, you have to make sure people actually want what you’re about to build. This step is often skipped, but it’s where successful products are born.

You don’t need anything fancy here. Google Forms is a perfect starting point. It’s free, fast, and easy to share.

You can ask simple questions like what tools people are currently using, what frustrates them, or whether they’d pay for a better solution. Keep your form short and clear, and send it out to communities like Indie Hackers, Reddit, or even your own network.

If you’re looking for something more polished, YouForm is a great upgrade. It lets you create better-looking forms with more control over the design and branding.

Youform also gives you insights like where people drop off or how long they spend answering. That feedback can help you refine both your product and your message.

Whether you use Google Forms or YouForm, the goal is the same: find out if your idea has legs before you build anything.

Tech Stack for Indie Hackers

Once you’ve validated the idea and know there’s interest, it’s time to build.

This is where many indie hackers hit a wall. The tech stack can make or break your momentum. You want something modern, fast, and flexible, without needing to stitch together a dozen services.

Next.js is one of the best choices for building apps and websites. It’s built on React, which means you can reuse components and move quickly.

But unlike plain React, Next.js also gives you routing, server-side rendering, and static generation, all out of the box. That means you can use it for your landing page, dashboard, a blog, or your full app.

Now, you’ll need a backend. That’s where Supabase comes in.

Supabase gives you a fully managed PostgreSQL database, user authentication, file storage, and even real-time updates. It’s open source and developer-friendly.

You can sign up and have a working backend in minutes, without writing server code or managing infrastructure. It plays beautifully with Next.js, and for many projects, it gives you everything you need without ever spinning up your own server.

Hosting for Indie Hackers

Once you’ve built your app, you need to get it online. Hosting used to be one of the most painful parts of building solo, but these days, many platforms make it feel easy and remove the need for a dedicated DevOps.

Tools like Vercel, Railway, and Sevalla let you connect your GitHub repo and deploy your app with a few clicks. They handle your databases, environment variables, deployments, and logs in a single dashboard. It’s a perfect fit for full-stack apps using Next.js and Supabase.

Payment Solutions for Indie Hackers

Once you’re ready to charge for your product, you need a payment provider you can trust.

Stripe is the industry standard. It supports one-time payments, subscriptions, and even complex pricing logic. It’s incredibly powerful – but it also has a bit of a learning curve. The setup process can feel like overkill if you’re just trying to see if someone will pay $5 for your tool.

That’s why many indie hackers start with LemonSqueezy. It’s a checkout-first platform that handles VAT, tax compliance, licensing, and payments all in one.

You can set up a product, embed a buy button or link, and start collecting payments within a day. It’s built with creators in mind, which means fewer steps and more features tailored to solo projects.

If Stripe is the enterprise-grade option, LemonSqueezy is your lightweight indie companion.

Analytics for Indie Hackers

Once you have traffic, users, and sales, it’s time to learn from them. This is where analytics come in.

Google Analytics is the traditional choice. It’s free and feature-rich. You can track where people come from, what pages they visit, how long they stay, and more. But it’s also complex and a bit heavy, especially for smaller apps. If you just want quick insights, it can feel overwhelming.

That’s why tools like Fathom Analytics are gaining popularity. Fathom gives you a clean, privacy-friendly dashboard with just the metrics that matter: page views, unique visits, and bounce rate. It’s GDPR-compliant and super easy to add to your site. You won’t get lost in charts or filters. You’ll exactly know what’s going on.

If you want to go even deeper, especially inside your product, PostHog is worth a look. It offers product analytics like event tracking, funnels, and even session recordings.

Want to know which button users click most? Or where do they drop off in your signup flow? PostHog can show you. It does take more setup, and you may want to self-host it, but for serious insights into user behaviour, it’s hard to beat.

Launch Where Your People Are

You’ve built it, hosted it, and maybe even started making money. Now you need to tell people about it. A strong launch can make all the difference.

Product Hunt is a great platform for tech-focused launches. If your product solves a real problem and looks good, it’s a great way to get attention.

Create a clean page with a short tagline, a few screenshots, and maybe a quick demo video. When you launch, stick around and reply to comments. Your first customers might come from there.

Indie Hackers is more about the long game. It’s a community of makers sharing their journeys. You can post updates, ask questions, and get feedback throughout the building process. When you do launch, you’re launching to people who already know what you’ve been working on. That trust makes a big difference.

Reddit can work too, but it’s tricky. Each subreddit has its own rules, and users hate spam. The key is to be helpful. Don’t just drop a link, share what you learned, show what you built, and ask for feedback. If it feels like a conversation, not a pitch, people will respond.

How It All Comes Together

Let’s say you’re building a lightweight team dashboard called ManageBuddy.

You start by posting a quick survey with Google Forms to r/SideProject and Indie Hackers. Fifty people respond, and many say they’d pay for a tool like this.

You build your app using Next.js and Supabase. Supabase handles your database and authentication. You deploy to Railway, link up your GitHub repo, and go live. For payments, you pick LemonSqueezy since it’s quick and simple. You embed the checkout page into your app and start charging $10/month.

You add Fathom to your site to see how people are finding it. Later, you install PostHog to see which features they use most. When you’re ready to go big, you launch on Product Hunt. The next day, you share your story on Indie Hackers and Reddit. Feedback starts rolling in. People sign up. Some even pay.

In a few weeks, you’ve gone from idea to product, with users, sales, and feedback guiding your next steps.

Conclusion

The best thing about this stack is that it doesn’t demand perfection. You don’t need to be an expert in every tool. Start small, validate your idea, and build something useful.

These tools – Google Forms, Next.js, Supabase, Railway, Stripe, Fathom, and so on – are here to help you get to your first version quickly.

Don’t get stuck trying to pick the “perfect” stack. What matters is progress. These tools lower the barrier so you can focus on solving a real problem and connecting with real users. Build something simple, launch it, and improve from there.

You don’t need a big team. You just need the right tools and the will to keep going. Happy hacking!

Hope you enjoyed this article. Connect with me on LinkedIn or visit my website.

As you can imagine, there are many different storage options.

In this article, we’ll briefly discuss two of the most used cloud solutions: block storage (also known as SAN or storage area network) and object storage. After this, we will go through my top 5 suggested object storage solutions.

There is a third type of storage that’s commonly used: file system storage. However, this mechanism can also concur with SANs and object storage, so we won't go too deep into it.

What is Block Storage?

Block storage is a network of hard drives connected via fiber-optic network. This gives it an edge over copper cables due to the increased speed.

The reason it's called block storage is that each file in this system is divided into “blocks” of data stored in a disk. Sectors in the disk hold onto individual blocks of data, and these blocks, when combined, form the whole file.

So while there are advantages of using SAN, like high scalability, it is costly and can get incredibly complex as the network grows.

What is Object Storage?

The defining feature of object storage is that, instead of storing files as blocks, data is stored as objects.

Typically these objects will have more data attached to them than the blocks used for block storage. The objects often include:

• A blob which contains all the payload (i.e., image, video, text content)
• Metadata, which tells us more about the file (timestamps, permissions, author, revision, and so on)
• A universally unique ID (UUID)

One major advantage of this type of storage is that objects are easily obtained and found because of their UUID. With block storage, there’s a specific hierarchy of files that a user goes through before getting the data they need, which can considerably slow down data retrieval.

Now that we have that out of the way, here’s a list of my top 5 object storage tools for developers:

Amazon AWS S3

S3 is one of the pioneers of object storage. It manages gigantic loads of data from all over the world across hundreds of industries.

Features:

• High reliability and durability as it stores S3 objects in copies across multiple systems.
• Allows you to manage costs through its S3 Storage Classes, which provides different rates depending on access patterns.
• Provides the highest security and protection for your data.

Google Cloud Storage (GCS)

Google offers four different storage types for business levels of all sizes. When you’re moving data across each of those storage types, it will provide you with the data lifecycle. With this, you can manage how long data should be stored until it has to be deleted.

Features:

• You don’t have a minimum object size.
• You have access to storage locations all around the world.
• Very high durability and low latency.
• Data has redundancy across several geographic locations.

LakeFS

LakeFS is an open-source tool that works with object storage data lakes. Data lakes usually store files or blobs in raw format centrally through a repository.

Data lakes, on their own, are limited by the lack of frequent communication between entities. LakeFS solves this by using data versioning.

Features:

• Through S3 or GCS, it allows scaling up to Petabytes in size by using a system that mimics Git.
• You can experiment as it provides you with a development environment with your data.
• Since it uses a Git-like scheme, you can safely use new data in another branch without affecting the main branch. You can then, later on, merge it safely once each aspect of new data checks out (schema, etc.).

MiniIO

MiniIO is another open-source solution. It utilizes the Amazon S3 API, which makes it perfect for high scale projects that require super strict security.

Features:

• It calls itself the world’s fastest object storage as it has a read/write speed of up to 183 GB.
• It applies web scaling principles – a cluster can join forces with other clusters until it forms multiple data centers.
• It’s Kubernetes friendly.
• Because it's open source, users can improve and freely redistribute it.

Stackpath

StackPath offers both a Content-Delivery Network service, Edge Computing, and an S3 compatible Object Storage. It touts itself as a cheaper option to Amazon S3 and other cloud providers.

Features:

• It is six times faster than competing services, especially when combined with the CDN or the Edge Computing platform.
• It is serverless, which means it needs no warmup.
• It has 45 edge locations, which means your application is available worldwide with the same performance anywhere.

In Closing

There you have it – a short list of the top object storage tools that you can use for your next web or mobile project. Object storage has indeed proven a great way to store data when scalability is the most significant consideration.

Thanks for reading this article! I hope you learned a thing or two about storage models, especially about object storage. Please feel free to connect with me on LinkedIn and Twitter.

AWS Machine Learning comprises a rich set of tools that Amazon offers to help developers integrate machine learning models into their applications.

AWS also offers pre-trained models for use cases including computer vision, recommendation engines, and language translation.

Amazon currently offers 15 machine learning services on its platform. In this article, we will take a look at each one of them so we can understand the type of problem they are trying to solve for their customers.

SageMaker

Amazon SageMaker helps you to take your machine learning models from concept to production in a fraction of time compared to traditional code-based approaches.

Sagemaker is a managed service and has the complete suite of tools you need to build, train, and deploy your machine learning models. They help you label your data, optimize your algorithms, and more. It's a complete solution for creating and deploying machine learning models.

SageMaker also has an autopilot option that will automatically process the data and run it through multiple algorithms. This helps developers find the best algorithm for their model without manually training and testing those models.

Sagemaker also comes with an integrated IDE and a sharable Jupyter notebook that you can use to collaborate with your team.

CodeGuru

Amazon CodeGuru lets you automate your code reviews and performance optimizations for your application.

It can find issues like race conditions, resource leaks, and wasted CPU cycles. This helps you produce higher quality code by providing specific recommendations based on code context.

Codeguru’s algorithms are trained with codebases from Amazon’s projects. Right now, CodeGuru supports only Java applications, but you can expect the functionality to extend to other languages in the near future.

Comprehend

Amazon Comprehend is a Natural Language Processing service from Amazon that uses machine learning to find valuable insights from textual data.

Comprehend can work with unstructured data like product reviews, customer emails, twitter tweets, and so on to help you draw conclusions (like overall audience sentiment).

It's also a fully managed service, meaning you can use pre-trained models to work with your data. Comprehend also has an additional service called Amazon Comprehend Medical that lets you work with medical documents to analyze medical conditions and dosages.

Forecast

Amazon Forecast is used to build time-series prediction models using your existing datasets.

Forecast works great for use cases like predicting future business expenses, stock price prediction, and resource planning for organizations based on customer demand.

This service is also customizable and lets you build custom models on top of Amazon’s existing deep learning models. Like most machine learning tools in AWS, Forecast is also fully managed and can scale according to your business needs.

Fraud Detector

Amazon Fraud Detector is another fully managed service that helps you detect fake registrations and fraudulent transactions.

Fraud detector can identify potentially fraudulent accounts and then helps you set up additional verification for those flagged accounts.

A fraud detector needs an existing dataset of labeled fraudulent transactions in order to train and understand the pattern of your customer behavior. It then uses this data to prevent further fraudulent transactions.

You can also configure custom authentication rules for guest logins and product trials.

Kendra

Amazon Kendra is an AI-powered enterprise search engine that will help you deliver highly accurate search results based on customer queries.

You can use. Kendra to power search engines in your products that help your users find exactly what they're looking for.

Kendra can also be used to help customers find answers to specific problems while using your product without the need for additional customer support.

Kendra also supports natural language questions, delivering an even smoother experience for your customers.

Lex

Amazon Lex lets you build conversational interfaces into your products. Lex offers Natural Language Understanding (NLU) models that can understand conversational input from users and perform the right actions.

Lex can be used as a replacement for manual customer support to help filter common queries, and it can answer them automatically. It is also a fully managed service that scales automatically and uses a pay-as-you-use model.

Personalize

Amazon Personalize lets you create custom recommendations for your customers based on their usage patterns.

While traditional recommendation engines can be used only to recommend products, Personalize lets you literally personalize every step of your customer’s user experience.

Personalize is a great tool to build product recommendations, custom search results based on queries and employ targeted marketing promotions.

Polly

Amazon Polly helps you build speech-enabled products for your customers. Polly provides lifelike voice outputs across a variety of languages including Chinese, Korean and Japanese.

Polly is powered by deep learning algorithms that mimic a conversational style interface that can be used in narrations, telephony applications, and other applications.

Rekognition

Amazon Rekognition is a computer vision solution from AWS that helps developers build applications that can recognize objects from images and videos.

In addition to automatic object recognition, you can customize Rekognition to pick out specific objects and scenes based on your own requirements.

Rekognition can be used in use cases like identifying manufacturing defects in products, spotting unauthorized personnel in an organization, scanning for inappropriate content in movies, and so on. It can also be used to analyze player movements in games for post-game analysis.

Textract

Amazon Textract enables you to read data from scanned documents. The usual approach to digitizing paper documents is using manual data entry or OCRs with custom configurations.

Textract makes it easier by automatically applying rules to documents and extracting valuable data along with components like forms and images within the document.

Textract is useful for processing loan applications, medical claims, and more. In addition to extracting data, these can be optimized for search using Textract. Documents that usually take months to process using manual methods can be processed in hours using AWS Textract.

Transcribe

Amazon Transcribe lets you build speech to text services in your application. Transcribe is useful in building medical transcription services, streaming audio, generating subtitles for video recordings, and more.

Transcribe can also be used to convert customer calls into text and analyze them for improved customer service. Cataloging audio archives is another use case for AWS transcribe.

Translate

Amazon Translate is a machine learning service similar to Google Translate. Translate can work with a variety of languages with high accuracy, which lets businesses customize their languages based on the the demographics of their audiences.

Translate is also designed to be more natural-sounding to customers since the context of the sentence is also taken into account.

Translate is also highly customizable so it can help improve the accuracy of translation when working with your brand names and unique words related to your business.

DeepLens

Amazon DeepLens is a video camera with in-built deep learning capabilities that helps you build and test computer vision models in real-time.

DeepLens is fully programmable and can be used to test models like live object recognition, classifying birds/ animals, face detection, and so on.

The product is designed for developers getting started in machine learning. It helps them get a grasp of how their models will work in the real world.

DeepLens is also integrated with the AWS ecosystem and can be used with other AWS services like Lambda and Rekognition to extend its capabilities.

DeepRacer

If you are a fan of self-driving cars, AWS DeepRacer is a small autonomous race car designed by AWS that runs using machine learning. DeepRacer helps you test your reinforcement learning models using a physical track.

You can build reinforcement learning models using AWS SageMaker and test them instantly using DeepRacer. Amazon also gives you the opportunity to connect and compete with fellow racing enthusiasts by building virtual private race tracks.

Summary

With a solution to almost every machine learning problem, Amazon Machine Learning offers a rich set of tools for machine learning engineers to work with.

Amazon also adds new services every few months based on new use cases, making it one of the most dependable platforms where engineers can build AI solutions for their customers.

Loved this article? Join my Newsletter and get a summary of my articles and videos every Monday.

So how can we use Postman to both test our existing APIs and understand how they work?

• What is Postman?
• What are we going to build / learn?
• Part 0: Getting set up with Postman
• Part 1: An introduction to Postman
• Part 2: Creating a new Postman request to GET info about Squirtle
• Part 3: Creating a collection of requests in Postman for the PokéAPI
• Part 4: Making POST requests with Postman to translate sentences to sound like Yoda
• Part 5: Authenticating requests to the Lord of the Rings API with an API Key

What is Postman?

Postman is a tool teams can use to reliably test APIs using easy to use configurations. It comes stocked with features you would expect when dealing with APIs, including authentication, setting headers, customizing the payload, and a bunch more that help reduce the friction of using an API.

And it’s not just for testing. The beauty is that this can be used for many aspects of working with APIs for many different members of the team. Maybe a Project Manager wants to verify that things work or might find it easier to make a change straight with the API, or a QA Engineer needs to make sure everything still works, or a developer wants to actively make changes while working on the API itself.

The best part about it – Postman provides collaboration features. The free tier includes exporting and importing collections of saved API requests as well as creating shared links. If you're part of a team, they have paid tiers that allow you to sync up your collections to make sure everyone has the most recent and up to date collection.

What are we going to build / learn?

We’re going to walk through two different example APIs to cover the concepts of Postman.

First, we’ll walk through some simple HTTP requests with a public API for Pokémon.

We’ll then use the Yoda Translator API for one part to demonstrate how to make specific HTTP requests.

Once we understand how the basics work, we’ll use the Lord of the Rings API to learn how authentication works with APIs. For this, you’ll need to register for a free account for an API key.

Part 0: Getting set up with Postman

Before we get started, you’ll need Postman in order to follow along with this walkthrough. The good news, is Postman is available for free on Mac, Windows, and Linux, so you should be able to find a version that works for you.

Get Postman: https://www.postman.com/downloads/

Once downloaded, go through the standard installation instructions, open it up, and we should be ready to go!

Part 1: An introduction to Postman

The first time you open up Postman you’ll immediately be shown a launchpad with a bunch of options to get started.

It might seem a bit overwhelming, but let’s break down some of the key concepts that we’ll need to know.

Requests

A request is kind of what it sounds like, it’s a specific API request. This will be a single type of request, whether it’s a GET or POST to a specific endpoint. You’ll want to create new requests for each type of endpoint which will allow you to move between them when testing.

Collections

A collection is a group of requests. This is handy for organizing your requests into different groups. This could be as simple as two totally different APIs (ie. Twitter vs Slack) or it could be two different groups of APIs for a single API (ie. Twitter Tweets API vs Twitter Accounts API).

Authorization

Authorization is how requests are authenticated with an API, whether by a person making a request or by a computer making that request on your behalf. This commonly comes in the form of an API key which can be a static value assigned to your account or dynamically generated with tools like OAuth.

Environments

Environments will allow you to configure your endpoints to use specific variables that make it easier to use the same endpoints between different environments. For instance, you might have the same /profile endpoint on both your production and development environments, but they have different domains. Environments lets you manage a single request with a variable domain.

Workspaces

We won’t go too far into workspaces in this post, but it allows you to manage and organize different sets of collections. Imagine if you want to use Postman for both work and a personal project, you might have a Work workspace as well as a Personal workspace.

For the purposes of this article, we’ll be covering Requests, Collections, and Authorization.

Part 2: Creating a new Postman request to GET info about Squirtle

Now that we have a better understanding of the different terminology, let’s actually create a request.

At the top left of the UI you should see a but orange button that says New. Go ahead and click that and then select Request.

Before we get into the request itself, it requests a few things.

This first thing requires is a name. We’re going to start off by requesting information about the Pokémon Squirtle, so let’s name this “Pokémon - Squirtle”.

It also requires a collection, so click Create Collection and let’s name the collection “My Favorite Pokémon”.

Click the orange checkmark button next to the collection name then hit Save.

At this point we’ll have a new request, so let’s build that request.

There are two things we’ll first need to fill out for our first request:

• Request type: GET, POST, PUT, etc - we’ll use GET
• Request URL: The endpoint for your API request - for our request we’ll use https://pokeapi.co/api/v2/pokemon/squirtle/

And once you make sure those are correct, you can simply hit the blue Send button on the right and we’ve successfully made our first request!

We immediately get a few things we can see:

• Body: at the bottom we should now see the response body of the API request. For our Squirtle API, we should have a JSON object with data like abilities, base_experience, and forms.
• Status: on the right, we should see the HTTP status code. “200 Ok” is a good sign and it means it was successful!
• Time: simply how long the request took to finish
• Size: the size in KB (in our example) of the response data

You can also hover over Status, Time, and Size and get a more in depth look at each option.

So we made our first request!

Once thing to notice before we move on is that our request looks like it’s in a browser tab. If we’re done with that particular request, we can close the tab and click Save to make sure all of our changes are there for next time!

Part 3: Creating a collection of requests in Postman for the PokéAPI

Now that we’ve created a request, let’s create a collection of them. Technically we already had to create a new collection for Part 2, but we’ll create a new one to learn how collections themselves work.

At the top left of the UI, click the orange New button again and select Collection.

Similar to a request, it asks for a name so let’s call this “PokéAPI”. Optionally you can add a description, then click Create at the bottom.

On the left, you’ll now see your collection. You can select and expand the folder since we’ll be working with it.

Before we add a request, the PokéAPI has different types of requests, so it makes sense to organize it a little more thoroughly. So let’s click the three dots next to the PokéAPI collection and select Add Folder.

Similar to the others, this asks for a name. Folders are kind of like collections inside of a collection, so you get similar options. Let’s name this one “Pokémon” and click the orange Save button like before.

Now let’s add our requests! First, click the three dots next to the Pokémon folder, similar to how we added a folder to the collection, but this time select Add Request.

Let’s name this request “Pokemon”. While it might be confusing that we have a Pokemon request inside of the Pokémon folder, Pokemon is just one of the endpoints of the Pokémon group.

Now, let’s use the same exact API that we used with our Squirtle request before:

• Request Type: GET
• Request URL: https://pokeapi.co/api/v2/pokemon/squirtle/

And similar to before, when we hit the blue Send button, we should see a successful request!

Now let’s add another request. Follow the same process as before to create a new request under the PokéAPI Pokémon folder and let’s name this request “Abilities”.

If you scroll through the response from the first Squirtle endpoint, you see a lot of other API urls. At the top, we have abilities and we have two different ones — “torrent” and “rain-dish”.

Choose your favorite Squirtle ability and copy the url value into the new Abilities request we just created, I’m going to use rain-dish.

We can leave the Request Type as GET, hit the blue Send button, and we can again see a successful response!

Here we get a lot of information about our Squirtle ability Rain Dish and some of the details come in different languages which is cool!

So now we have a new PokéAPI collection with a Pokémon folder representing the group of Pokémon API endpoints including Pokemon and abilities.

We’re going to stop Part 3 with those 2 requests, but feel free to continue on and add as many of the PokéAPI requests as you’d like!

Part 4: Making POST requests with Postman to translate sentences to sound like Yoda

So far we’ve only made GET requests, but what if we wanted to make a POST request where we need to actually send some data?

For making a POST request, we’re going to use the Yoda Translator API from funtranslations.com. While this API only takes a single parameter, it’s still a good public endpoint we can use to understand the concept.

First, let’s create a new collection with a new request:

• Collection: Fun Translations
• Request: Yoda

This time, instead of a GET request, our request configuration will be:

• Request Type: POST
• Request URL: https://api.funtranslations.com/translate/yoda

Now this time, if we hit the blue Send button, we’ll notice we don’t get a successful 200 response, we get a 400!

We never actually set up any data to be posted to the API and it requires that data, so let’s add it.

Right below the Request URL, click Body. Then instead of none, select raw as the body type. Finally, on the far right of the types, change Text to JSON.

Then, in the space below it, you can add the following:

{
    "text": "Hello, I am learning how to test APIs with Postman!"
}

And now click the blue Send button again and we get a successful response!

We can apply this concept to pretty much any API. Postman doesn’t only permit you to post JSON, it allows you to use the other formats that we see listed in the Body Type section, meaning you have a lot of options depending on what the API you’re using requires.

Part 5: Authenticating requests to the Lord of the Rings API with an API Key

For the rest of the walkthrough, we’re going to use the Lord of the Rings API.

First up, the Lord of the Rings API requires authentication in order to make requests using an API key. So to start, you’ll before we dive in, you’ll need to go create a free account.

https://the-one-api.herokuapp.com/sign-up

Once you sign up and log in, the first thing you’ll see is your API key! Either copy this key down or remember where you can find it for later. If you leave the page, you can always grab it by navigating to Welcome and then Account in the navigation of the API website.

To get started, let’s first create a new collection and request:

• Collection: Lord of the Rings
• Folder: Movie
• Request: All Movies
• Request Type: GET
• Request URL: https://the-one-api.herokuapp.com/v1/movie

Once you’re set with the above, click Send, and you’ll notice immediately it gives a response that says 401 and that it’s unauthenticated.

Because this API requires the API key, this is exactly what we expected. So let’s click on the Authorization tab. We can then select a Type of Bearer Token, and on the right, we can paste in our key that we just set up with the Lord of the Rings API.

And as soon as we hit Send, we now see a successful response!

This worked really great, but what if we have a bunch of requests that use a single key. Do we have to manage that on each request?

Instead of managing it on each individual request, we can manage it on the collection. Let’s first build another request.

Under our Lord of the Rings collection and in the Movie folder, create a new request:

• Request: Quote by Movie ID
• Request Type: GET
• Request URL: https://the-one-api.herokuapp.com/v1/movie/{id}

In this request, let’s use an ID from the response of the first request, I’m going to use 5cd95395de30eff6ebccde5b which is the ID of The Two Towers, so the request URL will look like:

https://the-one-api.herokuapp.com/v1/movie/5cd95395de30eff6ebccde5b

Now, instead of setting our token in the request Authorization, we’re going to leave the type as Inherit auth from parent. Click on the three dots next to the collection and select Edit.

Here, we’re going to do the same exact thing we did with the first request but on the Collection configuration. Select the Authorization tab, under type select Bearer Token, and in the Token field again paste your token.

Finally, click Update and hit the blue Send button again and we can see a successful request!

We can now go back to our All Movies request and update the Authorization to use a Type of Inherit auth from parent and it should still continue to work!

What else can we do with Postman?

While I covered a lot of the basics, there’s quite a lot more you can do with Postman. Here are a few of my favorites.

Environment Variables

If you’re working as a developer on a project, it’s likely that your team uses multiple environments, such as a development and production environment. Instead of creating and maintaining completely separate requests, you can add an environment variable and instead change that variable when switching between environments!

Variables apply to many scenarios, but that’s a common use. Check out Postman’s docs to learn how.

https://learning.postman.com/docs/postman/variables-and-environments/variables/

Import and Export Collections and Data

A great thing about Postman is once you have your requests all organized, you can export them for others to use. This also means that you can import collections from other team members. This makes it much easier to make sure everyone’s using the same collection.

Bonus: you can even store these files in a Git repository, as they’re just JSON.

But keep in mind - if you’re using Authorization on the collection like we went over in this guide, you’ll want to make sure you don’t include that when exporting your collection.

https://learning.postman.com/docs/postman/collections/importing-and-exporting-data/

Automated testing

Once you have a set of requests in a collection and even better, if you’re storing them in Github, you can begin to use those requests as part of a way to manage automated testing of your API.

While there are a few solutions for doing this, Postman includes a Collection runner built right into the app and Newman is a command line tool that lets you run tests right from the terminal.

https://www.postman.com/use-cases/api-testing-automation/

What’s your favorite way to test and play with APIs?

Share with me on Twitter!

• What is VS Code?
• What will we use?
• How does it work?
• Step 1: Install Settings Sync
• Step 2: Authorize access to Github
• Step 3: Upload your current settings
• Step 4: Syncing your configuration to another environment
• Step 5: Updating your configuration

What is VS Code?

Visual Studio Code, or VS Code, is an all-inclusive code editor that takes all of the features you want out of working with code and puts them in one editor to make you ultra productive.

VS Code editor

It’s been the “cool kid on the block” for a little while now and has been increasingly growing in popularity at least in the JavaScript community. Microsoft has put a lot of effort into making it something people want to use (and they’re doing a great job at that).

What will we use?

We’re going to use a VS Code extension called Settings Sync that makes use of Github’s Gist feature to store a private JSON configuration file in the cloud.

How does it work?

The extension uses Github’s OAuth to log in to your Github account. Once approved, VS Code obtains an access token and reaches out to both store and download your settings file to a private Github Gist.

Once it’s set up, you can then configure the extension on any other instance of VS Code and immediately download your configuration to sync up your editor.

Step 0: VS Code

We’ll assume for this walkthrough you have VS Code already installed. While you don’t need to have any special configuration, having something different than the default (like a color theme) will help you see it work.

Let’s get started!

Step 1: Install Settings Sync

The first thing we need to do is install the extension. You can do this a few ways — you can visit the webpage and hit Install which will open up VS Code or you can search for the extension in the Extensions panel.

VS Code Settings Sync extension

Once installed, it will open up a new tab with the Settings Sync dashboard.

Settings Sync dashboard after installation

Step 2: Authorize access to Github

To get started with Github, click the Login with Github button in the Settings Sync dashboard.

Log in to Settings Sync with Github

This will open up Github in your default web browser and ask you to log in. While you can use any Github account you want, it would probably make most sense to use your personal account.

Successful Github login to Settings Sync

Once you’re logged in, you should now see Success! in your browser.

Step 3: Upload your current settings

Now that you’re connected to Github, you’re ready to upload your settings.

Open up your Command Palette with CMD+Shift+P (on Mac) or navigate to View and Command Palette. Type “Sync Upload” which will filter the commands and hit enter once the Sync: Update/Upload Settings option is selected.

Update/Upload Settings command in Settings Sync

When doing this, you might be prompted with screen that asks if you want to force upload — press Yes.

Force upload new settings in Settings Sync

At this point, Settings Sync will create a new Gist in your Github account with your configuration settings. Once it’s done you should see a success message.

Successful settings upload in Settings Sync

You should now be able to visit gist.github.com and find a new private cloudSettings Gist that includes all of your VS Code settings!

Step 4: Syncing your configuration to another environment

To sync your VS Code configuration to another computer or VS Code environment, you want to first follow steps 1 and 2 above — installing the extension and logging in to Github.

The difference is this time, you’ll want to configure VS Code to download your settings instead of upload them.

To get started, first open back up your Sync Settings dashboard. If this is a new installation like we’re assuming here, you can open up the Command Palette and type “sync download” and hit enter which will open up that dashboard. Here, click Edit Configuration this time.

Edit Settings Sync configuration

On this screen, you should see your Github Access Token, but you should also see an empty field for Gist ID. Here, we want to first grab the ID from our cloudSettings Gist URL:

VS Code cloudSettings Gist ID

And then paste that value inside of our Gist ID input in VS Code.

Adding Gist ID to Settings Sync configuration

Once it’s there, you can open the Command Palette again, type “sync download”, and hit enter, and Sync Settings will fetch your VS Code configuration from the Gist and update your local settings with that configuration!

Step 5: Updating your configuration

From here on, any time you want to make a new change to your stored configuration, you’ll want to use both the Update/Upload and Download features like we used above.

To update a new tweak to your configuration, type “sync update” and hit enter:

Update command for Settings Sync

And to download your configuration to sync up another editor, type “sync download” and hit enter:

Download settings command for Settings Sync

These commands will both update your cloudSettings Gist and download from it to sync up your VS Code instances

What’s your favorite VS Code trick?

Share it with me on Twitter!

Join the conversation

So how can we use Storybook to build libraries and design systems that self-document as we build them?

• What is Storybook?
• What are we going to build?
• Step 0: Bootstrapping an app
• Step 1: Installing Storybook
• Step 2: Creating a new button
• Step 3: Using our new Button component
• Repeat: Creating a new Header component
• More Storybook features

What is Storybook?

Storybook is a JavaScript tool that allows developers to create organized UI systems making both the building process and documentation more efficient and easier to use.

Lonely Planet's Backpack UI

Once you build out a component, Storybook lets you create a "story" file where you can then import your component and create various use case examples in an iFramed sandbox using that component.

This provides an organized and focused environment to build new components and work on existing ones.

What are we going to build?

We're going to bootstrap a new React JS app using Create React App.

Inside that app, we're going to install Storybook and create a few new components that will help us learn how to create new components that we can work on in a story and then use it in a React app.

Step 0: Bootstrapping an app

To get started, we're going to start from scratch with Create React App. This will help us focus on getting productive in Storybook rather than walking through integrating it into a current app.

That said, if you're already working with an app created using Create React App that's not ejected, you should be able to still follow on with Part 1 and beyond just the same!

So let's get started by navigating to where we want to create our new app and run the Create React App command:

npx create-react-app my-storybook

Note: feel free to replace my-storybook with the directory name of your choice.

Bootstrapping with Create React App

Once that's finished running, you can navigate to the directory:

cd my-storybook

And we're ready to go!

Step 1: Installing Storybook

Storybook luckily makes it really easy to get started with a standard installation of React. Particularly with Create React App, Storybook automatically detects that we're using an app created using CRA and installs the dependencies and scaffolds everything for us.

Initializing Storybook

To get started installing Storybook, run:

npx -p @storybook/cli sb init

Initializing Storybook in a React app

If you aren't using Create React App or it didn't work, you can check out their available guides in their docs.

After that's finished, all of our Storybook dependencies should be installed.

Finished installing Storybook

Starting up Storybook

So now we're ready to get moving! Finally, run:

yarn storybook
# or
npm run storybook

And once everything finishes loading, Storybook will open a new tab in your browser and you should now see a welcome message inside of your new Storybook dashboard!

Storybook welcome page

Follow along with the commit!

Step 2: Creating a new button

If you took a second to poke around the dashboard, you might have noticed that it comes pre-loaded with a Button that's available as a demo.

Storybook demo button

You should also notice if you click the button, you actually see an action print out inside of the Actions tab at the bottom. This shows the event that's captured from the button click.

It's simple, but this is great to get a nice feel about what to expect in storybook. The only issue is, this is meant purely for demonstration purposes, so let's build our own button to replace it.

Creating a new Button component

To get started, let's first create a few directories:

• Under src, create a new folder called components
• Under components, create a new folder called Button

Once you create those folders, create a new file called index.js inside of your src/components/Button folder and inside add:

// Inside src/components/Button/index.js

export { default } from './Button';

This will import the next file we created called Button.js which will allow us to more easily import our files with src/components/Button instead of /src/components/Button/Button.

Next, let's create Button.js right next to our index.js file with the following content:

// Inside src/components/Button/Button.js

import React from 'react';

const Button = ({ children, ...rest }) => {
  return (
    <button className="button" {...rest}>
      { children }
    </button>
  )
}

export default Button;

Here, we're creating a new component called Button that adds a class of button to the element and passes through the children. We're a additionally destructuring the rest of the props into the rest variable and spreading that value into the <button> element.

If you've followed along, your files should now look like this:

Button component in React

Using our new Button component

So now that we have our Button component, let's use it!

Open up the file src/stories/1-Button.stories.js and replace the line that's importing Button with:

Updating the Button Storybook story

And once you hit save, you can open back up your browser tab with your Storybook dashboard, and you can now see a button that looks mostly similar, but it uses the browser's default styles for the <button> element. You'll even notice that if you click it, the event will still be logged under the Actions tab.

Styling our Button component

Finally, we probably don't want to use the browser default styles, so let's make it look nice.

In our src/components/Button directory, add a new file Button.css and add the following content:

/* Inside src/components/Button/Button.css */

.button {
  color: white;
  font-weight: bold;
  background-color: blueviolet;
  border: none;
  padding: .8em 1em;
  border-radius: .2rem;
}

This applies a few styles to our .button class like adding a background color and changing the font color to white.

But if you open Storybook, you'll notice it didn't do anything. To use it, we need to import it into our component.

Inside src/components/Button/Button.js add the following at the top under the React import:

import './Button.css';

And once you save that and open up your browser, you should now see our new button with our updated styles!

New Button in Storybook

Follow along with the commit!

Step 3: Using our new Button component

The ultimate goal of our component is to use it right? So let's add it to our app.

Switching over to the React app

First we'll need to either start our React app in a new terminal tab or kill the Storybook process and start the React process there. To start the React app using Create React App, run:

yarn start
# or
npm run start

Once that loads, we should have our standard Create React App if you're following along with me:

New Create React App

Importing and using the new button

Next, inside of src/App.js, let's import our new Button at the top of the page:

import Button from './components/Button';

With Button imported, we can use it. Here, we can simply add it anywhere we want in the page. I'm going to replace the Learn React link with:

<p>
  <Button>Hello, Storybook!</Button>
</p>

And if we save and reload the page, we should now see our Button on the page!

New Button in Create React App

Follow along with the commit

Repeat: Creating a new Header component

The great thing about Storybook and React (or any of the supported frameworks) is that this process scales to as many components as you want.

So let's build another component!

Creating our Header component

Similar to our Button, let's start off by creating the set of directories and files that give us our component.

Since we already did this once, I'm going to provide the code without walking through what's going on.

Let's start off by spinning back up our Storybook server with:

yarn storybook
# or 
npm run storybook

Create a Header directory inside the src/components directory.

Create an index.js file inside of src/components/Header with the following content:

// In src/components/Header/index.js

export { default } from './Header';

Create a Header.js file inside of src/components/Header with the following content:

// In src/components/Header/Header.js

import React from 'react';
import './Header.css';

const Header = ({ children }) => {
  return (
    <h2 className="header">
      { children }
    </h2>
  )
}

export default Header;

Create a Header.css file inside of src/components/Header with the following content:

/* In src/components/Header/Header.css */

.header {
  font-family: sans-serif;
  font-size: 2.5em;
  color: blueviolet;
  border-bottom: solid 5px aqua;
  padding-bottom: .2em;
  box-shadow: 0 5px 0 blueviolet;
}

Now if you notice, if you try to open up Storybook, again, nothing will happen. This time we need to create a new story file.

Creating a new Story file

Inside src/stories, add a new file called 2-Header.stories.js:

// Inside src/stories/2-Header.stories.js

import React from 'react';

import Header from '../components/Header';

export default {
  title: 'Header',
  component: Header,
};

export const Text = () => <Header>Hello Header</Header>;

Here's a breakdown of our story file:

• First, we import our component – this is pretty standard any time we want to use it
• The first thing we export is a default object. With Storybook, it expects the default export to be the configuration of our story, so here we provide it with a title and we pass in the component that we're using for this story
• The second and last thing we export is the Text constant. With Storybook, any non-default export will be considered a variation that will get nested under the title that you provide in the default export

And if you save this file and open up your Storybook dashboard in the browser, you should now see the new header!

New Header component in Storybook

Using the Header component

Using our component is just the same as our Button component, so inside of src/App.js, let's add our Header.

After starting your React server, first import our new Header:

// In src/App.js

import Header from './components/Header';

Then add it to the top of the page:

// In src/App.js

<Header>My App</Header>

And if you open the page, we'll see our new Header!

Create React App with new Header and Button components

Follow along with the commit!

Adding more components

As you've noticed with our second Repeat step – adding a new component is pretty much the same process for any type of component we want to add. Once we have it in our library, we can develop it in a focused environment and then import it to our app to use.

You can now use this to manage your library of components and better maintain an entire system for your project!

More Storybook features

Storybook doesn't stop with just adding components, it provides the ability to configure Addons that enhance the core capabilities opening up a lot of possibilities.

Here are some of my favorites...

Story Source

When building a component system, the hope is that people can easily use these components. But if you don't have documentation, someone would have to open up the file or try to find another use example.

Instead, Story Source shows the code source of the story file you created allowing someone browsing your Storybook dashboard to get an example right along with the component output!

Storybook Story Source demo

Storyshots

If you're a fan of automated testing, you might have heard of using Jest or another tool for adding snapshot testing to your app.

StoryShots is a way to easily add Jest snapshot testing to your component system. It creates snapshots based off of the stories you create so you can make sure that your components aren't fundamentally changing (or breaking) during development.

Snapshot example with StoryShots

What's your favorite part of Storybook?

Share with me on Twitter!

Continue the conversation!

How can Tailwind CSS help us to take control of our styles?

• What is Tailwind?
• So what makes Tailwind great?
• Part 1: Adding Tailwind CSS to a static HTML page
• Part 2: Adding Tailwind CSS to a React app

What is Tailwind?

Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application.

The underlying goal is that as you're building your project, you don't need to deal with cascading styles and worrying about how to override that 10-selector pileup that's been haunting your app for the last 2 years.

So what makes Tailwind great?

Taildwind's solution is to provide a wide variety of CSS classes that each have their own focused use. Instead of a class called .btn that is created with a bunch of CSS attributes directly, in Tailwind, you would either apply a bunch of classes like bg-blue-500 py-2 px-4 rounded to the button element or build a .btn class by applying those utility class to that selector.

While Tailwind has a lot more going for it, we're going to focus on these basics for this tutorial, so let's dig in!

Part 1: Adding Tailwind CSS to a static HTML page

We're going to start off by applying Tailwind CSS straight to a static HTML page. The hope is that by focusing on Tailwind and not the app, we can get a better understanding of what's actually happening with the framework.

Step 1: Creating a new page

You can get started by simply creating a new HTML file. For the content, you can use whatever you want, but I'm going to use fillerama.io so the filler content is a bit more fun.

New HTML page with content

If you want to simplify this step, you can just copy the file I created to get started.

Follow along with the commit!

Step 2: Adding Tailwind CSS via CDN

Tailwind typically recommends that you install through npm to get the full functionality, but again, we're just trying to understand how this works first.

So let's add a link to the CDN file in the <head> of our document:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Once you save and reload the page, the first thing you'll notice is that all of the styles were stripped!

HTML page with the Tailwind CSS base

This is expected. Tailwind includes a set of preflight styles to fix cross-browser inconsistencies. For one, they include the popular normalize.css which they build upon with their own styles.

But we're going to learn how to use Tailwind to add back our styles and set things up how we want!

Follow along with the commit!

Step 3: Using Tailwind CSS to add styles to your page

Now that we have Tailwind installed, we've added the ability to make use of their huge library of utility classes that we'll now use to add styles back to our page.

Let's start off by adding some margin to all of our paragraphs (<p>) and our list elements (<ol>, <ul>). We can do this by adding the .my-5 class to each element like so:

<p class="my-5">
  Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along…
  Belligerent and numerous.
</p>

The class name follows a pattern that you'll notice with the rest of the utility classes – .my-5 stands for margin (m) applied to the y-axis (y) with a value of 5 which in Tailwind's case, it uses rem, so the value is 5rem.

HTML page with basic paragraph styles

Next, let's make our headers look like actual headers. Starting with our h1 tag, let's add:

<h1 class="text-2xl font-bold mt-8 mb-5">

Here's what's happening:

• text-2xl: set the text size (font-size) to 2xl. In Tailwind, that 2xl will equate to 1.5rem
• font-bold: set the weight of the text (font-weight) to bold
• mt-8: Similar to my-5, this will set the margin top (t) to 8rem
• mb-5: And this will set the margin bottom (b) to 5rem

HTML page with styled H1

With those classes added to the h1, let's apply those same exact classes to the rest of our header elements, but as we go down the list, reduce the size of the font size, so it will look like:

• h2: text-xl
• h3: text-lg

HTML page with all headers styled

Now let's make our list elements look like lists. Starting with our unordered list (<ul>), let's add these classes:

<ul class="list-disc list-inside my-5 pl-2">

Here's what we're adding:

• list-disc: set the list-style-stype to disc (the markers on each line item)
• list-inside: sets the position of the list markers using relative to the list items and the list itself with list-style-position to inside
• my-5: set the margin of the y axis to 5rem
• pl-2: set the left padding to 2rem

Then we can apply the exact same classes to our ordered list (<ol>), except instead of list-disc, we want to change our style type to list-decimal, so that we can see numbers given it's an ordered list.

<ol class="list-decimal list-inside my-5 pl-2">

And we have our lists!

HTML page with styled lists

Finally, let's make our content a little easier to read by setting a max width and centering the content. On the <body> tag, add the following:

<body class="max-w-4xl mx-auto">

/Note: Typically you wouldn't want to apply these classes to the <body> itself, rather, you can wrap all of your content with a <main> tag, but since we're just trying to get an idea of how this works, we'll roll with this. Feel free to add the <main> tag with those classes instead if you prefer!/

And with that, we have our page!

HTML page with centered content

Follow along with the commit!

Step 4: Adding a button and other components

For the last part of our static example, let's add a button.

The trick with Tailwind, is they intentionally don't provide pre-baked component classes with the idea being that likely people would need to override these components anyways to make them look how they wanted.

So that means, we're going to have to create our own using the utility classes!

First, let's add a new button. Somewhere on the page, add the following snippet. I'm going to add it right below the first paragraph (<p>) tag:

<button>Party with Slurm!</button>

HTML page with unstyled button

You'll notice just like all of the other elements, that it's unstyled, however, if you try clicking it, you'll notice it still has the click actions. So let's make it look like a button.

Let's add the following classes:

<button class="text-white font-bold bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">
  Party with Slurm!
</button>

Here's a breakdown of what's happening:

• text-white: we're setting our text color to white
• font-bold: set the weight of the text to bold (font-weight)
• bg-purple-700: set the background color of the button to purple with a shade of 700. The 700 is relative to the other colors defined as purple, you can find these values on their palette documentation page
• hover:bg-purple-800: when someone hovers over the button, set the background color to purple shade 800. Tailwind provides these helper classes that allow us to easily define interactive stiles with things like hover, focus, and active modifiers
• py-2: set the padding of the y-axis to 2rem
• px-4: set the padding of the x-axis to 4rem
• rounded: round the corners of the element by setting the border radius. With tailwind, it sets the border-radius value to .25rem

And with all of that, we have our button!

HTML page with a styled button

You can apply this methodology to any other component that you'd like to build. Though it's a manual process, we'll find out how we can make this process easier when building in more dynamic projects like those based on React.

Follow along with the commit!

Part 2: Adding Tailwind CSS to a React app

For more of a real-world use case, we're going to add Tailwind CSS to an app created with Create React App.

First, we'll walk through the steps you need to take to add tailwind to your project using a fresh install of Create React App, then we'll use our content from our last example to recreate it in React.

Step 1: Spinning up a new React app

I'm not going to detail this step out too much. The gist is we'll bootstrap a new React app using Create React App.

To get started, you can follow along with the directions from the official React documentation:

https://reactjs.org/docs/create-a-new-react-app.html

And once you start your development server, you should now see an app!

Create React App starting page

Finally, let's migrate all of our old content to our app. To do this, copy everything inside of the <body> tag of our static example and paste it inside of the wrapper <div className="App"> in the new React project.

Migrating code to React app

Next, change all class=" attributes from the content we pasted in to className=" so that it's using proper React attributes:

Fixing class attribute in content

And lastly, replace the className App on our wrapper <div> to the classes we used on our static <body>.

Adding wrapper styles to the app

Once you save your changes and spin back up your server, it will look deceivingly okay.

React app with basic content

React includes some basic styles itself, so while it looks okay, we're not actually using Tailwind yet. So let's get started by installing it!

Follow along with the commit!

Step 2: Installing Tailwind in your React app

There are a few steps we'll need to go through in order to get Tailwind up and running on our app. Make sure you follow these steps carefully to ensure it's properly configured.

First, let's add our dependencies:

yarn add tailwindcss postcss-cli autoprefixer
# or
npm install tailwindcss postcss-cli autoprefixer

Per Tailwind's documentation, we need to be able to process our styles so that they can be properly added to our pipeline. So in the above, we're adding:

• tailwindcss: the core Tailwind package
• postcss-cli: Create React App already uses postcss, but we need to configure Tailwind to be part of that build process and run it's own processing
• autoprefixer: Tailwind doesn't include vendor prefixes, so we want to add autoprefixer to handle this for us. This runs as part of our postcss configuration

We're also going to add two dev dependencies that make it easier to work with our code:

yarn add concurrently chokidar-cli -D
# or
npm install concurrently chokidar-cli --save-dev

• concurrently: a package that lets us set up the ability to run multiple commands at once. This is helpful since we'll need to watch both the styles and React app itself.
• chokidar-cli: let's us watch files and run a command when changed. We'll use this to watch our CSS file and run the build process of the CSS on cahnge

Next, let's configure postcss, so create a new file in the root of your project called postcss.config.js and include the following:

// Inside postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

This will add the Tailwindcss and Autoprefixer plugins to our postcss config.

With our configuration, we need to include it as part of the build and watch processes. Inside package.json, add the following to definitions to your scripts property:

"build:css": "tailwind build src/App.css -o src/index.css",
"watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",

Additionally, modify the start and build scripts to now include those commands:

"start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'",
"build": "npm run build:css && react-scripts build",

With our configuration ready to go, let's try our styles back to where they were when we left off from the static example.

Inside the App.css file, replace the entire content with:

@tailwind base;
@tailwind components;
@tailwind utilities;

This is going to import Tailwind's base styles, components, and utility classes that allow Tailwind to work as you would expect it to.

We can also remove the App.css import from our App.js file because it's now getting injected directly into our index.css file. So remove this line:

import './App.css';

Once you're done, you can start back up your development server! If it was already started, make sure to restart it so all of the configuration changes take effect.

And now the page should look exactly like it did in our static example!

React app with content styled

Follow along with the commit!

Step 3: Creating a new button component class with Tailwind

Tailwind doesn't ship with prebaked component classes, but it does make it easy to create them!

We're going to use our button that we already created as an example of creating a new component. We'll create a new class btn as well as a color modifier btn-purple to accomplish this.

The first thing we'll want to do is open up our App.css file where we'll create our new class. Inside that file, let's add:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

If you remember from our HTML, we're already including those same classes to our <button> element. Tailwind let's us "apply" or include the styles that make up these utility classes to another class, in this case, the .btn class.

And now that we're creating that class, let's apply it to our button:

<button className="btn text-white bg-purple-700 hover:bg-purple-800">
  Party with Slurm!
</button>

And if we open up our page, we can see our button still looks the same. If we inspect the element, we can see our new .btn class generated with those styles.

.btn class in a React app with Tailwind

Next, let's create a color modifier. Similar to what we just did, we're going to add the following rules:

.btn-purple {
  @apply bg-purple-700 text-white;
}

.btn-purple:hover {
  @apply bg-purple-800;
}

Here, we're adding our background color and our text color to our button class. We're also applying a darker button color when someone hovers over the button.

We'll also want to update our HTML button to include our new class and remove the ones we just applied:

<button className="btn btn-purple">
  Party with Slurm!
</button>

And with that change, we can still see that nothing has changed and we have our new button class!

Styled button in React with Tailwind

Follow along with the commit!

Applying these concepts to more components

Through this walkthrough, we learned how to create a new component class using the Tailwind apply directive. This allowed us to create reusable classes that represent a component like a button.

We can apply this to any number of components in our design system. For instance, if we wanted to always show our lists the way we set them up here, we could create a .list-ul class that represented an unordered list with the Tailwind utilities list-disc list-inside my-5 pl-2 applied.

What tips and tricks do you like to use with Tailwind?

Share with me on Twitter!

Of course, having your CI/CD work everywhere is a tall order. Popular CI apps for GitHub repositories alone use a multitude of configuration languages spanning Groovy, YAML, TOML, JSON, and more… all with differing syntax, of course. Porting workflows from one tool to another is more than a one-cup-of-coffee process.

The introduction of GitHub Actions has the potential to add yet another tool to the mix; or, for the right set up, greatly simplify a CI/CD workflow.

Prior to this article, I accomplished my CD flow with several lashed-together apps. I used AWS Lambda to trigger site builds on a schedule. I had Netlify build on push triggers, as well as run image optimization, and then push my site to the public Pages repository. I used Travis CI in the public repository to test the HTML. All this worked in conjunction with GitHub Pages, which actually hosts the site.

I’m now using the GitHub Actions beta to accomplish all the same tasks, with one portable Makefile of build instructions, and without any other CI/CD apps.

Appreciating the shell

What do most CI/CD tools have in common? They run your workflow instructions in a shell environment! This is wonderful, because that means that most CI/CD tools can do anything that you can do in a terminal… and you can do pretty much anything in a terminal.

Especially for a contained use case like building my static site with a generator like Hugo, running it all in a shell is a no-brainer. To tell the magic box what to do, we just need to write instructions.

While a shell script is certainly the most portable option, I use the still-very-portable Make to write my process instructions. This provides me with some advantages over simple shell scripting, like the use of variables and macros, and the modularity of rules.

I got into the nitty-gritty of my Makefile in my last post. Let’s look at how to get GitHub Actions to run it.

Using a Makefile with GitHub Actions

To our point on portability, my magic Makefile is stored right in the repository root. Since it’s included with the code, I can run the Makefile locally on any system where I can clone the repository, provided I set the environment variables. Using GitHub Actions as my CI/CD tool is as straightforward as making Make go worky-worky.

I found the GitHub Actions workflow syntax guide to be pretty straightforward, though also lengthy on options. Here’s the necessary set up for getting the Makefile to run.

The workflow file at .github/workflows/make-master.yml contains the following:

name: make-master

on:
  push:
    branches:
      - master
  schedule:
    - cron: '20 13 * * *'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
        with:
          fetch-depth: 1
      - name: Run Makefile
        env:
          TOKEN: ${{ secrets.TOKEN }}
        run: make all

I’ll explain the components that make this work.

Triggering the workflow

Actions support multiple triggers for a workflow. Using the on syntax, I’ve defined two triggers for mine: a push event to the master branch only, and a scheduled cron job.

Once the make-master.yml file is in your repository, either of your triggers will cause Actions to run your Makefile. To see how the last run went, you can also add a fun badge to the README.

One hacky thing

Because the Makefile runs on every push to master, I sometimes would get errors when the site build had no changes. When Git, via my Makefile, attempted to commit to the Pages repository, no changes were detected and the commit would fail annoyingly:

nothing to commit, working tree clean
On branch master
Your branch is up to date with 'origin/master'.
nothing to commit, working tree clean
Makefile:62: recipe for target 'deploy' failed
make: *** [deploy] Error 1
##[error]Process completed with exit code 2.

I came across some solutions that proposed using diff to check if a commit should be made, but this may not work for reasons. As a workaround, I simply added the current UTC time to my index page so that every build would contain a change to be committed.

Environment and variables

You can define the virtual environment for your workflow to run in using the runs-on syntax. The obvious best choice one I chose is Ubuntu. Using ubuntu-latest gets me the most updated version, whatever that happens to be when you're reading this.

GitHub sets some default environment variables for workflows. The actions/checkout action with fetch-depth: 1 creates a copy of just the most recent commit your repository in the GITHUB_WORKSPACE variable. This allows the workflow to access the Makefile at GITHUB_WORKSPACE/Makefile. Without using the checkout action, the Makefile won't be found, and I get an error that looks like this:

make: *** No rule to make target 'all'.  Stop.
Running Makefile
##[error]Process completed with exit code 2.

While there is a default GITHUB_TOKEN secret, this is not the one I used. The default is only locally scoped to the current repository. To be able to push to my separate GitHub Pages repository, I created a personal access token scoped to public_repo and pass it in as the secrets.TOKEN encrypted variable. For a step-by-step, see Creating and using encrypted secrets.

Portable tooling

The nice thing about using a simple Makefile to define the bulk of my CI/CD process is that it’s completely portable. I can run a Makefile anywhere I have access to an environment, which is most CI/CD apps, virtual instances, and, of course, on my local machine.

One of the reasons I like GitHub Actions is that getting my Makefile to run was pretty straightforward. I think the syntax is well done - easy to read, and intuitive when it comes to finding an option you’re looking for. For someone already using GitHub Pages, Actions provides a pretty seamless CD experience; and if that should ever change, I can run my Makefile elsewhere. ¯_(ツ)_/¯

Let software tooling check the consistency of your roleplay scripts for you!

(French version of this article available here on Electro-GN)

Issue

Every writer will confirm it to you: it is not easy to remain coherent when you are working, for several months, on a long story. It is even less so when the story in question is lived by dozens of characters, each with their own partial vision of the truth. And live action roleplay games (LARPs) are especially exposed to this problem.

The danger does not lie in the first draft of the writing: if he has all his ideas well in place, the author does not risk much, except for a few typos and interchanges of names. It is during subsequent modifications (changes in the chronology of facts, additions of twists and turns, etc.) that the information — disseminated and duplicated in the documents of the various participants — will gradually become obsolete and inconsistent. Eventually, even the character sheets of a common “murder&mystery party” will end up full of spatial, temporal, lexical and structural improbabilities if they are not rigorously checked and compared after each evolution of the scenario.

What can we do to prevent this, without spending a lifetime doing comparative proofreading? First, undoubtedly, deduplicate texts common to several players, which lead to tedious copy and paste (multiplying errors and artificially inflating the mass of the text). Then, allow the author to review the interdependent sets of changes he has successively applied to his scenario. Finally, give him summaries of key information, easier to review than verbose literary texts. And all this in as automated a way as possible, because the number of documents to be managed can make the smallest operation very time-consuming (and at risk of carelessness).

The benefits of Pychronia Tools machinery

To benefit from these precious writing facilities during the creation of the Chrysalis:Mindstorm mystery party (French only), I set up a specific writing process, involving simple text files (which contain the scenario), various existing software tools, as well as a module “Pychronia Tools” developed for the occasion.

Once this machinery is in place, all you have to do is start it up and — magic — a hundred PDF files appear one after the other in the output folder: game master’s manual, complete and summarized character sheets for players, documents to print on beautiful scrolls to serve as clues in play, summary sheets for extras….

This tool is much more than a simple document generator: it includes an automatic check of the script consistency. Now, if an index is mentioned in one place but not provided in another, or if the same symbol has different values from one file to another, the error is reported.

Extract of consistency errors returned by the program:

!!! ERROR IN hints registry for key golden_box_with_blood : [‘needed’] requires a provided hint
!!! ERROR IN symbols registry for key murder_date : [‘3 January 2018′,’15 March 2018']

And thanks to the automatically generated summary tables, it is possible to check at a glance that each player is well informed of the facts concerning him/her, that the distribution of key information is more or less balanced, and that major events are correctly recorded in summary sheets.

Extract from the automatic summary of the “facts” of the scenario:

Character names are in italics when they have the “fact” in question only in their complete character sheet, not in their summary sheet.

As a result, the game master can rely quietly on his own (self-generated) documents to set up and monitor the game: detailed scenario, evening planning, checklist of materials and writings to be placed in the premises, automatic summary of missions and special skills of each player…

On top of that, this machine can also send its game documents, by email, to each player (e.g. character card and documents initially owned). This avoids the drama that awaits each organizer: spoiling a participant by sending him the wrong documents.

This system obviously adds a certain complexity to the project, compared to some common Word/LibreOffice files. But it provides invaluable support in terms of scenario scalability and robustness, detecting inconsistencies and automating daunting tasks. Personally, he saved me more than once, when I switched the names of some characters in cards, or forgot to warn some players of the new misdeeds they were supposed to have committed in the past.

How to set up such a process?

Step 1: Move away from rich office files (docx, odt, pdf…) to a plain text format, easily manipulable, where the formatting is explicitly indicated by special characters. The documents in game with high graphic and typographical needs (posters, scrolls, newspapers…) can be left aside, in more usual office automation files: Word, LibreOffice, InDesign…

Example of plain text (restructuredtext format):

Manuel du Maître de Jeu
############################

.. contents:: Table des Matières
    :depth: 2

Concept de la soirée mystère
================================

**Chrysalis:Mindstorm** est un huis clos entre `enquête 
<https://fr.wikipedia.org/wiki/Enqu%C3%AAte>`_ criminelle et conflit
géopolitique, où des agents secrets et des civils de divers pays se 
retrouvent face à un *redoutable* inspecteur de police, qui va les 
pousser dans leurs derniers retranchements.

Rendering of this text once converted to PDF:

Step 2: Use a version manager for scenario files. This makes it possible to go back in time at any time, to avoid horrifying accidental file modifications, and to check the consistency of each of the changes made (renaming a place, adding information for a group of players…).

Viewing a change made to the rules of the game:

Step 3: Add a small processing engine, to enrich the text with simple and practical features: allow one file to include another, define reusable text blocks, insert variables (e. g. the date of a crucial event, different for each session of the mystery evening), display different information according to the team to which the targeted player belongs….

Step 4: Automate consistency checks. To do this, I created specific tags in the processing engine, which I then inserted as I wrote:
 — The {% fact %} tag is used to announce a fact (e. g. “so-and-so tried to rob Loyd Georges”), and to indicate whether the player is the author or just a witness.
 — The {% hint %} tag allows you to request the existence of a physical clue (letter, object…) to give to the player.
 — The {% symbol %} tag ensures that a value is unique in all scenario files (e. g. the exact time of a crime), while avoiding the use of “variables” that obscure the text.

Example of using special tags to enrich a scenario text:

To the attention of {{agent_gamma_fake_name }} : the country of {% symbol “Balberith” for “first_country_at_war” %} has entered the war, following the plot led by agent Epsilon {% fact “agent_epsilon_triggered_war” as author %}. You have a testimony signed by him and attesting to it. {% hint “epsilon_signed_testimony_for_agent_gamma” is needed %}.

As we can see, these tags each have their own syntax, and can use other features of the processing engine, such as variables (of which we have an example with _{{agent_gamma_fakename }}).

Step 5: Link all this with scripts, which will automate the different steps of creating game documents: gathering useful data (including player photos), distributing scenario pages for each participant (global context, personal context, game rules…), transforming them into PDF format, and generating summary sheets for the game master.

Some of the PDF documents generated, next to their plain text sources:

The future

All this is all well and good, but what about the rest of the role-playing community? Can it benefit, more broadly, from the functionalities offered by this scriptwriting support system?

The answer is yes. However, as seen in the steps above, this tooling requires a certain affinity with processes that are usually reserved for computer development; an affinity that many GN authors do not have.

I am therefore listening to authors tempted by the experience, in order to see with them how they work, what formats and tools they are able to use, and how this system could be generalized to suit their use. I could then see to extract this code (which is currently strongly linked to the structure of the Chrysalis game files), to make it more autonomous and more easily deployable.

Note that software such as Twine already allows scenarios to be created in a fairly simple way, with a mini-language to define variables and use logical operations. Pychronia Tools machinery therefore only makes sense for the very high level of integration it offers, with its automated consistency checks and end-to-end generation scripts.

Interested in this scriptwriting support system? Feel free to contact me using the information on the Chrysalis Website.

Appendix : Details for computer literate people

My machinery is based on the Python language and its document manipulation/creation ecosystem.

As for the “plain text” format of the scenario, many “markup languages” can be used for this purpose: restructuredtext, markdown, textile, latex, or even html… I chose restructuredtext for its clarity, versatility, and its advanced integration with the Python language. To edit these text files, of course, Pycharm, Notepad++, Geany, or a simple notebook can do the trick.

For the version manager (or “VCS”), I chose Git and its excellent TortoiseGit graphical interface (available under Windows only unfortunately). Mercurial, Bazaar, DARCS, or others are just as relevant. At a minimum, we can use the versioned file backup proposed by Dropbox et al., even if it offers only a few features to visualize the differences between several writing steps…

Visualization, via GIT, of the sets of modifications made to the scenario:

Regarding the template engine used to process text files (and for specific tags), finally, I have integrated the powerful Jinja2, which allows you to create variables and macros directly in the templates. The data handled by this engine comes, in my case, from a tree structure of Yaml files, but many other sources (python file, csv, xml…) are very easily integrated.

If you are a JavaScript coder who is still late to making up a definitive list of resolutions for 2019, let me give you a hand: Start figuring out how to get into Augmented Reality (AR).

The Augmented/Mixed/Virtual Reality (AR/MR/VR) combo has enjoyed frenetic growth since 2016, coming from a marginal market value of bit more than $6 Billion to one that might reach the $210 Billion in sales (including hardware) by 2022. Of all, Augmented Reality is the one experiencing steady growth.

At first, a JavaScript (web) developer wanting to get into the AR boat might feel discouraged when finding the usual required skills; and then there is who ask Machine Learning or Internet of Things. However if you are mainly a JavaScript developer, consider yourself blessed: the language is recurrently mentioned as one you should know to enter this sector. The reason? Right now a lot of AR development goes on the web. And this is where JavaScript reigns.

_Mobile and Web were the last getting AR capabilities, and are still developing (extract from a [buildAR presentation](https://www.slideshare.net/robman/web-standards-adoption-in-the-ar-market/6" rel="noopener" target="blank" title="))

Augmented Jobs for the JavaScript-fan — Really?

Maybe not too fast. There are many examples where AR/MR/VR shines on its own, specially in niche markets, but the industry hasn’t completely figured out the full value of the technology for the general consumer. Once that it solved, the industry would be certainly making more AR/MR/VR products, which would translate into more jobs.

For some analysts AR is expected to have the most pervasive impact, in part because it doesn't require specific devices and conditions to be implemented as VR does.

AR has utility for almost everything, overlaying useful and relevant information on the world around you. AR can be pervasive in a way that VR cannot.

• David McQueen -Strategy Analytics- from an interview on Twice

It rests on the industry to find how to make AR a more every day life tech. According to some companies, particularly within the mobile phone realm, exploiting better the AR potential reduces to a well-known rule: SIMPLICITY.

While Unity has become the default path for building AR apps, an increasing number need only a sprinkling of AR.

• from an article by Benjamin Devine, Homestory AR

In many cases, resourcing onto the leading AR tools could be an overkill. Instead, a bunch of good UX-driven features over some 2D/3D assets could be more than enough to make striking products. Something a JavaScript developer regularly does.

It is then possible that any JavaScript developer will be embedding (non)standard AR/VR features as an extension of their traditional duties in the future. And if required, JavaScript is robust enough for more complex tasks. The sky is the limit.

Becoming JavaScript-Augmented

Before starting, I would suggest to have a look at the several AR platforms and standards. The same technical constraints affecting the industry are also reflected in the AR world.

For example, there are several platforms, one for each Big Tech (Google = ARCode, Apple = ARKit, MS = ChakraCore, Facebook = AR Studio, React 360, Mozilla = aframe).

After having a quick look at the options, starting fully JavaScript’ed Augmented Reality projects is relatively easy. You can begin by taking any web/app dev framework like Cordova, Ionic, React Native or Vue Native to embed the AR framework of your choice — and deploy 3D assets on top of the real world.

If what you want is to deploy on the web using mostly marker-based AR, you could use GitHub repos like AR.js (free), argon.js (free but limited) or awe.js (paid PaaS but with an old GitHub repository still available). There are a few tailored ones that are harder for the novice, many of them focused on things like facial/head recognition (such as tracking.js and headtrackr).

Or you can boost your project capabilities if you are able to port available SDKs made by AR-related companies. There are many APIs that render as AR on browser too. For example, Mapbox follows that path and it is developed on JavaScript.

I would suggest you to keep it simple but interactive.

However if your ambitions point to also mastering design and animation in JavaScript, you definitively have to learn at least one 3D Javascript package, and THREE.js the most popular. Wait, though, until you have gained a good base of JavaScript and OpenGl as well as geometry, trigonometry, linear algebra or physics. And don’t expect more help from the existing 3D JS GUIs; in particular, THREE.js has none. Challenging but exciting!

Bonus Example

I wanted to prepare a quick demo just to explore the technology, so I took a nice CodePen and modified it to fit a marker-based web-rendered AR animation ported within a clone of Stemkoski's great work with AR.js.

For you to see the example you need a mobile device with a camera and internet (phone or tablet), and either a printed copy of the marker or another device to show it on screen.

Ready? Now open this link using a browser in your mobile device:

https://evaristoc.github.io/ARexample/

Give authorization to use your camera, and point the camera to a marker like below, either printed or in another screen.

NOTE: works on Android and Chrome — it might not work for other devices and browsers ?.

_The original animation can be found [here](https://codepen.io/rainner/details/LREdXd" rel="noopener" target="blank" title=").

Happy New Year!

I hope you will find this technology as fascinating as I do. If so, don't stay alone: contact us at the freeCodeCamp forum and share your questions and ideas.

And if you liked this article, don't forget to give it a ? and to share it on social media.

Thanks for reading, enjoy AR and Happy Coding!!

A few days ago, I wrote this article for freeCodeCamp which has since gone on to be read more times than I could have ever imagined. The response from the community has been overwhelming, humbling, and inspiring.

With the intent of spreading that article as far and wide as I could, I posted it to r/learnprogramming thinking that some of the aspiring programmers there might find it helpful. The post can be found here.

I thought that post might get banned for self-promotion, but what followed instead was a flood of tool recommendations. Since the last article proved useful to at least a few of you, I went ahead and organized the suggestions from that thread for those that are operating-system agnostic, Mac specific, and Windows specific. Now, before the Linux folks get all up in arms, there are versions of most of these available for you, too. We can all win.

I considered including the usernames of the Redditors that made the recommendations, but since I am not sure if they appreciate being called out, I will assume all responsibility for any tool you find sub-par.

Feel free to jump around.

Operating System Agnostic

Photo courtesy of Pexels.com

• Postman — At its most basic, this is an application that allows you to test the different endpoints of an API. You know, that good CRUD stuff. Once you dive deeper into it, you will find it is also incredibly useful for writing up test suites and much more.
• Insomnia — This is an open-source alternative to Postman. It appears to have a lot of the same functionality with a slightly lower price tag for their premium packages. Between this and Postman, the choice seems to mostly be personal preference for the UX. Don’t stay up all night making a decision between the two (I had to, forgive me).
• Restlet — If you don’t want to download either of the above, this is an API testing client that is available as a Chrome extension. It even allows the importing of Postman tests and several other formats.
• Charles — This is a sweet web debugging proxy that allows you to view all of the information you could possibly want to see about the requests being made between your machine and the internet. It basically turns you into a hacker, allowing you to check your website for security vulnerabilities and such.
• Fiddler — Basically the same tool as Charles. Personal preference seems to be the main deciding factor between the two, though both can greatly increase your debugging/troubleshooting capabilities.
• Flux — If you’re reading this, chances are you probably spend a ton of time on your computer. Flux is a program that turns the blue light down on your screen as the sun sets, with the hopes of mimicking the day/night cycle and helping you sleep better. Not as good as getting time away from the screen, certainly, but it’s better than nothing!

Mac Specific

Photo courtesy of Pexels.com

• Paw — A competitor to both Postman and Insomnia above, Paw is a similar piece of software that feels more like a native Mac application than the others. If you love that Mac feel, this might be the API tool for you.
• Dash — With over 200 documentation sets to search through, Dash is an offline goldmine of documentation for the developer who loves to read documentation so much that they do it even when the internet is out.
• Bear — Not directly coding related, but a neat piece of software for taking notes if that is something you do in your day-to-day. I can’t help but wish that this would be integrated with Paw somehow, for pun-related purposes.
• Magnet — Okay. Fair warning: This one costs money. If you can afford to dish up the 99 cents, however, I think it is worth it for those tough times when you don’t have access to a second monitor. This tool allows you to easily snap different windows to separate areas of your screen so you can run multiple terminals at once and tell your mom you are a hacker. (They are not paying me for this recommendation, sadly. However, if you are the creator of Magnet and you wish to pay me, please get in touch).

Windows Specific

Photo courtesy of Pexels.com

• ConEmu — If you are on Windows and you would like to have multiple terminal tabs, this is an easy, free solution to your tab-related woes. Never again will you have to flip back and forth through entire windows just to look at your different error messages.
• Ditto — You know when you’re trying to copy four separate answers from Stack Overflow and you have to keep switching back and forth from your browser to your IDE? Worry no more. With the Ditto clipboard manager, you can copy-paste your way to victory.
• TouchCursor — Programmers of all sorts are notorious for wanting to use the mouse as little as possible. If you find yourself in that camp, then this will be right up your alley.
• Cmder — I am going to forego my description of this product, as I feel the description on their website is much better — “Cmder is a software package created out of pure frustration over the absence of nice console emulators on Windows. It is based on amazing software, and spiced up with the Monokai color scheme and a custom prompt layout, looking sexy from the start.” I don’t know about you, but I am a fan of any software that describes itself as “sexy”.
• Directory Opus — This is basically what Windows Explorer should have been from the start. Opus allows you to dig through your poorly-organized documents almost as if they were well-organized.
• Zeal — With over 200 documentation sets to search through, Zeal is an offline goldmine of documentation for the developer who loves to read documentation so much that they do it even when the internet is out. (Copy-pasted from Dash in the Mac section).

Honorable Mention

If you are feeling particularly sadistic, throw out your current IDE and learn to use Vim, Grep, Zsh, and/or ack. From what I hear, these can super-charge your productivity once you get over the formidable learning curve. However, I don’t hate myself enough to find out.

In Conclusion

As I’ve mentioned before, there is almost always more than one way to do any given thing. And it is more important to learn to use the tools you already have, rather than to go installing things willy-nilly with the hopes that it will somehow make you a Leet coder.

For example, if you go to the post I made it on Reddit you’ll see there are 26 comments about tools to pick colors alone. I almost included them here but having a whole subsection for color-pickers seemed excessive.

That being said, I’m a sucker for some sweet tools, so if you have any that you can’t live without please leave them in the comments below!

If you liked this article please give it some claps and check out:

• How I cut my javascript bundle in half with three lines of code
• How I decreased the size of my Heroku app by 75%
• Why I left a six-figure job in the search for something better

Also, give me a follow on Twitter.