How this site works

As of April 20, 2012 this is the leading edge. So I want to tell you how I did this site, how I edit it, and whatever else comes to mind.

Screen shot

First, here's a screen shot showing what my screen looks like as I write this.

Two goals

Now, here's what I want from my writing environment.

1. An attractive and useful site. It should be easy to read and convey all the ideas and information I want to, as a writer, convey. It's good if it uses the latest technology in a tasteful and perhaps suggestive way. It should suggest more cool stuff we can do from here. Because that's always possible.

2. Maximum leverage for the writer. I want as much of the tech to be hidden in a black box, out of the way of the writer. I want this for two reasons. First, I can focus more of my attention on the writing and less on how to get that on the web. And second, the more the tech is in a black box, the more people will be able to use it, giving it maximum leverage for humanity.

This tool, which is called the "homepage nodetype" give good tool on both of these counts.

Part of the world outline

World Outline is an unusual piece of software. It's not like anything I've ever seen. Here's how I would describe it.

It's like an networked operating system for outlines. Outlines are structures of text with attributes. The attributes control how stuff is displayed, where the page breaks are, what's a site and what's a page, what domain is attached to this page. Whether or not comments are enabled for a page or a site. Etc. There's been lots and trial and error over the years, ideas tried out that worked, and ones that didn't. Hopefully you won't see many of the latter, and lots of the former.

This site and all its page are in one big outline, which you can download into your outliner or text editor.

How all the pieces fit together would take the better part of a semester to explain in detail, but reading the source and puzzling it out is probably the best way to approach it.

I've developed a language for something that I don't think there's ever been a language for. So it's definitely hard to explain. But that's something that's true of all new things, imho.

Bootstrap 2.0

Anyone who's familiar with the Bootstrap Toolkit will recognize the design of the home page as being straight from their examples. That's deliberate. I want people to see that this is a rendering engine, and that any template can be used to render content. That's entirely up to the designer.

As someone who is still new to CSS and Javascript, I totally appreciate having Bootstrap around. It makes it possible for me to have sites that look like they come from the 21st century. :-)

Here's a screen shot of the two templates this nodetype uses. When it's released you will be able to supply your own (this code is still very much in process).

There's been a lot of evolution and de-evolution in templates of web content. The best example I've seen lately is Tumblr. They've done a lot to preserve the tradition of users-as-designers. I can't find the templates in WordPress, if they exist. They aren't present in either Facebook or Twitter. Not saying that's a bad thing. :-)

But we need a good open user-runnable environment that's wide-open to templates. Making sure it worked with Bootstrap gave us one point in common. That suggests that there will be others. And makes sure we didn't miss the mark, CSS-wise, by too much.

And we got a lot of cool features along with it, like modal dialogs, tabs, popovers, twipsies, icons. It's been very good for this project to have Bootstrap around. Please, more of that, and perhaps other simpler approaches. Anything that makes it simpler (see the two goals, above) is good.

Applying CSS to structure

There's a very interesting CSS-related feature in this environment called Rules. It allows you to broadcast styles according to the user-editable structure of a document. This brings CSS-like power to writers. I know it works, because we used it in our outliner in the 1980s and the users loved it. This page is styled with rules, for example (the home page is not). And notice that the sections can be collapsed. This is a fallout from having the rendering being done with outline rules.

Posted on Friday, April 20, 2012 at 9:26 AM by Dave Winer.