DEV Community: Numerous Oriabure

Building a Receipt Generator with Flask and Tailwind

Numerous Oriabure — Tue, 31 Mar 2026 16:52:54 +0000

Have you ever wondered how receipt generators work?

Like the ones used in Nadia, Stop2Shop or even Mat-Ice.
Even before I became a techie, I always wondered how text written on the interface magically turned into a formatted receipt with the company's branding and all.

At that point in my life, I didn't question things so much. Because I believed that some things don't have answers, or was it because I didn't have much tech-savvy peeps around me then? I guess we'll never know.

Well... all that has changed now.

I'll be taking you through a journey of how to implement one for yourself. Who knows... You might own a restaurant, a game center, or any form of business that involves generating receipts someday. It would be nice if you could build yours and customize it the way you want.

So I'll describe what we will be building.

We'll be building an application that allows a user to input details of what they've purchased in a web interface and download it with a template.

I've been really curious about software architecture for quite a while... and I've come to realize that the best way to build anything is to have a top view of what it will entail. That will also guide us as we build the application.

Here's a picture of what the architecture should look like:

Don't mind the name... I'm very lazy with names.
I used Gemini to generate the image. These AI models are getting really good.

So.. let's get back on track.
We'll be using flask for the backend of our application, html and tailwind for the frontend of our application, sqlite will be used for the database.

The following steps will go smoothly for Linux users. For the windows(noob) users here, I'll be dropping some articles you can refer to. If you have WSL(Windows Subsystem for Linux), good. You can follow along.

Make sure you have python installed. If you don't, visit python.org.

So I'll explain the architecture briefly before we get started.

You can see that there are two arrows in front of the user. The first pointing at the user indicates that the interface is being rendered to the user, while the arrow facing away refers to the users putting the details of what he has purchased.

As for the arrow pointing away from the form. That indicates that the information that has been put in by the user is being send to the backend(Flask) for processing, this is where the magic happens. The major information gotten from the from is first stored in our sqlite database so we can retrieve it later. Then a folder is generated on our machine to store the pdf generated. Then the backend generates and html format of the receipt, this is then injected into an already styled template which contains my branding colors, logo and the likes, CSS helps with the styling of the template. Then a library is used to convert the html file to a pdf format that can be downloaded.

new term:
library: A library is basically a collection of code that is used so often that it's packaged so a user won't need to rewrite the code everytime they need that functionality. The process involved in converting an html file to pdf is quite lengthy. But thanks to the library we don't have to think about it.

As for the arrow pointing away from the database. The admin page gets all the information stored on the database and displays them for the user to see.

Let's get started.

Make sure you have vscode installed. If you dont, use the link: Vscode Download.

Open your terminal and create a directory and enter the directory:

mkdir receipt_generator
cd receipt_generator

Now create your virtual environment:

python3 -m venv .venv

Then activate it:

source .venv/bin/activate

You should see a circle beside your terminal prompt now. Like this:
(my path name is different because I used a different folder. Just search for the circle. This might not show if you're on windows though. It might work for powershell. But it should show for WSl and any Linux distro.)

new term:
virtual environment: This is basically an enclosed space for your project development. Think of it as a controlled area for you to do your stuff without any external influence, except the one you create.

Once you press enter and type ls -a you should see the .venv/ folder in your code. It is going to hold all the packages we plan to install.

Now let's install our tools of trade.

pip install flask flask-sqlalchemy weasyprint gunicorn

you could also do this:

Create a file and call it requirements.txt and put this:

Flask
Flask-SQLAlchemy
WeasyPrint
gunicorn

Then run:
pip install -r requirements.txt

The above command will install everything in the requirements.txt file.

I'll explain what each of them is used for.

flask - This is our backend tool. It is built with python and allows for quick prototyping of applications. So our pdf generation, database access will be through this guy.

flask-sqlalchemy - Now, ideally, when it comes to database stuff for CRUD(Create, Read, Write, Update) operations. SQL(Sequel Query Language) is usually the de facto. But it can be stressful to write at times and could cause alot of issues if it's not written by a professional... our popular SQL injection attack could affect our application if we're not careful. Another reason why it's not advisable is because of abstraction... if we were to use a database like MySQL or PostgreSQL... the code needed for either of them would be slightly different, and that could affect the flexibility of our choice of database. So we need something that could allow us to plug and use what we want, that is where an ORM(Object Relational Mapper) comes in. Not only does it help with abstraction, but another very important use is the way it allows querying of a database using object-like syntax.
Below is an example for you to see the difference:
Sample code in raw SQL and SQLAlchemy that allows a user to query all receipts where total_amount > 3000.

SQL Alchemy

receipts = Receipt.query.filter(Receipt.total_amount > 3000).all()

for r in receipts:
    print(r.customer_name, r.total_amount)

Raw SQL

cursor.execute("SELECT customer_name, total_amount FROM receipts WHERE total_amount > ?", (3000,))
rows = cursor.fetchall()

for row in rows:
    print(row[0], row[1])

If you ask me... I'd say that using RAW SQL feels like leaving the Object Oriented Programming realm for a different realm and coming back a couple of times. I've had enough of realms in One Piece. I just wanna write code, man.

Weasyprint - This is the library that is helping us do the grunt work of converting html + css to pdf. Arigatou weasyprint!! (makes otaku noises..).

Gunicorn - This is a production-ready server that is optimized to handle requests very efficiently. It is where our Python code will run; this server will allow it to accept requests and act as needed. There are normal development servers that can be used while testing, but they should only be used for testing... such as django runserver(for django which is another python backend framework) or flask run(for flask).

Let's continue:

Create a file called app.py in that folder and put this code inside. I'll explain shortly:

from flask import Flask, render_template, request, send_file
from weasyprint import HTML
import os
from datetime import datetime

from db import db, Document

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///autodoc.db'
app.config['UPLOAD_FOLDER'] = 'uploads'

# Initialize DB with app
db.init_app(app)

# Ensure upload folder exists
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/form')
def form_page():
    return render_template('form.html')

@app.route('/generate', methods=['POST'])
def generate():
    # 1. Get Form Data
    data = {
        "name": request.form.get('name'),
        "email": request.form.get('email'),
        "doc_type": request.form.get('doc_type'),
        "amount": request.form.get('amount'),
        "date": datetime.now().strftime("%Y-%m-%d")
    }

    # 2. Render HTML to String
    rendered_html = render_template('pdf_template.html', **data)

    # 3. Convert to PDF
    filename = f"{data['name']}_{datetime.now().strftime('%Y%m%d%H%M%S')}.pdf"
    filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
    HTML(string=rendered_html).write_pdf(filepath)

    # 4. Save to DB
    new_doc = Document(
        name=data['name'], 
        email=data['email'], 
        doc_type=data['doc_type'], 
        amount=data['amount'],
        filename=filename
    )
    db.session.add(new_doc)
    db.session.commit()

    return send_file(filepath, as_attachment=True)

@app.route('/admin')
def admin():
    documents = Document.query.order_by(Document.created_at.desc()).all()
    return render_template('admin.html', documents=documents)

if __name__ == '__main__':
    with app.app_context():
        db.create_all()
    app.run(debug=True)

Create another file named db.py and put this inside:

# db.py
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime

db = SQLAlchemy()

class Document(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100))
    email = db.Column(db.String(100))
    doc_type = db.Column(db.String(50))
    amount = db.Column(db.Float)
    filename = db.Column(db.String(200))
    created_at = db.Column(db.DateTime, default=datetime.utcnow)

I'll explain:

from flask import Flask, render_template, request, send_file
- Flask is our main backend buddy.
- Flask → creates our web app.
- render_template → shows HTML pages to users.
- request → catches data users send through forms.
- send_file → lets users download files like PDFs.
from weasyprint import HTML
- WeasyPrint is a magical library that turns HTML + CSS into a PDF.
- Without it, converting a web page to PDF would be a nightmare.
import os
- OS helps us talk to the computer’s file system.
- Example: creating folders, saving files, checking paths.
from datetime import datetime
- Helps us track dates and times.
- Useful for timestamps like “2026-03-31 17:00” on receipts.
from db import db, Document
- db → our database handler (SQLite).
- Document → blueprint of what info we want to store (name, email, file, etc.).

Setting Up Flask

app = Flask(__name__)
- Creates the app instance. Think of it as booting up your engine.
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///autodoc.db'
- Tells Flask: “Hey, we’re using SQLite and this is our database file.”
app.config['UPLOAD_FOLDER'] = 'uploads'
- Sets a folder to store PDFs.
db.init_app(app)
- Connects the database to the Flask app.
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
- Makes the upload folder if it doesn’t exist yet.
- exist_ok=True → avoids error if the folder is already there.

Routes – The User Entry Points

@app.route('/') → index page
- The home page everyone sees first.
@app.route('/form') → form page
- Where users input their info (name, email, amount, document type).
@app.route('/generate', methods=['POST']) → PDF generation
- Triggered when the user submits the form.
- Here’s the magic step-by-step:

Get Form Data

 * Collect user inputs from the form using `request.form.get('name')`, `email`, etc.
 * Add current date with `datetime.now().strftime("%Y-%m-%d")`.

Render HTML to String

 * `render_template('pdf_template.html', **data)` → injects form data into our styled HTML.
 * Think: your info + pre-made receipt template = ready-to-go document.

Convert HTML to PDF

 * WeasyPrint takes the rendered HTML and writes a PDF file.
 * Filename is dynamic: `name_20260331170000.pdf` (prevents overwriting old PDFs).

Save to Database

 * Create a new `Document` record.
 * `db.session.add(new_doc)` → stage the data.
 * `db.session.commit()` → save it permanently.

Send PDF to User

 * `send_file(filepath, as_attachment=True)` → lets user download it immediately.

@app.route('/admin') → admin page
- Fetches all documents from the database.
- Document.query.order_by(Document.created_at.desc()).all() → shows newest first.
- Rendered in admin.html so you can review all receipts.

Database Setup – `db.py`

db = SQLAlchemy()
- The connection manager for all database stuff.
class Document(db.Model)
- Blueprint of our table. Columns include:
- id → unique identifier for each document.
- name, email → who the receipt is for.
- doc_type → Invoice, Ticket, Certificate…
- amount → money involved.
- filename → PDF file name.
- created_at → timestamp of creation.
Default values
- default=datetime.utcnow → if you forget the date, auto-fills with now.

Running the App

if __name__ == '__main__':
- Standard Python check to see if this file is being run directly.
db.create_all()
- Creates database tables if they don’t exist yet.
app.run(debug=True)
- Launches Flask development server.
- debug=True → shows errors in real-time (helpful while coding).

Newbie Notes / Terms

Library
- Pre-written code you can reuse (WeasyPrint is one).
- Saves you hours of rewriting the same stuff.
Virtual Environment
- Isolated workspace for your project.
- Keeps dependencies separate from your system Python.
ORM (Object Relational Mapper)
- Lets you talk to databases using Python objects instead of raw SQL.
- Cleaner, safer, and database-agnostic.
CRUD
- Create, Read, Update, Delete → main actions you do with data.

Create a folder named templates and create 5 files, viz:

admin.html
base.html
form.html
index.html
pdf_template.html

admin.html

{% extends "base.html" %}
{% block content %}
<div class="py-10">
    <div class="flex justify-between items-end mb-8">
        <div>
            <h1 class="font-bold text-slate-900 text-2xl">Document Archive</h1>
            <p class="text-slate-500 text-sm">Review and manage all generated assets.</p>
        </div>
    </div>

    <div class="bg-white shadow-sm border border-slate-200 rounded-2xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50 border-slate-200 border-b">
                        <th class="p-4 font-bold text-slate-500 text-xs uppercase tracking-widest">Client</th>
                        <th class="hidden sm:table-cell p-4 font-bold text-slate-500 text-xs uppercase tracking-widest">
                            Type</th>
                        <th class="p-4 font-bold text-slate-500 text-xs uppercase tracking-widest">Amount</th>
                        <th class="p-4 font-bold text-slate-500 text-xs text-right uppercase tracking-widest">Action
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    {% for doc in documents %}
                    <tr class="hover:bg-slate-50/50 transition-colors">
                        <td class="p-4">
                            <div class="font-semibold text-slate-800">{{ doc.name }}</div>
                            <div class="sm:hidden text-slate-400 text-xs">{{ doc.doc_type }}</div>
                        </td>
                        <td class="hidden sm:table-cell p-4 text-slate-600 text-sm">
                            <span class="bg-slate-100 px-2 py-1 rounded font-medium text-xs">{{ doc.doc_type }}</span>
                        </td>
                        <td class="p-4 font-bold text-indigo-600 text-sm">${{ "{:,.2f}".format(doc.amount) }}</td>
                        <td class="p-4 text-right">
                            <a href="/static/uploads/{{ doc.filename }}" download
                                class="inline-flex items-center bg-white hover:bg-slate-50 px-3 py-1.5 border border-slate-200 hover:border-slate-300 rounded-lg font-semibold text-slate-700 text-xs transition">
                                <svg class="mr-1 w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                </svg>
                                PDF
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

base.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AutoDoc | Automation Pro</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>

<body class="bg-slate-50 text-slate-900">
    <nav class="top-0 z-50 sticky bg-white/80 backdrop-blur-md border-slate-200 border-b">
        <div class="mx-auto px-4 sm:px-6 max-w-5xl">
            <div class="flex justify-between items-center py-4">
                <a href="/" class="flex items-center space-x-2">
                    <div class="flex justify-center items-center bg-indigo-600 rounded-lg w-8 h-8 font-bold text-white">
                        A</div>
                    <span class="font-bold text-slate-800 text-xl tracking-tight">AutoDoc</span>
                </a>

                <div class="hidden md:flex items-center space-x-8 font-medium text-sm">
                    <a href="/form" class="text-slate-600 hover:text-indigo-600 transition">Create New</a>
                    <a href="/admin" class="text-slate-600 hover:text-indigo-600 transition">Dashboard</a>
                    <a href="/form"
                        class="bg-indigo-600 hover:bg-indigo-700 shadow-sm px-4 py-2 rounded-full text-white transition">Get
                        Started</a>
                </div>

                <div class="md:hidden">
                    <a href="/admin" class="p-2 text-slate-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <main class="mx-auto px-4 sm:px-6 max-w-5xl min-h-screen">
        {% block content %}{% endblock %}
    </main>

    <footer class="bg-white mt-20 border-slate-200 border-t">
        <div class="mx-auto px-4 py-12 max-w-5xl text-center">
            <p class="text-slate-400 text-sm">Designed for Professional Automation Workflows</p>
        </div>
    </footer>
</body>

</html>

form.html

{% extends "base.html" %}
{% block content %}
<div class="flex justify-center py-12">
    <div class="w-full max-w-xl">
        <div class="mb-10 text-center">
            <h1 class="font-bold text-slate-900 text-3xl">Document Generator</h1>
            <p class="mt-2 text-slate-500">Fill in the details below to generate your secured PDF.</p>
        </div>

        <form action="/generate" method="POST"
            class="bg-white shadow-slate-200/50 shadow-xl p-6 sm:p-10 border border-slate-100 rounded-2xl">
            <div class="space-y-6">
                <div class="group">
                    <label class="block mb-2 font-semibold text-slate-500 text-xs uppercase tracking-wider">Recipient
                        Name</label>
                    <input type="text" name="name" placeholder="John Doe" required
                        class="bg-slate-50 p-4 border-0 rounded-xl outline-none ring-1 ring-slate-200 focus:ring-2 focus:ring-indigo-500 w-full transition">
                </div>

                <div class="group">
                    <label class="block mb-2 font-semibold text-slate-500 text-xs uppercase tracking-wider">Email
                        Address</label>
                    <input type="email" name="email" placeholder="john@example.com" required
                        class="bg-slate-50 p-4 border-0 rounded-xl outline-none ring-1 ring-slate-200 focus:ring-2 focus:ring-indigo-500 w-full transition">
                </div>

                <div class="gap-6 grid grid-cols-1 sm:grid-cols-2">
                    <div>
                        <label
                            class="block mb-2 font-semibold text-slate-500 text-xs uppercase tracking-wider">Type</label>
                        <select name="doc_type"
                            class="bg-slate-50 p-4 border-0 rounded-xl outline-none ring-1 ring-slate-200 focus:ring-2 focus:ring-indigo-500 w-full appearance-none cursor-pointer">
                            <option value="Invoice">Invoice</option>
                            <option value="Event Ticket">Event Ticket</option>
                            <option value="Certificate">Certificate</option>
                        </select>
                    </div>
                    <div>
                        <label class="block mb-2 font-semibold text-slate-500 text-xs uppercase tracking-wider">Amount
                            ($)</label>
                        <input type="number" name="amount" step="0.01" placeholder="0.00"
                            class="bg-slate-50 p-4 border-0 rounded-xl outline-none ring-1 ring-slate-200 focus:ring-2 focus:ring-indigo-500 w-full transition">
                    </div>
                </div>

                <button type="submit"
                    class="bg-slate-900 hover:bg-indigo-600 shadow-indigo-200 shadow-lg py-4 rounded-xl w-full font-bold text-white active:scale-[0.98] transition-all transform">
                    Generate & Download PDF
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

index.html

{% extends "base.html" %}
{% block content %}
<div class="py-20 text-center">
    <h1 class="mb-6 font-extrabold text-gray-900 text-5xl">
        Generate Professional Documents <span class="text-indigo-600">Instantly</span>.
    </h1>
    <p class="mx-auto mb-10 max-w-2xl text-gray-600 text-xl">
        Automate your business workflow. Convert form data into beautiful,
        print-ready PDFs for invoices, certificates, and tickets.
    </p>
    <div class="flex justify-center space-x-4">
        <a href="/form"
            class="bg-indigo-600 hover:bg-indigo-700 px-8 py-3 rounded-lg font-semibold text-white transition">
            Start Generating
        </a>
        <a href="/admin"
            class="bg-white hover:bg-gray-50 px-8 py-3 border border-gray-300 rounded-lg font-semibold transition">
            View Admin Logs
        </a>
    </div>
</div>
{% endblock %}

pdf_template.html

<!DOCTYPE html>
<html>

<head>
    <style>
        @page {
            margin: 0;
        }

        body {
            font-family: 'Helvetica', sans-serif;
            color: #1e293b;
            margin: 0;
            padding: 0;
        }

        .sidebar {
            background: #4f46e5;
            width: 10px;
            height: 100%;
            position: absolute;
        }

        .container {
            padding: 60px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #f1f5f9;
            padding-bottom: 20px;
        }

        .badge {
            background: #eef2ff;
            color: #4338ca;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }

        .title {
            font-size: 32px;
            font-weight: bold;
            color: #111827;
            margin: 10px 0;
        }

        .meta-table {
            width: 100%;
            margin-top: 40px;
            border-collapse: collapse;
        }

        .meta-table th {
            text-align: left;
            color: #64748b;
            font-size: 10px;
            text-transform: uppercase;
            padding-bottom: 8px;
        }

        .meta-table td {
            font-size: 16px;
            padding-bottom: 20px;
        }

        .total-box {
            margin-top: 60px;
            background: #f8fafc;
            padding: 30px;
            border-radius: 12px;
            text-align: right;
        }

        .total-label {
            font-size: 14px;
            color: #64748b;
        }

        .total-amount {
            font-size: 36px;
            font-weight: bold;
            color: #4f46e5;
        }
    </style>
</head>

<body>
    <div class="sidebar"></div>
    <div class="container">
        <div class="header">
            <div>
                <span class="badge">OFFICIAL {{ doc_type | upper }}</span>
                <div class="title">AutoDoc System</div>
            </div>
            <div style="text-align: right; color: #94a3b8; font-size: 12px;">
                Issued: {{ date }}<br>
                Ref: #AD-{{ range(1000, 9999) | random }}
            </div>
        </div>

        <table class="meta-table">
            <tr>
                <th>Issued To</th>
                <th>Contact Email</th>
            </tr>
            <tr>
                <td><strong>{{ name }}</strong></td>
                <td>{{ email }}</td>
            </tr>
        </table>

        <div class="total-box">
            <div class="total-label">Total Amount Payable</div>
            <div class="total-amount">${{ "{:,.2f}".format(amount|float) }}</div>
        </div>

        <div style="margin-top: 100px; font-size: 10px; color: #cbd5e1; text-align: center;">
            This is a computer-generated document. No signature is required.
        </div>
    </div>
</body>

</html>

now run:

python3 app.py

This will run the application. You should see something like this:

Now open the link shown there in your brower:

This should come up:

That's all.
Watch out for the next article where I teach how to deploy it to a VPS with nginx and docker.
After this you should be able to share it with your friends so they can test it for you.

Navigating the Blockchain Trilemma: Decentralization, Scalability, and Security

Numerous Oriabure — Fri, 20 Jun 2025 14:42:18 +0000

🧠 Introduction

Imagine you're building a dream treehouse for your neighborhood. You want it to be a place where everyone has a say in how it’s run (decentralized), can handle a big crowd of friends (scalable), and is safe from pesky intruders or stormy weather (secure). Sounds perfect, right? But here’s the catch: making the treehouse super inclusive might slow down decision-making, adding more space could weaken the structure, and locking it down tightly might limit who can join the fun.

This, in essence, is the blockchain trilemma—a core challenge in blockchain technology where balancing decentralization, scalability, and security is like juggling flaming torches while riding a unicycle.

Blockchain is the tech behind cryptocurrencies like Bitcoin and Ethereum, but its potential goes way beyond digital money, from supply chains to voting systems. For beginners, enthusiasts, and developers alike, understanding the blockchain trilemma is key to grasping why building the perfect blockchain is so tricky.

In this article, we’ll break down the trilemma using relatable analogies, explore each piece of the puzzle, and peek at how innovators are trying to crack this nut. Let’s dive in!

🔍 Understanding the Blockchain Trilemma

Think of a blockchain like a bustling community kitchen where everyone shares recipes and ingredients to cook meals together. The trilemma is the challenge of making this kitchen run smoothly: you want everyone to have a voice in the menu (decentralization), serve hundreds of hungry people quickly (scalability), and ensure no one sneaks in bad ingredients (security).

If you focus too much on one aspect, the others might suffer. For example:

Letting everyone vote on every dish could slow things down.
Rushing to serve more people might mean less time to check for spoiled food.

Coined by Vitalik Buterin, co-founder of Ethereum, the blockchain trilemma highlights that no blockchain can fully optimize all three aspects without making trade-offs.

🧩 Decentralization: The Core of Blockchain

💡 What is Decentralization?

Decentralization is like running a school club where every member gets a vote and no single president calls all the shots. In blockchain, it means no central authority controls the network. Instead, computers (called nodes) around the world validate transactions and keep the system honest.

🔍 Why It Matters

Decentralization ensures:

Transparency – Everyone can see the ledger.
Autonomy – No middleman takes a cut.
Resilience – No single point of failure.

🌐 Real-World Examples

Bitcoin: Thousands of nodes maintain its network globally.
Ethereum: Supports decentralized apps (dApps) across many industries.

⚠️ Challenges

But it's not all sunshine. Imagine if every club member had to agree on every detail—it’d take forever! Similarly:

Every node must verify transactions → slower speeds.
Coordinating upgrades becomes complex.

🚀 Scalability: Meeting Growing Demand

💡 What is Scalability?

Scalability is how many people your blockchain “treehouse” can support without slowing down. It’s the ability to process more transactions quickly as more users join.

🔍 Why It Matters

To support global systems (like payments or supply chains), blockchains must:

Handle millions of transactions
Avoid traffic jams and high fees

Without it, it’s like trying to serve coffee to a whole city with one café.

🛠️ Scalability Solutions

Sharding: Like splitting your café into mini-cafés.

👉 Ethereum is working on this to process in parallel.
Layer 2 Solutions: Like a drive-thru for quick orders.

👉 Examples: Lightning Network (Bitcoin), Optimistic Rollups (Ethereum)

⚠️ Challenges

Splitting the network may reduce consistency (security risk).
Scaling solutions can introduce bugs or weaken decentralization.

🔐 Security: Safeguarding the Network

💡 Why Security Matters

Security is like locking your treehouse to keep out intruders and ensure it doesn’t fall apart. In blockchain, it protects transactions from:

Hacks
Fraud
Data corruption

🔐 Security Mechanisms

Cryptography: Secret codes to keep data private.
Consensus algorithms:
- Proof of Work (Bitcoin)
- Proof of Stake (Ethereum 2.0)

These systems ensure no single party can take over the network.

⚠️ Threats and Mitigations

51% attacks: When someone controls most of the network.

👉 Mitigation: Make attacks expensive (PoW) or penalize bad actors (PoS).
Smart contract bugs: Like a faulty treehouse lock.

👉 Solution: Code audits and rigorous testing.

🔄 Trade-offs

More security means slower processing.
Decentralized fixes are harder to coordinate.

⚖️ Navigating the Trilemma: Trade-offs and Challenges

Balancing the trilemma is like baking a cake that’s:

Healthy
Delicious
Quick to make

Improving one often weakens the others.

Examples:

Bitcoin: Secure & decentralized — but slow (~7 TPS).
Ethereum: Decentralized with smart contract support — but expensive during demand surges.
Solana: Highly scalable (up to 65,000 TPS) — but criticized for being less decentralized.

Each project picks a different “priority,” showing how tricky this balancing act is.

🧪 Innovations Addressing the Trilemma

Blockchain isn’t stuck—developers are innovating rapidly:

🌿 Ethereum 2.0

Introduces sharding + Proof of Stake
Boosts speed, cuts energy use, keeps decentralization

🔗 Polkadot

Uses a relay chain to connect multiple specialized blockchains
Like a food court with optimized stalls

⏱️ Solana

Uses Proof of History to speed things up
Timestamping improves throughput dramatically

⚠️ These are promising but not silver bullets. Future solutions may involve:

New consensus algorithms

Zero-knowledge proofs

Even quantum-resilient cryptography

🧭 Conclusion

The blockchain trilemma—balancing decentralization, scalability, and security—is like building the ultimate treehouse: exciting, tricky, and full of trade-offs.

Decentralization gives freedom.
Scalability handles crowds.
Security keeps it safe.

From Bitcoin’s roots to Solana’s speed, each blockchain plays its hand differently. But innovation marches on, and projects like Ethereum 2.0 and Polkadot show there's hope.

For developers and enthusiasts alike, this trilemma is an open invitation to experiment, explore, and build. Who knows? Maybe you’ll be the one to crack the code.

🗨️ What are your thoughts on the blockchain trilemma? Which project do you think is closest to solving it? Let’s discuss below! 👇

The Hidden Depth of Skill: What Building Taught Me About Ego

Numerous Oriabure — Fri, 20 Jun 2025 09:18:15 +0000

There was a time when I thought I could build anything I saw online.

I’d scroll through Twitter or dev showcases and think,

“Yeah, I know those concepts. I could recreate that easily.”

Especially when I got into CSS seriously—I went through the entire MDN tutorial and started feeling more confident. I could follow along with projects, write decent layouts, and things made sense. So naturally, when I saw something impressive, I assumed:

“I could build this. It’s just HTML and CSS, right?”

But for a long time, I only thought I could.

I never actually did.

From Confidence to Clarity

That mindset stuck with me for about 4 to 6 months—believing I had it all figured out, just because I understood the basics.

Until one day, I decided to test myself and actually build one of the things I admired.

And that’s when it hit me.

I underestimated everything.

What I thought would take two days ended up taking a week—and that was with me trying hard. I struggled with things like positioning, spacing, animation timing, responsiveness—things I thought I had “learned.”

That was my wake-up call.

The Backend Smacked Me Too

It wasn’t just frontend. Backend hit me with the same kind of reality.

At first, I’d look at solid, scalable apps—those that never go down, always handle users well—and think,

“That’s not too complex. I’ve followed a few backend tutorials, I can handle that.”

Then I tried to build and host something real.

And guess what happened?

Downtime
Errors
Scaling issues
Security problems
Even a moment where people found ways to steal keys

That’s when I realized: there’s a whole world of invisible decisions behind clean, running software. These devs aren’t just writing APIs. They’re thinking about:

Caching layers
DDoS mitigation
Database resilience
Server costs
User behavior

Things I never even considered.

The Illusion of Knowing

Sometimes, I’d read a few pages of a book and think I could implement what the author described. Or I’d build a small feature and feel ready to recreate a professional app.

But the reality?

Knowing the idea is not the same as knowing the craft.

You only feel that gap when you try to go deep.

And often, that’s when the shame kicks in—like,

“I thought I was better than this.”

The Role of Ego

Ego is weird. It’s what pushes us to even try in the first place.

It tells us, “You can do this too.”

And we need that.

But it also blinds us if we’re not careful.

What I’ve learned—through frustration, late nights, and slow progress—is that ego needs balance.

You should believe in yourself.

But you also need to respect the quiet skill in others.

Especially the kind of skill that doesn't shout, but solves.

Final Thoughts

Now, when I see a beautiful app or a smooth animation, I pause.

I no longer say, “I can build that.”

Instead, I think, “I’d love to learn how they built that.”

Because there’s always more beneath the surface.

And the deeper you go, the more respect you gain—for the craft, and for those quietly mastering it.

“It’s easy to look skilled. It’s hard to be skilled. The difference lies in what no one sees—until everything breaks.”

🙏 Thanks for reading. If you’ve ever experienced this illusion—or humbled yourself through the grind—I’d love to hear your thoughts in the comments.

Starting my journey with HNG

Numerous Oriabure — Thu, 27 Jun 2024 17:22:53 +0000

I recently got accepted into the HNG internship program. My life has been revolving around tech for a while now. It's been a rollercoaster of emotions for me.

I wouldn't say I'm a newbie to programming in general. I've built simple websites with html, css and js. They're mostly challenges from Frontendmentor.com.

I've built simple backend websites too with the help of books using the Django framework, ranging from blogs to photo sharing websites.

Although these didn't go without challenges. One notable problem was understanding how to integrate sending of emails asynchronously using celery and rabbitmq. I implemented it for an e-commerce site. The main issue I had was finding resources that could explain the process. I eventually found a book that implemented it. It was straightforward from there.

Sadly I've not deployed most of the projects. But I'm happy with the knowledge I've gained.

Late last month I stared learning blockchain development with solidity. I successfully created two smart contracts. Even deployed my first NFT yesterday to my testnet.

If I were to be honest with myself. I would say I'm nowhere near job ready. I've come to realise that there's a lot of things to learn from production level projects that people are actively using.

My knowledge and skills are still myopic. Too many things I don't know. Too many loose concepts in my head. I love programming. I really do. But I want more from it. I want to contribute to programming and in essence make impact in the tech world. It's one of the reasons I nicknamed myself "Kalmin The Tech Titan", you would even see it on my twitter profile @KalDTechTitan.

I believe HNG will help me achieve this goal. That's my goal for this program. To gain real world experience and connect with like minds all over the world. Thank you once again HNG for the privilege. I will make you proud.

If you're interested in the HNG program check out these links.
https://hng.tech/internship
https://hng.tech/hire
https://hng.tech/premium

Warping realities: JavaScript closures in the Developer's Toolkit.

Numerous Oriabure — Sun, 03 Dec 2023 16:44:03 +0000

Introduction

What exactly are closures?

Closures in layman terms simply means closing(😁). It entails the action of enclosing an entity within another.

Significance of closures in JavaScript.

Encapsulation: Safely bundling data and functions, reducing naming conflicts.
Data Privacy: Creating private variables, enhancing security.
Function Factories: Dynamically generating functions with specific configurations.
Callback Functions: Maintaining state in asynchronous operations.
Module Patterns: Structuring code into modules with private and public methods.

Functions recap

Before we jump into functions I want to set take you down the memory lane of functions and how they relate to closures.
Think of functions as recipes. They're sets of instructions you can use over and over again, like a cooking recipe. You can take a recipe (function), tweak it, and even pass it along to others. These recipes also create a kitchen (scope) where ingredients (variables) are kept separate and organized.
Now, closures are like hidden notes within these recipes. When you write a recipe(function) in JavaScript, it not only lists ingredients and steps but also has a secret compartment(closure). This compartment allows the recipe to remember things from the kitchen (outer function) even after it's done cooking. It's like having a cooking secret that involves not just the steps but also some insider knowledge from the kitchen. This hidden info is handy for keeping some details private, organizing things neatly, and pulling off some nifty programming tricks.

Definition of closures in the concept of JavaScript.

In JavaScript, a closure is a combination of a function and the lexical environment within which that function was declared.
The lexical environment is everything outside of the function. Take a look at the code snippet below.

function outerFunction() {
  // Outer function scope
  let outerVariable = 'I am from the outer function';

  function innerFunction() {
    // Inner function scope
    console.log(outerVariable);
  }

  innerFunction(); // Call the inner function
}

outerFunction(); // Output: I am from the outer function

As you can observe from the snippet, the outerVariable was printed because because the function inner() could access it due to the closure property.
Those coming from languages like Python wouldn't really find this concept strange because of the syntactic sugar in those higher level languages. In languages like C, one would invaluably need the knowledge of functions and pointers to replicate this functionality.

Memory management

Although closures in JavaScript powerful and useful, they can potentially lead to memory management issues if not used carefully. Some common scenarios are outlined below:

Retaining Unnecessary References:

Closures can unintentionally retain references to variables from their outer scope, preventing them from being garbage collected.
If a closure is holding references to large objects or data structures that are no longer needed, it can lead to unnecessary memory consumption.

function createClosure() {
  let data = /* some large data */;
  return function () {
    // The closure retains a reference to 'data'
    console.log(data);
  };
}

Accidental Global Variable Retention:

If a closure references a variable from an outer scope that happens to be a global variable, the closure will prevent that global variable from being garbage collected even if the closure is long-lived.

Event Handlers and DOM Nodes:

Closures used in event handlers can lead to memory leaks if they capture references to DOM elements.
When an element is removed from the DOM, the closure may still reference it, preventing the element and associated resources from being released.

function setupEvent() {
  let element = document.getElementById('someElement');
  element.addEventListener('click', function () {
    // The closure retains a reference to 'element'
    console.log('Element clicked');
  });
}

Common pitfalls while using closures in JavaScript.

Performance Concerns:

Closures can have performance implications, especially in situations where they are created in large quantities or are long-lived. Excessive use of closures may lead to increased memory consumption and slower performance.

function processArray(array) {
  let result = [];

  for (let i = 0; i < array.length; i++) {
    result.push(function () {
      console.log(array[i]);
    });
  }

  return result;
}

In this example, the closures in the array capture the loop variable, and they will all reference the same i value when invoked.

Memory Leaks with Event Handlers:

Closures used in event handlers can lead to memory leaks if not handled carefully. If an element is removed from the DOM, but the closure still references it, the element and its associated resources may not be released.

function setupEvent() {
  let element = document.getElementById('someElement');
  element.addEventListener('click', function () {
    // The closure retains a reference to 'element'
    console.log('Element clicked');
  });
}

To avoid memory leaks, remember to remove event listeners when they are no longer needed.

Accidental Shared Variables:

If you use closures in a loop to create functions, be cautious about capturing loop variables. If not done correctly, all the closures may end up sharing the same variable.

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i); // Outputs 5, 5, 5, 5, 5
  }, 1000);
}

To avoid this, you can use let in modern JavaScript versions or create a new scope for each iteration using an IIFE (Immediately Invoked Function Expression).

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i); // Outputs 0, 1, 2, 3, 4
  }, 1000);
}

Summary

So far we've learnt about closures in JavaScript. Why they're used and how to use them. We also looked into different scenarios in which their usage might be abused. JavaScript can be a fun and powerful languages at times. But that could turn the other way around if abused or used wrongly. I hope I've been able to clarify your thoughts on closures in JavaScript. I'll leave some links down below incase you want to go deeper into the concept. For now Bye😁❤.

Please like and comment for more of these kind of articles.
P.S This is my first😍😊.

Thank you.

MDN Docs
Eloquent JavaScript by Marijn Haverbeke

DEV Community: Numerous Oriabure

Building a Receipt Generator with Flask and Tailwind

Setting Up Flask

Routes – The User Entry Points

Database Setup – db.py

Running the App

Newbie Notes / Terms

Navigating the Blockchain Trilemma: Decentralization, Scalability, and Security

🧠 Introduction

🔍 Understanding the Blockchain Trilemma

🧩 Decentralization: The Core of Blockchain

💡 What is Decentralization?

🔍 Why It Matters

🌐 Real-World Examples

⚠️ Challenges

🚀 Scalability: Meeting Growing Demand

💡 What is Scalability?

🔍 Why It Matters

🛠️ Scalability Solutions

⚠️ Challenges

🔐 Security: Safeguarding the Network

💡 Why Security Matters

🔐 Security Mechanisms

⚠️ Threats and Mitigations

🔄 Trade-offs

⚖️ Navigating the Trilemma: Trade-offs and Challenges

🧪 Innovations Addressing the Trilemma

🌿 Ethereum 2.0

🔗 Polkadot

⏱️ Solana

🧭 Conclusion

The Hidden Depth of Skill: What Building Taught Me About Ego

From Confidence to Clarity

The Backend Smacked Me Too

The Illusion of Knowing

The Role of Ego

Final Thoughts

Starting my journey with HNG

Warping realities: JavaScript closures in the Developer's Toolkit.

Table of Contents:

Introduction

What exactly are closures?

Significance of closures in JavaScript.

Functions recap

Definition of closures in the concept of JavaScript.

Memory management

Retaining Unnecessary References:

Accidental Global Variable Retention:

Event Handlers and DOM Nodes:

Common pitfalls while using closures in JavaScript.

Performance Concerns:

Memory Leaks with Event Handlers:

Accidental Shared Variables:

Summary

Database Setup – `db.py`