DEV Community: Abdul Talha

Instrument BookStack with OpenTelemetry and SigNoz Using Docker

Abdul Talha — Sat, 18 Jul 2026 14:04:45 +0000

Deploying BookStack was the easy part. Understanding what was happening inside the application wasn't. Without visibility into incoming requests, database queries, or Laravel operations, troubleshooting performance issues felt like guesswork. In this tutorial, you'll instrument BookStack with OpenTelemetry, connect it to SigNoz, and build an end-to-end observability pipeline, all without modifying the application's source code.

BookStack is an open-source platform for creating and managing documentation, but it doesn't provide built-in distributed tracing or deep application observability. In this tutorial, you'll instrument BookStack with OpenTelemetry and export traces to SigNoz, enabling you to monitor requests, analyse Laravel application behaviour, and troubleshoot issues more effectively.

Prerequisites

Before you begin, make sure you have the following:

A Linux server (Ubuntu 22.04 or later) with at least 4 vCPUs and 8 GB RAM.
Docker Engine and Docker Compose are installed.

Solution Overview

BookStack is instrumented with OpenTelemetry, which exports traces to the OpenTelemetry Collector. The collector forwards the telemetry to SigNoz, where you can visualise requests and analyse distributed traces.

                HTTP Requests
                      │
                      ▼
               ┌─────────────┐
               │  BookStack  │
               │  (Laravel)  │
               └──────┬──────┘
                      │
          OpenTelemetry SDK
                      │
             OTLP (HTTP:4318)
                      │
                      ▼
        ┌────────────────────────┐
        │ OpenTelemetry Collector│
        │    (SigNoz Collector)  │
        └───────────┬────────────┘
                    │
                    ▼
              ┌───────────┐
              │  SigNoz   │
              │ Dashboard │
              └───────────┘

Step 1: Install SigNoz

Before instrumenting BookStack, you need a backend to collect, store, and visualise telemetry data. In this step, you'll install SigNoz using the foundryctl CLI and verify that it's ready to receive traces from BookStack.

Install the Foundry CLI, which simplifies deploying SigNoz by generating and managing the required Docker Compose configuration, and add it to your current PATH so the foundryctl command is available in your terminal.
```
curl -fsSL https://signoz.io/foundry.sh | bash
export PATH="/root/.local/bin:$PATH"
```
Verify that the installation completed successfully:
```
foundryctl version
```

Create a file named casting.yaml with the following configuration. This file instructs foundryctl to deploy SigNoz using Docker Compose.

apiVersion: v1alpha1
kind: Installation
metadata:
  name: signoz

spec:
  deployment:
    flavor: compose
    mode: docker

Deploy SigNoz using the installation configuration.
```
foundryctl cast -f casting.yaml
```
The installer validates your Docker environment, generates the required Docker Compose resources, and starts the SigNoz services.
Verify that the deployment completed successfully.
```
docker ps
```
You should see containers such as signoz-frontend, signoz-query-service, signoz-otel-collector, and clickhouse.
Then open http://<SERVER-IP>:8080 in your browser. If the installation completed successfully, the SigNoz dashboard should load. Replace <SERVER-IP> with your Server IP.

Enter the email and password to create the initial admin account for SigNoz.

Step 2: Build a Custom BookStack Image

The official LinuxServer BookStack image doesn't include the OpenTelemetry components required to export traces. In this step, you'll build a custom image that installs the OpenTelemetry PHP extension and Laravel auto-instrumentation packages during the image build, making the deployment reproducible and eliminating the need to modify a running container.

Create a project directory for the deployment and navigate into it.
```
mkdir bookstack-otel
cd bookstack-otel
```
Generate a Laravel application key. BookStack uses this key to encrypt sensitive application data, and you'll reference it later when creating the Docker Compose configuration.
```
echo "base64:$(openssl rand -base64 32)"
```
Save the generated value---you'll use it when configuring the BookStack container.

Create a file named Dockerfile with the following configuration.

FROM lscr.io/linuxserver/bookstack:version-v26.03.3

COPY install-opentelemetry.sh /tmp/install-opentelemetry.sh

RUN chmod +x /tmp/install-opentelemetry.sh \
&& /tmp/install-opentelemetry.sh \
&& rm /tmp/install-opentelemetry.sh \
&& rm -rf /root/.composer/cache

WORKDIR /app/www

This Dockerfile extends the official BookStack image and runs the installation script during the image build.

Create a file named install-opentelemetry.sh with the following installation script.

#!/bin/sh
set -e

echo "=========================================="
echo "Installing OpenTelemetry PHP Extension"
echo "=========================================="

# Add Alpine edge testing repository if missing
if ! grep -q "edge/testing" /etc/apk/repositories; then
    echo "https://dl-cdn.alpinelinux.org/alpine/edge/testing" >> /etc/apk/repositories
fi

apk update

apk add --no-cache php85-pecl-opentelemetry

echo "=========================================="
echo "Installing OpenTelemetry Laravel Packages"
echo "=========================================="

cd /app/www

composer config --no-interaction allow-plugins.php-http/discovery false
composer config --no-interaction allow-plugins.tbachert/spi true

composer require \
    open-telemetry/sdk \
    open-telemetry/exporter-otlp \
    open-telemetry/opentelemetry-auto-laravel \
    php-http/guzzle7-adapter \
    --no-interaction \
    --prefer-dist \
    --optimize-autoloader \
    --no-scripts

echo "=========================================="
echo "Verifying installation..."
echo "=========================================="

php -m | grep opentelemetry

composer show open-telemetry/sdk
composer show open-telemetry/opentelemetry-auto-laravel

echo "=========================================="
echo "OpenTelemetry installation completed!"
echo "=========================================="

This script installs the OpenTelemetry PHP extension together with the Composer packages required for Laravel auto-instrumentation. It also performs basic validation during the image build to confirm that the required components were installed successfully.

Step 3: Deploy BookStack with OpenTelemetry

With the custom image prepared, you're ready to deploy BookStack and its MariaDB database. In this step, you'll create a single Docker Compose configuration that builds the custom image, configures OpenTelemetry, and connects BookStack to the SigNoz OpenTelemetry Collector.

Create a docker-compose.yml file with the following configuration.

services:
  bookstack:
    build:
      context: .
      dockerfile: Dockerfile
    image: bookstack-otel:latest
    container_name: bookstack

    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Kolkata

      - APP_URL=http://<SERVER-IP>:6875
      - APP_KEY=<APP_KEY>

      - DB_HOST=bookstack_db
      - DB_PORT=3306
      - DB_DATABASE=bookstackapp
      - DB_USERNAME=bookstack
      - DB_PASSWORD=bookstack

      # OpenTelemetry
      - OTEL_SERVICE_NAME=bookstack
      - OTEL_TRACES_EXPORTER=otlp
      - OTEL_METRICS_EXPORTER=none
      - OTEL_LOGS_EXPORTER=none
      - OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf
      - OTEL_EXPORTER_OTLP_ENDPOINT=http://signoz-ingester-1:4318
      - OTEL_PHP_AUTOLOAD_ENABLED=true

    volumes:
      - ./bookstack_data:/config

    ports:
      - "6875:80"

    depends_on:
      - bookstack_db

    restart: unless-stopped

  bookstack_db:
    image: lscr.io/linuxserver/mariadb:latest
    container_name: bookstack_db

    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Kolkata
      - MYSQL_ROOT_PASSWORD=<ROOT_PASSWORD>
      - MYSQL_DATABASE=bookstackapp
      - MYSQL_USER=bookstack
      - MYSQL_PASSWORD=bookstack

    volumes:
      - ./bookstack_db_data:/config

    restart: unless-stopped

networks:
  default:
    external: true
    name: signoz-network

Replace:

<SERVER-IP> with your server's IP address or domain.
<APP_KEY> with the Laravel application key generated in the previous step.
<ROOT_PASSWORD> with a secure MariaDB root password.
signoz-network with the Docker network created by your SigNoz installation.

Build the custom image and start the BookStack and MariaDB containers.
```
docker compose up -d --build
```
Docker builds the custom BookStack image, installs the OpenTelemetry components, and starts both containers.
Verify that the deployment completed successfully.
```
docker ps
```
The bookstack and bookstack_db containers should both be in the Up state.
Open BookStack in your browser.
```
http://<SERVER-IP>:6875
```
Replace <SERVER-IP> with your Server IP. The BookStack login page should load successfully, confirming that the application is running with the custom OpenTelemetry-enabled image. Enter email as admin@admin.com and password as password.

Step 4: Verify the OpenTelemetry Installation

Before generating application traffic, verify that the OpenTelemetry components were installed correctly and that BookStack is configured to export traces. In this step, you'll confirm that the PHP extension, Composer packages, Laravel package discovery, and OpenTelemetry environment variables are all working as expected.

Verify that the OpenTelemetry PHP extension is loaded inside the BookStack container.
```
docker exec bookstack php -m | grep opentelemetry
```
If the installation was successful, the command should return:
```
opentelemetry
```

Confirm that the required OpenTelemetry Composer packages were installed.

docker exec bookstack composer show | grep opentelemetry

You should see packages similar to:

open-telemetry/api
open-telemetry/sdk
open-telemetry/exporter-otlp
open-telemetry/opentelemetry-auto-laravel

Verify that the OpenTelemetry environment variables are available inside the running container.

docker exec bookstack printenv | grep OTEL

You should see output similar to:

OTEL_SERVICE_NAME=bookstack
OTEL_TRACES_EXPORTER=otlp
OTEL_EXPORTER_OTLP_ENDPOINT=http://signoz-ingester-1:4318
OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf
OTEL_PHP_AUTOLOAD_ENABLED=true

Verify that Laravel can discover the installed packages without errors.
```
docker exec bookstack php artisan package:discover
```
The command should complete successfully without reporting missing dependencies or package discovery errors.
Open BookStack in your browser to confirm that the application is still running.
```
http://<SERVER-IP>:6875
```
Replace <SERVER-IP> with your Server IP. The login page should load normally, confirming that the custom image is running correctly and is ready to export traces.

Step 5: Generate Application Traffic

With BookStack configured and the OpenTelemetry installation verified, the next step is to generate application traffic. As users interact with BookStack, OpenTelemetry automatically captures each request and exports the resulting traces to the SigNoz OpenTelemetry Collector.

Open BookStack in your browser.
```
http://<SERVER-IP>:6875
```
Replace <SERVER-IP> with your Server IP.
Log in using the default BookStack administrator credentials or an existing user account.
Generate application traffic by performing a few common actions in BookStack, such as:

Browse books and shelves.
Open and view existing pages.
Create a new page.
Edit and save content.
Navigate between different sections of the application.

These actions generate HTTP requests that OpenTelemetry automatically instruments and exports to SigNoz.

Step 6: View Traces in SigNoz

After generating application traffic, verify that BookStack is exporting traces to SigNoz. In this step, you'll inspect the collected traces and explore the request details captured by OpenTelemetry.

Open the SigNoz dashboard in your browser.
```
http://<SERVER-IP>:8080
```
Replace <SERVER-IP> with your Server IP.
From the left navigation menu, select Traces.
Click any trace from the bookstack service to inspect its details. The trace view displays the sequence of operations performed while processing a request. Depending on the action you performed, you'll typically see spans representing the incoming HTTP request, Laravel middleware, route handling, controller execution, and database operations.
Verify that the trace was recorded successfully. Confirm that:

The Service Name is bookstack.
The trace completed successfully.
Multiple spans are displayed for the request.
The request duration and execution timeline are visible.

Congratulations! You've successfully instrumented BookStack with OpenTelemetry and configured it to export traces to SigNoz. You now have end-to-end visibility into your application's requests, making it easier to understand application behaviour and troubleshoot performance issues.

Common Issues That I Encountered

Docker and Docker Compose are not installed: While deploying SigNoz with foundryctl, the installation failed because Docker Engine and Docker Compose were not installed on the server.

Fix: Install Docker Engine and the Docker Compose plugin on your server. After the installation is complete, verify that both tools are available, then rerun the foundryctl cast command to continue the deployment.

sudo apt install apt-transport-https ca-certificates curl software-properties-common -y
sudo curl -fsSL [https://download.docker.com/linux/ubuntu/gpg](https://download.docker.com/linux/ubuntu/gpg) -o /etc/apt/keyrings/docker.asc
echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] [https://download.docker.com/linux/ubuntu](https://download.docker.com/linux/ubuntu) $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
sudo docker --version
sudo systemctl enable docker
sudo systemctl status docker
sudo systemctl stop docker
sudo systemctl restart docker

What I Learned

Building this setup highlighted a few practical lessons:

Use a custom Docker image. Installing the OpenTelemetry components during the image build makes the deployment reproducible and prevents changes from being lost when containers are recreated.
Verify each step as you go. Checking the PHP extension, Composer packages, and environment variables helped identify configuration issues early.
Ensure the containers share the same network. BookStack can only export traces if it can reach the SigNoz OpenTelemetry Collector.
Generate application traffic before checking SigNoz. Traces are created only when BookStack processes requests.

Conclusion

You've successfully instrumented BookStack with OpenTelemetry and configured it to export traces to SigNoz, giving you end-to-end visibility into application requests with a reproducible Docker-based deployment.

To continue exploring application observability, check out the following resources:

OpenTelemetry Documentation: https://opentelemetry.io/docs/
SigNoz Documentation: https://signoz.io/docs/introduction/
SigNoz Distributed Tracing: https://signoz.io/docs/userguide/traces/

My Technical Writing Portfolio

Abdul Talha — Tue, 07 Apr 2026 05:53:00 +0000

I created a technical writing portfolio to organise the work I have been doing in documentation, tutorials, and open-source contributions.

The goal was to bring together my writing in one place so developers and teams can easily explore my work.

The portfolio includes:

Articles published on freeCodeCamp
Tutorials on cloud deployments and developer tools
Technical writing samples and guides

Building this portfolio helped me reflect on the topics I enjoy writing about and the skills I want to continue improving.

I plan to keep updating the portfolio as I publish new articles and contribute to more open-source projects.

Portfolio: https://blog.abdultalha.tech/portfolio

How to Self-Host Affine on Windows Using Docker and WSL

Abdul Talha — Tue, 31 Mar 2026 05:42:00 +0000

I wrote a guide on how to self-host Affine on a Windows system using Docker and WSL.

Affine is an open-source workspace that combines note-taking, documentation, and project management in one place. Running it locally allows developers to experiment with the platform and understand how self-hosted applications work.

In this article, I walk through the full setup process for running Affine locally on Windows.

The guide covers:

Setting up Windows Subsystem for Linux (WSL)
Installing and configuring Docker
Running Affine using Docker containers
Accessing the self-hosted instance locally

The goal of this guide was to make the setup process simple and easy to follow for developers who want to explore self-hosting.

The article was published on freeCodeCamp and went through their editorial review process. I learned a lot from the feedback and revisions during this process.

You can read the full guide here:

https://www.freecodecamp.org/news/self-host-affine-on-windows-docker-wsl/

My Documentation Contributions to Codecademy’s Open Source Repository

Abdul Talha — Tue, 24 Mar 2026 05:58:00 +0000

I contributed to the open-source documentation repository of Codecademy.

During this work, I added five documentation entries while working through different issues in the repository. Each solu
tion was written in a separate branch in my fork so that the changes stayed organized.

While working on these issues, I focused on:

Understanding the structure of the documentation repository
Writing clear explanations for the requested entries
Following the contribution guidelines and workflow used by the project

All of the submissions passed the maintainer review process, which was a valuable learning experience.

However, before the pull requests could be merged into the main repository, the project was made a public archive. Once a repository is archived, maintainers can no longer merge new contributions.

Even though the changes were not merged into the main repository, the process helped me better understand how documentation contributions work in open-source projects.

You can see the work in my forked repository, where each issue was solved in a separate branch.

Repository:
https://github.com/abdultalha0862/docs

How Open Source Can Grow Your Tech Career – A Handbook for Beginners

Abdul Talha — Tue, 17 Mar 2026 05:02:00 +0000

Many beginners have heard about open source but it may be confusing at first.

When I first started learning programming, open source felt confusing. I didn’t clearly understand how projects worked or how contributing could help a developer grow.

To make this easier for beginners, I wrote a handbook explaining how open source works and how developers can use it to grow their tech careers.

In the handbook I covered topics like:

How open-source projects actually work
The roles of maintainers, contributors, and communities
Different ways beginners can contribute (not just code)
How open source builds skills, visibility, and career opportunities

While writing this handbook, I also tried to explain the real challenges beginners face and how they can approach their first contribution step by step.

This article went through the freeCodeCamp editorial review process, and I learned a lot from the feedback and revisions.

If you're a beginner who wants to understand open source and start contributing, this guide may help you take the first step.

Full handbook:
https://www.freecodecamp.org/news/open-source-career-handbook/

From Ghost to Zulip: Setting Up Zulip Locally on WSL2 (and Fixing Tricky Python Issues)

Abdul Talha — Thu, 18 Dec 2025 03:45:00 +0000

Introduction

After contributing to Ghost, I wanted to push myself further by working on a larger and more complex backend system.

That curiosity led me to Zulip, an open-source team collaboration tool known for its topic-based threading and production-grade architecture.

Zulip is built with:

Django
Tornado
PostgreSQL
RabbitMQ

Setting up Zulip locally isn’t hard, but it’s very different from a typical Django project. I ran into a few unexpected issues, especially around Python virtual environments and WSL configuration.

In this post, I’ll walk through:

How I set up Zulip locally on WSL2
The issues I faced during setup
How I fixed them, including the activate_this.py problem

If you’re new to Zulip or moving into larger backend systems, this guide should help you avoid common setup blockers.

Who This Post Is For

This post is for:

Developers contributing to Zulip for the first time
Open-source contributors moving beyond small projects
Anyone using WSL2 on Windows
Developers stuck with Python 3.12 or activate_this.py errors

Prerequisites

Before starting, make sure you have:

General

2GB+ RAM
Stable internet connection
GitHub account

Windows

Windows 10/11 (64-bit)
Virtualisation enabled (VT-x / AMD-V)
Admin access

Git and GitHub Setup

If Git is already configured, you can skip this section.

Generate an SSH key:

ssh-keygen -t ed25519 -C "your_email@example.com"

Copy the public key:

cat ~/.ssh/id_ed25519.pub

Add it to GitHub → Settings → SSH and GPG Keys.

Setting Up WSL2 for Zulip

If you already use native Ubuntu or WSL2, feel free to skip ahead.

Enable Virtualisation

Make sure VT-x / AMD-V is enabled in BIOS.

Install WSL2

wsl --install

This installs Ubuntu automatically.

Enable systemd (Required)

Zulip relies on background services like PostgreSQL, Redis, and RabbitMQ.

Edit:

sudo nano /etc/wsl.conf

Add:

[boot]
systemd=true

Restart WSL:

wsl --shutdown

Install Required Services

Update your system:

sudo apt update && sudo apt upgrade

Install services:

sudo apt install rabbitmq-server memcached redis-server postgresql

RabbitMQ Configuration

sudo nano /etc/rabbitmq/rabbitmq-env.conf

Add:

NODE_IP_ADDRESS=127.0.0.1
NODE_PORT=5672

Cloning the Zulip Repository

Fork Zulip from GitHub, then clone your fork:

git clone --config pull.rebase git@github.com:YOURUSERNAME/zulip.git
cd zulip
git remote add -f upstream https://github.com/zulip/zulip.git

Running Zulip Locally

Install dependencies:

./tools/provision

Activate the virtual environment:

source .venv/bin/activate

Start the dev server:

./tools/run-dev

Visit:

http://localhost:9991

Common Issues I Faced (and How I Fixed Them)

Issue 1: Missing `activate_this.py`

Error

FileNotFoundError: No such file or directory ... activate_this.py

Why this happens

Zulip now uses uv, which doesn’t automatically create activate_this.py. Some scripts still expect it.

Fix

Manually create the file:

cat > .venv/bin/activate_this.py << 'EOF'
import os
import site
import sys

bin_dir = os.path.dirname(os.path.abspath(__file__))
os.environ["PATH"] = os.pathsep.join([bin_dir] + os.environ.get("PATH", "").split(os.pathsep))

base = os.path.dirname(bin_dir)
os.environ["VIRTUAL_ENV"] = base

site_packages = os.path.join(base, 'lib', 'python{}.{}'.format(*sys.version_info[:2]), 'site-packages')

prev = set(sys.path)
site.addsitedir(site_packages)
sys.real_prefix = sys.prefix
sys.prefix = base

new = list(sys.path)
sys.path[:] = [i for i in new if i not in prev] + [i for i in new if i in prev]
EOF

Issue 2: Django Not Found (Python 3.12)

Error

ModuleNotFoundError: No module named 'django'

Cause

Older scripts used:

sys.version[:3]

This breaks with Python 3.12.

Fix

Use:

'{}.{}'.format(*sys.version_info[:2])

Then rerun:

./tools/provision

What I Learned

Technical

Modern Python tooling like uv changes old assumptions
Understanding virtual environments helps with debugging
WSL2 + systemd setup is critical for backend services

Non-Technical

Large codebases require patience
Error messages usually point to the real issue
Open-source communities are incredibly helpful

Final Thoughts

Moving from Ghost to Zulip has been a rewarding step in my open-source journey.

Zulip’s setup may feel overwhelming at first, but once the environment is running, contributing becomes much smoother. If you’re stuck on setup issues like activate_this.py, you’re definitely not alone.

I hope this post helps you get unblocked.

Useful Links

Zulip GitHub: https://github.com/zulip/zulip
Zulip Dev Docs: https://zulip.readthedocs.io/en/latest/development/overview.html
Zulip Community Chat: https://chat.zulip.org
WSL Docs: https://docs.microsoft.com/en-us/windows/wsl
uv: https://github.com/astral-sh/uv

My Journey into Open Source: Learning, Contributing, and Growing

Abdul Talha — Mon, 04 Aug 2025 10:01:51 +0000

I had no idea how to get started with Open Source until I watched a simple video by Kunal.

Open Source is a fantastic way to develop software. Anyone, anywhere in the world, can see, use, and contribute to the code. It’s not just about writing code; it’s about collaborating to build something bigger.

After watching Kunal's video (What is Open Source & How to Start?) and learning from Saviner Puri’s “Learn in Public” approach, I took a notebook and jotted down all the helpful insights they shared. I felt excited and eager to try those ideas.

Then I faced a challenge: how do you select the right organization to contribute to? I felt overwhelmed and confused. This was my biggest obstacle.

That’s when I discovered the Google Summer of Code (GSoC) website. Their filters help you find organizations matching your tech skills. After reviewing many options, I found Rocket.Chat, which was a perfect fit for my background.

Throughout this journey, I learned some key lessons:

Learn tools like Git and GitHub to contribute effectively.
Choose contributions that align with your skills.
Start small with beginner-friendly tasks to build your confidence.
Above all, rely on the community and mentors; they make a significant difference.

Contributing to Open Source is not just about writing code. It involves working on real software, making connections that can lead to internships and jobs, leveraging your tech skills, and growing professionally. Sometimes, you might even get to speak at conferences or travel for events.

If you already contribute, what’s your story? I’d love to hear from you. Please share your thoughts and any feedback in the comments.

Beginner's Guide to Mastering Git and GitHub

Abdul Talha — Mon, 28 Apr 2025 14:53:46 +0000

blog.globalabdultalha.tech / beginners-guide-to-mastering-git-and-github

🚨 Perfecting My Web Layout (HTML + CSS + Semantic Tags) 🚨

Abdul Talha — Mon, 14 Apr 2025 18:30:00 +0000

The Struggle: 💪😓
I had an idea for a colorful and organized webpage layout, but my first design didn't match. The result was messy and unorganized, nothing like what I imagined!

Debugging 🐞🔍🛠️:

1️⃣ Initial Insight:

I took a closer look at my code and realized I wasn't using any semantic tags. My layout was just a combination of divs, making the design difficult to control.

2️⃣ Exploring Resources:

After watching a tutorial by CodeWithHarry on YouTube, I discovered that using semantic tags (like <header>, <main>, and <footer>) not only makes the HTML more meaningful but also helps structure the layout more effectively.

3️⃣ Breakthrough Moment:

I replaced my non-semantic tags with proper HTML5 elements, updated my CSS accordingly, and BOOM! My design transformed into exactly what I wanted. The improvement was night and day!

Lesson Learned: 📚✨
The moral of the story: Semantic tags bring both clarity and visual harmony to your web projects. They make your code more readable and your final design more polished.

📸 Attached:

Comparison screenshots: the first image shows the final design, and the second image displays the initial messy layout.

🤔 To My Network:

Who else has realized this after using semantic tags? What were your takeaways?

🚨 From Chaos to Card Perfection (CSS Journey) 🚨

Abdul Talha — Thu, 10 Apr 2025 15:37:00 +0000

The Struggle:
At first, I threw all my content together into a card layout with no structure, using just plain text and images. It looked cluttered and unappealing. 😣 My initial design felt more like a rough draft than something polished.
Debugging:
1️⃣ Initial Insight:
I recognized that my card design lacked visual hierarchy and an appealing background. The layout needed a revamp to engage users truly.
2️⃣ Exploring Resources:
After watching a detailed video tutorial, I discovered the value of layering design elements. I learned that starting with a strong background and well-defined outer layers could transform the overall look of the card.
3️⃣ Breakthrough Moment:
I began by setting a contrasting body background color to highlight the card. Next, I defined the card’s outer layer to create a distinct container. Then, I added all the essential components and refined each element’s style. BOOM! The evolution from a messy draft to a sleek, professional card was complete!
Lesson Learned:
Moral of the story: A step-by-step approach to layering design elements can dramatically enhance your layout. Don't be afraid to start over and learn from tutorials—it's all part of the creative process.
📸 Attached:
I have attached the screenshots of both the initial and final card designs.
🤔 To my network:
Who else has transformed their design by revisiting the fundamentals? What strategies did you use to upgrade your layouts?

🚨 From Chaos to Card perfection (CSS Journey) 🚨

Abdul Talha — Thu, 10 Apr 2025 12:30:00 +0000

The Struggle:

At first, I threw all my content together into a card layout with no structure—just plain text and images. It looked cluttered and uninviting. 😣 My initial design felt more like a rough draft than something polished.

Debugging Saga:

1️⃣ Initial Insight:

I recognized that my card design was missing visual hierarchy and an appealing background. The layout needed a revamp to truly engage users.

2️⃣ The Revelation:

After watching a detailed video tutorial, I discovered the value of layering design elements. I learned that starting with a strong background and well-defined outer layers could transform the overall look of the card.

3️⃣ Breakthrough Moment:

I began by setting a contrasting body background color to highlight the card. Next, I defined the card’s outer layer to create a distinct container. Then, I added in all the essential components and refined each element’s style. BOOM—the evolution from a messy draft to a sleek, professional card was complete!

Lesson Learned:

Moral of the story: A step-by-step approach to layering design elements can dramatically enhance your layout. Don't be afraid to start over and learn from tutorials—it's all part of the creative process.

📸 Attached:

Side-by-side screenshots of the initial and final card designs
Code snippet illustrating key style improvements

🤔 To my network:

Who else has transformed their design by revisiting the fundamentals? What strategies did you use to upgrade your layouts?

The Open Source Lessons I’m Sharing to Empower Fellow Developers

Abdul Talha — Wed, 09 Apr 2025 15:23:50 +0000

How to Approach Open Source Contribution Effectively

Focus on Impact, Not Quantity: Instead of measuring your contributions by the number of commits, prioritize meaningful fixes that deliver substantial value. Solving a critical issue effectively holds more weight than frequent, minor updates.
Start with the User Experience:Before diving into the codebase, prioritize setting up the product locally. Address obstacles you encounter during installation or configuration—these pain points often reveal high-impact areas for contribution.
Quality Over Frequency: Rather than aiming for daily contributions, focus on solving one genuine, challenging problem. It’s acceptable—even beneficial—to invest time in resolving complex issues, as these efforts demonstrate deeper expertise and create lasting value.
Document Your Journey: Share your open source contributions publicly (e.g., LinkedIn, X/Twitter) to create a knowledge base. This helps others facing similar challenges while establishing your thought leadership and expanding your professional network.

Opportunities Unlocked by Open Source Contribution

Career Advancement: Open source contributions showcase technical skills and collaboration abilities, making you a stronger candidate for promotions, leadership roles, or high-impact projects.
Freelancing/Consulting Opportunities: Demonstrated expertise in specific tools or ecosystems through open source work can attract clients seeking specialized skills, often at premium rates.
Global Recognition: Consistent, valuable contributions position you as a subject matter expert, opening doors to speaking engagements, conference invitations, and collaborative projects with industry leaders.

DEV Community: Abdul Talha

Instrument BookStack with OpenTelemetry and SigNoz Using Docker

Prerequisites

Solution Overview

Step 1: Install SigNoz

Step 2: Build a Custom BookStack Image

Step 3: Deploy BookStack with OpenTelemetry

Step 4: Verify the OpenTelemetry Installation

Step 5: Generate Application Traffic

Step 6: View Traces in SigNoz

Common Issues That I Encountered

What I Learned

Conclusion

My Technical Writing Portfolio

How to Self-Host Affine on Windows Using Docker and WSL

My Documentation Contributions to Codecademy’s Open Source Repository

How Open Source Can Grow Your Tech Career – A Handbook for Beginners

From Ghost to Zulip: Setting Up Zulip Locally on WSL2 (and Fixing Tricky Python Issues)

Introduction

Who This Post Is For

Prerequisites

General

Windows

Git and GitHub Setup

Setting Up WSL2 for Zulip

Enable Virtualisation

Install WSL2

Enable systemd (Required)

Install Required Services

RabbitMQ Configuration

Cloning the Zulip Repository

Running Zulip Locally

Common Issues I Faced (and How I Fixed Them)

Issue 1: Missing activate_this.py

Issue 2: Django Not Found (Python 3.12)

What I Learned

Technical

Non-Technical

Final Thoughts

Useful Links

My Journey into Open Source: Learning, Contributing, and Growing

Beginner's Guide to Mastering Git and GitHub

🚨 Perfecting My Web Layout (HTML + CSS + Semantic Tags) 🚨

🚨 From Chaos to Card Perfection (CSS Journey) 🚨

🚨 From Chaos to Card perfection (CSS Journey) 🚨

The Open Source Lessons I’m Sharing to Empower Fellow Developers

How to Approach Open Source Contribution Effectively

Opportunities Unlocked by Open Source Contribution

Issue 1: Missing `activate_this.py`