I like to use my own copy of tinyhut for a few things: it's my browser homepage, as you might expect, but it's also a base to start from when I'm using a public computer. It's more useful to me than a bookmarks bar, since I can get to it easily (just open a new tab and click "home") but it doesn't take up screen real estate. Finally, it lets me submit to search engines that aren't default options in the browser search box, or whose massive splash pages I don't want to load up just to search (eg IMDB).
tinyhut basically consists of two visible pages: the static version that you see in the base directory, and the dynamic, editable version you see in the "/edit" subdirectory. The static version is meant to be very lightweight, so it loads up quickly--the default install gives you a page that adds up to around 28kb, including the favicon and the stylesheet.
The dynamic version of the page is of course much more complicated, since it's taking on the weight of providing a simple and powerful GUI. Instructions on using it follow.
tinyhut should work in any modern browser. It works best in Firefox, because I use Firefox. It works very well in other standards-compliant browsers such as Google Chrome, Safari and Opera. It works in Internet Explorer 7, but it's not pretty. I sincerely doubt it works in IE 6 and I have no interest in making it do so. I have high hopes for IE 8, but the regrettable necessity of keeping IE 6 around for day-job testing purposes keeps me from trying it out.
tinyhut's editing interface is meant to be pretty self-explanatory, but of course that only really works if you created it.
tinyhut is basically a method of organizing links and simple forms. It does this with a hierarchy: metaboxes (currently implemented as vertical columns) contain one or more boxes, and boxes contain one or more sections. Each section has a header (which may be a hyperlink) and a list of items. Items contain one or more links and may or may not contain a form.
Let's say you've just installed tinyhut on your web host, opened it up and are now seeing the default list of links. You probably want to change them, since the whole point of installing this software is to let you easily customize your homepage. So click the "Edit this page" link at the bottom of the rightmost column. If you've followed the HTTP authentication setup instructions, you'll get challenged for a username and password. (Good for you.)
You can also try almost all of this out on the tinyhut demo installation (the username and password there are demo/demo).
Once you've passed authentication, you'll see a slightly bloated-looking version of the same page; hover over some of the sections and you'll see buttons appearing. As you might deduce, a red button with an X on it means "delete this thing;" a yellow button with a square on it means "edit this thing;" and a green button with a plus sign means "add something new." Clicking on any of those (or on any of the links, which is the same as clicking "edit") will slide out a little form asking you for confirmation or more information.
First, let's delete something. You don't actually need a link to google.com, do you? Hover over the "Google" link, then click the little red X next to it. tinyhut will ask you if you're sure; click "yes." The form will slide up, the item may pulse for a moment, and then the link will be gone.
You'll notice that the "News" and "Maps" links next to it remain. Because there were multiple links within that item, it didn't get rid of all of them. Let's do something a little more drastic.
There's probably (depending on whether the demo link set has ever been changed) a little box on the bottom right with the header "Tar Pits." Above that should be a label called something like "Box 3.2." Hover over "Box 3.2" and click the delete button again, then "yes." Boom! It's gone.
Now hit the "Quit Editing" link over on the right. You'll notice that "Google" and "Tar Pits" are still present in the static version of the page--that's because we haven't published our changes. Everything we see in the editor is just a temporary copy until we do that.
Click "Edit this page" again to get back to the editor, then click "Reset This Page." Again you'll get a confirmation box--hit "yes." The page will reload from the original source and "Google" and "Tar Pits" will be restored here too.
Over on the left you'll see a list of webcomics (this is basically the entire reason tinyhut exists). It doesn't include Kate Beaton's wonderful history comics, because I get her updates via LiveJournal. But maybe you don't! Let's add a link for her.
Hover over the "Not Daily" section and click the green plus sign. You'll get a dropdown box that says "Adding Item." It wants the name of the site you're linking (purely for your own reference) and the URL. Type "Hark, A Vagrant" in the "Name" field and "http://www.harkavagrant.com/" in the "Link" field, then click "add." The section will pulse for a second, and then you'll see the new link at the bottom.
You can also create new boxes or sections to organize your links, or create a new link within the same item (which will append it horizontally, as in the "News" and "Maps" links next to "Google").
But getting back to Hark, A Vagrant--why should it be at the bottom of the list? Let's put that item at the top. Click and drag the link upwards, and you'll see a horizontal bar indicating where it's about to be dropped. Release it and the item should snap to its new place in the list.
ALPHA RELEASE NOTE: Yes, I know drag-and-drop is really jittery right now. I'm working on it.
You can even drag that link out of the webcomics list entirely and plunk it in between, say, the rot13 form and IMDB. You can also drag entire sections or boxes around to rearrange them in your preferred locations--just grab them by the section's header or the box's "Box X.X" header.
What if you made a mistake typing in that URL? Click the "Hark, A Vagrant" link or the yellow button next to it.
ALPHA RELEASE NOTE: For some reason Google Chrome makes you double-click edit links sometimes.
You'll get another dropdown with the name and URL already filled in. Correct the link and click "edit" to fix it.
You can also edit columns, boxes and section headers. The former two only have one field for editing, called "Class." This is used to apply CSS classes if you want to change the appearance of a given piece of the page. You may notice that the leftmost box has the class "left," where the middle and right boxes have the class "right"--that's a special class in the default stylesheet that controls the text alignment of the links within it.
If you don't like any of these changes, remember, you can always hit "Reset This Page" and start over.
If you do like them, click "Save Changes and Publish." You'll get the confirmation box, and if you hit yes, all your changes will be recorded back to the source document. You'll also be taken back to the static version of the page; you should see your changes reflected there, but if not, refresh the page and they should appear.
(For obvious reasons, this step won't work on the demo page--you'll get an error message instead.)