DEV Community: Abdulsalaam Noibi

My Portfolio is Alive: Built with React, Cloud Run, and Gemini 3.0

Abdulsalaam Noibi — Wed, 14 Jan 2026 13:19:05 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi, I'm a Full Stack Developer with a passion for Cloud Architecture and Applied AI. For 2026, my goal wasn't just to update my CSS; I wanted to transform my portfolio from a static digital business card into an intelligent agent that actively helps me get hired.

I believe the future of web development is "Agentic"—where applications don't just display data but perform tasks. This portfolio is my proof of concept for that future, marking my transition from standard frontend development to building AI-First Cloud Applications.

Portfolio

Note: If the embed above doesn't load immediately, please click here to view the live app. Be sure to try the Recruiter Mode button in the bottom right corner!)

How I Built It

I architected this application as a production-grade microservice, moving away from simple static hosting to a containerized environment on Google Cloud.

1. The AI Engine (Gemini 3.0)

I integrated Google's Gemini 3 Pro Preview model directly into the React frontend using the @google/generative-ai SDK.

Recruiter Match: When a user pastes a Job Description, I send a structured prompt to Gemini containing my portfolio data and the JD. The AI analyzes the fit and returns a formatted report explaining why I am the right candidate.
The PDF Generator: I implemented a feature where Gemini generates a persuasive, custom cover letter in real-time, which is then compiled into a PDF using jsPDF for the recruiter to download.

2. The Infrastructure (Cloud Run)

Instead of a basic static site, I built a custom Docker container:

Stage 1: Node.js builds the React artifacts.
Stage 2: Nginx (Alpine) serves the static files. I configured Nginx with gzip compression and aggressive caching headers to ensure a perfect Lighthouse performance score.
Deployment: I used Google Cloud Build to automate the container creation and deployed it to Google Cloud Run as a serverless service.

3. The Design

To reflect the AI nature of the site, I built a "Living Neural Network" background using tsparticles. The nodes connect dynamically as you move your mouse, visualizing the concept of "connecting the dots" between my skills and the job requirements. I used Framer Motion for "Liquid UI" transitions, ensuring the AI analysis results spring onto the screen organically.

Tools Used:

Google AI Studio: For prompt engineering and model selection (gemini-3-pro-preview).
Google Cloud Run: For hosting the containerized application.
VS Code AI Agents: I utilized AI agents to scaffold the initial components and Nginx configurations.

What I'm Most Proud Of

I am most proud of the Instant Cover Letter Generator.

Most portfolios leave the hard work to the recruiter. My portfolio does the work for them. By combining Generative AI with client-side file manipulation, I turned a standard "Contact Me" interaction into a tangible productivity tool. It demonstrates that I don't just know how to use an API—I know how to solve real user problems with it.

I'm also proud of the "Safe Mode" Nginx configuration I developed. Getting React Router to work correctly with Docker/Nginx on Cloud Run (handling 404s on refresh) was a challenge but architecting a solid conf.d injection strategy makes the app incredibly robust.

Powered by Google Gemini & Cloud Run

Great Opportunity

Abdulsalaam Noibi — Wed, 07 Jan 2026 11:24:13 +0000

Join the New Year, New You Portfolio Challenge: $3,000 in Prizes + Feedback from Google AI Team (For Winners and Runner Ups!)

Jess Lee for The DEV Team ・ Jan 1

#devchallenge #googleaichallenge #career #gemini

[Boost]

Abdulsalaam Noibi — Sun, 08 Dec 2024 09:46:15 +0000

Mastering Trace Analysis with Span Links using OpenTelemetry and Signoz (A Practical Guide, Part 1)

Abdulsalaam Noibi ・ Oct 23

#opensource #python #devops #tutorial

Mastering Trace Analysis with Span Links using openTelemetry and Signoz (A Practical Guide,Part 2)

Abdulsalaam Noibi — Thu, 24 Oct 2024 11:17:17 +0000

In the previous tutorial, we learnt how to use span links to track interactions within distributed systems

In this tutorial, we will look at how to implement Best Practices for Using Span Links and Advanced Use Cases

Best Practices for Using Span Links in OpenTelemetry

When dealing with complex distributed systems, choosing the right tracing strategy is essential for maintaining clarity and performance.

In OpenTelemetry, the two primary tools at your disposal are parent-child relationships and span links. Let’s explore when and how to use span links effectively, especially in comparison to the more common parent-child relationships.

1. When to Use Span Links and Parent-Child Relationships

Understanding when to use span links as opposed to parent-child traces is crucial for correctly mapping how your services communicate.

Parent-Child Relationship: The Standard Tracing Model

Parent-child relationships in tracing are straightforward. If one service calls another, the trace creates a direct parent-child link between the two spans. The child span is dependent on the parent span, clearly showing the flow of operations.

This model works well in synchronous operations, where one task directly triggers another, and they follow a linear progression, such as:

A user request triggers a function.
The function calls a database.
The database returns a response.
Each of these actions would be a child span of the previous one, forming a neat, sequential trace.

Span Links

In real-world systems, especially those using microservices or asynchronous processes, not all operations follow this neat, hierarchical flow. This is where span links become valuable.

A span link allows you to connect two spans that may not follow a direct cause-and-effect pattern. For example:

Asynchronous Tasks: A message queue may send a request to a processing service, but you might also want to connect that request to the original service that triggered it.

Batch Jobs: You may have a system that processes data in batches, where multiple child jobs are linked back to a single trigger event, but these jobs don’t execute sequentially.

Processes Where Span Links Add Value:

Decoupled or Asynchronous Systems:
Where one process kicks off another, but there’s no direct call.

Multiple Parents: If multiple processes contribute to one result (e.g., data from several services aggregates into one report), span links allow you to connect all related spans.

Correlated Events: Span links are ideal when you need to associate spans from different traces, such as when a failure in one service causes an error in another indirectly.

Processes that makes Span Links Redundant:

Synchronous Operations: If the relationship between tasks is direct and synchronous, span links can clutter your trace visualization without adding real value. In this case, stick to parent-child relationships for simplicity.

Use Sampling Strategies with Span Links to optimize Tracing Performance:

In high-traffic systems, not every span or link needs to be captured. Sampling is a strategy where only a portion of the traces are recorded, ensuring you capture enough data for analysis without overwhelming your system.

Head-Based Sampling: This captures traces at the entry point (head) of your system. You can apply this to key services, ensuring span links are only created for high-priority or important traces.

Tail-Based Sampling: This samples traces based on the outcome, such as capturing only traces that result in errors. You can use this to ensure span links are used in cases that are most likely to need deep investigation, such as failures.

2. Naming and Structuring Span Links for Clarity

Good naming conventions and structured traces are important in order to have perfect observability data, especially when span links are involved.The name of a span should clearly describe what it represents. This becomes more important when using span links, as the relationship between spans is not always visually obvious.

Consistent Naming Conventions:

Use a consistent pattern for span names, such as including the service name, function, or action. For example, a span for a payment processing service might be named payment-service.processPayment.

Indicate the Role of Linked Spans:

In your span names, indicate the role of the linked span if relevant. For example, user-authentication.request could be linked to session-creation.init, making the connection between them clear.

Group Related Spans: group spans logically For instance, if multiple microservices contribute to one larger process, ensure that the span links and naming help identify which service is responsible for each part.

Document Link Reasons: If possible, document why a span link exists, either in the trace itself (via metadata) or in your documentation. This can be as simple as a brief comment in the tracing code explaining the relationship between two spans.

Advanced Use Cases Error Tracking for using Span Links in your Applications

How to Use Span Links to Trace Error Flows Between Services

Imagine you're managing a complex web application with numerous microservices,each microservice is responsible for a different part of the user experience.

A user might place an order, which triggers a payment service, an inventory service, and a shipping service. If an error occurs somewhere in this chain, it’s crucial to know where it happened and how it impacted other services. This is where span links come in.

Span links allow you to connect traces that aren't in a direct parent-child relationship, but still have contextual relevance.using span links for error tracking, you can correlate the error in one service with the subsequent impact on other services, even if they don’t share a direct relationship.

Use Case: Let’s say your payment service encounters an error while trying to process a transaction, and this failure indirectly impacts the shipping service. Using a span link, you can create a relationship between the error span from the payment service and the span of the shipping service that detected the issue.

This helps you visualize the flow of the error across services and understand its ripple effects.

Code Example for Capturing and Linking Error Spans Across Microservices

Let’s look at how you might capture these errors using OpenTelemetry and create span links between them. Here’s a simple example using Python:

from opentelemetry import trace

# Initialize tracer
tracer = trace.get_tracer("order-service")

# Create a span in the payment service
with tracer.start_as_current_span("payment-processing") as payment_span:
    try:
        # Simulate a payment process that raises an error
        process_payment()
    except Exception as e:
        payment_span.record_exception(e)
        payment_span.set_status(trace.Status(trace.StatusCode.ERROR, str(e)))

        # Capture the error trace and create a span link
        error_link = trace.Link(payment_span.get_span_context())

# Now in the shipping service, you can link this error trace
with tracer.start_as_current_span("shipping-service", links=[error_link]) as shipping_span:
    # Handle the impact of the payment error here
    process_shipping()

Explanation of the above code snippet

The payment-processing span captures the error when the payment fails.
A span link (error_link) is created using the context of the payment-processing span.

This link is then added to the shipping-service span, allowing you to trace how the payment error affects the shipping process.

You can use tools like SigNoz to visualize these errors, making it much simpler to identify the root cause of issues.

Implementing Span Links in Complex Microservice Architectures

Real-world Use Case: Using Span Links to Track Customer Interactions Across a Multi-Service Architecture

Let’s take a real-world scenario. Imagine an e-commerce platform where customer actions, like placing an order, are handled by several services: Order Service, Inventory Service, Payment Service, and Shipping Service.

A user placing a single order can generate multiple spans, one for each service.

Now, these spans are usually arranged in a parent-child relationship, where the Order Service might be the parent of the Payment Service and so forth. But what if you want to track a more complex relationship?

For example, if the Inventory Service independently checks stock levels after a payment confirmation, it’s not a direct child of the Payment Service. A span link allows you to connect these services directly, creating a more accurate picture of how your services interact.

Why Span Links is important in Complex Architectures

Span links give you the flexibility to capture these non-linear interactions, providing a comprehensive view of user actions that span across services. This is especially useful for troubleshooting user experiences, like a delayed shipment due to an inventory check.

How Span Links Enhance Observability in Serverless or Event-Driven Systems

In serverless or event-driven systems, services often interact in a decoupled manner events trigger actions without the services having direct knowledge of one another.

For example, an event from a Payment Service might trigger an Inventory Update Service through an event bus. Since these services don’t have a parent-child relationship, tracing them with traditional methods can be challenging.

How To Use Span Links for Serverless

Span links can act as the glue between these disjointed services. When an event is generated from one service and consumed by another, you can create a span link that connects the original event's span with the consuming service’s span.

This way, even if your serverless functions are running independently, you can still get the full story of an interaction.

Example: Let’s say your Payment Service sends a message to a queue after processing a payment, and this message triggers a Stock Update Function in a serverless architecture.

Here is a code snippet on how you could link these spans

# In the Payment Service
payment_span = tracer.start_span("payment-succeeded")
# Send message to queue with payment_span's context

# In the Stock Update Function triggered by the message
stock_update_span = tracer.start_span(
    "stock-update",
    links=[trace.Link(payment_span.get_span_context())]
)

With this setup, you can trace the flow from the payment processing to the stock update, even though they operate asynchronously.

When visualized, it becomes clear how different parts of your serverless application interact, improving your ability to diagnose bottlenecks or unexpected delays.

Why is this approach important for Observability

Traditional monitoring might show you that a stock update was slow, but with span links, you can trace that delay back to the specific payment event that triggered it.

This level of insight is invaluable for optimizing your system and ensuring a smooth user experience.

Recap of Key Learnings:

Span links are a powerful underutilized feature of OpenTelemetry that can significantly enhance trace correlation in distributed systems.

But what exactly does that mean, and why should you care?

Imagine your application as a network of different services and processes, all communicating and working together to fulfill user requests.you will often encounter scenarios where a straightforward parent-child relationship between traces doesn’t quite capture the complexity of what’s happening.

For instance, what if a background job is processing events triggered by a user action, or multiple services are working together asynchronously? This is where span links comes in to solve the challenge easily.

So, what are the benefits of using span links?

Relating Spans Beyond Parent-Child Constraints:

Span links allow you to connect traces across services without being bound by the typical hierarchical structure of parent and child spans.

This is particularly useful when you want to relate events that occur concurrently or share a common context but don’t have a direct parent-child relationship. For example, linking a trace from a user-facing service to a background process can give you a more holistic view of how user actions impact system performance.

It helps to improve Debugging and Troubleshooting:

With span links, you gain a richer perspective on how different services interact, especially during complex workflows. By seeing which spans are related through links, you can identify bottlenecks, error patterns, or performance issues that might be difficult to spot otherwise. This makes span links a powerful tool for debugging issues that span multiple services.

It provides Better Visibility in Asynchronous Systems:

For applications that rely on asynchronous processing, such as those using message queues or event-driven architectures, span links are invaluable.

They allow you to trace the lifecycle of a task or message as it flows through different services. This can help you understand the impact of a single event across your entire system, making it easier to optimize and refine your processes.

In short, span links allow you to create a more connected and meaningful picture of your application’s behavior, leading to better observability and a deeper understanding of how your distributed systems operate.

By leveraging span links effectively, you can enhance trace correlation, making troubleshooting faster and providing a more complete view of your system's performance.

Links to Relevant OpenTelemetry Documentation for Span Links

For those looking to go deeper into the official guidance on span links and related concepts, the following resources will be valuable for your research:

OpenTelemetry Span Links Documentation

This is the go-to reference for understanding how to create and manage span links. It covers the API specifications for linking spans, with examples in various supported programming languages. It’s a great starting point for understanding the technical details of how span links work under the hood.

OpenTelemetry Context Propagation

Understanding context propagation is key to making the most of span links, and this documentation provides a thorough overview of how context is managed across traces. It’s especially helpful if you’re looking to ensure consistency in your tracing data across distributed services.

OpenTelemetry Sampling Strategies

When implementing span links, it's crucial to know how sampling affects your traces. This section of the documentation provides detailed guidance on how to configure different sampling strategies, helping you strike the right balance between data granularity and performance.

These links are valuable resources for both reference and practical application, making them essential for anyone serious about mastering OpenTelemetry's tracing capabilities. Bookmark these resources and use them as a guide as you build out more complex observability setups.

If you have questions or further explanation, kindly share them in the comments sections.

Mastering Trace Analysis with Span Links using OpenTelemetry and Signoz (A Practical Guide, Part 1)

Abdulsalaam Noibi — Wed, 23 Oct 2024 14:00:04 +0000

Purpose of This Tutorial

The purpose of this Tutorial is to provide a practical and easy-to-understand guide on span links in OpenTelemetry.

It aims to help developers, especially those working with complex and asynchronous systems, understand what span links are, how they differ from traditional parent-child relationships in tracing, and why they are valuable for better trace correlation.

By the end of this guide, you will gain the skills needed to effectively use span links to track interactions within distributed systems, leading to improved observability and debugging.

A Brief Introduction to Distributed Tracing

In the past, Applications were typically monolithic, meaning every process or feature is executed as a single unit on one server.Monitoring such applications was straightforward.

For Example: if something went wrong, you could look at logs from that server to identify the problem. However, the rise of microservices changed this simplicity.

Now, modern applications are often made up of dozens or even hundreds of smaller, independent services that work together. For example: when you use a mobile app to place an order, there might be separate services to handle user authentication, process payments, manage inventory, and send confirmation emails.

These services don’t always live on the same server and can even communicate over the internet, which adds complexity to tracking what happens when you interact with an application.

This is where distributed tracing comes in. Think of distributed tracing as a way to follow a single request as it travels through various services in a complex application.It tracks the journey of a request through a complex system.

In modern applications, requests often travel through multiple services, each running on different machines. Distributed tracing helps us visualize this journey, making it easier to identify bottlenecks and errors.

It’s like a detective’s map that connects the dots between each step of the process, showing you how long each part took and where any issues occurred. When you look at a trace, you see a timeline of how your request moved through different services, making it easier to identify slowdowns, errors, or failures.

Code Repo
Here’s the code repo for this tutorial

The Role of OpenTelemetry in Modern Observability

OpenTelemetry is a key player in enabling this kind of visibility. It’s an open-source observability framework that allows developers to collect data like logs, metrics, and traces from their applications.It serve as a toolset for capturing detailed information about what’s happening inside your services.

In the world of modern observability, OpenTelemetry helps you understand the performance and health of your distributed applications. It acts like a bridge that gathers data from various services and sends it to tools like SigNoz, where you can visualize what’s going on. This makes OpenTelemetry invaluable for identifying bottlenecks, tracking down errors, and ensuring that your applications run smoothly.

By using OpenTelemetry with distributed tracing, you can get a full picture of how your applications behave, making it easier to diagnose issues and improve the user experience.

The Significance of spans as a building blocks for tracing in OpenTelemetry

As software, especially distributed systems grow in complexity, understanding their inner workings becomes a challenging task. That's where OpenTelemetry's spans come in to solve the challenge easily.

What Are Spans?

A span is a fundamental unit of work in OpenTelemetry’s tracing system.It is a single operation or event that occurs within your application.

It captures what happened during that operation, how long it took, and any relevant details, like whether it succeeded or failed.

For example, imagine your application processes a user request:

When the request comes in, OpenTelemetry creates a span that represents the request being received.
If the request then triggers a database query, another span is created to represent that database interaction.
If the app calls another service, another span tracks that.

Key attributes of a span:

Name: A descriptive label for the operation (e.g., "Get User Data").
Start and End Timestamps: The time the operation began and ended.
Parent Span: The span that initiated this operation.
Tags: Additional metadata (e.g., HTTP status code, error messages).

How Spans Work Together to Create Traces

Individually, spans are useful, but they are effective when they work together to form a trace.

A trace is a collection of spans that represents the entire journey of a request or operation as it flows through your system.

Let’s go back to our user request example:

The trace begins when the request enters the system, and a root span is created.As the request triggers the database query, the database interaction span is linked to the root span, showing that it’s part of the same process.

Additional spans for calling other services get added to the trace.By looking at this trace, you can see the big picture of how the request traveled through different parts of your system. It helps you understand not just what happened, but how different parts of your application are connected.

Why Are Spans Important?

Pinpointing Problems: Spans help you zoom in on where things go wrong. If a request is slow, spans can tell you whether it’s the database query, the network call, or some other part of the process that’s causing the delay. You can see which span took longer than expected, making it easier to find bottlenecks.
Building Context: Each span contains contextual information like start time, end time, and custom labels (attributes). This data provides insights into what was happening at a particular moment in your system, like the specific user ID involved in a request or the query that was executed.
Creating Relationships: Spans have relationships with one another, often in a parent-child structure. The root span is the parent, and subsequent spans are its children. This structure helps you see the order in which events occurred and how they depend on one another. It’s like looking at a family tree of operations in your app.
Debugging Distributed Systems: For applications with microservices (where different services handle different parts of a request), spans are especially crucial. They help you track a request as it moves between services, even if those services are running on different servers or in different data centers. This is key for understanding complex interactions between services.

Understanding Span Links in OpenTelemetry

What Are Span Links?

In the world of distributed systems, where multiple services work together to handle a user request, tracing is like a detective's map, it shows the path a request takes as it moves through these services. Each activity in this journey is called a span, and a complete journey is called a trace.

Traditionally, spans are connected using parent-child relationships. Imagine these like a family tree: a parent span initiates a process (like making a request to another service), and child spans represent the activities that happen as a result (like the service processing the request). This is a straightforward way to represent a request’s flow.

But what happens when two spans are related, yet they don’t fit perfectly into that parent-child hierarchy? This is where span links comes in.

A span link allows you to connect two spans that are related but don’t have a direct parent-child relationship. It is like a “reference” or “shortcut” between two activities in a distributed system.

For example, let’s say you have a user making a request that triggers multiple independent processes, like sending an email and writing to a database. These processes aren’t child activities of each other; they happen side by side. Using a span link, you can indicate that the email sending span and the database writing span are related to the same initial user request, even though they aren’t directly connected in the parent-child concept.

How Span Links Differ from Parent-Child Relationships

Parent-Child Relationship: it is a straightforward chain of events. A user sends a request (parent), which triggers the creation of a record in a database (child). The child span wouldn’t exist without the parent span, making it a direct consequence.

Span Links: These are more like drawing dotted lines between activities that are related in some context but don’t follow a direct chain of actions. They provide a way to say, “These things are related, even though one didn’t directly cause the other.” Span links are ideal for representing parallel activities or events that interact but aren’t strictly hierarchical.

Importance of Span Links in Complex and Asynchronous Systems

Span links are particularly valuable in complex and asynchronous systems, where the flow of events doesn’t always follow a clear parent-child path. Here are some scenarios of how it can be used practically;

Asynchronous Workflows:

Imagine a user request that starts with a background job (like generating a report). The initial request finishes, but the report generation continues in the background.

With the implementation of span links, you can relate the initial request span to the background job span, even though they don’t follow a direct parent-child pattern.

Microservice Communication:

In a microservices architecture, services often communicate with each other in ways that aren’t strictly hierarchical.

For instance, a user action could trigger multiple services to process different parts of the data simultaneously. Span links allow you to track these independent and related spans as part of a broader workflow.

Batch Processing: If you’re processing batches of data where each item in the batch generates its own spans, you can use span links to connect these spans back to the original batch process.

This makes it easier to trace the entire lifecycle of a batch and understand how individual items relate back to the main process.

Prerequisites: Tools and Libraries required to Configure Span Links using OpenTelemetry and Signoz

OpenTelemetry SDK: The OpenTelemetry SDK (Software Development Kit) is your toolkit for gathering observability data like traces, metrics, and logs from your application.

It acts as a bridge between your code and observability systems, making it possible to collect detailed information about how your application is running.
Imagine OpenTelemetry as a “camera” that captures snapshots of your application's operations. By integrating the SDK into your app, you’re positioning this camera to record what’s happening behind the scenes.
You’ll need to install the SDK in your application’s programming language (e.g., Python, Java, JavaScript).

(2) SigNoz Setup: SigNoz is an open-source observability tool that allows you to visualize and analyze the data you collect with OpenTelemetry.

Think of SigNoz as the “control room” where you view the footage captured by your OpenTelemetry setup. It’s where you have a clear picture of traces and metrics in your application.
You’ll need to set up a SigNoz instance, which involves deploying it on your local machine or on a server, usually using Docker or Kubernetes.
SigNoz helps transform the raw data into visualizations, like graphs and charts, making it easier to understand what's happening inside your application.

Basic Knowledge of Traces, Spans, and Instrumenting Code:

Traces:

In simple terms, a trace is like a “story” of what happens when a user or a request interacts with your application. It captures all the actions that occur as a result of that interaction, from the initial request to all the services and databases that might be involved.

Imagine a user clicking a button on your website. A trace would record every step of what happens next.

Spans:

Spans are the “chapters” within a trace's story. Each span represents a specific operation or task that takes place as part of a trace.

For instance, if the trace captures the entire process of a user request, a span could represent a single step, like querying the database or calling an external API.

Each span has a start and end time, giving you precise details about how long each step took. This makes it easier to pinpoint any slowdowns or errors.

Instrumenting Code with OpenTelemetry:

Instrumentation is the process of adding code to your application to collect observability data. By instrumenting your code with OpenTelemetry, this typically involves adding a few lines of code where you want to create traces and spans.

For example, you might instrument a database query to see how long it takes or instrument a user login process to track its performance.

The OpenTelemetry SDK makes this easier by providing libraries and functions that you can integrate directly into your code. Think of it like attaching trackers to parts of a machine to monitor how they work together.

Creating Span Links in Python: Step-by-Step Example

Let’s look at a basic example in Python. We’ll use the OpenTelemetry SDK to create two spans and link them together.

from opentelemetry import trace
from opentelemetry.trace import Link
from opentelemetry.sdk.trace import TracerProvider
from opentelemetry.sdk.trace.export import SimpleSpanProcessor, ConsoleSpanExporter

# Set up the tracer provider and span exporter

trace.set_tracer_provider(TracerProvider())
tracer = trace.get_tracer(__name__)
span_processor = SimpleSpanProcessor(ConsoleSpanExporter())
trace.get_tracer_provider().add_span_processor(span_processor)

# Create the first span, simulating some work being done 

with tracer.start_as_current_span("span_one") as span_one:
    span_one.add_event("Processing order")
 order_id = "12345" # Imagine this as an order ID we're processing

# Create a second span with a link to the first span 

with tracer.start_as_current_span("span_two", links=[Link(span_one.get_span_context())]) as span_two:
        span_two.add_event("Updating order status")

# Simulate some additional work here

  print("Order ID: {order_id} has been updated.")

print("Tracing complete")

Explanation of the Above Python Code Snippet

Set Up the Tracer Provider:
The above code snippet begins with a tracer provider, which manages the creation of spans.
This is essential for OpenTelemetry to know how to handle spans.We also configure a SimpleSpanProcessor and ConsoleSpanExporter to print span data to the console. This helps us see what type of spans that are being created and how they’re linked
.

(2) Create the First Span (span_one):

Using the tracer.start_as_current_span method, we create a span called span_one. This could represent any action, like processing an order.

Inside this span, we add an event Processing order to indicate what’s happening at that particular point in time.

We also simulate an order ID (order_id = "12345") that would be used in the next span.

(3) Create the Second Span with a Link (span_two):

Here, we initiated another span called span_two to represent a different, but related action—like updating the status of the order.
Notice the links parameter.We use Link(span_one.get_span_context()) to create a link between span_two and span_one.

This tells OpenTelemetry, "While these actions aren't parent-child, they are related."

Inside span_two, we added another event, Updating order status, and simulate some work like updating an order status in a database.

(4) Output:

When you run this code, you’ll see output in the console from the ConsoleSpanExporter that shows both spans, along with the link between them. This helps visualize how these two spans relate to each other in a trace.

Common Errors to watch out for and How to Troubleshoot the Errors.

(1) Missing Span Contexts:

Error: If you try to create a link without calling span_one.get_span_context(), you’ll get an error because OpenTelemetry requires a valid span context to create a link.

Solution: Always ensure that you are passing a span context when creating a link. Use the .get_span_context() method of an active span.

(2) Linking Unstarted or Ended Spans:

Error: If you attempt to create a link to a span that hasn’t been started or has already ended, you might run into issues where the link is not recognized.

Solution: Make sure that the span you’re linking to is active when you create the link. Creating links with spans that have already ended can cause unexpected behavior in how traces are displayed.

(3) Performance Considerations:

Performance Issue: Linking too many spans can increase the overhead of trace data, leading to performance degradation in high-traffic systems.

Solution: Use links selectively. Only link spans when there is a meaningful relationship that you need to visualize or analyze. For high-traffic environments, you can use OpenTelemetry’s sampling options to reduce the amount of trace data being captured.

Configuring SigNoz for Span Link Visualization

When working with distributed systems, understanding how different parts of your system communicate is crucial. Span links in OpenTelemetry play a vital role in connecting traces that may not have a direct parent-child relationship, providing a clearer picture of how requests flow through your services.

Why Visualizing Span Links Matters

Imagine your application has a payment service that triggers a notification service when a payment is successful. While these services interact, they might not share a direct parent-child relationship.

Span links allow you to relate these interactions, showing that the payment triggered the notification. Visualizing these links helps you see the bigger picture of how independent services correlate in real time.

By setting up SigNoz to visualize these span links, you can gain deeper insights into your application's behavior.

Here’s how you can configure SigNoz to Capture and View Span Links

Step 1: Ensure SigNoz is Properly Installed

To begin, make sure you have SigNoz installed and running on your local environment or in a cloud setup. SigNoz can be deployed using Docker for easy setup.
If you haven’t done this yet, follow the official SigNoz installation guide for your operating system [https://signoz.io/docs/introduction]
Once installed, access the SigNoz UI by navigating to http://localhost:3301 in your web browser. This interface is where you’ll configure settings and visualize your trace data, including span links.

Step 2: Configure OpenTelemetry SDK to include your Span Links

The next step is to ensure that your OpenTelemetry SDK is configured to send span link data to SigNoz.In your application's code, you’ll need to add span links as part of your tracing logic.

Here’s a code snippet in Python programming language:

from opentelemetry import trace
from opentelemetry.trace import SpanKind, Link
from opentelemetry.sdk.trace import TracerProvider
from opentelemetry.sdk.trace.export import BatchSpanProcessor, ConsoleSpanExporter
from opentelemetry.exporter.otlp.proto.grpc.trace_exporter import OTLPSpanExporter

# Set up the tracer provider and add a span processor

trace.set_tracer_provider(TracerProvider())
tracer = trace.get_tracer(__name__)

# Configure the exporter to send spans to SigNoz using the OTLP exporter

otlp_exporter = OTLPSpanExporter(endpoint="http://localhost:4317", insecure=True)
span_processor = BatchSpanProcessor(otlp_exporter)
trace.get_tracer_provider().add_span_processor(span_processor)

# Create two spans, linking the second span to the context of the first

with tracer.start_as_current_span("parent_span") as parent_span:

# Simulate some logic for the parent_span
    print("Parent span is active")

# Get the context of the parent span
parent_context = parent_span.get_span_context()

# Create a linked span and add a link to the parent span's context

with tracer.start_as_current_span(
        "linked_span",
        links=[Link(parent_context)]
    ) as linked_span:

 # Simulate some logic for the linked_span
        print("Linked span is active")

# Ensure all spans are flushed before exiting the application

trace.get_tracer_provider().shutdown()

Explanation of the above python code snippet

We started by configuring the TracerProvider to handle tracing in our application and set up a span processor.

The OTLPSpanExporter is used to send spans to SigNoz’s backend using the OTLP protocol.

Replace http://localhost:4317 with the appropriate SigNoz endpoint if you are not running SigNoz locally.

Secondly, Creating Spans and Links:

The parent_span is created first, representing an initial operation (e.g., a user request).We extract the context of the parent_span using get_span_context(), which allows us to link another span to it.

The linked_span is then created, and a Link is added to reference the parent_span’s context. This signifies that while the linked_span is not a direct child of parent_span, it is related to it.

Lastly, Sending Data to SigNoz:

The span data is processed using the BatchSpanProcessor, which ensures that span data is sent to SigNoz efficiently.

trace.get_tracer_provider().shutdown() is called at the end to ensure that any remaining spans are flushed and exported before the program exits.

Step 3: Update SigNoz Configuration for Tracing Data

To ensure that SigNoz captures span links, you might need to change some settings in your SigNoz collector configuration file.
The collector acts as a middleman that receives trace data from OpenTelemetry and sends it to SigNoz’s backend.
Locate the OpenTelemetry Collector configuration file, often named otel-collector-config.yaml.
Add or update the processors and exporters sections to ensure trace data is correctly forwarded. For example:

processors:
  batch:
    timeout: 5s

exporters:
  otlp:
    endpoint: "signoz-backend:4317"
    insecure: true

service:
  pipelines:
    traces:
      receivers: [otlp]
      processors: [batch]
      exporters: [otlp]

Step 4: Visualize Span Links in SigNoz

Once your application is sending trace data with span links to SigNoz, you can visualize these links by:

Opening the Trace Explorer in the SigNoz UI.
Search for traces related to the services you’re monitoring (e.g., the payment service and the notification service).
In the trace details view, you’ll see a graphical representation of spans, including any links between spans. Linked spans will appear as additional connections between nodes that don’t share a direct parent-child line.
This visualization helps you see how requests flow through your system, even when the services don’t have a strict hierarchical relationship.

Step 5: Adjust Your View for Clarity

In order to have perfect visualization, you need to take note of the following:

Use filters in SigNoz to narrow down trace data to specific services or time periods.
Create custom dashboards to track specific span links if you’re frequently monitoring certain interactions.
Set up alerts in SigNoz to notify you when linked spans indicate potential issues, such as delays between related services.

Next Steps
In this tutorial, we learnt how to use span links to track interactions within distributed systems

In the next tutorial, we will learn the Best Practices for Using Span Links and Advanced Use Cases

#DEVResolutions2024

Abdulsalaam Noibi — Thu, 11 Jan 2024 06:53:56 +0000

Professional Goals:

Happy 2024!

1a.My #DEVResolutions2024 is become a Top 1% Back end Developer

2b.Get A Technical Writing Job

2a. Action Steps: I am currently taking a back end developer course on Udemy

2b. I am already prepared for this Job,Here is my Writing Portfolio clericcoder.hashnode.dev

Timeline: 6 months to achieve my Back end Mastery

Personal Aspirations:

Aspiration: I am aspiring to work at Andela as a a Software Engineer
Why it Matters: This Aspiration is important to me because it would make me achieve my career Goals

DEV Community Contributions:

Contribution Goal: I would contribute to the dev community by writing Articles based on my back end developer journey (my learning process)
Collaboration Plans: I am looking forward to collaborate with other Developer Community on Social Media (Twitter,Reddit).

5 Essential Tips for Junior Developers: Advice I Wish I Knew When I Started

Abdulsalaam Noibi — Fri, 12 May 2023 07:37:40 +0000

I wish I knew these advices when I started as a Junior developer 😮🙌

Here are, 5 advices that a junior developer should inherit 🙂💯

As a fresher or junior developer struggle in making decisions or be confident on what we do.

Follow this advice given by my Seniors that you can inherit if you are a beginner:

1 Don't be afraid to ask questions:

It's better to ask and clarify something you don't understand than to struggle on your own and potentially make mistakes.

2 Learn to debug:

Debugging skills are essential for any developer. Practice using debugging tools and techniques to help you identify and fix issues in your code.

3 Write clean, organized code:

Good coding practices, such as using clear and descriptive names for variables and functions and using proper indentation, will make your code easier to read and maintain.

4 Learn how to use version control:

Version control systems, such as Git, are essential for tracking changes to your code and collaborating with others. Make sure to learn how to use them effectively.

5 Focus on learning the fundamentals:

It's easy to get caught up in learning the latest technologies, but it's important to have a strong foundation in the fundamentals of computer science and programming.
Make sure to spend time learning core concepts such as algorithms, data structures, and software design.

Kindly share the advice you wish you knew when you started as a junior software developer in the comment section.
👇👇👇

How Streams works in Nodejs

Abdulsalaam Noibi — Sat, 06 May 2023 21:53:54 +0000

If you enjoy this topic, you will probably like my articles, tweets, and stuff. If you're wondering, check out my YouTube channel, and don't forget to subscribe and follow since I'm offering programming and motivating tools and information to help you achieve your dreams.

Streams are a powerful feature in Node.js that allows developers to efficiently handle large amounts of data by reading and writing data in chunks. This approach is particularly useful when dealing with large files or data sets, as it allows for more efficient handling of data.

One of the main advantages of using streams is that they are memory-efficient. Instead of loading an entire file or data set into memory at once, streams read and write data in smaller chunks. This means that you can work with large files or data sets without having to worry about running out of memory.

Another advantage of using streams is that they allow for real-time processing of data. For example, you can use streams to process data as it is being uploaded to a server, rather than having to wait for the entire file to be uploaded before processing it. This is particularly useful for video and audio streaming, as it allows for smooth, seamless playback.

In Node.js, streams are implemented using the stream module. There are several different types of streams, including readable streams, writable streams, and duplex streams.

A readable stream, such as a file stream, can be used to read data from a source. An example of reading from a file using a readable stream is:

const fs = require('fs');
const stream = fs.createReadStream('largefile.txt');

stream. On('data', (chunk) => {
  // process the data in chunk
});

stream. On('end', () => {
  console.log('Finished reading the file');
});

A writable stream, such as a file stream, can be used to write data to a destination. An example of writing to a file using a writable stream is:

const fs = require('fs');
const stream = fs.createWriteStream('largefile.txt');

stream. Write('Hello World');
stream. End();

A duplex stream, such as a socket, can be used to read and write data to a source and destination. An example of using a duplex stream is:

const net = require('net');
const stream = net.createConnection({
  port: 80
});

stream. On('data', (chunk) => {
  console.log(chunk.toString());
});

stream. Write('GET / HTTP/1.1\r\n\r\n');

In conclusion, streams are a powerful feature in Node.js that allows developers to efficiently handle large amounts of data by reading and writing data in chunks.

This allows for more efficient handling of data, such as video and audio streaming, and can also be used to handle large files and data sets.

If you enjoy this topic, you will probably like my articles, tweets, and stuff. If you're wondering, check out my YouTube channel and don't forget to subscribe and follow since I'm offering programming and motivating tools and information to help you achieve your dreams.

Understanding the Concept of Decentralized Social Media and how Bluesky fits into it. (Part 1)

Abdulsalaam Noibi — Thu, 27 Apr 2023 11:36:19 +0000

Hey before reading this article Kindly follow me on Twitter

Introduction

Social media has become an integral part of our daily lives, with billions of users around the world sharing their thoughts, experiences, and ideas online. However, the centralized nature of most social media platforms has led to concerns about data privacy, censorship, and the concentration of power in the hands of a few large corporations.

Decentralized social media offers a potential solution to these problems, and Bluesky is one project that is working to make this a reality.

I. Definition of Decentralized Social Media:

Decentralized social media refers to a social media platform that operates using a decentralized network of nodes, rather than relying on a centralized server or data center.

This means that users have more control over their data and the content they share, as well as greater protection against censorship and data breaches.

In a decentralized social media network, users connect directly with each other through peer-to-peer communication, rather than relying on a centralized intermediary.

II. Brief Overview of Bluesky:

Bluesky is a decentralized social media project that is currently being developed by a team within Twitter. The aim of Bluesky is to create a decentralized social media protocol that would allow users to have more control over their data and the content they share online.

The project is still in the early stages of development, and it remains to be seen what form it will eventually produce. However, the team behind Bluesky is working to build a decentralized, secure, and scalable platform while also addressing the challenges of governance, data privacy, and user experience.

With Bluesky, Twitter aims to create a more open and interoperable social media ecosystem that empowers users to control their own data and participate in the development of the platform.

II. What is Decentralized social media?

The current state of social media:

Social media has become an integral part of our lives, with billions of users around the world sharing their thoughts, experiences, and ideas online.

However, the current state of social media is marked by a few large centralized platforms that have significant control over the content and data that users share.

These centralized platforms often face criticism for their handling of user data and privacy, as well as concerns about censorship, fake news, and political polarization.

The drawbacks of centralized social media:

Centralized social media platforms rely on a centralized server or data center to store and manage user data, content, and interactions.

This centralization creates several drawbacks, including:

The concentration of power and control in the hands of a few large corporations, leading to concerns about data privacy and censorship.
A lack of transparency and accountability in decision-making processes, which can lead to inconsistent or biased policies.
The risk of data breaches and cyber-attacks, which can compromise user data and security.
The inability to control the flow and dissemination of content, leading to concerns about fake news, misinformation, and manipulation.

The benefits of decentralized social media:

Decentralized social media offers several potential benefits over centralized platforms, including:

Increased control and ownership over user data, allowing users to decide who has access to their data and how it is used.
A more open and transparent governance model, allowing users to participate in decision-making processes and ensuring greater accountability.
Improved security and privacy, with data stored across a decentralized network of nodes, rather than in a single data center.
Greater freedom of expression, with less risk of censorship or content moderation by a central authority.

III. How Does Decentralized Social Media Work?

Decentralized social media platforms operate using a decentralized network of nodes, protocols, and technologies. Here are some of the key components of decentralized social media:

Decentralized networks and protocols:

Decentralized social media networks operate using a peer-to-peer (P2P) architecture, rather than relying on a centralized server or data center.

This means that users connect directly with each other, without intermediaries. The network is often built on a decentralized protocol, which is a set of rules and procedures that govern how nodes interact with each other.

These protocols can be designed to be open, transparent, and interoperable, allowing different platforms and communities to connect and communicate with each other.

Distributed ledgers and blockchain technology:

Distributed ledger technology (DLT), including blockchain, plays a critical role in decentralized social media. DLT is a type of database that is distributed across a network of nodes, with each node storing a copy of the data.

This decentralized storage system ensures that data cannot be easily tampered with or deleted, and allows for greater transparency and accountability. Blockchain, in particular, is a type of DLT that uses cryptography to create an immutable and transparent record of transactions.

Peer-to-peer communication:

In a decentralized social media network, users communicate directly with each other using peer-to-peer communication. This means that data is transmitted directly between users, rather than through a central server. P2P communication can be facilitated by a range of technologies, including messaging protocols, voice and video communication tools, and content sharing platforms. P2P communication allows for greater privacy and security, as well as faster and more efficient data transfer.

Please stay tuned for Part Two
Kindly follow me on Twitter

Multer vs Cloudinary: Which Solution Reigns Supreme for Your File Upload Needs?

Abdulsalaam Noibi — Wed, 19 Apr 2023 20:55:58 +0000

Multer and Cloudinary are two popular tools used for managing media assets in web applications. Multer is a middleware for handling multipart/form data, which is primarily used for uploading files in Node.js.

On the other hand, Cloudinary is a cloud-based image and video management platform that provides an end-to-end solution for storing, managing, manipulating, and delivering media assets.

This article aims to provide a detailed comparison between Multer and Cloudinary, highlighting their strengths and weaknesses and providing recommendations on when to use each solution.

We'll explore the features, benefits, and limitations of both tools to help you decide which solution is best suited for your use case.

Definition of multer and its purpose

Multer is a middleware for handling multipart/form data, which is primarily used for uploading files in Node.js. It parses the request and extracts the uploaded files, making them available in the request object for further processing.

To use Multer, you need to install it via npm and require it in your Node.js application. You can then create a Multer instance and specify the destination folder where uploaded files should be stored.

Multer also provides options for limiting the size and number of files that can be uploaded.

When a file is uploaded, Multer stores it on disk and generates a unique name for it. You can then access the uploaded file in your request handler and perform further processing on it, such as resizing, renaming, or copying it to another location.

However, Multer has some limitations. First, it's limited to storing uploaded files on disk, which may not be scalable for larger applications or for applications with multiple servers.

Second, it doesn't provide advanced image or video manipulation capabilities, such as resizing, cropping, or optimizing media assets.

Finally, Multer requires additional configuration and management to handle the uploaded files, which may add complexity to your application.

Definition of Cloudinary and its purpose

Cloudinary is a cloud-based image and video management platform that provides an end-to-end solution for storing, managing, manipulating, and delivering media assets.

Its purpose is to simplify the process of managing media assets in web applications while providing advanced features and capabilities.

To use Cloudinary, you need to sign up for an account and integrate it into your web application using one of its APIs or SDKs.

You can then upload media assets to Cloudinary, which automatically stores and manages them in the cloud. Cloudinary provides advanced capabilities for manipulating, optimizing, and delivering media assets to end-users across different platforms and devices.

One of the key benefits of Cloudinary is its scalability. Since media assets are stored in the cloud, you can easily scale up or down depending on your storage and bandwidth requirements.

This makes it an ideal solution for applications with varying traffic and storage needs.

Another benefit of Cloudinary is its advanced media management capabilities. Cloudinary provides features like automatic image and video optimization, responsive design, content delivery, metadata extraction, backup and recovery, and more.

It also supports various image and video formats and provides advanced capabilities like face detection, object recognition, and background removal.

In addition, Cloudinary provides a comprehensive set of APIs and tools for developers to integrate and customize the platform based on their specific needs.

It also offers a free tier with limited features and paid plans based on usage and storage requirements, making it accessible to developers of all sizes.

Comparison between Multer and Cloudinary

Features of Multer include

Parses and handles multipart/form-data
Stores uploaded files on disk
Supports limiting the size and number of files
Provides basic file manipulation capabilities

Features of Cloudinary include

Cloud-based image and video management platform
Stores, manages and optimizes media assets in the cloud
Provides advanced image and video manipulation capabilities
Supports various image and video formats
Provides APIs and tools for integration and customization

When to use Multer versus Cloudinary:

Multer:

When you have simple file uploading needs and want to store uploaded files on disk.
When you want to limit the size and number of files that can be uploaded.
When you want to perform basic file manipulation, such as renaming or copying files.

Cloudinary:

When you need to manage large amounts of media assets and want to store them in the cloud.
When you need advanced image and video manipulation capabilities, such as resizing, cropping, and optimizing.
When you need to support various image and video formats and deliver them to different platforms and devices.
When you want a scalable solution that can handle varying storage and bandwidth requirements.

Practical use case for Multer and Cloudinary

Multer:

A blog application that allows users to upload images for their posts
An e-commerce website that allows vendors to upload product images
A job board that allows applicants to upload their resumes

Cloudinary:

A photo-sharing application that allows users to upload, manage, and share their photos
A video-streaming application that needs to transcode and deliver videos to different devices
An e-learning platform that needs to deliver high-quality images and videos to students across different devices and platforms

Conclusion

Multer is a simple middleware for handling file uploads in Node.js, while Cloudinary is a cloud-based image and video management platform that provides advanced media management capabilities.

Multer is suitable for simple file uploading needs, while Cloudinary is ideal for managing large amounts of media assets, optimizing images and videos, and delivering them across different platforms and devices.

If you need to handle simple file uploads and store uploaded files on disk, Multer is a good choice.

On the other hand, if you need to manage large amounts of media assets, optimize them for delivery, and deliver them across different platforms and devices, Cloudinary is a better choice.

For example, if you're building a blog application that allows users to upload images for their posts, Multer is a good choice.

But if you're building a photo-sharing application that needs to manage large amounts of photos, optimize them for delivery, and deliver them across different platforms and devices, Cloudinary is a better choice.

Ultimately, the choice between Multer and Cloudinary depends on your specific needs and requirements.

I encourage further research and exploration of the two solutions to determine which one is the best fit for your application.

If you enjoy reading this Article
Kindly follow me on Twitter

Revolutionize Your React App with Redux: A Beginner's Guide to Simplifying State Management(PART 2)

Abdulsalaam Noibi — Wed, 12 Apr 2023 13:24:21 +0000

Here is a link to PART 1

Creating a Reducer Function to handle each Action type and Update the Store Accordingly

Reducers are called reducers because they are used in the reduce() function, which is used to reduce an array of values to a single value. In Redux, reducers are used to reduce the current state of the store to a new state based on the action that is dispatched.

Creating a Reducer Function

To create a reducer function in Redux, you need to follow a few conventions. First, the function should take two arguments: the current state and an action. Second, the function should return a new state based on the action that is dispatched.

Here's an example of a simple reducer function:

const initialState = {
  count: 0
};

function counterReducer(state = initialState, action) {
  switch (action. Type) {
    case 'INCREMENT':
      return { count: state. Count + 1 };
    case 'DECREMENT':
      return { count: state. Count - 1 };
    default:
      return state;
  }
}

In the above code snippet example, we're creating a reducer function called counterReducer.

The function takes two arguments: the current state (which is initialized to an object with a count property set to 0) and an action.

The function returns a new state based on the action that is dispatched.

The reducer function uses a switch statement to handle different action types. In this example, we're handling two action types: INCREMENT and DECREMENT.

When the INCREMENT action is dispatched, the function returns a new state object with the count property incremented by 1. Similarly, when the DECREMENT action is dispatched, the function returns a new state object with the count property decremented by 1. If any other action is dispatched, the function simply returns the current state.

Combining Reducers

In larger applications, multiple reducers may handle different parts of the state. To combine these reducers into a single reducer function that can be passed to the store, Redux provides a combineReducers() function.

Here's an example of how to use combineReducers() to combine multiple reducers:

import { combineReducers } from 'redux';

const counterInitialState = {
  count: 0
};

function counterReducer(state = counterInitialState, action) {
  switch (action. Type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const todosInitialState = {
  items: []
};

function todosReducer(state = todosInitialState, action) {
  switch (action. Type) {
    case 'ADD_TODO':
      return { items: [...state. Items, action.payload] };
    case 'REMOVE_TODO':
      return { items: state.items.filter(todo => todo.id !== action.payload) };
    default:
      return state;
  }
}

const rootReducer = combineReducers({
counter: counterReducer,
todos: todosReducer
});

In this example, we're creating two reducers: counterReducer and todosReducer. Each reducer handles a different part of the state.

We're then using combineReducers() to combine these reducers into a single reducer function called rootReducer. The resulting state object will have two properties: counter and todos, which correspond to the state handled by each reducer.

Using the Reducer in a React Component

Once you've created a reducer function and combined it with other reducers using combineReducers(), you can use the resulting reducer function in a React component using the useReducer() hook.

Here's an example of how to use the useReducer() hook to manage state in a React component:

import React, { useReducer } from 'react';

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  function handleIncrement() {
    dispatch({ type: 'INCREMENT' });
  }

  function handleDecrement() {
    dispatch({ type: 'DECREMENT' });
  }

  return (
    <div>
      <h1>Count: {state. Count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

In this example, we're using the useReducer() hook to manage state in a component called Counter. We're passing the counterReducer function as the first argument to useReducer(), along with the initial state of the count (which is an object with a count property set to 0).

We're then defining two functions (handleIncrement() and handleDecrement()) that dispatch the INCREMENT and DECREMENT actions, respectively.

Finally, we're rendering the current count and two buttons that trigger the corresponding actions when clicked.

Creating a selector function to extract a specific piece of data from the store

In Redux, selectors are functions that are used to extract data from the state in a structured way. Selectors are especially useful when the state is complex or when you want to derive new data from the state.

In this section, we'll explain how to create and use selectors in a React application that uses Redux for state management.

Creating a Selector Function

To create a selector function, you can use the createSelector() function from the reselect library. The createSelector() function takes one or more input selectors and a transform function, and returns a memorized selector function.

Here's an example of how to create a selector function that extracts the current count from the state:

import { createSelector } from 'reselect';

const getCount = state => state.counter.count;

export const countSelector = createSelector(
  [getCount],
  count => count
);

In this example, we're using the createSelector() function to create a memorized selector function called countSelector.

The selector function takes an input selector called getCount, which simply extracts the count property from the counter slice of the state.

The transform function takes the count as input and returns it as output. The resulting countSelector function can be used to extract the count from the state in an effective way.

Using the Selector Function in `mapStateToProps()`

Once you've created a selector function, you can use it in the mapStateToProps() function to pass the data to the component as props.

Here's an example of how to use the countSelector function in mapStateToProps():

import { connect } from 'react-redux';
import { countSelector } from './selectors';

function Counter({ count, dispatch }) {
  // ...
}

function mapStateToProps(state) {
  return {
    count: countSelector(state)
  };
}

export default connect(mapStateToProps)(Counter);

In this example, we're using the connect() function to connect a component called Counter to the Redux store. We're importing the countSelector function from a file called selectors.js.

We're then defining a mapStateToProps() function that maps the count property from the state to a prop called count in the component, using the countSelector function to extract the count from the state. Finally, we're exporting the connected Counter component.

Conclusion

Selectors are a powerful tool in Redux that enable you to extract data from the state in a structured and performant way. By using the createSelector() function from the reselect library, you can create memorized selector functions that extract new data from the state or extract specific pieces of data from the state. By using selectors in conjunction with the mapStateToProps() function, you can pass the data to your React components as props and render the data in your UI.

Final Conclusion

we've discussed how Redux can be useful for managing complex state in a React application, and covered the following topics in previous sections:

Installing the necessary packages (redux, react-redux)
Creating a Redux store and initializing it with initial state
Creating actions and action creators to update the store
Creating reducers to handle the actions and update the store
Connecting a React component to the Redux store using the useReducer() hook.

If you want to learn more about Redux and how to use it in a React application, here are some resources you might find helpful:

THANKS FOR READING

Connect with me on Twitter

Revolutionize Your React App with Redux: A Beginner's Guide to Simplifying State Management(PART 1)

Abdulsalaam Noibi — Wed, 05 Apr 2023 22:06:21 +0000

Explanation of Redux

Let's imagine that you are playing a game with a group of people. In the game, you have a lot of different things you need to keep track of points, power-ups, and items you've collected.

If you try to remember all of these things in your head, it can be really hard to keep track of everything. You might forget something important or get confused.

Redux is like a scoreboard for the game. It keeps track of all of the different things you need to remember, so that you can easily see how many points you have, what power-ups you've collected, and what items you still need to find.

Just like how a scoreboard helps you keep track of everything in a game, Redux helps you keep track of everything in your app or website.

It organizes all of your data in one place, so that you can easily access it and make changes to it when you need to.

And just like how a scoreboard can be used for any game, Redux can be used with any app or website, not just games. That's why it's so popular and useful!

Brief explanation of the key principle of Redux

The key principles of Redux are:

Store: This is like a Scoreboard, where all the information is stored.
Actions: These are like messages you send to the program, telling perform a certain function. For example, "Get specific data".
Reducers: These are like helpers that know how to change the
Scoreboard based on the messages you send.

For example, if you send the message "Add a new item to the Scoreboard!" The reducer knows how to put a new item in the Scoreboard.

Selectors: These are like helpers that help you find what you're looking for in the Scoreboard.

For example, if you want to find a particular item, a selector can help you find them quickly.

Redux Principles

Store: The store is the central place where all the data for a Redux application is kept. It's like a big container that holds all the information about what's going on in the application.

This makes it easy to keep track of what's happening and to give the developer easy access to the information when it's needed.

Actions: Actions are messages that are sent to the store to update the data inside it. They describe something that has happened in the application, like a button being clicked or a form being submitted.

When an action is dispatched, it triggers a change in the store. For example, if the "Add to Cart" button is clicked on an online shopping website, an action might be dispatched to add the item to the cart.

Reducers: Reducers are functions that handle the changes in the store that are triggered by actions. They take the current state of the store and the action that was dispatched and then return a new state that reflects the change that was made.

For example, if an action was dispatched to add an item to the cart, the reducer would take the current state of the cart and add the new item to it.

Selectors: Selectors are functions that extract data from the store. They take the current state of the store and return a specific piece of data that is needed by the application.

For example, a selector might be used to extract the total price of all the items in the cart.

Together, these four principles form the foundation of Redux and make it a powerful tool for managing the state of complex applications.

By keeping all the data in a single place and using actions, reducers, and selectors to manage it, Redux makes it easy to keep track of what's going on in an application and to access the data when it's needed.

Setting up Redux in a React Application

1. Installing the necessary packages (redux, react-redux)

Redux

The redux package is the core package for Redux. It provides the building blocks for creating a Redux store, dispatching actions, and handling state changes. To install redux, open up your terminal and run the following command:

//for npm users
npm install redux

//for yarn users
yarn add redux

React-redux

The react-redux package provides bindings between React and Redux. It allows you to connect your React components to a Redux store and access the store's state and dispatch methods. To install react-redux, run the following command:

//for npm users
npm install react-redux

//for yarn users
yarn add react-redux

2. Creating a Redux store and initializing it with initial state

Once you've installed the necessary packages for Redux in your React application, the next step is to create a Redux store.

The store is the central hub of your Redux application, responsible for managing your application's state

To create a Redux store, we'll need to import the createStore function from the redux package. This function is responsible for creating a new Redux store instance.

import { createStore } from 'redux';

The next step is to create a reducer function. A reducer is a pure function that takes the current state and an action as arguments, and returns a new state.

The reducer is responsible for handling state changes in your Redux application.

Here's an example of a reducer function:

const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action. Type) {
    case 'INCREMENT':
      return { ...state, count: state. Count + 1 };
    case 'DECREMENT':
      return { ...state, count: state. Count - 1 };
    default:
      return state;
  }
};

In the above example, we're creating a reducer function called counterReducer. The initialState object contains the initial state of our application, with a count property set to 0.

The reducer function takes two arguments: state and action. If no state is passed in (i.e. on the first call to the reducer), the initial state is used.

The reducer function uses a switch statement to determine how to handle each action.

In this example, we're handling two actions: INCREMENT and DECREMENT. When the INCREMENT action is dispatched, we create a new state object with the count property incremented by 1.

Similarly, when the DECREMENT action is dispatched, we create a new state object with the count property decremented by 1. If the action type is not recognized, the current state is returned.

3. Using the `createStore` function to create a store with the reducer and initial state

Now that we've created our reducer function, we can use the createStore function to create a new Redux store instance.

We'll pass in our reducer function as the first argument, and our initial state as the second argument.

const store = createStore(counterReducer, initialState);

This will create a new Redux store instance with our counterReducer function as the reducer, and our initialState object as the initial state.

4. Creating actions and action creators to update the store

Creating a set of action types as constants

The first step in creating actions in Redux is to define a set of action types as constants. Action types are string constants that describe the type of action being performed.

They are used to identify the action when it is dispatched to the store.

Here's an example of defining a set of action types as constants:

export const INCREMENT_COUNT = 'INCREMENT_COUNT';
export const DECREMENT_COUNT = 'DECREMENT_COUNT';

Creating action creator functions to create actions of each type

The next step is to create action creator functions. Action creators are functions that create actions of a specific type. They take any necessary data as arguments, and return an action object.

Here's an example of creating action creator functions for our INCREMENT_COUNT and DECREMENT_COUNT actions:

export function incrementCount() {
  return { type: INCREMENT_COUNT };
}

export function decrementCount() {
  return { type: DECREMENT_COUNT };
}

In the above example, we're creating two action creator functions: incrementCount() and decrementCount(). Each function returns an action object with a type property set to the corresponding action type constant.

5. Dispatching actions to update the store

Now that we've created our action types and action creators, we can dispatch them to update the store. We'll need to use the dispatch() function provided by the Redux store to dispatch our actions.

Here's an example of dispatching our incrementCount() and decrementCount() actions:

//importing from the action file
import { incrementCount, decrementCount } from './actions';

store. Dispatch(incrementCount());
store.dispatch(decrementCount());

In the above example, we're importing our action creator functions from a file called actions.js.

We then dispatch the incrementCount() and decrementCount() actions to the store using the dispatch() function provided by the Redux store.

PART TWO WILL SOON BE PUBLISHED.
PLEASE STAY TUNED