dean.edwards.name/weblog/2007/05/miniweb/

MiniWeb

I just made some updates to the base2 source code. There are some bug fixes for base2.DOM and a number of new libraries. For the time being I am only supporting the base2.DOM library. After I have documented the base2 core I will support that too.

I’ve also uploaded a toy application that I’m calling MiniWeb. MiniWeb models an entire web site in a single HTML page. All of the site files are stored in a JSON object which you can navigate with a UNIX-like shell or the system browser. It has a built-in templating system and has an approximate separation of client and server. It is in its infancy but is still kind of fun to play with. Parts of it are clearly unfinished but you will be able to get the idea.

So please, go and play with MiniWeb and let me know what you think:

http://base2.googlecode.com/svn/trunk/src/apps/MiniWeb/MiniWeb.html

Warning: This may crash Safari. I think it is related to a nasty bug so may be unfixable.

I am open to all sorts of ideas on this so feel free to contribute your suggestions.:-)

Comments (56)

Leave a comment

Error: missing formal parameter
Source File: http://base2.googlecode.com/svn/trunk/src/apps/MiniWeb/engine-f.js
Line: 1361, Column: 24
Source Code:
	toJSONString: function(boolean) {
  • Comment by: Johann
  • Posted:

very interesting. this would be handy for self contained stuff like documentation. down with PDFs!

  • Comment by: shaggy
  • Posted:

@Johann – well I said it was unfinished and it is pretty buggy in places.:-)That said, can you provide a bit more info? Which browser? What you clicked on? etc

If you start editing stuff then you can easily break MiniWeb yourself anyway.

  • Comment by: -dean
  • Posted:

Reminds me of TiddlyWiki…

Can’t do images, though, unless you know a way of doing images inline in IE that I don’t know — data urls don’t work, JavaScript URLs don’t work, etc, etc, unless someone’s come up with a new technique I don’t know about. You can’t even use XBMs any more; IE7 dropped support for them:(

  • Comment by: sil
  • Posted:

You should work for Google Dean! And this could be your 20% project, and get paid for it!

Amazing stuff mate.

I get the same missing formal parameter error in Firefox. No clicks, this is on load.

  • Comment by: Jef Poskanzer
  • Posted:

@Andrew – TiddlyWiki is brilliant and was an inspiration for MiniWeb.

@sil – You can still link to images on the web. They just will not be visible when you are offline.

@Jef – Which version/OS?

  • Comment by: -dean
  • Posted:

@sil, dean – Maybe you could use the .mhtml format and the cid: URI scheme for images?

  • Comment by: Justin Piper
  • Posted:

Very cool. Now I just need to think of some project I could use it on so I can justify spending the time to mess around.

  • Comment by: david_kw
  • Posted:

Cool, combine with the synchronizer in

https://bugzilla.mozilla.org/show_bug.cgi?id=379517

and you’ll have a file synchronizer;)

I don’t think it even *loads* in Konqueror…

Check it out. Nothing happens. It loads for a little while and does nothing. Whoo!

  • Comment by: Matt
  • Posted:

Justin: yeah, except that mhtml isn’t supported outside IE (the Mozilla MAF extension supports it, but that’s not there by default).

Dean: indeed, but if you can see the internet then I’m not sure what the point of packaging up something into one file is:-)

  • Comment by: sil
  • Posted:

Ah, whoops. I guess I should have checked to make sure that works first. I kind of expected Firefox would at least be able to display MHTML, considering Thunderbird would have to support something similar to deal with HTML email.

  • Comment by: Justin Piper
  • Posted:

@sil – true.:-)But I was thinking of cases where they are not primary content. Google’s rounded corners API for instance.

  • Comment by: -dean
  • Posted:

@Matt – Konqueror is based on WebKit so it is likely to suffer the same bug as Safari. Never mind. MiniWeb is an HTML-based application not a web application. So, as long as you can open and edit it in one browser (Firefox), then your content is still available. I will try to add Safari support later though. Another problem with Safari/Konqueror is that there is no access to the local file system, so MiniWeb would be read-only in those browsers anyway.

  • Comment by: -dean
  • Posted:

This is fantastic and absurd like tiddlywiki. Tiddlywiki makes sense as a personal notebook – this one seems like a whole website in a page…

  • Comment by: Matt Katz
  • Posted:

@dean: Actually, it’s the other way around, although they tend to share many of the same bugs since WebKit as it is now is mainly a Cocoa-fied version of KHTML with bugfixes and new renderring features.

And alright, I think I see why this would be useless in Konqueror/Safari if that’s the case. Still a cool idea, though.:)

  • Comment by: Matt
  • Posted:

@Matt – seeing as you are a WebKit expert:-), could you have a look at what is making MiniWeb crash that engine? I find Safari hard to debug.:-(

  • Comment by: -dean
  • Posted:

I have the same error than Johann. It’s in Safari (and it does not crash) If I have time I will try to find why Seb

  • Comment by: seb
  • Posted:

[…] May 4th, 2007 Dean Edwards: MiniWeb MiniWeb models an entire web site in a single HTML page. All of the site files are stored in a JSON object which you can navigate with a UNIX-like shell or the system browser. It has a built-in templating system and has an approximate separation of client and server. It is in its infancy but is still kind of fun to play with. Parts of it are clearly unfinished but you will be able to get the idea. […]

[…] Blog: http://dean.edwards.name/weblog/2007/05/miniweb/ […]

Dean,

the console message I pasted above is from Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.13) Gecko/20060414.

And no, it’s stil there;-)

  • Comment by: Johann
  • Posted:

[…] MiniWeb – visa svetainė viename tinklapyje. Nors atrodo, kad lankote įvairias svetainės vietas, viskas telpa į vieną tinklapį. Primena TiddlyWiki. (Reddit) […]

@sil, dean: I can not find the link, but I once saw a solution for image embedding in IE:

IE can handle ‘javascript:’ urls for images as long as they are XBM-Images. These XBM-Images are black and white only. Use filters to make them coloured, let one colour shine through and change the opacity. Then place multiple of those XBM-Images on each other to have multicolour images. IIRC that even works with dynamically created images.

In case it is not IE, simply expect the browser to support ‘data:’ urls.

@Christof – XBM support was removed in IE7.

  • Comment by: -dean
  • Posted:

Hence why I said “You can’t even use XBMs any more; IE7 dropped support for them”:-)

Am I right in thinking that there is now no client-side-only way of generating an image at all in IE7? Apart from VML, of course, which might be the best solution (especially since you can use SVG everywhere else), or ExplorerCanvas.

  • Comment by: sil
  • Posted:

I think that if someone binds ‘document’ to base2.DOM then ‘addEventListener’ should be attached to ‘window’ too. Anyway, very good framework, thanks:)

  • Comment by: ffrk
  • Posted:

BTW, since you mentioned that you’re planning to document your code, you might want to consider to use jGrouseDoc (http://jgrouse.com/docs/jgdoc/jGrouseDoc.html).

No tool is perfect, so the list of alternatives could be found at http://en.wikipedia.org/wiki/List_of_documentation_generators

  • Comment by: denis
  • Posted:

@dean: damn it. I was planing to use that for a kind of drawing application. IECanvas is not an alternative, because the Application should be able to do setpixel() and getpixel() with almost all Pixles on a rather huge canvas (8092x2048px). IECanvas will be too slow for so many 1 Pixel Objects. I guess I will have to fall back to Java for that:-(

@sil: sorry, I did not read your post closely.

Reminds me… Flash sites)))

This is really great. I see a ghosted option for Markdown input in the blog example. Are you planning to accept Markdown in MiniWeb templates too? I’ve done a JavaScript port of Markdown, if that helps.

  • Comment by: John Fraser
  • Posted:

crazy thing but some genius in it too. i like to play with its really funny. it works here without problems on firefox 2.0 + win2k and IE5.0 + XP. good work!

  • Comment by: Dan
  • Posted:

Hi Dean,

A bit off topic… I’ve noticed in the source code that you use “new function(_){….}” to wrap everything in a closure – I’ve been using “(function(){…})()” instead – is one ‘better’ than the other – or is there no real difference… if this is too complicated to answer don’t worry.

Great work btw!

Dave

  • Comment by: Dave
  • Posted:

The idea is simple and genial at the same time. I wonder how an entire website can be “included” in a single HTML page. Perhaps this mechanism could become the future of the web!

  • Comment by: Alberto
  • Posted:

I also would like to know the answer to the Dave’s question (#35)

  • Comment by: ffrk
  • Posted:

@Dave/ffrk – there is no real difference. I use new function because I also use the object created by the new operator.

  • Comment by: -dean
  • Posted:

Thanks Dean

  • Comment by: Dave
  • Posted:

Very nice, you are acheiving some very nice things when you look at what the script is run from.

I think the biggest flaw in my opinion is not being able to directly link to urls, because of the # (is it called a fragment in a URL?).

But very nice job, atm I suppose it is just a ‘toy’, but i’m sure something good could come of it.

@dean/Dave/ffrk well, there is a difference: new “new function() {…}” creates a new object which “(function(){…})()” doesn’t. If you use the created object (this) use new, otherwise you can spare a little bit of time and memory by using (function(){})(). Usually the difference is not really notable.

@Alberto: No this technique will not become the future of the web, but it might be an alternative for documents on CD or harddisk. In the Web the user would have to download too much stuff he is not really interested in.

the mini-web is a nice toy to play around with it but i don´t know how it works, java-script is a book with seven seals for me. in my eyes your a little java-script-god well done good work!

@ #40 If I got things right, there shouldn’t be any problem with directly linking to URLs. There’s nothing wrong in using links with anchors. Acutally, they are great, because they update everytime you navigate through the directories. Search engines would only show the main page, but they don’t render the rest anyway.

  • Comment by: Kevinin
  • Posted:

[…] You can also use the xulRunner “portably”. I quoted that because, while the POWUSB package includes both Windows and MAC xulrunner versions (no Linux yet either!), it isn’t exactly portable in the way that say, FirefoxPoratable is. In other words, if you run the included xulRunner on Windows, it will still leave files on your local file system. To make this truly portable, you’d need to refrain from leaving footprints on the system you’re using, therefore this really doesn’t qualify as a portableapp quite yet… I thought I knew a thing ‘er two about javascript (I taught myself javascript, and after HTML it was the first interpreted language I learned, and so far I’ve had no formal training in with ECMA specific code), then I saw Dean Edwards website. This guy (and his commenters) must live on planet ECMAscript for crying out loud (if you don’t believe me take a stroll through Mr. Edwards’ website and take a look at his projects and comments on his work, just freakin’ fantastic – from a programming point of view). Anyway, what I really geeked out about was his MiniWeb application. […]

Dean, implementation of CSS Selectors in recent version of base2 (i have downloaded it today) is completely broken. It’s failing in not one case, but many. For example:

someElement.matchSingle(‘ul li’) this will find me first ‘li’ element in a document – not in a someElement

fieldset.matchAll(“label, input, select, textarea”).lenth this will return 0, while in my case should return 10

and probably there are many other problems. In version that I have on my computer everything works fine.

  • Comment by: ffreak
  • Posted:

@ffreak – Fixed now. You can report base2 bugs on the issues page:

http://code.google.com/p/base2/issues/list

  • Comment by: -dean
  • Posted:

Hey Dean, Any chance there will soon be a documentation of Base2 in German or at least French? Regards Sandra

@Sandra – although I suspect that your comment is sophisticated spam, I will answer it anyway. There isn’t any documentation for base2 yet. When there is I will try to get some translations made. I can’t do it myself as I am a native English speaker and therefore speak no other language.;-)

  • Comment by: -dean
  • Posted:

Dean Your right it’s sophisticated spam but when someone from commercial website want to comment everyone think the only thing he wants is to make spam but a lot of users wants to say something and get some link love. That’s why i use my name when I comment. btw. I tested MiniWeb and it’s great im not native English speaker so sorry if I write something wrong.

[…] Previous post: ← MiniWeb […]

[…] Diesen Mai hatte Dean Edwards eine wirklich coole Idee: Eine komplette Website in einer einzigen HTML-Datei! […]

[…] Dean Edwards: MiniWeb jak do jedne stranky html nacpat cely web (tags: js html) […]

MiniWeb is one cool little application. I had some fun playing around with it. Nice work Dean!

  • Comment by: John
  • Posted:

Hello Dean,

nice application. However it seems broken at this moment (the error I get is: reduce is not defined ; I had tried it a few weeks ago and was impressed then) Have you checked google gears? I will do some experiments with google gears in the near future. Perhaps a nice experiment would be porting miniweb to that platform.

Jan.

  • Comment by: Jan
  • Posted:

@Jan, fixed now.

If you want to port MiniWeb to gears you only need to change the FileSystem class.

  • Comment by: -dean
  • Posted:

MiniWeb seems to be a great attempt… and awesome implementation of all the work you did on base2 library all these days… Hope to get inspire and come up with good concepts and share it with you.

Comments are closed.