DEV Community: Damilola Oshungboye

How to refine Hope AI output after the initial generation

Damilola Oshungboye — Tue, 19 May 2026 20:00:13 +0000

If you’ve tried prompting Hope AI, you know the first version is a production-grade application that can be used immediately. But a working app isn't always the right app.

As you review the generated output, you may notice areas where the application isn’t aligned with your requirements or where boundaries and interfaces need adjustment. That’s a normal part of the process, and you shouldn’t have to start over to address it.

Hope AI’s output is designed to be refined in place, with components and contracts that stay consistent as you make changes. That stability lets you narrow the scope and improve the structure step by step, building forward instead of starting over

This article covers how refinement works in Hope AI. It explains how to improve output after the first version and how teams use this process to move toward review and release.

What is refinement in Hope AI?

Refinement is the process of aligning the generated structure with what you actually intend to build. It is how you make the structure clearer and more focused. This stage is where many teams lose momentum by jumping straight into implementation details, rather than clarifying what the product should do.

That approach tends to backfire because external tools often provide generic solutions that can clash with existing architectural decisions or introduce unnecessary complexity. The result looks more technical, but it’s harder to evaluate and extend.

Effective refinement works the other way around. It starts by narrowing the question. What behavior needs to change? Which feature is affected? How should the user experience differ after the change?

That kind of request gives Hope AI something concrete to work with. Once the behavior is clear, adjusting the structure becomes straightforward. You might split responsibilities, tighten interfaces or move logic into a more appropriate place, but those changes follow naturally from intent.

The important point is that refinement builds on what already exists. You are not replacing the system or re-specifying everything from scratch. The overall shape remains intact, while each pass makes the code easier to review, explain and move forward with.

How refinement with Hope AI differs from other AI builders

Many AI app builders treat updates as replacements. When a change is requested, the system regenerates large portions of the output, often resetting context and obscuring earlier structural decisions.

Hope AI follows a different approach.

Because components and contracts persist across iterations, changes are applied within existing boundaries rather than replacing the output completely. Context also accumulates as the system evolves and earlier decisions continue to shape what comes next. The table below highlights this difference.

Other AI builders	Hope AI
Change triggers regeneration	Change triggers refinement
Context often lost	Context accumulates
Output replaced	Output evolves through targeted updates
Iteration breaks structure	Iteration sharpens structure

Since structure and intent remain intact, developers can make focused adjustments that improve quality without destabilizing the system. Each change builds on what already exists, which is why refinement in Hope AI tends to strengthen earlier work rather than undo it.

That’s the foundation for the techniques below.

Techniques for refining Hope AI output

Here are some practical techniques to refine Hope AI output and prepare it for review.

Refinement usually involves:

Narrowing component responsibility when boundaries blur
Defining explicit contracts and interfaces
Using tests to make expected behavior clear
Respecting existing patterns unless the reason to break them is explicit
Asking Hope AI to explain architectural decisions before changing them
Aligning naming conventions for consistency
Refactoring integration points to keep them flexible

Each of the techniques below expands on one of these moves and shows how to apply it without having to start over.

1.Narrow component responsibility when boundaries blur

When components have overlapping responsibilities, review becomes difficult. Mixed logic forces reviewers to sort through code just to understand intent. Splitting those concerns into focused pieces with clear boundaries makes the structure easier to follow.

// Before
    function UserProfile() {
      const handleLogin = async (credentials) => {};
      const handleUpdate = async (data) => {};

      return (
        <div>
          {!user ? <LoginForm onSubmit={handleLogin} /> : null}
          {isEditing ? <EditForm /> : <DisplayProfile />}
        </div>
      );
    }

    // After
    function ProfileDisplay({ user }) {
      return <div>{user.name}</div>;
    }

    function ProfileEditor({ user, onSave }) {
      return <form onSubmit={onSave}>...</form>;
    }

    function AuthManager({ onAuthSuccess }) {
      return <LoginForm onSubmit={handleLogin} />;
    }

Components that have a single responsibility are easier to review. Reviewers can review each part independently without having to sort through mixed logic.

2.Define explicit contracts and interfaces

Generic objects or unclear methods can lead to runtime errors. By defining clear contracts for data and component boundaries, teams can spot mismatches early and keep changes isolated.

// Before
    function UserForm({ onSubmit }) {
      const handleSubmit = (data) => {
        onSubmit(data);
      };
    }

    // After
    interface UserFormData {
      email: string;
      name: string;
      age: number;
    }

    function UserForm({ 
      onSubmit 
    }: { 
      onSubmit: (data: UserFormData) => Promise<void> 
    }) {
      const validate = (data: UserFormData) => {
        if (!data.email.includes('@')) {
          return { field: 'email', message: 'Invalid email' };
        }
      };
    }

Clear contracts help teams find integration issues during development. Reviewers can verify that components work together simply by examining the interface definitions.

3.Use test descriptions to clarify expected behavior

If test names are too vague, it’s hard to tell what the component does. Reviewers can’t verify that the code is correct by looking at generic test descriptions. Use test names that clearly describe the behavior you’re testing.

// Before
    describe('EmailValidator', () => {
      it('works', () => {
        expect(validate('')).toBe(false);
      });
    });

    // After
    describe('EmailValidator', () => {
      it('rejects empty email addresses', () => {
        expect(validate('')).toEqual({
          valid: false,
          error: 'Email is required'
        });
      });

      it('accepts valid email format', () => {
        expect(validate('user@example.com')).toEqual({
          valid: true
        });
      });

      it('trims whitespace before validation', () => {
        expect(validate('  user@example.com  ')).toEqual({
          valid: true
        });
      });
    });

Descriptive test names indicate how the code should work, so teams can infer the requirements from them.

4.Respect existing patterns unless the reason is explicit

Refinement can weaken a system when it introduces behavior that doesn’t line up with how the rest of the codebase already works.

Breaking a pattern can still be the right decision. What matters is whether the reason is stated explicitly in the request. When the business context is explicit, Hope AI can apply the change in a narrow way while preserving the rest of the system’s structure.

5.Ask Hope AI to explain architectural decisions

Sometimes, the generated structure reflects design trade-offs that aren’t immediately obvious. Without that context, it can be harder to evaluate how the architecture fits your project.

When something isn’t clear, ask Hope AI to explain the reasoning behind its choices and the trade-offs involved. This gives you a clearer view of how the design aligns with your requirements and where you might want to adjust scope or complexity as refinement continues.

6.Clarify naming conventions for consistency

When components and functions use different naming styles, it becomes harder to understand the code. Developers end up spending time on naming conventions rather than on logic. To avoid this, use consistent naming conventions so the codebase is easy to scan and understand. Consistent naming helps teams quickly spot component types, utilities and hooks without having to read through all the code.

7.Ask Hope AI to refactor integration points to avoid vendor lock-in

Components that interact with external systems benefit from clearly defined integration boundaries. You can ask Hope AI to refactor integrations using clear adapter interfaces, making it easy to swap out external services.

Putting vendor-specific details behind clear contracts helps keep your core components stable and makes it easy to swap out different implementations without changing the system’s core logic.

When to stop refining and start reviewing

You know you’re ready to review when further changes no longer meaningfully improve the generated structure. In practice, teams are ready to review Hope AI output when the following conditions are true:

Each component has a clear responsibility that can be explained plainly, without qualifiers.
Interfaces express intent directly, without relying on comments or implicit assumptions.
Tests describe expected behavior clearly and fail for meaningful reasons.
Changes to one component stay contained and don’t ripple into unrelated areas.
The code feels ready to hand off to another engineer without additional context.

At this point, refinement has done its job. The structure is stable and the system can be evaluated and extended through normal peer review processes.

Wrapping up

In Hope AI, work begins with prompting. Right from your first prompt, you receive well-structured, production-ready code. The next step is refinement, where teams adjust the output to fit their workflows and prepare it for review.

If you remember only one thing about refining Hope AI output, make it structural consistency. Refinement works best when you follow the patterns already present in the system, where each feature owns its UI, data logic and API surface. Building within that structure keeps changes contained and maintenance straightforward.

Next, try using one or two of these refinement techniques on your current Hope AI project and see how quickly the output becomes ready for review.

The Three-Layer Architecture That Makes Software Production-Ready

Damilola Oshungboye — Tue, 19 May 2026 19:59:32 +0000

AI development tools such as Cursor and Lovable make it possible to build working applications quickly, but that speed comes with a serious side effect.

Responsibilities that should remain separate often end up combined in the same components, with request handling, service calls, decision logic and data operations written together.

Teams that successfully deploy these AI-generated applications into production address those challenges through architectural separation, dividing the system into layers, each performing a specific role before passing the request along.

This article explains the three-layer architecture behind production-ready applications built with AI tools. It describes what each layer does, how requests move through them and which failures appear when those boundaries are missing.

The three-layer production architecture

AI-generated applications often run into problems when multiple responsibilities are combined. For example, issues can arise if a component manages authentication and also calls an AI service, if a request handler starts automated workflows or if a service writes to the database while interpreting AI output. These operational concerns should be kept separate.

Production-grade AI-generated applications are typically structured around three layers:

Presentation layer – governs how requests enter the system
Application layer – governs how application decisions are made
Data layer – governs how data is stored and retrieved

The presentation layer governs system entry. Every request passes through authentication, input validation and rate limiting before reaching any application logic. Adversarial inputs and malformed payloads are also handled here before they affect internal services.

The application layer governs decisions. Application workflows run in this layer, and external services are integrated into those workflows. Responses from those services, including AI services, move through orchestration, validation checks and rule enforcement before any automated action occurs.

The data layer governs data persistence. It manages how application data is written, updated and retrieved across the system. Databases, storage systems and data access patterns operate in this layer, providing a consistent foundation for storing application state. Records of application activity, service responses and decision outcomes are also stored here so system behavior can be inspected and audited when needed.

Requests move through these layers sequentially, with each layer performing its checks and passing control to the next. The sections below describe each layer in detail, starting with the data layer, which should be designed before the application is built.

Layer 3 - The data layer

The data layer governs how application data is stored and how system activity is recorded. Building it early provides the persistence and traceability needed to recover from failures and understand how they occurred.

This layer is typically responsible for the following functions:

1.Data storage

The data layer manages how application data is written, updated and retrieved. Databases, storage systems and data access patterns operate here to keep application state consistent and available across the system.

2.Data pipelines

Data pipelines control how information enters and moves through the system. Inputs pass through ingestion paths that enforce schema validation, sanitize payloads, apply access permissions and record transformations as data flows between services. These controls protect data integrity while preserving a record of what entered the system and when.

3.Activity records

Applications that integrate external services generate additional system records alongside standard application data. Inputs sent to services, responses returned and the resulting system decisions are stored for auditing and debugging.

These records allow teams to reconstruct how a particular result was produced when investigating incidents or reviewing system behavior. They also provide the historical data that observability systems analyze to detect behavioral changes over time.

Layer 2 - The application layer

The application layer governs how decisions are made. Requests reaching this layer have already passed authentication and validation and are now processed by the application logic.

This layer typically handles the following concerns.

1.Orchestration

Orchestration manages how the application interacts with internal components and external services. It constructs requests, processes responses and handles operational concerns such as retries, timeouts and error handling.

By centralizing these interactions, orchestration prevents service failures or malformed responses from reaching users and keeps requests on a consistent execution path.

2.Rule enforcement

Application rules determine how system decisions are made. These rules enforce constraints such as approval thresholds, escalation policies, account tiers and workflow conditions. Placing these constraints inside the application layer prevents external service responses from directly controlling application behavior.

3.Feature flags

New behavior should be introduced gradually rather than deployed to all users at once.

Feature flags allow teams to control how functionality is rolled out by enabling changes for internal traffic first, expanding to limited user segments and eventually releasing to the full user base once system behavior remains stable.

This layer acts as the control center of the application. External services provide signals, while the application layer determines how those signals influence system behavior.

Layer 1 - The presentation layer

The presentation layer governs what enters the system. Every external request passes through it before reaching application logic, making it responsible for authentication, validation and request control.

This layer handles the following.

1.Authentication and access control

Requests must carry a verified identity, e.g., a Bearer token, before the system processes them. Role-based access control must also determine which operations each identity is permitted to perform. Without these controls, external requests can trigger system actions that cannot be traced to a specific user or workflow.

2.Input validation

User input must be validated before entering the system. Structured request schemas enforce predictable formats and prevent malformed payloads from reaching application logic. For applications that integrate AI capabilities, input validation also helps reduce the risk of prompt injection.

3.Rate limiting

Rate limiting protects the system from excessive traffic and resource exhaustion. A single unprotected endpoint under sustained load can quickly consume available capacity. Rate limits typically operate across several dimensions, including per-user quotas, endpoint throttling and adaptive controls that respond to system load.

4.Request and response formatting

Consistent request and response structures simplify processing across the system. When incoming requests follow predictable schemas, the application layer can evaluate them without handling arbitrary input shapes.

How the layers connect

The three layers provide operational safety only when requests pass through them in sequence. Systems that implement each layer but allow components to bypass boundaries recreate the same failure conditions that the architecture is meant to prevent.

A request walkthrough illustrates how the layers interact under normal conditions.

Presentation layer

A user submits a support ticket through the application interface.
The request carries an authentication token that is validated by the identity service.
Role-based permissions are checked for the requested operation.
The request schema is validated against the expected format.
The input is checked for malformed or unsafe content.
The rate limiter verifies that the user has not exceeded their quota.
The request is normalized into the expected structure before entering the application layer.

Application layer

The orchestration component receives the request and coordinates the processing workflow.
The application calls an external service to analyze the support ticket.
The service returns a structured response describing the ticket category, priority level and suggested action.
Application rules evaluate whether the suggested action is allowed based on policies such as approval thresholds, escalation rules and account tier.
Feature flags determine whether the new automation behavior is enabled for this request.
The application determines the final action and prepares the response.

Data layer

The system stores the request payload and the resulting application state.
Activity records capture the service response and the decision taken by the application.
Data pipelines record how the request moved through the system for auditing and debugging.
These records allow engineers to reconstruct how the system processed the request.

If an action triggers an incident days later, engineers can trace the full decision path through the logged request record.

Common architectural mistakes

Production failures often trace back to architectural shortcuts taken early in development. These problems usually appear when the responsibilities of the three layers are ignored or collapsed together.

1.Skipping presentation-layer controls

Some systems allow requests to reach application logic without proper validation. Authentication, request validation and rate limiting are either incomplete or missing entirely.

Without these controls, malformed inputs reach internal services, traffic spikes exhaust system capacity and requests cannot be tied to a specific identity. Problems that should have been stopped at the system boundary propagate throughout the application.

2.Placing application logic inside request handlers

Another common mistake is embedding orchestration, service calls and rule evaluation directly inside request handlers.

When this happens, the presentation layer and application layer collapse into a single component. Authentication, request parsing, service interaction and decision logic all run in the same execution path.

This structure makes the system difficult to maintain. Changes to one part of the workflow affect the entire request path, and failures become harder to isolate.

3.Allowing external services to determine system behavior

When applications return service responses directly to users or trigger workflows without applying application rules, those services effectively control system behavior. Incorrect outputs or unexpected responses propagate through the system without evaluation.

The application layer must remain the authority that determines which actions are allowed.

4.Failing to record system activity

Systems that do not store activity records become difficult to operate in production. Without records of inputs, service responses and decision outcomes, teams cannot reconstruct how the system processed a request. Incident investigations rely on guesswork and behavioral changes become difficult to detect. Operational visibility depends on the records maintained in the data layer.

5.Building rollback mechanisms after deployment

Rollback capabilities must be in place before the system reaches production. When configuration changes, service integrations or data transformations are not tracked, teams cannot isolate which change caused a failure. This increases incident duration and operational risk.

Closing out

AI development tools accelerate how quickly applications can be built, but that speed often introduces architectural shortcuts. As seen in this article, responsibilities such as request handling, service interactions, decision logic and data operations frequently end up combined in the same components.

Separating these responsibilities through a layered architecture restores that control. The presentation layer governs how requests enter the system, the application layer evaluates service responses and applies system rules and the data layer records the activity needed to monitor and recover from failures.

At Bit Cloud, this architectural separation forms the foundation for building and operating production AI systems. Teams that structure their systems this way gain the control and visibility required to run applications safely under real production conditions.

The top 15 developer productivity tools in 2026

Damilola Oshungboye — Tue, 19 May 2026 19:31:08 +0000

Meta: Discover the 15 best developer productivity tools in 2026. Compare AI coding agents, automation, code review, and engineering intelligence platforms.

The rise of developer productivity tools is closely linked to the widespread adoption of AI in engineering. A 2026 Cortex survey, which gathered data from 50 engineering leaders across North America, Europe, and Asia-Pacific in companies with over 500 employees, found that nearly 90% of them reported their teams are actively using AI, with implementation ranging from individual use to mandatory adoption across all teams.

The market reflects this growth, as projections anticipate the global software development tools market will reach $22.6 billion by 2033.

With hundreds of options available today, the challenge lies not in finding a tool, but in selecting the right one for an individual or a team. To simplify tool selection, we will categorize the options and then highlight the best choice within each category, a method used throughout this article.

Why developer productivity tools matter

Developers would ideally dedicate all their work hours to coding. However, the reality is that their time is split among various essential, non-coding tasks. These often include diagnosing and fixing bugs, conducting code reviews, managing software dependencies, and creating or consulting documentation.

Furthermore, their schedule is also filled with strategy discussions, meetings with non-technical stakeholders, client communications, and administrative duties.

A few quick stats to drive these points home:

Developers spend around one hour per day coding.
The average developer spends nearly 11 hours per week in meetings.
Approximately 57% of developer time is spent on reactive work, like debugging.
Code maintenance consumes up to 12 hours of developer time per week.

Clearly, something is very wrong. When developers spend the vast majority of their time engaging with tasks other than coding, their focus spills, team morale erodes, and productivity suffers across the board.

This shows why productivity tools for developers can make a huge difference to workflows. They automate repetitive tasks, reduce cognitive load, strengthen collaboration, provide insights, and improve the overall developer experience.

The four types of developer productivity tools

We have categorized the developer productivity tools below into four main groups. These categories reflect how the tools assist software development teams in achieving faster, higher-quality code, optimizing their workflows, and ensuring consistent quality standards throughout the entire development lifecycle.

Productivity and engineering intelligence platforms

Productivity and engineering intelligence platforms aggregate data from Git repositories, CI/CD pipelines, and project tracking tools in order to provide insights into a developer team's use of resources and overall effectiveness.

Port, DX, Jellyfish, Linearb, Harness, Axify, and Atlassian Compass stand out among productivity and engineering intelligence platforms available on the market today. They collect and analyze data, turning raw commits, tickets, and build logs into actionable metrics like, for example, code churn and cycle time. Consequently, they help benchmark a team's performance and improve workflows.

With dashboards and alerts, these tools for developer productivity help keep projects on track, surfacing issues like stalled pull requests or delayed testing, helping organizations to optimize internal processes better.

AI coding agents

AI coding agents, such as Claude Code, Cursor and Copilot, use large language models (LLMs) and deep learning to write and refactor code. They can work autonomously across projects and understand context spanning multiple files and repositories, generating, testing, reviewing and debugging code.

AI coding agents are used to automate a wide range of repetitive and routine tasks, letting developers to focus on more complex work. For example, a developer might use an AI coding agent to automate code reviews or identify bugs and find ways to fix them.

These AI tools for developer productivity integrate directly into workflows and can even serve as personal coding assistants, engaging in conversation with developers, explaining code to new hires, and guiding them through unfamiliar parts of a project.

Automation tools

Automation tools serve an important purpose in the software development lifecycle, reducing the manual steps a developer team needs to make. This helps developers test, build, and deploy software faster. Tools such as Gradle, Postman, and GitHub Actions, among others, fall into this category.

By eliminating repetitive tasks such as running tests on each code commit or automatically deploying successful builds to staging environments, automation tools reduce human error and improve efficiency.

They can, for example, merge pull requests without human intervention, which helps reduce bottlenecks.

Automation tools deliver real productivity gains by allowing engineers to iterate rapidly and safely, while handling tedious tasks on their own.

Code review and code quality tools

Code review and code quality tools, like CodeRabbit and Crucible, enforce coding standards early in the software development process, catching defects such as bugs, security vulnerabilities, or style violations.

By providing continuous and automated feedback on code health, these productivity tools for developers help teams reduce the risk of failure, blocking releases when issues are detected so that the software is stable and secure.

More often than not, code review and code quality tools come with collaboration features like inline comments and threaded discussions to improve communication and collaboration among developers. They also use AI assistants to identify bugs, suggest improvements, and automate fixes.

The 15 best productivity tools for developers

Now that we've covered the ground concerning the importance and different types of productivity tools, here are the 15 best productivity tools for developers in 2026.

1. Port: Unified internal developer portal

Port provides an internal developer portal that centralizes resources, unifying all tools, services, and documentation your team uses. It offers a single control plane to browse microservices, APIs and infrastructure.

Key features and benefits:

Searchable registry of all components
One-click actions integrated via CI/CD and Terraform
Automated scorecards for security and compliance
Connects to hundreds of tools out of the box

2. DX: Data-driven platform for developer insights

DX is a developer intelligence platform that uses data and developer surveys to help engineering teams improve productivity. DX aggregates activity from code, CI/CD, and project management to identify bottlenecks. Customers report improvements of up to 6 times faster lead times and 2 times higher deployment rates.

Key features and benefits:

Centralized engineering data
Automated surveys and feedback loops for a full view of developer experience
Tools to standardize developer workflows
AI and automation features

3. Jellyfish: Intelligence for AI-integrated teams

Jellyfish is a software engineering intelligence platform that collects data from repositories and issue trackers to give leaders clear visibility into productivity. Its dashboards display metrics like cycle time, code churn, and AI tool usage to spot bottlenecks early.

Key features and benefits:

Unified dashboards for Git, Jira, CI/CD, and other sources
Capacity planning to balance team workloads
Measurement tools for AI impact and team morale
Jira integration to turn comments into issues

4. Linearb: Workflow optimization

LinearB is an engineering productivity platform that provides visibility into developer workflows, automation, and process metrics. It collects data across the entire development lifecycle to diagnose blockers and optimize delivery. One user reports saving 321 developer-hours per month.

Key features and benefits:

Real-time DORA and SPACE metrics visualized in dashboards.
Rule-based bots to auto-assign PRs, manage labels, block large PRs.
Built-in team health checks and surveys.
AI tool integrations.
Project forecasting module to predict delivery dates based on historical velocity.

5. Harness: AI-driven CI/CD platform

Harness is an AI-driven continuous integration and delivery platform. It offers advanced deployment automation and verification and helps automate deployments with GitOps or push-based workflows, using AI to analyze test results.

Key features and benefits:

Runs only impacted tests, reducing pipeline time.
Advanced deployment strategies with automated rollback on failure.
Real-time metrics on deployment frequency, failure rates, and cost.

6. CodeRabbit: Industry leading AI code review platform

CodeRabbit is the category-defining platform for AI-powered code reviews, built for modern engineering teams navigating the rise of AI-generated development. It combines generative AI models with linters and static code analyzers to deliver codebase-aware reviews that catch and fix errors before they reach production. By pulling in dozens of contextual signals, CodeRabbit provides comprehensive, context-aware reviews, along with powerful customization features that tailor feedback to your codebase and reduce noise.

Key features and benefits:

Codebase-aware AI reviews: Reviews PRs in the context of your entire codebase to catch regressions and side effects diff-only reviews miss.
Actionable, high-signal feedback: Flags bugs, logic errors, security issues, test gaps, and docstring drift without drowning you in noise.
Faster reviews and merges: PR summaries, walkthroughs, and one-click fixes reduce back-and-forth and help teams merge significantly faster.
Fits into your workflow: Works directly inside your Git platform and supports IDEs, acting as a first-pass reviewer so humans can focus on intent and architecture.

7. Axify: Software delivery intelligence

Axify is a metrics and forecasting tool designed to help development teams deliver faster. It tracks DORA metrics, flow metrics, and team well-being to optimize development processes. Axify can forecast delivery dates based on historical data and current sprint progress, alerting teams to risks early on.

Key features and benefits:

Predicts release dates and highlights overdue work based on past performance.
Monitors lead time, deployment frequency, cycle efficiency, and other key metrics.
Visualizes the software delivery process to pinpoint delays and waste.
Surveys to assess developer sentiment.
Progress tracking through integrated metrics.

8. Atlassian Compass: Modern developer portal for small teams

Atlassian Compass is a free internal developer portal for cataloging services, components and templates. It provides a component catalog and health scorecards so teams can easily discover and monitor all their software services. Compass also lets organizations codify best practices via golden path templates so new components start with secure, observable defaults.

Key features and benefits:

Inventory of all code components with metadata, dependencies, docs, and owner info.
Health scorecards.
Upstream and downstream service mapping for impact analysis.
Reusable templates for project creation that enforce policies automatically.

9. Claude Code: AI coding assistant for developer productivity

Claude Code is a coding assistant that runs in the developer’s terminal. You describe what you want in plain English, and Claude Code will generate code, fix bugs, or automate tasks. It can operate with deep context or integrate with external tools.

Key features and benefits:

Easy code generation with Claude making an execution plan and coding it.
Automated debugging and fix implementation.
Codebase Q&A.
Operates via CLI.

10. Cursor: Advanced AI code editor

Cursor is an AI-powered code editor that uses Claude, GPT, and Gemini models to suggest whole-line or multi-line completions as you type, often just by hitting Tab. Cursor also lets you use natural language commands to modify code, applying them across files.

Key features and benefits:

Context-aware autocomplete that predicts code edits and fills them in bulk.
Codebase awareness.
The option to disable cloud logging so your code is not stored remotely.
Supports many AI models with custom agent layers for speed.

11. Copilot: AI coding assistant

GitHub Copilot is an AI coding assistant integrated into IDEs that suggests code completions, functions, and generates code from comments as you type. Copilot uses OpenAI and GitHub models to offer context-aware recommendations.

Key features and benefits:

Predicts and inserts code snippets and functions based on surrounding code and comments.
Chat interface for code Q&A and generation.
Extensions for all major editors.
Warns about code vulnerabilities and insecure patterns in.

12. Gradle: Build automation and dependency management

Gradle is a modern build system and dependency manager used in Java, Kotlin and Android development. It uses a task-based approach and supports incremental builds and caching for speed.

Key features and benefits:

Incremental builds
Shares build results across developers and CI to avoid redundant work
Builds native code, Android apps, and Node.js projects
Thousands of plugins
Highly extensible and type-safe

13. Postman: The best API development platform

Postman is an API development platform that helps teams design, test, and document APIs collaboratively. Teams use Postman collections and workspaces to share endpoints and scripts for consistency across projects. This helps teams onboard faster and reduce errors.

Key features and benefits:

Collaboration workspaces with shared collections, mock servers, and docs
Auto-generated, interactive docs for all endpoints
Automation with AI assistant to write test scripts or debug APIs
Links with version control, CI/CD, and cloud tools to embed APIs into the lifecycle

14. GitHub Actions: Native CI/CD and automation

GitHub Actions lets developers automate workflows directly within GitHub. You write YAML workflow files that trigger on repository events to build, test, and deploy code. Actions provides hosted runners and supports matrix builds, so you can test across multiple OS versions in parallel.

Key features and benefits:

Runs builds and deployments in your GitHub repo context
Simultaneous code testing on multiple operating systems and language versions
Real-time workflow logs and an encrypted secrets store for credentials.
Workflow automation

15. Crucible: Collaborative code review tools

Crucible is a code review tool that teams perform peer reviews on commits from Git, SVN, and Mercurial with discussion threads on specific lines or files. It supports both formal workflows and informal reviews alike, and provides dashboards to track review status and code coverage.

Key features and benefits:

Inline comments, threaded discussions, and review statuses to collaborate on code quality
Tracking and reporting
Connects to Jira and Bitbucket Server
Complete history of reviews and comments for compliance and accountability.

Choosing the right developer productivity tool

Developer productivity is about creating the right environment for developers to write code, instead of wasting their time and cognitive energy on dealing with inefficiencies and bottlenecks.

The 15 tools we’ve explored here stand out as some of the most powerful resources today, covering everything from data-driven insights and automated deployments to intelligent code suggestions and quality checks.

How to use AI to identify and fix security vulnerabilities in your codebase

Damilola Oshungboye — Wed, 22 Apr 2026 09:40:52 +0000

Meta: Understand the common code-based security vulnerabilities, from SQL injection to XSS, and how AI simplifies the detection and resolution of these security vulnerabilities for improved code security.

With the average data breach now costing companies $4.45 million, securing your code has never been more urgent.

As development cycles accelerate, security vulnerabilities like SQL injections or cross-site scripting (XSS) are still common or discovered too late. AI is changing that. By scanning large codebases, learning from actual attack patterns, and offering targeted fixes, AI tools help you address code security flaws faster than ever.

This article explores where traditional approaches fall short, how AI can fill those gaps, and the practical steps to embedding AI code security into your development workflow.

Common security vulnerabilities in your codebase

When you look at the OWASP Top 10, you’ll notice how many serious threats come from your routine everyday coding patterns. Let’s examine a few of the most prevalent vulnerabilities:

1. SQL injection

SQL injection can be especially dangerous because it exploits the mechanism you rely on to store and retrieve data. An attacker essentially “injects” malicious SQL commands into an application’s inputs, potentially gaining unauthorized access to or altering the underlying data.

Here’s an example from a simple authentication routine:

# auth_service.py
def authenticate_user(username, password):
    query = f"""
        SELECT id, role FROM users 
        WHERE username = '{username}' 
        AND password = '{password}'
    """
    result = database.execute(query)
    return result.fetchone()

This code appears functional but is highly vulnerable to SQL injection attacks. The authenticate_user function constructs an SQL query using string concatenation, which allows an attacker to inject malicious SQL code. If an attacker inputs ' OR '1'='1 as the username, the query becomes:

SELECT id, role FROM users WHERE username = '' OR '1'='1' AND password = 'anything'

This query will always return true, allowing the attacker to potentially bypass authentication and access protected data. The consequences of SQL injection attacks can be severe, including loss of confidentiality, tampering with existing data, identity spoofing, and even gaining administrative access to the database server.

A more secure approach uses parameterized queries:

# auth_service.py (secure version)
def authenticate_user(username, password):
    query = """
        SELECT id, role FROM users 
        WHERE username = %s AND password = %s
    """
    result = database.execute(query, (username, password))
    return result.fetchone()

In this secure version, the SQL query uses placeholders (%s) for the user input, and the actual values are passed as parameters to the execute method. This approach ensures that the input data is properly escaped and cannot be used to manipulate the SQL query structure

2. Cross-site scripting (XSS)

XSS happens when attackers inject malicious scripts (often JavaScript) into web pages that other users view. Any spot in your application where user input is rendered onto the page can be a gateway for XSS.

The following example of a blog post display function is a common pattern in content management systems and is vulnerable to XSS attacks.

@app.route('/blog/<post_id>')
def display_post(post_id):
    post = get_post(post_id)
    return f"""
        <article>
            <h1>{post.title}</h1>
            <div>{post.content}</div>
        </article>

An attacker could inject malicious JavaScript through the post content, affecting every visitor.

In this example, an attacker could script malicious JavaScript through the post.content field. For instance, if an attacker submits a blog post with the following content:

<script>alert('XSS')</script>

This script will be executed by every visitor who views the blog post, allowing the attacker to steal session cookies, manipulate the user's browser, or perform other malicious actions.

To counter XSS, always sanitize and escape user-generated content:

from markupsafe import escape

@app.route('/blog/<post_id>')
def display_post(post_id):
    post = get_post(post_id)
    return render_template('post.html',
        title=escape(post.title),
        content=escape(post.content)
    )

The escape function from the markupsafe library is used to ensure that any user-provided content is properly sanitized, preventing malicious scripts from being executed in the user's browser.

3. Hardcoded secrets

Hardcoding sensitive information, like API keys or database credentials, into your code is a common mistake, often done for convenience. However, attackers can use these secrets to gain unauthorized access if this code ends up in a public repository or is leaked elsewhere.

Here is a simple but risky approach:

class StorageService:
    def __init__(self):
        self.aws_key = "AKIA1234567890ABCDEF"
        self.aws_secret = "jK8*2nP9$mB4#kL5"
        self.client = boto3.client('s3',
            aws_access_key_id=self.aws_key,
            aws_secret_access_key=self.aws_secret
        )

If these credentials appear in a publicly accessible repository, malicious actors can exploit them immediately. Instead, you can store secrets in environment variables or a secure secrets manager:

from decouple import config

class StorageService:
    def __init__(self):
        self.client = boto3.client('s3',
            aws_access_key_id=config('AWS_ACCESS_KEY'),
            aws_secret_access_key=config('AWS_SECRET_KEY')
        )

The decouple library from config is used to load the AWS credentials from environment variables, ensuring that sensitive information is not hardcoded in the application code. This approach significantly reduces the risk of credential exposure and subsequent security breaches.

Although these vulnerabilities may appear obvious individually, they become difficult to detect within large codebases, especially when many developers make multiple commits daily across various repositories. Manual reviews alone struggle to consistently catch security issues at scale.

Keeping these vulnerabilities in mind, let's examine how various types of security testing can help identify and prevent them.

Choosing static or dynamic code analysis?

It’s critical to identify vulnerabilities early. Two practical approaches to scrutinizing your code are:

Static Application Security Testing (SAST) – Analyzes your codebase without executing it, pinpointing issues like insecure coding patterns, hardcoded secrets, or known vulnerability signatures.
Dynamic Application Security Testing (DAST) – Interacts with your running application to spot real-time issues, such as misconfigurations or runtime injection paths.

Many security teams rely on both since SAST focuses on code structure, whereas DAST uncovers flaws that are only visible during runtime. Whichever approach you take, the idea is to catch issues well before affecting production users.

An AI-assisted approach to code security

Even if you’re vigilant about security, modern codebases constantly evolve, and it’s easy for vulnerabilities to slip through. AI code review tools help by quickly scanning large repositories, drawing on known attack patterns, and machine learning to spot issues you might otherwise miss.

They also offer practical suggestions for fixing those issues, reinforcing your overall security posture.

To see this in action, consider a Python Flask project that handles user profiles and file uploads (two areas where security oversights often hide). AI can highlight these hidden risks and guide you in resolving them before they become real problems.

Setting up an AI tool for automated code reviews for security vulnerabilities

If you’d like to explore AI-based reviews, you can try any tool that suits your needs; some include GitHub Copilot, Claude, and Perplexity. For this tutorial, we’ll use a popular AI tool like ChatGPT to review and examine common vulnerabilities with a Python Flask application that manages user profiles and handles photo uploads.

First, clone the Python project that handles user profile management.

git clone https://github.com/Tabintel/py-photo-lib.git

Navigate to the project directory and install dependencies.

cd py-photo-lib
python -m venv venv
venv\Scripts\activate
pip install -r requirements.txt

Then, create a branch for the new photo upload functionality:

git checkout -b feature/profile-uploads

After cloning the repository and creating the branch, copy the code from this GitHub gist into your app.py file.

This feature adds photo upload capabilities to the application, allowing users to upload profile images.

The changes include:

New route /upload for uploading images.
File upload handling using Flask's request.files.
Database query in /profile/<username> to fetch user details.
Configured API to handle profile image paths.

Before pushing the code to the main repository, you’ll first use an AI tool to review it for any vulnerabilities.

Give this prompt to your AI tool (we’re using ChatGPT in this case):

"Review the following code, which adds a new profile image upload feature to a Python Flask application. Identify any security vulnerabilities or potential risks in the implementation, briefly explain why, and suggest improvements where necessary."

In the review process, you would likely receive precise, line-by-line recommendations, such as these examples:

1. Exception handling enhancement

The review flagged broad exception handling, suggesting you implement more specific error tracking to prevent the exposure of sensitive information.

This is a critical security concern, as broad exception handling can make identifying and addressing potential issues difficult. To address this, you can implement a robust exception-handling mechanism that includes specific error messages and logging.

For example, instead of using a broad exception handler like this:

except Exception as e:

You can implement a more specific exception handler that includes error messages and logging:

try:
except ValueError as e:
    # Log the exception and return an error message
    logging.error(f"Invalid value: {e}")
    return {"error": "Invalid value"}
except Exception as e:
    # Log the exception and continue
    logging.error(f"An error occurred: {e}")

This approach ensures that each exception type is handled specifically, providing more detailed error logs and making diagnosing and fixing issues easier.

2. Undefined username

Another vulnerability identified is related to undefined model imports. Having undefined model imports in any codebase can make it difficult to ensure data integrity and prevent unauthorized access.

To address this, you can enhance the username validation to prevent undefined model imports.

from models import User
user = User.query.get(username)

When the User models are imported correctly, you prevent potential errors that could arise from undefined models, which can lead to data inconsistencies and prevent attacks like SQL injections.

3. Additional code vulnerabilities

From this particular review, you can see that the AI tool recognizes areas in the app.py code pull request and points out the exact lines of code that the changes need to be reviewed for security purposes. Let’s look at each of them:

4. Image format validation

The automated review flags the need to review image format validation. Currently, the application only allows png, jpg, jpeg, and gif formats for uploaded photos:

ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
MAX_FILE_SIZE = 5 * 1024 * 1024  # 5MB

While this approach is sufficient for basic use cases, it leaves the application vulnerable to limitations or potential misuse.

For example, if the project requires support for other formats (e.g., webp, tiff), the lack of validation for these could result in errors or even security risks when unexpected file types are uploaded.

Proper validation ensures that the system explicitly handles supported formats, mitigating risks from unverified file uploads.

5. Function usage documentation

Next, there’s a suggestion to clarify function usage in docstring. A short docstring for allowed_file could be helpful in describing its purpose and the expected parameter or return types.

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

Without documentation, you may misunderstand the purpose or behavior of this function. Adding a short docstring that specifies the function's role (validating file extensions) and details the expected parameters and return values would prevent miscommunication and misuse.

6. Image processing logging

There's a suggestion to validate and log image processing steps. The image processing logic is good but may benefit from explicit logging when conversions or resizing occur, especially to diagnose user-upload issues.

def process_image(image_path):
    with Image.open(image_path) as img:
        # Convert to RGB if necessary
        if img.mode != 'RGB':
            img = img.convert('RGB')
        # Resize if too large
        if max(img.size) > 2000:
            img.thumbnail((2000, 2000))
        # Save optimized version
        img.save(image_path, 'JPEG', quality=85, optimize=True)

Without logs, it becomes difficult to diagnose issues when image uploads fail. Logging each step would provide a clear trail for troubleshooting and prevent vulnerabilities caused by incomplete or incorrect processing. Logs also enhance accountability and allow developers to detect unexpected behavior during uploads.

Through this automated code review process, you've seen how AI tools comprehensively analyze the code, highlighting vulnerabilities in the photo upload feature. The review shows critical security gaps, from unhandled exceptions that could expose system information to unsecured file type validation that might allow malicious uploads and missing model imports that could compromise data integrity.

Once you've added the code from the review, commit and push the changes to your GitHub repository using the following commands:

git add app.py
git commit -m "feat: add profile photo upload functionality"
git push origin feature/profile-uploads

Implementing code security best practices

Security requires ongoing diligence. Here are some routines you can integrate into daily development:

1. Regular code reviews

Peer reviews remain indispensable for catching logical errors and sharing knowledge. To maximize coverage, combine them with automated scanning.

2. Secure coding standards

Avoid storing secrets in code.
- Enforce the least privilege for database connections.
- Use parameterized queries by default.
- These guidelines reduce the risk of common issues slipping through.

3. Frequent vulnerability assessments

Schedule periodic scans (e.g., monthly or quarterly) using SAST and DAST tools. Consider penetration tests for critical areas of your application.

4. Automate where possible

CI/CD pipelines can automatically run security tests before deployment, ensuring no commit merges without scrutiny. AI can assist in triaging results, making the process more efficient.

5. Embrace DevOps culture

Encourage open collaboration between development and operations, ensuring that security is baked in from the start rather than bolted on at the end.

6. Shift-Left security

Moving security checks to earlier stages of development (DevSecOps) reduces last-minute surprises. Addressing security vulnerabilities earlier in the development process significantly reduces the time and resources required for remediation.

Wrapping up: Securing your codebase

Applying thoughtful, ongoing code security practices and AI code review checks can significantly reduce your application’s vulnerability. Whether it’s preventing SQL injection, mitigating XSS, or ensuring secrets don’t leak, each layer of protection adds up.

As you refine these habits and explore AI code security solutions, you’ll discover more efficient ways to keep your applications secure, protect sensitive data, and maintain a reliable development pipeline.

Looking to optimize memory in your Go application? Check out this guide

Damilola Oshungboye — Sat, 01 Feb 2025 13:04:11 +0000

Damilola Oshungboye

Feb 1 '25

How to Manage Memory in Go Applications

#go #beginners #tutorial

Comments

10 min read

How to Manage Memory in Go Applications

Damilola Oshungboye — Sat, 01 Feb 2025 13:03:16 +0000

Go, also known as Golang, is known for its effective memory management system. While the language's garbage collector automates most tasks involving memory, understanding and implementing effective memory management techniques helps improve your Go applications' performance and resource usage.

So, in this tutorial, you’ll learn four effective techniques you can apply to manage memory even better in your Go application. Whether you are an experienced developer or just starting out, you will gain insightful knowledge that you can apply to make your Go code more memory-efficient.

Let’s get started!

Prerequisites

Before going any further, ensure you have the following:

Go installed on your system. You can download it from the official website.
A text editor or IDE of your choice to write and edit your Go code
A project directory for the tutorial's code

Go’s garbage collector

Go's memory management is primarily handled by its garbage collector (GC). The GC automatically allocates and deallocates memory, relieving developers from manual memory management tasks common in languages like C or C++.

Here’s an example to demonstrate how the GC works by tracking memory usage before and after garbage collection.

In your project directory, create a new file named main.go and paste the code below into it.

package main

import (

    "fmt"

    "runtime"

)

func main() {

    var mem runtime.MemStats

    runtime.ReadMemStats(&mem)

    fmt.Printf("Initial memory usage: %v KBn", mem.Alloc/1024)

    references := make([]*[1000000]int, 100)

    for i := 0; i < 100; i++ {

        references[i] = new([1000000]int)

    }

    runtime.ReadMemStats(&mem)

    fmt.Printf("Memory usage after allocation: %v KBn", mem.Alloc/1024)

    references = nil

    runtime.GC()

    runtime.ReadMemStats(&mem)

    fmt.Printf("Memory usage after garbage collection: %v KBn", mem.Alloc/1024)

}

In the code above, the initial memory usage is printed, followed by the allocation of 100 large arrays, which significantly increases memory usage. The references slice is then set to nil to remove all references to these arrays, and a manual garbage collection is triggered. Finally, the memory usage is printed again to show the current memory usage.

Run the below command in your terminal to execute the code.

go run main.go

You should see a result similar to the image below, indicating that the GC cleared the unused memory.

Memory management approaches in Go

In this section, you’ll learn about the approaches and techniques you can use to manage memory better in your Go application.

1. Design memory-efficient structs

In Go, structs are typed collections of fields. Each field in the struct can be of a different data type, making structs a flexible way of combining related data. Structs are commonly used to represent records or complex data structures.

While structs can be considered, in some respects, as being similar to classes in object-oriented languages such as Java and C++, Go does not support explicit inheritance as other languages do.

Here’s how you would define a struct in Go.

type StructName struct {

    field1 Type1

    field2 Type2

}

When using structs in Go, it's important to consider how the fields are aligned in memory. You should order struct fields from largest to smallest to minimize the amount of padding between fields.

Padding refers to the extra space added between struct fields to align them properly in memory. This alignment is necessary for the CPU to access the fields efficiently, but it can lead to wasted memory if fields are not ordered carefully. By organizing fields from largest to smallest, you can reduce the amount of padding, making the memory layout more compact.

Replace the content of the main.go file with the below code block to demonstrate this.

package main

import (

    "fmt"

    "unsafe"

)

func main() {

    type Inefficient struct {

        a bool

        b int64

        c bool

        d int32

    }

    type Efficient struct {

        b int64

        d int32

        a bool

        c bool

    }

    fmt.Printf("Size of Inefficient: %d bytesn", unsafe.Sizeof(Inefficient{}))

    fmt.Printf("Size of Efficient: %d bytesn", unsafe.Sizeof(Efficient{}))

}

The code above defines two structs: Inefficient and Efficient. The Inefficient struct arranges its fields in a way that increases memory usage due to extra padding between fields.

On the other hand, the Efficient struct organizes fields from largest to smallest, reducing padding and making the struct more memory-efficient. The difference in size is shown using the unsafe.Sizeof() function.

Run the command below in your terminal to execute the code.

go run main.go

You will see the result displayed below.

As shown in the image above, arranging your structs from largest to smallest fields causes it to use memory more effectively.

2. Use pointers for large data structures

Pointers in Go are variables that store the memory address of another variable. They allow you to reference and manipulate the value of a variable directly in memory rather than working with a copy of the value.

Key facts about pointers:

Declaration: A pointer is declared by placing an asterisk (*) before the type. For example, var p *int declares a pointer to an integer.
Address Operator (&): To get the address of a variable, you use the address operator. For example, p = &x assigns the address of x to the pointer p.
Dereferencing: To access or modify the value at the address stored in a pointer, you use the dereference operator (*). For instance, *p = 10 sets the value of x to 10 if p points to x.

Here’s a simple example to demonstrate pointers. Replace the contents of your main.go file with the below code block.

package main

import (

    "fmt"

)

func main() {

    number := 42

    fmt.Println("Initial value of number:", number)



    pointerToNumber := &number

    *pointerToNumber = 99



    fmt.Println("Value of number after pointer modification:", number)

    fmt.Printf("Memory address of number: %pn", pointerToNumber)

}

In the code above, the variable number is initialized to 42. A pointer named pointerToNumber is created and assigned the memory address of number. The value of number is then updated to 99 by modifying the value stored directly by the pointerToNumber pointer.

Run the below command in your terminal to execute the code.

go run main.go

You should see the result shown in the image below.

Using pointers is an effective way to save memory when working with large data structures. Instead of passing these data structures directly to a function, you can pass a pointer that holds their memory address. This allows the function to modify the original data without the overhead of creating a copy, which normally occurs when the value of an object is passed into a function.

However, you must be careful not to create references that can lead to memory leaks by setting the references to nil after the code is done. Replace the content of your main.go file with the code block below.

package main

import (

    "fmt"

    "runtime"

)

type LargeDataSet struct {

    values [8000000]int

}

func GenerateData() *LargeDataSet {

    data := &LargeDataSet{}

    for index := range data.values {

        data.values[index] = index % 1000

    }

    return data

}

func main() {

    fmt.Println("Memory usage before data generation:")

    DisplayMemoryStats()

    dataset := GenerateData()

    fmt.Println("nMemory usage after data generation:")

    DisplayMemoryStats()

    fmt.Printf("nFirst value in dataset: %dn", dataset.values[0])

    dataset = nil

    runtime.GC()

    fmt.Print("nMemory usage after removing dataset reference: ")

    DisplayMemoryStats()

}

func DisplayMemoryStats() {

    var memStats runtime.MemStats

    runtime.ReadMemStats(&memStats)

    allocatedMiB := memStats.Alloc / 1024 / 1024

    fmt.Printf("Allocated = %v MiB", allocatedMiB)

}

In the example above, the GenerateData() function creates a large data structure and returns a pointer to it, avoiding the overhead of copying the large data. After executing the function, the pointer is set to nil, allowing the garbage collector to reclaim the memory.

Run the below command in your terminal to execute the code.

go run main.go

You should see the result shown in the image below.

3. Manage variables scopes

The proper understanding and usage of variable scopes plays a vital role in memory management in Go. A variable's scope determines its visibility and lifetime within the program, impacting directly when the garbage collector can free up the memory associated with it.

Limit variables scopes

While writing your Go code, you should keep variable scopes as limited as possible so the garbage collector can free them as soon as possible.

To demonstrate this, replace the content of your main.go file with the code block below.

package main

import (

    "fmt"

)

func main() {

    message := "This is available throughout main"

    fmt.Println(message)

    {

        blockMessage := "This is only available in this block"

        fmt.Println(blockMessage)

        blockMessage = ""

    }

    fmt.Println(blockMessage)

}

In the example above, the message variable is declared at the top of the main() function and is accessible throughout the entire function, including all nested blocks. Conversely, the blockMessage variable is defined within a nested block inside the main() function. Consequently, its scope is limited to that block, making it inaccessible outside of it.

Therefore, accessing the blockMessage variable outside its scope will result in a compilation error, as shown in the image below. This is because the Go compiler detects that the variable is not defined in that context.

Use global variables cautiously

You can also manage memory more effectively by using global variables cautiously since they persist throughout the program's entire lifecycle and can result in memory leaks.

Replace the content of your main.go file with the below code block.

package main

import (

    "fmt"

    "runtime"

)

var globalStorage *Storage

type Storage struct {

    Elements [800000]int32

}

func initializeStorage() {

    var tempStorage Storage

    for i := 0; i < len(tempStorage.Elements); i++ {

        tempStorage.Elements[i] = int32(i % 1000)

    }

    globalStorage = &tempStorage

}

func main() {

    fmt.Println("Memory usage before initializeStorage:")

    displayMemoryStats()

    initializeStorage()

    fmt.Println("nMemory usage after initializeStorage:")

    displayMemoryStats()

    fmt.Println("nMemory usage after local variable out of scope (globalStorage still set):")

    displayMemoryStats()

}

func displayMemoryStats() {

    var memStats runtime.MemStats

    runtime.ReadMemStats(&memStats)

    allocatedMiB := memStats.Alloc / 1024 / 1024

    fmt.Printf("Allocated = %v MiB", allocatedMiB)

}

In the code block above, the initializeStorage() function creates a tempStorage variable and fills its Elements array with data. Then, the address of tempStorage is assigned to the global variable globalStorage.

Run the command below in your terminal to execute the code.

go run main.go

You will see the below results displayed in your terminal.

As seen in the image above, although tempStorage goes out of scope when initializeStorage finishes, the global variable globalStorage continues to hold a reference to it because it was defined globally. This prevents the garbage collector from reclaiming the memory.

4. Pool resources

Go has a technique for managing memory resource-intensive scenarios. It allows you to reuse resources, such as objects and memory, instead of allocating and deallocating them repeatedly.

You should use sync.Pool when dealing with scenarios that require frequent reuse of short-lived objects to reduce allocation costs and garbage collection overhead, especially during concurrency operations.

To demonstrate this, replace the content of your main.go file with the code block below.

package main

import (

    "fmt"

    "sync"

)

var syncPool = sync.Pool{

    New: func() interface{} {

        return &syncStruct{}

    },

}

type syncStruct struct {

    Object string

}

func main() {

    data := syncPool.Get().(*syncStruct)

    data.Object = "Pooling resources!"

    fmt.Println(data.Object)

    syncPool.Put(data)

    data2 := syncPool.Get().(*syncStruct)

    fmt.Println(data2.Object)

}

In the example above, sync.Pool is used to manage and reuse instances of the syncStruct type. When an object is requested from the pool using syncPool.Get(), if none are available, a new one is created. The object is then used, and after processing it is returned to the pool using syncPool.Put().

Run the command below in your terminal to run the code.

go run main.go

You will see the results displayed below.

Profile and monitor memory usage

Go provides in-built methods for identifying bottlenecks and memory leaks in your Go application using its profiler: pprof.

To profile memory usage, you will need to import the runtime/pprof package and write memory profiles to files for later analysis. Running these profiles through pprof helps identify inefficient memory usage in your application.

Below is an example of its usage. Replace the contents of your main.go file with the code block below.

package main

import (

    "log"

    "os"

    "runtime"

    "runtime/pprof"

)

func main() {

    runtime.MemProfileRate = 2048

    profileFile, err := os.Create("mem.prof")

    if err != nil {

        log.Fatal("Failed to create memory profile file: ", err)

    }

    defer profileFile.Close()

    generateDataStructures()

    if err := pprof.WriteHeapProfile(profileFile); err != nil {

        log.Fatal("Unable to write memory profile: ", err)

    }

    log.Println("Memory profile saved to mem.prof")

}

func generateDataStructures() []map[int]string {

    structures := make([]map[int]string, 800000)

    for i := range structures {

        structures[i] = map[int]string{

            0: "A", 1: "B", 2: "C", 3: "D", 4: "E",

        }

    }

    return structures

}

In the code above, Go’s runtime function runtime.MemProfileRate() is set to capture memory allocations in 2KB intervals. The program creates a profile file named mem.prof to store the profiling data. Finally, the profiling data is written to the mem.prof file for later analysis.

Run the code using the command below

go run main.go

You should see a prompt that indicates the profile data has been saved, as shown in the image below.

Next, run the code below in your terminal to begin the analysis of the profile data using pprof.

go tool pprof mem.prof

This will return the prompt, as seen in the image below.

![][image9]Explore the profile data with the top command, which displays the top memory-consuming functions.

Paste the below command in your terminal to see this command in action.

top

The top memory-consuming functions are displayed in the image above.

It’s also possible to check the particular lines in each function that consumes the memory using thelist <function_name> command. Use the command below to see this in action.

list generateDataStructures

The image above displays the memory allocation per line. It shows that line 32 consumes the most memory—64.15 MB.

That’s how to improve memory management in Go

In this article, you learned about Go's garbage collector and the best approaches for improved memory efficiency. You also learned how to use Go's built-in memory profiler to detect memory leaks in your code.

Effective memory management enhances application performance and reduces the risk of memory-related errors. By applying the techniques in this tutorial, you can confidently build memory-safe Go applications.

Cheers to more learning!

How to Build a Real-Time Chat App With Laravel, Vue.js, and Pusher

Damilola Oshungboye — Sun, 08 Sep 2024 21:10:54 +0000

Real-time chat applications like WhatsApp and Discord have witnessed a remarkable surge in popularity in recent years, revolutionising communication with instantaneous messaging. However, while building your own chat app with this functionality might seem daunting, it’s entirely achievable.

In this tutorial, you will learn how to build a real-time chat application using Laravel, Vue.js, and Pusher. You'll use the Laravel framework to build the back end of the chat application, a combination of Blade templates and Vue.js to develop the user interface and layout of the application, and the Pusher platform for the real-time chat functionality.

Prerequisites

To complete this tutorial, you will need the following:

PHP 8.3 (or higher) installed
Node and NPM installed
Composer installed globally
A Pusher account. Create a new account here
Basic knowledge of WebSockets
Basic knowledge of the Vue.js framework would be nice, but is not essential

Backend setup

Begin by setting up all the necessary backend configurations required for the chat application.

Scaffold a new Laravel project

To get started with building your chat application, you need to create a new Laravel project using Composer and change into the project directory by running the below commands in your terminal.


composer create-project laravel/laravel chat-app

cd chat-app

Next, install Laravel Breeze using the command below.


composer require laravel/breeze

Once the Laravel Breeze installation is complete, scaffold the authentication for the application. Do that by running the following commands one after the other.


php artisan breeze:install

npm install

npm run dev

When prompted, select the options below.

The final step in the scaffolding process is to add the necessary packages and config files for WebSocket and event broadcast. Run the command below in a new terminal instance or tab.


php artisan install:broadcasting

When prompted, select these options:

This command creates channels.php in the routes folder and broadcasting.php in the config folder. These files will hold the WebSocket configurations and install the necessary client libraries (Laravel Echo and pusher-js) needed to work with WebSockets.

With all of the scaffolding completed, start the application development server by running the commands below.


php artisan serve

Once the application server is up, open http://localhost:8000/ in your browser. You should see the default Laravel welcome page with options to log in or register for your chat app, as shown in the image below.

The next step is to open the project in your preferred IDE or text editor.

Configure Pusher

Pusher is a cloud-hosted service that makes adding real-time functionality to applications easy. It acts as a real-time communication layer between servers and clients. This allows your backend server to instantly broadcast new data via Pusher to your Vue.j s client.

Install the Pusher helper library by running the command below in a new terminal instance or tab.


composer require pusher/pusher-php-server

Then, in your Pusher dashboard, create a new app by clicking Create App under Channels.

Next, fill out the form, as in the screenshot below, and click Create app.

After creating a new channels app, navigate to the App Keys section in the Pusher dashboard where you will find your Pusher credentials: App ID, Key, Secret, and Cluster. Note these values as you will need them shortly.

Now, locate the .env file in the root directory of your project. This file is used to keep sensitive data and other configuration settings out of your code. Add the following lines to the bottom of the file:


PUSHER_APP_ID=<your_pusher_app_id>
PUSHER_APP_KEY=<your_pusher_app_key>
PUSHER_APP_SECRET=<your_pusher_app_secret>
PUSHER_APP_CLUSTER=<your_pusher_app_cluster>
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
BROADCAST_CONNECTION=pusher

Ensure you replace <your_pusher_app_id>, <your_pusher_app_key>, <your_pusher_app_secret>, and <your_pusher_app_cluster> with the actual values from your Pusher dashboard. Be careful to only replace the placeholder values with your actual credentials and do not alter the keys. This setup will enable your application to connect to Pusher's cloud servers and set Pusher as your broadcast driver.

Setup model and migration

After scaffolding the application, the next step is to create a model and a corresponding database migration. This will allow us to store chat messages and user information in the database. Run the following command in your terminal to create a model with a corresponding migration file.


php artisan make:model -m ChatMessages

This command will generate ChatMessages.php in the app/Models directory and a migration file in the database/Migrations directory.

Open app/Models and update the content of ChatMessages.php with this.


<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class ChatMessages extends Model

{

    use HasFactory;

    protected $fillable = ['sender_id', 'receiver_id', 'text'];



    public function sender()

    {

        return $this->belongsTo(User::class, 'sender_id');  

    }

    public function receiver()

    {

        return $this->belongsTo(User::class, 'receiver_id');

    }

}

In the code above, the $fillable property allows sender_id, receiver_id, and text to be mass-assigned. Additionally, the model defines two many-to-one relationships: the sender relationship links to the user model via the sender_id, and the receiver relationship links to the user model via receiver_id, representing the sender and receiver of the message, respectively.

Next, navigate to database/Migrations and update the file that ends with create_chat_messages_table.php with the following code.


<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

return new class extends Migration

{

    /**

     \* Run the migrations.

     \*

    public function up(): void

    {

        Schema::create('chat_messages', function (Blueprint $table) {

            $table->id();

            $table->foreignId('sender_id')->constrained('users');

            $table->foreignId('receiver_id')->constrained('users');

            $table->string('text');

            $table->timestamps();

        });

    }

    /**

     \* Reverse the migrations.

     \*

    public function down(): void

    {

        Schema::dropIfExists('chat\_messages');

    }

};

In the migration above, the database schema of the chat application is defined. This schema includes an id for each message, foreign keys sender_id and receiver_id that reference the users table, a text column to store the content of the message, and timestamp columns to record when each message is created and updated.

After updating the model and migration, the next step is to run the migration. Do that by running the command below in your terminal.


php artisan migrate

Setup the event broadcast

Next, set up the event broadcast by navigating to channels.php file in the routes folder and update it with the following.


<?php

use Illuminate\Support\Facades\Auth;

use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('chat', function ($user) {

    return Auth::check();

});

In the code above, a new broadcast channel named "chat" is defined, and a closure is passed to ensure that only authenticated users can subscribe to the channel.

After defining the channel, create a new event which will be broadcast to the client on the "chat" channel. Run the command below in your terminal to generate the event class.


php artisan make:event MessageSent

The command will create a new file called MessageSent.php in the app/Events directory. Open the MessageSent.php file and update it with the below content.


<?php

namespace App\Events;

use App\Models\ChatMessages;

use Illuminate\Broadcasting\Channel;

use Illuminate\Broadcasting\InteractsWithSockets;

use Illuminate\Broadcasting\PresenceChannel;

use Illuminate\Broadcasting\PrivateChannel;

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

use Illuminate\Foundation\Events\Dispatchable;

use Illuminate\Queue\SerializesModels;

use App\Models\User;

class MessageSent implements ShouldBroadcast

{

    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user, $chatMessage;

    /**

     \* Create a new event instance.

     \*

    public function __construct(User $user, ChatMessages $chatMessage)

    {

        $this->user = $user;

        $this->chatMessage = $chatMessage;

    }

    /**

     \* Get the channels the event should broadcast on.

     \*

     \* @return array\<int, \\Illuminate\\Broadcasting\\Channel\>

     \*/

    public function broadcastOn(): array

    {

        return [

            new PrivateChannel("chat"),

        ];

    }

    public function broadcastWith()

    {

        return ['message' => $this->chatMessage];

    }

}

In the code above, the user and the message are passed into the constructor. The broadcastOn() method specifies that the event will be broadcast on a private channel named "chat", while the broadcastWith() method adds the chat message to the broadcast payload.

Create the controller

The next step is to create a controller class that will contain all the application logic. To create the controller, run the command below in your terminal.


php artisan make:controller ChatController

This command will create a new file called ChatController.php in the app/Http/Controllers folder.

Open the ChatController.php file and replace the content with the following.


<?php

namespace App\Http\Controllers;

use App\Events\MessageSent;
use App\Http\Controllers\Controller;
use App\Models\ChatMessages;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class ChatController extends Controller
{
    public function index(User $user)
    {
        $messages = ChatMessages::with(['sender', 'receiver'])
            ->whereIn('sender_id', [Auth::id(), $user->id])
            ->whereIn('receiver_id', [Auth::id(), $user->id])
            ->get();
        return response()->json($messages);
    }

    public function store(User $user, Request $request)
    {
        $message = ChatMessages::create([
            'sender_id' => Auth::id(),
            'receiver_id' => $user->id,
            'text' => $request->message,
        ]);
        broadcast(new MessageSent($user, $message))->toOthers();
        return response()->json($message);
    }
}

In the code above, the necessary imports required for the chat application are added. In the index() function, messages exchanged between the currently authenticated user and the specified user are retrieved while eager-loading the sender and receiver information using the relationships. In the store() function, a new message from the currently authenticated user to the specified user is saved to the database, and the MessageSent event is broadcasted on the chat channel.

Update the routes

Now, it's time to update the routing table. So, in the web.php file located in the routes folder, add the following imports at the beginning of the file.


use App\Http\Controllers\ChatController;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

Next, replace the dashboard route with the following*.*


Route::get('/dashboard', function () {
    return view('dashboard', [
      'users' => User::where('id', '!=', Auth::id())->get()
    ]);
})->middleware(['auth', 'verified'])->name('dashboard');

Route::get('/chat/{user}', function (User $user){
    return view('chat', [
        'user' => $user
    ]);
})->middleware(['auth', 'verified'])->name('chat');

Route::resource(
    'messages/{user}', 
    ChatController::class, ['only' => ['index', 'store']]
)->middleware(['auth']);

These routes set up the necessary endpoints for the chat application. The /dashboard route displays a list of users, excluding the current user. The /chat/{user} route loads the chat interface for a selected user. The Route::resource line sets up routes for retrieving and sending messages using the ChatController.

Frontend setup

Now that the backend part of the chat application is fully set up, it’s time to build the user interface of the chat application.

Install Vue.js

First, install Vue.js and the necessary plugin to detect .vue files by running the following commands:


npm install vue vue-loader  

npm install --save-dev @vitejs/plugin-vue

Create a new Vue.js component

Next, navigate to resources/js and create a new folder called components. In the newly created components folder, create a new file called ChatBox.vue. Update its content with the following.


<template>
    <div class="chat-box">
        <div ref="messagesBox" class="chat-messages">
            <div v-for="(message, index) in messages" :key="index" :class="['chat-message', { 'own-message': message.sender_id === sender.id }]">
                {{ message.text }}
                <span class="timestamp">{{ formatTimestamp(message.created_at) }}</span>
              </div>
            </div>
            <div class="chat-input">
              <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." />
              <button @click="sendMessage">Send</button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { nextTick, onMounted, ref, watch } from 'vue';
export default {
    props: {
        receiver: {
            type: Object,
            required: true,
        },
        sender: {
            type: Object,
            required: true,
        },
    },
    setup(props) {
        const messages = ref([]);
        const newMessage = ref("");
        const messagesBox = ref(null);
        const scrollToBottom = () => {
            messagesBox.value.scrollTop = messagesBox.value.scrollHeight;
        };
        watch(
            messages,
            () => {
                nextTick(() => {
                    scrollToBottom();
                });
            },
            { deep: true }
        );
        const sendMessage = () => {
            if (newMessage.value.trim() !== "") {
                axios
                    .post(`/messages/${props.receiver.id}`, {
                        message: newMessage.value,
                    })
                    .then((response) => {
                        messages.value.push(response.data);
                        newMessage.value = ""; 
                    });
            }
        };
        const formatTimestamp = (timestamp) => {
            const date = new Date(timestamp);
            return `${date.getHours()}:${date.getMinutes()}`;
        };
        onMounted(() => {
            axios.get(`/messages/${props.receiver.id}`).then((response) => {
                messages.value = response.data;
            });
            Echo.private('chat')
                .listen("MessageSent", (response) => {
                    if (response.message) {
                        const messageExists = messages.value.some(msg => msg.id === response.message.id);
                        if (!messageExists) {
                            if ((response.message.sender_id === props.sender.id && response.message.receiver_id === props.receiver.id) || 
                                (response.message.sender_id === props.receiver.id && response.message.receiver_id === props.sender.id)) {
                                messages.value.push(response.message);
                            }
                        }
                    }
            });
        });
        return {
            messages,
            newMessage,
            messagesBox,
            sendMessage,
            formatTimestamp,
        };
    },
};
</script>

<style scoped>
.chat-box {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0 auto;
    height: 500px;
}
.chat-messages {
    display: flex;
    flex: 1;
    flex-direction: column; 
    align-items: flex-start; 
    overflow-y: auto;
    padding: 15px;
}
.chat-input {
    display: flex;
    align-items: center;
    border-top: 10px;
}
.chat-input input {
    flex: 1;
    padding: 10px;
    margin-right: 5px;
}
.chat-input button {
    padding: 10px;
    border: 1px solid #0a0a0a;
}
.chat-message {
    display: inline-block;
    padding: 10px;
    margin: 5px 0;
    border-radius: 15px;
    word-wrap: break-word; 
}
.chat-message.own-message {
    align-self: flex-end;
    background-color: #d1e7ff;
    color: #0056b3;
    text-align: right;
}
.chat-message:not(.own-message) {
    align-self: flex-start;
    background-color: #e1e1e1;
    color: #333;
}
.timestamp {
    font-size: 0.8rem;
    color: #aaa;
    margin-left: 10px;
  }
</style>

The code above is a Vue.js component responsible for the chat functionality. The <template> section defines the HTML structure, including a div for displaying messages and an input area for sending new messages, with each message conditionally styled to distinguish between messages sent by the current user and others.

In the <script> section, the receiver and sender are passed as [props](https://v2.vuejs.org/v2/guide/components-props) to identify the two users currently chatting. Within the setup function, reactive references messages, newMessage, and messagesBox are defined. The scrollToBottom() function ensures that the chat view always scrolls to display the latest message, while the sendMessage() function handles sending new messages to the server and updating the chat view accordingly.

The formatTimestamp() function formats the message timestamps for display. The onMounted lifecycle hook fetches existing messages and listens for the MessageSent event on the “chat” channel using Laravel Echo. Finally, the <style> section adds CSS styles to define the layout, the appearance of the messages, and the input area.

Update the Echo.js and App.js file

After creating the chat components, the next step is to update the JavaScript files. In the resources/js directory, locate the echo.js file and replace the content of the file with the following.


import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

In the updated echo.js file, Echo is configured to use Pusher as the broadcaster for real-time events. It uses the key and cluster information specified earlier in our .env file to connect the application to the Pusher service.

Then, replace the content of the resources/js/app.js file with the content below


import './bootstrap';
import { createApp } from 'vue' 
import ChatBox from './components/ChatBox.vue' 

createApp({}) 
    .component('chat-box', ChatBox)
    .mount('#app')

In the updated app.js file, the Vue.js application is set up by importing the necessary dependencies and creating a new instance. The ChatBox component is registered to the alias chat-box, and mounted to the HTML element with the id app, enabling the chat functionality in your application.

Update the vite.config.js file

Vite is a build tool that is responsible for building and bundling your frontend assets. You’ll need to update its config file so it can detect and build Vue.js components.

To do that, in the root directory, open the vite.config.js and update it with the following content:


import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; 

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({ 
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    }, 
});

In the updated vite.config.js, the laravel-vite-plugin\ is configured to handle the CSS and JS files for your Laravel application. The @vitejs/plugin-vue\ plugin is also included to enable support for Vue.js single-file components. Additionally, the resolve\ section sets up an alias to use the Vue ES module build, which is necessary for single-file component support. This configuration ensures that Vite can properly process and serve your application during the development and build stages.

Update the Blade templates

The final step in the frontend setup is updating the Blade templates. Navigate to resources/views and update dashboard.blade.php with the below content.


<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{Auth::user()->name}} 
        </h2>
    </x-slot>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($users as $user)
                            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                                <div class="p-6">
                                    <div class="flex items-center">
                                        <a href="{{ route('chat', $user) }}">
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                    {{ $user->name }}
                                                </div>
                                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                                    {{ $user->email }}
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

In the updated dashboard.blade.php, the list of users profiled on the system is returned, such that a logged-in user can chat with any of them.

Also in resources/views, create a new file chat.blade.php and update it with the following content.


<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{$user->name}}
        </h2>
    </x-slot>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100" id='app'>                       
                    <chat-box
                        :receiver = "{{ $user }}"
                        :sender = "{{ Auth::user() }}"
                    />
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

This file holds the Vue.js component responsible for the chat functionality. It sets up the layout and includes the chat-box\ component, passing the authenticated user as the sender and the selected user as the receiver as props to it.

Test the chat application

It’s finally time to see your chat app in action. By default Laravel events are dispatched on queues, therefore you’ll need to start up a queue worker instance so your event can be processed. Run the command below in your terminal to start your queue.


php artisan queue:listen

Next, register two new users. Log in with one user in a regular browser tab, and log in with the other user in an incognito tab. Then, select each other on both tabs to start chatting.

Below is a video demonstration of the chat application.

That’s how to build a real-time chat application using Laravel, Pusher and, Vue.js

This tutorial has equipped you with the knowledge to effectively build a real-time chat application. You learned how to set up the backend logic and event broadcast using WebSockets with Laravel, handle real-time communication with Pusher, and build a dynamic frontend using Vue.js to listen for and display events.

With these skills, you can now create more complex real-time applications, or add additional features to your chat app. The possibilities are endless!

Keep building!

Rust vs Go? Which Should You Learn in 2026

Damilola Oshungboye — Tue, 27 Aug 2024 11:55:30 +0000

Introduction

Rust and Go are languages with applications in performance-critical applications. This article breaks down the main features and typical use cases for both languages.

Within the last decade, Rust and Go have grown quite popular. Memory-safe Rust is mainly used in systems programming. Go is favored because of its simplicity and built-in concurrency, which makes it perfect for building scalable web applications and APIs. Interestingly, the largest technology firms, such as FAANG and Fortune 100 companies, use both Rust and Go for different aspects of their applications.

In this article, you will discover the answer to the question "Should I Rust or Should I Go?". You'll learn how Rust and Go compare to each other in terms of concurrency, and memory safety among others. Also, you'll learn about the different scenarios best suited to each language.

By the end of this article, you will be well informed of key features and use cases of both languages, leading you to an informed decision in choosing the right one for your project.

Overview of Rust

Rust is a high-level programming language with a strong focus on memory safety created by Graydon Hoare, a former Mozilla employee as a personal project in 2006. Memory-safe languages like Rust have been recommended by the United States Department.

Key Features

Memory Safety: Rust enforces memory safety at compile time without using garbage collection.
Performance Comparable to C/C++: Rust’s is as fast as C and C++.
Ownership System: Rust supports concurrent operations using its ownership and borrowing system.
Strong Type System and Pattern Matching: Rust's type system and pattern matching features enhance code safety.

Overview of Go

Go is an open-source programming language created at Google by Robert Griesemer, Rob Pike, and Ken Thompson in 2009. It's statically typed and similar to C++ in syntax. In an interview, Rob Pike said Go was created because of the difficulty associated with concurrency operations in C++ at the time.

Key Features

Simplicity: Go has a moderate learning curve which makes it easier to work with.
Fast Compilation Times: Go compiles quickly, allowing for rapid development and iteration.
Built-in Concurrency: Go’s built-in goroutines and channels allow for concurrency operations.
Strong Standard Library: Go’s standard library is very robust.

Comparison: Rust vs Go

Performance

In this section, you'll learn how Rust and Go compare in terms of speed and memory usage.

1. Benchmark comparisons

Benchmarks Game compared the runtime and memory usage of both Rust and Go. For all the algorithms tested, it was discovered that the most optimized Rust code has a faster execution time compared to the most optimized Go code.

For the regex-redux and binary trees algorithms, Rust by far outperforms Go as shown in the images below. Rust code uses less memory and executes in a shorter time compared to Go.

2. Memory Management and Efficiency

Both Rust and Go are memory-safe languages although they achieve this in different ways. Rust by design favours fast execution while Go favours fast compilation. Rust's ownership and borrowing system prevent many common causes of memory leaks at compile time, while Go relies on automatic garbage collection to free up unused memory at runtime. However, both languages can still experience memory leaks under certain circumstances.

Concurrency and Parallelism

In this section, you'll learn about the unique approaches of Rust and Go to concurrency and parallelism.

1. Rust's Approach

Rust supports concurrency through the use of the async/await paradigm and the use of threads and channels.

Async/Await Paradigm in Rust

Rust's async/await paradigm allows you to write asynchronous code that is easier to read and maintain. Runtimes built on Rust's Future trait like Tokio or async-std are often used with the async/await paradigm. Here's an example of using async/await:

use tokio::time::{sleep, Duration};

async fn execute_task() {
    println!("Task has begun.");
    sleep(Duration::from_secs(2)).await;
    println!("Task is done.");
}

#[tokio::main]
async fn main() {
    let task_handle = tokio::spawn(async {
        execute_task().await;
    });

    task_handle.await.unwrap();
    println!("Main function completed.");
}

In the code above, the execute_task function simulates a task that takes some time to complete. The Rust Tokio runtime manages the main function's execution without blocking the thread, allowing other asynchronous tasks to proceed concurrently. The main function then waits for the task to finish before printing a completion message.

Here's the output:

Using Threads and Channels

Rust's standard library provides support for threads and message-passing concurrency with channels. Here's an example:

use std::sync::mpsc;
use std::thread;
use std::time::Duration;

fn main() {
    let (sender, receiver) = mpsc::channel();

    thread::spawn(move || {
        let messages = vec![
            String::from("greetings"),
            String::from("from"),
            String::from("the"),
            String::from("worker"),
        ];

        for message in messages {
            sender.send(message).unwrap();
            thread::sleep(Duration::from_secs(1));
        }
    });

    for received_message in receiver {
        println!("Received: {}", received_message);
    }
}

In the code above, a new thread which runs concurrently with the main thread is created using thread::spawn(). This thread sends a series of messages through a channel created using mpsc::channel(). As messages are sent from the spawned thread, they are received and printed by the main thread.

Here's the output:

2. Go's Approach

Go achieves concurrency through the use of goroutines and channels. Goroutines are lightweight threads managed by the Go runtime which allows functions to run concurrently. A regular function can be made into a goroutine by adding the go keyword in front of it.

Concurrency with Goroutines

package main

import (
    "fmt"
    "time"
)

func displayDigits() {
    for i := 1; i <= 5; i++ {
        time.Sleep(1 * time.Second) // sleep to demonstrate concurrency
        fmt.Printf("Digit: %d\n", i)
    }
}

func displayCharacters() {
    for i := 'A'; i <= 'E'; i++ {
        time.Sleep(1 * time.Second)
        fmt.Printf("Character: %c\n", i)
    }
}

func main() {
    // Launch the goroutines
    go displayDigits()
    go displayCharacters()

    // Wait for the goroutines to complete
    time.Sleep(6 * time.Second)
    fmt.Println("Finished")
}

In this code above, two goroutines are defined. The first goroutine prints digits from 1 to 5, while the second prints characters from A to E. The main function launches these goroutines and then waits for 6 seconds so the goroutines have enough time to run before printing "Finished".

Here's the output

Goroutines can communicate with each other using channels. Here's an example:

package main

import "fmt"

func transmitMessages(ch chan string) {
    msgs := []string{"Greetings", "Simplicity", "Concurrency"}

    for _, message := range msgs {
        ch <- message
    }

    // Properly close the channel after sending all messages
    close(ch)
}

func main() {
    ch := make(chan string)

    // Launch the transmission of messages concurrently
    go transmitMessages(ch)

    for message := range ch {
        fmt.Println(message)
    }
}

In the code above, the transmitMessages function, running as a separate goroutine, sends a series of messages through a channel. Then, the main function receives these messages and prints them.

Here's the output:

Learning Curve and Development Speed

Here, you'll learn about the learning curve of both languages and the development speed.

Rust has a much steeper learning curve compared to Go which has been hailed by developers worldwide for its simplicity and easy-to-understand syntax. Rust on the other hand takes a whole lot more time to understand as developers often struggle with important concepts like its memory safety rules, type conversions, and type checks.

The same can be said about development speed because Go is easier to understand, and developers can begin working with it faster as opposed to Rust which can take a bit of time because of the steep learning curve.

Safety and Reliability

In this section, you'll learn about the different measures both languages set to allow for safety and reliability.

1. Rust’s Ownership System

In Rust, when a value is assigned to a variable or moved to a function, the ownership is transferred, leading to the original variable being inaccessible. This is to prevent double-free errors and data races. Rust's ownership system ensures memory safety by managing the memory allocation and deallocation process.

fn main() {
    {
        let c2 = String::from("Ownership model");
        let c3 = c2;
        println!("{}", c3);
    }
}

In this example, we have a string c2. When we assign c2 to c3, Rust invalidates c2. If you try to print c2, you'll get a compile-time error as shown in the image below.

2. Go’s error handling

Unlike in most modern programming languages, errors in Go are not exceptions. They're simply values that implement the error interface. This approach allows for a more readable and maintainable code. Below is the error interface used by Go.

type error interface {
    Error() string
}

Ecosystem and Community

When comparing Rust and Go, it's important to consider their ecosystems, community sizes, and corporate support

1. Community size and activity

Both Rust and Go have active and vibrant communities. Although Go stands out with more GitHub stars and active users compared to Rust. Below is the GitHub Page and the number of Stack Overflow questions asked for both languages.

Rust
Below is the Rust Github page with 96k stars and Stack Overflow page with over 42k questions tagged [rust].

Rust GitHub Stars

Rust Stack Overflow Questions

Go
Below is the Go Github page with 122k stars and Stack Overflow page with over 73k questions tagged [go].

Go GitHub Stars

Go Stack Overflow Questions

According to a 2024 survey by Stack Overflow, developers voted Rust as the most admired programming language for 8+ years in a row.

2. Corporate support and adoption

Rust is backed by Mozilla, and now by the Rust Foundation. Tech companies like Dropbox, Cloudflare, and Meta are using Rust for performance-intensive services.

Go was created at Google, and it has substantial corporate support and adoption. Major companies like Google, Uber and Dropbox rely on Go for many of their backend services. Docker, a leading containerization technology was built mainly in Go.

3. Popular Frameworks and Libraries

Rust:

Actix: A powerful, fast web framework.
Rocket: A web framework focused on ease of use and safety.
Serde: A widely-used library for serialization and deserialization.
Tokio: A runtime for writing asynchronous applications with Rust.

Go:

Gin: A lightweight web framework that’s easy to use.
Beego: An open-source, high-performance web framework.
GORM: The most popular ORM for Go, making it easy to handle databases.
Cobra: A library for creating powerful CLI applications.

Here is a table summarizing the key differences between each language.

Aspect	Rust	Go
Memory Safety	Enforced at compile time without the need for garbage collection.	Relies on a garbage collector.
Performance	Comparable to C/C++.	Slightly lower than Rust but fast enough for many applications.
Concurrency Model	Utilizes an ownership model with threads and async tasks.	Built-in support with goroutines and channels.
Type System	Strong with pattern matching and type inference.	Statically typed with a simpler type system.
Compilation Times	Slower due to complex optimizations and safety checks.	Faster compilation.
Ease of Use	Steeper learning curve due to advanced features.	Easier to learn.
Standard Library	Rich but less extensive, focusing more on performance-critical and systems programming features.	Comprehensive, especially strong in networking, I/O, and web server support.
Community and Ecosystem	Rapidly growing, especially among systems programmers interested in safety and performance.	Large and mature, widely used in cloud infrastructure, networking, and DevOps tools.
Error Handling	Based on `Result` and `Option` types.	Uses the `error` interface, treating errors as values.

When to use Rust

Rust particularly excels in performance and memory-critical scenarios or scenarios where a large amount of data is being processed. You can use Rust in the following scenarios:

Systems programming: Rust because of its memory safety can be used to build system-level programs like operating systems.
High-Performance Computing: Rust is ideal for applications that require exceptional performance.
Large-scale distributed system: Rust memory safety and speed make it an excellent choice when building distributed systems.

When to use Go

Go can be used in a variety of scenarios. Its built-in concurrency makes it a great choice for applications handling multiple requests. Overall, Go is a good fit if you value code simplicity and readability over performance. You should use Go if you need:

Concurrent operations: Go allows for concurrent operations using its goroutines.
Fast development: Go has a straightforward syntax with a standard library which allows for speedy development.
Simplicity and readability: Go’s easy-to-understand syntax makes it ideal for large teams.

Conclusion

At the end of the day, both Rust and Go are great choices when it comes to building server-side applications. However, the correct choice will be based on the requirements of your application and what you want to achieve.

This article covered the key features, use cases and differences between the Rust and Go languages, equipping you with the knowledge to decide on the best one according to your project requirements.

Resources

Here are some resources for further reading.

Rust Ownersip Model

Bootstrap vs. Tailwind CSS: A Comparison of Top CSS Frameworks

Damilola Oshungboye — Fri, 16 Aug 2024 13:26:38 +0000

Introduction

There are numerous CSS frameworks available today, each with its unique offerings. Selecting the right CSS framework among these options can be challenging, as most users are unsure which framework best suits their web development project.

In this article, we will compare two of the most popular CSS frameworks - Bootstrap and Tailwind CSS. You'll learn about their key features, design philosophies, and the CSS customization options for each one. Also, apart from that, you'll get familiar with the developer experience, performance, and support from the community for each of the frameworks.

By the end of this article, you will know the ins and outs of each framework in detail to decide which CSS framework best fits your needs for a project.

Let's get into it!

Overview

First, let's understand the frameworks Bootstrap Vs Tailwind CSS.

Bootstrap

Bootstrap is a free, open-source CSS framework for creating responsive web pages. Formerly called Twitter Bootstrap, it was created in mid-2010 by Mark Otto and Jacob Thornton, former Twitter engineers, to improve the consistency of Twitter's (now X) internal tools.

Key Features:

Grid system: 12-column grid system that simplifies responsive design.
Component-based: Pre-styled components make building and deploying consistent user interfaces easy.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework created by Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger. They shared a common frustration with existing CSS frameworks. Due to its utility-first approach, it gained rapid popularity, offering granular control over styling.

Key Features:

Utility-First: Tailwind CSS is known for its utility-first approach, offering a wide range of utility classes for styling without needing custom CSS.
Customization: Thanks to its utility classes, developers can easily customize designs using Tailwind CSS.

Here is the summary of the key features of each of this frameworks.

Tailwind CSS	Bootstrap
Utility-first approach	Pre-designed UI components
Responsive design	Responsive CSS flexbox and grid system
Very flexible and customizable	Built-in themes and customization
Integration with modern tools	Compatibility with many tools and platforms

Design Philosophy & Approach

In this section, you'll understand the different principles upon which these two frameworks are built. Understanding the principles behind a framework is very important for determining how it fits into your use case.

Bootstrap

Bootstrap adopts a component-based approach, offering a set of pre-built and pre-styled components like navbars and buttons that you can easily use while building UIs. This design philosophy has several benefits:

Rapid Development: Quickly assemble responsive UIs without extensive CSS customization.
Consistency: Ensures your application's uniform look and feel.

Below is an example of its usage.

<button class= "btn btn-success">
   Success
</button>

In the example above, the btn and btn-success classes style the button with Bootstrap's predefined styles for primary buttons.

Tailwind CSS

Tailwind CSS, on the other hand, follows a utility-first approach, providing an extensive set of utility classes that directly manipulate the styling of HTML elements. This design philosophy has several benefits:

Customization and Flexibility: Build custom designs by composing utility classes directly in your HTML.
Maintainability: Reduces the need to write custom CSS, making your styles more maintainable.

Below is an example of its usage.

<div class="bg-red-500 text-black rounded-lg">
  Tailwind CSS utility classes
</div>

In the example above, the bg-red-500 sets the background color, text-black sets the text color, and rounded-lg rounds the corners of the div. This way, you can create custom designs without writing additional CSS.

Customization and Theming

While Bootstrap and Tailwind CSS provide CSS customization and theming options, Tailwind CSS excels in this area.

Bootstrap

You can customize Bootstrap by overriding the default classes with your custom class. You can modify the color, spacing, and typography to match your design requirements by using CSS Overrides or SASS variables. Overriding default classes using CSS Overrides is easier than SASS variables, aimed at more advanced users. Here's how you can customize Bootstrap using CSS Overrides:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="custom.css">
    <title>Hello, world!</title>
  </head>
</html>

As seen in the sample above, your document's HTML file should include a Bootstrap-compiled file and a custom CSS file in the head tag. Create a custom custom.css file in the same directory as your index.html file.

For example, to style all your buttons with a red background and white text, you can override the default Bootstrap style by adding the below code to your custom.css file.

.btn {
  background-color: #ff0000; /* Red background */
  color: #ffffff; /* White text */
}

Below is the result.

Bootstrap also allows you to customize the theme using SASS variables. To change the primary theme color in your components, you can add the following in your custom SASS file, as seen below.

$theme-colors: (
  "primary": #ff0000
);

@import "node_modules/bootstrap/scss/bootstrap";

This will update the primary color across all Bootstrap components that use it.

Pros

Ease of Use: Simple overrides with CSS.
SASS Variables: Advanced CSS customization through variables.

Cons

Limited Flexibility: Customizing CSS can be time-consuming due to the need for extensive overrides.

Tailwind CSS

Tailwind CSS allows developers to configure and create new utility classes. Here's an example of customizing a Tailwind CSS utility class:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './**/*.html', // 
  ],
  theme: {
    extend: {
      colors: {
        customColor: '#ff0000',
      },
    },
  },
  plugins: [],
}

<div class="bg-customColor text-white p-4 rounded-lg">
  This is a customized div using Tailwind CSS.
</div>

Below is the result.

In the example above, the bg-customColor class is a custom utility class defined in the Tailwind CSS configuration file - tailwind.config.js.

Tailwind CSS also supports theming through its configuration file. Here's an example:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './**/*.html', // 
  ],
  theme: {
    colors: {
      primary: '#ff0000',
      secondary: '#00ff00',
    },
    spacing: {
      sm: '8px',
      md: '16px',
    },
  },
  plugins: [],
}

This configuration above updates the project's primary and secondary colors and spacing.

Pros

Highly Customizable: Extensive utility classes and configuration.
Flexibility: Creating and applying custom utilities and themes is easy.

Cons

Learning Curve: Requires mastering utility classes to create custom layouts.

Developer Experience

Bootstrap's learning curve is moderate compared to Tailwind CSS's steep one. Bootstrap's pre-built components can be easily integrated into an application to create layouts, unlike Tailwind CSS, which requires mastering utility classes to create layouts and styles.

Integration with popular front-end frameworks

Bootstrap and Tailwind CSS integrate with popular front-end frameworks such as React and Vue.js. You can easily add Bootstrap and Tailwind CSS to your frontend application by installing from npm or adding a CDN link to the head of your HTML document. Here's how you can add them to your application:

Bootstrap

//method 1
npm install bootstrap 
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

//method 2
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Using the React-Bootstrap framework, Bootstrap also offers easier integration with React. It is a complete re-implementation of the Bootstrap components using React components instead.

It can be installed from npm like this.

npm install react-bootstrap bootstrap

Tailwind CSS

You can add Tailwind CSS to your project using any of the options below.

//method 1
npm install tailwindcss
npx tailwindcss init
npx tailwindcss build tailwind.css -o tailwind-build.css

//method 2
<script src="https://cdn.tailwindcss.com"></script>

In the first method, we could NPM. And in the second method, we could add it to the <script> tag of our project.

Tailwind CSS also offers tighter integration with Vue.js through the VueTailwind Component Library. It offers a set of pre-built, fully customizable Vue components that can be used to jump-start development.

It can also be installed through npm, as shown below.

npm install vue-tailwind

Developer Productivity

When it comes to developer productivity, Bootstrap, and Tailwind CSS, each improve developers' productivity in a unique way.

Bootstrap improves productivity by increasing development speed, allowing developers to design UIs quickly using its pre-built components. Tailwind CSS, on the other hand, will enable developers to spend less time creating custom designs through its utility classes.

Performance and Bundle Size

In this section, we'll compare Bootstrap and Tailwind CSS to see which framework significantly influences page load times and bundle size.

Impact on Page Load Times

Bootstrap's pre-built CSS and JavaScript components tend to be large, potentially slowing page load times. You should only include the necessary components to minimize the bundle size, resulting in faster page load times.

Tailwind CSS, on the other hand, has a relatively faster page load time because it generates CSS on-demand according to the utility class used.

To demonstrate this, we created two custom HTML files—one for Bootstrap and the other for Tailwind CSS. After measuring the page load time with Chrome Lighthouse, we found that the Tailwind CSS page loaded faster than the Bootstrap page. Tailwind CSS's faster load times can be attributed to its lightweight utility classes compared to Bootstrap's bulkier files. Below is the performance rating for each framework according to Lighthouse.

Tailwind CSS's Performance Rating

Bundle size analysis

1. File size evaluation

Bootstrap's bundle size can be larger than Tailwind CSS's. Below is a screenshot of the bundle size generated by both frameworks.

Bootstrap Bundle Size

TailWind CSS Bundle Size

2. Optimization Techniques

Bootstrap and Tailwind CSS offer optimization techniques to reduce bundle size and improve performance. You can minimize bundle size across both frameworks by Tree-Shaking, which is a process that involves purging unused CSS files from your .css file.

Bootstrap can also be optimized further by Minification.

Aspect	Bootstrap	Tailwind CSS
Impact on Page Load Times	Pre-built components can slow page load times; selective inclusion needed	Generates CSS on-demand; typically faster page load times
Bundle Size	Generally larger bundle size	Typically smaller bundle size
Optimization Techniques	Tree-shaking, Minification (.min.css and .min.js files)	Tree-shaking, purging unused CSS

The table above provides an overview of critical performance and bundle size differences between the two frameworks.

Design and Aesthetics

In this section, we'll explore the design and aesthetics of Bootstrap and Tailwind CSS. We'll look at the consistency of design in both frameworks, as well as the aesthetic appeal and flexibility of CSS customization.

Design consistency

Bootstrap provides a consistent set of default styles for common HTML elements, ensuring a cohesive look and feel across different components. The default styles include typography, colors, Bootstrap buttons, Bootstrap icons, Bootstrap forms, and other elements.

Tailwind CSS does not have predefined default styles. Users can create custom designs by utilizing the utility classes provided.

Flexibility of Design Customization

While Bootstrap allows for CSS customization, it is less flexible than Tailwind CSS, as discussed in the Customization and Theming section. Achieving a fully unique look requires extensive overrides of default styles. Although Bootstrap also has the Bootstrap theme desginer AIs for template generators. Examples Bootstrap theme desginer AIs include Bootstrapi Studio, Mobirise, etc.

Tailwind CSS, on the other hand, allows developers to create customized designs directly in HTML using utility classes.

Aesthetic appeal in default styles

Bootstrap offers a polished and professional look and feel out of the box. This you can find in Bootstrap buttons, Bootstrap icons, Bootstrap components etc. Its default styles are aesthetically pleasing, offering solid foundations for web app development with minimal tweaking.

While Tailwind CSS doesn't have a predefined aesthetic, its utility-first approach enables a high degree of creativity and variation in design. The images below show that Bootstrap provides a polished, consistent look for the button component, while Tailwind CSS allows for custom button designs.

Bootstrap's Primary Button Style

Tailwind CSS's Design Variation

Community and Ecosystem

This section will compare the community and ecosystem in Bootstrap vs Tailwind CSS.

Community support

Bootstrap stands out as a large and vibrant community with more users, GitHub stars, and contributors than Tailwind CSS's small but rapidly growing community. Below is the GitHub Page and the number of StackOverflow questions asked for both frameworks.

Bootstrap

Below is the Bootstrap Github repository with 169k stars and Stack Overflow pages with over 103k questions tagged [twitter-bootstrap].

Bootstrap's GitHub Page

Bootstrap's StackOverflow Questions

Tailwind CSS
Also, below is Tailwind CSS Github Repo with about 81.2k starts and about 10k number of questions on Stack Overflow.

Tailwind CSS's GitHub Page

Tailwind CSS's StackOverflow Questions

Documentation quality

Bootstrap official documentation is one of the best around, having benefitted from years of continuous iteration; it is well-organized, covering all aspects of the framework. Tailwind CSS also features impressive documentation, but it can't be compared to Bootstrap's at the time of writing.

Third-Party Resources

Bootstrap and Tailwind CSS have a wealth of online tutorials and guides created by the community and third parties. Some examples include:

Bootstrap:

Tailwind CSS:

Here's a table summarizing the community and ecosystem differences between Bootstrap and Tailwind CSS:

Aspect	Bootstrap	Tailwind CSS
Community Support	Large and established community; extensive user base and contributors.	Smaller but rapidly growing community; increasing engagement.
Documentation Quality	Extensive, well-organized, continuously updated documentation.	Comprehensive and well-maintained documentation; newer compared to Bootstrap.
Third-Party Resources	Wide range of tutorials, themes, plugins, and extensions available.	Growing number of tutorials and resources; fewer themes and plugins than Bootstrap.

Conclusion

In this article, we compare two popular front-end frameworks, Bootstrap and Tailwind CSS, examining their strengths and weaknesses. Overall, both frameworks are great choices when building modern applications. The right choice, however, depends on your project requirements.

You can try out both Bootstrap and Tailwind CSS. Experiment with their features and see which aligns best with your project requirements. Visit the Bootstrap documentation and the Tailwind CSS documentation to get started.

Twilio Challenge: Can You Beat Gemini? AI-Powered Game of Tic Tac Toe

Damilola Oshungboye — Mon, 17 Jun 2024 00:20:22 +0000

This is a submission for the Twilio Challenge

What I Built

I built an interactive AI-powered game of Tic-Tac-Toe called "Can You Beat Gemini?" This project allows players to test their Tic-Tac-Toe skills against Gemini AI, providing a challenging and fun experience.

Features

AI Integration: The game uses the Gemini AI model to analyse the game state and predict the best possible moves to challenge the player effectively.

Real-Time Interaction: Players interact with the game through digits (1-9). The game captures the player's move and processes it. The AI then responds with its move. This interaction is facilitated using Twilio's Programmable Voice capabilities, making the gameplay seamless and engaging.

Dynamic Game Board: The game state is visually represented, updating in real-time as moves are made. This ensures players can keep track of their and the AI's moves.

Demo

You can try it out by scanning the QR Code in the image or by texting the code join front-trace to the number +14155238886 on WhatsApp. Next call number +1 (806) 615-3056 to play the Tic Tac Toe game.

Video of How it Works

In the video description above, a call is made to +1 (806) 615-3056 to begin the game. The user selects any number between (1-9) to make their move. Gemini AI then analyzes the game state and responds with its move. The game continues with the user and AI taking turns until a winner emerges.

Source Code

ThatCoolGuyyy / Tic-Tac-Toe-Gemini-Twilio

Can You Beat Gemini? Tic Tac Toe

Welcome to the Can You Beat Gemini? Tic Tac Toe project! This is an interactive Tic-Tac-Toe game where you play against an AI opponent named Gemini(Gemini API). The AI is designed to challenge your strategic thinking and make your Tic-Tac-Toe games more interesting.

Video Demo

RPReplay_Final1718633328.mov

How it works

Twilio Programmable Voice is used to get input from the user in digits (1-9), each representing a cell on the Tic-Tac-Toe board. Then, Gemini AI to play against the human user. Finally, Twilio Messaging API (WhatsApp) is used to send the updated board when both AI and human players make their moves. Twilio Functions was used to host the code.

View on GitHub

Twilio and AI

I used Twilio to get input from the user in digits (1-9), each representing a cell on the Tic-Tac-Toe board. Then, I used Gemini AI to play against the human user. Finally, I used the Twilio Programmable Messaging (WhatsApp Sandbox) to send the updated board when both AI and human players make their moves. I also used Twilio Functions to host the code.

Additional Prize Categories

Twilio Times Two - The project uses Twilio Programmable Messaging (WhatsApp Sandbox), Twilio Programmable Voice and, Twilio Functions.

Entertaining Endeavors - The project creatively combines a classic game with advanced AI technology, making it not just a simple Tic Tac Toe game but an engaging battle of wits against an AI opponent. By leveraging Twilio to receive user inputs and send real-time game updates via WhatsApp, the project ensures continuous engagement and keeps the players entertained throughout the game.

Twilio Challenge: AI-Powered Voice Assistant

Damilola Oshungboye — Sun, 16 Jun 2024 15:37:29 +0000

This is a submission for the Twilio Challenge

What I Built

I created an AI-powered voice assistant designed to handle complex questions. Many existing voice assistants struggle with these types of inquiries, which can be frustrating for users. My assistant aims to bridge this gap.

Demo

To try out this app, make a call to +1 (423) 454-3174. You will be greeted with a prompt, say your request after the initial prompt.

Source code

ThatCoolGuyyy / Twilio-Gemini

AI-Powered Voice Assistant

How it works

Twilio Programmable voice get the user's request and then passes it to Gemini API which then return a response. Twilio Functions was used to host the code

View on GitHub

Here is an article I wrote that has detailed steps to build the PHP-Laravel version of this voice assistant - https://www.twilio.com/en-us/blog/build-ai-powered-voice-assistant-twilio-laravel-openai

Twilio and AI

I used Twilio Programmable voice to get the user's request, this request is then passed into Gemini API which processes the request and returns a response. Twilio Programmable Voice is then used to return the response to the user in voice format. Twilio Functions was used to host the code.

Additional Prize Categories

Twilio Times Two - The project uses Twilio Programmable Voice and Twilio Functions.

Impactful Innovators: My AI-powered voice assistant addresses the challenge of accessing information. It helps to bridge the gap between users who might struggle with traditional search methods, like the elderly, people with disabilities, or those with limited literacy skills.

How To Build an AI-Powered Voice Assistant With Twilio, Laravel, and OpenAI

Damilola Oshungboye — Fri, 14 Jun 2024 17:06:30 +0000

Voice assistants, such as Amazon Alexa and Apple's Siri have become integral to people’s lives, as they're so helpful with mundane tasks, such as setting reminders and turning on smart home devices. However, most voice assistants struggle with complex questions and queries, leaving users disappointed.

In this tutorial, you will learn how to build an AI-powered voice assistant that can understand and respond to complex questions using Twilio Programmable Voice and OpenAI.

Prerequisites

To complete this tutorial, you will need the following:

A Twilio account, free or paid. If you don't have one, create a Twilio account for free.
A phone number you own. Add it to your Twilio account.
PHP 8.2 (or higher) installed
Composer installed globally
An OpenAI account. Create a free account here.
ngrok and a free ngrok account
Basic knowledge of the Laravel framework would be nice, although it’s not required

Build the AI-powered voice assistant

Create a new Laravel project

To create a new Laravel project using Composer, you need to run the command below in your terminal.

composer create-project laravel/laravel voice-assistant

Next, navigate to the project’s working directory and start the application development server by running the commands below in the terminal.

cd voice-assistant
php artisan serve

Once the application server is up, open http://localhost:8000/ in your browser to access the default Laravel welcome page, as shown in the image below.

The next step is to open the project in your preferred IDE or text editor.

Install the Twilio PHP Helper Library

The Twilio PHP Helper Library provides functionality for interacting with Twilio's APIs. With this library, you can easily interact with Twilio Programmable Voice in the application. Twilio Programmable Voice uses Twilio Markup language(TwiML), to specify the desired behaviour when receiving an incoming call or SMS.
In your project’s working directory, run the command below in a new terminal window or tab to install the library.

composer require twilio/sdk

Retrieve your Twilio API credentials

You will need your Account SID and Auth Token to interact with Twilio Programmable Voice using the Twilio PHP Helper Library. You can find them in the Account Info panel on your Twilio Console dashboard, as shown in the image below. Copy the respective values.

Store the Twilio access token in your .env file

After retrieving your Twilio access tokens, you need to ensure that they are stored securely in your project using environment variables.
In your project’s root directory, locate the .env file. This file is used to securely store sensitive data and other configuration data. Update it with the following:

TWILIO_SID=<your_twilio_account_sid>
TWILIO_AUTH_TOKEN=<your_twilio_account_auth_token>
TWILIO_PHONE_NUMBER=<your twilio_account_phone_number>

Then, replace the placeholders with your corresponding Twilio access token values which you just copied.

Install the OpenAI Laravel Helper Library

OpenAI is a leading AI research lab known for creating advanced language models trained on extensive amounts of data. The OpenAI Laravel package allows you to easily use OpenAI models in your application. Install the package by running the command below.

composer require openai-php/laravel

Finally, set up the package configurations by executing the below command:

php artisan openai:install

This command will create a new file called openai.php in the config folder. The file contains the configurations required to connect to the OpenAI API.
To use the OpenAI API, you'll need an API key for authentication. Log in to your OpenAI account and navigate to the API Keys section. Click Create new secret key to generate your key.

After retrieving the key, store it and add the below line to your .env file

OPENAI_API_KEY=<your_openAI_api_key>

Remember also to replace the placeholder with your corresponding API Key.

Update the routes

Run the command below in your terminal.

php artisan install:api

This command will create a new file named api.php in the routes folder. Add the below import statement at the beginning of the new file.

use App\Http\Controllers\VoiceController;

Then, update the file contents to include the following routes.

Route::post('/voice', [VoiceController::class, 'voiceInput']);
Route::post('/chat', [VoiceController::class, 'speechtoText']);

Here you are defining the routes for the voice and chat endpoints.

Note: In Laravel, API routes defined in the api.php file have a prefix of api/. This means the route defined as /voice will be accessible at /api/voice. The same applies to /chat.

Create the controller

The next step is to create a controller class that will house all the application logic. To create the controller, run the command below in your terminal.

php artisan make:controller VoiceController

This command will create a new file called VoiceController.php in the app/Http/Controllers folder.
Open the VoiceController.php file and replace the content with the following.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Twilio\TwiML\VoiceResponse;
use OpenAI\Laravel\Facades\OpenAI;

class VoiceController extends Controller
{
    private $response;

    public function __construct()
    {
        $this->response = new VoiceResponse();
    } 

    public function voiceInput(Request $request)
    {
        $gather = $this->response->gather(['input' => 'speech', 'action' => '/api/chat']);
        $gather->say('Hello, I am your personal assistant. How can I help you today?');

        return $this->response;
    }

    public function speechtoText(Request $request)
    {
        $result = OpenAI::chat()->create([
            'model' => 'gpt-3.5-turbo',
            'messages' => [
                ['role' => 'user', 'content' => $request->SpeechResult],
            ],
        ]);
        $this->response->say($result->choices[0]->message->content);
        $this->response->gather(['input' => 'speech', 'action' => '/api/chat']);

        return $this->response;
    }
}

In the code above, the necessary imports required for the voice assistant are added. In the voiceInput() function, the TwiML (Twilio Markup Language) gather() method listens for the caller's input, and specifies the action to take on receiving it. Next, the TwiML say() method is used to prompt the caller. The gather() method converts the audio received into text and adds the transcribed audio to the $request object using the parameter speechResult.
After gathering the user's input, the $request object is sent as a POST request to the /api/chat endpoint, corresponding to the speechToText() function. The speechToText() function retrieves the transcribed audio from the request using the speechResult parameter and then forwards this transcribed audio to OpenAI Chat API for processing.
OpenAI's Chat API requires a role parameter containing a message with a system role and content for the intended actions. The model must also be configured, it is set to gpt-3.5-turbo in this tutorial. Finally, TwiML is used to return the response from OpenAI to the user in audio format.

Set up the Ngrok server

To make your voice assistant accessible from the internet, you can use a tool called Ngrok. Ngrok allows you to expose your local Laravel server to the internet.
Run the command below in your project's root directory.

ngrok http 8000

This command creates a secure tunnel that allows you to access your local Laravel server running on port 8000 from a public URL provided by Ngrok.
After executing the command, you should see the following in your terminal.

Copy the Forwarding URL displayed here.

Configure TwiML

Create a New TwiML App

Next, you need to create a new TwiML app. This is to ensure reusability across multiple phone numbers. You would be able to easily add the created TwiML app to any number in your Twilio account.
In your Twilio Console, navigate to Explore Products > Voice > Manage > TwiML apps, and select Create new TwiML App.

Then, fill out the form, as in the screenshot above, and replace <your_ngrok_address> with the Ngrok Forwarding URL you copied earlier, append "/api/voice" to the end of it, and click Create.

Add TwiML to your number

You must also add the created TwiML app to your phone number to ensure that Twilio executes your code when a call is made to/from the phone number.
In the Twilio Console, navigate to Phone Numbers > Manage > Active numbers, and click on your Twilio number.

Then, in the Voice Configuration section for your phone number, set Configure with to TwiML App, set TwiML App to your TwiML app, and then click Save.

Test the application

It’s finally time to see your AI-powered voice assistant in action! You can test it by calling your Twilio phone number from your verified phone number.
When you successfully set up the system, a call will be made to your Twilio phone number. A voice prompt will ask for your request and the system will intelligently respond to it.

What’s next for building an AI-powered voice assistant with Twilio, Laravel, and OpenAI?

Congratulations on successfully creating your very own AI-powered voice assistant using Twilio Programmable Voice and OpenAI!

This comprehensive tutorial guided you through setting up the necessary tools, integrating Twilio and OpenAI, and building a voice assistant using the Laravel framework. Now, your voice assistant is ready to respond intelligently to any questions you might have.

So, what's next on your journey? Here are a few suggestions:

Integration with External APIs: You can improve your voice assistant by integrating with external APIs. For example, you could integrate with e-commerce platforms to enable voice-based shopping experiences.
Interaction History: You can also implement a feature that allows your voice assistant to remember previous interactions, and extract context from it. This would allow your voice assistant to provide more tailored and relevant responses.

Cheers to building and learning!