DEV Community: Ariful Alam

Understanding Model Context Protocol (MCP): Bridging LLMs and the Real World

Ariful Alam — Thu, 19 Feb 2026 06:21:30 +0000

Large language models are increasingly embedded into developer tools, products, and workflows—but most of them still operate in isolation. They can reason, explain, and suggest, yet they remain disconnected from the systems where real work happens. Model Context Protocol (MCP) addresses this gap by defining a standard way for AI models to interact with external tools, data sources, and services in a secure and structured manner.

Instead of treating AI as a passive interface that only generates text, MCP enables it to participate directly in real-world workflows. It establishes a common contract between models and systems, allowing developers to expose capabilities once and reuse them across different AI clients.

The Problem: LLMs Are Brilliant But Limited

Large language models have revolutionized how we interact with technology, but they face two fundamental limitations that prevent them from being truly useful in real-world scenarios:

1. Frozen Knowledge

LLMs' knowledge is fixed at training time. They cannot access:

Real-time information: Current stock prices, weather conditions, or breaking news
Private data: Your company's databases, personal files, or internal documentation
Recent developments: New libraries, updated APIs, or latest best practices

2. No Action Capability

LLMs can think and reason, but they cannot act:

Cannot execute code or run commands on your behalf
Cannot modify data in files, databases, or external systems
Cannot interact with APIs to perform real actions

Before MCP, every AI tool needed custom integrations for each external system it wanted to access. This created a fragmented ecosystem where developers had to build bespoke APIs for every combination of AI platform and data source.

MCP solves this by introducing a single, secure, and open protocol. Instead of building N×M custom integrations (N AI platforms × M data sources), you build M MCP servers that work with any MCP-compatible AI platform.

What is Model Context Protocol?

Model Context Protocol is an open standard that enables LLMs to securely connect to external data sources and tools through a unified interface. Think of it as USB for AI—a universal connector that lets any AI model plug into any tool or data source.

Core Capabilities

Standardized Interface
A unified way to expose tools and resources that works across all AI platforms.

Secure by Design
Explicit permissions with human oversight for every action. The LLM cannot do anything without proper authorization.

Cross-Platform Compatible
Write an MCP server once, use it with Claude Desktop, Cursor, custom AI applications, or any other MCP-compatible client.

A Real Example: The Database Query Problem

Let's look at a concrete example that demonstrates the difference MCP makes.

Scenario: You ask your AI assistant, "How many tables do I have in my Postgres database?"

Before MCP

Without MCP, the AI cannot access your database directly. Instead, it provides instructions:

Suggests using psql command-line tool
Provides SQL query examples you need to run manually
Explains different approaches to check table counts

Result: You get helpful advice, but you still have to do the work yourself.

After MCP

With an MCP server connected to your Postgres database, the AI:

Directly queries your database using the MCP tools
Retrieves the actual table count and names
Returns the real answer: "You have 34 tables in your Postgres database"
Lists all table names: admin_calendar_notifications, approval_requests, articles, etc.

Result: You get the actual answer immediately, without lifting a finger.

How MCP Works: The Architecture

MCP operates through a five-step workflow:

1. Request and Tool Discovery

The LLM identifies that it needs external tools to answer your request. It queries available MCP servers to discover what tools are accessible.

2. Tool Invocation

The LLM sends structured requests to invoke specific tools (e.g., "query database" or "read file").

3. External Action and Data Return

The MCP server executes the action on the external system and returns the data to the LLM.

4. Second Action and Response Generation

If needed, the LLM can invoke additional tools or use the data to generate a comprehensive response.

5. Final Confirmation

The LLM presents the result to the user, often with a confirmation step for sensitive actions.

MCP Architecture Components

MCP Host

The environment where the LLM operates:

Conversational assistants (Claude Desktop, ChatGPT)
IDEs (Cursor, VS Code)
Custom agent runtimes

MCP Client

Lives inside the host and acts as a bridge:

Discovers available MCP servers and their capabilities
Translates LLM requests into MCP protocol messages
Handles responses and passes data back to the LLM

MCP Server

Connects to external systems and exposes capabilities:

Database connections (Postgres, MySQL, MongoDB)
File system access
API integrations (GitHub, Slack, Linear)
Browser automation (Chrome DevTools)
Custom business logic

Transport Layer

Communication happens via JSON-RPC 2.0 over two transport mechanisms:

stdio transport: Local communication via standard input/output (for local tools)
HTTP with Server-Sent Events: Remote communication with streaming support (for cloud services)

MCP Primitives: The Building Blocks

MCP servers expose three types of primitives to LLMs:

Tools

Functions with side effects that the LLM can invoke to perform actions:

server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools: [{
    name: "query_database",
    description: "Execute a SQL query on the Postgres database",
    inputSchema: {
      type: "object",
      properties: {
        query: { type: "string", description: "SQL query to execute" }
      },
      required: ["query"]
    }
  }]
}));

Examples: Query database, send email, create file, call API

Resources

Read-only data sources that provide context without side effects:

server.setRequestHandler(ListResourcesRequestSchema, async () => ({
  resources: [{
    uri: "postgres://tables",
    name: "Database Tables",
    description: "List of all tables in the database",
    mimeType: "application/json"
  }]
}));

Examples: Configuration files, documentation, database schemas, API responses

Prompts

Reusable templates that guide the LLM's behavior for specific tasks:

server.setRequestHandler(ListPromptsRequestSchema, async () => ({
  prompts: [{
    name: "analyze_database",
    description: "Analyze database structure and suggest optimizations",
    arguments: [{
      name: "table_name",
      description: "Name of the table to analyze",
      required: false
    }]
  }]
}));

Examples: "Review this PR", "Analyze performance", "Generate test cases"

Building Your First MCP Server

Here's a simple example of an MCP server that provides weather information:

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";

const server = new Server({
  name: "weather-server",
  version: "1.0.0"
}, {
  capabilities: {
    tools: {}
  }
});

// Define a tool
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  if (request.params.name === "get_weather") {
    const location = request.params.arguments.location;

    // Fetch actual weather data (simplified)
    const weather = await fetchWeatherData(location);

    return {
      content: [{
        type: "text",
        text: JSON.stringify(weather)
      }]
    };
  }

  throw new Error("Unknown tool");
});

// Start the server
const transport = new StdioServerTransport();
await server.connect(transport);

This server can now be used by any MCP client to fetch weather information!

MCP Apps: Beyond Text Interactions

While MCP servers enable LLMs to access tools and data, MCP Apps take this further by adding custom user interfaces. They provide rich, visual interactions beyond simple text chat.

Example: Wordly MCP App

Wordly MCP App demonstrates how MCP Apps enhance user experience. Instead of getting grammar corrections as plain text, you get:

Interactive corrections: Visual highlighting of grammar issues
Multiple formality levels: Choose between Standard, Formal, Very Formal, or Casual
Real-time suggestions: See corrections as you type
Rich formatting: Better readability with styled components

Key Benefits of MCP Apps:

Custom UI components tailored to specific use cases
Interactive data visualizations (charts, tables, graphs)
Better user experience for complex workflows
Seamless integration with MCP tools

MCP vs. Other Approaches

MCP vs. RAG (Retrieval-Augmented Generation)

RAG is designed for:

Grounding responses in specific knowledge bases
Semantic search across documents
Providing relevant context from text corpora

MCP is designed for:

Executing actions with side effects
Real-time data access and manipulation
Interacting with structured systems (databases, APIs)
Tool invocation and workflow orchestration

Think of it this way: RAG is like giving the AI a library card to read books. MCP is like giving the AI hands to build things.

MCP vs. Agent Skills

Many AI platforms have proprietary "skills" or "plugins" systems. MCP standardizes this:

Traditional Agent Skills:

Platform-specific implementations
Limited portability between systems
Proprietary APIs and formats

MCP:

Open standard that works everywhere
Write once, use with any MCP client
Community-driven ecosystem

The Future of MCP

Model Context Protocol represents a paradigm shift in how AI systems interact with the world. As the ecosystem matures, we can expect:

Standardization: MCP becoming the universal protocol for AI-tool interactions, similar to how HTTP standardized web communication.

Ecosystem Growth: Thousands of MCP servers providing access to every tool and data source imaginable.

Enterprise Adoption: Organizations building internal MCP servers to safely expose their systems to AI.

Enhanced Capabilities: Advanced features like streaming responses, multi-modal tools, and complex workflow orchestration.

Explore MCP in Action

Ready to dive deeper? Check out these resources:

Reminder MCP - See a practical MCP server implementation for task management
Wordly MCP App - Explore an MCP App with interactive UI for grammar checking
Official MCP Documentation - Start building your first MCP server
MCP GitHub Organization - Browse the source code and community servers

The future of AI is not just about smarter models—it's about models that can actually get things done. MCP is making that future a reality.

Git Worktrees: The Power Behind Cursor’s Parallel Agents

Ariful Alam — Fri, 07 Nov 2025 13:11:32 +0000

Cursor just shipped Parallel Agents, a way to run multiple agents on different tasks at the same time. Under the hood, this relies on Git worktrees so that each agent can safely operate on its own branch and working directory without stepping on the others. If you’re new to worktrees, this guide is for you.

What is a Git worktree?

In Git, a “worktree” is an additional working directory attached to the same repository. Each worktree:

Has its own working directory, index, and HEAD pointing at a branch or commit
Shares the repository’s object database (no duplicate history)
Can be used simultaneously with other worktrees

This means you can open repo/ for main, and repo-feature/ for feature/login, both fully editable, both real directories, both backed by the same .git object store.

Why not just clone twice?

Clones duplicate the entire repository data and configuration
Worktrees are much faster to create and take far less disk space
Worktrees keep remotes, hooks, and config shared, reducing drift

How worktrees are structured (under the hood)

When you add a worktree, Git creates metadata in the primary repo’s .git/worktrees/<name> and a small .git file inside the new working directory that points back to the main repo. Objects and refs live centrally; each worktree has its own HEAD and index state.

Key consequence: operations that depend on repository objects (fetch, gc, hooks, config) are shared; operations that depend on the working directory (add, commit, checkout) are isolated per worktree.

Core commands (cheat sheet)

# List active worktrees
git worktree list

# Add a new worktree at ./../feature-abc, checking out branch feature/abc
git worktree add ../feature-abc feature/abc

# Create a new branch and worktree in one go
git worktree add ../hotfix-1.2 -b hotfix/1.2

# Add a detached worktree at a specific commit (read-only is typical)
git worktree add --detach ../investigate abc1234

# Prune (remove metadata for missing worktree directories)
git worktree prune

# Remove a worktree safely (directory must be clean or use --force)
git worktree remove ../feature-abc
git worktree remove --force ../feature-abc

Pro tips:

Use -b <new-branch> to create a branch when adding the worktree.
Keep directory names short and descriptive, e.g. ../feat-reporting or ../bug-2174.

How Cursor Parallel Agents use worktrees

Cursor’s Parallel Agents run multiple agents side-by-side. Each agent operates in an isolated Git worktree and typically on its own branch. This provides:

Isolation: File edits and indexes are separate, so agents don’t clobber each other.
Speed: Creating worktrees is fast and space-efficient compared to full clones.
Traceability: Each agent’s branch records its history and diffs cleanly.

Read the product documentation for configuration details and tips: Cursor Worktrees documentation.

Example: parallel feature + hotfix

# You’re on main in the primary directory
git pull --ff-only

# Start a feature in its own worktree
git worktree add ../feat-reporting -b feature/reporting

# Meanwhile, a production bug appears; cut a hotfix worktree
git worktree add ../hotfix-2174 -b hotfix/2174 origin/release/1.2

# In ../hotfix-2174, implement the fix, test, and ship
git commit -am "Fix NPE in invoice total"
git push -u origin hotfix/2174

# Back in ../feat-reporting, continue development uninterrupted

Cleanup checklist

Merge or push branches you want to keep.
git worktree remove <path> for each finished worktree.
git worktree prune to clear any stale metadata.
Optionally delete remote branches after merging.

When to choose worktrees vs. alternatives

Worktrees: Best for fast, space‑efficient, parallel workflows in the same repo.
Separate clones: Useful when you need different remotes, radically different config, or to isolate heavyweight tooling state.
Stashing / single checkout: Fine for quick context switches, but becomes fragile for serious parallelism.

If you’re trying out Cursor’s Parallel Agents, learning Git worktrees will pay immediate dividends. They’re simple, fast, and map perfectly to how you want to parallelize real‑world work.

Gitflow: Streamlined Branching and Release Management for Teams

Ariful Alam — Mon, 25 Aug 2025 06:44:15 +0000

Modern software teams rarely push code directly to the main branch. As projects grow, a clear branching strategy becomes essential to manage features, fixes, and releases while keeping production stable. Branching strategies minimize conflicts, streamline collaboration, and provide a structured workflow for teams of any size.

Gitflow, proposed by Vincent Driessen (A successful Git branching model), is one of the most widely adopted models. It defines a hierarchy of branches and merge policies that ensure smooth development, stable production releases, and a way to address urgent issues without disrupting ongoing work.

Core Branches in Gitflow

Gitflow defines five main branch types, each serving a distinct purpose:

main (or master)
- Represents production-ready code.
- Each commit here corresponds to a stable release.
- All merges into main should go through pull requests.
develop
- Integration branch for ongoing development.
- All completed features are merged here via PRs.
feature/*
- For new features or tasks.
- Branch from develop and merge back via PRs.
- Example: feature/user-authentication.
release/*
- Prepares a new version release.
- Only bug fixes, documentation updates, or minor tweaks are allowed.
- Merge into both main (production) and develop via PRs.
- Example: release/1.2.0.
hotfix/*
- For urgent production fixes.
- Branch from main and merge back into both main and develop using PRs.
- Example: hotfix/payment-bug.

Gitflow in Action

1. Creating a Feature Branch

Imagine implementing user authentication:

# Start from develop
git checkout develop

# Create feature branch
git checkout -b feature/user-authentication

Work on your feature and commit frequently. Once ready, push to the remote and open a pull request into develop. After code review:

# Merge PR

# Delete feature branch after merge
git branch -d feature/user-authentication
git push origin --delete feature/user-authentication

✅ Feature integrated into develop safely.

2. Preparing a Release

When development is stable and ready for v1.2.0:

# Branch from develop
git checkout develop
git checkout -b release/1.2.0
git push -u origin release/1.2.0

Perform final bug fixes, update version numbers, and tweak docs.
Open a PR to merge release/1.2.0 into main.
Tag the release after merge:

git checkout main
git tag -a v1.2.0 -m "Release 1.2.0"
git push origin v1.2.0

Merge release back into develop via PR to sync changes.
Delete the release branch after merging.

3. Handling Hotfixes

Suppose a critical production bug is discovered:

# Branch from main
git checkout main
git checkout -b hotfix/payment-bug
git push -u origin hotfix/payment-bug

Fix the issue and commit.
Open a PR to merge hotfix/payment-bug into main.
Tag the hotfix release:

git checkout main
git tag -a v1.2.1 -m "Hotfix: Payment bug fixed"
git push origin v1.2.1

Open a PR to merge hotfix into develop.
Delete the hotfix branch after merging.

Visualizing Gitflow

Feature branches → merge into develop via PRs.
Release branches → merge into main via PRs, then back to develop.
Hotfix branches → merge into both main and develop via PRs.

Best Practices

Use descriptive names:
- feature/<task-name>
- release/<version>
- hotfix/<issue>
Always use pull requests for merges.
Delete branches after merging.
Tag releases for traceability.
Automate release process using CI/CD pipelines.

Conclusion

Gitflow provides a structured, safe, and collaborative workflow for modern development teams. By isolating features, releases, and hotfixes, it ensures code stability while allowing parallel development. For teams that need speed over structure, a simpler workflow may suffice, but for enterprise-grade software, Gitflow remains a proven approach.

Prevent API Overload: A Comprehensive Guide to Rate Limiting with Bottleneck

Ariful Alam — Mon, 13 May 2024 17:01:28 +0000

In the realm of modern web development, APIs have become the lifeblood of our applications. They enable us to tap into a vast array of external services and data sources, empowering us to build rich and powerful experiences. However, with great power comes great responsibility – and in this case, that responsibility lies in respecting the rate limits imposed by API providers.

Rate limits are necessary measures put in place to prevent abuse and maintain the performance of APIs. Exceeding these limits can lead to rate limit errors, which can bring your application to a screeching halt, disrupting functionality and leaving your users high and dry. To address this challenge, there is a powerful solution at our disposal: the Bottleneck package.

Introducing Bottleneck: Your Rate Limiting Gatekeeper

The Bottleneck package is a rate limiter that enforces a maximum number of operations within a given time period. It acts as a gatekeeper, ensuring that your application does not overwhelm the target API with too many requests, thereby preventing rate limit errors and maintaining a smooth and reliable experience for your users.

Installing Bottleneck is as simple as running npm install bottleneck in your project directory. Once installed, you can create a new limiter instance like so:

const Bottleneck = require("bottleneck");

// Create a new limiter with a maximum of 1 concurrent requests
// and a limit of 10 requests per minute
const limiter = new Bottleneck({
  maxConcurrent: 1,
  minTime: 6000 // 6000ms = 1 minute / 10 requests
});

In this example, we've created a limiter that allows a maximum of 1 concurrent requests and enforces a limit of 10 requests per minute. The maxConcurrent option specifies the maximum number of concurrent requests allowed, while the minTime option defines the minimum time (in milliseconds) between requests.

Scheduling API Requests with Bottleneck

With your limiter configured, you can start scheduling API requests using the schedule method. Here's an example:

async function makeRequest() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

// Schedule 20 requests
for (let i = 0; i < 20; i++) {
  limiter.schedule(makeRequest);
}

In this case, we've defined a makeRequest function that simulates an API request. We then schedule 20 requests using the limiter.schedule method. Bottleneck will automatically queue and execute these requests according to the specified rate limit, ensuring that we stay within the boundaries set by the API provider.

Customizing Rate Limiting Behavior

One of the significant advantages of the Bottleneck package is its flexibility. It provides various options to customize the rate limiting behavior according to your application's needs. For instance, you can configure different rate limits based on priorities, handle errors gracefully, and even implement dynamic rate limiting strategies.

Here's an example of how you can handle errors and configure different rate limits based on priorities:

const Bottleneck = require("bottleneck");

// Create a new limiter with various options
const limiter = new Bottleneck({
  maxConcurrent: 5,
  minTime: 6000,
  reservoir: 10, // Initial reservoir size
  reservoirRefreshAmount: 10, // Number of tokens to add to the reservoir
  reservoirRefreshInterval: 60 * 1000 // Interval to refill the reservoir (1 minute)
});

// Configure error handling
limiter.on("failed", async (error, jobInfo) => {
  // Handle failed requests
  console.error(`Request failed: ${error.message}`);
});

// Define priority levels
const priorities = {
  high: 5,
  normal: 3,
  low: 1
};

// Schedule a high-priority request
limiter.schedule({ priority: priorities.high }, makeRequest);

// Schedule a normal-priority request
limiter.schedule({ priority: priorities.normal }, makeRequest);

In this example, we've configured the limiter with an initial reservoir size of 10 requests, refilling 10 tokens every minute. We've also set up error handling by listening to the failed event, which allows us to handle failed requests gracefully.

Additionally, we've defined priority levels (high, normal, and low) and scheduled requests with different priorities using the limiter.schedule method. The Bottleneck package will prioritize higher-priority requests over lower-priority ones, ensuring that critical requests are processed first.

Best Practices and Final Thoughts

When working with the Bottleneck package, it's essential to follow best practices to ensure optimal performance and reliability. Here are a few tips:

Monitor your rate limit usage and adjust your limiter settings accordingly to avoid hitting rate limits.
Implement retry strategies for failed requests to improve resilience.
Cache API responses when possible to reduce the number of requests made.
Consider implementing circuit breakers to prevent cascading failures.

By leveraging the power of the Bottleneck package, you can effectively manage API rate limits, prevent rate limit errors, and maintain a reliable and performant application. Its flexibility and extensive configuration options make it a valuable tool in any Node.js developer's arsenal.

Git Rebase vs Git Merge: A Comprehensive Guide

Ariful Alam — Thu, 04 Jan 2024 16:22:42 +0000

Git, a distributed version control system, offers a variety of ways developers can integrate changes from one branch into another: git merge and git rebase being two of the most commonly used strategies. Understanding the differences, benefits, and best practices of both can greatly enhance your Git workflow efficiency.

Understanding Git Merge

Think of git merge as a handshake between two branches. The git merge command integrates changes from one branch into another. It takes the contents of a source branch and integrates it with the target branch. If the histories of both branches have diverged, Git creates a new merge commit to combine the histories, preserving the history as it happened.

Consider two branches, feature and master:

A---B---C feature
 /
D---E---F---G master

Merging feature into master would result in:

A---B---C feature
 /         \
D---E---F---G---H master

The master branch now includes a new commit H that represents the merge commit, preserving the history of both branches as they happened.

Understanding Git Rebase

git rebase is a command that allows you to integrate changes from one branch into another, similar to git merge. But it works in a different way. Let's consider git rebase as a painting process. Imagine the master branch as a wall and the feature branch as an artist. Initially, the master branch (the wall) is painted first. The feature branch (the artist) then comes in and adds their work on top of the master branch's work.

However, if the original painting (the master branch) is updated, the artist (the feature branch) would temporarily remove their painting, allow the wall to be updated, and then add their painting back on top of the updated wall. This is essentially what happens in git rebase.

git rebase takes the changes made in the feature branch and reapplies them onto the master branch, effectively creating a new base for the feature branch and rewriting history. This results in a more linear and clean commit history.

Consider again two branches, feature and master:

A---B---C feature
 /
D---E---F---G master

Rebasing feature onto master would give:

D---E---F---G master
             \
              A'---B'---C' feature

Commits A, B, and C are reapplied onto master, creating new commits A', B', and C'.

Comparing Git Merge and Git Rebase

Benefits and Use Cases

Preserving History: Git merge preserves history as it happened, including the time and order of all commits, while Git rebase can rewrite and clean up history, making it more linear and comprehensible. This can be beneficial when you want to understand the development process.
Conflict Resolution: When merging, conflicts need to be resolved once during the merge commit. However, during a rebase, you may have to resolve conflicts for each commit being reapplied. This can become tedious if many commits have similar conflicts.

Best Practices

Rebase for Local Cleanup: Rebase can be used to clean up local, in-progress features. By periodically performing an interactive rebase, you can ensure each commit in your feature is focused and meaningful.
Merge for Public Commits: Once you have shared your branch with others, it is best practice to use merge. Rebase could potentially rewrite the commit history and create confusion for other developers.
Avoid Rebasing Public Branches: Rebasing a public branch that others have based work on is a bad practice as it alters the commit history. This can cause confusion and further conflicts for other developers.

Conclusion

Both git merge and git rebase are powerful tools for integrating changes from one branch into another. They serve different purposes and are used in different scenarios. It's essential to understand the implications of each and choose the right tool for the right situation.

git merge is great for combining code from two different branches and preserving the exact historical timeline of commits. On the other hand, git rebase is excellent for making your feature branch up to date with the latest code from the master branch, keeping the history of your feature branch clean and making it appear as if the work happened sequentially.

In both cases, conflicts can arise and need to be resolved manually. But remember, once you've shared your branch with others, it's a best practice to use git merge to avoid rewriting public commit history.

LocalStack - Mock AWS in local development

Ariful Alam — Wed, 11 Oct 2023 04:42:48 +0000

Most of us are familiar with Amazon Web Services (AWS) and have probably used their cloud computing services at some point in our careers. AWS is a go-to solution for many developers when it comes to building and deploying applications on the cloud.

However, working with AWS can come with its challenges, particularly when it comes to testing and development. While AWS offers a wide range of powerful services and tools, navigating through the vast array of options and configuring them correctly can be complex and costly. As AWS provides a pay-as-you-go pricing model, the costs can quickly escalate if resources are not managed effectively while developing and testing. Herein lies the role of LocalStack.

What is LocalStack?

LocalStack is an open-source project that provides a fully functional local AWS cloud stack. It allows developers to test and develop their applications offline without needing an internet connection or any cloud resources. LocalStack allows developers to emulate the behavior of AWS services such as S3, Lambda, DynamoDB, and more, all within a local environment, eliminating the need for an AWS account.

Features and Capabilities

Simulation of entire AWS Services: LocalStack enables developers to simulate the entire AWS ecosystem within its local environment.
Offline Development: With LocalStack, developers can work offline without relying on an internet connection or AWS account.
Cost Savings: By simulating AWS services locally, LocalStack eliminates the costs associated with running resources in the cloud.
Easy Setup and Configuration: LocalStack simplifies the setup process with a user-friendly command-line interface (CLI) and APIs.
Realistic Testing Scenarios: By emulating the actual behavior of AWS services, LocalStack allows developers to create realistic testing scenarios. This early identification and resolution of potential issues lead to the development of more robust and reliable applications.

Installation & Setup

There are several ways to install LocalStack on our local machine.

We will use the Docker-Compose method in this article. Docker and docker-compose should be installed on our machine as a prerequisite.

Create a docker-compose.yml file and paste the following contents.

    version: "3.8"

    services:
      localstack:
        image: localstack/localstack
        ports:
          - "127.0.0.1:4566:4566"
          - "127.0.0.1:4510-4559:4510-4559"
        environment:
          - DEBUG=${DEBUG-}
          - DOCKER_HOST=unix:///var/run/docker.sock
        volumes:
          - "${LOCALSTACK_VOLUME_DIR:-./volume}:/var/lib/localstack"
          - "/var/run/docker.sock:/var/run/docker.sock"

Start the container by running docker-compose up.
LocalStack should be started at http://localhost:4566.
To check it’s running properly, check the health by visiting https://localhost:4566/health.

Limitation

Before continuing the article, we should also know about the limitations of LocalStack. One of the major limitations of LocalStack is that the data are not persistent in the free/community version. Meaning, that every time we stop LocalStack, the data including the configuration we ran via command, the buckets, and the databases, all will be removed and it will start fresh on the next start.

Usage

We are going to create a Lambda function and configure a trigger for Amazon S3 to demonstrate how LocalStack can be used for AWS mocking. When a new image is uploaded to the S3 bucket, the Lambda function should create a thumbnail of that image in the same bucket.

Install AWS CLI

As we are mocking AWS, the official AWS CLI should be installed on our machine. If it’s not installed, follow this guide to install it first. After installing it, we will need to configure it as a first-time user by running aws configure. Set any value as Access Key ID and Secret Access Key and set a Default Region (e.g. ap-northeast-2). If you use your original Access key and secret, it’s okay too, as LocalStack will ignore it ultimately.

How will the AWS CLI communicate with LocalStack?

By default, when we run a command in AWS CLI, it will try to communicate with AWS API. But here, we want to communicate with LocalStack instead AWS API.

When running any AWS command, if we specify the endpoint, it will send the requests to that endpoint instead of the default endpoint.

For example, let’s run a command aws s3api list-buckets --endpoint-url=http://localhost:4566.

It displays the bucket list from LocalStack and does not throw any error even though we used dummy data as the AWS configuration.

How will the AWS SDK communicate with LocalStack?

We can also use LocalStack in our AWS SDKs. We just have to point to the endpoint while initilizting the SDK. Here’s an example of JavaScript aws-sdk:

const AWS = require('aws-sdk');

const s3 = new AWS.S3({
  endpoint: 'http://localhost:4566', // Only needed for localstack
  s3ForcePathStyle: true, // Only needed for localstack
});

Then we can use the s3 object to interact with the S3 service locally through LocalStack.

Create the Lambda function

Open a new terminal and create a directory by running mkdir lambda-src.
Open the directory by running cd lambda-src.

Create a new file package.json and paste the following code:

{
  "main": "index.js",
  "dependencies": {
    "aws-sdk": "^2.1376.0",
    "sharp": "^0.32.1"
  }
}

Run npm install to install the dependencies.

Create a new file index.js and paste the following code:

const AWS = require('aws-sdk');
const sharp = require('sharp');

const WIDTH = 64;

const s3 = new AWS.S3({
  endpoint: `http://${process.env.LOCALSTACK_HOSTNAME}:${process.env.EDGE_PORT}`, // Only needed for localstack
  s3ForcePathStyle: true, // Only needed for localstack
});

exports.handler = async (event) => {
  try {
    const srcBucket = event.Records[0].s3.bucket.name;
    const srcKey = decodeURIComponent(
      event.Records[0].s3.object.key.replace(/\+/g, ' ')
    );

    if (srcKey.includes(`${WIDTH}x${WIDTH}`)) {
      console.info('Skipping processed image.');
      return;
    }

    const destinationKey = srcKey.replace(
      /(\.[^.]*)?$/,
      `-${WIDTH}x${WIDTH}$1`
    ); // output will be name-200x200.png

    const typeMatch = srcKey.match(/\.([^.]*)$/);
    if (!typeMatch) {
      console.error('Could not determine the image type.');
      return;
    }

    const imageType = typeMatch[1].toLowerCase();
    if (imageType != 'jpg' && imageType != 'png' && imageType != 'jpeg') {
      console.error(`Unsupported image type: ${imageType}`);
      return;
    }

    const params = {
      Bucket: srcBucket,
      Key: srcKey,
    };

    const originalImage = await s3.getObject(params).promise();

    const buffer = await sharp(originalImage.Body).resize(WIDTH).toBuffer();

    const destinationParams = {
      Bucket: srcBucket,
      Key: destinationKey,
      Body: buffer,
      ContentType: 'image',
    };

    await s3.putObject(destinationParams).promise();

    console.log('Successfully resized ' + srcBucket + '/' + srcKey +
        ' and uploaded to ' + srcBucket + '/' + destinationKey
    );
  } catch (error) {
    console.error(error);
    return;
  }
};

Then zip the directory. If you have zip installed, you can run:
```
zip -r function.zip .
```
By running cd .. return to the root directory.

Create the Lambda function by running:

aws --endpoint-url=http://localhost:4566 \
lambda create-function --function-name CreateThumbnail \
--zip-file fileb://lambda-src/function.zip --handler index.handler --runtime nodejs16.x \
--role arn:aws:iam::000000000000:role/lambda-s3-role

Create a S3 bucket:

aws --endpoint-url=http://localhost:4566 s3 mb s3://avatar-bucket

Create a file notification-configuration.json:

{
  "LambdaFunctionConfigurations": [
    {
      "LambdaFunctionArn": "arn:aws:lambda:ap-northeast-2:000000000000:function:CreateThumbnail",
      "Events": ["s3:ObjectCreated:*"]
    }
  ]
}

Configure Amazon S3 to publish events:

aws --endpoint-url=http://localhost:4566 \
s3api put-bucket-notification-configuration --bucket avatar-bucket \
--notification-configuration file://notification-configuration.json

Copy an image to the directory and upload the image to the S3 bucket:

aws --endpoint-url=http://localhost:4566 \
s3api put-object --bucket avatar-bucket \
--key test-image.png --body=test-image.png

Check the log:

aws --endpoint-url=http://localhost:4566 logs tail '/aws/lambda/CreateThumbnail' --follow

To update the code:

aws --endpoint-url=http://localhost:4566 lambda update-function-code --function-name CreateThumbnail --zip-file fileb://lambda-src/function.zip

Now, a thumbnail will be created in the same bucket whenever a new image is uploaded. Once our development and testing phase is complete, proceed to replicate these actions in the production environment. Do remember to remove the endpoint and s3ForcePathStyle from the code as they are only needed to communicate with LocalStack.

References

https://localstack.cloud
https://docs.localstack.cloud
Cover image from https://localstack.cloud
AWS Services image from https://allcode.com/top-aws-services

MinIO - Mock S3 in local development

Ariful Alam — Wed, 07 Dec 2022 15:49:59 +0000

Amazon S3 or Amazon Simple Storage Service is a service offered by Amazon Web Services that provides object storage through a web service interface. Amazon S3 is undoubtedly one of the popular storage services around. Most of the developers have worked with it either in their professional projects or pet projects to store files. But to work with it, we must need an AWS account, set up the buckets, etc. If you work on a company project, you would have to wait for the credentials from the infrastructure before developing and testing the functionalities. That's where MinIO comes to help.

Minio is an open source distributed object storage server written in Go, designed for Private Cloud infrastructure providing S3 storage functionality. As it implements the same API as amazon S3, any application which can communicate with S3, also can communicate with MinIO. In simple terms, it’s like Amazon S3 but hosted locally. MinIO is a high performance object storage solution that provides an Amazon Web Services S3-compatible API and supports all core S3 features.

Why we are talking about MinIO because you can create S3 storage functionality locally, develop and test your API without needing any actual S3 bucket or account. Later at production, you can just change the credential from MinIO to S3 without changing any internal code.

S3 can serve many purposes including replacing S3 in production but we will talk about from a developer perspective where we will only use it for development, testing and mocking S3 functionalities.

Architecture

MinIO has three major components.

MinIO Server: MinIO Server serves as the root component.
MinIO Client: Referred to as mc provides a modern alternative to UNIX commands like ls, cat, cp, mirror, diff, find etc.
MinIO Client SDK: MinIO Client SDK provides an API to access any Amazon S3 compatible object storage server. These are the available SDK:
- Java
- Go
- Python
- JavaScript
- .NET
- Haskell

In this article, we will learn how to setup a MinIO server in our localhost (which ideally can be replaced with S3 server in production). But we will not use the MinIo client. Rather we will use the existing amazon S3 client SDK.

Installation & Setup

We will now start the installation of the MinIO Server. The best and fastest way to run a instance of MinIO server locally is to use Docker (read more about Docker). You can use either Docker Run or Docker Composer.

Docker Run

mkdir -p ~/minio/data

docker run \
    -p 9000:9000 \
    -p 9090:9090 \
    --name minio \
    -v ~/minio/data:/data \
    -e "MINIO_ROOT_USER=root" \
    -e "MINIO_ROOT_PASSWORD=password" \
    quay.io/minio/minio server /data --console-address ":9090"

mkdir creates a new local directory at ~/minio/data in your home directory.
docker run starts the MinIO container.
-p binds a local port to a container port.
-name creates a name for the container.
-v sets a file path as a persistent volume location for the container to use. When MinIO writes data to /data, that data mirrors to the local path ~/minio/data, allowing it to persist between container restarts. You can replace ~/minio/data with another local file location to which the user has read, write, and delete access.
-e sets the environment variables MINIO_ROOT_USER and MINIO_ROOT_PASSWORD, respectively. These set the root user credentials. Change the example values to use for your container.

Finally, access the MinIO Console by going to a browser and visiting http://127.0.0.1:9000.

Docker Compose

In the docker-compose.yml:

version: '3'
services:
  minio:
    image: 'minio/minio:latest'
    ports:
      - '${FORWARD_MINIO_PORT:-9000}:9000'
      - '${FORWARD_MINIO_CONSOLE_PORT:-9090}:9090'
    environment:
      MINIO_ROOT_USER: 'root'
      MINIO_ROOT_PASSWORD: 'password'
    volumes:
      - 'minio:/data/minio'
    command: minio server /data/minio --console-address ":9090"
volumes:
  minio:
    driver: local

You can access the MinIO Console at http://127.0.0.1:9000.

MinIO Play

You can get started exploring MinIO features using their play server at https://play.min.io. Any file uploaded to play should be considered public and non-protected.

Credentials:

Username: Q3AM3UQ867SPQQA43P2F

Password: zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG

Native Install

If you do not want use Docker, you can install MinIO server natively in your machine.

Usage

Now that you have installed MinIO server, let's use it on your project. I will be using the official S3 JavaScript SDK as example. But should be applicable for all other S3 SDKs.

We will instruct the SDK to use the endpoint of our locally hosted MinIO server. Find the the initialization point of the SDK in your code. Modify the config as follows.

For JavaScript SDK:

const config = new S3({
  endpoint: 'http://localhost:9000', // for docker, http://minio:9000
  credentials: {
    accessKeyId: 'root', // MINIO_ROOT_USER
    secretAccessKey: 'password', // MINIO_ROOT_PASSWORD
  },
  s3ForcePathStyle: true, // important
});

If you are using MinIO Play:

const config = new S3({
  endpoint: 'https://play.min.io:9000',
  credentials: {
    accessKeyId: 'Q3AM3UQ867SPQQA43P2F',
    secretAccessKey: 'zuf+tfteSlswRu7BJ86wekitnifILbZam1KYY3TG',
  },
  s3ForcePathStyle: true,
});

For Laravel:

AWS_ACCESS_KEY_ID=root
AWS_SECRET_ACCESS_KEY=password
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=http://localhost:9000 # for docker, http://minio:9000
AWS_USE_PATH_STYLE_ENDPOINT=true

As simple as that. You do not need to change anything else. With these modifications, you now have a working connection with your client and the local server that you can use to mimic S3 functionalities without needing actual S3 configuration and access.

OneClick: navigate to your favorite actions on the websites you love with just one click

Ariful Alam — Sat, 23 Jul 2022 09:52:00 +0000

Let's introduce a simple productivity extension that has been recently featured on Chrome Web Store.

arifszn / OneClick

Navigate to your favorite actions on the websites you love with just one click.

OneClick

Home · Report Bug · Request Feature

Description

OneClick is the ultimate productivity tool for your browser. With just one click, access a wide variety of actions and shortcuts, including creating a meeting on Google Meet, editing photos, creating new projects with popular frameworks, or taking notes. The extension includes 88 shortcuts, 29 customizable themes, and a clean, minimalist UI. Plus, it's open-source and free of ads. OneClick is available as a web app, Chrome extension, and Firefox add-on, making it easy to use across all your devices. Upgrade your browsing experience with OneClick today!

Features

One-click navigation to frequently used actions on websites.
Convenient shortcuts for creating new documents, presentations, notes, and more.
Mark and quickly access frequently used shortcuts in a separate "favorites" section.
Time-saving solution for managing and organizing links.
Integrations with popular online services, such as Google, Bitly…

View on GitHub

In my daily life, I need to perform various activities like creating a google meeting, taking a note, creating a GitHub repo or sharing a code block. If I want to create a new google meeting, I need to perform 5 steps.

Search for google meet in google.
Click on the search result.
Click on the 'New Meeting' button.
A popup would appear saying if I want to create a meeting for now or later. I would click the 'Start an instant meeting'.
I would have to wait depending on the internet speed in each step.

From that, I had the idea If I could create an extension that would increase my productivity by doing these activities in fewer steps. So I created this extension where I can create a meeting in 2 steps.

Click the extension.
A window will appear. Click the google meet icon.

This extension has 88 useful website shortcuts that are also searchable from the top bar. You can choose from 29 themes to your liking.

Get recent blog posts from popular blogging platforms with PHP

Ariful Alam — Thu, 07 Jul 2022 07:17:00 +0000

PHP Blog Client is a PHP package to get recent blog posts from popular blogging platforms by just providing your username and showcase them on your portfolio or website.

Currently available platforms:

Dev
Medium

arifszn / php-blog-client

PHP client to get recent blog posts from popular blogging platforms.

PHP client to get recent blog posts from popular blogging platforms

Packagist · Report Bug · Request Feature

Get recent blog posts from popular blogging platforms by just providing your username and showcase them on your portfolio or website.

JavaScript version: blog.js

Installation

Install via composer

composer require arifszn/blog-client

Usage

getDevPost(): Get 10 recent posts from dev.

use Arifszn\Blog\Client;

$client = new Client();
$result = $client->getDevPost('yourusername');

getMediumPost(): Get 10 recent posts from medium.

use Arifszn\Blog\Client;

$client = new Client();
$result = $client->getMediumPost('yourusername');

Sample Response

array:2 [▼
  0 => array:6 [▼
    "title" => "Why Enhancing Virtual Reality is Important"
    "description" => "Virtual reality is seen

…

View on GitHub

Step 1

To get started, install via composer.

composer require arifszn/blog-client

Step 2

Import it.

use Arifszn\Blog\Client;

Step 3

Use it.

$client = new Client();
$devPosts = $client->getDevPost('yourusername');
$mediumPosts = $client->getMediumPost('yourusername');

It will return 10 most recent posts. Here is a sample response:

array:2 [▼
  0 => array:6 [▼
    "title" => "Why Enhancing Virtual Reality is Important",
    "description" => "Virtual reality is seen as a “fun” technology to some without much...",
    "thumbnail" => "https://cdn-images-1.medium.com/max/2600/0*kz30LOdXT8CyOymh",
    "link" => "https://medium.com/p/ac19dd21c728",
    "categories" => array:5 [▼
      "vr",
      "technology",
      "virtual-reality",
      "engineering",
      "artificial-intelligence"
    ],
    "publishedAt" => "2020-11-08 18:43:34"
  ],
  1 => array:6 [▼
    "title" => "How to Get Started With Data Science: a Brief Guide",
    "description" => "You’ve heard about data science and machine learning, and you want to get started. Maybe you hear...",
    "thumbnail" => "https://cdn-images-1.medium.com/max/2600/0*Ah0vLtsvxqUvRWuS",
    "link" => "https://medium.com/p/88ec244f2fee",
    "categories" => array:3 [▼
      "beginner-coding",
      "data-science-training",
      "machine-learning-course"
    ],
    "publishedAt" => "2020-26-07 22:55:26"
  ]
]

Now, showcase them on your website like this example.
NPM package is also available here.

Source Code
Packagist

Create Personal Portfolio Using Github Api with Blog

Ariful Alam — Fri, 27 Aug 2021 13:26:56 +0000

For a developer, a personal portfolio plays an important role to showcase his/her works, reach to potential clients or land a job. But making it requires a tremendous amount of works and time. Also maintaining it manually with the latest project is a pain.

What if you could create your portfolio in 5 minutes just by providing your Github username and even host it without any cost? Do you want to display your skills, job history, education history, or even dev.to posts to your website? Then you are in right place.

Introducing GitProfile to kickstart your personal portfolio with Github Api and blog.

arifszn / gitprofile

🚀 Create and publish a dynamic portfolio by just providing your GitHub username.

Easy to use automatic portfolio builder for every GitHub user!

View Demo · Report Bug · Request Feature

GitProfile is a powerful portfolio builder that allows you to create a stunning and personalized portfolio site in minutes, even if you have no coding experience. Simply provide your GitHub username, and GitProfile will automatically generate a portfolio. Best of all, you can easily deploy your portfolio to GitHub Pages with just a few clicks, making it accessible to the world in no time.

Features:

✓ Easy to Setup
✓ 37 Themes
✓ Google Analytics
✓ Hotjar
✓ SEO
✓ PWA
✓ Avatar and Bio
✓ Social Links
✓ Skill Section
✓ Experience Section
✓ Certification Section
✓ Education Section
✓ Projects Section
✓ Publication Section
✓ Blog Posts Section

To view a live example, click here.

🛠 Installation & Setup

There are two ways to use GitProfile. Use any.

View on GitHub

GitProfile is an easy-to-customize personal dev portfolio template that is created with React.js. When you manage the code in a GitHub repository, it will automatically render a webpage with the owner's profile information, including a photo, bio, and repositories. Also, it includes space to highlight your details, job history, education history, skills, and recent blog posts.

It's all possible using GitHub API (for automatically populating your website with content) and Article-api (for fetching recent blog posts).

✓ 21 Themes
✓ Google Analytics
✓ Meta Tags
✓ Avatar and Bio
✓ Social Links
✓ Skills
✓ Experience
✓ Education
✓ Projects
✓ Blog Posts

To view a live example, click here.

🛠 Installation & Set Up

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

You'll need Git and Node.js (which comes with npm) installed on your computer.

Fork the repo so you have your own project to customize. A "fork" is a copy of a repository.
Once you've found a home for your forked repository, clone it.
Change into your new directory.

cd gitprofile

Install dependencies

npm install

Start the development server

npm start

🎨 Customization

All the magic happens in the file src/config. Open it and modify it according to your preference.

These are the default values:

config.js

// config.js
module.exports = {
  github: {
    username: 'arifszn', // Your GitHub org/user name. (Required)
    sortBy: 'stars', // stars | updated
    limit: 8, // How many projects to display.
    exclude: {
      forks: false, // Forked projects will not be displayed if set to true.
      projects: [] // These projects will not be displayed. example: ['my-project1', 'my-project2']
    }
  },
  social: {
    linkedin: '',
    twitter: '',
    facebook: '',
    dribbble: '',
    behance: '',
    medium: '',
    devto: '',
    website: '',
    email: ''
  },
  skills: [
    'JavaScript',
    'React.js',
  ],
  experiences: [
    {
      company: 'Company name 1',
      position: 'Software Engineer',
      from: 'July 2019',
      to: 'Present'
    },
    {
      company: 'Company name 2',
      position: 'Jr. Software Engineer',
      from: 'January 2019',
      to: ' June 2019'
    }
  ],
  education: [
    {
      institution: 'Institution name 1',
      degree: 'Bachelor of Science',
      from: '2015',
      to: '2019'
    },
    {
      institution: 'Institution name 2',
      degree: 'Higher Secondary Certificate (HSC)',
      from: '2012',
      to: '2014',
    }
  ],
  blog: {
    // Display blog posts from your medium or dev.to account. (Optional)
    source: 'dev.to', // medium | dev.to
    username: 'arifszn',
    limit: 5 // How many posts to display. Max is 10.
  },
  googleAnalytics: {
    // GA3 tracking id/GA4 tag id
    id: '' // UA-XXXXXXXXX-X | G-XXXXXXXXXX
  },
  themeConfig: {
    default: 'light',

    // Hides the theme change switch
    // Useful if you want to support a single color mode
    disableSwitch: false,

    // Should we use the prefers-color-scheme media-query,
    // using user system preferences, instead of the hardcoded default
    respectPrefersColorScheme: true,

    // Available themes. To remove any theme, exclude from here.
    themes: [
      'light',
      'dark',
      'cupcake',
      'bumblebee',
      'emerald',
      'corporate',
      'synthwave',
      'retro',
      'cyberpunk',
      'valentine',
      'halloween',
      'garden',
      'forest',
      'aqua',
      'lofi',
      'pastel',
      'fantasy',
      'wireframe',
      'black',
      'luxury',
      'dracula'
    ]
  }
}

Themes

There are 21 themes available that can be selected from the dropdown.

The default theme can be specified.

// config.js
module.exports = {
  // ...
  themeConfig: {
    default: 'light',
    // ...
  }
}

Here are some screenshots of different themes.

Google Analytics

GitProfile supports both GA3 and GA4. If you do not want to use Google Analytics, keep the id empty.

// config.js
module.exports = {
  // ...
  googleAnalytics: {
    id: ''
  },
}

Besides tracking visitors, GitProfile will track click events on projects and blog posts, and send them to Google Analytics.

Meta Tags

Meta tags will be auto-generated from configs dynamically. However, you can also manually add meta tags in public\index.html

Avatar and Bio

Your github avatar and bio will be displayed here.

Social Links

GitProfile supports linking your social media services you're using, including LinkedIn, Twitter, Facebook, Dribbble, Behance, Medium, dev.to, personal website, and email.

// config.js
module.exports = {
  // ...
  social: {
    linkedin: 'ariful-alam',
    twitter: 'arif_swozon',
    facebook: '',
    dribbble: '',
    behance: '',
    medium: '',
    devto: '',
    website: 'https://arifszn.github.io',
    email: ''
  },
}

Skills

To showcase your skills provide them here.

// config.js
module.exports = {
  // ...
  skills: [
    'JavaScript',
    'React.js',
  ],
}

Empty array will hide the skills section.

Experience

Provide your job history in experiences.

// config.js
module.exports = {
  // ...
  experiences: [
    {
      company: 'Company name 1',
      position: 'Software Engineer',
      from: 'July 2019',
      to: 'Present'
    },
    {
      company: 'Company name 2',
      position: 'Jr. Software Engineer',
      from: 'January 2019',
      to: ' June 2019'
    }
  ],
}

Empty array will hide the experience section.

Education

Provide your education history in education.

// config.js
module.exports = {
  // ...
  education: [
    {
      institution: 'Institution name 1',
      degree: 'Bachelor of Science',
      from: '2015',
      to: '2019'
    },
    {
      institution: 'Institution name 2',
      degree: 'Higher Secondary Certificate (HSC)',
      from: '2012',
      to: '2014',
    }
  ],
}

Empty array will hide the education section.

Projects

Your public repo from github will be displayed here automatically. You can limit how many projects do you want to be displayed. Also, you can hide forked or specific repo.

// config.js
module.exports = {
  // ...
  github: {
    username: 'arifszn',
    sortBy: 'stars',
    limit: 8,
    exclude: {
      forks: false,
      projects: ['my-project1', 'my-project2']
    }
  },
}

Blog Posts

If you have medium or dev.to account, you can show your recent blog posts in here just by providing your medium/dev.to username. You can limit how many posts to display (Max is 10).

// config.js
module.exports = {
  // ...
  blog: {
    source: 'dev.to',
    username: 'arifszn',
    limit: 5
  },
}

The posts are fetched by Article-api.

🚀 Deploy

Once you are done with your setup and have completed all steps above, you need to put your website online! The fastest approach is to use GitHub Pages which is completely free.

1. Github Pages:

Rename your forked repository to username.github.io, where username is your GitHub username (or organization name).

Open package.json, and change homepage's value to username.github.io.

// package.json
{
  // ...
  "homepage": "username.github.io",
}

Run npm run deploy.
If you see README.md at username.github.io, be sure to change your GitHub Page's source to gh-pages branch. See how to.

Your personal portfolio will be live at username.github.io. For more info, visit here.

2. Other: You can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this doc for a detailed deployment guide.

^{Repo: https://github.com/arifszn/gitprofile}
^{Demo: https://arifszn.github.io/gitprofile}
^{Check out my other works: https://github.com/arifszn}

Reactive Button: 3D animated react button component with progress bar

Ariful Alam — Thu, 25 Mar 2021 13:48:15 +0000

I was looking for an animated button library with progress bar for react. I didn't want to add any UI framework for that. The closest thing I found was react-awesome-button. It is pretty good but didn't have many options like adding icons in loading text, rounded shape, outlined shape or shadow effect. Then I decided that I will make a library myself.

𝐑𝐞𝐚𝐜𝐭𝐢𝐯𝐞 𝐁𝐮𝐭𝐭𝐨𝐧 is a 3D animated react button component with progress bar. It is very lightweight and has zero dependency. You can add any icons in it and the fun part is, if you don't want to add any third party icon library in your project then it has default loading, success and error icons. It also serves the purpose of notification. So you might not need to install a bunch of libraries for that.

I will be glad if you give it a try in your project. Also, please leave a ⭐️. Stars encourage us to contribute more and It costs you nothing.

Repo: https://github.com/arifszn/reactive-button

Playground: https://arifszn.github.io/reactive-button/docs/playground

The goal of the library is to show progress. Below example demonstrates an asynchronous task. When clicking the button, an asynchronous task (e.g. Data fetch, form submit) will be processed and after processing, a success or error message will be displayed.

Initialize a state with string value 'idle' and assign it as 'buttonState' prop. Now it will render an idle text.
When the button is clicked, set state's value to 'loading'.
When the task is completed, set state to 'success', 'error' or 'idle' according to your need.

Basic Usage

import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function App() {
   const [state, setState] = useState('idle');

   const onClickHandler = () => {
      setState('loading');
      setTimeout(() => {
         setState('success');
      }, 2000);
   }

   return (
      <ReactiveButton
         buttonState={state}
         onClick={onClickHandler}
      />
   );
}

export default App;

Full Usage

import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function App() {
   const [state, setState] = useState('idle');

   const onClickHandler = () => {
      setState('loading');
      setTimeout(() => {
         setState('success');
      }, 2000);
   }

   return (
      <ReactiveButton
         buttonState={state}
         onClick={onClickHandler}
         color={'primary'}
         idleText={'Button'}
         loadingText={'Loading'}
         successText={'Success'}
         errorText={'Error'}
         type={'button'}
         className={'class1 class2'}
         style={{ borderRadius: '5px' }}
         outline={false}
         shadow={false}
         rounded={false}
         size={'normal'}
         block={false}
         messageDuration={2000}
         disabled={false}
         buttonRef={null}
         width={null}
         height={null}
         animation={true}
    />
  );
}

export default App;

For non asynchronous task, state management is not needed. Use as like normal button.

Other Usage

Reactive Button has all the functionalities of a normal button.

Color

Reactive Button comes with 10 default color options.

<ReactiveButton color="primary"/>
<ReactiveButton color="secondary"/>
<ReactiveButton color="teal"/>
<ReactiveButton color="green"/>
<ReactiveButton color="red"/>
<ReactiveButton color="violet"/>
<ReactiveButton color="blue"/>
<ReactiveButton color="yellow"/>
<ReactiveButton color="dark"/>
<ReactiveButton color="light"/>

Size

There are 4 sizes available.

<ReactiveButton size="tiny"/>
<ReactiveButton size="small"/>
<ReactiveButton size="medium"/>
<ReactiveButton size="large"/>

Style

Make the buttons more beautiful with these customization options.

<ReactiveButton outline/>
<ReactiveButton rounded/>
<ReactiveButton shadow/>

Existing State

In your project, There might be existing state for loading indicator which accepts boolean value only. If you don't want to define new state for Reactive Button, then utilize the existing state.

const [loading, setLoading] = useState(false);

return (
   <ReactiveButton
      buttonState={loading ? 'loading' : 'idle'}
      idleText={'Button'}
      loadingText={'Loading'}
   />
);

Without State

You are not limited to use state always.

<ReactiveButton
   onClick={doSomething}
   idleText={"Some Text"}
/>

Using Icons

You can use your own icons. Don't forget to wrap them with a parent element.

<ReactiveButton
   idleText={<span><FontAwesomeIcon icon={faReply}/> Send</span>}
/>

Form Submit

If you need to submit form by button clicking, set the type prop as 'submit'.

<form>
   <input type="text" name="username"/>
   <input type="password" name="password"/>
   <ReactiveButton
      type={'submit'}
      idleText="Submit"
   />
</form>

Anchor Tag

To use Reactive button as anchor tag, simply wrap it with an anchor tag.

<a href="https://github.com/" target="_blank">
   <ReactiveButton idleText="Visit Github" />
</a>

My other works:

Reddit Image Fetcher: A JavaScript package for fetching reddit images, memes, wallpapers and more.