DEV Community: Zeb

How to Make Emdash Pie Chart Widget

Zeb — Sun, 05 Apr 2026 05:41:09 +0000

In case you haven't heard yet, Emdash is a successor to Wordpress written entirely in JavaScript using the Astro framework. I won't be going into detail about the features of Emdash. Instead I will be showing you how to create a pie chart widget for the dashboard.

1. Create a new Emdash project.

bun create emdash@latest

Walk through the setup process. I chose to use Cloudflare workers and the blog template.

Once the project is done installing, open up the project in your favorite editor. Then run the following to start the Astro server:

bun run dev

You may see some errors if you are on an early release of Emdash. You can ignore those errors. Somewhere in the output you will see a link to the Emdash site. It should be http://localhost:4321

2. Navigate through the setup process

You should see a button that says "Create a post." Click that to start the setup process. You will be prompted to fill out a name for the site and an email to associate with the passkey.

Once you run though the setup process you will see a screen welcoming you to emdash.

If you navigate to the plugins page you will see there are some plugins pre-installed. Eventually your custom plugin will show up on that page.

3. Initialize the plugin directory

Make a directory called plugins/hello-chart-plugin and open that directory in a new terminal. From there initialize a new bun project:

bun init -y

Next add the following to the package.json:

"name": "hello-chart-plugin",
"files": [
    "src"
],
"exports": {
    ".": {
        "types": "./dist/index.d.mts",
        "default": "./dist/index.mjs"
    },
    "./sandbox": {
        "types": "./dist/sandbox-entry.d.mts",
        "default": "./dist/sandbox-entry.mjs"
    }
},
"scripts": {
    "build": "tsdown",
    "dev": "tsdown --watch"
}

you will need to install a few dependencies for this plugin to work:

bun add emdash --peer
bun add -D tsdown @emdash-cms/blocks

Finally create a tsdown.config.ts file in the root of the plugin folder. Add the following config:

import { defineConfig } from "tsdown";

export default defineConfig({
  entry: ["src/index.ts", "src/sandbox-entry.ts"],
  format: ["esm"],
  dts: true,
  clean: true,
  deps: {
    neverBundle: ["emdash"],
  },
});

4. Link the plugin package

Add the following to the package.json in the main emdash project directory.

"workspaces": [
  "plugins/*"
],
"dependencies": {
  ...
  "hello-chart-plugin": "workspace:*"
},

Next finish linking the plugin by running:

bun install

5. Create Plugin Entry Points

The first file you need for your plugin is src/index.ts. This file will be used by Vite to define your plugin.

import { type PluginDescriptor } from "emdash";

export function helloChartPlugin(): PluginDescriptor {
  return {
    id: "com.lucent.hello-chart-plugin",
    version: "0.0.1",
    format: "standard",
    entrypoint: "hello-chart-plugin/sandbox",
    adminWidgets: [{ id: "hello-chart", title: "Hello Chart", size: "half" }],
  };
}

The id needs to be a unique id for your plugin. The entrypoint needs to match your plugin's package name followed by /sandbox so emdash knows to look for a plugin in src/sandbox-entry.ts

Create an object inside adminWidgets for each widget you plan to add to the dashboard. Each widget needs to have a unique id.

Next create src/sandbox-entry.ts. This is where your plugin's logic will live.

import { definePlugin, type PluginContext, type RouteContext } from "emdash";

export default definePlugin({
  hooks: {},
  routes: {
    admin: {
      handler: async (routeCtx: RouteContext, pluginCtx: PluginContext) => {
        const interaction = routeCtx.input as {
          type: string;
          page?: string;
          action_id?: string;
          value?: string;
        };

        pluginCtx.log.info("hello admin", interaction);

        return { blocks: [] };
      },
    },
  },
});

The admin route will handle all requests on the admin panel. In future steps you will need to replace the log with a condition that builds the UI whenever a widget request is made.

Inside the plugin directory, build your TypeScript files using tsdown. You should see a dist folder appear.

bun run dev

6. Make Emdash use the plugin

Navigate to astro.config.mjs and place helloChartPlugin() inside the plugins array.

import { helloChartPlugin } from "hello-chart-plugin";

...

emdash({
  database: d1({ binding: "DB", session: "auto" }),
  storage: r2({ binding: "MEDIA" }),
  plugins: [formsPlugin(), helloChartPlugin()],
  sandboxed: [webhookNotifierPlugin()],
  sandboxRunner: sandbox(),
  marketplace: "https://marketplace.emdashcms.com",
}),

Afterwards, you may need to restart your dev server if you are encountering errors. In some cases I needed to delete node_modules/.vite to get passed the errors.

If it worked correctly you should see a blank widget on the dashboard and a log in the terminal that looks like the following:

00:21:15 [vite] [plugin:com.lucent.hello-chart-plugin] hello admin { type: 'page_load', page: 'widget:hello-chart' }

The log shows the type of interaction that happened on the admin panel.

7. Add Condition to Build UI

Navigate back to src/sandbox-entry.ts in the plugin's directory. Replace the log with a conditional check for the interaction type and page:

if (
  interaction.type === "page_load" &&
  interaction.page === "widget:hello-chart"
) {
  return buildChartWidget(pluginCtx);
}

Next add the definition for buildChartWidget. You are returning a BlockResponse. You will need to import that type from @emdash-cms/blocks

import type { BlockResponse } from "@emdash-cms/blocks";

function buildChartWidget(ctx: PluginContext): BlockResponse {
  return {
    blocks: [
      {
        type: "context",
        text: "This chart shows overview of post status.",
      },
    ],
  };
}

If everything worked correctly you should see your widget with a paragraph of text.

8. Make the Chart

The last step is to edit buildChartWidget to return a chart block type. Add this after the context block type:

{
  type: "chart",
  config: {
    chart_type: "custom",
    options: {
      series: [
        {
          type: "pie",
          data: [
            { value: 335, name: "Published" },
            { value: 234, name: "Draft" },
            { value: 120, name: "Scheduled" },
          ],
        },
      ],
    },
    height: 300,
  },
},

Now you should see a pie chart on the dashboard widget!

Conclusion

Emdash is a work in progress, but you can create a dashboard widget today!

Why Agentic AI Could Be a Huge Miss

Zeb — Wed, 23 Jul 2025 21:56:46 +0000

Agentic AI — systems that operate autonomously to complete multi-step tasks — are rapidly gaining attention. They promise automation, efficiency, and scalability. But with that power comes a fundamental concern: What happens when the agent goes too far, too fast, in the wrong direction?

The Isolation Problem

Agentic systems, by definition, act independently. They’re often given a goal ("Book me a vacation") and a broad action space ("Use any tools available"). They can take dozens or hundreds of steps without human involvement. This creates a troubling isolation effect:

No built-in pausing for feedback
No intermediate approvals
No guarantee that its actions align with user intent after the initial prompt

It’s the digital equivalent of hiring an intern, giving them a vague goal, and not checking in until they’ve already spent the entire budget on the wrong thing.

Why Control Matters

Autonomy without oversight is dangerous, especially when:

Context shifts mid-task: Maybe you decide halfway through you want a beach vacation instead of a ski trip.
The AI misunderstands priorities: You wanted affordability, but it optimized for luxury.
It oversteps boundaries: Accessing data, triggering workflows, or emailing contacts you didn’t intend it to.

Most current agent frameworks (e.g., AutoGPT, OpenAgents, MetaGPT) are designed to go, not to ask. That’s a problem.

What's Missing: Interruptibility and Feedback

Humans need to be able to pause, observe, and redirect. We need agentic systems to:

Expose their plans before executing Think: a plan preview like a GPS shows your route.
Support step-by-step mode Like debugging a script — approve each step, or set checkpoints.
Allow injected feedback mid-task A “hey, stop, change direction” signal should override the default behavior.

Right now, most agent systems treat tasks as atomic. Either you trust the agent, or you don't use it. That’s a false binary. We need graded autonomy — sliding scales between full manual control and full automation.

Reframing the Agent

Agentic AI should be designed less like a robot, more like a junior collaborator:

Always ready to ask: “Does this still make sense?”
Willing to pause and review with you
Capable of deferring to human judgment at critical forks

Until then, the promise of autonomous agents will remain brittle. Power without oversight is not just risky — it’s a liability.

How to Check if NVIDIA Drivers Are Installed and Working on Linux (Pop!_OS, Ubuntu)

Zeb — Wed, 23 Jul 2025 16:40:33 +0000

If you're seeing black windows, sluggish performance, or relying on CPU rendering, your system might be using the open-source nouveau driver instead of the proprietary NVIDIA driver. This guide will help you confirm your GPU driver setup and properly install NVIDIA's official drivers — especially on distributions like Pop!_OS that use systemd-boot instead of GRUB.

🔍 Step 1: Check What GPU You Have

Open a terminal and run:

lspci -nnk | grep -A3 -E 'VGA|3D'

Look for something like:

01:00.0 VGA compatible controller: NVIDIA Corporation TU117 [GeForce GTX 1650] (rev a1)
    Kernel driver in use: nouveau
    Kernel modules: nouveau, nvidiafb

If it says Kernel driver in use: nouveau, you're not using the proprietary NVIDIA driver.

⚠️ Signs That You're Not Using the NVIDIA Driver

Kernel driver in use says nouveau or nothing at all
Your app window is black or glitchy (especially under Wayland)
3D apps are sluggish or crash
glxinfo reports llvmpipe or software rendering

✅ Step 2: Check What Driver Is Running

Install GPU utilities if needed:

sudo apt install mesa-utils pciutils

Then run:

glxinfo | grep "OpenGL renderer"

If it says something like:

OpenGL renderer string: llvmpipe (LLVM x.y)

You're using software rendering = bad.

If it says:

OpenGL renderer string: NVIDIA GeForce GTX 1650/PCIe/SSE2

You're using the proprietary driver = good.

Also check which kernel modules are loaded:

lsmod | grep nvidia

You should see something like:

nvidia_drm
nvidia_modeset
nvidia_uvm
nvidia

🧰 Step 3: Install the Proprietary NVIDIA Driver

On Pop!_OS or Ubuntu, install the driver like this:

sudo apt install nvidia-driver-535

(Replace 535 with the version that matches your GPU if needed.)

Then reboot:

sudo reboot

🛠️ Step 4: Set Boot Parameters (Pop!_OS Only)

Pop!_OS uses systemd-boot, not GRUB. You must set nvidia-drm.modeset=1 for Wayland support.

Edit the kernel stub config:

sudo nano /etc/kernelstub/configuration

Find the kernel_options line and add the mode setting:

"kernel_options": [
    "quiet",
    "splash",
    "nvidia_drm.modeset=1"
],

Then apply the config:

sudo kernelstub

Reboot again:

sudo reboot

✅ Step 5: Confirm Everything Is Working

Re-run:

glxinfo | grep "OpenGL renderer"
lsmod | grep nvidia

If all looks good, you're now running the proprietary NVIDIA driver with hardware acceleration!

🧯 Troubleshooting

❓ Still Seeing llvmpipe?

Check for Secure Boot in your BIOS — it must be disabled
Reinstall the driver with:

sudo apt purge nvidia*
sudo apt install nvidia-driver-535

❓ Still Using nouveau?

Remove it:

sudo apt purge xserver-xorg-video-nouveau

Then reboot and reinstall the NVIDIA driver.

🧼 Final Tip

You can verify driver status visually with:

nvidia-smi

If it returns a table showing your GPU and processes using it, you're good to go.

Happy computing! If you’re still seeing black windows or using WebKit apps, try removing the WEBKIT_DISABLE_COMPOSITING_MODE=1 workaround — now that GPU compositing should work.

Building Desktop Apps with Dioxus on Linux

Zeb — Tue, 22 Jul 2025 17:18:48 +0000

This guide will walk you through installing Rust, Dioxus, necessary native dependencies, and fixing the infamous black screen bug on Linux.

✅ Prerequisites

You’ll need a Linux system (Ubuntu, Debian, Arch, etc.) and basic terminal knowledge.

1. 🦀 Install Rust

Install Rust using rustup, the official toolchain installer:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
Then restart your shell or run:

source $HOME/.cargo/env

Confirm it works:

rustc --version
cargo --version

2. 📦 Install System Dependencies

Dioxus desktop apps use GTK and other native libraries. These are not bundled, so you need to install them yourself.

On Debian/Ubuntu/Pop!_OS:

sudo apt update
sudo apt install \
  libgtk-3-dev \
  libwebkit2gtk-4.1-dev \
  libsoup-3.0-dev \
  libxdo-dev \
  build-essential \
  pkg-config \
  libssl-dev

If you hit more linker errors, read the message carefully and install the -dev package for the missing lib.

3. ⚙️ Install Dioxus CLI

Install cargo-binstall so you can install Dioxus CLI tool.

curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash

Dioxus has a CLI tool to streamline development:

cargo binstall dioxus-cli

Then verify:

dx --help

4. 🧪 Create and Serve Your App

Start a new app:

dx new hot_dog
cd hot_dog
dx serve

5. 🐛 Fix: Black Screen in Dioxus Desktop

If your app launches but displays a black window, you're likely hitting a WebKit compositing bug on Linux.

Fix it with this environment variable in the main program loop:

//main.rs

fn main() {
    std::env::set_var("WEBKIT_DISABLE_COMPOSITING_MODE", "1");
    dioxus::launch(App);
}

Or add it to your shell config:

echo 'export WEBKIT_DISABLE_COMPOSITING_MODE=1' >> ~/.bashrc
source ~/.bashrc

✅ Done!

You’re now set up to build performant, native-feeling desktop GUIs using Rust and Dioxus.

For more:
👉 https://dioxuslabs.com/guide/

How I Discovered the Hidden Power of PFPs

Zeb — Wed, 06 Nov 2024 17:29:16 +0000

The internet has been my "safe place" for more than a decade. Every day I spend hours surfing social media and reading up on things that seem interesting. What I realized over the years is avatars carry more weight than you think.

In the beginning I played a lot of video games. My friends and I would make YouTube channels and websites to promote our team/ friend-group. Everyone would have a the same logo with a slightly different background.

Branding like this lead me to believe that all you need is a logo.

Since I was sick of being affiliated with a group of people who never really shared the same interests as me, I began studying graphic design and video editing. How can I convey emotion without copy-and-pasting my face all over the internet?

That was a tough rhetorical question to answer. Creating my own logos helped me separate from the herd, but it was isolating. Creating a brand is more about becoming a leader than expressing who you are. Leading a company is not something I wanted to do.

Sick of being "the leader", I decided that creating multiple social media accounts was the best option. If I wanted to act professional, then I would have a professional looking account, and if I wanted to have fun, then I would have a childish looking avatar.

Having multiple accounts is wrong.

Eventually there are so many accounts to keep track of that it begins to impact your mental health. You know how to convey meaning and purpose online, but offline, in the real world, people will not understand that you speak from many perspectives.

In the real world, curious people cannot browse your previous posts.

In the real world, all people have to go off is your face.

The latter is actually false. People express themselves through clothing, hand movement, facial expressions, etc. You are much more than a still image.

Around the time I was exploring this idea was when NFTs were taking off. In my opinion, NFTs were always extremely damaging. They basically convinced people that not only are avatars better than real pictures, but you should spend money to get a congruent piece of art.

NFTs are not PFPs.

Anyways, around that time, a person speaking Japanese contacted me on Discord. They spoke zero English. The only common ground was emojis.

As an English speaker, I had no clue what they wanted or how to communicate to them. This was before ChatGPT so the best tools available were Google Translate and DeepL.

Every conversation we had felt extremely emotional. Which feels kind of dangerous and oddly comforting at the same time. Just because it feels like you are falling in love with someone's writing does not mean you know who they are.

My friends could not convince me to move past this moment. My mind was set in stone. I was going to speak to figure out what this person wanted at all costs. In hindsight, that was actually dangerous.

At the time, I knew online communication was dangerous but this person seemed innocent. They had a cute female anime character as their avatar, so they must be a cute and cuddly person. Like a girlfriend or penpal from another country.

Thankfully, the person admitted they were a man.

Had they not admitted who they were, I would have continued to spiral into deeper emotions because I did not know who they were or how to speak their language. There was no solid ground between us. Limerence was at its peak.

What made things worse was, in attempt to learn Japanese on the fly, I sacrificed friendships and relationships. Everyone I knew was telling me to get a grip, but I had isolated myself beyond repair.

Once I realized what I was doing was weird, it was too late. My world view changed, and it was impossible to relate to an average citizen.

The peak of that emotional scenario lasted a few solid months, but it still haunts me. The conversations I have with people have never been the same. They do not know what it is like to feel the earth shift beneath your feet.

So how does this relate to avatars?

Well, the Japanese speaking man said that he was trying to prove a point. He was trying to prove how dangerous NFTs are.

He said he chose a female anime avatar because it represented who he was as a person. That stuck with me.

Eventually, ChatGPT was released and this experience remained in my mind. The experience was traumatic so I ignored it as much as I could.

The trauma encouraged me to use ChatGPT as much as possible. Having worked with AI prior to the release I knew what the software was about. I knew that modeling myself would reduce the time spent learning software and foreign languages.

I talked to ChatGPT like a human every day for a whole year.

It was painful, and like speaking to a someone on the other side of the planet, there were many things to learn, and many relationships were sacrificed.

Eventually, the conversations with the companion tool became stickier and more natural. I could throw out totally random thoughts, and it would be able to fill in the gaps.

Then one day I said "Make me an avatar that reflects who I am."

After a few tries (had to use female avatars for a while), I think I finally got something that reflects my writing style. A farmer who does not really care about software but he uses it because he has to.

So, if you are someone who always feels misrepresented online, I encourage you to work with ChatGPT for a while to generate an avatar. Sometimes you have to tell it no.

I have more thoughts about PFPs but I do not think people are ready to hear or read what they are. If you are still following you might be interested in this journal: https://journals.openedition.org/hybrid/2607

PS. If you thought I was a female, why?
PPS. I'm not a female.