Project Beyond

Just a Qwiki

Note: I’m writing this as I go so bear with me. The documentation on how to write a “restartless” Firefox add-on is sparse so apart of explaining how Qwiki works (and what it does) I’ll see if I can put together how to make a “restartless” Firefox add-on.

What is?

Qwiki is a simple wiki engine designed to make it easy to collect, sort, and search useful information. My goal is to make it as quick and easy as possible to install, learn, and use so I can get out of your way and you can get to whatever it is you do with a personal wiki engine. Qwiki is built around certain concepts that I really like: simplicity, synchronization, and integration. We’ll get to what these mean to me as we get into the implementation details.

Wildebeest Templates

Wildebeest is a very small and very fast JavaScript template engine with support for extensive customization through the use of macros. And it is part of my micro-lib collection HTMLBuilder. Want to go directly to source? Click here

(Source: maberly-art.com)

HTMLBuilder

Hello everyone!

I’ve written a neat JS micro-library with one thing in mind: creating DOM elements and inserting them into the DOM without doing a bunch of nasty string manipulation and I’ve done everything I can think of to make it fast. (If you have any suggestions I’d like to hear them, as long as they don’t include innerHTML :p)

HTMLBuilder exposes an object named builder whose methods do all of the cool, exciting DOM Manipulation! Here are the docs:

Methods

The basis of HTMLBuilder is builder.build() it takes the name of the tag you want, a hash of attributes you want your element to have, the content you want you element to contain, and and optional callback, all the methods have this and, unless you specify a callback, they all return a reference to whatever they’re working with So, to create a p element with a class attribute named “foo” that says “Bar” you do:

// Create an element
el = builder.build(['p', {"class":"foo"}, "Bar"]);

The only problem is, this element doesn’t exist anywhere in the document and it doesn’t do anything except, maybe, take up space. Enter builder.insert(). This method takes an existing element and appends an element created with build(). So, using our previous example, we take el and append it to an element in the DOM with an id of baz:

baz = document.getElementById('baz');
builder.insert(baz, el); // Nice and easy, right?

Cool, but what happens when you need to create a bunch of elements? Easy, use builder.polyBuild()! It takes an array of element definitions, like so:

[
    [
        "h1",
        {
            "class":"teh_awezum"
        },
        "Belch!"
    ],
    [
        "p",
        {
            "id":"lolz"
        },
        "Something really groovy"
    ]
]

But isn’t the point of this library to make this easy/fun? Yes.. Which is why we have these cool wrapper methods that speeds things up quite a lot, actually. They’re called builder.make() and builder.factory(): make creates an element and immediately inserts it into the DOM, factory on the other hand makes it easy to make lots of elements and a callback inserts them into the DOM.

// Creates <p class="foot">Light My Fire</p>
// and appends it to 'baz'
builder.make(baz, ['p', {"class":"foot"}, "Light My Fire"]);

// Creates five <p class="foot">Light My Fire</p>
// and appends them to 'baz'.
builder.factory([
    [
        "p",
        {"class":"foot"}
        "Light My Fire"
    ]
], 5, function (els) {
    builder.insert('baz', els);
});

Last, but probably not least, we have: builder.destroy(), it takes an element and deletes it. (Did you really think it was going to be more exciting than that?)

If you want to take a look at the source code the ‘source’ for this post is the github repo.

(Source: github.com)