If you've ever used the React documentation or seen a blog post where you can edit code and see a live preview instantly, you've likely seen Sandpack in action.

Even though CodeSandbox has recently pivoted toward AI infrastructure, Sandpack remains one of the best ways to embed an interactive coding experience into your website. In this guide, we'll walk through how to set it up, what you need to know about its current status, and whether it's still the right choice for your project.

What is Sandpack?

Sandpack is an open-source component toolkit that brings the power of the CodeSandbox bundler directly to your React app. It allows you to:

• Provide live-running code examples

• Support multiple frameworks (React, Vue, Svelte, Vanilla JS)

• Custom-style the editor to match your brand

• Run entirely in the browser without server dependencies

The Maintenance Situation: What You Need to Know

Today which is 18th March 2026 08:54 IST got a mail that clearly marks that SandPack will no longer be actively maintained.

What Still Works:

• All existing functionality remains stable

• The bundler is battle-tested and production-ready

• Community contributions are still accepted

• No breaking changes are expected

What to Consider:

• New framework versions may not be immediately supported

• Security patches will likely be community-driven

• Feature requests will depend on community contributions

Bottom Line: For documentation sites, blogs, and educational content in 2026, Sandpack is still reliable. For mission-critical enterprise applications requiring guaranteed support, you might want alternatives.

Getting Started

First, install the package. It's lightweight and easy to drop into any React project.

npm install @codesandbox/sandpack-react

Bundle Size: significantly smaller than Monaco Editor or full IDE solutions.
https://bundlephobia.com/package/@codesandbox/sandpack-react@2.20.0

https://bundlephobia.com/package/monaco-editor

Your First Playground

The simplest way to use Sandpack is the <Sandpack /> preset. This gives you a code editor and a preview window in one go.

import { Sandpack } from "@codesandbox/sandpack-react";

export default function MyBlog() {
  return (
    <Sandpack 
      template="react" 
      theme="dark" // or "light", "amethyst", "github-light"
    />
  );
}

Customizing Your Code

You don't usually want a blank template; you want to show your code. You can pass a files object to define the starting state.

<Sandpack
  files={{
    "/App.js": `export default function App() {
  return <h1>Hello from my blog!</h1>
}`,
    "/styles.css": "h1 { color: purple; }",
  }}
  template="react"
/>

Pro Tips for Better UX

To make your blog post or documentation feel truly professional, try these settings:

A. Show the File Explorer

If your example has multiple files, let the user see them.

<Sandpack
  files={{ /* your files */ }}
  options={{
    showTabs: true,
    showLineNumbers: true, 
    editorHeight: 400,
    showNavigator: true, // File explorer
  }}
/>

B. Add Dependencies

Need to show how to use a library like framer-motion or lodash (not really) ? Just add it to the customSetup.

<Sandpack
  customSetup={{
    dependencies: {
      "framer-motion": "latest",
      "date-fns": "^2.30.0", // You can specify versions
    },
  }}
/>

C. Use "Read-Only" Files

Sometimes you want users to play with App.js but keep the utility files hidden or uneditable.

<Sandpack 
 files={{
    "/App.js": `import { secret } from './Utils';
export default function App() {
  return <h1>The answer is {secret}</h1>
}`, // code content
 "/Utils.js": {
      code: "export const secret = 42;",
      readOnly: true,
      hidden: true,
    },
  }}

/>

D. Set Active File

Control which file opens by default:

<Sandpack 
options={{ activeFile: "/App.js", // This file will be visible on load
visibleFiles: ["/App.js", "/styles.css"], // Only show these tabs }} 
/>

Real-World Use Cases

1. Technical Blog Posts Perfect for demonstrating React hooks, state management patterns, or API integrations with live, editable examples.

2. Component Library Documentation Show your UI components in action with customizable props that readers can modify in real-time.

3. Educational Content Interactive tutorials where students can experiment with code directly in the lesson.

4. API Documentation Demonstrate API calls with live examples that developers can test immediately.

5. Code Review & Collaboration Share reproducible code snippets with teammates without creating full repositories.

Common Pitfalls & Solutions

Mistake: Large Initial Files

<Sandpack
  files={{
    "/App.js": veryLargeCodeString, // 1000+ lines
  }}
/> 

Solution: Split Code or Lazy Load

<Sandpack 
files={{ 
"/App.js": mainComponent, 
"/helpers.js": { code: utilities, hidden: true },
 }}
options={{ 
activeFile:"/App.js", 
visibleFiles: ["/App.js"], // Hide heavy files initially 
}} 
/>

Future-Proofing Your Implementation

Since Sandpack is no longer actively maintained, here's how to protect your investment:

1. Version Pinning

{ "dependencies": { "@codesandbox/sandpack-react": "2.13.5" 
// Don't use ^ or ~ 
} }

Complete Example: Production-Ready Blog Playground

Here's a complete, production-ready example with all best practices:

import { Sandpack } from "@codesandbox/sandpack-react";

export default function ProductionSandpack() {
  return (
    <Sandpack
      template="react"
      theme="github-light"
      files={{
     "/App.js": `import { useState } from 'react';
import './styles.css';

export default function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div className="counter">
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}`,
        "/styles.css": `.counter {
  font-family: sans-serif;
  text-align: center;
  padding: 2rem;
}

button {
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  background: #61dafb;
  border: none;
  border-radius: 4px;
}

button:hover {
  background: #4fa8c5;
}`,
      }}
      options={{
        showLineNumbers: true,
        showInlineErrors: true,
        editorHeight: 400,
        showNavigator: false,
        showTabs: true,
        closableTabs: false,
        activeFile: "/App.js",
      }}
      customSetup={{
        dependencies: {
          "react": "^18.2.0",
          "react-dom": "^18.2.0"
        },
      }}
    />
  );
}

Conclusion

Despite no longer being actively maintained, Sandpack remains one of the most elegant solutions for embedding code playgrounds in 2026. Its small bundle size, zero configuration setup, and beautiful defaults make it perfect for:

• Documentation sites

• Technical blogs

• Educational content

• Component showcases

For these use cases, Sandpack is still the most developer-friendly option available.

However, if you need cutting-edge features, enterprise support, or server-side capabilities, exploring alternatives like StackBlitz WebContainers might be worth the added complexity.

The key is understanding your requirements and choosing the tool that best fits your specific needs.

Resources

• Sandpack Documentation

• GitHub Repository

• Josh W. Comeau's Blog - Great real-world examples

• StackBlitz WebContainers - Alternative for Node.js support

• Monaco Editor - If you need just the editor

Understanding ERPNext APIs

ERPNext follows a RESTful architecture, making it easy to interact with your ERP system programmatically. The API supports standard HTTP methods (GET, POST, PUT, DELETE) and returns data in JSON format.

Authentication

Before using any API, you need to authenticate. ERPNext supports two main authentication methods:

Token-Based Authentication

Generate an API key and secret from User settings:

1. Go to User List

2. Open your user record

3. Click on "API Access" section

4. Generate Keys

Use these credentials in your API requests:

import requests

url = "https://your-site.erpnext.com/api/resource/Item"
headers = {
    "Authorization": "token api_key:api_secret"
}

response = requests.get(url, headers=headers)

Password-Based Authentication

Alternatively, use username and password:

import requests

# Login to get session
login_url = "https://your-site.erpnext.com/api/method/login"
credentials = {
    "usr": "your_username",
    "pwd": "your_password"
}

session = requests.Session()
session.post(login_url, data=credentials)

# Now use the session for API calls
response = session.get("https://your-site.erpnext.com/api/resource/Item")

Using Existing ERPNext APIs

Fetching Documents (GET)

Retrieve a list of documents:

# Get all items
response = requests.get(
    "https://your-site.erpnext.com/api/resource/Item",
    headers=headers
)

# Get with filters
response = requests.get(
    "https://your-site.erpnext.com/api/resource/Item",
    headers=headers,
    params={
        "fields": '["name", "item_name", "item_group"]',
        "filters": '[["Item", "item_group", "=", "Products"]]',
        "limit_page_length": 20
    }
)

Retrieve a specific document:

item_name = "ITEM-001"
response = requests.get(
    f"https://your-site.erpnext.com/api/resource/Item/{item_name}",
    headers=headers
)

Creating Documents (POST)

# Create a new customer
customer_data = {
    "doctype": "Customer",
    "customer_name": "John Doe",
    "customer_type": "Individual",
    "customer_group": "Individual",
    "territory": "All Territories"
}

response = requests.post(
    "https://your-site.erpnext.com/api/resource/Customer",
    headers=headers,
    json=customer_data
)

Updating Documents (PUT)

# Update customer
customer_name = "CUST-001"
update_data = {
    "mobile_no": "+1234567890",
    "email_id": "john@example.com"
}

response = requests.put(
    f"https://your-site.erpnext.com/api/resource/Customer/{customer_name}",
    headers=headers,
    json=update_data
)

Deleting Documents (DELETE)

# Delete a document
response = requests.delete(
    f"https://your-site.erpnext.com/api/resource/Customer/{customer_name}",
    headers=headers
)

Creating Custom APIs in ERPNext

Now let's create our own custom APIs. There are two main approaches:

Method 1: Whitelisted Functions

Create a Python file in your custom app. For example, in your_app/your_app/api.py:

import frappe

@frappe.whitelist()
def get_customer_orders(customer_name):
    """Get all orders for a specific customer"""

    orders = frappe.get_all(
        "Sales Order",
        filters={"customer": customer_name},
        fields=["name", "transaction_date", "grand_total", "status"]
    )

    return orders

@frappe.whitelist()
def create_custom_item(item_name, item_group, price):
    """Create a new item with custom logic"""

    # Validate inputs
    if not item_name or not item_group:
        frappe.throw("Item name and group are required")

    # Create item
    item = frappe.get_doc({
        "doctype": "Item",
        "item_code": item_name,
        "item_name": item_name,
        "item_group": item_group,
        "stock_uom": "Nos"
    })
    item.insert()

    # Create item price if provided
    if price:
        item_price = frappe.get_doc({
            "doctype": "Item Price",
            "item_code": item_name,
            "price_list": "Standard Selling",
            "price_list_rate": price
        })
        item_price.insert()

    frappe.db.commit()

    return {
        "success": True,
        "item_name": item_name,
        "message": "Item created successfully"
    }

@frappe.whitelist(allow_guest=True)
def public_api_endpoint():
    """This endpoint can be accessed without authentication"""
    return {"message": "This is a public endpoint"}

Call these APIs:

# With authentication
response = requests.post(
    "https://your-site.erpnext.com/api/method/your_app.api.get_customer_orders",
    headers=headers,
    json={"customer_name": "CUST-001"}
)

# Public endpoint (no auth needed)
response = requests.get(
    "https://your-site.erpnext.com/api/method/your_app.api.public_api_endpoint"
)

Method 2: API Endpoints with Custom Routes

For more control, create custom API endpoints in hooks.py:

# In your_app/hooks.py
app_name = "your_app"

# Add custom API routes
web_api = {
    "/api/v1/customers": "your_app.api.v1.customers.get_customers",
    "/api/v1/orders": "your_app.api.v1.orders.create_order"
}

Then create the corresponding handlers:

# In your_app/api/v1/customers.py
import frappe
from frappe import _

@frappe.whitelist(allow_guest=False)
def get_customers():
    """Custom endpoint for getting customers with additional logic"""

    method = frappe.request.method

    if method == "GET":
        # Handle GET request
        filters = {}
        if frappe.request.args.get("territory"):
            filters["territory"] = frappe.request.args.get("territory")

        customers = frappe.get_all(
            "Customer",
            filters=filters,
            fields=["name", "customer_name", "territory", "customer_group"]
        )

        return {
            "success": True,
            "data": customers
        }

    elif method == "POST":
        # Handle POST request
        data = frappe.request.json

        customer = frappe.get_doc({
            "doctype": "Customer",
            "customer_name": data.get("customer_name"),
            "customer_type": data.get("customer_type", "Company"),
            "customer_group": data.get("customer_group", "Commercial"),
            "territory": data.get("territory", "All Territories")
        })
        customer.insert()
        frappe.db.commit()

        return {
            "success": True,
            "customer_id": customer.name
        }

Best Practices

Error Handling

Always implement proper error handling:

import frappe

@frappe.whitelist()
def safe_api_method(item_code):
    try:
        # Check if item exists
        if not frappe.db.exists("Item", item_code):
            frappe.throw(_("Item {0} does not exist").format(item_code))

        item = frappe.get_doc("Item", item_code)

        return {
            "success": True,
            "data": item.as_dict()
        }

    except frappe.DoesNotExistError:
        frappe.response["http_status_code"] = 404
        return {
            "success": False,
            "error": "Item not found"
        }
    except Exception as e:
        frappe.log_error(frappe.get_traceback(), "API Error")
        frappe.response["http_status_code"] = 500
        return {
            "success": False,
            "error": str(e)
        }

Permission Checks

Always validate permissions:

@frappe.whitelist()
def update_sensitive_data(doctype, name, field, value):
    # Check if user has permission
    if not frappe.has_permission(doctype, "write", name):
        frappe.throw(_("You don't have permission to update this document"))

    doc = frappe.get_doc(doctype, name)
    doc.set(field, value)
    doc.save()

    return {"success": True}

Input Validation

Validate all inputs:

@frappe.whitelist()
def create_sales_order(customer, items):
    # Validate customer
    if not frappe.db.exists("Customer", customer):
        frappe.throw(_("Invalid customer"))

    # Validate items
    if not items or not isinstance(items, list):
        frappe.throw(_("Items are required and must be a list"))

    # Process the order
    # ...

Testing Your APIs

Use tools like Postman or cURL to test:

# GET request
curl -X GET \
  'https://your-site.erpnext.com/api/resource/Item' \
  -H 'Authorization: token api_key:api_secret'

# POST request
curl -X POST \
  'https://your-site.erpnext.com/api/method/your_app.api.create_custom_item' \
  -H 'Authorization: token api_key:api_secret' \
  -H 'Content-Type: application/json' \
  -d '{
    "item_name": "New Product",
    "item_group": "Products",
    "price": 100
  }'

Conclusion

ERPNext's API system is flexible and powerful, allowing you to build robust integrations and custom functionality. Start with the built-in REST API for standard operations, and create custom whitelisted functions when you need specialized logic. Always remember to implement proper authentication, error handling, and permission checks to keep your API secure and reliable.

Happy coding!

This blog covers practical do’s and don’ts in C++ that help you write safer, more modern, and more maintainable code.

Don’t Access Arrays Out of Bounds

Do Prefer Safer Containers Like std::vector

Problematic code using arrays

int arr[3] = {1, 2, 3};
cout << arr[5];   // Undefined behavior

This code compiles successfully. However, accessing an index outside the array bounds leads to undefined behavior. The program might crash, print garbage values, or appear to work correctly and fail later.

Safer approach using vectors

vector<int> v = {1, 2, 3};
cout << v.at(5);  // Throws std::out_of_range

The at() method performs bounds checking and throws an exception when the index is invalid. This makes bugs visible instead of silently corrupting memory.

Don’t Use Raw Arrays by Default

Do Use std::vector or std::array

Raw arrays have fixed size and no built-in safety.

int arr[100];

Preferred alternatives:

vector<int> v(100);      // Dynamic size
array<int, 100> a;       // Fixed size but safer

These containers integrate well with the STL and reduce the chances of memory-related bugs.

Don’t Manage Memory Manually

Do Use Smart Pointers

Manual memory management is error-prone.

int* p = new int(10);
// ...
delete p;

Forgetting delete, deleting twice, or throwing an exception before cleanup can cause leaks or crashes.

Modern C++ approach:

auto p = make_unique<int>(10);

Smart pointers automatically manage object lifetimes and are safer in the presence of exceptions.

Don’t Pass Large Objects by Value

Do Pass by Reference or Const Reference

Passing containers by value causes unnecessary copying.

void process(vector<int> v);  // Inefficient

Better approach:

void process(const vector<int>& v);

This avoids copying while also preventing accidental modification.

Don’t Use using namespace std; in Header Files

Do Use Qualified Names

using namespace std;  // Avoid in headers

This can cause name collisions in large projects.

Preferred:

std::vector<int> v;
std::cout << "Hello";

Don’t Use C-Style Strings

Do Use std::string

C-style strings are a common source of buffer overflows.

char name[10];
strcpy(name, "VeryLongName");  // Unsafe

Safer alternative:

string name = "VeryLongName";

std::string manages memory automatically and grows as needed.

Don’t Modify a Container While Iterating Over It Incorrectly

Do Use Iterators Carefully

Incorrect:

for (int x : v) {
    if (x == 0)
        v.push_back(x);
}

Correct:

for (auto it = v.begin(); it != v.end(); ) {
    if (*it == 0)
        it = v.erase(it);
    else
        ++it;
}

Modifying a container during iteration requires careful handling to avoid invalidated iterators.

Don’t Ignore const

Do Use const Wherever Possible

void print(const vector<int>& v);

Using const:

• Prevents accidental modification

• Improves readability

• Helps the compiler optimize code

Don’t Write C++ Like C

Do Use Modern C++ Practices

Avoid:

• Raw pointers

• Manual memory management

• C-style casts

• Macros for constants

Prefer:

• STL containers

• Smart pointers

• constexpr, enum class

• Range-based loops

• RAII principles

1. It will always try to play the best possible move

2. Its opponent will also always try to play the best possible move

The Minimax algorithm is built entirely on these assumptions. It is the foundation of classical chess engines and many other game-playing programs.

What Problem Does Minimax Solve?

In chess, every move leads to multiple responses, and each response leads to more moves. This creates a game tree.

The goal of Minimax is to:

• Explore this game tree up to a certain depth

• Evaluate the resulting positions

• Choose the move that leads to the best guaranteed outcome

Max and Min Players

• Max player: the chess engine (tries to maximize the score)

• Min player: the opponent (tries to minimize the score)

At each level of the tree:

• Max chooses the move with the highest value

• Min chooses the move with the lowest value

Why We Need an Evaluation Function

It is impossible to search until checkmate in most positions.
So, Minimax searches to a fixed depth and then evaluates the board.

Example evaluation logic:

• Material advantage

• Piece activity

• King safety

• Pawn structure

The evaluation function converts a board position into a numeric score.

Minimax Algorithm (Conceptual Flow)

1. Generate all legal moves

2. Apply a move to get a new position

3. Recursively evaluate future positions

4. Choose the best score based on whose turn it is

Simple Minimax Implementation in C++

Below is a simplified C++ version of Minimax.
This example focuses on structure, not full chess rules.

#include <iostream>
#include <vector>
#include <limits>

using namespace std;

const int INF = numeric_limits<int>::max();

// Placeholder evaluation function
int evaluateBoard() {
    // Positive score = good for engine
    // Negative score = good for opponent
    return rand() % 200 - 100;
}

// Placeholder move generation
vector<int> generateMoves() {
    // Each integer represents a move (simplified)
    return {1, 2, 3};
}

// Minimax function
int minimax(int depth, bool isMaxPlayer) {
    if (depth == 0) {
        return evaluateBoard();
    }

    vector<int> moves = generateMoves();

    if (isMaxPlayer) {
        int bestScore = -INF;

        for (int move : moves) {
            // makeMove(move);
            int score = minimax(depth - 1, false);
            // undoMove(move);

            bestScore = max(bestScore, score);
        }
        return bestScore;
    } else {
        int bestScore = INF;

        for (int move : moves) {
            // makeMove(move);
            int score = minimax(depth - 1, true);
            // undoMove(move);

            bestScore = min(bestScore, score);
        }
        return bestScore;
    }
}

Choosing the Best Move

To select the actual move, we evaluate all possible root moves.

int findBestMove(int depth) {
    vector<int> moves = generateMoves();
    int bestMove = -1;
    int bestScore = -INF;

    for (int move : moves) {
        // makeMove(move);
        int score = minimax(depth - 1, false);
        // undoMove(move);

        if (score > bestScore) {
            bestScore = score;
            bestMove = move;
        }
    }

    return bestMove;
}

Time Complexity

Let:

• b = branching factor (≈ 35 in chess)

• d = search depth

Time complexity:

O(b^d)

This exponential growth is the biggest limitation of Minimax.

Why Minimax Alone Is Not Enough for Chess

Minimax works, but it is too slow on its own.

Problems:

• Explores every possible move

• Cannot search deep enough

• Becomes unusable without optimizations

This is why real chess engines combine Minimax with:

• Alpha–Beta Pruning

• Move ordering

• Transposition tables

• Quiescence search

Relationship with Alpha–Beta Pruning

Minimax defines what decision to make.
Alpha–Beta Pruning defines what can be safely ignored.

Alpha–Beta does not replace Minimax.
It makes Minimax practical.

Where Minimax Is Used Beyond Chess

• Tic-Tac-Toe

• Checkers

• Connect Four

• Turn-based strategy games

• Game AI in general

Any game with:

• Two players

• Perfect information

• Turn-based moves

Final Thoughts

Minimax is simple in idea but powerful in impact.
It models rational decision-making under perfect information.

While modern chess engines use neural networks and massive optimizations, Minimax remains the core decision-making principle underneath it all.

Understanding Minimax is the first real step toward understanding how chess engines think.

In C++, managing memory manually using arrays can quickly become painful. Fixed sizes, manual resizing, and unsafe operations make traditional arrays error-prone.
This is where std::vector comes in.

A vector is a dynamic array provided by the C++ Standard Template Library (STL) that automatically manages memory, resizes itself, and provides powerful built-in functions.

If you write modern C++ and don’t use vectors—you’re doing it wrong.

What Is a Vector in C++?

A vector is a sequence container that:

• Stores elements in contiguous memory

• Can grow or shrink dynamically

• Allows random access (like arrays)

• Manages memory automatically

#include <vector>

std::vector<int> numbers;

Think of a vector as:

An array with superpowers 🦸

Why Use Vectors Instead of Arrays?

Declaring and Initializing Vectors

Basic Declaration

std::vector<int> v;

With Initial Values

std::vector<int> v = {1, 2, 3, 4};

With Size and Default Value

std::vector<int> v(5, 10); // {10, 10, 10, 10, 10}

Adding and Removing Elements

push_back() – Add at End

v.push_back(20);

pop_back() – Remove Last Element

v.pop_back();

insert() – Add at Specific Position

v.insert(v.begin() + 1, 99);

erase() – Remove Element

v.erase(v.begin() + 2);

Accessing Elements

Using Index

cout << v[0];

Using .at() (Safer)

cout << v.at(0);

First & Last Elements

v.front();
v.back();

Looping Through a Vector

Traditional Loop

for (int i = 0; i < v.size(); i++)
    cout << v[i] << " ";

Range-Based Loop (Recommended)

for (int x : v)
    cout << x << " ";

Using Iterators

for (auto it = v.begin(); it != v.end(); it++)
    cout << *it << " ";

Size vs Capacity (Very Important)

v.size();     // Number of elements
v.capacity(); // Allocated memory

Vectors grow exponentially, not linearly.

v.reserve(100); // Pre-allocate memory

👉 Using reserve() improves performance in large applications.

Clearing and Resizing

Clear All Elements

v.clear();

Resize Vector

v.resize(3);

Check If Empty

v.empty();

Vector of Vectors (2D Vectors)

vector<vector<int>> matrix(3, vector<int>(4, 0));

Access:

matrix[0][1] = 5;

This is heavily used in:

• Graphs

• DP problems

• Grids

Passing Vectors to Functions

By Reference (Best Practice)

void print(vector<int>& v) {
    for (int x : v)
        cout << x << " ";
}

By Const Reference (Read-only)

void print(const vector<int>& v);

Common Mistakes to Avoid ❌

1. ❌ Accessing out-of-bounds indices

2. ❌ Forgetting #include <vector>

3. ❌ Passing vectors by value unnecessarily

4. ❌ Assuming capacity == size

Time Complexity Cheat Sheet

When NOT to Use Vector

Avoid vectors when:

• You need constant-time insertion/deletion in the middle → use list

• Memory footprint is extremely critical

• Fixed size is guaranteed → use arrays

Conclusion

std::vector is the backbone of modern C++ programming.
If you master vectors, you unlock:

• Cleaner code

• Better performance

• Safer memory handling

• STL superpowers

Arrays are history. Vectors are the present or alteast using them in c++ would be right call.

For all the wrong reasons, I've decided to build my own code editor. Yes, I know what you're thinking—there are already dozens of excellent editors out there. VSCode exists. Sublime Text exists. Vim has been around since the dawn of time. But here I am, a fullstack developer with a track record of abandoned startup ideas, diving headfirst into yet another side project.

Will I finish this one? Probably not. Will I move on to another shiny idea in a few weeks? History suggests yes. But for now, while the motivation burns bright, I'm riding this wave of enthusiasm. Let's play the game of pretends where this actually ships.

The Tech Stack: Because We Love Making Things Complicated

As any self-respecting fullstack developer would do, I'm taking the scenic route. Instead of just writing a native application like a normal person, I'm going full web tech:

• C++ for the core (because performance matters when you're probably not going to finish anyway)

• WebAssembly (WASM baby!)

• npm module (so other developers can use my abandoned project)

Yes, I'm writing performance-critical code in C++ and compiling it to WASM to run in the browser. Is this over-engineering? Absolutely. Is it fun? Also absolutely.

Syntax Highlighting: The Fun Part

The most visually satisfying component of any code editor is syntax highlighting. There's something deeply satisfying about watching plain text transform into a colorful masterpiece of keywords, strings, and comments.

But before we can paint our code rainbow, we need to understand what we're painting. Enter: the lexer.

What's a Lexer Anyway?

In layman's terms, a lexer (or lexical analyzer) is like a really pedantic reader that goes through your code word by word, character by character, and labels everything it sees.

Think of it like a grammar teacher marking up your essay, except instead of circling run-on sentences, it's identifying:

• Keywords: The reserved words of the language (int, float, if, while, class)

• Identifiers: Variable names, function names, stuff you made up (myVariable, calculateTotal)

• Operators: The symbols that do things (=, +, -, /, ==)

• Strings: Text in quotes ("Hello, World!")

• Numbers: Numeric literals (42, 3.14, 0xFF)

• Comments: The bits of sanity we leave for our future selves (// TODO: refactor this mess)

• Punctuation: Brackets, semicolons, commas—the skeleton of code structure

The Tokenization Process

Here's what happens when the lexer reads this simple C++ code:

int main() {
    return 0;
}

The lexer breaks it down into tokens:

1. int → Keyword

2. main → Identifier

3. ( → Operator/Punctuation

4. ) → Operator/Punctuation

5. { → Operator/Punctuation

6. return → Keyword

7. 0 → Number

8. ; → Operator/Punctuation

9. } → Operator/Punctuation

Each token gets tagged with its type, value, and position in the source code. This structured data is gold for a syntax highlighter.

My Implementation: C++ Lexer → WASM → npm

I've written a C++ lexer that:

1. Reads C++ source code character by character

2. Identifies tokens using pattern matching and keyword lookup

3. Handles edge cases like raw string literals, hex numbers, multi-line comments

4. Outputs JSON with token information (type, value, position)

The beauty of compiling this to WebAssembly is that I get near-native performance for lexical analysis while keeping my editor web-based. The lexer does the heavy lifting in WASM, and JavaScript handles the UI and rendering.

The Architecture

[C++ Lexer] → [Compile to WASM] → [npm package]
     ↓
[JavaScript/TypeScript Editor]
     ↓
[Syntax Highlighted Code]

Why This Will Probably Fail (But That's Okay)

Let's be honest about the challenges:

1. Scope creep is real - "Just a simple editor" becomes "full IDE with AI autocomplete"

2. The existing solutions are really good - VSCode didn't become dominant by accident

3. My attention span - Already thinking about that blockchain idea...

4. The complexity curve - Syntax highlighting is just the beginning. LSP integration, extensions, debugging, git integration... it never ends

But here's the thing: even if this project joins the graveyard of my abandoned ideas, I'm learning. I'm diving deep into compilers, lexical analysis, WebAssembly, and the guts of how code editors work.

The Journey Continues (For Now)

Next up on this adventure:

• Compiling the C++ lexer to WASM with Emscripten

• Creating an npm package that wraps the WASM module

• Building a React component that uses the lexer

• Implementing syntax highlighting themes

• Adding language support beyond C++

• Getting distracted by another project

Will I finish this? Ask me in three weeks. Will I learn something? Absolutely.

And isn't that the real reason we take on these ridiculous side projects? The journey, the learning, the joy of creation—even if our creations end up as digital dust in an abandoned GitHub repository.

Current status: Highly motivated
Expected completion: TBD (Translation: probably never)
Next startup idea ETA: 2-3 weeks

Source Code : https://github.com/loarsaw/syntax-highlighter

Stay tuned for updates, or don't—I probably won't be posting them anyway.

Two popular options for building cross‑platform desktop interfaces today are Electron and Tauri. Both let you build rich UIs using HTML, CSS, and JavaScript, but they behave very differently under the hood.

This blog will help you understand the differences, trade‑offs, and which one is the better choice for your embedded device.

What Are Electron and Tauri?

Electron

Electron bundles:

• Chromium (browser engine)

• Node.js

• Your frontend code

This means every Electron app ships with an entire browser runtime. It’s stable, well‑documented, and used by apps like VS Code, Discord, and Slack.

Tauri

Tauri uses:

• Your system’s native WebView

• A Rust backend

This makes it extremely lightweight and secure. Tauri does not bundle a browser engine.Performance & Resource Usage (Embedded Perspective)

Embedded systems have limited CPU, RAM, and storage — this is where the difference becomes massive.

Electron Performance

• Chromium engine inside each app

• High RAM usage (300MB+ idle)

• Heavy on CPU & disk footprint

• Startup time is slower

Good for: High‑capability devices (Intel NUC, Raspberry Pi 4/5).

Bad for: Low‑spec embedded boards.

Tauri Performance

• Uses system WebView → significantly smaller footprint

• RAM usually under 30–50MB

• Very fast startup

• Lower CPU consumption

Good for: Almost all embedded devices, especially ARM boards.

Build Size

Electron

Typical Electron app ≥ 150MB. Every app is basically a mini-browser.

Tauri

Normal Tauri app size: 5MB – 15MB. This matters a LOT when updating firmware or sending OTA updates.

Security is very important when controlling hardware.

Electron

• Node.js access in renderer can be risky

• You must manually harden it

• Bigger attack surface

Tauri

• Rust backend = memory‑safe

• Very strict permission model

• Smaller footprint → fewer vulnerabilities

For medical, industrial, or IoT‑grade devices, Tauri is a safer pick.

Hardware & Native Integration

Most embedded systems require:

• Serial communication (UART)

• GPIO

• I2C/SPI

• USB

• Bluetooth

Electron

Node.js ecosystem makes this easy. Libraries exist for:

• Serialport

• Johnny-Five

• Bluetooth LE

Electron is more plug‑and‑play.

Tauri

Tauri backend is written in Rust. Rust crates give:

• Better performance

• Better safety

But integration takes slightly longer.

If your embedded system requires heavy native integration or custom drivers, Rust will outperform Node every day.

Development Experience

Electron

• Faster to prototype

• Huge ecosystem

• Easy debugging

Ideal for teams already strong in JavaScript.

Tauri

• More setup initially

• Requires some Rust knowledge

• But much more stable and predictable for production devices

Real‑World Embedded Use Cases

Choose Electron if:

• Your device has plenty of RAM (4GB+)

• You want fast prototyping or demo builds

• You rely heavily on Node.js libraries

• You need browser‑like features or heavy UI animations

Choose Tauri if:

• Your device has low/medium specs

• You need long‑term stability

• Security is important

• You want small binaries

• You're maintaining multiple devices with OTA updates

inal Recommendation

For embedded system frontends, Tauri is usually the better choice. It gives you:

• Lower RAM usage

• Faster speeds

• Higher security

• Tiny build sizes

• A Rust backend perfect for hardware communication

Electron is still great for rapid development and strong Node.js integration, but for production-grade embedded devices, Tauri is far more optimized.

hoosing the right framework doesn’t just affect your UI — it affects the performance, reliability, and lifespan of your embedded product.

If you want something lightweight, secure, and hardware‑friendly, pick Tauri. If you want something easy, flexible, and JavaScript‑rich, stick with Electron.

Let me know if you want:

• A version of this blog for your portfolio website

• A more technical comparison

• Code samples showing hardware communication in both frameworks

Well there are quite a many methods that are worth mentioning but in-order to focus on the title I will choose only what concerns us at the moment other will talk about at a later point Hopefully.

Understanding ASAR (Atomic Shell Archive)

Electron apps use something called an ASAR file. In very simple terms, it’s like Electron’s version of a “bundle.”
If you’ve used CRA, everything eventually gets mounted into:

<div id="root"/>

Now, ASAR is not literally like a DOM root, but the idea is similar in spirit:
Electron takes all your JavaScript, HTML, CSS, and assets and packs them into one archive file called:

app.asar

Think of it as a zip file that Electron can read from very quickly.

When your app is packaged, most of your project ends up inside this ASAR.

Now here is the fun part some libraries such as our better-sqlite3 require native modules so they simply cannot reside in this shell.

In order to use better-sqlite we need to make changes to our forge.config.*

import { join } from "path";
import Database from "better-sqlite3";
import { app } from "electron";
import fs from "fs";

export const getDatabase = (filename: string) => {
// app.isPackaged is property that holds true if your app has been packaged
  const isProd = app?.isPackaged || false;
  const dbPath = isProd
    ? join(process.resourcesPath, filename)
    : filename;



  // Ensure directory exists
  const dir = join(dbPath, "..");
  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });

  console.log(`Using SQLite database: ${dbPath}`);
  console.log(`Production mode: ${isProd}`);

  // Open the database
  const db = new Database(dbPath);
  db.pragma("journal_mode = WAL");
  db.pragma("foreign_keys = ON");

  return db;
};

// Default DB path (same logic as your original)

const appDataDir = join(
  process.env.APPDATA ||
    (process.platform === "darwin"
      ? join(process.env.HOME!, "Library", "Application Support")
      : join(process.env.HOME!, ".local", "share")),
  "myapp",      // main folder for your app
  "myapp.db"    // SQLite database file
);

// Export a singleton instance
export const db = getDatabase(defaultDbDir);

Next Paste the following in vite.main.config.ts and vite.preload.config.ts

import { defineConfig } from "vite";

export default defineConfig({
    build: {
        sourcemap: true,
        rollupOptions: {
            external: ["better-sqlite3"],
        },
        lib: {
// change the entry based on your structure
            entry: "src/main.ts",
            formats: ["cjs"],
        },
    },
});

Next is our forge.config.ts

import type { ForgeConfig } from '@electron-forge/shared-types';
import { MakerSquirrel } from '@electron-forge/maker-squirrel';
import { MakerZIP } from '@electron-forge/maker-zip';
import { MakerDeb } from '@electron-forge/maker-deb';
import { MakerRpm } from '@electron-forge/maker-rpm';
import { VitePlugin } from '@electron-forge/plugin-vite';
import { FusesPlugin } from '@electron-forge/plugin-fuses';
import { FuseV1Options, FuseVersion } from '@electron/fuses';
import path from "node:path"
import { cp, mkdir } from "node:fs/promises";

const config: ForgeConfig = {
  packagerConfig: {
    asar: {
      unpack: "*.{node,dylib}",
//unpack only unpacks files already inside ASAR,
//but native node_modules are not copied automatically during packaging.
      unpackDir: "{better-sqlite3}",
    },
  },
  rebuildConfig: {
    onlyModules: ["better-sqlite3"],
    force: true,
    platform: process.platform,
    buildFromSource: true,
  },
  makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
  plugins: [
    new VitePlugin({
      // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
      // If you are familiar with Vite configuration, it will look really familiar.
      build: [
        {
          // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
          entry: 'src/main.ts',
          config: 'vite.main.config.ts',
          target: 'main',
        },
        {
          entry: 'src/preload.ts',
          config: 'vite.preload.config.ts',
          target: 'preload',
        },
      ],
      renderer: [
        {
          name: 'main_window',
          config: 'vite.renderer.config.ts',
        },
      ],
    }),
    // Fuses are used to enable/disable various Electron functionality
    // at package time, before code signing the application
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
  hooks: {
    async packageAfterCopy(_forgeConfig, buildPath) {
      const requiredNativePackages = [
        "better-sqlite3",
      ];

      const sourceNodeModulesPath = path.resolve(__dirname, "node_modules");
      const destNodeModulesPath = path.resolve(buildPath, "node_modules");

      await Promise.all(
        requiredNativePackages.map(async (packageName) => {
          const sourcePath = path.join(sourceNodeModulesPath, packageName);
          const destPath = path.join(destNodeModulesPath, packageName);

          await mkdir(path.dirname(destPath), { recursive: true });
          await cp(sourcePath, destPath, {
            recursive: true,
            preserveTimestamps: true,
          });
        }),
      );


    },
  },
};

export default config;

BreakDown

async packageAfterCopy(_forgeConfig, buildPath) {

packageAfterCopy is a hook that runs after Electron Forge copies your app’s files to the build directory, but before packaging them into the final installer or app.asar

const requiredNativePackages = [
  "better-sqlite3",
];

Native modules like better-sqlite3 contain compiled binaries, which sometimes are not automatically included in the packaged app.

const sourceNodeModulesPath = path.resolve(__dirname, "node_modules");
const destNodeModulesPath = path.resolve(buildPath, "node_modules");
await Promise.all(
  requiredNativePackages.map(async (packageName) => {
    const sourcePath = path.join(sourceNodeModulesPath, packageName);
    const destPath = path.join(destNodeModulesPath, packageName);

    await mkdir(path.dirname(destPath), { recursive: true });
    await cp(sourcePath, destPath, {
      recursive: true,
      preserveTimestamps: true,
    });
  }),
);

• Loops over requiredNativePackages (better-sqlite3 here).

• For each package:

  1. Builds source and destination paths.

  2. Ensures the destination directory exists (mkdir(..., { recursive: true })).

  3. Copies the package recursively from source to destination, preserving timestamps.

Why this is needed

• Electron packages apps differently than a regular Node.js app. (https://stackoverflow.com/a/2456882)

• Some native modules (with compiled binaries) don’t get packaged automatically.

• This hook ensures that better-sqlite3 is included in the packaged app, so your app can run properly.

What is PostgreSQL?

PostgreSQL is an advanced, enterprise-class relational database system that supports both SQL (relational) and JSON (non-relational) querying. It's known for its reliability, feature robustness, and performance. Major companies like Instagram, Spotify, and Reddit use PostgreSQL to power their applications.

Getting Started with PostgreSQL Online You don't need to install anything on your computer to start learning PostgreSQL! There are several free online PostgreSQL sandboxes where you can practice right in your browser:

• DB Fiddle (db-fiddle.com) - SQL database playground for testing, debugging and sharing SQL snippets

• OneCompiler - Robust, feature-rich online editor and compiler for PostgreSQL

These platforms let you write and execute PostgreSQL commands immediately, making it perfect for learning and experimentation without any setup required! Essential PostgreSQL Commands Creating a Database

These platforms let you write and execute PostgreSQL commands immediately, making it perfect for learning and experimentation without any setup required!

Essential PostgreSQL Commands

Creating a Database

sql

CREATE DATABASE mystore;

To connect to your new database:

sql

\c mystore

Creating Tables

Tables are where your data lives. Here's how to create a simple products table:

CREATE TABLE products (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    price DECIMAL(10, 2),
    stock_quantity INTEGER DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Key points:

• SERIAL creates an auto-incrementing integer

• PRIMARY KEY uniquely identifies each row

• VARCHAR(100) is a variable-length string with max 100 characters

• NOT NULL ensures the field must have a value

• DEFAULT sets a default value if none is provided

Inserting Data

Add data to your table with INSERT:

sql

INSERT INTO products (name, price, stock_quantity)
VALUES ('Laptop', 999.99, 15);

INSERT INTO products (name, price, stock_quantity)
VALUES 
    ('Mouse', 25.50, 100),
    ('Keyboard', 75.00, 50),
    ('Monitor', 299.99, 30);

Querying Data

The SELECT statement retrieves data:

sql

-- Get all products
SELECT * FROM products;

-- Get specific columns
SELECT name, price FROM products;

-- Filter results
SELECT * FROM products WHERE price > 50;

-- Sort results
SELECT * FROM products ORDER BY price DESC;

-- Limit results
SELECT * FROM products LIMIT 5;

Updating Data

Modify existing records with UPDATE:

sql

UPDATE products 
SET price = 899.99, stock_quantity = 20 
WHERE name = 'Laptop';

Always use a WHERE clause to avoid updating all rows accidentally!

Deleting Data

Remove records with DELETE:

sql

DELETE FROM products WHERE stock_quantity = 0;

Working with Multiple Tables

Real applications typically use multiple related tables. Here's an example with customers and orders:

sql

CREATE TABLE customers (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL
);

CREATE TABLE orders (
    id SERIAL PRIMARY KEY,
    customer_id INTEGER REFERENCES customers(id),
    product_id INTEGER REFERENCES products(id),
    quantity INTEGER NOT NULL,
    order_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

The REFERENCES keyword creates a foreign key relationship, ensuring data integrity.

Joining Tables

Use JOIN to combine data from multiple tables:

sql

SELECT 
    customers.name, 
    products.name AS product_name, 
    orders.quantity,
    orders.order_date
FROM orders
JOIN customers ON orders.customer_id = customers.id
JOIN products ON orders.product_id = products.id;

Useful PostgreSQL Commands

Here are some handy psql commands:

• \l - List all databases

• \dt - List all tables in current database

• \d table_name - Describe a table's structure

• \q - Quit psql

• \? - Show help for psql commands

• \h - Show help for SQL commands

Basic Data Types

PostgreSQL supports many data types. Here are the most common:

• INTEGER: Whole numbers

• DECIMAL/NUMERIC: Precise decimal numbers

• VARCHAR(n): Variable-length text

• TEXT: Unlimited length text

• BOOLEAN: True/false values

• DATE: Date without time

• TIMESTAMP: Date and time

• JSON/JSONB: JSON data

Best Practices

1. Always use transactions for multiple related operations

2. Create indexes on columns you frequently search or join on

3. Use constraints to maintain data integrity

4. Back up your database regularly

5. Never store passwords in plain text - use hashing

6. Use prepared statements to prevent SQL injection

Next Steps

Now that you understand the basics, explore these topics:

• Indexes for performance optimization

• Views for complex queries

• Transactions for data consistency

• Stored procedures and functions

• Full-text search capabilities

• JSON support for flexible data structures

PostgreSQL is a powerful tool with much more to discover. Practice these basics, experiment with your own projects, and you'll be building robust database-driven applications in no time!

Building a custom Linux distribution gives you complete control over your system's components, dependencies, and footprint. The Yocto Project is the industry-standard framework for creating tailored Linux distributions, and Hetzner provides powerful, affordable dedicated servers perfect for compilation workloads. This guide walks you through the entire process of building a custom Linux system using Yocto on a Hetzner server.

Why Yocto on Hetzner?

Yocto Benefits:

• Complete control over every system component

• Optimized for embedded and production systems

• Reproducible builds

• Extensive hardware support

• Active community and commercial backing

Hetzner Advantages:

• Powerful dedicated servers at competitive prices

• High-speed network connectivity

• Located in European data centers

• Excellent build server specifications

• No bandwidth limitations for compilation tasks

Prerequisites

Before starting, you'll need:

• A Hetzner dedicated server (minimum 16GB RAM, 4+ cores recommended)

• Ubuntu 22.04 LTS or Debian 11+ installed

• Root or sudo access

• At least 100GB free disk space

• Basic Linux command line knowledge

Step 1: Provision Your Hetzner Server

Log into the Hetzner Robot panel and provision a dedicated server. For Yocto builds, I recommend:

• CPU: Intel Xeon or AMD Ryzen with 6+ cores

• RAM: 32GB or more (builds are memory-intensive)

• Storage: NVMe SSD preferred for faster compilation

Once provisioned, SSH into your server and update the system:

ssh root@your-server-ip
apt update && apt upgrade -y

Step 2: Install Required Dependencies

Yocto requires several build tools and libraries. Install them with:

apt install -y gawk wget git diffstat unzip texinfo gcc build-essential \
chrpath socat cpio python3 python3-pip python3-pexpect xz-utils \
debianutils iputils-ping python3-git python3-jinja2 libegl1-mesa \
libsdl1.2-dev pylint xterm python3-subunit mesa-common-dev zstd liblz4-tool

Step 3: Create a Build User

Never run Yocto builds as root. Create a dedicated build user:

useradd -m -s /bin/bash yocto
usermod -aG sudo yocto
su - yocto

Step 4: Download Yocto (Poky)

Clone the Yocto Project reference distribution (Poky). We'll use the latest LTS release:

cd ~
git clone git://git.yoctoproject.org/poky
cd poky
git checkout -b my-build scarthgap  # LTS release

Step 5: Initialize the Build Environment

Source the build environment setup script:

source oe-init-build-env

This creates a build directory and sets up your shell environment. You'll need to source this script every time you open a new terminal session.

Step 6: Configure Your Build

Navigate to the build configuration directory and edit local.conf:

cd ~/poky/build/conf
nano local.conf

# Set machine architecture (e.g., x86-64, ARM, etc.)
MACHINE ?= "qemux86-64"  # For testing in QEMU
# MACHINE ?= "genericx86-64"  # For physical x86-64 hardware

# Increase parallel build tasks based on your CPU
BB_NUMBER_THREADS ?= "8"  # Number of CPU cores
PARALLEL_MAKE ?= "-j 8"   # Parallel make jobs

# Add systemd support (optional)
DISTRO_FEATURES:append = " systemd"
VIRTUAL-RUNTIME_init_manager = "systemd"
DISTRO_FEATURES_BACKFILL_CONSIDERED = "sysvinit"

# Add additional packages to your image
IMAGE_INSTALL:append = " openssh vim htop curl wget"

# Set download directory to save bandwidth on rebuilds
DL_DIR ?= "${TOPDIR}/../downloads"

# Shared state cache for faster rebuilds
SSTATE_DIR ?= "${TOPDIR}/../sstate-cache"

Step 7: Select Your Image Type

Yocto provides several base images. Choose based on your needs:

• core-image-minimal: Bare minimum system

• core-image-base: Small image with some utilities

• core-image-full-cmdline: Full command-line system

• core-image-sato: Image with graphical interface

For a server, core-image-base or core-image-full-cmdline are good starting points.

Step 8: Start the Build

Launch your first build:

bitbake core-image-minimal

The first build takes 2-8 hours depending on your server specs and will download several gigabytes of source code. Subsequent builds are much faster thanks to caching.

Step 9: Deploy Your Custom Image

After the build completes, your images are located in:

~/poky/build/tmp/deploy/images/qemux86-64/

Congratulations! For new set of issues in your life