DEV Community

My first finished project in 7 years!!! :)

Keff on October 03, 2023

Hey! It's been a while since I've written anything here. It's been a weird last few months. But I'm glad to be writing again. Hope you're all doin...

Read full post

Eckehard • Oct 4 '23

Hy,

you should definitively check out my DML-project, which has quite a similar approach, so things will feel quite familiar to you. Instead of attach it uses selectBase, which is pretty much the same.

DML exposes most HTML tags as functions, so you can simply write button("Press me") to create a button with some text. Initially, all DOM elements are appended to the document body, but you can select a new basepoint anytime. This might look like this:

selectBase(div("","border: 2px solid red;")
   p("Hello world")
   button("Press me").onclick(() => alert("button pressed"))
unselecBase()

You will find more examples to play around on the homepage. Please let me know what you think! The Version of DML currently on the web is a pretty early state but perfectly usable. V2 is about to be finished, but this also took me 3 years now. See, you´r not alone...

There is another intrestinig project on github called VanJS with a similar methodology, but a different approach to compose your site. VanJS can run both on the server and on the client side and has some really cool tricks to keep the library as small as possible.

Keff • Oct 6 '23

I just went and did it. I've made a project inspired by Hobo and DML that works at runtime. Take a look if you want! github.com/nombrekeff/cardboard-js

It's still quite raw and simple, but I think it's useful already!

Keff • Oct 5 '23

That's very interesting, I went on that route for a bit while developing Hobo. But it did not feel right, in my case, I just wanted to generate HTML and wanted it to be quick to make (I made Hobo in less than a week). But I might revisit it in the future and make a version that works runtime similar to your project and VanJS!

One question though, when you create a tag, for example, button, is the result an HTMLElement or do you have some wrapper around it?

And would you be up to giving me a couple of tips, in case I decide to make hobo runtime? We could both benefit from working together, as they're quite close.

Eckehard • Oct 5 '23 • Edited

DML generates DOM nodes directly at runtime. This is quite powerful, as each function returns a DOM reference. No need to use "getElementById()" anymore, just store the value in a variable and you have direct access to the DOM. This enables some interesting options to build applications.

VanJS can run in both modes, directly on the DOM or on the backend using NodeJS to create HTML. Both approaches have their pro´s and con´s, but working on the DOM has some big advantages.

You might hear that using Javascript to generate the DOM is slow. In practice we see, it is not. If you check the page performance of the DML-hompage (which was created using DML only), it is quite brilliant:

I would really appreciate to combine the efforts. It would be interesting to have a code that can run on the server side and on the client.

There are some examples on dev.to that give some insights, for example an small working desk calculator in 61 lines of code that implements and uses some of the core routines too. Maybe you find also some inspiration here: The magic function. This is one of the core functions of VanJS slightly adapted to generate tag functions.

If you want so share some ideas to add a HTML-rendering capability to DML, this is most welcome. Happy coding!

Keff • Oct 5 '23

Very interesting, very interesting. I'm now fiddling with making a version of hobo that works at runtime similar to your project.

Feel free to use hobo as inspiration or even fork it if you want to make DML work server-side. Or if you want any advice or anything please reach out! I think I could modify hobo to render DML. Is DML open-source? If so, I could take a look and maybe, just maybe, hobo could be able to help :)

I did something similar to the magic function, but I wanted to have autocomplete for every tag. So I ended up doing this (this way you can know exactly what tags are available):

const tagNames = allKnownTags;

type BuilderFunctions = {
  [key in ValidTagName]: ((...children: ValidTagChild[]) => Tag) & TagBuilder;
} & {
  tag: (tagName: TagName, ...children: ValidTagChild[]) => TagBuilder;
};

let fns: Partial<BuilderFunctions> = { tag: tagBuilder };

for (let tname of tagNames) {
  fns[tname] = tagBuilder(tname);
}

export const builders = fns;

I also enjoyed the idea of first configuring the tag, and then adding children. Otherwise, things like the id, class, styles would be at the end. This is harder to do on runtime without having to call some method at the end of the chain. Some thought is needed here!

Keff • Oct 5 '23

Hmm, just realized why you need that magic function at runtime xD

Eckehard • Oct 5 '23

Oh, that`s a general pattern.... just a nice Javascipt gimmick, but sometimes really handy

Eckehard • Oct 5 '23

VanJS objects can have an indifinite number of children given as an argument list, but I found this approach limiting and hard to read. DML mimicks the way HTML works: Any object created is immediately appended to the DOM. This gives you space to work with the objects. Styles and classes are given as a second argument, if needed.

tayyaba • Oct 7 '23

woow that is informative

Ben Halpern • Oct 3 '23

Good stuff. Pretty clean interfaces here, I could definitely see why you'd want this to exist.

Keff • Oct 3 '23 • Edited

Cheers, I still think I could improve them a bit. But good enough for now!! Let's see if anyone finds a use for it 👍

Peter Weinberg • Oct 5 '23 • Edited

This is a cool idea! But one piece of feedback is that by abbreviating method names in the API I think it actually becomes less intuitive and creates a higher barrier for entry for any developer onboarding into a codebase that uses this or a similar API. For example, if I have no prior knowledge of hobo and I start reading some code written with it, it's very likely I'll have to visit the docs to understand things like aa, m, rc or mc, or even b which could be a little ambiguous (build or b tag?). Sure, context will help for methods like as or ac and I was able to infer many of the method meanings in the examples from the abbreviations, but addAttribute, removeClass , modify Class, addStyle, etc. don't sacrifice much space and make the code much easier to understand, especially for readers with no prior knowledge of your library (which is a very realistic scenario when a developer joins a new team and is thrown into a codebase). If other method names were expanded, then one could safely assume anything that's still abbreviated is just a tag name. Anyway, I know it's just a side project and kudos on seeing it though to completion! I also know how hard that can be. Just some food for thought. Thanks for sharing your experience! And btw, the library's code is also pretty cool - seems like there were some interesting challenges to solve here.

Keff • Oct 5 '23

Thanks for the feedback. Yup, I totally agree. I normally tend to not abbreviate methods for the exact reasons you mentioned. The only reason why I did it was to make it as compact as possible (to remove noise and make it faster to write). I know they can be a bit unintuitive, but the good thing is, there are just a few methods, so they can be learned quite quickly. I also never intended this to be used by other people, even though some might use it, so I decided to go that way.

I also thought of adding both options, the complete name and the abbreviation. And let the end user select the style they want to use. That has its own problems though xD

So yeah, I might leave it like this for now and might refactor it if enough people find it useful and start using it.

It was quite interesting to make, not too complicated, but challenging enough to keep me focused! Glad you like it, and cheers for the feedback again!

RedbeardJunior • Oct 3 '23

Ohhhh jeej you pulled me in your story, I can related at the moment I'm working on a big project myself and always started and not finished something.

But at this project I'm currently working I'm hungry enough that I WILL FINISH this project.

Thank you for righting this article.

Good luck with your journey.

Keff • Oct 3 '23

You've got it man!! Best of luck with your project! Just don't make it a java applet 😜

RedbeardJunior • Oct 3 '23

haha yes yes I will make it ! 65% is done I hope to release it end of the month !

lionel-rowe • Oct 6 '23

Congrats on finishing your project! I struggle with the same thing, my side projects consist of hundreds of half-finished PoCs and only a couple of "finished" ideas (of course, nothing is ever truly finished as you can always improve on it... but I consider any working MVP to be at least "temporarily finished").

If you're interested, check out Hyperscript (somewhat similar to your finished API, but more strictly declarative), as well as Emmet (a bit like your early DSL-based approach). And of course there's the OG DOM manipulation library, jQuery, as well as its smaller, lighter, server-side-friendly cousin Cheerio.

Keff • Oct 6 '23

Thanks! As you said, it's never really finished. I considered it finished as it does everything I wanted it to. But yeah, I'm sure I'll be working on it more xD

Ohh good old jQuery! It's been a while since I heard about it or used it! Good times :)

Bruce Wells • Oct 5 '23

I did the same thing, but in PHP. I hate writing HTML, and most people get it wrong anyhow. My sites validate at 100%.

Basic concept is most everything is an HTML5Element, then you call add() method to add child elements (nodes). You can check it out here on a site built entirely on this concept:

phpfui.com

Steven • Oct 4 '23

Wanna hear something crazy? I have a side project I've been working on for 20 years that's 90% done. Almost the polar opposite of yours it's a language like PHP that adheres as closely to html as possible. The name of my language? STML.

Keff • Oct 4 '23

What does STML stand for in your project?? In my case it was an abbreviation of stimule. I had a reason back then, but can't remember why now 😂

Keff • Oct 4 '23

That's awesome!!! What a cool name 😜 ohh that remaining 10%. Best of luck!

Steven • Oct 4 '23

Thanks I'll need it, I have nearly the exact same issues finishing a project that you describe. And it is a great name, just googled 'stml language' and there seems to be at least 10 different languages using it.

Vsevolod • Oct 3 '23

Comrade, congratulations!!! This is a really difficult matter, it is difficult to reach the end. I really appreciate it and wish you luck in your next endeavors!

Steven • Oct 4 '23

Originally simple template markup language. Or Stevens. Or super/sucky. Was leaning towards making it superlative-of-your-choice since there's so many good words starting with a I could never quite pick a favourite

Prince Muel • Oct 6 '23

Everything you said is me right to the 't'. I take it though as a learning process, finding out more about myself and the way I think.

s h i • Oct 5 '23

Hey congrats! That’s awesome!
Reminds me of pug template days

Keff • Oct 3 '23

One last question for you, I don't have a use for it currently, but what would you use Hobo for? if at all

Pendragon_123 • Oct 4 '23

cool

Carlos Verdes • Oct 7 '23

Have you tried Jade, I had the same pain as you with HTML and this library felt exactly as what I needed

jade-lang.com/

Keff • Oct 7 '23

Yup, Jade was the original inspiration for STML! It's ironic because I don't like writing HTML but I also have never used Jade or other similar languages seriously xD

CitronBrick • Oct 4 '23

Love this. It looks really neat.

Does this qualify as a DSL ?

Keff • Oct 4 '23

Thanks! I'm glad you like it!

I guess it could qualify in some sense! Html is one iirc, so I guess hobo is also somewhat os a DSL, but with all of the power of JavaScript on top... 🤷

Comment deleted

ahsanrashid • Oct 11 '23

new dress

Dhanraj800 • Oct 9 '23

Thanks Keff, I Want Help to Rajasthan Govt Job