DEV Community: zeankun

Making strokefont usage in web much easier with Derakuma

zeankun — Sun, 26 Jul 2026 06:53:22 +0000

For the past 2 weeks or so now, I've been building Derakuma, a stroke font library, for the web. It's built on top of the Fontobene font format, web-ready, and the foundation for the future CompassCAD NEXT client.

Background and lore (I guess)

Finding a good stroke font technique is always a hit and miss. For example, we have the industry standard Hershey fonts. KiCad's font, Newstroke, natively uses them, but to an average programmer or a noob, they will not understand how a Hershey font works, if they just want to make their first "parser". An example is this, from Newstroke's U+C0 glyph.

    "I[MUWU RK[RFY[ RP>SA", /* U+C0 A_CAP GRAVE */
    "I[MUWU RK[RFY[ RT>QA",
    "I[MUWU RK[RFY[ RNAR>VA",
    "I[MUWU RK[RFY[ RMAN@P?TAV@W?",
    "I[MUWU RK[RFY[ RN?O@NAM@N?NA RV?W@VAU@V?VA",
    "I[MUWU RK[RFY[ RRFPEOCPAR@TAUCTERF",
    "F`JURU RRPYP RH[OF\\F RRFR[\\[",
    "F[WYVZS[Q[NZLXKVJRJOKKLINGQFSFVGWH RR\\T]U_TaRbOb",
    "H[MPTP RW[M[MFWF RP>SA",
    "H[MPTP RW[M[MFWF RT>QA",
    "H[MPTP RW[M[MFWF RNAR>VA",
    "H[MPTP RW[M[MFWF RN?O@NAM@N?NA RV?W@VAU@V?VA",
    "MWR[RF RP>SA",
    "MWR[RF RT>QA",
    "MWR[RF RNAR>VA",
    "MWR[RF RN?O@NAM@N?NA RV?W@VAU@V?VA"

Now, I got a great explanation here, by Claude. Claude says that
each glyph is a plain string. It parses in three layers:

Bounding box — the first two characters. Every character's numeric value is ord(char) - ord('R') (so 'R' = 0, 'N' = -4, 'V' = 4, etc.). The first two chars give left/right extent of the glyph in font units.

Stroke data — everything after that, read in pairs of characters = one (x, y) coordinate, same ord(c)-ord('R') decoding.

Pen lifts — a literal space ' ' appearing where an x-coordinate is expected means "lift the pen, start a new stroke," with the pair that follows the space giving the new starting point. So one glyph string can contain multiple disconnected polylines (strokes), each one a separate moveto + a chain of linetos.
~Claude~

There are lots of technical stuffs involved, but most of us won't understand what the hell does R represent, out of the box (without the detailed explanation).

Now again. Back in 2024, I was happily playing around with LibrePCB (an alternative to KiCad). They had Newstroke, but I didn't know how that was done. I looked at the underlying tech, and that's when I first discovered FontoBene. The thing that fascinates me the most, about Fontobene, is how intuitive they define the strokes for each character. Frankly, they are easily digestible by some developers (but not at most).

Fontobene specs define a character by a 9x9 right-up coordinate system. Each pair is separated by a semicolon^[spec], which looks highly intuitive, but unprecedented at scale. AI models weren't advanced at the time, yet. I was only constrained to GPT 3.5-turbo at that time, which was not great (getting GPT 4 was a luxury back then).

That was only imagined as a dream back then, getting Fontobene to work on CompassCAD 1.0. That idea was scrapped, so we were left with unscalable, non-variable, TTF/OTF versions of Newstroke, in which most of the converting work was done purely by me, by hand. That was used for a while, until readability issues came in.

Fast forward to 2026, I'm just on the right track of building CompassCAD NEXT. I don't want a gimmicky stroke font for CAD. I want true stroke fonts. Then I came across Fontobene again. Now this time, Claude handles the heavy parser logic lifting (still hard though), while I wrote most of the helper/lookup functions, as well as the glyph-to-command idea. That one was just called FontobeneParser. The parser turned out to be really good, and here I am, a library for all of you! Derakuma!

*It worked well!*

Seem to stick around? Love it? Good, now let me show you on how to use Derakuma on your project!

The (actual) implementation stuff

Alright, let's get started! First up, let's install it as a package! It may vary, but it should work on npm, yarn and bun.

npm i derakuma

Now, create index.js (or whatever your entry point is). I'm not going to show you the full code, as we will be walking through what each code does, so you'll gain knowledge, not just copy-pasting code you don't trust from the internet, or you'll end up making code you don't understand and if you modify a teeny-tiny part of the copypasted code, it will turn into a maze of spaghetti!

Now, after installing, depending on whether you use Typescript or JavaScript-as-module, the imports may vary. If you are using Typescript or Javascript-as-a-module, do that with so:

import { DerakumaParser } from 'derakuma';

Or if you are opting for a classic Javascript method:

const { DerakumaParser } = require('derakuma');

Now, DerakumaParser is the main parser object. You'll do your initial starting point for parsing, here. To initialize, it's just:

const myFont = new DerakumaParser('/path/to/your/bene/file.bene');

The path can be a URL, local resource relative to your script's working directory. If you want to use filesystem-based loading, you can. The key is to append the FontLoadMethod enum.

import { DerakumaParser, FontLoadMethod } from 'derakuma';

If you want it to be fetched (URL), set it to FETCH. If not, use FILE. This is Node/Bun only.

const myFont = new DerakumaParser('C:/path/to/your/bene/file.bene', FontLoadMethod.FILE);

For some .bene fonts, you can grab Derakuma's testing font library. If none of that suits you, you can grab a LibreCAD font (.lff) of your liking, then use an LFF to Bene converter.

Great, all done? Now, you can call ready() as an async, to wait while the font is being fetched and be ready for your use.

You should wrap Derakuma in an async function for the ready() or FETCH method to work.

const myFont = new DerakumaParser('C:/path/to/your/bene/file.bene', FontLoadMethod.FILE);
await myFont.ready();

Nice! That should do!

Getting your first glyph

That should be done for the initialization. Let's now grab your glyph! Say, let's grab the glyph commands for A. You can do so by doing this:

myFont.getGlyph('A');

If that succeeded, it should return a series of objects, called pen commands. These pen commands allow you to instruct to your rendering pipeline to render the fonts.

[
    {
        "command": "PD",
        "x": 3.43,
        "y": 9
    },
    {
        "command": "MP",
        "x": 0,
        "y": 0
    },
    {
        "command": "PU",
        "x": 0,
        "y": 0
    },
    {
        "command": "PD",
        "x": 3.43,
        "y": 9
    },
    {
        "command": "MP",
        "x": 6.86,
        "y": 0
    },
    {
        "command": "PU",
        "x": 6.86,
        "y": 0
    },
    {
        "command": "PD",
        "x": 1.29,
        "y": 3
    },
    {
        "command": "MP",
        "x": 5.57,
        "y": 3
    },
    {
        "command": "PU",
        "x": 5.57,
        "y": 3
    }
]

Alright, now how to pass that to our rendering pipeline? Simple. Pass the returned glyph as a variable:

const capitalA = myFont.getGlyph('A');

Now that's done, getGlyph fetches the commands and returns the commands to you. Since the commands are just PenCommand[], we can do so with this loop. Assuming we have ctx as a CanvasRenderingContext2D object, but feel free to adjust as your rendering pipeline!

capitalA.forEach((pen) => {
    if (pen.command === 'PD') ctx.moveTo(pen.x, pen.y);
    else if (pen.command === 'MP') ctx.lineTo(pen.x, pen.y);
    // There's no PU, because PU is just a marker for some applications (gcode, etc)
})

Congrats! You made Derakuma work!

If you want to explore more possibilities, undocumented here, you can either look into the Getting Started guide or the list of full API functions.

Anything to ask? Feel free to ask below!

Actually about CompassCAD: how and why I made CompassCAD

zeankun — Thu, 27 Feb 2025 12:54:00 +0000

Hey there! I'm zeankun.dev, here back after a long hiatus on dev.to. Weeewwww! 😅. I currently don't really have any topics to discuss about, but it might be interesting to actually talk about CompassCAD, a non-parametric 2D CAD software primarily for planners, building designers, to sketch their ideas. It's basically like a mini canvas for building designers. Now? It's almost proven that CompassCAD is still not really a fully-fledged CAD software at its whole, but you get the idea.

What's actually CompassCAD?

For those who love diving in deep, CompassCAD is a (cough cough, let me repeat that again) non-parametric, open source 2D CAD software. I purposely placed it on competition against AutoCAD, because competition and rivalry are both fierce. It is heavily based on a custom CAD framework I forked from WebCAD5 (in which the modified framework is released as CompassCAD Core) and Sunset UI (it's a scrapped project but it had the good looking UI I wanted, so basically, it's a bootstrap code for UI essentials for desktop apps I make). The entire framework itself was fully optimized by making heavy use of Electron's API so CompassCAD can fully interact with the system and deliver that same natural experience.

How and why I made CompassCAD (as well as some extra lore)

Let's rewind back to 2024. May 2024. Final IGCSE exams completed, and national assessment (according to Indonesian curriculum at that time), I had lots of spare time, or at least to say. I had too much free time after all of that exams. Basically, I realized that CAD has lots of potential in the market, so I began searching for CAD frameworks as a base. JavaScript was very easy to modify and tweak in terms of code, so JavaScript it is. Then I found WebCAD5, a community CAD project made by hacklabcz (originally by joebew42). So I cloned it, tried it on my Firefox instance, I was happy. I also downloaded my Sunset UI pack, and did a few sandboxes here and there, I was happy with WebCAD5 encased in Sunset's UI kit. I also wrote the very first code ever to be tweaked in WebCAD5, which were the essentials, some file operations, and undo/redo. Guess what? It worked well. I also set some socials up just in case people are curious about CompassCAD (those accounts were set up in my phone connected to a café's WiFi network). Some users even left good reviews, even as far as to contact FreeCADNews.
// Detect dark theme var iframe = document.getElementById('tweet-1806273477134962844-264'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1806273477134962844&theme=dark" }
Even until now, some praised me for creating a novice-friendly CAD software, even as far as being spoiled by my informatics teacher (I didn't ask for it, by the way!). Of course, I still maintain CompassCAD with WebCAD5 under the hood, with modifications that looks like bloat but actually useful for later on

Then checked for reviews on ODRS. What a shame!

In school, while having reinstalled Kubuntu, I'm bored at checking KDE Discover. I've checked that CompassCAD earned a saddening 2/5 stars (RIP). I also realized that Discover won't show the reviews, so I had to install two packages: GNOME Software and the Snap plugin for GNOME Software. Bam! -9999 damage. Critical ones.

Deckard, if you're reading this, you better apologize now :)

Boy, I've read that, and how ironic bro's gotta to compare to other CAD software. Second one is too long but gave a comprehensive reason why, unlike deckard.

But that's probably all.

How I made my very own YT downloader in Python

zeankun — Thu, 02 Dec 2021 12:18:52 +0000

Erm... let's think for a second, is it possible to make a YT Downloader in Python? Well, actually, it is possible to do one. And yes, I made one.

Why you should make your own YT downloader?

The reason why I made a YT downloader is to download YT vids without going to other third-party websites like y2mate.com (which I commonly use) and savefrom.net. And my download was disturbed by some 18+ content (i am a 13 year old dev) that is really annoying and really disturbing to see. And I got inspired to make CLDownloader because of a TikTok video found on my For You page that uses Pafy. Without further ado, let's go!

Let's go!!!!

You need the following thing to get started.

Python 3.7
PyTube extension (achieved by pip3 install pytube)
The CLDownloader gist (not needed if you want to explore around the code)

Okay, so you need that PyTube so we can download videos. You can do it by achieving this code.

pip3 install pytube

Otherwise, there will be an error running the script such as this.

Traceback (most recent call last):
  File "downloader.py", line 1, in <module>
    from pytube import YouTube
ModuleNotFoundError: No module named 'pytube'

After installing PyTube, we can check the presence by opening your Python shell and then type

from pytube import YouTube

If it outputs nothing, that means you succeeded!
Now we are creating a file called download.py. In the contents of download.py, import the PyTube we have did before. We will start with this loop.

while True:

Why I am putting a loop, you might be asking? This is because we need it if we want to download another video. In the loop, put a declaration statement as shown here.

link = input('Link: ')
yt = YouTube(link)

Now, we need to fetch the metadata of the video such as title, likes, etc. We will achieve it with this.

print('Title: ', yt.title)
print('Views: ', yt.views)
print('Length: ', yt.length)
print('Rating: ', yt.rating)

Output should look something like this.

Now, we will get the highest resolution and immediately download it.

ys = yt.streams.get_highest_resolution()
ys.download()

If you only set the download() only method, it will save on anywhere it wants (idk where it is basically). But if you want to specify a custom directory, place the dir in the brackets of the download. I am using the OSes default profile dir, so we have to enter it as this.

ys.download(os.path.join(os.path.expandvars("%userprofile%"),"CLDownloader"))

On any download (whether on the dir or the default) it will always appear the same and this downloaded video on the script we made is actually playable and keeps the resolution like this.

Now, we need the user's confirmation to download again or not. So we will enter this code.

retry = input('Do you want to download more videos?')
    if retry == 'y':
        continue
    else:
        print('See you next time!!!!!!!')
        time.sleep(2)
        quit()

The continue syntax here is used to loop again from the beginning of the while command. Our full program should look like this.

from pytube import YouTube
import time
import os

while True:
   link = input('Link: ')
   yt = YouTube(link)
   print('Title: ', yt.title)
   print('Views: ', yt.views)
   print('Length: ', yt.length)
   print('Rating: ', yt.rating)
   ys = yt.streams.get_highest_resolution()
ys.download(os.path.join(os.path.expandvars("%userprofile%"),"CLDownloader"))
   retry = input('Do you want to download more videos?')
    if retry == 'y':
        continue
    else:
        print('See you next time!!!!!!!')
        time.sleep(2)
        quit()

And that is the end of the tutorial, if you want the full one, you may have the Gist. That is all for now, if you have any issues, don't be hesitated to ask me. That is all for now, and I will see you next time.